:root{color-scheme:light;--bg:#fff;--surface:#fff;--soft:#f9fafb;--line:#e5e7eb;--ink:#111827;--muted:#6b7280;--brand:#6465e8;--brand-soft:#eef2ff;--canvas:#f4f5f7;--row-hover:#e9ebef;--row-active:#e2e5ea;--primary:#111827;--primary-fg:#fff;--danger:#b91c1c;--success:#15803d;--success-bg:#f0fdf4;--amber:#92400e;--warning-bg:#fffbeb;--danger-bg:#fef2f2;font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#000;--surface:#0d0d0d;--soft:#1f1f1f;--line:#303030;--ink:#f3f4f6;--muted:#9ca3af;--brand:#8586ef;--brand-soft:#1e1b4b;--canvas:#000;--row-hover:#1c1c1c;--row-active:#262626;--primary:#f3f4f6;--primary-fg:#111827;--danger:#fca5a5;--success:#86efac;--success-bg:#052e16;--amber:#fcd34d;--warning-bg:#451a03;--danger-bg:#450a0a;--chart:#7475eb}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{outline-offset:4px}button:focus-visible,a:focus-visible{outline:2px solid var(--brand)}input:focus-visible,textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-.8px;line-height:1.3}h2{font-size:19px;letter-spacing:-.3px}small,.muted{color:var(--muted)}.muted{margin-top:7px}code,pre{font:12px/1.7 ui-monospace,SFMono-Regular,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft);padding:20px;border-radius:10px;max-height:450px;overflow:auto}label{display:grid;gap:7px;font-weight:500}input,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;min-width:0}textarea{min-height:100px;resize:vertical}form{display:grid;gap:19px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-weight:550;white-space:nowrap}.btn:hover{background:var(--soft)}.btn.primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}.btn.quiet{border-color:transparent;background:transparent}.btn.danger{color:var(--danger)}.btn.destructive{background:var(--danger);color:#fff;border-color:var(--danger)}.btn.destructive:hover{background:color-mix(in srgb,var(--danger) 88%,#000)}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.card{background:var(--surface);border:1px solid var(--line);padding:26px;border-radius:14px}.card h2{margin-bottom:18px}.stack{display:grid;gap:20px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px}.badge{display:inline-flex;padding:3px 10px;border-radius:20px;background:var(--brand-soft);color:var(--brand);font-size:12px}.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:11px;line-height:1.7;white-space:nowrap}.pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}.pill.green{background:var(--success-bg);color:var(--success);border-color:transparent}.pill.amber{background:var(--warning-bg);color:var(--amber);border-color:transparent}.pill.red{background:var(--danger-bg);color:var(--danger);border-color:transparent}.notice{padding:14px 18px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--muted)}.error{color:var(--danger)}.empty{text-align:center;padding:55px 20px;color:var(--muted)}.empty h2{color:var(--ink);margin-bottom:7px}.empty .btn{margin-top:20px}.brand{display:flex;gap:9px;align-items:center;white-space:nowrap}.brand img{width:40px;height:40px;flex:none;object-fit:contain;background:#fff;border-radius:10px;padding:2px}.brand strong{font-size:23px;letter-spacing:-.8px}.brand-word{display:inline-block;line-height:1}
.brand-sub{font-size:11px;letter-spacing:2.3px;color:var(--muted);margin-left:7px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--brand);font-weight:600;margin-bottom:16px}.auth-card>.muted{margin-bottom:28px}.auth-card form{margin:22px 0}.auth-card .social{display:grid;gap:10px}.divider{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:12px;margin:24px 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.consent{display:flex;align-items:flex-start;font-size:12px;color:var(--muted);font-weight:400}.consent input{width:16px;height:16px;margin-top:3px}.auth-footer{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px}.auth-footer a:hover{color:var(--brand)}.sidebar>.brand img{width:34px;height:34px;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:500;font-size:12px}th,td{padding:15px 14px;border-bottom:1px solid var(--line)}tr:last-child td{border-bottom:0}td code{overflow-wrap:anywhere}.table-wrap{overflow:auto}.metric{font-size:35px;font-weight:600;letter-spacing:-1px;margin:10px 0}.welcome{padding:30px;background:var(--brand-soft);border:0}.welcome .eyebrow{margin-bottom:6px}.browser-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding-bottom:20px}.browser-summary small{display:block}.form-error:empty{display:none}.form-error{color:var(--danger);font-size:13px}#notifications{position:fixed;bottom:24px;right:24px;max-width:360px;background:var(--primary);color:var(--primary-fg);border-radius:10px;padding:12px 18px;z-index:50;box-shadow:0 8px 28px #0002}#notifications:empty{display:none}
@media(max-width:950px){.auth-story{display:none}.grid2{gap:16px}}
@media(max-width:700px){.auth-layout{display:block}.auth-story>div:not(.brand),.auth-story>small{display:none}.auth-main{padding:32px 20px}.grid2{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-wrap:wrap}h1{font-size:25px}.card{padding:20px}.browser-summary{grid-template-columns:1fr}.welcome{padding:24px}}

fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:19px}fieldset:disabled{opacity:.7}.project-menu:focus-within .menu-list button:focus-visible{outline:2px solid var(--brand)}

