/* Every pop-up opens over a BLURRED background (owner 2026-11-11: "every popper has to be open with the background as blurred …
   in every browser"). One rule for every backdrop, present and future: any class ending in "scrim". Loaded last.
   Chrome, Edge, Safari (with the -webkit- prefix) and Firefox 103+ blur; anything older gets a stronger tint instead. */
.scrim, .cl-scrim, .cl-rscrim, .team-scrim, .db-scrim, .cx-scrim, .adv-scrim, [class*="-scrim"], [class$="scrim"] {
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  background-color: rgba(18, 16, 14, .22);
}
.team-scrim.soft, .cl-rscrim { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background-color: rgba(18, 16, 14, .12); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scrim, .cl-scrim, .cl-rscrim, .team-scrim, .db-scrim, .cx-scrim, .adv-scrim, [class*="-scrim"], [class$="scrim"] { background-color: rgba(18, 16, 14, .5); }
}
/* the blur needs the layer to cover the screen and sit under the pop-up: make sure no backdrop is transparent to it */
.adv-scrim { position: fixed; }
@media (prefers-reduced-transparency: reduce) { .scrim, [class*="-scrim"], [class$="scrim"] { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(18, 16, 14, .5); } }

/* ===== One page layout for every page (owner 2026-11-11): title, then subtitle, then ONE bar: every tab bar and filter on
   the LEFT, the search on the far RIGHT (actions sit just before it). Use .pbar > .pbar-l + .pbar-r on every page. ===== */
.pbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 18px; min-width: 0; }
.pbar-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.pbar-r { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.pbar .pbar-search, .pbar-search { position: relative; width: 340px; max-width: 100%; flex: 0 1 340px; }
.pbar-search input { width: 100%; height: 42px; border-radius: 12px; }
.pbar .adv-btn { height: 42px; }
.pbar.st-bar { justify-content: flex-start; }
.page-h > .search, .page-h .st-right { display: none; }
@media (max-width: 760px) { .pbar-r { flex: 1 1 100%; } .pbar .pbar-search, .pbar-search { flex: 1 1 auto; width: auto; } }
/* Files: the search sits at the right end of the file bar, before the list/grid switch */
.fm2-bar .pbar-search { margin-left: auto; flex: 0 1 300px; } .fm2-bar .pbar-search input { height: 38px; }
/* Your LLM: web pages show their site icon */
.cl-fav { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cl-fav.md, .cl-fav.lg { width: 40px; height: 40px; border-radius: 11px; }
.cl-fav img { position: relative; z-index: 1; width: 62%; height: 62%; object-fit: contain; }
.cl-fav i { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px var(--font); font-style: normal; color: #fff; background: var(--h); opacity: 0; }
.cl-fav.none i { opacity: 1; }
.cx-lead.cx-foot { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); }

/* ===== Composer: speed slider + a send button the same size as the chips (owner 2026-11-11) ===== */
.composer .send { width: 32px; height: 32px; border-radius: 10px; }
.composer .send svg { width: 15px; height: 15px; }
.spd { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: 99px; background: var(--hover); color: var(--ink-2); font-size: 12.5px; white-space: nowrap; cursor: default; }
.spd-ic { display: grid; place-items: center; color: var(--brand); }
.spd input[type=range] { -webkit-appearance: none; appearance: none; width: 92px; height: 18px; margin: 0; background: transparent; cursor: grab; }
.spd input[type=range]:active { cursor: grabbing; }
.spd input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--brand) 0 var(--p), var(--line-2) var(--p) 100%); }
.spd input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--line-2); }
.spd input[type=range]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--brand); }
.spd input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.25); transition: transform .12s var(--ease); }
.spd input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.25); }
.spd input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.spd input[type=range]:focus-visible { outline: 2px solid var(--sel-ic); outline-offset: 3px; border-radius: 99px; }
.spd-eta { min-width: 48px; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
@media (max-width: 640px) { .spd input[type=range] { width: 64px; } .spd-eta { min-width: 40px; } }

/* ===== Service drawer v2 (2026-11-11): facts, plans, YOUR ACCOUNTS (sign in once, several accounts side by side), how it
   connects, projects with their account ===== */
.drawer.sd { width: min(520px, calc(100vw - 16px)); }
.sd .drawer-h { padding-bottom: 12px; }
.sd-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .sd-pick { background: rgba(224,104,47,.12); color: var(--sel-ic); }
.sd .drawer-b { gap: 22px; }
.sd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sd-fact { padding: 12px; border-radius: 14px; background: var(--bg, #f4f3f1); min-width: 0; } .sd-fact small { display: block; font-size: 11.5px; color: var(--ink-3); } .sd-fact b { display: block; margin-top: 4px; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sd-h b { font-weight: 500; font-size: 14.5px; } .sd-h small { font-size: 12px; color: var(--ink-3); text-align: right; }
.sd-plans { display: grid; gap: 6px; }
.sd-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.sd-plan.on { box-shadow: inset 0 0 0 1.5px rgba(224,104,47,.45); background: linear-gradient(90deg, rgba(224,104,47,.05), transparent); }
.sd-plan b { display: block; font-weight: 500; font-size: 13.5px; } .sd-plan small { display: block; font-size: 12px; color: var(--ink-3); } .sd-plan em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-accts { display: grid; gap: 6px; margin-bottom: 8px; }
.sd-acct { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--bg, #f4f3f1); }
.sd-acct .tn { flex: 1; min-width: 0; } .sd-acct b { display: block; font-weight: 500; font-size: 13.5px; } .sd-acct small { display: block; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 12.5px; background: hsl(var(--h) 55% 50%); }
.sd-empty { margin: 0 0 10px; font-size: 13px; color: var(--ink-3); }
.sd-add { display: flex; gap: 8px; } .sd-add input[name=label] { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); font: inherit; font-size: 13px; outline: none; }
.sd-add input[name=label]:focus { border-color: rgba(224,104,47,.55); box-shadow: 0 0 0 3px rgba(224,104,47,.14); }
.sd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sd-steps li { display: flex; gap: 12px; align-items: flex-start; } .sd-steps li > span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--sel); color: var(--sel-ic); }
.sd-steps b { display: block; font-weight: 500; font-size: 13.5px; } .sd-steps small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.sd-projs { display: grid; gap: 6px; }
.sd-proj { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.sd-proj .ai-icon { flex: none; border-radius: 10px; } .sd-proj .tn { flex: 1; min-width: 0; } .sd-proj b { display: block; font-weight: 500; font-size: 13.5px; } .sd-proj small { display: block; font-size: 12px; color: var(--ink-3); }
.sd-sel { height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel); font: inherit; font-size: 12.5px; padding: 0 8px; max-width: 130px; }

/* ===== Desktop app window (owner 2026-11-11: "something wrong with the edge here"): a thin title strip across the top holds
   the Mac window buttons and drags the window; every card starts just below it, in every layout (sidebar open or folded, sign-in). */
html.desk { --desk-bar: 28px; }
html.desk::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--desk-bar); -webkit-app-region: drag; z-index: 2147483000; }
html.desk #root { padding-top: var(--desk-bar); }
html.desk .app, html.desk .main, html.desk .auth { height: calc(100vh - var(--desk-bar)); }
html.desk .a2-art { min-height: calc(100vh - 32px - var(--desk-bar)); }
/* labels and nav never get text-selected by a click or drag (the desktop app showed "Create" highlighted) */
.side, .side *, .topbar .crumbs, .hx-h, .hx-h *, .hx-rail .hx-sec, .hx-g, .seg, .cl-filters, .pbar-l, .page-h h1 { -webkit-user-select: none; user-select: none; }
.side input, .side textarea { -webkit-user-select: text; user-select: text; }

/* ===== Owner 2026-11-11: "remove the subtext from all the pages. I just want the title and utilize the spacing below the title."
   Every page header is the title alone; the bar (tabs left, search right) sits right under it. Applies to future pages too. ===== */
.page-h h1 .soft, .st-head h1 .soft, .db-head h1 .soft, .sk-head h1 .soft, .fm-headrow h1 .soft, .cl2 .cl-head h1 .soft, .team-head h1 > span, .h2-head h1 .soft-x { display: none !important; }
.page-h, .st-head, .db-head, .sk-head, .fm-headrow { margin: 0 0 14px !important; row-gap: 12px; }
.page-h h1, .st-head h1, .db-head h1, .sk-head h1, .fm-headrow h1, .cl2 .cl-head h1, .team-head h1 { margin: 0 !important; line-height: 1.1; }
.pbar { margin-bottom: 14px; }
.team-head .team-strip { display: none; }