.card{min-width:0}.muted{overflow-wrap:anywhere}.project-menu summary{max-width:min(42vw,450px);overflow:hidden;text-overflow:ellipsis}.menu-list{max-width:min(350px,70vw);max-height:65vh;overflow:auto}.menu-list button{white-space:normal;overflow-wrap:anywhere}
[hidden]{display:none!important}.content-inner>:is(.card,.panel,.grid2)+:is(.card,.panel){margin-top:24px}.feature-dialog{width:min(540px,calc(100vw - 32px));overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:0;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px #0003}/* The frame keeps its corners and the body scrolls inside them: a scrollbar on the rounded frame itself is painted square over the corner (owner report, 2026-10-10). */.feature-dialog-body{max-height:calc(85dvh - 2px);overflow:auto;overscroll-behavior:contain;padding:26px}.feature-dialog::backdrop{background:#0006}.feature-dialog-body>form,.feature-dialog-body>.row+.row,.feature-dialog-body>p{margin-top:20px}.scroll-locked{overflow:hidden!important}.choice-row{display:flex;gap:15px;flex-wrap:wrap}.choice-row label{display:flex;align-items:center;gap:8px}.choice-row input{width:16px;height:16px;margin:0}form details summary{cursor:pointer;color:var(--muted);padding:8px 0}.agent-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(340px,1.2fr);gap:22px;align-items:start}.agent-layout .card{padding:22px}.task-text,.agent-result{white-space:pre-wrap;overflow-wrap:anywhere}.task-text{background:var(--soft);padding:15px;border-radius:10px}.agent-timeline{max-height:260px;overflow:auto;border-left:1px solid var(--line);padding-left:12px;color:var(--muted);font-size:12px}.timeline-event{padding:6px 0}.agent-result{font-size:14px;line-height:1.8}.feature-dialog pre{overflow-wrap:anywhere;user-select:all}
@media(max-width:1100px){.agent-layout{grid-template-columns:1fr}.agent-layout .live-browser{order:-1}}@media(max-width:700px){.feature-dialog-body{padding:20px}.agent-layout .card{padding:16px}}
.model-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;margin-bottom:24px}.model-card{display:grid;gap:12px;align-content:start;padding:22px 24px 20px}.model-card h2{margin:0;font-size:18px;line-height:1.3;letter-spacing:-.2px;overflow-wrap:anywhere}.model-card-head{display:flex;align-items:flex-start;gap:14px}.model-card-title{display:grid;gap:3px;min-width:0;flex:1 1 auto}.model-card-cta{flex:none;margin-left:auto;min-height:34px;padding:6px 12px;font-size:13px}.model-mark{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;background:var(--soft);color:var(--ink)}.model-mark>.provider-mark{width:24px;height:24px}.model-mark>.nav-icon{width:20px;height:20px}.model-card-sub{margin:0;font-size:13px}.model-card-sub code{font-size:12px}.model-facts{display:grid;margin-top:6px;font-size:14px}.model-fact{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line)}.model-fact:last-child{border-bottom:1px solid var(--line)}.model-fact>span:first-child{color:var(--muted)}.model-fact>span:last-child{font-weight:500;text-align:right}.model-card-note{margin:0;font-size:12px}.model-card-foot{margin-top:4px;font-size:12px;flex-wrap:wrap}.model-card-add{cursor:pointer;text-align:left;border-style:dashed;background:transparent;color:inherit;font:inherit}.model-card-add:hover{background:var(--soft)}.model-card-add-cta{justify-self:start;margin-top:auto;pointer-events:none}.endpoint-cell{overflow-wrap:anywhere;max-width:340px}.effort-options{display:flex;flex-wrap:wrap;gap:12px}.effort-options legend{margin-bottom:10px;color:var(--muted);font-size:12px}.select-field{display:grid;gap:7px;min-width:0;font-weight:500}.custom-select{position:relative;min-width:0}.select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:45px;border:1px solid var(--line);border-radius:9px;padding:10px 13px;background:var(--surface);color:var(--ink);text-align:left}.select-trigger span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.select-popover{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;min-width:180px;padding:6px;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:0 12px 30px #0002;font-size:13px;line-height:1.5}.select-popover [role=listbox]{max-height:220px;overflow:auto;overscroll-behavior:contain;padding-right:2px}.select-popover [role=option]{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;margin:1px 0;padding:6px 9px;text-align:left;border:0;background:transparent;color:var(--ink);font-weight:450;border-radius:6px}[role=option] .select-label{flex:1 1 auto;min-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[role=option] small{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.select-check{display:flex;flex:none;width:16px;height:16px;visibility:hidden}.select-check>svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}[role=option][aria-selected=true] .select-check{visibility:visible}[role=option]:disabled{opacity:.5}.select-popover [role=option]:hover,.select-popover [role=option]:focus-visible{background:var(--soft)}.select-popover [aria-selected=true]{background:var(--brand-soft);color:var(--brand)}.select-popover small{font-size:11px}.select-search{min-height:34px;margin-bottom:4px;padding:6px 9px;border-radius:7px;font-size:13px}.select-search:focus,.select-search:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}.select-no-results{padding:10px}.select-trigger[aria-expanded=true]{border-color:var(--brand)}.select-caret{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform .15s ease}.select-trigger[aria-expanded=true] .select-caret{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.select-caret{transition:none}}
@media(max-width:760px){.model-grid{gap:16px}.model-card{padding:20px}.select-popover{min-width:0}}

.section-head>div{min-width:0;max-width:100%}.section-head h1{overflow-wrap:anywhere}

.recording-player { display: block; width: 100%; max-height: 65vh; background: #0c1222; border-radius: 12px; }
.asset-image { display: block; max-width: 100%; max-height: 70vh; margin: auto; object-fit: contain; }
.asset-html { width: 100%; height: 60vh; border: 1px solid var(--border); border-radius: 10px; background: white; }
[data-browser-assets] [data-asset-error]:empty { display: none; }

.wrap-anywhere{overflow-wrap:anywhere;word-break:break-word}[data-webhook-history] td small{display:block;margin-top:5px}

.team-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}.team-identity{display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}.team-row>.row{flex-wrap:wrap}.team-row .team-identity{flex:1 1 200px}
:root{--chart:#6465e8}
/* Usage, the prototype's page: filter bar, the three-metric strip, day chart beside a key/value breakdown. */
.usage-active{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;white-space:nowrap}.usage-active .nav-icon{width:16px;height:16px}
.usage-filters{margin-bottom:24px}.usage-filters .select-field{flex:0 1 240px;font-size:12px}.usage-filters .select-trigger{min-height:42px}
.usage-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:24px}.usage-metric{min-width:0;padding:20px 25px;border-right:1px solid var(--line);overflow-wrap:anywhere}.usage-metric:last-child{border-right:0}.usage-metric>span{color:var(--muted);font-size:12px}.usage-metric strong{display:block;margin:6px 0 2px;font-size:27px;font-weight:550;letter-spacing:-1px;font-variant-numeric:tabular-nums}.usage-metric strong small{font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}.usage-metric p{margin:0;color:var(--muted);font-size:11px}
/* The prototype's panel: a bordered surface with a headed top and a padded body; usage and history share it. */
.panel{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.panel:has(.select-popover:not([hidden])),.panel:has(.menu-options:not([hidden])),.panel:has(.run-settings-panel:not([hidden])),.agent-panel:has(.run-settings-panel:not([hidden])),.panel:has(.usage-tip:not([hidden])),.panel:has(.row-menu[open]),.table-wrap:has(.row-menu[open]){overflow:visible}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 23px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:16px}.panel-body{padding:24px}.panel-foot{padding:14px 22px;border-top:1px solid var(--line)}.panel .empty{padding:48px 20px}.panel .empty strong{display:block;margin-bottom:6px;color:var(--ink)}.panel .empty p{margin:0 0 14px}
.usage-grid>.panel{display:flex;flex-direction:column}.usage-grid>.panel>.panel-body{flex:1 1 auto;display:flex;flex-direction:column}.usage-grid>.panel>.panel-body>.usage-chart-host{margin-top:auto}
.usage-chart{display:block;width:100%;height:auto;margin:16px 0 4px}.usage-bar{fill:var(--brand);opacity:.85}.usage-bar.even{opacity:.55}.usage-col:hover .usage-bar{opacity:1}.usage-value{fill:var(--muted);font-size:10px}.usage-baseline{stroke:var(--line);stroke-width:1}.usage-chart-labels{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:10px}.usage-chart-host{position:relative}.usage-col:hover rect{fill:var(--soft)}.usage-tip{position:absolute;top:0;left:0;z-index:5;min-width:210px;padding:10px 14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 12px 30px #0002;font-size:13px;line-height:1.5;color:var(--ink);pointer-events:none}.usage-tip-date{margin-bottom:6px;color:var(--muted);font-size:12px}.usage-tip-row,.usage-tip-total{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:2px 0}.usage-tip-row>span{color:var(--muted)}.usage-tip-row>b,.usage-tip-total>b{font-weight:600;font-variant-numeric:tabular-nums}.usage-tip-total{grid-template-columns:1fr auto;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}.usage-dot{width:9px;height:9px;border-radius:2px;background:var(--brand)}.usage-dot.success{background:var(--success)}.usage-dot.failure{background:var(--danger)}.usage-dot.neutral{background:var(--muted)}.usage-dot.soft{background:var(--brand-soft);border:1px solid var(--brand)}
.usage-kv{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.usage-kv:last-child{border-bottom:0}.usage-kv>span:first-child{color:var(--muted)}.usage-kv>span:last-child{min-width:0;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media (max-width:850px){.usage-metric{padding:17px}}@media (max-width:700px){.usage-metrics{grid-template-columns:minmax(0,1fr)}.usage-metric{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;border-right:0;border-bottom:1px solid var(--line)}.usage-metric:last-child{border-bottom:0}.usage-metric strong{grid-column:2;grid-row:1/3;margin:0;font-size:24px}.usage-metric p{grid-row:2;font-size:10px}.usage-filters .select-field{flex:1 1 160px}}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.filters label{flex:1 1 160px}
.history-filters{margin-bottom:24px;gap:14px}.history-filters .select-field{flex:1 1 180px;max-width:260px;font-size:12px}.history-filters label{flex:2 1 260px;font-size:12px}.history-filters .select-trigger,.history-filters input{min-height:42px}
/* The prototype's table inside a panel: muted 11px header on the soft tone, roomy rows, the resource cell's id beneath its link. */
.data-table{white-space:nowrap;font-size:12px}.data-table th{padding:13px 22px;background:var(--soft);font-weight:400;font-size:11px}.data-table td{padding:16px 22px;border-bottom:1px solid var(--line);vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover td{background:var(--soft)}.table-resource a{font-weight:500;color:var(--ink)}.table-resource a:hover{color:var(--brand)}.table-resource small{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.table-resource{max-width:420px;white-space:normal;overflow-wrap:anywhere}.table-action{text-align:right}.table-action .btn{margin:0;padding:6px 10px;font-size:12px}.table-action .nav-icon{width:14px;height:14px}.history-detail{max-width:300px;white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
/* Cloud browsers: the launch page after the reference — one card (network over the dotted world, rows with the
   controls on the right, switches, a footer with the launch button) beside the request panel with the language tabs. */
.browser-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.05fr);gap:24px;align-items:stretch}.browser-layout form{margin:0;display:flex;flex-direction:column}.browser-layout fieldset{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.browser-layout .launch{flex:1 1 auto;grid-template-rows:auto auto 1fr auto}.browser-layout aside{min-height:0}
.launch{display:grid}.launch-hero{position:relative;min-height:170px;padding:22px 24px 24px;border-bottom:1px solid var(--line);background:linear-gradient(to right,var(--surface) 45%,transparent)}
/* The map is clipped by its own wrapper, so an open select is not clipped by the hero. */
.launch-map-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.launch-map{position:absolute;right:-8%;top:-22%;width:62%;opacity:.55;pointer-events:none;mask-image:radial-gradient(ellipse at 60% 40%,#000 45%,transparent 78%)}:root[data-theme=dark] .launch-map{opacity:.35}
.launch-location{position:relative;z-index:1;display:grid;gap:8px;max-width:62%}.launch-location .network-fields{gap:12px}
.launch-location .select-field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.launch-location>.network-fields>.select-field .select-trigger{width:auto;min-height:0;padding:2px 4px 2px 0;border:0;background:transparent;font-size:22px;font-weight:600;letter-spacing:-.3px;gap:8px}.launch-location>.network-fields>.select-field .select-popover{width:320px}
.launch-location [data-network-mode] .select-trigger{min-height:38px;font-size:13px}.launch-location [data-network-mode] label{font-size:12px}
.launch-label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2px}
.launch-rows{display:grid;padding:6px 24px;border-bottom:1px solid var(--line)}.launch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:6px 0}.launch-row+.launch-row{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.launch-control{width:min(46%,280px)}.launch-control .select-field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.launch-control .select-trigger{min-height:36px;padding:6px 11px;font-size:13px;background:var(--soft);border-color:transparent}
.launch-toggle{cursor:pointer;font-weight:400}.launch-reveal{padding:4px 0 14px}.launch-reveal label{font-size:12px}
.launch-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:14px 24px;background:var(--soft)}.launch-foot .muted{flex:1;font-size:12px}.launch-foot .form-error:empty{display:none}.launch-foot .btn.primary{margin:0}
/* Segmented minute choices and the switch, both native controls underneath. */
.segmented{display:inline-flex;padding:3px;border-radius:9px;background:var(--soft)}.segmented button{border:0;border-radius:6px;padding:5px 12px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #0000001a}
.switch{appearance:none;flex:none;width:40px;height:22px;margin:0;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .15s ease}.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px #0003;transition:transform .15s ease}.switch:checked{background:var(--brand)}.switch:checked::after{transform:translateX(18px)}
.code-panel .panel-head h2{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500;color:var(--muted)}
.code-panel .panel-head{flex-wrap:wrap}.code-panel .code-tabs{margin:0;gap:4px}.code-panel .code-tabs .btn{padding:4px 9px;font-size:11px;min-height:0}.code-panel .panel-body{padding:16px}
@media (max-width:1100px){.browser-layout{grid-template-columns:1fr}}
.code-tabs{gap:8px;margin:6px 0}.composer-code{margin-top:12px}.composer-code summary{cursor:pointer;color:var(--muted)}

/* Agent console: the conversation view (agent.js). Mirrors the overview composer's proportions. */
.agent-session{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}/* With the panel open the page is a split, as in the reference: the conversation column keeps its heading, scrolls its
   thread and pins the composer; the panel takes the rest of the width at full height behind one vertical line. The
   content area gives up its padding, width limit and scrolling to the split (app.js toggles `.content.agent-split`). */
.content.agent-split{display:flex;flex-direction:column;padding:0;overflow:hidden}.content.agent-split>.content-inner{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none}
.agent-session.with-panel{display:flex;flex:1;min-height:0;gap:0;align-items:stretch}
.agent-session.with-panel>.agent-main{display:flex;flex-direction:column;flex:0 0 var(--agent-split,46%);gap:0;min-width:380px;max-width:calc(100% - 360px);min-height:0;padding:28px 0 0 36px}/* No right padding on the column: the thread's scrollbar then sits
   against the handle (owner direction, 2026-10-10); the heading, thread and composer carry the 28px themselves, so the text does not move. */
/* The line between the two is the handle (agent.js sets `--agent-split`): 1px drawn, 11px to grab, brand-coloured while hovered, focused or dragged. */
.agent-divider{display:none}.agent-session.with-panel>.agent-divider{display:block;position:relative;flex:none;width:1px;background:var(--line);cursor:col-resize;touch-action:none;outline:none}
.agent-divider::before{content:"";position:absolute;inset:0 -5px}.agent-session.with-panel>.agent-divider:is(:hover,:focus-visible,[data-dragging]){background:var(--brand);box-shadow:0 0 0 .5px var(--brand)}
.agent-session.agent-resizing{cursor:col-resize;user-select:none}
.agent-session.with-panel .section-head{flex:none;margin-bottom:18px;padding-right:28px}.agent-session.with-panel [data-agent-panel]{display:none}.agent-session.with-panel .agent-thread{flex:1;min-height:0;overflow:hidden auto;overscroll-behavior:contain;padding:6px 28px 28px 0;scroll-padding-bottom:28px;scrollbar-width:thin}
/* The composer keeps its fade over the thread in the split (it was a hard clip until 2026-10-10): the gradient stops short of the scrollbar column, and the thread's 28px bottom padding keeps its last line above the fade. */
.agent-session.with-panel .agent-composer-host{flex:none;position:relative;padding:8px 28px 16px 0}.agent-session.with-panel .agent-composer-host::before{right:28px}
.agent-session.with-panel>.agent-panel{position:static;align-self:stretch;flex:1;min-width:0;min-height:0;height:auto;max-height:none;border:0;border-radius:0;background:var(--surface)}
.agent-session.with-panel .agent-panel-tabs{padding:10px 12px 0}.agent-session.with-panel .agent-panel-body{padding:18px 22px}
.agent-main{display:grid;gap:22px;min-width:0}/* `align-content:start`: in the split the thread has a definite height (flex), and a grid's auto rows would
   otherwise stretch to fill it — inflating every bubble and reply to share the empty space. */
.agent-thread{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding:6px 0;align-content:start}
.agent-run{display:grid;gap:14px;scroll-margin-top:24px;align-content:start;min-width:0}
.agent-bubble-wrap{position:relative;justify-self:end;max-width:min(78%,720px);display:grid;justify-items:end;gap:0}.agent-bubble{max-width:100%}.agent-bubble{background:var(--soft);border-radius:16px 16px 4px 16px;padding:12px 16px;display:grid;gap:6px}.agent-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-size:14px}
.agent-bubble-time{position:absolute;top:100%;right:4px;margin-top:2px;white-space:nowrap;color:var(--muted);font-size:11px;line-height:1.2;opacity:0;pointer-events:none;transition:opacity .15s ease}
.agent-bubble-wrap:hover .agent-bubble-time,.agent-message .agent-bubble-time{pointer-events:auto}
.agent-messages:empty,.agent-reply:empty,.agent-step-list:empty{display:none}/* A run just sent has no steps and no reply yet: empty boxes take no gap (owner report, 2026-10-10: 42px of blank under "Working…"). */.agent-bubble-wrap:hover .agent-bubble-time{opacity:1}
.agent-steps{max-width:min(92%,880px)}.agent-steps>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-size:13px;padding:2px 0}.agent-steps>summary::-webkit-details-marker{display:none}.agent-steps>summary .nav-icon{width:14px;height:14px;transition:transform .15s ease}.agent-steps[open]>summary .nav-icon{transform:rotate(180deg)}
/* Grid items shrink (`minmax(0,1fr)`, `min-width:0`): a row's nowrap excerpt is ellipsized rather than widening the row, the article and the thread — which then scrolled sideways under scrollIntoView and cut "Working…" off at the left (owner report, 2026-10-10). */
.agent-step-list{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:10px 0 4px;padding-left:12px;border-left:2px solid var(--line)}.agent-step,.agent-reply{scroll-margin-bottom:230px}.agent-step{min-width:0;padding:6px 10px;border-radius:8px;font-size:13px;color:var(--ink);overflow-wrap:anywhere}.agent-step.thought,.agent-step.system{color:var(--muted);font-size:12px;padding:3px 10px}.agent-step.text{line-height:1.7;padding:8px 10px}.agent-step.text.muted{color:var(--muted)}
.agent-step.tool>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0}.agent-step.tool>summary::-webkit-details-marker{display:none}.agent-step.tool>summary .nav-icon{width:14px;height:14px;flex:none;color:var(--muted)}.agent-step.tool>summary span{font-weight:550;white-space:nowrap}.agent-step.tool>summary small{color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}.agent-step.tool:hover{background:var(--soft)}.agent-step.tool pre{margin-top:8px;max-height:260px;padding:12px;font-size:12px}
.agent-reply{display:grid;gap:12px;max-width:min(92%,880px)}.agent-output{overflow-wrap:anywhere;line-height:1.8;font-size:15px}.agent-data{max-height:300px}.agent-judgment{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:13px}.agent-judgment .nav-icon{width:16px;height:16px;flex:none;margin-top:2px}
.agent-status{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}.agent-spinner{width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:agent-spin 1s linear infinite}@keyframes agent-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.agent-spinner{animation:none}}
.agent-files{display:flex;flex-wrap:wrap;gap:7px}.agent-file{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:12px;max-width:100%}.agent-file>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.agent-file .nav-icon{width:14px;height:14px;flex:none;color:var(--muted)}.agent-file button{border:0;background:transparent;color:var(--muted);padding:0 2px;font-size:14px;line-height:1}button.agent-file:hover{background:var(--soft)}
.agent-composer-host{position:sticky;bottom:0;padding:8px 0 10px;background:var(--bg)}.agent-composer-host::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}.agent-new{display:grid;gap:24px}
.agent-composer{display:block;container-type:inline-size;border:1px solid var(--line);border-radius:16px;padding:14px 16px 12px;background:var(--surface);box-shadow:0 10px 30px #0000000d}.agent-composer fieldset{display:grid;gap:10px}/* The composer's field, as the Overview's: a bordered rounded box that lights up on focus; the toolbar sits under it without a rule. */
.agent-composer textarea{display:block;width:100%;min-height:98px;max-height:320px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.6;resize:none;transition:border-color .15s,box-shadow .15s}
.agent-composer textarea::placeholder{color:var(--muted)}.agent-composer textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* One row, never wrapping: the tools on the left give way (the chips fade out under a mask, the full summary stays in the
   settings button's tooltip), the send button keeps its place on the right; below ~600px the labels go and send is a disc. */
.agent-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;min-width:0;padding-top:12px}
/* The tools row does not clip: the model select's popover opens out of it; the chips clip themselves. */
.agent-tools{display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;flex-wrap:nowrap}.agent-tools>.agent-tool{flex:none}
.agent-tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;min-width:34px;padding:0 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:500;white-space:nowrap}.agent-tool:hover,.agent-tool[aria-expanded=true]{background:var(--soft);color:var(--ink)}.agent-tool .nav-icon{width:16px;height:16px}
.provider-mark{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;color:var(--ink)}.provider-mark.generic{color:var(--muted)}
.select-trigger .select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;line-height:0}.select-icon:empty{display:none}
.agent-model-name{display:inline-flex;align-items:center;gap:6px;vertical-align:bottom}.agent-model-name .provider-mark{width:14px;height:14px;vertical-align:0}
.agent-model{flex:0 0 190px;width:190px}.agent-model .select-field{display:block}.agent-model .select-field>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.agent-model .select-trigger{height:34px;min-height:34px;padding:0 11px;border-radius:8px;background:var(--soft);font-size:12px;font-weight:500;border-color:transparent}.agent-model .select-popover{width:240px;max-width:calc(100vw - 80px)}
.agent-chips{display:flex;flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:4px;margin-left:4px;overflow:hidden;mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}.agent-chips:empty{display:none}.agent-chips>.agent-chip{flex:none}.agent-chip{display:inline-flex;align-items:center;gap:5px;height:24px;max-width:260px;padding:0 8px 0 7px;border-radius:6px;background:var(--soft);color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden}.agent-chip>span{overflow:hidden;text-overflow:ellipsis}.agent-chip>.nav-icon{width:12px;height:12px;flex:none;opacity:.8}
.agent-send{flex:none;height:36px;min-height:36px;padding:0 14px;gap:6px;margin-left:auto;border-radius:10px}.agent-send .agent-spinner{display:none;border-color:#fff6;border-top-color:#fff}.agent-send[data-starting]{opacity:.7}.agent-send[data-starting] .agent-spinner{display:inline-block}.agent-send[data-starting]>svg{display:none}
@container (max-width:640px){.run-settings-toggle span,.agent-send span{display:none}.agent-send{width:36px;padding:0;border-radius:50%}.agent-model{flex-basis:170px;width:170px}}
/* The thread's composer in a narrow split column (the handle allows 380px): icons only, as at narrow viewports, and the model select gives way with its ellipsis — the row needed ~440px with labels and spilled past the card. */
@container (max-width:460px){.agent-composer.continue .agent-tool span,.agent-composer.continue .agent-chips{display:none}.agent-composer.continue .agent-model{flex:1 1 120px;width:auto;min-width:96px;max-width:170px}}.agent-send .nav-icon{width:14px;height:14px}
/* Run settings: the popover both composers open from their toolbar (run-settings.js). The panel is
   inside the form and merely hidden when closed; it anchors under the trigger, or above it when the
   composer is pinned at the bottom of a session. A select row is the shared select laid out as
   icon / label over value / caret, its trigger stretched over the row; an expand row is a
   <details> with the same head. */
.run-settings{position:relative;flex:none}
.run-settings-toggle[aria-expanded=true]{background:var(--soft);color:var(--ink)}
.run-settings-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:min(400px,calc(100vw - 48px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 18px 50px #0003;text-align:left;cursor:default}

.agent-composer.continue .run-settings-panel{top:auto;bottom:calc(100% + 8px)}
.run-settings-head{display:grid;gap:2px;padding:16px 18px 12px}
.run-settings-head strong{font-size:15px}
.run-settings-head .muted{font-size:12px}
.run-settings-note{margin:0;padding:0 18px 16px;font-size:13px}
.run-settings-rows{display:grid;padding:0 6px 6px}
.run-settings-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:center;padding:8px 12px;border-radius:10px}
.run-settings-row+.run-settings-row{border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.run-settings-row:has(.select-trigger:hover),.run-settings-row:has(.select-trigger:focus-visible),.run-settings-expand>summary:hover{background:var(--soft)}
.run-settings-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--brand-soft);color:var(--brand);grid-row:span 2}
.run-settings-icon>.nav-icon{width:17px;height:17px}
/* The shared select as a row: its label above, its trigger as the value line, the trigger's ::before stretched over the row. */
.run-settings-row>.select-field,.run-settings-row>.network-fields>.select-field{display:grid;gap:0;min-width:0;font-weight:400}
.run-settings-row>.select-field>span,.run-settings-row>.network-fields>.select-field>span{font-size:12px;color:var(--muted);line-height:1.4}
.run-settings-row .custom-select{position:static}
.run-settings-row .select-trigger{min-height:0;padding:0;border:0;background:transparent;font-size:15px;font-weight:600;letter-spacing:-.1px;line-height:1.4;gap:8px}
.run-settings-row .select-trigger[aria-expanded=true]{border-color:transparent}
.run-settings-row .select-trigger:disabled{color:var(--muted);cursor:default;opacity:1}
.run-settings-row .select-trigger:disabled .select-caret{visibility:hidden}
.run-settings-row:has(.select-trigger:disabled) .run-settings-icon{background:var(--soft);color:var(--muted)}
.run-settings-row .select-trigger:focus-visible{outline:none}
.run-settings-row:has(.select-trigger:focus-visible){box-shadow:0 0 0 2px var(--brand-soft)}
.run-settings-row:not(.run-settings-network) .select-trigger::before{content:"";position:absolute;inset:0;border-radius:inherit}
.run-settings-row .select-popover{left:0;right:0;top:calc(100% - 6px)}
/* The network row's sub-fields (region, server, credentials) sit under the value line, in the text column. */
.run-settings-network>.network-fields{display:grid;gap:10px;min-width:0}
.run-settings-network>.network-fields>[data-network-mode]{gap:10px;padding-top:4px}
.run-settings-network>.network-fields>[data-network-mode] .select-field{display:grid;gap:6px;font-size:13px}
.run-settings-network>.network-fields>[data-network-mode] .select-trigger{min-height:38px;padding:8px 11px;border:1px solid var(--line);font-size:13px;font-weight:500}
.run-settings-network>.network-fields>[data-network-mode] .select-trigger::before{content:none}
.run-settings-network>.network-fields>p.muted{margin:0;font-size:13px}
.run-settings-network>p.muted{margin:0;font-size:13px}
/* An expand row: the summary reads like a select row; the body opens under it, in the text column. */
.run-settings-expand{display:block;padding:0}
.run-settings-expand>summary{display:grid;grid-template-columns:34px minmax(0,1fr) 14px;column-gap:12px;align-items:center;padding:8px 12px;border-radius:10px;cursor:pointer;list-style:none}
.run-settings-expand>summary::-webkit-details-marker{display:none}
.run-settings-text{display:grid;gap:0;min-width:0}
.run-settings-label{font-size:12px;color:var(--muted);line-height:1.4}
.run-settings-value{font-size:15px;font-weight:600;letter-spacing:-.1px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-settings-caret{transition:transform .15s ease}
.run-settings-expand[open]>summary .run-settings-caret{transform:rotate(180deg)}
.run-settings-body{display:grid;gap:14px;padding:4px 12px 14px 58px;font-size:13px}
.run-settings-body .select-field,.run-settings-body label{font-size:13px}
.run-settings-body fieldset{margin:0;padding:0;border:0;min-width:0}
.run-settings-body legend{padding:0;margin-bottom:6px;color:var(--muted);font-size:12px}
.run-settings-body details>summary{padding:4px 0;color:var(--muted);cursor:pointer}
.run-settings-body .grid2{gap:10px}
@media(prefers-reduced-motion:reduce){.run-settings-caret{transition:none}}
@media(max-width:760px){.run-settings-body{padding-left:12px}}


.effort{display:grid;gap:10px}.effort-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.effort-title{display:inline-flex;align-items:center;gap:6px;font-weight:500}.help{display:grid;place-items:center;width:18px;height:18px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font-size:11px;line-height:1;cursor:help}.effort-value{font-weight:500}
.effort [data-effort-range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}
.effort [data-effort-range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--brand) var(--fill,0%),var(--soft) var(--fill,0%))}
.effort [data-effort-range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border:3px solid var(--brand);border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.effort [data-effort-range]::-moz-range-track{height:6px;border-radius:999px;background:var(--soft)}.effort [data-effort-range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--brand)}
.effort [data-effort-range]::-moz-range-thumb{width:16px;height:16px;border:3px solid var(--brand);border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.effort-stops{display:flex;justify-content:space-between;margin-top:-2px}.effort-stop{padding:0;border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer}.effort-stop.active{color:var(--ink);font-weight:500}.effort-stop:first-child{text-align:left}.effort-stop:last-child{text-align:right}
fieldset:disabled .effort [data-effort-range],fieldset:disabled .effort-stop{cursor:default;opacity:.6}
.agent-attachments{display:flex;flex-wrap:wrap;gap:7px}
.agent-session-list{display:grid;gap:6px}.agent-session-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px}.agent-session-row:hover{background:var(--soft)}.agent-session-row>div{display:grid;gap:2px;min-width:0}.agent-session-row strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:550}.agent-session-row small{color:var(--muted)}
.agent-panel-buttons .btn small{margin-left:2px;color:var(--muted)}.agent-panel-buttons .btn[aria-pressed=true]{background:var(--soft);color:var(--ink)}
.agent-panel{position:sticky;top:0;align-self:start;max-height:calc(100dvh - 130px);display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}.agent-panel-tabs{display:flex;align-items:center;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line)}.agent-panel-tabs [role=tab]{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-bottom:2px solid transparent;font-weight:550}.agent-panel-tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}.agent-panel-tabs .agent-panel-open{margin-left:auto;padding:4px 8px}.agent-panel-tabs .agent-panel-open svg{width:14px;height:14px}.agent-panel-tabs .agent-panel-open+[data-agent-panel-close]{margin-left:0}.agent-panel-tabs [data-agent-panel-close]{margin-left:auto;padding:4px 10px}
.agent-panel-body{padding:14px;overflow:auto;display:grid;gap:12px;align-content:start}.agent-panel-body .live-browser{padding:0;border:0}.agent-file-list{display:grid;gap:4px}.agent-file-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);min-width:0}.agent-file-row:hover,.agent-file-row.selected{background:var(--soft)}.agent-file-row .nav-icon{width:15px;height:15px;flex:none;color:var(--muted)}.agent-file-row>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;flex:1}.agent-file-row small{color:var(--muted);flex:none}
.agent-file-preview{display:grid;gap:10px;padding-top:10px;border-top:1px solid var(--line)}.agent-file-content iframe{width:100%;height:60vh;border:1px solid var(--line);border-radius:9px;background:#fff}.agent-file-content pre{max-height:60vh}
@media(max-width:1100px){.agent-session.with-panel{display:block}.agent-session.with-panel>.agent-main{display:none}.agent-session.with-panel>.agent-divider{display:none}.content.agent-split{display:block;overflow:auto}.agent-panel{position:static;max-height:none}.agent-bubble-wrap{max-width:100%}.agent-steps,.agent-reply{max-width:100%}}
@media(max-width:700px){.agent-composer{padding:12px}.agent-model{width:150px}/* The new-task composer reads as the Overview's: labelled tools in the order model → attachments → settings; the thread's composer keeps icons only. */
.agent-composer.continue textarea{min-height:60px}
.agent-composer.continue .agent-tool span{display:none}.agent-chips{display:none}.agent-composer-host{position:static;background:none}}

/* The live browser is a window: chrome (tabs, back/forward/reload, address) over the page. */
.browser-chrome{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--soft)}
.chrome-tabbar{display:flex;align-items:center;gap:8px;padding:7px 9px 0;background:var(--soft)}
.chrome-lights{display:flex;gap:6px;padding:0 4px 7px}
.chrome-lights i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.chrome-tabs{display:flex;gap:5px;min-width:0;overflow:hidden;flex:1}
.chrome-tab{display:flex;align-items:center;gap:2px;max-width:220px;padding:0 4px 0 10px;border-radius:8px 8px 0 0;background:transparent;color:var(--muted);font-size:12px}
.chrome-tab.active{background:var(--bg);color:var(--ink)}
.chrome-tab>button{min-width:0;height:30px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrome-tab-close{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;color:var(--muted)}
.chrome-tab-close:hover{background:var(--line);color:var(--ink)}
.chrome-tab-close svg{width:12px;height:12px}
.chrome-toolbar{display:flex;align-items:center;gap:6px;padding:7px 9px;background:var(--bg);border-bottom:1px solid var(--line)}
.chrome-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer}
.chrome-btn:hover:not(:disabled){background:var(--soft);color:var(--ink)}
.chrome-btn:disabled{opacity:.4;cursor:not-allowed}
.chrome-btn svg{width:16px;height:16px}
.chrome-url{flex:1;min-width:0;display:flex}
.chrome-url input{width:100%;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--ink);font-size:12px}
.chrome-url input:focus{outline:none;border-color:var(--brand);background:var(--bg)}
.chrome-url input:read-only{color:var(--muted)}
.preview-stage{position:relative;background:var(--bg);min-height:120px;aspect-ratio:16 / 9}
.preview-stage>[data-preview-placeholder]{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px}
.preview-stage:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.preview-stage img{display:block;width:100%;height:auto;cursor:pointer}
.preview-typing{position:absolute}
.preview-typing input{width:100%;height:100%;padding:0 8px;border:2px solid var(--brand);border-radius:6px;background:var(--bg);color:var(--ink);font-size:13px}

.preview-help{font-size:12px;margin-top:10px}

/* The code surface follows the console's theme; the whole snippet is shown, no scrollers. */
.code-block{--code-bg:var(--soft);--code-line:var(--line);--code-ink:var(--ink);--code-muted:var(--muted);--code-number:#9aa3b2;--code-hover:#11182708;position:relative;margin:10px 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--code-bg);overflow:hidden}
[data-theme=dark] .code-block{--code-number:#6b7280;--code-hover:#ffffff0c}
.code-panel .code-block,.composer-code .code-block{margin:0}
.code-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px 9px 14px;border-bottom:1px solid var(--code-line)}
.code-block-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--code-muted);font-size:11px;letter-spacing:.3px}
.code-copy{display:flex;align-items:center;gap:6px;flex:none;padding:4px 8px;border:0;border-radius:7px;background:transparent;color:var(--code-muted);font-size:11px;cursor:pointer}
.code-copy:hover{background:var(--code-hover);color:var(--code-ink)}
.code-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.code-block pre{margin:0;padding:12px 14px 14px;max-height:none;overflow:visible;background:transparent;border-radius:0;counter-reset:code-line}
.code-block code{display:block;color:var(--code-ink);font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}
/* Every line is shown: a long one wraps under its own number instead of scrolling sideways. */
.code-line{display:block;counter-increment:code-line;padding-left:3.4em;text-indent:-3.4em;white-space:pre-wrap;overflow-wrap:anywhere}
.code-line::before{content:counter(code-line);display:inline-block;width:2.2em;margin-right:1.2em;color:var(--code-number);text-align:right;text-indent:0;user-select:none}
.code-line:hover{background:var(--code-hover)}
.tok-comment{color:var(--muted);font-style:italic}
.tok-string{color:#0f766e}
.tok-number{color:#b45309}
.tok-keyword{color:#7c3aed}
.tok-call{color:#1d4ed8}
.tok-flag{color:#b45309}
.tok-variable{color:#a16207}
[data-theme=dark] .tok-string{color:#7dd3a0}
[data-theme=dark] .tok-number,[data-theme=dark] .tok-flag{color:#f0b37e}
[data-theme=dark] .tok-keyword{color:#c084fc}
[data-theme=dark] .tok-call{color:#7cc4fa}
[data-theme=dark] .tok-variable{color:#fbbf24}
.code-panel .code-block code{font-size:11px}
.billing-credit{color:var(--success)}
.billing-amounts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.billing-amounts button{min-width:72px}
/* Messages to a run in flight: bubbles like the task's, with their state under them; a withdrawn one is a record. */
.agent-messages{display:grid;gap:10px;justify-items:end}
.agent-message .agent-bubble-time{position:static;margin-top:4px;opacity:1;display:flex;gap:10px;align-items:center}
.agent-message.queued .agent-bubble{border:1px dashed var(--line);background:var(--surface)}
.agent-message.withdrawn .agent-bubble{opacity:.55;text-decoration:line-through}
.agent-message-withdraw{padding:0;border:0;background:none;color:var(--brand);font-size:11px;cursor:pointer}
.agent-message-withdraw:hover{text-decoration:underline}
/* A step's evidence: parameters, response and where it sits in the record. */
.agent-evidence{display:grid;gap:8px;padding:6px 0 2px}
.agent-evidence-block{display:grid;gap:3px}
.agent-evidence-block>small{color:var(--muted);font-size:11px;letter-spacing:.3px;text-transform:uppercase}
.agent-evidence pre{margin:0;max-height:260px;font-size:11px}
.agent-evidence-meta{font-size:11px;line-height:1.7}
.agent-evidence-meta code{font-size:10.5px}
/* The standalone preview: the content area gives up its padding and width; the window takes the height. */
.content:has(>.content-inner>.preview-page){padding:0}
.content:has(>.content-inner>.preview-page)>.content-inner{max-width:none;display:flex;flex-direction:column;min-height:100%}
.preview-page{display:flex;flex-direction:column;flex:1;min-height:0}
.preview-page-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.preview-page-bar .btn svg{width:16px;height:16px}
.preview-page-title{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px}
.preview-page-title code{font-size:12px;color:var(--muted)}
.preview-page-stage{flex:1;min-height:0;padding:16px}
.preview-page-stage .live-browser{padding:0;border:0;max-width:1600px;margin:0 auto}
.preview-page-stage .preview-help{display:none}
.preview-page-stage .browser-chrome{box-shadow:0 10px 30px #0000000d}
/* The API key permission matrix: one row per resource group, three levels. */
.key-matrix{font-size:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The key dialog's permissions (after Browser Use's, 2026-10-10): a heading with the full-access switch; off, one row per resource with none / read / write as a segmented choice. */
.key-permissions{display:grid;gap:12px}.key-permissions-head{align-items:flex-start;flex-wrap:nowrap}.key-permissions-head>div{min-width:0}.key-permissions-head strong{display:block;font-size:14px}.key-permissions-head .muted{margin-top:4px;font-size:13px}
.key-full-access{display:inline-flex;align-items:center;gap:10px;flex:none;font-weight:500;color:var(--muted);white-space:nowrap;cursor:pointer}
.key-matrix-rows{border:1px solid var(--line);border-radius:10px;overflow:hidden}.key-matrix-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--line);font-size:13px}.key-matrix-row:first-child{border-top:0}
.key-levels{display:inline-flex;gap:2px;flex:none}.key-level{position:relative;cursor:pointer}.key-level input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.key-level span{display:inline-block;padding:3px 9px;border-radius:6px;color:var(--muted);font-size:12px;font-weight:500}
.key-level input:checked+span{background:var(--soft);color:var(--ink)}.key-level input:focus-visible+span{outline:2px solid var(--brand)}.key-level input:disabled+span{opacity:.4}.key-level input:disabled{cursor:not-allowed}
/* The network row grows when a proxy's fields open: its glyph stays with the row's label instead of drifting to the middle. */
.run-settings-row.run-settings-network{align-items:start}
.run-settings-row.run-settings-network>.run-settings-icon{margin-top:2px}

/* The sign-in pages: the form in a narrow centred column, the story beside it with a code card over a soft glow. */
.auth-layout{display:grid;grid-template-columns:minmax(360px,2fr) minmax(0,3fr);min-height:100dvh}
.auth-main{display:grid;grid-template-rows:auto minmax(0,1fr);padding:24px 32px 48px}.auth-main>.brand{justify-self:start;margin-bottom:24px}.auth-main>.auth-card{align-self:center;justify-self:center}
.auth-card{width:100%;max-width:384px;display:grid;gap:14px}

.auth-card>.brand img{width:36px;height:36px}
.auth-card h1{margin:0;text-align:center;font-size:24px}
.auth-subtitle{margin:0 0 6px;text-align:center;font-size:14px}
.auth-subtitle a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.auth-card form{display:grid;gap:12px}
.auth-card form fieldset{display:grid;gap:12px}
.auth-card .btn.primary[type=submit]{width:100%;height:42px;margin-top:4px}
.auth-card .social{gap:8px}
.auth-card .social .btn{width:100%;height:42px;justify-content:center;gap:10px}.social-mark{width:18px;height:18px;flex:none}
.auth-card .divider{margin:8px 0 4px}
.auth-password-wrap{position:relative;display:block}
.auth-password-wrap input{width:100%;padding-right:40px}
.auth-reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer}
.auth-reveal:hover{background:var(--soft);color:var(--ink)}
.auth-reveal svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-forgot{justify-self:start;margin-top:-4px;font-size:13px;color:var(--muted)}
.auth-forgot:hover{color:var(--ink)}
.auth-card .notice{margin:0}
.auth-story{position:relative;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:48px 56px;border-left:1px solid var(--line);background:var(--soft);overflow:hidden}
.auth-story::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(ellipse at 50% 40%,var(--brand-soft) 0%,transparent 60%);opacity:.9;pointer-events:none}
.auth-story-inner{position:relative;width:100%;max-width:560px;margin:0 auto;display:grid;gap:14px}
.auth-story .eyebrow{font-size:11px;letter-spacing:2.4px;color:var(--brand);font-weight:600}
.auth-story h2{margin:0;font-size:34px;line-height:1.2;letter-spacing:-1px;font-weight:600}
.auth-story>small{position:absolute;left:56px;bottom:32px;color:var(--muted);font-size:12px}
.auth-code{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 18px 44px #0000000f;overflow:hidden}
.auth-code-head{display:flex;align-items:center;gap:12px;padding:9px 12px 9px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.auth-code-file{flex:1;font-size:12px;color:var(--muted)}
.auth-code-tabs{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--soft)}
.auth-code-tabs button{height:26px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--muted);font-size:12px;cursor:pointer}
.auth-code-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #0000001a}
.auth-code-body pre{margin:0;padding:12px 14px 14px;max-height:340px;overflow:auto;background:transparent;border-radius:0;counter-reset:code-line}
.auth-code-body code{display:block;color:var(--ink);font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}
.auth-code-body .code-line{display:block;counter-increment:code-line;padding-left:3em;text-indent:-3em;white-space:pre-wrap;overflow-wrap:anywhere}
.auth-code-body .code-line::before{content:counter(code-line);display:inline-block;width:2em;margin-right:1em;color:#9aa3b2;text-align:right;text-indent:0;user-select:none}
[data-theme=dark] .auth-code-body .code-line::before{color:#6b7280}
@media(max-width:950px){.auth-layout{grid-template-columns:minmax(0,1fr)}}
.usage-chart-empty{position:relative}
.usage-chart-empty-text{position:absolute;inset:0 0 22px;display:grid;place-items:center;margin:0;font-size:13px;pointer-events:none}

/* Rendered Markdown in the chat (the Agent's replies and text steps): document rhythm at chat scale. */
.md>:first-child{margin-top:0}
.md>:last-child{margin-bottom:0}
.md p{margin:0 0 10px}
.md h1,.md h2,.md h3,.md h4{margin:16px 0 8px;line-height:1.35;font-weight:600;letter-spacing:-.2px}
.md h1{font-size:19px}.md h2{font-size:17px}.md h3{font-size:16px}.md h4{font-size:15px}
.md .anchor{display:none}
.md ul,.md ol{margin:0 0 10px;padding-left:22px}
.md li{margin:3px 0}
.md li>ul,.md li>ol{margin:3px 0 0}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;padding:1px 5px;border-radius:5px;background:var(--soft);border:1px solid var(--line)}
.md pre.md-code{margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--soft);overflow:auto;font-size:13px;line-height:1.6}
.md pre.md-code code{padding:0;border:0;background:none;font-size:inherit}
.md .table-wrap{overflow:auto;margin:0 0 10px;border:1px solid var(--line);border-radius:9px}
.md table{width:100%;border-collapse:collapse;font-size:13.5px}
.md th,.md td{padding:8px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.md th{border-top:0;background:var(--soft);font-weight:600;font-size:12px;color:var(--muted)}
.md .note{margin:0 0 10px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:9px;background:var(--soft)}
.md .note strong{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
.md .note p{margin:0}
.md hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.md a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.workspace-markdown{max-height:60vh;overflow:auto;padding:14px 18px;border:1px solid var(--line);border-radius:9px;background:var(--soft);line-height:1.75;font-size:14.5px}.workspace-markdown>:first-child{margin-top:0}.workspace-markdown>:last-child{margin-bottom:0}
/* Profiles list: the site's tile, the name and host, a coloured state, what the identity holds, the next step. */
.pill.blue{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.profile-search{max-width:260px;min-height:34px;padding:6px 11px;border-radius:8px;font-size:13px}
.panel-head>.profile-search{margin-left:auto}
.profile-table tbody tr:hover td{background:var(--soft)}
.profile-table td:last-child{white-space:nowrap}
.profile-action{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.profile-action>.btn{min-height:34px;padding:6px 12px;font-size:12.5px}
.profile-no-results{padding:18px 22px;margin:0}
/* A row's ⋯ menu: the same disclosure the sidebar's Recent rows use, always visible in a table. */
.row-menu{position:relative;flex:none}
.row-menu>summary{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;color:var(--muted);cursor:pointer;list-style:none}
.row-menu>summary::-webkit-details-marker{display:none}
.row-menu>summary:hover,.row-menu[open]>summary{background:var(--row-active);color:var(--ink)}
.row-menu>summary>.nav-icon{width:16px;height:16px}
.row-menu>.menu-list{left:auto;right:0;top:calc(100% + 4px);width:210px}
.row-menu .menu-list a,.row-menu .menu-list button{justify-content:flex-start;gap:9px}
.row-menu .menu-list .nav-icon{width:15px;height:15px;flex:none;color:var(--muted)}
.row-menu .menu-danger:not(:disabled):hover{color:var(--danger)}
.row-menu .menu-list button:disabled{color:var(--muted);cursor:not-allowed;opacity:1}
.row-menu .menu-list button:disabled .nav-icon{color:var(--muted)}
.profile-table td{vertical-align:middle}.profile-table td:last-child{text-align:right;white-space:nowrap}
.profile-cell{display:inline-flex;align-items:center;gap:12px;min-width:0;color:inherit}.profile-cell:hover strong{text-decoration:underline;text-underline-offset:3px}
.profile-tile{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:15px}
.profile-name{display:grid;gap:2px;min-width:0}.profile-name strong{font-size:14px}.profile-name small{display:block;margin:0;font-family:inherit;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-table .profile-cell:hover{color:inherit}
.profile-table .profile-cell:hover strong{color:var(--brand)}
.profile-saved{display:grid;gap:2px}.profile-saved small{font-size:12px}
.profile-note{font-size:12.5px;margin:0}.panel-foot.profile-note{padding:12px 22px}
/* The Files panel's own "Open Workspace" line is the way in when no file is open; an open preview carries the same link in its header, so the line goes while one is shown. */
.agent-file-preview:not([hidden])~.agent-panel-workspace{display:none}
/* The files a run produced, as attachment cards: a thumbnail of the file itself, the name, the size, a download action. These override the chip rules above. */
.agent-files{gap:8px}.agent-files>.agent-file{display:inline-flex;align-items:stretch;height:auto;max-width:min(100%,360px);gap:0;padding:0;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(17,24,39,.04);transition:box-shadow .15s}
.agent-files>.agent-file:hover{box-shadow:0 2px 8px rgba(17,24,39,.08)}.agent-files>.agent-file:focus-within{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.agent-file-open,.agent-file-download{appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .15s}.agent-file-open:hover,.agent-file-download:hover{background:var(--soft)}.agent-file-open:focus-visible,.agent-file-download:focus-visible{outline:none;background:var(--soft)}
.agent-file-open{display:inline-flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto;padding:6px 10px 6px 6px;text-align:left}
.agent-file-download{display:grid;place-items:center;flex:none;width:44px;border-left:1px solid var(--line);color:var(--muted)}.agent-file-download .nav-icon{width:18px;height:18px}.agent-file-download:hover{color:var(--ink)}.agent-file-download:disabled{opacity:.5;cursor:default}
.agent-file-badge{position:relative;display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:11px;background:var(--brand-soft);color:var(--brand);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:700;letter-spacing:.3px;overflow:hidden}.agent-file-badge .nav-icon{width:18px;height:18px;color:var(--brand)}
/* The thumbnail: the document at a fifth of its size, clipped to the tile; nothing in it is interactive. */
.agent-file-badge.has-thumb{background:#fff;border:1px solid var(--line);color:var(--ink)}.agent-file-paper{position:absolute;inset:0;display:block;pointer-events:none;user-select:none}
.agent-file-paper>.md,.agent-file-paper>pre{display:block;width:260px;min-height:260px;padding:16px 18px;box-sizing:border-box;transform:scale(.2);transform-origin:0 0;font-size:11px;line-height:1.5;color:var(--ink);text-align:left;white-space:normal;margin:0}
.agent-file-paper>pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;white-space:pre-wrap;word-break:break-all}
.agent-file-paper>.md h1{font-size:15px;margin:0 0 6px}.agent-file-paper>.md h2{font-size:13px;margin:8px 0 4px}.agent-file-paper>.md h3,.agent-file-paper>.md h4{font-size:12px;margin:6px 0 3px}.agent-file-paper>.md p,.agent-file-paper>.md ul,.agent-file-paper>.md ol{margin:0 0 5px}.agent-file-paper>.md .note{margin:0 0 5px;padding:4px 6px}.agent-file-paper>.md .anchor{display:none}
.agent-file-paper.html>iframe{width:480px;height:480px;border:0;transform:scale(calc(52 / 480));transform-origin:0 0;background:#fff;pointer-events:none}
.agent-file-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.agent-file-text{display:grid;min-width:0;gap:2px;line-height:1.25;white-space:nowrap}.agent-file-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis}.agent-file-meta{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
[data-theme=dark] .agent-files>.agent-file{box-shadow:0 1px 2px rgba(0,0,0,.4)}[data-theme=dark] .agent-files>.agent-file:hover{box-shadow:0 2px 8px rgba(0,0,0,.5)}[data-theme=dark] .agent-file-badge.has-thumb{background:#fff;color:#111827}[data-theme=dark] .agent-file-paper>.md,[data-theme=dark] .agent-file-paper>pre{color:#111827}

/* The browser instance page: title row, page-level tab strip, the live window and a line of facts under it. */
.browser-head .btn.danger{color:var(--danger)}
.page-tabs{display:flex;align-items:center;gap:2px;margin:4px 0 20px;border-bottom:1px solid var(--line)}
.page-tabs [role=tab]{border:0;background:transparent;color:var(--muted);padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;font:inherit;font-weight:550;cursor:pointer}
.page-tabs [role=tab]:hover{color:var(--ink)}
.page-tabs [role=tab][aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand)}
[data-browser-live] .live-browser{margin-top:0}
.browser-live-meta{margin:10px 2px 0;font-size:12px}
.kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px 24px}
.kv-grid>div{display:grid;gap:3px;min-width:0}
.kv-grid small{color:var(--muted);font-size:12px}
.kv-grid span,.kv-grid code{overflow-wrap:anywhere}
.select-icon .flag{font-size:15px;line-height:1}

/* The Agent pages after the prototype: the sessions table with its search; the run page as the composer beside its code card. */
.section-head>.btn,.section-head .row>.btn{min-height:38px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500}
.section-head>.btn .nav-icon,.section-head .row>.btn .nav-icon{width:16px;height:16px}
.agent-search{margin:0 0 20px}
.agent-search label{max-width:100%}
.agent-runs .agent-run-task{display:block;max-width:560px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The run page stacks: the composer, the code card under it (owner direction, 2026-09-22). */
.agent-new-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.agent-new-grid>*{min-width:0}
.agent-new-main .agent-composer textarea{min-height:150px}
.agent-form-title{display:flex;align-items:center;gap:10px;min-width:0}
.agent-form-title h1{margin:0}
.agent-form-title>div{min-width:0}
.agent-session-meta{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:12px}
.agent-session-meta .provider-mark{width:14px;height:14px}
.agent-back{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;color:var(--muted)}
.agent-back:hover{background:var(--soft);color:var(--ink)}
.agent-back .nav-icon{width:18px;height:18px}
.code-card{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.code-card>*{min-width:0}
.code-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)}
.code-card-head>code{font-size:13px;color:var(--muted)}
.code-card-head .btn{min-height:36px;padding:6px 12px;font-size:13px;font-weight:500}
.code-card-langs{padding:14px 18px 16px;border-bottom:1px solid var(--line)}
.code-card-langs .eyebrow{margin-bottom:10px;color:var(--muted);letter-spacing:1.6px}
.segmented.code-langs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:520px;gap:2px}
.segmented.code-langs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;font-size:13px}
.segmented.code-langs button[aria-pressed=true]{border:1px solid var(--line)}
.lang-mark{width:16px;height:16px;flex:none}
.lang-mark-text{font-size:9px;font-weight:700;letter-spacing:.5px}
.code-card-install{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line)}
.code-card-install>code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--muted)}
.code-card-install .btn{flex:none;min-height:34px;padding:6px 12px;font-size:13px;font-weight:500}
.code-card-body{padding:0 12px;overflow:hidden}
.code-card-body .code-block{margin:12px 0 4px;border:0;border-radius:0}

/* The help marks' explanation: a small card under the mark on hover, focus or tap — no delay, no title. */
.help{position:relative}
.help[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:max-content;max-width:280px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:12.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;text-align:left;white-space:normal;box-shadow:0 10px 30px #0000001f;opacity:0;pointer-events:none;transition:opacity .12s}
.help[data-tip]:hover::after,.help[data-tip]:focus-visible::after,.help[data-tip]:active::after{opacity:1}
.code-panel .panel-head .segmented.code-langs{width:auto;max-width:none;grid-template-columns:repeat(3,auto)}
.code-panel .panel-head .segmented.code-langs button{height:32px;padding:0 12px;font-size:12.5px}
/* The project's danger zone and the deletion's impact list. */
.team-danger{border-color:color-mix(in srgb, var(--danger, #b42318) 35%, var(--line))}
.team-impact{margin:8px 0 12px 18px;padding:0;font-size:13px;color:var(--muted);columns:2;column-gap:24px}
.team-impact li{break-inside:avoid;margin:2px 0}
/* The integrations catalogue: one card per service, its mark, what it asks for, one button. */
.badge .connector-mark{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
/* The live window: an overlay over the page, sized to the viewport from the browser's own aspect ratio; closing it leaves the browser running. */
.live-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:#0f172acc;backdrop-filter:blur(2px)}
.live-window{--aspect:1.7778;width:min(calc(100vw - 48px),calc((100vh - 48px - 172px) * var(--aspect)));max-width:1800px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 80px #00000055;overflow:hidden;display:flex;flex-direction:column}
.live-window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.live-window-facts{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px}
.live-window-facts strong{font-weight:600}
.live-window-facts .badge{font-size:12px}
.live-elapsed{color:var(--muted);font-variant-numeric:tabular-nums}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.live-dot[data-state=running]{background:var(--success)}
.live-dot[data-state=starting]{background:#d97706}
.live-window-actions .btn{min-height:34px;padding:6px 12px;font-size:13px}
.live-window-actions .btn.icon-only{width:34px;padding:0}
.live-window-actions .btn svg{width:16px;height:16px}
.live-window .live-browser{border:0;border-radius:0;padding:0;margin:0}
.live-window .browser-chrome{border:0;border-radius:0}
.live-window .preview-help{display:none}
.live-window [data-controller]:not(:empty){padding:8px 14px}
.live-window .preview-stage{max-height:calc(100vh - 48px - 172px);overflow:hidden}
.live-window .preview-stage img{max-height:calc(100vh - 48px - 172px);object-fit:contain;margin:0 auto}
/* The instance page's picture of the window. */
.live-thumb{padding:0;overflow:hidden}
.live-thumb-stage{position:relative;aspect-ratio:16 / 9;max-height:52vh;background:var(--soft);display:grid;place-items:center}
.live-thumb-stage img{width:100%;height:100%;object-fit:contain;display:block}
.live-thumb-stage>.empty{margin:0}
.live-thumb-open{position:absolute;inset:0;display:grid;place-items:center;background:#0f172a00;transition:background .15s}
.live-thumb-stage:hover .live-thumb-open{background:#0f172a33}
.live-thumb-open .btn{box-shadow:0 8px 24px #00000033}
.live-thumb-foot{padding:10px 14px;border-top:1px solid var(--line);font-size:13px}
.code-install{margin:8px 0}
.code-install code{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-size:12px;overflow-x:auto;white-space:nowrap}
.preview-stage[data-busy] img{cursor:progress}
/* The instance page once the browser has ended: the record of the run where the window was. */
.browser-ended{display:grid;gap:16px}
.browser-ended-head h2{margin:0 0 4px}
.browser-ended-head p{margin:0}
.browser-ended .kv-grid{max-width:720px}

/* Tool integrations: one compact row per service, grouped by kind of work. The row holds the one action that
   matters (connect or remove); the chevron opens what the service is, how it authorises, and the account. */
.service-intro{margin:-6px 0 26px}
.service-section+.service-section{margin-top:30px}
.service-section>.row{margin-bottom:12px;align-items:center}
.service-label{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.service-section>.row .service-label{margin:0}
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.service{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.service>summary{display:flex;align-items:center;gap:14px;min-height:66px;padding:12px 190px 12px 16px;border-radius:14px;cursor:pointer;list-style:none}
.service>summary::-webkit-details-marker{display:none}
.service>summary:hover{background:var(--soft)}
.service[open]>summary{border-radius:14px 14px 0 0}
.service-chevron{display:grid;place-items:center;width:18px;flex:none;color:var(--muted)}
.service-chevron .nav-icon{width:16px;height:16px;transform:rotate(-90deg);transition:transform .15s ease}
.service[open] .service-chevron .nav-icon{transform:none}
.service-mark{display:grid;place-items:center;width:34px;height:34px;flex:none;color:var(--ink)}
.service-mark svg{width:30px;height:30px}
.service-name{font-size:15px;font-weight:550;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-actions{position:absolute;top:0;right:14px;height:66px;display:flex;align-items:center;gap:12px}
.service-actions .btn{min-height:36px;padding:6px 14px;font-size:13px;font-weight:500}
.service-actions .btn .nav-icon{width:15px;height:15px}
.service-actions .agent-spinner{width:13px;height:13px}
.service-ok{display:grid;place-items:center;color:var(--success)}
.service-ok .nav-icon{width:18px;height:18px}
.service-off{font-size:13px}
.btn.soft{background:var(--soft);border-color:transparent}
.btn.soft:hover:not(:disabled){background:var(--line)}
.btn.soft:disabled{color:var(--muted);cursor:default}
.service-body{display:grid;gap:12px;padding:2px 18px 16px 48px}
.service-body p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.service-body code{font-size:12.5px}
.service-tags{display:flex;gap:6px;flex-wrap:wrap}
.service-tags .tag{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:500}
.service-account{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.service-account .row{gap:4px}
.service-account .btn{min-height:30px;padding:4px 10px;font-size:13px}
.oauth-return main{max-width:440px;margin:22vh auto 0;padding:0 24px;text-align:center;color:var(--muted);font-size:14px}
@media(max-width:900px){.service-grid{grid-template-columns:1fr}}
/* A connection's page: who it is and whether tasks can use it in the header; the connection's facts, its tools
   as switches, the calls it made; pausing and removing last. */
.integration-head{align-items:center}
.integration-head .agent-form-title{align-items:center;gap:12px}
.integration-head .service-mark{width:40px;height:40px}
.integration-head .service-mark svg{width:36px;height:36px}
.integration-head h1{margin:0}
.integration-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 0}
.integration-sub a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.integration-note{margin:0;font-size:13px}
.kv-grid .pill{vertical-align:1px}
.integration-tools{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.integration-tool{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 16px;padding:12px 16px}
.integration-tool+.integration-tool{border-top:1px solid var(--line)}
.integration-tool-main{display:flex;align-items:flex-start;gap:14px;min-width:0;cursor:pointer}
.integration-tool-main .switch{margin-top:1px}
.integration-tool-main>span{display:grid;gap:3px;min-width:0}
.integration-tool-main code{font-size:13px;font-weight:550;color:var(--ink)}
.integration-tool-main small{font-size:13px;line-height:1.5}
.integration-params>summary{cursor:pointer;font-size:12px;color:var(--muted);list-style:none;padding:2px 0}
.integration-params>summary::-webkit-details-marker{display:none}
.integration-params{text-align:right}
.integration-params[open]{grid-column:1/-1}
.integration-params pre{text-align:left}
.integration-params pre{margin:8px 0 0;max-height:280px;overflow:auto;font-size:12px}
/* ── Schedules (design record 2026-10-12): the editor is the composer plus a "When it runs" card; the list answers "when next,
   how did the last one go"; the detail is When / What / Runs. ── */
.schedule-editor{display:grid;gap:18px}.schedule-editor>fieldset{display:contents;border:0;margin:0;padding:0;min-width:0}
.schedule-editor .section-head{margin-bottom:4px}
.schedule-head-actions{display:flex;align-items:center;gap:10px;flex:none}
.schedule-card{padding:18px 20px 16px}
.card-label{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.card-label>.nav-icon{width:15px;height:15px}
.schedule-card textarea{display:block;width:100%;min-height:120px;max-height:320px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.6;resize:vertical}
.schedule-card textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.schedule-card .agent-toolbar{padding-top:12px}
.schedule-when{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:16px;align-items:start}
.schedule-when label{display:grid;gap:6px;font-size:13px;color:var(--muted);font-weight:400}
.schedule-when input,.schedule-when select{height:42px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:14px;min-width:0}
.schedule-every{display:flex;gap:8px}.schedule-every>input{width:110px}.schedule-every>select{flex:1}
.schedule-when .select-field{display:grid;gap:6px;font-weight:400}.schedule-when .select-field>span{font-size:13px;color:var(--muted)}
.schedule-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.schedule-preset{height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:12px}.schedule-preset:hover{background:var(--soft)}
.schedule-when [data-timing]>p{margin-top:8px;font-size:12px}
.schedule-next{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:var(--soft);font-size:13px;line-height:1.6;min-height:46px}
.schedule-next strong{font-weight:600}.schedule-next .muted{color:var(--muted)}
.schedule-missed{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:16px;font-size:13.5px}
.schedule-missed label{display:flex;align-items:center;gap:7px;font-weight:400}.schedule-missed input{width:16px;height:16px;margin:0}
.schedule-name{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;font-size:12.5px}.schedule-name>label{flex:0 1 420px;font-size:13px;color:var(--muted)}.schedule-name>label>input{height:42px}.schedule-name>span{padding-bottom:12px}
/* The list */
.schedule-tools{display:flex;align-items:center;gap:10px}
.schedule-search{display:flex;align-items:center;gap:8px;height:34px;width:240px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:13px;font-weight:400}.schedule-search>input{flex:1;min-width:0;border:0;padding:0;background:transparent;color:var(--ink);outline:none;font-size:13px}.schedule-search>.nav-icon{width:15px;height:15px}
.schedule-table .table-resource small.schedule-task{font-family:inherit;font-size:12px;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schedule-two{display:grid;gap:2px;font-size:13px}.schedule-two small{color:var(--muted);font-size:12px}
.schedule-row-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.schedule-table tbody tr:hover td{background:var(--soft)}
.schedule-no-results{padding:18px 22px;margin:0}
/* The detail */
.schedule-head-switch{display:flex;align-items:center;gap:8px;padding:0 6px;color:var(--muted);font-size:13px}
.schedule-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;margin-bottom:18px}
.schedule-kv{display:grid;gap:10px;margin:0;font-size:13.5px}.schedule-kv>div{display:flex;justify-content:space-between;gap:12px}.schedule-kv dt{color:var(--muted)}.schedule-kv dd{margin:0;font-weight:600;text-align:right}
.schedule-task-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin-bottom:14px}
.schedule-chips{display:flex;gap:6px;flex-wrap:wrap}.schedule-chips .chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--ink);background:var(--surface)}.schedule-chips .chip>.nav-icon{width:14px;height:14px;color:var(--muted)}.schedule-chips a.chip:hover{background:var(--soft)}
.schedule-sync{display:inline-flex;align-items:center;gap:6px;font-size:12px}.schedule-sync>.nav-icon{width:14px;height:14px}
@media(max-width:900px){.schedule-cards{grid-template-columns:1fr}.schedule-when{grid-template-columns:1fr}}

/* ── Workspaces (audit 2026-10-12, batch 1): a panel of spaces with a storage meter; the detail's files are a table with a
   selection bar that appears only while something is selected, and a preview drawer inside the page card. ── */
.shell-main{position:relative}
.workspace-tools,.list-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.workspace-search,.list-search{display:flex;align-items:center;gap:8px;height:34px;width:240px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:13px;font-weight:400}.workspace-search>input,.list-search>input{flex:1;min-width:0;border:0;padding:0;background:transparent;color:var(--ink);outline:none;font-size:13px}.workspace-search>.nav-icon,.list-search>.nav-icon{width:15px;height:15px;flex:none}
.workspace-cell{display:inline-flex;align-items:center;gap:12px;min-width:0;color:inherit}.workspace-cell>.nav-icon{width:18px;height:18px;color:var(--muted);flex:none}
.workspace-tile{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--brand-soft);color:var(--brand)}.workspace-tile>.nav-icon{width:17px;height:17px;color:inherit}
.workspace-name,.list-cell{display:grid;gap:2px;min-width:0}.workspace-name strong,.list-cell strong{font-size:14px;font-weight:600}.list-cell a{color:inherit}.list-cell a:hover strong{color:var(--brand)}.workspace-name small,.list-cell small{display:block;margin:0;font-family:inherit;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-table .table-resource a:hover strong{color:var(--brand)}.workspace-table tbody tr:hover td,.workspace-files tbody tr:hover td{background:var(--soft)}
.workspace-storage{display:grid;gap:4px}.workspace-storage small{font-size:12px}
.workspace-meter{display:block;width:120px;height:6px;border-radius:3px;background:var(--row-active);overflow:hidden}.workspace-meter>i{display:block;height:100%;background:var(--brand)}.workspace-meter>i:not([data-meter="0"]){min-width:3px}
.workspace-row-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.workspace-no-results{padding:18px 22px;margin:0}
.workspace-head-actions{display:flex;align-items:center;gap:10px;flex:none}.workspace-stats{font-size:13px;white-space:nowrap}
.workspace-check{width:44px;padding-right:0}.workspace-check input{width:16px;height:16px;margin:0;display:block}
.workspace-files .workspace-path{font-weight:500;overflow-wrap:anywhere}.workspace-files tr.is-active td{background:var(--brand-soft)}
.workspace-preview-btn{min-height:32px;padding:5px 10px;font-size:12.5px}.workspace-by{min-height:28px;padding:3px 8px;font-size:12px;font-family:ui-monospace,SFMono-Regular,monospace}
.workspace-selection{display:flex;align-items:center;gap:10px;padding:10px 22px;background:var(--brand-soft);color:var(--brand);font-size:13px;border-bottom:1px solid var(--line)}.workspace-selection .btn{min-height:30px;padding:4px 10px;font-size:12.5px}.workspace-selection .btn.danger{color:var(--danger)}
.btn.sm{min-height:30px;padding:4px 10px;font-size:12.5px}
.workspace-drawer{position:absolute;top:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;width:min(480px,60%);border-left:1px solid var(--line);background:var(--surface);box-shadow:-16px 0 40px -20px #0004;transform:translateX(105%);transition:transform .2s ease}
.workspace-drawer[data-open=true]{transform:none}
.workspace-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;height:56px;padding:0 12px 0 20px;border-bottom:1px solid var(--line)}.workspace-drawer-head>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.workspace-drawer-close{width:34px;min-height:34px;padding:0}.workspace-drawer-close .nav-icon{width:16px;height:16px}
.workspace-drawer-meta{flex:none;padding:10px 20px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.6}
.workspace-drawer-body{flex:1;min-height:0;overflow:auto;padding:20px}.workspace-drawer-body pre{margin:0;max-height:none;font:12.5px/1.7 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft);padding:14px;border-radius:10px}
.workspace-drawer-body iframe{width:100%;height:60vh;border:1px solid var(--line);background:#fff;border-radius:8px}.workspace-image{max-width:100%;max-height:70vh;object-fit:contain}
@media(prefers-reduced-motion:reduce){.workspace-drawer{transition:none}}
@media(max-width:700px){.workspace-drawer{width:100%}.workspace-head-actions{flex-wrap:wrap}}
/* ── Profile detail (audit 2026-10-12, batch 1): header with the state, one primary action and the menu; Identity and
   Saved state cards; the live browser or the ways to sign in below. ── */
.profile-head-actions{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.profile-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.profile-kv{display:grid;gap:10px;margin:0;font-size:13.5px}.profile-kv>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.profile-kv dt{color:var(--muted);flex:none}.profile-kv dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}.profile-kv dd a{color:var(--ink)}.profile-kv dd a:hover{color:var(--brand)}
.note{padding:12px 14px;border-radius:10px;background:var(--soft);font-size:12.5px;color:var(--muted);line-height:1.6}.profile-note-box{margin-top:14px}
.profile-empty-actions{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.profile-starting{margin-bottom:12px}
@media(max-width:900px){.profile-cards{grid-template-columns:1fr}}

/* ── Lists (audit 2026-10-12, batches 2–4): rows hover as one; chips for a key's scopes; the panel foot's note. ── */
.list-table tbody tr:hover td{background:var(--soft)}.list-table .row-menu{margin-left:auto}
.list-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.chips{display:inline-flex;gap:6px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;background:var(--soft);font-size:12px;font-family:ui-monospace,SFMono-Regular,monospace;color:var(--ink)}
.list-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.list-foot code{font-size:12px;background:var(--soft);padding:2px 6px;border-radius:5px}
.list-sub{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.list-avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:600}
.list-tile{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--soft);color:var(--ink)}.list-tile>.nav-icon,.list-tile>svg{width:18px;height:18px}
.list-row{display:inline-flex;align-items:center;gap:12px;min-width:0}
.panel-note{padding:14px 22px;margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.head-actions{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.list-select{min-width:150px}.list-select .custom-select{margin:0}
/* ── Page editors (webhooks, after schedules): cards in a column, the head holding Cancel and the submit; an event choice is a switch-less checkbox row. ── */
.page-editor{display:grid;gap:18px}.page-editor>fieldset{display:contents;border:0;margin:0;padding:0;min-width:0}.page-editor .section-head{margin-bottom:4px}
.editor-card{padding:18px 20px 16px}.editor-card>p.muted{margin:10px 0 0;font-size:12.5px}.editor-card .grid2{margin:0}
.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.event-choice{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-weight:400}.event-choice:hover{background:var(--soft)}.event-choice input{width:16px;height:16px;padding:0;margin:2px 0 0;flex:none}.event-choice span{display:grid;gap:2px;min-width:0}.event-choice code{font-size:12.5px}.event-choice small{color:var(--muted);font-size:12px;line-height:1.4}
.switch-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:400}.switch-label .switch{padding:0}
.webhook-steps{margin:0;padding-left:20px;font-size:13.5px;line-height:1.7}.webhook-steps code{font-size:12px}
@media(max-width:800px){.event-grid{grid-template-columns:1fr}}
/* ── Project page (audit 2026-10-12, batch 3): the intro under the head; "you" beside the reader's own name. ── */
.team-intro{margin:-10px 0 22px;font-size:13px}.team-you{font-weight:400;font-size:13px}
.billing-note{margin:0 0 18px}
/* ── Integrations list (audit 2026-10-12, batch 3): panels of rows; the mark in a tile; the protocol as a tag inside the secondary line. ── */
.service-section .panel-head h2.service-label{margin:0;font-size:12px}.list-cell .tag{display:inline-block;padding:1px 6px;border-radius:5px;background:var(--soft);font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--muted)}
.list-tile.service-mark{background:var(--soft)}.list-tile.service-mark svg{width:22px;height:22px}
.list-cell small .endpoint-cell{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11.5px}
/* ── History (audit 2026-10-12, batch 4): the filters live in the panel head — search, product segment, a compact status select. ── */
.history-filters{margin:0}.history-filters .list-search{width:200px}.history-filters .list-select .select-field{flex:none;gap:0;font-size:13px}.history-filters .list-select .select-field>span:first-child{display:none}.history-filters .list-select .select-trigger{min-height:34px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:400;width:auto;min-width:150px}
.model-allowed{margin:4px 0 0;font-size:12.5px;line-height:1.7}.model-allowed code{font-size:11.5px;background:var(--soft);padding:1px 5px;border-radius:4px}
/* ── Phones: a panel head stacks its tools under the count, full width; a two-line cell keeps a readable width and the table scrolls. ── */
@media(max-width:700px){.panel-head{flex-wrap:wrap}.panel-head .list-tools,.panel-head .history-filters{width:100%;justify-content:flex-start}.list-search,.history-filters .list-search,.workspace-search{width:100%}.list-select,.history-filters .list-select .select-trigger{width:100%}.table-resource,.list-cell,.workspace-name{min-width:180px}.list-foot{flex-direction:column;align-items:flex-start}.profile-head-actions,.head-actions{width:100%;justify-content:flex-start}}