/* ===== My Applications as cards (owner 2026-11-11: "not standalone … really nice cards, aligned") ===== */
.la-grid.ma-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; justify-content: stretch; }
.ma-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-card); background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; width: auto; text-align: left; transition: box-shadow .2s var(--ease); }
.ma-card:hover { box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line-2); }
.ma-card .ai-icon, .ma-card .ai-icon:hover { transform: none !important; flex: none; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 18px -10px rgba(0,0,0,.35); }
.ma-top { display: flex; align-items: flex-start; gap: 8px; }
.ma-hit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.ma-hit .tn { min-width: 0; } .ma-hit b { display: block; font: 500 16px/1.25 var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ma-hit small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.ma-card .la-more { position: static; opacity: 0; width: 30px; height: 30px; flex: none; }
.ma-card:hover .la-more, .ma-card .la-more:focus-visible, .ma-card .la-more[aria-expanded="true"] { opacity: 1; transform: none; }
.ma-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-plat { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--bg, #f1f0ee); font-size: 12px; color: var(--ink-2); }
.ma-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.ma-meta { flex: 1; min-width: 0; } .ma-meta b { display: block; font-weight: 500; font-size: 13.5px; font-variant-numeric: tabular-nums; } .ma-meta small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ma-qr { width: 34px; height: 34px; }
.ma-new { align-items: flex-start; justify-content: center; border: 0; box-shadow: inset 0 0 0 1.5px var(--line-2); background: transparent; cursor: pointer; font: inherit; color: var(--ink); min-height: 196px; }
.ma-new:hover { box-shadow: inset 0 0 0 1.5px var(--sel-ic); background: rgba(224,104,47,.03); }
.ma-new b { font-weight: 500; font-size: 15px; } .ma-new small { font-size: 12.5px; color: var(--ink-3); }
.ma-plus { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--sel); color: var(--sel-ic); }
.la-hint { display: none; }
/* the tab bar sits right under the title on every page */
.page-h { row-gap: 8px !important; } .page-h + .pbar, .page-h + .st-bar { margin-top: -4px; }
.la-grid.ma-grid { padding: 0; margin: 0; }
.ma-card.la-app { align-items: stretch; text-align: left; }
.ma-card .la-hit.ma-hit, .ma-card .ma-hit { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; width: auto; padding: 0; gap: 14px; }
.ma-card .la-name { margin: 0; text-align: left; max-width: none; }
.ma-card .ma-tags { justify-content: flex-start; }
.ma-card .ma-foot { width: 100%; }

/* ===== AI Store · All AI (the 24K+ directory) ===== */
.dir-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; } .dir-head b { font-weight: 500; font-size: 15px; } .dir-head small { font-size: 12px; color: var(--ink-3); }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dir-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-card); min-width: 0; min-height: 168px; }
.dir-card.skel { background: var(--hover); box-shadow: none; }
.dir-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 12px; row-gap: 10px; }
.dir-card > .tn { min-width: 0; align-self: center; } .dir-card b { display: block; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-card small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-card p { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dir-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.dir-pop { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dir-ic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; overflow: hidden; background: hsl(var(--h) 45% 92%); box-shadow: inset 0 0 0 1px var(--line); }
.dir-ic i { font: 600 15px var(--font); font-style: normal; color: hsl(var(--h) 45% 32%); }
.dir-ic.fav { background: #fff; } .dir-ic.fav img { position: absolute; inset: 9px; width: 22px; height: 22px; object-fit: contain; z-index: 1; background: #fff; } .dir-ic.fav img + i { opacity: 0; }
.dir-more { display: flex; justify-content: center; margin: 18px 0 6px; }
.store.dir .store-rail .rail-in button .nl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* logo tiles never stretch inside a flex row (the stack picker drew Next.js 65px wide and cropped it) */
.mono-tile { flex: none !important; aspect-ratio: 1; }
.pick-sel > .mono-tile { width: 24px; height: 24px; }
/* chosen options use the light raised chip, never black (locked design: selected = light) */
.ai-opts button.on { background: var(--sel-raise, #fff) !important; color: var(--ink) !important; box-shadow: var(--sel-edge, inset 0 0 0 1px var(--line-2)), 0 1px 2px rgba(0,0,0,.06) !important; }

/* Scroll areas are rounded windows (owner 2026-11-11: "not the smooth edge … the rounded edge, so if I scroll it won't show the
   sudden cut, it goes inside"): content slides under rounded corners, no fade. The chat thread and every page body. */
.thread { border-radius: 24px; overflow: auto; overscroll-behavior: contain; padding-top: 16px; padding-bottom: 24px; clip-path: inset(0 round 24px); }
.content { border-radius: 24px 24px 0 0; clip-path: inset(0 round 24px 24px 0 0); }

/* the composer tightens itself when it is narrow (side panels open): chips drop their words, the speed slider shrinks */
form.composer { container-type: inline-size; }
@container (max-width: 760px) { .composer .priv-chip > span:not(.ic), .composer .opt-chip em { display: none; } .spd input[type=range] { width: 64px; } .spd { padding: 0 10px; gap: 6px; } }
@container (max-width: 600px) { .composer .opt-chip { display: none; } .composer .ai-pick .faint { display: none; } }
.composer .comp-row { min-width: 0; flex-wrap: nowrap; } .composer .comp-row > * { min-width: 0; }
/* the scroller's edges are the cards' edges, so a card slides under the rounded corners instead of being cut straight */
.thread { padding-left: 0 !important; padding-right: 0 !important; }
/* Chat column (owner 2026-11-11): the conversation and the input share ONE width, as wide as the column allows, and the
   conversation scrolls inside the same rounded corner the History and Project panels use */
.thread-col { padding: 0 12px; }
.thread-col .thread { padding: 0 0 24px !important; border-radius: var(--r-card); clip-path: inset(0 round var(--r-card)); }
.thread-col .thread-in { max-width: none; margin: 0; }
.thread-col .composer-wrap { padding-left: 0 !important; padding-right: 0 !important; }
.thread-col .composer, .thread-col .composer-wrap .hint { max-width: none; margin-left: 0; margin-right: 0; }

/* Speed in the build brief: the four time cards ARE the picker (one control, no separate bar); the composer slider follows */
.est-grid .est { font: inherit; text-align: left; border: 0; cursor: pointer; color: inherit; transition: box-shadow .15s var(--ease), background-color .15s var(--ease); }
.est-grid .est:hover:not(.on) { box-shadow: inset 0 0 0 1px var(--line-2); }
.est-grid .est.on { cursor: default; }
/* no outline box around the speed slider while dragging; the thumb shows focus for keyboard users only */
.spd input[type=range]:focus, .spd input[type=range]:focus-visible { outline: none !important; box-shadow: none !important; }
.spd input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(224,104,47,.35), 0 1px 3px rgba(0,0,0,.25); }
.spd:focus-within { box-shadow: none; }
/* Stack: framework, then its UI kit and data layer (shadcn/ui, Flux UI, Prisma, Eloquent…) */
.stack-more { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.stack-sel { min-width: 0; } .stack-sel > span { display: grid; line-height: 1.2; } .stack-sel small { font-size: 11px; color: var(--ink-3); }

/* Services-and-cost table fits any width: when narrow each service is two lines (category + provider, then the two prices
   and Change), so logos never sit on top of prices */
.cost { container-type: inline-size; }
@container (max-width: 620px) {
  .cost-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "cat prov prov" "now later act"; row-gap: 6px; padding: 10px 14px; }
  .cost-row > :nth-child(1) { grid-area: cat; } .cost-row > :nth-child(2) { grid-area: prov; } .cost-row > :nth-child(3) { grid-area: now; } .cost-row > :nth-child(4) { grid-area: later; } .cost-row > :nth-child(5) { grid-area: act; justify-self: end; }
  .cost-row.head { display: none; }
  .cost-row .now::before { content: 'To start'; display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
  .cost-row .later::before { content: 'Once it grows'; display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
}

/* ===== Suggestions pop-up ===== */
.sg-ov { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .18s var(--ease); }
.sg-ov.in { opacity: 1; }
.sg-scrim { position: absolute; inset: 0; }
.sg-modal { position: relative; width: min(560px, 100%); height: min(640px, calc(100dvh - 32px)); display: flex; flex-direction: column; border-radius: 22px; background: var(--panel); box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); transform: translateY(8px); transition: transform .2s var(--ease); }
.sg-ov.in .sg-modal { transform: none; }
.sg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 8px 22px; } .sg-h b { display: block; font: 500 18px var(--font); } .sg-h small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.sg-b { flex: 1; min-height: 0; overflow: auto; padding: 10px 22px 16px; display: grid; gap: 12px; align-content: start; }
.sg-kinds { flex-wrap: wrap; justify-self: start; }
.sg-modal textarea { width: 100%; min-height: 150px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel); font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); outline: none; }
.sg-modal textarea:focus { border-color: rgba(224,104,47,.55); box-shadow: 0 0 0 3px rgba(224,104,47,.14); }
.sg-drop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed var(--line-2); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background-color .15s; }
.sg-drop:hover, .sg-drop.over { border-color: var(--sel-ic); background: rgba(224,104,47,.04); } .sg-drop b { display: block; font-weight: 500; font-size: 13.5px; } .sg-drop small { display: block; font-size: 12px; color: var(--ink-3); }
.sg-files { display: flex; flex-wrap: wrap; gap: 6px; } .sg-files > span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; border-radius: 99px; background: var(--bg, #f1f0ee); font-size: 12.5px; max-width: 100%; } .sg-files small { color: var(--ink-3); } .sg-files button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; } .sg-files button:hover { background: var(--hover); color: var(--ink); }
.sg-err { margin: 0; font-size: 13px; color: #c43d2f; }
.sg-f { display: flex; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.sg-done { display: grid; justify-items: center; gap: 6px; padding: 30px 0 10px; text-align: center; } .sg-done b { font-weight: 500; font-size: 15px; } .sg-done small { color: var(--ink-3); font-size: 13px; } .sg-done .btn { margin-top: 10px; }
.sg-ok { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(34,160,90,.12); color: #1f8f52; }
.sg-mine { display: grid; gap: 6px; margin-top: 6px; } .sg-mine > b { font-weight: 500; font-size: 13px; color: var(--ink-2); } .sg-mine > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg, #f4f3f1); font-size: 13px; } .sg-mine .tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sg-mine small { color: var(--ink-3); font-size: 12px; }

/* ===== The Microooo wordmark: tight, confident setting; the dot of the i is a copper node (the logo's connected nodes) ===== */
.wordmark { position: relative; display: inline-block; font: 650 19px/1 var(--font); letter-spacing: -.045em; color: var(--ink); white-space: nowrap; font-feature-settings: "ss01", "cv11"; }
.wordmark > span { display: inline-flex; align-items: baseline; }
.wordmark .wm-u { letter-spacing: -.06em; }
.wordmark .wm-i { position: relative; display: inline-block; margin: 0 .02em 0 .04em; }
.wordmark .wm-i i { position: absolute; left: 50%; top: -.02em; width: .27em; height: .27em; margin-left: -.135em; border-radius: 50%; background: var(--brand, #e0682f); box-shadow: 0 0 0 .055em rgba(224,104,47,.18); }
.brand-t { align-items: center; }
/* Lockup (owner 2026-11-12: icon and wordmark aligned to logo guidelines): icon ≈ 2× the cap height, gap = 1/4 of the icon,
   the capitals' optical centre on the icon's centre line, the same setting in the sidebar and on sign-in */
.brand-t b.wordmark, .a2-brand b.wordmark { font: 650 21px/1 var(--font); letter-spacing: -.045em; transform: translateY(.03em); }
.a2-brand b.wordmark { font-size: 22px; transform: none; }
.side-top { gap: 8px; } .side-top .brand-t { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.a2-brand { display: inline-flex; align-items: center; gap: 8px; }
.a2-brand .wordmark { font-size: 22px; }
.wordmark.on-dark { color: #fff; } .wordmark.on-dark .wm-i i { background: #fff; box-shadow: 0 0 0 .06em rgba(255,255,255,.28); }

/* Left category lists scroll on their own (owner 2026-11-11: "scroll the left and right side separately"): the rail stays in
   view and scrolls inside itself; the right side scrolls with the page */
.store-rail { position: sticky; top: 0; max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; border-radius: var(--r-card); }
.store-rail:hover { scrollbar-color: var(--line-2) transparent; }
html.desk .store-rail { max-height: calc(100dvh - 84px - var(--desk-bar, 36px)); }
@media (max-width: 900px) { .store-rail { position: static; max-height: none; overflow: visible; } }
/* Add an AI */
.dir-head { position: relative; } .dir-addbtn { order: 3; margin-left: auto; }
.ad-modal { height: min(600px, calc(100dvh - 32px)); }
.ad-url { display: flex; gap: 8px; } .ad-url .search { flex: 1; } .ad-url .search input { width: 100%; height: 42px; border-radius: 12px; } .ad-url .btn { height: 42px; }
.ad-hint { margin: 0; font-size: 13px; color: var(--ink-3); }
.ad-exists { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(34,160,90,.08); color: #1f6e43; font-size: 13.5px; } .ad-exists span { flex: 1; }
.ad-form { display: grid; gap: 12px; } .ad-site { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg, #f4f3f1); } .ad-site .tn { min-width: 0; } .ad-site b { display: block; font-weight: 500; font-size: 14px; } .ad-site small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-form label { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); } .ad-lbl { font-size: 12.5px; color: var(--ink-2); margin-bottom: -6px; }
.ad-form input, .ad-form textarea, .ad-form select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); font: inherit; font-size: 14px; color: var(--ink); outline: none; resize: vertical; }
.ad-form input:focus, .ad-form textarea:focus, .ad-form select:focus { border-color: rgba(224,104,47,.55); box-shadow: 0 0 0 3px rgba(224,104,47,.14); }

/* Composer "More": save-to-AI and token optimizer as titled rows with switches */
.cm-wrap { position: relative; display: inline-flex; }
.cm-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 99px; background: var(--hover); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.cm-btn:hover, .cm-btn.on { color: var(--ink); background: var(--sel-raise, var(--sel)); box-shadow: var(--sel-edge, inset 0 0 0 1px var(--line-2)); }
.cm-pop { position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; width: 300px; padding: 6px; border-radius: 16px; background: var(--panel); box-shadow: 0 18px 50px -14px rgba(0,0,0,.28), 0 0 0 1px var(--line); }
.cm-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 12px; cursor: pointer; }
.cm-row:hover { background: var(--hover); }
.cm-row .tn { flex: 1; min-width: 0; } .cm-row b { display: block; font-weight: 500; font-size: 13.5px; } .cm-row small { display: block; font-size: 12px; color: var(--ink-3); }
.cm-row .toggle { flex: none; }
.cm-pop.up { top: auto; bottom: calc(100% + 10px); }
@container (max-width: 600px) { .cm-btn span { display: none; } .cm-btn { padding: 0 9px; } }

/* ===== Subscribe to start (paywall) ===== */
.modal.pw-m { width: min(640px, calc(100vw - 24px)); max-width: none; padding: 0; }
.pw-m .modal-b { padding: 22px; display: grid; gap: 16px; }
.pw-h { display: flex; align-items: flex-start; gap: 12px; } .pw-h > span:nth-child(2) { flex: 1; } .pw-h h3 { margin: 0; font: 500 19px/1.2 var(--font); } .pw-h .sub { margin: 4px 0 0; }
.pw-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sel); color: var(--sel-ic); flex: none; }
.pw-req { padding: 14px 16px; border-radius: 16px; background: var(--bg, #f4f3f1); } .pw-req small { font-size: 12px; color: var(--ink-3); } .pw-req b { display: block; margin: 3px 0 10px; font-weight: 500; font-size: 14.5px; }
.pw-est { display: flex; flex-wrap: wrap; gap: 6px; } .pw-est span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--panel); font-size: 12.5px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.pw-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pw-plan { display: grid; gap: 6px; align-content: start; padding: 16px; border: 0; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow .15s var(--ease); }
.pw-plan:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.pw-plan.on { background: linear-gradient(180deg, rgba(224,104,47,.06), transparent 60%), var(--panel); box-shadow: inset 0 0 0 1.5px var(--sel-ic); }
.pw-ph { display: flex; align-items: center; justify-content: space-between; } .pw-ph b { font-weight: 500; font-size: 15px; } .pw-ph em { font-style: normal; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; background: rgba(224,104,47,.12); color: var(--sel-ic); }
.pw-pp { font: 500 28px/1 var(--font); letter-spacing: -.03em; } .pw-pp small { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.pw-plan > small { font-size: 12.5px; color: var(--ink-3); }
.pw-plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; } .pw-plan li { display: flex; align-items: center; gap: 7px; } .pw-plan li svg { color: var(--sel-ic); }
.pw-f { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; } .pw-note { flex: 1; min-width: 200px; font-size: 12.5px; color: var(--ink-3); } .pw-f .btn { height: 42px; }
@media (max-width: 560px) { .pw-plans { grid-template-columns: 1fr; } }
/* sign-up: find any AI beyond the first few */
.onb-more { display: grid; gap: 10px; margin: 6px 0 4px; } .onb-more .search input { width: 100%; height: 40px; border-radius: 12px; }
.onb-extra { display: flex; flex-wrap: wrap; gap: 6px; } .onb-extra span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 99px; background: var(--sel); font-size: 12.5px; }
button.side-cost { border: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
/* the All AI rail sits in a wrapper: the wrapper is what stays in place, and the list scrolls inside it */
.store > #dir-rail { position: sticky; top: 0; align-self: start; }
.store > #dir-rail > .store-rail { position: static; }
.dir-card.famous > .mono-tile, .dir-card.famous > .tile { width: 40px; height: 40px; }
/* web version: no in-page tabs or address bar (sites open in a real tab); the pane is the launcher */
/* web version shows the tab strip and address bar too: every site stays inside Microooo */
.b-pane2.web .b-start { padding-top: 40px; }
.desk-url { display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; padding: 10px 12px; border-radius: 12px; background: var(--bg, #f4f3f1); font-size: 13px; color: var(--ink-2); overflow: hidden; } .desk-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* History resize grip: only while the pointer is on the edge itself or dragging (owner: stray edge) */
.hx-rail:hover .hx-resize::after { opacity: 0; }
.hx-resize:hover::after, .hx-resize:focus-visible::after, body.resizing .hx-resize::after { opacity: 1; }
/* Coloured project folders */
.fold-ic { flex: none; display: inline-flex; width: 18px; height: 18px; border-radius: 5px; cursor: pointer; }
.fold-ic svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.08)); }
.fold-ic:hover svg { transform: scale(1.08); } .fold-ic svg { transition: transform .15s var(--ease); }
.hx-cpop { width: 236px; }
.hx-cpop .sw-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 2px 4px 6px; }
.hx-cpop .sw-grid button { width: auto; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
.hx-cpop .sw-grid button svg { width: 26px; height: 26px; }
.hx-cpop .sw-grid button.on { background: var(--sel-raise, var(--sel)); box-shadow: var(--sel-edge, inset 0 0 0 1px var(--line-2)); }
.hx-folder { position: relative; }
.hx-fname > .fold-ic { flex: none; width: 18px; overflow: visible; }
.hx-pop button > .fold-ic { width: 18px; }
/* Selected picks: the light raised chip, never a black ring (locked design rule) */
.pick-grid button.on { border-color: transparent; background: var(--sel-raise, var(--sel)); box-shadow: var(--sel-edge, inset 0 0 0 1px var(--line-2)); }
.pick-grid button.on .port { border-color: var(--accent, #e0682f); background: var(--accent, #e0682f); box-shadow: inset 0 0 0 2px #fff; }
/* Colour pop sits inside the history panel, never cut off at the left */
.hx-cpop { left: 6px; right: 6px; width: auto; max-width: 260px; }
/* Show / hide password */
.pw-wrap { position: relative; }
.pw-wrap .input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--ink-3); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--hover); }
.pw-eye[aria-pressed="true"] { color: var(--ink); }
/* Connect your AI (onboarding): compact, six first, clear ticks (owner 2026-11-11) */
.onb-m { width: min(640px, calc(100vw - 24px)); }
.onb-m .sub { margin-bottom: 16px; }
.onb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .onb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onb-pick { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.onb-pick:hover:not(:disabled) { background: var(--raised); border-color: var(--line-2); }
.onb-pick .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-pick .nm small { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.onb-pick.on { border-color: rgba(224,104,47,.55); background: #fdf3ec; box-shadow: 0 0 0 3px rgba(224,104,47,.12); }
.onb-pick.done .nm small { color: #1f8a55; }
.onb-pick:disabled { cursor: default; opacity: .62; }
.onb-pick.done:disabled { opacity: 1; }
.onb-tick { flex: none; width: 20px; height: 20px; border-radius: 99px; border: 1.5px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--panel); }
.onb-tick.on { border-color: #e0682f; background: #e0682f; }
.onb-tick .ic, .onb-tick svg { width: 13px; height: 13px; }
.onb-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.onb-toggle:hover { color: var(--ink); }
.onb-scroll { margin-top: 8px; max-height: 236px; overflow: auto; padding: 2px 2px 4px; border-top: 1px solid var(--line); padding-top: 10px; overscroll-behavior: contain; }
.onb-q { margin-bottom: 8px; }
.onb-g { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--raised); }
.onb-g-h { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-right: auto; }
.onb-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.onb-chip .onb-tick { width: 18px; height: 18px; }
.onb-chip.on { border-color: rgba(224,104,47,.55); background: #fdf3ec; }
.onb-f { margin-top: 18px; }
/* Sign out, outside the pop-up, top left */
.onb-out { position: fixed; top: 16px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 99px; background: var(--panel); box-shadow: 0 6px 20px -8px rgba(0,0,0,.25), 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.onb-out .btn { gap: 6px; }
:root[data-theme="dark"] .onb-pick.on, :root[data-theme="dark"] .onb-chip.on { background: rgba(224,104,47,.14); }
/* One fixed, decent height for every setup step (owner 2026-11-11: never grows or shrinks between steps or on "Show more") */
.onb-m, .modal.cx-m { width: min(640px, calc(100vw - 24px)) !important; height: min(600px, calc(100vh - 24px)) !important; max-height: none; display: flex; flex-direction: column; overflow: hidden; }
.onb-m .modal-b, .modal.cx-m .modal-b { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.onb-m .onb-f, .modal.cx-m .cx-f { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); flex: none; }
.onb-m > .modal-b > .onb-grid { flex: none; }
.onb-scroll { flex: 1; min-height: 0; max-height: none; margin-bottom: 12px; }
.onb-body { flex: 1; min-height: 0; overflow: auto; margin: 4px -2px 12px; padding: 2px; }
.onb-m .onb-toggle { align-self: flex-start; }
.onb-acct { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 12px; border-radius: 12px; background: var(--raised); }
.onb-acct .grow { display: flex; flex-direction: column; min-width: 0; } .onb-acct b { font-weight: 500; font-size: 13.5px; } .onb-acct small { font-size: 12px; color: var(--ink-3); }
/* Step bar */
.onb-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 12.5px; color: var(--ink-3); }
.onb-steps span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.onb-steps i { font-style: normal; width: 20px; height: 20px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--line-2); }
.onb-steps span.on { color: var(--ink); font-weight: 500; } .onb-steps span.on i { background: var(--ink); color: #fff; border-color: var(--ink); }
.onb-steps span.past i { background: #e0682f; border-color: #e0682f; color: #fff; } .onb-steps span.past i svg { width: 11px; height: 11px; }
.onb-steps b { flex: 1; height: 1px; background: var(--line); min-width: 12px; }
.modal.cx-m .onb-steps { margin-bottom: 14px; }
.onb-q { display: flex; width: 100%; box-sizing: border-box; }
.onb-m .search.onb-q { max-width: none !important; width: 100% !important; flex: none; }
/* Step 1 shows every AI in one scroll list, fading softly into the edge (owner 2026-11-11) */
.onb-m .onb-scroll { flex: 1; min-height: 0; overflow: auto; border-top: 0; margin: 0 -4px 0; padding: 4px 4px 28px; }
.onb-fade { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 44px), transparent 100%); }
.onb-sub { margin: 16px 0 8px; font-size: 12px; color: var(--ink-3); }
.onb-m .search.onb-q { margin: 0 0 8px; }
/* Step bar v2: three progress segments with labels under them (owner: the old dots-and-lines looked bad) */
.onb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 22px; }
.onb-steps > b { display: none; }
.onb-seg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.onb-seg i { display: block; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; position: relative; }
.onb-seg.past i { background: #e0682f; }
.onb-seg.on i { background: linear-gradient(90deg, #e0682f, #f19a62); box-shadow: 0 0 0 0 rgba(224,104,47,.0); }
.onb-seg span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onb-seg span em { font-style: normal; font-variant-numeric: tabular-nums; color: inherit; opacity: .8; }
.onb-seg.on span { color: var(--ink); font-weight: 500; }
.onb-seg.past span { color: #c4541f; }
.onb-seg.past span svg { width: 12px; height: 12px; }
.onb-steps .onb-seg i { width: auto; height: 4px; border: 0; border-radius: 99px; font-size: 0; }
.onb-m .search.onb-q input { width: 100%; box-sizing: border-box; }
.onb-out { z-index: 1000; }
/* Step journey (owner: make the steps creative): a warm band across the top of the pop-up with three connected stops */
.onb-journey { display: flex; align-items: center; gap: 0; margin: -24px -24px 22px; padding: 18px 24px; border-radius: 20px 20px 0 0; border-bottom: 1px solid rgba(224,104,47,.12);
  background: radial-gradient(120% 140% at 0% 0%, rgba(240,140,86,.16), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(224,104,47,.08), transparent 60%), linear-gradient(180deg, #fffaf6, #fff); }
.oj-step { display: flex; align-items: center; gap: 10px; flex: none; }
.oj-ic { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .25s var(--ease), box-shadow .25s; }
.oj-step.next .oj-ic { background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.oj-step.on .oj-ic { color: #fff; background: linear-gradient(145deg, #f4a06b, #e0682f 55%, #c4541f); box-shadow: 0 8px 18px -8px rgba(224,104,47,.75), 0 0 0 4px rgba(224,104,47,.14); transform: translateY(-1px); }
.oj-step.past .oj-ic { color: #c4541f; background: #fbe7da; box-shadow: inset 0 0 0 1px rgba(224,104,47,.25); }
.oj-t { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.oj-t b { font-weight: 500; font-size: 13.5px; color: var(--ink); }
.oj-t small { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.oj-step.next .oj-t b { color: var(--ink-2); }
.oj-step.on .oj-t small { color: #c4541f; }
.oj-link { flex: 1; min-width: 18px; height: 2px; margin: 0 14px; border-radius: 99px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); position: relative; overflow: hidden; }
.oj-link span { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #e0682f, #f19a62); border-radius: inherit; transition: width .5s var(--ease); }
.oj-link.lit span { width: 100%; }
.onb-journey + h3, .onb-journey ~ h3 { margin-top: 0; }
.modal.cx-m .onb-journey { margin-bottom: 18px; }
@media (max-width: 560px) { .oj-t small { display: none; } .oj-link { margin: 0 8px; } .oj-ic { width: 34px; height: 34px; } }
:root[data-theme="dark"] .onb-journey { background: linear-gradient(180deg, rgba(224,104,47,.12), transparent); }
/* Sign-out pill: the button follows the pill's curve, no boxed edge */
.onb-out { padding: 5px 5px 5px 16px; }
.onb-out .btn { height: 34px; padding: 0 14px 0 12px; border: 0 !important; box-shadow: none !important; border-radius: 99px !important; background: var(--hover); color: var(--ink); }
.onb-out .btn:hover { background: var(--line); }
.oj-step.on .oj-t small { color: #c4541f !important; }
.onb-f [data-act="onboard-go"] { gap: 8px; padding-right: 14px; }
/* AIs that connect once Microooo is live: normal look, a small "Soon" tag instead of greyed out */
.onb-pick.soon { opacity: 1; cursor: pointer; }
.onb-soon { flex: none; font-size: 11px; font-weight: 500; color: var(--ink-3); padding: 3px 8px; border-radius: 99px; background: var(--hover); }
.onb-note { margin: -6px 0 14px; padding: 10px 12px; border-radius: 10px; background: #fdf3ec; color: #9a4a1c; font-size: 12.5px; line-height: 18px; }
/* Connected apps v2: Your AI on top, then Apps (owner 2026-11-11) */
.cxa { margin-bottom: 28px; }
.cxa-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cxa-h h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.cxa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cxa-card { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 18px; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)), inset 0 0 0 1.5px rgba(224,104,47,.3); }
.cxa-face { position: relative; flex: none; }
.cxa-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 99px; background: #30a46c; box-shadow: 0 0 0 2.5px var(--panel); }
.cxa-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cxa-t b { font-weight: 500; font-size: 15px; } .cxa-t small { font-size: 12.5px; color: var(--ink-3); }
.cxa-empty { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--panel); color: var(--ink-2); font-size: 13.5px; }
.cx-card.keys { opacity: .8; } .cx-card.keys .cx-scopes { opacity: .85; }
/* Step 2: Google inside Claude */
.gl-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gl-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.gl-list li b { flex: 1; min-width: 0; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-list .gl-st { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.gl-list li.done { border-color: rgba(48,164,108,.35); background: #f2fbf6; } .gl-list li.done .gl-st { color: #1f8a55; }
.gl-live { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: #c4541f; } .gl-live .spinner { width: 14px; height: 14px; }
@media (max-width: 560px) { .gl-list { grid-template-columns: 1fr; } }
/* Step 2 v2: three Google tiles, each with its own Connect */
.gl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.gl-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); text-align: center; }
.gl-card .gl-ic .tile { width: 52px; height: 52px; border-radius: 15px; }
.gl-card b { font-weight: 500; font-size: 14.5px; }
.gl-card .btn { min-width: 112px; justify-content: center; }
.gl-card.done { border-color: rgba(48,164,108,.35); background: #f2fbf6; }
.gl-ok { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 13px; font-weight: 500; color: #1f8a55; }
@media (max-width: 560px) { .gl-cards { grid-template-columns: 1fr; } .gl-card { flex-direction: row; padding: 12px; } .gl-card b { flex: 1; text-align: left; } }
/* Several Claude accounts (2026-11-11): one Google row per Claude account, the "another account" prompts */
.onb-m .gl-body { flex: 1; min-height: 0; overflow: auto; margin: 0 -4px; padding: 0 4px 12px; }
.gl-acct + .gl-acct { margin-top: 16px; }
.gl-ah { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 2px 0 8px; }
.gl-ah b { font-weight: 500; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-ah small { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.gl-acct .gl-card { padding: 16px 12px 14px; }
.gl-more { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--raised); }
.gl-more > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-more b { font-weight: 500; font-size: 13.5px; } .gl-more small { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.gl-more .btn { flex: none; }
.cx-more { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-3); }
.cx-term { margin-top: 8px; gap: 6px; }
.cxa-h .grow { flex: 1; }
@media (max-width: 560px) { .gl-more { flex-direction: column; align-items: stretch; } .cx-more { flex: 1 1 100%; } .cxa-h { flex-wrap: wrap; } }
/* Step 2: the Gmail a Claude account already has, confirmed by the user for sign-in codes (2026-11-11) */
.gm-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 2px 0 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.gm-panel.done { border-color: rgba(48,164,108,.35); background: #f2fbf6; flex-wrap: nowrap; }
.gm-panel .gm-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #d4f57a; color: #111; }
.gm-q { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gm-q b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; } .gm-q small { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.gm-f { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.gm-f input { height: 38px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); font: inherit; font-size: 14px; color: var(--ink); width: 100%; box-sizing: border-box; }
.gm-f input:focus { outline: 2px solid rgba(224,104,47,.35); outline-offset: 1px; }
.gm-note { flex: 1 1 100%; font-size: 12px; color: var(--ink-3); }
.gm-a { flex: 1 1 100%; display: flex; gap: 8px; }
.gm-panel .cx-code { flex: 1 1 100%; }
.gm-use { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.gm-use select { height: 32px; padding: 0 28px 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 13px; color: var(--ink); max-width: 100%; }
.gm-a { align-items: center; flex-wrap: wrap; } .gm-a .gm-use { margin-right: auto; }
.cxa-t { min-width: 0; }
.cxa-gm { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; font-size: 12.5px; min-width: 0; }
.cxa-gm > span:not(.tile) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.cxa-gm .gm-use span { display: none; }
@media (max-width: 560px) { .gm-panel.done { flex-wrap: wrap; } }
.cx-who { display: block; color: #1f8a55 !important; margin-top: 4px; }
.cx-miss code, .cx-who code { font: 400 11.5px var(--mono); }
/* "+ Another account" on a connected AI (2026-11-11): a pill where the tick sits on other tiles, and on its last card */
.onb-pick.done { cursor: default; }
.onb-more, .cxa-more { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; max-width: 100%; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font: inherit; font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap; }
.onb-pick.done .nm { min-width: 0; }
/* a connected AI takes a whole row, so its name, count and the pill all fit */
.onb-pick.done { grid-column: 1 / -1; }
.onb-more { margin-left: auto; }
.onb-more:hover, .cxa-more:hover { background: var(--sel, #f1efec); }
.cxa-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* Your AI cards: one per account; the text gets the room, the buttons wrap under it when the card is narrow */
.cxa-card { flex-wrap: wrap; row-gap: 8px; }
.cxa-card .cxa-t { flex: 1 1 200px; }
.cxa-b { display: flex; gap: 2px; margin-left: auto; }
/* Chat column: a minimum and maximum width (owner 2026-11-12); messages and the composer share it, centred */
.thread-col { --chat-max: 920px; --chat-min: 560px; }
.thread-col .thread-in, .thread-col .composer, .thread-col .composer-wrap .hint { width: 100%; max-width: var(--chat-max); min-width: min(100%, var(--chat-min)); margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
/* History row menu: never wider than the panel, so its left edge isn't cut off */
.hx-row .hx-pop:not(.hx-cpop) { right: 4px; left: auto; width: min(220px, calc(100% - 8px)); }
/* Voice typing button */
.mic-btn { position: relative; gap: 4px; width: auto; min-width: 32px; padding: 0 8px; }
.mic-btn.rec { color: #fff; background: #e5484d; border-radius: 99px; animation: micPulse 1.4s ease-in-out infinite; }
.mic-btn.rec:hover { background: #d13c41; color: #fff; }
.mic-btn .mic-t { font-size: 12px; font-variant-numeric: tabular-nums; }
.mic-btn .spinner { width: 14px; height: 14px; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.35); } 50% { box-shadow: 0 0 0 6px rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.rec { animation: none; } }
/* Product Research list: its "main" class collided with the app frame's .main (fixed height, no scroll) */
.rs2-list.main { height: auto !important; min-height: 0; overflow: hidden; display: block; }
/* Real data switches in Services and cost */
.live-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.live-h h4 { margin: 0; }
.live-all { gap: 10px; } .live-all b { font-weight: 500; font-size: 13px; } .live-all small { font-size: 12px; color: var(--ink-3); }
.live-sw { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.live-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.live-sw .sw { position: relative; width: 30px; height: 18px; border-radius: 99px; background: var(--line-2); transition: background-color .15s; flex: none; }
.live-sw .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.live-sw input:checked + .sw { background: #30a46c; } .live-sw input:checked + .sw::after { transform: translateX(12px); }
.live-sw input:focus-visible + .sw { outline: 2px solid var(--accent, #e0682f); outline-offset: 2px; }
.live-sw small { font-size: 11.5px; color: var(--ink-3); min-width: 26px; } .live-sw input:checked ~ small { color: #1f8a55; }
/* Services and cost: a sixth column for the Real data switch */
.cost-row { grid-template-columns: 84px minmax(0, 1fr) 116px 116px 96px 72px; }
.cost-row .live-hd { font-size: inherit; }
@container (max-width: 620px) {
  .cost-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "cat prov live" "now later act"; }
  .cost-row > :nth-child(6) { grid-area: live; justify-self: end; }
}
/* Your AI card: Claude account and Gmail on their own labelled lines */
.cxa-ids { margin: 10px 0 4px; display: grid; gap: 6px; }
.cxa-ids > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 8px; }
.cxa-ids dt { font-size: 12px; color: var(--ink-3); }
.cxa-ids dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.cxa-ids dd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No hover lift on connection cards or folder icons (owner: they shook on hover) */
.cx-card:hover, .cxa-card:hover { transform: none !important; }
.fold-ic:hover svg { transform: none !important; }
/* Connect an app chooser */
.ca-list { display: grid; gap: 10px; margin: 6px 0 18px; }
.ca-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.ca-item:hover { background: var(--raised); border-color: var(--line-2); }
.ca-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ca-item b { font-weight: 500; font-size: 14.5px; } .ca-item small { font-size: 12.5px; color: var(--ink-3); }
/* Apps through your Claude */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-bottom: 24px; }
.cc-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); min-height: 60px; }
.cc-card img { width: 28px; height: 28px; border-radius: 8px; flex: none; object-fit: contain; }
.cc-card .tn { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cc-card b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cc-card small { font-size: 12px; color: var(--ink-3); }
.cc-ok { width: 22px; height: 22px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #30a46c; flex: none; } .cc-ok svg { width: 12px; height: 12px; }
.cc-card.cc-skel { background: linear-gradient(90deg, var(--panel), var(--raised), var(--panel)); background-size: 200% 100%; animation: ccSk 1.2s linear infinite; }
@keyframes ccSk { to { background-position: -200% 0; } }
/* No hover lift, pop or nudge anywhere (owner 2026-11-12: "whenever I hover on any card it's shaking … I don't want that anywhere").
   Hover may change colour or shadow, never position or size. Positioning transforms (tooltips, centred panels) are untouched. */
.adv-chip:hover, .adv-proj:hover, .adv-goal:hover, .adv-row:hover, .adv-ai-i:hover, .adv-why-g > div:hover, .adv-role:hover,
.cl-ai:hover, .cl-app:hover, .cl-plan:hover, .cl2 .cl-hit:hover, .cl-card:hover, .cl-card:focus-visible,
.team-picks button:hover, .team-mem:hover, .team-card:hover, .team-work:hover,
.svc2-pick:hover, .svc2-tile:hover, .rs2-stack button:hover, .rs2-simc:hover,
.side-cost:hover, .kpi:hover, .ov-card:hover, .acct:hover, .app-card:hover, .app-tile:hover, .h2-card:hover, .mine-row:hover, .mine-card:hover,
.ma-card:hover, .h2-all:hover, .mc-add:hover, .ma-new:hover, .cx-card:hover, .cxa-card:hover, .cc-card:hover, .ca-item:hover, .onb-pick:hover, .gl-card:hover,
.start-row:hover .go, .ar:not(.head):hover .go, .mc-add:hover .mc-plus, .ma-new:hover .mc-plus,
.la-app:hover .ai-icon, .la-hit:hover .ai-icon, .bl2-link:hover svg, .fold-ic:hover svg { transform: none !important; }
/* Pop-ups open with one smooth motion everywhere (owner 2026-11-12: "opening very fast, and the blur happening after"):
   the backdrop fades and blurs in first, then the panel rises and settles a beat later. */
@keyframes cdScrimIn { from { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); } }
@keyframes cdModalIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes cdPanelIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cdDrawerIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.scrim, .cl-scrim, .team-scrim, .db-scrim, .cx-scrim, .adv-scrim, [class$="-scrim"] { animation: cdScrimIn .34s cubic-bezier(.2, .8, .2, 1) both; will-change: opacity, backdrop-filter; }
.modal { animation: cdModalIn .42s cubic-bezier(.2, .8, .2, 1) .06s both; }
.drawer { animation: cdDrawerIn .4s cubic-bezier(.2, .8, .2, 1) .05s both; }
.sg-ov { transition: opacity .34s cubic-bezier(.2, .8, .2, 1); }
.sg-ov .sg-scrim { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: backdrop-filter .34s cubic-bezier(.2, .8, .2, 1), -webkit-backdrop-filter .34s cubic-bezier(.2, .8, .2, 1); }
.sg-ov.in .sg-scrim { -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }
.sg-modal { opacity: 0; transform: translateY(16px) scale(.97); transition: transform .42s cubic-bezier(.2, .8, .2, 1) .06s, opacity .3s ease .06s; }
.sg-ov.in .sg-modal { opacity: 1; transform: none; }
.modal.still, .scrim.still { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .scrim, [class$="-scrim"], .modal, .drawer { animation-duration: .01s !important; animation-delay: 0s !important; } .sg-modal, .sg-ov, .sg-ov .sg-scrim { transition: none !important; } }
/* Project panel: one fixed width on every tab (owner 2026-11-12: it grew on Memory and Secrets and squashed the chat) */
.content.hx > .insp, .build.has-insp > .insp { flex: 0 0 368px; width: 368px; max-width: 368px; min-width: 0; }
.insp, .insp-wrap, .insp-body { min-width: 0; }
.insp-body { overflow-wrap: anywhere; overflow-x: hidden; }
.insp-body table, .insp-body pre, .insp-body code { max-width: 100%; }
.insp-body pre { white-space: pre-wrap; }
@media (max-width: 1100px) { .content.hx > .insp { flex-basis: 320px; width: 320px; max-width: 320px; } }

/* Composer pop-ups, one family (owner 2026-11-12): the AI and model menu, More, and Attach share one radius, padding, ring and
   shadow, one row height and the light selected chip. Defined only here. */
.composer .ai-menu, .composer .cm-pop, .composer .att-pop { border: 0; border-radius: 16px; padding: 6px; background: var(--panel); box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 50px -14px rgba(0,0,0,.28), 0 0 0 1px var(--line); animation: menuIn .2s var(--ease); }
.composer .ai-menu { width: min(300px, calc(100vw - 32px)); max-height: 420px; }
.composer .ai-menu .h, .composer .att-h { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 10px 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.composer .ai-menu button, .composer .cm-row, .composer .att-pop > button, .composer .att-list > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 7px 10px; border-radius: 10px; text-align: left; color: var(--ink); transition: background-color .12s var(--ease); }
.composer .ai-menu button:hover, .composer .cm-row:hover, .composer .att-pop > button:hover, .composer .att-list > button:hover,
.composer .ai-menu button:focus-visible, .composer .att-pop > button:focus-visible, .composer .att-list > button:focus-visible { background: var(--hover); }
.composer .ai-menu button.on, .composer .ai-menu button[aria-checked="true"] { background: var(--sel); color: var(--sel-ink, var(--ink)); }
.composer .ai-menu button .tn, .composer .cm-row .tn, .composer .att-pop .tn { flex: 1; min-width: 0; }
.composer .ai-menu b, .composer .cm-row b, .composer .att-pop b { display: block; font-weight: 500; font-size: 13.5px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer .ai-menu small, .composer .cm-row small, .composer .att-pop small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer .ai-menu .ic.check { margin-left: auto; flex: none; color: var(--sel-ic, var(--ink)); }
.composer .ai-menu .h:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.composer .ai-menu .mono-tile { width: 28px; height: 28px; border-radius: 8px; flex: none; }
@media (max-width: 640px) { .composer .ai-menu { position: fixed; left: 12px; right: 12px; bottom: 16px; width: auto; max-height: 60vh; } }
/* The AI button: "Claude · Opus 5.5" */
.ai-pick-btn.on { background: var(--sel); color: var(--ink); }
.ai-pick-sub { display: inline-flex; align-items: center; gap: 6px; } .ai-pick-sub i { font-style: normal; opacity: .6; }

/* The answer while it is written (owner 2026-11-12, like Claude Code's): a copper sparkle that turns, a live word for what the
   AI is doing, the time so far, and Stop. The text streams in above it. */
.ai-stream[hidden] { display: none; }
.ai-st { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ai-stream:not([hidden]) + .ai-st { margin-top: 8px; }
.ai-spark { display: grid; place-items: center; width: 16px; height: 16px; flex: none; color: #e0682f; }
.ai-spark svg { fill: currentColor; transform-origin: 50% 50%; animation: aiSpark 1.8s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes aiSpark { 0% { transform: rotate(0deg) scale(.78); opacity: .7; } 50% { transform: rotate(90deg) scale(1.06); opacity: 1; } 100% { transform: rotate(180deg) scale(.78); opacity: .7; } }
.ai-w { min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(90deg, var(--ink-2) 0 38%, #e0682f 50%, var(--ink-2) 62% 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aiShim 2.4s linear infinite; }
@keyframes aiShim { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.ai-t { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ai-stop { flex: none; height: 24px; padding: 0 10px; border: 0; border-radius: 99px; background: var(--hover); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; transition: background-color .12s var(--ease); }
.ai-stop:hover, .ai-stop:focus-visible { background: var(--sel); color: var(--ink); }
.ai-gone { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .ai-spark svg { animation: none; transform: none; opacity: 1; } .ai-w { animation: none; background: none; color: var(--ink-2); } }
/* Top right: search, settings, notifications and profile on one tight, even spacing */
.top-r { display: flex; align-items: center; gap: 8px; }
.top-r > *, .top-r .acct-wrap, .top-r .nt-wrap { margin: 0 !important; }
.nt-wrap { position: relative; display: inline-flex; }
.circle-btn.bell { position: relative; }
.nt-dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 99px; background: #e0682f; box-shadow: 0 0 0 2px var(--panel); }
.nt-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(380px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - 90px)); display: flex; flex-direction: column; padding: 6px; border-radius: 16px; background: var(--panel); box-shadow: 0 18px 50px -14px rgba(0,0,0,.28), 0 0 0 1px var(--line); animation: cdPanelIn .28s cubic-bezier(.2,.8,.2,1) both; }
.nt-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; } .nt-h b { font-weight: 500; font-size: 14px; }
.nt-list { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.nt-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.nt-item:hover { background: var(--hover); }
.nt-item.new { background: #fdf3ec; } .nt-item.new:hover { background: #fbe9dd; }
.nt-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--raised); color: var(--ink-2); flex: none; }
.nt-item.new .nt-ic { background: #fbe7da; color: #c4541f; }
.nt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .nt-t b { font-weight: 500; font-size: 13px; } .nt-t small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-ago { font-size: 11.5px; color: var(--ink-3); flex: none; margin-top: 2px; }
.nt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px 30px; text-align: center; color: var(--ink-3); } .nt-empty b { color: var(--ink); font-weight: 500; font-size: 13.5px; } .nt-empty small { font-size: 12.5px; max-width: 260px; }
/* Voice button sits on the right, beside Send, same size and shape */
form.composer .mic-btn { height: 32px; min-width: 32px; border-radius: 99px; margin-right: 6px; background: var(--hover); color: var(--ink-2); justify-content: center; }
form.composer .mic-btn:hover { color: var(--ink); background: var(--line); }
form.composer .mic-btn.rec { background: #e5484d; color: #fff; padding: 0 10px; }

/* While it works (owner 2026-11-12): the status line, the plan as a live checklist and the steps taken are the main thing; the
   text being written stays compact under them. */
.ai-run { display: flex; flex-direction: column; gap: 8px; max-width: 600px; padding: 10px 12px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.ai-run .ai-st { margin: 0; flex-wrap: wrap; row-gap: 4px; }
.ai-eta { flex: none; font-size: 12px; color: var(--sel-ic, #d2602b); font-variant-numeric: tabular-nums; }
.ai-eta::before, .ai-t + .ai-eta::before { content: '·'; margin-right: 6px; color: var(--ink-3); }
.ai-meta { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.ai-plan { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-direction: column; gap: 4px; }
.ai-plan li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ai-plan li.done { color: var(--ink-3); }
.ai-plan li.active { color: var(--ink); font-weight: 500; }
.ai-pm { position: relative; display: grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ai-plan li.done .ai-pm { box-shadow: none; background: var(--sel); color: var(--sel-ic, #d2602b); }
.ai-plan li.active .ai-pm { box-shadow: inset 0 0 0 1.5px rgba(224,104,47,.45); }
.ai-plan li.active .ai-pm::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e0682f; animation: aiDot 1.2s ease-in-out infinite; }
@keyframes aiDot { 0%, 100% { transform: scale(.7); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.ai-steps { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.ai-steps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-steps li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 18px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-steps li::before { content: ''; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .7; }
.ai-steps li:last-child { color: var(--ink-2); }
.ai-more { align-self: flex-start; height: 22px; padding: 0 8px; margin-left: 6px; border: 0; border-radius: 99px; background: var(--hover); color: var(--ink-3); font: inherit; font-size: 12px; cursor: pointer; }
.ai-more:hover, .ai-more:focus-visible { background: var(--sel); color: var(--ink); }
.ai-stream.live { margin-top: 8px; max-height: 7.5em; overflow: hidden; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ai-stream.live.clip { -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
.ai-run .sr-only, .ai-plan .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .ai-meta { margin-left: 0; flex-basis: 100%; order: 5; } }
@media (prefers-reduced-motion: reduce) { .ai-plan li.active .ai-pm::after { animation: none; } }
/* History: a chat that is working shows three soft dots and its time left */
.hx-busy { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; padding-right: 6px; color: #c4541f; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.hx-dots { display: inline-flex; gap: 3px; }
.hx-dots i { width: 4px; height: 4px; border-radius: 99px; background: currentColor; opacity: .35; animation: hxDot 1.2s ease-in-out infinite; }
.hx-dots i:nth-child(2) { animation-delay: .15s; } .hx-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hxDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.hx-row:hover .hx-busy, .hx-row.menu-open .hx-busy { display: none; }
@media (prefers-reduced-motion: reduce) { .hx-dots i { animation: none; opacity: .7; } }
.hx-row { position: relative; }
.hx-row .hx-busy { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 0 0 10px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--panel) 10px); }
.hx-row .hx-item.on ~ .hx-busy { background: linear-gradient(90deg, transparent, var(--sel, #f3efea) 10px); }
/* Keep the working dots and time visible on hover; they step left to make room for the row's menu button */
.hx-row:hover .hx-busy, .hx-row.menu-open .hx-busy { display: inline-flex !important; right: 38px; }
/* Steps done, as a bar ("3 of 6 done · 50%"), and the time budget counting down */
.ai-prog { display: flex; align-items: center; gap: 10px; }
.ai-bar { position: relative; flex: 1; height: 4px; border-radius: 99px; background: var(--hover); overflow: hidden; }
.ai-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #f6a46c, #ea733d, #cf4f27); transform-origin: left center; transition: transform .5s var(--ease); }
.ai-pct { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ai-left { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .ai-bar i { transition: none; } }
/* Voice typing while recording: calm and plain — a small stop square and the time, no pulse, no red fill (owner 2026-11-12) */
form.composer .mic-btn.rec, .mic-btn.rec { animation: none !important; box-shadow: none !important; background: var(--hover) !important; color: var(--ink) !important; padding: 0 12px 0 10px; gap: 8px; }
.mic-btn .mic-stop { width: 10px; height: 10px; border-radius: 2px; background: #e5484d; flex: none; }
.mic-btn.rec .mic-t { font-size: 12.5px; color: var(--ink-2); }
/* With a plan the steps lead and the status line is a small footer */
.ai-run.has-plan .ai-st { min-height: 22px; font-size: 12px; color: var(--ink-3); }
.ai-run.has-plan .ai-spark { width: 12px; height: 12px; } .ai-run.has-plan .ai-spark svg { width: 12px; height: 12px; }
/* Voice button: exactly the Send button's size and shape, right beside it; while recording a small live wave of your voice */
form.composer .mic-btn, form.composer .mic-btn.rec { width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 10px !important; margin-right: 0 !important; gap: 0; display: inline-grid; place-items: center; }
form.composer .mic-btn svg { width: 15px; height: 15px; }
.mic-wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.mic-wave i { width: 2.5px; height: 4px; border-radius: 99px; background: #e0682f; transition: height .08s linear; }
/* No plan yet: a thin indeterminate bar beside "Planning…" */
.ai-prog.ind .ai-bar i { width: 30%; transform: none; animation: aiInd 1.4s ease-in-out infinite; }
@keyframes aiInd { from { left: -30%; } to { left: 100%; } }
.ai-prog.ind .ai-bar i { position: absolute; inset: 0 auto 0 -30%; }
.ai-prog .ai-bar i { transition: transform .9s linear; }
@media (prefers-reduced-motion: reduce) { .ai-prog.ind .ai-bar i { animation: none; left: 0; width: 100%; opacity: .35; } }
/* AI Store: the category rail and the cards are two separate panels (owner 2026-11-12: "like inside Product Research") */
.store.dir, .store { background: transparent !important; box-shadow: none !important; padding: 0 !important; gap: 16px; }
.store > #dir-rail > .store-rail, .store > .store-rail { background: var(--panel); border-radius: 20px; padding: 10px; box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); }
.store > .store-main { background: var(--panel); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); min-width: 0; }
.store-main .dir-head { margin-top: 0; }

/* Speed and power (owner 2026-11-12): a compact bolt button with the live estimate; its pop-up is one of the composer family */
.spd-wrap { position: relative; display: inline-flex; }
.spd-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 99px; background: var(--hover); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.spd-btn:hover, .spd-btn.on { color: var(--ink); background: var(--sel-raise, var(--sel)); box-shadow: var(--sel-edge, inset 0 0 0 1px var(--line-2)); }
.composer .spd-pop { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 30; width: min(340px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 6px 6px 10px; background: var(--panel); box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 18px 50px -14px rgba(0,0,0,.28), 0 0 0 1px var(--line); animation: menuIn .2s var(--ease); }
.home2 .composer .spd-pop { bottom: auto; top: calc(100% + 10px); }
.spd-pop .h { display: flex; align-items: center; min-height: 30px; padding: 6px 10px 2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-3); }
.spd-pop .h:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.spd-pop .spd-row { display: flex; width: auto; height: 36px; margin: 0 10px; padding: 0; gap: 12px; background: none; }
.spd-pop .spd-row input[type=range] { flex: 1; width: auto; }
.spd-v { flex: none; min-width: 112px; text-align: right; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.spd-ticks { display: flex; justify-content: space-between; margin: -4px 134px 4px 10px; font-size: 11px; color: var(--ink-3); }
.spd-models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 6px 0; }
.spd-models button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.spd-models button:hover, .spd-models button:focus-visible { background: var(--hover); }
.spd-models button.on { background: var(--sel); color: var(--sel-ink, var(--ink)); }
.spd-models b { font-weight: 500; font-size: 13px; line-height: 18px; } .spd-models small { font-size: 11.5px; line-height: 15px; color: var(--ink-3); }
.spd-res { margin: 10px 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--hover); font-size: 12.5px; line-height: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .composer .spd-pop { position: fixed; left: 12px; right: 12px; bottom: 16px; top: auto; width: auto; } .spd-ticks { margin-right: 10px; } .spd-v { min-width: 96px; } }
.ai-over { flex: none; font-size: 11.5px; color: var(--sel-ic, #d2602b); } .ai-over::before { content: '·'; margin-right: 6px; color: var(--ink-3); }
/* A pop-up already on screen never replays its opening motion when redrawn */
.still, .scrim.still, .modal.still, .cl-modal.still, .sg-modal.still, .drawer.still, [class$="-scrim"].still { animation: none !important; transition: none !important; }
.cc-mono { width: 28px; height: 28px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #fff; background: linear-gradient(145deg, #f4a06b, #c4541f); }
.cc-card .tile { flex: none; }
/* Notifications: a full-height panel on the right with filters, kinds and Mark all as read */
.nt-scrim { position: fixed; inset: 0; z-index: 70; }
.nt-pop { position: fixed !important; top: 12px !important; right: 12px !important; bottom: 12px; left: auto !important; width: min(420px, calc(100vw - 24px)) !important; max-height: none !important; z-index: 71 !important; padding: 0 !important; border-radius: 20px !important; animation: cdDrawerIn .34s cubic-bezier(.2,.8,.2,1) both !important; display: flex; flex-direction: column; }
.nt-pop .nt-h { padding: 16px 12px 10px 18px; gap: 8px; } .nt-pop .nt-h b { font-size: 16px; }
.nt-un { font-size: 12px; color: #c4541f; background: #fbe7da; padding: 2px 8px; border-radius: 99px; }
.nt-tabs { display: flex; gap: 4px; padding: 0 12px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.nt-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.nt-tabs button span { font-size: 11px; color: var(--ink-3); }
.nt-tabs button.on { background: var(--sel-raise, var(--sel)); box-shadow: var(--sel-edge, inset 0 0 0 1px var(--line-2)); color: var(--ink); }
.nt-pop .nt-list { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.nt-kind { font-size: 10.5px; letter-spacing: .02em; color: var(--ink-3); text-transform: uppercase; }
.nt-ago { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.nt-u { width: 8px; height: 8px; border-radius: 99px; background: #e0682f; }
.nt-pop .nt-empty { flex: 1; justify-content: center; }
.nt-pop.still { animation: none !important; }
/* Backdrop first, then the pop-up (owner 2026-11-12, again: "the pop-up opens first, then the blur loads").
   The blur is applied at full strength from the first frame and only its veil fades in (animating the blur itself made
   it lag behind); the panel waits until the backdrop is in place. */
@keyframes cdVeilIn { from { opacity: 0; } to { opacity: 1; } }
.scrim, .cl-scrim, .team-scrim, .db-scrim, .cx-scrim, .adv-scrim, [class$="-scrim"] { animation: cdVeilIn .2s ease-out both; }
.modal { animation: cdModalIn .38s cubic-bezier(.2, .8, .2, 1) .16s both; }
.drawer, .nt-pop { animation-delay: .14s !important; }
.sg-ov { transition: none; opacity: 1; }
.sg-ov .sg-scrim { -webkit-backdrop-filter: blur(10px) saturate(1.05) !important; backdrop-filter: blur(10px) saturate(1.05) !important; background-color: rgba(18,16,14,.22); opacity: 0; transition: opacity .2s ease-out !important; }
.sg-ov.in .sg-scrim { opacity: 1; }
.sg-modal { transition: transform .38s cubic-bezier(.2, .8, .2, 1) .16s, opacity .28s ease .16s !important; }
.sg-ov:not(.in) { pointer-events: none; }
/* Notifications v3: the app's own tab bar, tighter rows, kind and time on one meta line */
.nt-pop .nt-h { padding: 14px 10px 8px 16px; }
.nt-tabbar { padding: 0 12px 10px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.nt-tabbar .st-tabs { display: inline-flex; }
.nt-tabs { display: none; }
.nt-pop .nt-list { padding: 6px; gap: 2px; }
.nt-pop .nt-item { gap: 12px; padding: 10px; border-radius: 12px; align-items: flex-start; }
.nt-pop .nt-ic { width: 32px; height: 32px; border-radius: 10px; margin-top: 1px; }
.nt-pop .nt-t { gap: 2px; }
.nt-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.nt-meta .nt-u { margin-left: auto; width: 7px; height: 7px; border-radius: 99px; background: #e0682f; }
.nt-pop .nt-t b { font-size: 13.5px; line-height: 18px; }
.nt-pop .nt-t small { font-size: 12.5px; line-height: 17px; }
.nt-pop .nt-item.new { background: #fdf6f1; }
.nt-pop .nt-ago, .nt-kind { display: none; }
/* Same page redrawn (tab switch, filter, toggle): no entrance motion replays */
.same-view .msg, .same-view .enter, .same-view .bars.anim i, .same-view .dz-gal, .same-view .dz-det, .same-view .rs2-filters.more,
.same-view .page, .same-view .content, .same-view .card, .same-view [class*="-card"], .same-view .la-app, .same-view .cc-card, .same-view .cx-card { animation: none !important; }
/* Composer controls look like one set (owner 2026-11-12): the AI/model button, More, the speed button and Attach all have the
   same soft background and the same shape (10px corners, 32px tall) by default */
form.composer .ai-pick-btn, form.composer .cm-btn, form.composer .spd-btn, form.composer [data-act="attach"], form.composer .pw-btn, form.composer .spd {
  height: 32px; border-radius: 10px !important; background: var(--hover) !important; box-shadow: none; border: 0; }
form.composer [data-act="attach"] { width: 32px; display: inline-grid; place-items: center; padding: 0; }
form.composer .ai-pick-btn:hover, form.composer .cm-btn:hover, form.composer .spd-btn:hover, form.composer [data-act="attach"]:hover { background: var(--line) !important; }
form.composer .cm-btn.on, form.composer .ai-pick-btn[aria-expanded="true"], form.composer .spd-btn[aria-expanded="true"] { background: var(--sel-raise, var(--sel)) !important; box-shadow: var(--sel-edge, inset 0 0 0 1px var(--line-2)) !important; }

/* Connected apps (owner 2026-11-12): every Claude account and every Gmail is its own card, laid out the same way */
.cxa-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.cxa-sub { font-size: 13px; }
.cxc { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); }
.cxc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cxc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cxc-t b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxc-t small { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxc-pill { flex: none; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 99px; background: rgba(48,164,108,.12); color: #1f7a4f; }
.cxc-meta { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.cxc-use .gm-use { display: flex; width: 100%; gap: 10px; }
.cxc-use .gm-use span { flex: none; display: inline; }
.cxc-use .gm-use select { flex: 1; min-width: 0; width: 100%; }
.cxc-f { display: flex; gap: 6px; margin-top: auto; padding-top: 2px; }
.cxc-f .btn-ghost:first-child { margin-left: -8px; }
.cxc:hover { transform: none !important; }
.cc-wait { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; color: var(--ink-3); }
.cc-wait .ic { animation: ccSpin 1.2s linear infinite; }
@keyframes ccSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cc-wait .ic { animation: none; } }

/* Connected apps, one grid (owner 2026-11-12): compact white cards, 5 a row on a wide screen, logo · name · one grey line · ✓ */
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: 10px; margin: 4px 0 24px; }
@media (min-width: 1500px) { .cg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cg-card { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-card, 0 1px 2px rgba(0,0,0,.04)); cursor: pointer; outline: none; }
.cg-card:focus-visible { box-shadow: 0 0 0 2px var(--accent, #e0682f); }
.cg-card > .mono-tile, .cg-card > img, .cg-card > .cc-mono { flex: none; width: 32px; height: 32px; border-radius: 9px; }
.cg-card > img { object-fit: contain; }
.cg-card .tn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cg-card .tn b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-card .tn small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-card .cc-ok { flex: none; }
.cg-link { flex: none; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--accent-ink, #b3471a); cursor: pointer; }
.cg-link:hover { text-decoration: underline; }
.cg-more { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--raised, #f4f3f1); color: var(--ink-2); cursor: pointer; opacity: 0; pointer-events: none; }
.cg-card:hover .cg-more, .cg-card:focus-within .cg-more, .cg-card.menu-on .cg-more { opacity: 1; pointer-events: auto; }
.cg-card:hover .cc-ok, .cg-card:hover .cg-link, .cg-card.menu-on .cc-ok, .cg-card.menu-on .cg-link { visibility: hidden; }
@media (hover: none) { .cg-more { opacity: 1; pointer-events: auto; position: static; transform: none; } .cg-card .cc-ok { display: none; } }
.cg-pop { position: absolute; right: 8px; top: calc(100% - 6px); z-index: 20; min-width: 160px; padding: 4px; border-radius: 12px; background: var(--panel); box-shadow: 0 10px 30px -10px rgba(0,0,0,.25), 0 0 0 1px var(--line); }
.cg-pop button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: #c0392b; cursor: pointer; text-align: left; }
.cg-pop button:hover { background: rgba(192,57,43,.08); }
.cg-empty { padding: 18px; border-radius: 16px; background: var(--panel); color: var(--ink-2); font-size: 13.5px; }
.cg-card:hover { transform: none !important; }
.btn-danger { background: #c0392b; color: #fff; border-color: transparent; }
.btn-danger:hover { background: #a93226; }
.ca-go { flex: none; font-size: 13px; font-weight: 500; color: var(--accent-ink, #b3471a); }
.ca-fav { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; flex: none; }

/* Agent tools (owner 2026-11-12): everything centred on each card, 48px logos */
.v-center .v-tool { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 18px 14px 16px; }
.v-center .v-tool > .mono-tile { width: 48px; height: 48px; border-radius: 13px; flex: none; }
.v-center .v-tool > .mono-tile img { width: 60%; height: 60%; }
.v-center .v-tool .tn { flex: none; width: 100%; align-items: center; }
.v-center .v-tool b, .v-center .v-tool small { text-align: center; }
.v-center .v-tool small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v-center .v-tool .seg { margin: 4px auto 0; }
.ca-item > span.ca-go { flex: none; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 99px; background: var(--ink); color: var(--panel); font-size: 12.5px; font-weight: 500; }

/* The page title lives in the top bar (owner 2026-11-12), no breadcrumbs; the page's own copy below is hidden */
.topbar .crumbs.tb-t { flex: 0 1 auto; min-width: 0; }
.tb-title { margin: 0; min-width: 0; font: 500 26px/1.15 var(--font); letter-spacing: -.026em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-title b { font-weight: inherit; color: inherit; }
.dup-title, .dup-head { display: none !important; }
@media (max-width: 860px) { .tb-title { font-size: 20px; } }
/* With the title in the top bar, the tab row keeps the same breathing room as My Applications */
.dup-head + .pbar, .dup-head + .st-bar { margin-top: 18px !important; }
/* Connected apps: 5 a row only where the cards stay readable; Connect an app at the right of the tab row, on phones too */
@media (min-width: 1500px) { .cg-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); } }
@media (min-width: 1760px) { .cg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.conn2 .pbar-r, .v-page .pbar-r { margin-left: auto; }
@media (max-width: 860px) { .conn2 .pbar-r, .v-page .pbar-r { align-self: flex-end; justify-content: flex-end; } }
/* Sidebar card: Claude's weekly use (owner 2026-11-12) */
.side-cost.su .sc-l { flex: 1; min-width: 0; }
.su-bar { display: block; height: 5px; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.28); overflow: hidden; }
.su-bar > i { display: block; height: 100%; border-radius: inherit; background: #fff; }

/* Plan card, compact (owner 2026-11-12: "too much scroll … keep only the required ones"): tighter sections and rows, the
   legal pages folded into one line, and the card reaching both edges of the chat so both top corners are rounded */
.thread .card.brief { margin-left: -40px; }
.card.brief .b-sec { padding: 12px 18px; }
.card.brief .b-sec h4 { margin-bottom: 8px; }
.card.brief .card-h { padding-top: 12px; padding-bottom: 12px; }
.card.brief .b-two { gap: 12px; }
.card.brief .nd-facts { gap: 8px; margin-bottom: 8px; }
.card.brief .nd-fact { padding: 8px 12px; }
.card.brief .nd-feats { gap: 6px; }
.card.brief .nd-feats > * { padding: 8px 10px; }
.card.brief .nd-src { display: none; }
.card.brief .cost-row { min-height: 0; padding-top: 8px; padding-bottom: 8px; row-gap: 4px; }
.card.brief .cost-row .why, .card.brief .cost-row .prov small { font-size: 12px; line-height: 1.35; }
.card.brief .su-accept { margin-top: 4px; height: 24px; padding: 0 10px; font-size: 12px; }
.card.brief .cost-total { margin-top: 8px; }
.card.brief .cost-total b { font-size: 26px; }
.card.brief .b-fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.card.brief .b-fold > summary::-webkit-details-marker { display: none; }
.card.brief .b-fold > summary h4 { margin: 0; }
.card.brief .b-fold > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s var(--ease); }
.card.brief .b-fold[open] > summary::after { transform: rotate(-135deg); }
.card.brief .b-fold[open] > summary { margin-bottom: 8px; }
.card.brief .est-grid { gap: 6px; }
.card.brief .est-grid .est { padding: 8px 10px; }
.card.brief .est-grid .est b { font-size: 18px; }
.card.brief .opt-line { margin-top: 8px; font-size: 12.5px; }
.card.brief .brief-f { padding-top: 12px; padding-bottom: 12px; }

/* Plan card, SMALL (owner 2026-11-12: "reduce the height … as small as possible … small spacing"). Every service is one line:
   logo · name (its why under it, one line) · to start · once it grows · change · switch. Time and tokens is one row of chips.
   Understanding your project is one wrapping row of chips. */
.card.brief .b-sec { padding: 10px 16px; }
.card.brief .b-sec h4 { margin: 0 0 6px; font-size: 12.5px; }
.card.brief .card-h { padding: 10px 16px; }
.card.brief .live-h { margin-bottom: 6px; }
/* analysis: chips */
.card.brief .nd-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.card.brief .nd-fact { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 99px; }
.card.brief .nd-fact small { font-size: 11px; }
.card.brief .nd-fact b { font-size: 12.5px; }
.card.brief .nd-fact span { display: none; }
.card.brief .nd-feats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.card.brief .nd-feats > li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 99px; min-height: 0; }
.card.brief .nd-feats .nd-ic { width: 20px; height: 20px; }
.card.brief .nd-feats .nd-ic .ic { width: 12px; height: 12px; }
.card.brief .nd-feats .nd-t b { font-size: 12.5px; font-weight: 500; }
.card.brief .nd-feats .nd-t span, .card.brief .nd-feats .nd-t small { display: none; }
.card.brief .nd-skip { margin: 6px 0 0; font-size: 12px; }
/* services: one line each */
.card.brief .cost-row, .card.brief .cost-row.head { grid-template-columns: minmax(0, 1fr) 76px 76px auto auto !important; grid-template-areas: "prov now later act live" !important; gap: 8px !important; padding: 6px 10px !important; min-height: 0 !important; row-gap: 0 !important; align-items: center; }
.card.brief .cost-row > .cat { display: none !important; }
.card.brief .cost-row.head { font-size: 10.5px; }
.card.brief .cost-row.head > span:nth-child(2) { display: none; }
.card.brief .cost-row .prov { gap: 8px; }
.card.brief .cost-row .prov .mono-tile { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.card.brief .cost-row .prov b { font-size: 13px; }
.card.brief .cost-row .prov small, .card.brief .cost-row .why { display: block; font-size: 11.5px; line-height: 1.3; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.brief .cost-row .now, .card.brief .cost-row .later { font-size: 13px; }
.card.brief .cost-row .now small, .card.brief .cost-row .later small { display: none; }
.card.brief .cost-row .swap { font-size: 0; gap: 0; height: 28px; width: 28px; padding: 0; justify-content: center; border-radius: 8px; }
.card.brief .cost-row .swap .ic { width: 14px; height: 14px; }
.card.brief .cost-row .live-sw small { display: none; }
.card.brief .cost-row .live-hd { font-size: 10.5px; }
.card.brief .nd-add { margin-top: 6px; gap: 8px; }
.card.brief .nd-add .btn { height: 30px; }
.card.brief .nd-add-note { display: none; }
.card.brief .cost-total { margin-top: 6px; gap: 16px; }
.card.brief .cost-total b { font-size: 20px; }
.card.brief .cost-total p { font-size: 11px; }
.card.brief .nd-assume { margin-top: 4px; font-size: 12px; }
.card.brief .b-sec .toggle { font-size: 12.5px; }
/* time and tokens: one row of chips */
.card.brief .est-grid { display: flex !important; flex-wrap: wrap; gap: 6px; }
.card.brief .est-grid .est { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 99px; min-height: 0; }
.card.brief .est-grid .est small { font-size: 11.5px; }
.card.brief .est-grid .est b { font-size: 13px; }
.card.brief .est-grid .est span { display: none; }
.card.brief .opt-line, .card.brief .b-sec > p.faint { display: none; }
.card.brief .brief-f { padding: 10px 16px; }
/* Look picker inside the plan card: the two top picks only; "See more looks" opens the rest */
.card.brief .dz-grid > :nth-child(n+3) { display: none !important; }
.card.brief .dz-look { padding-bottom: 10px; }
/* A pop-up that stays open through a redraw (a tab switch inside it) keeps still, and so does what's inside it; loaders keep spinning */
.still *:not([class*="spin"]):not([class*="dot"]):not([class*="skel"]):not([class*="load"]):not(.sw):not(.ring) { animation: none !important; }
.nt-pop.still, [role="dialog"].still, [role="menu"].still { animation: none !important; transition: none !important; }
/* Speed pop-up, clear (owner 2026-11-12): two sections with icons — Your AI and This Mac — each choice saying what it gives and costs */
.sp2 { display: flex; flex-direction: column; gap: 10px; }
.sp2-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--raised, #f4f3f1); }
.sp2-h { display: flex; align-items: center; gap: 10px; }
.sp2-h b { display: block; font-size: 13.5px; font-weight: 500; } .sp2-h small { display: block; font-size: 11.5px; color: var(--ink-3); }
.sp2-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; }
.sp2-ic.ai { background: linear-gradient(145deg, #f3a87f, #e0682f); } .sp2-ic.mac { background: linear-gradient(145deg, #9aa3b2, #4b5563); }
.sp2-ben { margin: 0; font-size: 12px; color: var(--ink-2); }
.sp2-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.sp2-models { gap: 6px; } .sp2-models button small { font-size: 11px; line-height: 1.3; }
.sp2 .spd-row { background: var(--panel); }
.sp2 .spd-ultra { background: var(--panel); }
/* A pin with its own sign-in (another account of the same site) carries a small mark so the two can be told apart */
.dock-pin.boxed { position: relative; }
.dock-pin.boxed::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 0 2px var(--panel); }
/* Browser start screen (owner 2026-11-12): one big box to search or type a site, pinned sites, quick open */
.bs { height: 100%; overflow: auto; display: grid; place-items: start center; padding: 9vh 24px 40px; }
.bs-in { width: min(720px, 100%); display: grid; gap: 14px; }
.bs h2 { margin: 0 0 6px; text-align: center; font: 500 30px var(--display); letter-spacing: -.02em; }
.bs-q { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-radius: 999px; background: var(--surface, #fff); border: 1px solid var(--line, #e6e4e0); box-shadow: 0 6px 24px -12px rgba(0,0,0,.18); transition: border-color .15s, box-shadow .15s; }
.bs-q:focus-within { border-color: var(--accent, #e0682f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #e0682f) 14%, transparent); }
.bs-q .ic { color: var(--ink-3); flex: none; }
.bs-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.bs-q kbd { font-size: 11px; color: var(--ink-3); padding: 3px 8px; border-radius: 6px; background: var(--raised, #f4f3f1); }
.bs-h { margin-top: 18px; font-size: 12px; color: var(--ink-3); }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bs-site { display: grid; justify-items: center; gap: 8px; padding: 12px 6px; border-radius: 16px; font-size: 12.5px; color: var(--ink-2); transition: background-color .15s; }
.bs-site:hover { background: var(--hover); color: var(--ink); }
.bs-site span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-note { margin: 18px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }