/* responsive.css: the owner's Claude Design responsive shell layout (AiOS Responsive Review, Production export of 9 Sep 2026:
   18 states x 14 windows, rounds 9 to 20 in Claude Design plus round 21, the shell never scales down), installed verbatim as the last
   layout layer. Only the review bundler's scoping was reversed (.fr-body -> body, .fr-html -> :root so the design's tokens outrank
   the base stylesheet's :root tokens, container units -> viewport units, @container -> @media). Edit the design, not this file. */
/* =============================================================
   responsive.css — AiOS shell, the design of record. Load LAST
   (after styles.css, opening-lock.css, visual-v2.css, chrome.css, mobile2.css
   and the card kit). Production installs this file as it is.

   ONE SIZING RULE FOR EVERY WINDOW (owner, round 13 = round 11 model + a column cap)
     STRUCTURE by width as drawn: phone <768, tablet 768–1023, desktop 1024+. Within a class the layout
              is fluid to the window. The app frame fills the window: no held height, no bands.
     SMALLER than the drawn frame (either axis): the whole shell scales by k = min(1, height / drawn
              height, width / narrowest frame) so nothing is cut or scrolled on the gate or the opening.
     LARGER: the frame does not scale up. Taller: the starters and the conversation take the room. Wider
              than the 1440 frame: the answer canvas (the content column: canvas, starters, composer) is
              capped at the 1440 frame's column (1376px) and centred; the top bar and the dock's white
              bar still run the full width. Only the gate block scales up on large windows.

   THE COLUMN (owner ruling, round 7): the question-and-answer canvas, the starters
   and the composer use the FULL width of the app, inside one shared edge (--edge)
   that is also the top bar's padding. The client mark sits on that edge; the
   decision trail sits 24px after the mark (R4); the column starts under the mark.

   COPY RULE (§9): no text is ever cut with an ellipsis or a line clamp; the space
   grows to fit it. The one exception is the phone greeting (two lines, whole
   sentences dropped by production; the clamp below is the last guard).

   Standing rulings kept from the approved design:
     R1 answer canvas = the whole column                R2 "Traditional Website" lives in the menu
     R3 the record's call to action closes the card     R5 six starters never scroll, fill the canvas
     R6 greeting two lines max                          R7 orb +10%
     R8 table cards white                               R9 NEXT pills size to their text
     R10 nameplate fields wrap                          Trail hidden below 1024; drawer from the right
     R12 gate: the two cards are always the same size; the gate never scrolls
     R13 every tenant-facing string, mark and icon is configured, never drawn here

   Column arithmetic (cards.css .set: auto-fill minmax(232px,1fr) gap 12):
     1440: 1377 -> 5 cards.  1280: 1224 -> 5.  1024: 979 -> 4.  834: 786 -> 3.  768: 720 -> 3 (at the 232 minimum).
     430/390: 1.
   ============================================================= */


/* =============================================================
   §1 SIZING TOKENS — the layout width, the shared edge and the drawn height per class.
   --drawn-h runs straight between the frames so a frame width returns its
   own drawn height exactly (390->844, 430->932, 768->1024, 834->1194,
   1024->1366, 1280->800, 1440->900).
   ============================================================= */
:root {
  --w-min: 1024px; --drawn-h: 900px; --dock-gap: 14px;
  /* THE FORMULA (one line, pure CSS, no JS). --app-zoom is production's own scale token (styles.css
     body { zoom: var(--app-zoom) }; every viewport-height rule already divides by it). The whole shell
     scales as one proportional unit, k = min(1, window height / drawn height for this width,
     window width / the class's narrowest frame). k is 1 at and above every drawn frame; below it,
     type, spacing, cards, composer and chrome shrink together, so nothing is ever cut or scrolled on the
     gate or the opening and no element stays large while its neighbours shrink. tan(atan2(a, b)) is
     the unitless ratio a/b. !important beats the inline value scale.js writes.
     THE SHELL ALWAYS FILLS THE WINDOW (owner ruling, round 9): no width cap on the frame, no held height,
     no bands. Taller: the starters and the conversation take the room. Smaller in either direction: k
     shrinks everything to fit exactly. Round 13: the content column is capped (see --content-max). */
  /* ROUND 21 (owner, 9 Sep 2026 late evening): the shell never scales down. A window smaller than drawn keeps every size as
     drawn; the gate block alone shrinks to fit (scale.js fitGateScreen) and the opening and the answers scroll. */
  --app-zoom: 1 !important;
  /* The layout width in layout px inside the zoomed body = the whole window. */
  --app-w: calc(100vw / var(--app-zoom));
  --edge: clamp(20px, calc(var(--app-w) * 0.022), 44px);      /* 31.7 at 1440, 28.2 at 1280, 22.5 at 1024 */
  /* THE COLUMN (round 13): the answer canvas, the starters and the composer share one column inside --edge.
     On desktop it is capped at the 1440 frame's column, 1376px, and centred; wider windows gain page
     margin, not width (the 1440 layout is the design of record). The top bar and the dock's white bar
     still run the full width, so a wide window never reads as a broken screen. */
  /* THE COLUMN (round 13, widened round 15): the answer canvas, the starters and the composer share one column
     inside --edge. Up to 1440 it is the whole window. Wider, it takes 62% of the window — never less than the
     1440 column (1376) and never more than 2200 — so a 1920 shows 1376 (72%), a 2560 shows 1587 (62%), a 3440
     shows 2133 (62%): wide enough that starters and cards stay landscape, narrow enough that the canvas never
     reads as a stretched screen. The top bar and the dock's white ground still run the full width. */
  --content-max: clamp(1376px, calc(var(--app-w) * 0.62), 2200px); --content-gut: var(--edge);
  /* The resolved column width (styles.css --content-box = --content-max + 2 gut, capped by the window) and the
     tallest a starter tile may be (R17): 0.62 x its width on the 3-across desktop grid, and never over 320px
     (the 2560 x 1350 proportion the owner approved; on wider screens the tiles stop growing and the block centres). */
  --col-w: min(calc(var(--app-w) - 2 * var(--edge)), var(--content-max));
  --tile-h-max: min(calc((var(--col-w) - 32px) / 3 * 0.62), 320px);
  /* CHROME SCALE (R18): the shell's fixed-size furniture grows with the canvas on wide monitors. u = the column's
     growth over the 1440 column (1376), floor 1, ceiling 1.6: 1920 -> 1 (the column has not grown), 2560 -> 1.15,
     3440 -> 1.55. Applied as a zoom to the top bar (mark, trail, version, menu), the opening block's greeting, orb
     and tile contents, the dock (composer, attribution) and the drawer. Cards, tables and answer prose keep the
     kit's size (they grow in count, not in scale). Below 1441 u is 1: nothing changes at any drawn frame. */
  --ui-up: 1;
}
@media (min-width: 1280px) and (max-width: 1440px) { :root { --drawn-h: calc(800px + (100vw - 1280px) * 0.625); } }
@media (min-width: 1024px) and (max-width: 1279px) { :root { --drawn-h: calc(1366px - (100vw - 1024px) * 2.2109); } }
@media (min-width: 768px) and (max-width: 1023px) { :root { --w-min: 768px; --drawn-h: calc(1024px + (min(100vw, 834px) - 768px) * 2.5758); --dock-gap: 12px; --edge: 24px; --content-max: 100%; --col-w: calc(var(--app-w) - 2 * var(--edge)); --tile-h-max: min(calc((var(--col-w) - 12px) / 2 * 0.6), 320px); } }
@media (max-width: 767px) { :root { --w-min: 390px; --drawn-h: calc(844px + (max(min(100vw, 430px), 390px) - 390px) * 2.2); --dock-gap: 10px; --edge: 16px; --content-max: 100%; --col-w: calc(var(--app-w) - 2 * var(--edge)); --tile-h-max: calc((var(--col-w) - 10px) / 2 * 0.6); } }

/* The root size reads the layout width, so a window between frames holds the nearer frame's type
   (phones stay at styles.css's 16px). */
@media (min-width: 768px) { :root { font-size: clamp(14px, calc(min(var(--app-w), 1440px) * 0.0055 + 11.5px), 17px); } }
:root { background: var(--bg-tint, #F8F9FB); }
body { zoom: var(--app-zoom); }   /* production's scaler, now driven by the formula, on phones too */
@media (max-width: 767px) { body { zoom: var(--app-zoom); } }

/* The app fills the window exactly, in the zoomed body's layout px (real ÷ k). */
body.aios-active { width: calc(100vw / var(--app-zoom)); height: calc(100vh / var(--app-zoom)); margin: 0; }
body.aios-active > .aios-canvas, body.aios-active > #aiosCanvas { width: 100%; max-width: none; margin-inline: 0; }

/* R18 chrome scale, wide monitors only. zoom multiplies the element's own lengths; anything that must still
   resolve against the real window (the column width, viewport heights) is divided back by u. */
@media (min-width: 1441px) {
  :root { --ui-up: clamp(1, tan(atan2(var(--col-w), 1376px)), 1.6); }
  .aios-topbar { zoom: var(--ui-up); }
  .aios-dock { zoom: var(--ui-up); }
  .aios-dock .input-bar-wrap, .aios-dock .chips-row, .aios-dock .composer-meta, .aios-dock .powered-by-gallea { max-width: calc(var(--content-box) / var(--ui-up)); padding-left: calc(var(--content-gut) / var(--ui-up)); padding-right: calc(var(--content-gut) / var(--ui-up)); }
  .aios-dock .aios-attribution-line, .aios-dock #dockAttribution { max-width: calc(var(--col-w) / var(--ui-up)); }
  #welcomeActions .welcome-action { zoom: var(--ui-up); }
}

/* Gate block: the gate is a fixed, centred screen on the tint. Its block is a dialog: width-bounded, and on a
   window LARGER than the class's largest frame it scales UP to fill (owner, round 10), by
   up = max(1, min(width / frame width, height / frame height)) — the only thing in the shell that scales up.
   Phones fill by construction (stacked, flex), so up = 1 there. fitGateScreen still guards overflow. */
:root { --gate-up: max(1, min(tan(atan2(100vw, 1440px)), tan(atan2(100vh, 900px)))); }
@media (min-width: 768px) and (max-width: 1023px) { :root { --gate-up: max(1, min(tan(atan2(100vw, 834px)), tan(atan2(100vh, 1194px)))); } }
@media (max-width: 767px) { :root { --gate-up: 1; } }
#toggleScreen:not(.hidden) .toggle-screen { zoom: var(--gate-up); }
@media (min-width: 1441px) { #toggleScreen:not(.hidden) .toggle-screen { max-width: 1100px; } }


/* =============================================================
   ALL WIDTHS — rulings R1..R13 and the 9 Sep delta
   ============================================================= */

/* THE COLUMN: top bar padding = --edge; the canvas, composer and attribution already read
   --content-gut / --content-box (styles.css), so setting the tokens above moves everything. */
.aios-topbar { padding-inline: var(--edge); gap: 0; }

/* R1 answer canvas = content column */
[data-visual="v2"] .aios-answer { max-width: 100%; }
.aios-answer-next, .aios-answer-accuracy, [data-visual="v2"] .aios-answer-next { max-width: 100%; }

/* R2 traditional link + site-plan toggle out of the dock; attribution centred alone under the composer */
body.aios-active .aios-traditional-link,
body.aios-active .aios-footer-toggle { display: none !important; }
body.aios-active .aios-dock { padding-bottom: calc(var(--dock-gap, 14px) + env(safe-area-inset-bottom, 0px)) !important; row-gap: 0 !important; gap: 0; }
body.aios-active .aios-dock .aios-attribution { order: 6; margin: var(--dock-gap, 14px) 0 0 !important; padding: 0 !important; width: 100%; max-width: 100%; display: flex; justify-content: center; }
.aios-dock .aios-attribution-marks { display: none !important; }

/* §2 attribution, gate and dock: the short sentence, balanced, never clamped (copy rule).
   Sizes hold it to two lines at every class: 11px desktop, 10px tablet, 10.5px phone (column 358). */
.aios-attribution-line, .toggle-poweredby .aios-attribution-line, .aios-dock #dockAttribution, #toggleScreen #gateAttribution {
  display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
  text-wrap: balance; text-align: center; white-space: normal; max-width: 100%; line-height: 1.4;
}
@media (max-width: 1023px) { .aios-dock .aios-attribution-line, .aios-dock #dockAttribution { font-size: 10px; } }
/* Gate and drawer: one approved lockup image */
.aios-attribution-marks .attr-mark { height: 28px; width: auto; }
#toggleScreen .aios-attribution-marks .attr-mark { height: 34px; }

/* GATE (R12): never scrolls; the two cards are always the same size; the copy is the tenant's.
   Fit: scale.js fitGateScreen scales .toggle-screen when the window is shorter than the block
   (natural height vs window - 24), at EVERY width (the <768 guard comes off). Legal links live in the drawer. */
#toggleScreen, #toggleScreen:not(.hidden) { overflow: hidden !important; }
#toggleScreen .toggle-legal-bar { display: none !important; }
#toggleScreen .toggle-cards, #toggleScreen .toggle-cards-row { align-items: stretch; }
#toggleScreen .toggle-card { height: auto; min-height: 426px; }
/* Gate card type, one step up (owner: "too small"). Titles reserve two lines so both cards' bodies
   start on one line; a third line grows the card (copy rule), never clips. */
#toggleScreen .toggle-card-title { font-size: clamp(24px, 1.95vw, 28px); line-height: 1.2; display: block; height: auto; max-height: none; min-height: 2.4em; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; text-overflow: clip; white-space: normal; }
#toggleScreen .toggle-card-persona { font-size: 15px; }
#toggleScreen .toggle-card-body { font-size: clamp(15px, 1.1vw, 16px); line-height: 1.55; }
#toggleScreen .toggle-language-button { font-size: 14px; }
#toggleScreen .toggle-card-button { font-size: 15px; }

/* R3 CTA bar closes the record (the kit now puts it last in the markup; the order rule stays as the guard) */
.turn-widgets > .pc { display: flex; flex-direction: column; }
.turn-widgets > .pc > .cta-bar { order: 99; }
/* R14 ONE CTA LAW (owner, round 11): every primary call to action — face card, story card, contact card, detail
   record, form submit — is the same control: 48px tall, 14px/800, radius 10, full width of its container,
   label + arrow centred. The kit drew three sizes (card 12/13, detail 14/14, base 15/18); this unifies them. */
.cta-bar-btn, .card .cta-bar-btn, .pc .cta-bar-btn, .fb1 { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 18px; font-size: 14px; font-weight: 800; line-height: 1.2; border-radius: 10px; }
.cta-bar-arrow { font-size: 15px; line-height: 1; }
.fbtns { margin: 14px 16px 16px; }
/* R14b a card inside a record keeps the card's CTA geometry. The kit's `.pc .cta-bar { padding: 0 20px 20px }` also
   matched cards nested in a detail pane (news, contact) and stacked onto the card body's 16px, insetting the button
   37px from the card edge and leaving 37px under it. The card rule now outranks it: the button spans the body's inner
   width and sits 16px above the border, the same proportion the detail record uses (20 inside 760). */
.pc .card .cta-bar, .card .cta-bar { margin-top: auto; padding: 14px 0 0; border-top: 0; }

/* TOP BAR: mark on the edge, trail 24px after it (R4), version pill and menu on the right.
   THE MARK (R15): one image, sized by height only, width from its own aspect ratio, never stretched, never
   clipped, never blurred: the slot has no fixed width (styles.css gave the <img> the wrapper's clamp height AND
   a width, which distorted any mark whose aspect was not the tenant's); the image renders at its natural aspect,
   crisp (SVG geometric precision / high-quality raster scaling). Height 32 desktop, 30 tablet, 28 phone,
   wordmarks capped at 220px wide (a very long wordmark shrinks in height to fit). */
.aios-topbar .aios-topbar-brand, .aios-topbar .navbar-logo { overflow: visible; flex: 0 0 auto; min-width: 0; display: flex; align-items: center; }
.aios-topbar .navbar-logo { background: transparent; border: 0; padding: 0; height: auto; width: auto; margin: 0; line-height: 0; }
.aios-topbar .navbar-logo img, .aios-topbar .navbar-logo svg {
  display: block; height: 32px !important; width: auto !important; max-width: 220px !important; max-height: 32px !important;
  object-fit: contain; object-position: left center; aspect-ratio: auto;
  image-rendering: -webkit-optimize-contrast; image-rendering: auto; transform: translateZ(0);
}
.aios-topbar-brand { order: 0; }
.aios-topbar .trailslot { position: static; inset: auto; order: 1; flex: 0 1 auto; min-width: 0; margin: 0 0 0 24px; padding: 0; display: flex; align-items: center; pointer-events: auto; }
.aios-topbar .trailslot.empty { display: none; }
.aios-topbar-controls { order: 2; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* §3 trail pill: identical to the version pill (11px 600, white, 1px line, 999 radius, 5px 11px, 29px tall);
   the house icon alone is Home; a chevron between every step, Home included; the pill grows to fit and never clips. */
.aios-topbar .trailslot .trailrow { display: flex; align-items: center; gap: 0; min-width: 0; max-width: none; margin: 0; padding: 0; overflow: visible; }
.aios-topbar .trailslot .aios-trail { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; min-height: 29px; border: 1px solid var(--line, #E5E7EB); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; line-height: normal; color: var(--aios-blue, var(--accent)); max-width: none; overflow: visible; }
.aios-topbar .trailslot .tnode, .aios-topbar .trailslot .tnode.t-home { height: auto; width: auto; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: var(--aios-blue, var(--accent)); font: inherit; overflow: visible; text-overflow: clip; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; pointer-events: auto; }
.aios-topbar .trailslot .tnode[aria-current="page"] { background: none; color: var(--ink, #1a1a1a); font-weight: 700; }
.aios-topbar .trailslot .tnode.t-home svg { width: 12px; height: 12px; display: block; }
.aios-topbar .trailslot .aios-trail-chevron, .aios-topbar .trailslot .trailrow > span { color: var(--muted, #9AA3AF); font-size: 12px; line-height: 1; margin: 0 1px; flex: 0 0 auto; }

/* Side panel opens from the RIGHT, under the menu button it came from, and always spans the whole window
   (100vh in layout px = real height ÷ k; !important because chrome.css pins 100vh !important on phones). */
.side-panel { left: auto; right: 0; top: 0; transform: translateX(100%); box-shadow: -4px 0 16px rgba(0,0,0,0.10); zoom: var(--ui-up); height: calc(100vh / var(--app-zoom) / var(--ui-up)) !important; max-height: calc(100vh / var(--app-zoom) / var(--ui-up)) !important; min-height: calc(100vh / var(--app-zoom) / var(--ui-up)) !important; }
.side-panel.open { transform: translateX(0); }
/* §6 one shared left edge at 18px for brand, nav icons, Guest block, lockup, plate link and legal links;
   the Guest block sits directly above the footer; the brand mark is 25.3px tall (15% up from 22). */
.side-panel-nav { padding-left: 4px; padding-right: 4px; }
.side-panel-user { margin-top: auto !important; padding: 16px 18px; }
.side-panel-footer { margin-top: 0 !important; padding: 12px 18px 16px; gap: 10px; align-items: flex-start; }
.side-panel-brand-lockup { justify-content: flex-start; padding: 0; }
.side-panel-brand-lockup img, .side-panel-brand-lockup .attr-mark-composite { height: 28px !important; width: auto; max-width: 100%; object-fit: contain; }
.side-panel-plate-link { justify-content: flex-start; padding: 4px 0; min-height: 0; margin: 0; }
.side-panel-legal { justify-content: flex-start; gap: 8px; }
.side-panel-legal button { padding: 2px 0; min-height: 0; }
#sidePanel #sidePanelBrandLogo { height: 25.3px !important; }
#sidePanel #sidePanelBrandLogo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/* OPENING (R5): never scrolls. The starters take every pixel between the orb and the composer and are
   exactly as wide as the composer (the column). Rows never shrink below their content (copy rule);
   when a window is shorter than the block's minimum, scale.js fitWelcomeScreen scales #welcomeFit
   to fit (natural = the block's content height, unflexed; avail = the container's inner height),
   at EVERY width. Before scaling, production drops the starter subtext (.subtext-hidden). */
.aios-canvas:not(.has-messages) .chat-scroll { overflow: hidden !important; }
.aios-canvas:not(.has-messages) .aios-container { height: 100%; display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 12px; }
.aios-canvas:not(.has-messages) #welcomeFit { transform-origin: 50% 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.aios-canvas.has-messages #welcomeFit { display: none !important; }
.aios-canvas.has-messages .aios-container { justify-content: flex-start; }
.aios-canvas.has-messages .chat-messages { margin-top: 0; }
#welcomeFit .orb-wrapper-large { flex: 0 0 auto; }
.welcome-actions { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(auto, 1fr); gap: 16px; margin: 0 auto; max-height: calc(2 * var(--tile-h-max) + 16px); }
/* R17 a starter tile is never taller than it is wide, and never taller than 320px: the grid fills down to the
   composer until its tiles reach 0.62 x their width (3 across), 0.6 x (2 across) or 320px, whichever comes first;
   past that the block stops growing and sits centred, so a very tall or very wide window shows tiles at the
   approved 2560 proportion with even room above and below rather than slabs stretched to the composer. Phones are exempt:
   their icon-left rows are landscape by construction and the drawn frames fill to the composer (R5). */
.welcome-action, #welcomeActions .welcome-action { height: auto !important; min-height: 0 !important; max-height: none !important; }
/* Starters: title and subtext wherever the subtext fits its tile; production measures the six and
   sets .subtext-hidden when any one cannot fit. Nothing in a tile is ever clamped or cut.
   The icon is the tenant's (tenant-assets/starters), never drawn by the shell. */
#welcomeActions .welcome-action-title { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; white-space: normal; text-overflow: clip; }
#welcomeActions .welcome-action-sub { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; white-space: normal; text-overflow: clip; }
#welcomeActions.subtext-hidden .welcome-action-sub { display: none; }

/* R7 orb +10% (desktop/tablet values; phone below), x u on wide monitors (R18; u = 1 below 1441) */
.aios-canvas:not(.has-messages) .orb-wrapper-large .orb,
#aiosCanvas:not(.has-messages) .orb-wrapper .orb { width: calc(clamp(110px, 14.3vh, 145px) * var(--ui-up)) !important; height: calc(clamp(110px, 14.3vh, 145px) * var(--ui-up)) !important; }

/* STARTERS ON TALL WINDOWS (R16): a desktop or tablet window that is clearly taller than wide (portrait
   monitor, a half-screen split, an iPad held upright) takes the phone's opening layout for the six starters:
   two columns of three, icon left, title and subtext. Three tiles across a narrow column would be cramped
   while a tall canvas has room to spare; two-up puts that room to use. The greeting, orb, composer and the
   conversation are unchanged. Threshold: aspect ratio below 4:5 (width < 0.8 x height). */
@media (min-width: 768px) and (max-aspect-ratio: 4/5) {
  :root { --tile-h-max: min(calc((var(--col-w) - 12px) / 2 * 0.6), 320px); }
  .welcome-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: calc(3 * var(--tile-h-max) + 24px); }
  #welcomeActions .welcome-action { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-content: center; align-items: center; padding: 14px 16px; text-align: left; }
  #welcomeActions .welcome-action-icon { grid-row: 1 / span 2; width: 40px; height: 40px; }
  #welcomeActions .welcome-action-icon svg, #welcomeActions .welcome-action-icon img { width: 28px !important; height: 28px !important; }
  #welcomeActions .welcome-action-title { font-size: 16px; text-align: left; }
  #welcomeActions .welcome-action-sub { text-align: left; }
}

/* R8 table surface */
.tbl, .tblgrid { background: #fff; }

/* Face cards (owner, round 10): wide enough that a detail tab shows two per row (pane 728 → 2 × 350);
   4 per row at 1440 (332 each), 3 at 1024, 2 on tablets, 1 on phones. Overrides the kit's 232 minimum. */
.set { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* R9 NEXT pills: inline, sized to text, wrapping */
.aios-answer-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aios-answer-next .aios-next-btn { width: auto; max-width: 100%; white-space: normal; }

/* R10 nameplate fields wrap */
.aios-vplate .vplate__box, .aios-vplate .vplate__header-box, .aios-vplate .vplate__strip-box { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* R6 greeting: two lines are always reserved so a one-line and a two-line greeting lay out identically.
   Desktop and tablet: no clamp (copy rule); phones: whole sentences are dropped by production, the clamp is the guard. */
#welcomeFit #welcomeHeader, #welcomeFit .aios-welcome {
  display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
  height: auto; max-height: none; width: 100%; max-width: 100%; text-wrap: balance;
}
@media (min-width: 1024px) { #welcomeFit #welcomeHeader, #welcomeFit .aios-welcome { min-height: calc(76.8px * var(--ui-up)); } }
@media (min-width: 768px) and (max-width: 1023px) { #welcomeFit #welcomeHeader, #welcomeFit .aios-welcome { min-height: 67.6px; } }
@media (max-width: 767px) { #welcomeFit #welcomeHeader, #welcomeFit .aios-welcome { min-height: 52px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } }

/* §7 History: tenant-branded head, search over question and answer, time pills, rows newest first.
   Overlays cover the window from the top; the close button is a 44px target. */
.content-overlay { top: 0; }
.content-overlay-close { width: 44px; height: 44px; }
.history-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.history-head h2 { margin: 0; }
.history-logo { height: 25.3px; width: auto; display: block; }
.history-tools { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; max-width: 760px; }
.history-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 10px 14px; border: 1px solid var(--line, #E5E7EB); border-radius: 10px; background: #fff; color: var(--ink, #1a1a1a); }
.history-search:focus { outline: none; border-color: var(--aios-blue, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aios-blue, var(--accent)) 18%, transparent); }
.history-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.history-pill { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #E5E7EB); background: #fff; color: var(--ink, #1a1a1a); cursor: pointer; min-height: 32px; }
.history-pill.on { background: var(--aios-blue, var(--accent)); border-color: var(--aios-blue, var(--accent)); color: #fff; }
.history-item-title, .history-item-preview { overflow: visible; white-space: normal; text-overflow: clip; }


/* =============================================================
   DESKTOP  1024-1440
   ============================================================= */
@media (min-width: 1024px) {
  #welcomeFit #welcomeHeader, #welcomeFit .aios-welcome { font-size: calc(30px * var(--ui-up)); line-height: calc(38.4px * var(--ui-up)); }
}


/* =============================================================
   TABLET  768-1023  (834 frame's proportions; the layout stops growing at 834)
   ============================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* R5/R6 opening: greeting 26px/2 lines; tiles 2 x 3, icon-left, title and subtext, filling the canvas. */
  #welcomeFit #welcomeHeader, #welcomeFit .aios-welcome { font-size: 26px; line-height: 1.3; }
  .welcome-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: calc(3 * var(--tile-h-max) + 24px); }
  #welcomeActions .welcome-action { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-content: center; align-items: center; padding: 14px 16px; }
  #welcomeActions .welcome-action-icon { grid-row: 1 / span 2; width: 40px; height: 40px; }
  #welcomeActions .welcome-action-title { font-size: 16px; }
  .aios-topbar .navbar-logo img, .aios-topbar .navbar-logo svg { height: 30px !important; max-height: 30px !important; }

  /* GATE: pair side by side, 324 at 768 -> 384 at 834 (the cap); both the taller card's height. */
  #toggleScreen .toggle-cards, #toggleScreen .toggle-cards-row { width: 100%; }
  #toggleScreen .toggle-cards > .toggle-card, #toggleScreen .toggle-cards-row > .toggle-card { width: min(384px, calc(50% - 16px)) !important; }
  #toggleScreen .toggle-card-title { font-size: 24px; }
  #toggleScreen .toggle-card-body { font-size: 15px; }

  .side-panel { width: 320px; overflow-y: auto; overscroll-behavior: contain; }
}


/* TABLET + PHONE: no decision trail; plate and legal are bottom sheets */
@media (max-width: 1023px) {
  .aios-topbar .trailslot { display: none !important; }
  .chrome-overlay {
    top: auto; bottom: 0; height: auto; max-height: calc(92vh / var(--app-zoom));
    border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden;
    box-shadow: 0 -14px 44px rgba(15, 23, 42, 0.20), 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  }
  .chrome-overlay-head { flex: 0 0 auto; }
  .chrome-overlay-body { flex: 1 1 auto; min-height: 0; padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
  #plateOverlay .chrome-overlay-body { padding: 12px var(--content-gut) calc(24px + env(safe-area-inset-bottom, 0px)); }
}


/* =============================================================
   PHONE  <768  (430 frame's proportions; the layout stops growing at 430).
   Column 358 at 390, 398 at 430; edge 16 everywhere.
   ============================================================= */
@media (max-width: 767px) {
  /* TOP CHROME 52px: mark and menu. Version pill lives on the plate + menu. */
  :root { --nav-height: 52px; }
  .aios-topbar { min-height: 52px; gap: 8px; }
  .aios-topbar .aios-version-mark { display: none; }
  .aios-topbar .navbar-hamburger { min-width: 44px; height: 44px; margin-right: -10px; }
  .aios-topbar .navbar-logo img, .aios-topbar .navbar-logo svg { height: 28px !important; max-height: 28px !important; max-width: 44vw !important; }

  /* OPENING (R5/R6/R7): greeting 20px/2 lines, orb 106, tiles 2 x 3 icon-left filling the canvas. */
  .aios-canvas:not(.has-messages) .aios-container { padding-top: 4px; padding-bottom: 8px; }
  #welcomeFit #welcomeHeader, #welcomeFit .aios-welcome { font-size: 20px; line-height: 1.3; margin-bottom: 12px; }
  .aios-canvas:not(.has-messages) .orb-wrapper-large { margin-bottom: 14px !important; }
  .aios-canvas:not(.has-messages) .orb-wrapper-large .orb,
  #aiosCanvas:not(.has-messages) .orb-wrapper .orb { width: 106px !important; height: 106px !important; }
  .welcome-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; max-height: none; }
  .welcome-action { display: grid !important; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-content: center; align-items: center; padding: 10px 12px !important; }
  .welcome-action-icon { grid-row: 1 / span 2; order: 0 !important; width: 28px !important; height: 28px !important; min-width: 28px !important; }
  .welcome-action-icon svg, .welcome-action-icon img { width: 22px !important; height: 22px !important; }
  .welcome-action-title { order: 1 !important; min-height: 0 !important; font-size: 14px !important; font-weight: 700 !important; }
  #welcomeActions .welcome-action-sub { order: 2 !important; display: block !important; font-size: 12px; }

  /* CONVERSATION: one column inside the 16px edge; the record keeps the edge. */
  .aios-container { padding: 12px 16px 16px; }
  .msg-user { max-width: 88%; }
  .turn-widgets > .pc { max-width: none; }
  .frm { max-width: none; }
  .fgrid { grid-template-columns: 1fr; }
  .lb, .video, .mapbox, .contact, .empty { max-width: none; }

  /* COMPOSER: one row, 56px, field + mic + send, docked above the home indicator. */
  .aios-dock { padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important; gap: 0; }
  .aios-dock .composer { flex-direction: row; align-items: flex-end; border-radius: 28px !important; border-width: 1.5px !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10) !important; }
  .aios-dock .composer.is-multiline { border-radius: 28px !important; }
  .aios-dock .composer .composer-input-row { flex: 1 1 auto; min-width: 0; padding: 0 0 0 20px !important; align-items: center; }
  [data-visual="v2"] .aios-dock .composer textarea.input-text, .aios-dock .composer #messageInput { min-height: 54px; padding: 16px 0 !important; font-size: 16px !important; line-height: 1.4; }
  .aios-dock .composer .composer-rail { flex: 0 0 auto; padding: 0 6px 6px 8px; gap: 6px; }
  .aios-dock .composer .composer-version { display: none !important; }
  [data-visual="v2"] .composer .mic-microcopy { display: none; }
  .aios-dock .composer .input-mic, .aios-dock .composer .input-send { width: 44px !important; height: 44px !important; }

  /* DOCK FOOT: the same short sentence as every other width, 10.5px, two lines on the 358 column. */
  body.aios-active .aios-dock .aios-attribution { padding: 0 4px !important; }
  .aios-dock .aios-attribution-line, .aios-dock #dockAttribution { width: 100%; max-width: none !important; font-size: 10.5px !important; line-height: 1.4 !important; letter-spacing: 0 !important; padding: 0 !important; margin: 0 !important; }
  .aios-dock .aios-attribution-line img, .aios-dock .aios-attribution-line .attr-gallea-inline { height: 10px !important; }

  /* SIDE PANEL */
  .side-panel { width: min(320px, calc(100vw / var(--app-zoom) - 48px)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .side-panel-nav-item { min-height: 48px; }

  /* GATE (R12), stacked: the block fills the screen (min-height 100vh - 26), never scrolls, and the two
     cards share the space equally (flex-basis 0) so they are always the same size, both buttons on one
     line at the bottom. Type one step up from the production phone gate (title 20, persona 15, body 15).
     Self-sufficient over the whole phone class (opening-lock.css only reaches 639); selectors match
     opening-lock.css / chrome.css so this file, loaded last, wins. */
  :root[data-stacked-mobile-gate="true"] body:not(.aios-variant-m2) #toggleScreen:not(.hidden),
  body:not(.aios-variant-m2) #toggleScreen:not(.hidden) { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; overflow: hidden !important; min-height: calc(100vh / var(--app-zoom)) !important; padding: 12px 16px 14px !important; box-sizing: border-box !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-screen { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 520px !important; margin: 0 auto !important; height: auto !important; max-height: none !important; min-height: calc(100vh / var(--app-zoom) - 26px) !important; padding: 2px 0 4px !important; box-sizing: border-box !important; transform-origin: 50% 0; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo { display: inline-flex !important; justify-content: center !important; margin: 0 auto 10px !important; max-height: 40px !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-logo img, body:not(.aios-variant-m2) #toggleScreen .toggle-logo svg { max-height: 36px !important; width: auto !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-headline { display: block !important; text-align: center !important; font-size: 22px !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-subhead { display: block !important; text-align: center !important; font-size: 15px !important; margin: 0 0 14px !important; }
  :root[data-stacked-mobile-gate="true"] body:not(.aios-variant-m2) #toggleScreen .toggle-cards,
  body:not(.aios-variant-m2) #toggleScreen .toggle-cards { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; width: 100% !important; max-width: none !important; flex: 1 1 auto !important; min-height: 0 !important; gap: 12px !important; align-items: stretch !important; }
  :root[data-stacked-mobile-gate="true"] body:not(.aios-variant-m2) #toggleScreen .toggle-card,
  body:not(.aios-variant-m2) #toggleScreen .toggle-card { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1 1 0% !important; padding: 20px 18px 18px !important; box-sizing: border-box !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-title, body:not(.aios-variant-m2) #toggleScreen .toggle-card-persona, body:not(.aios-variant-m2) #toggleScreen .toggle-card-body { display: block !important; text-align: center !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-title { font-size: 20px !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; margin-bottom: 10px !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-persona { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 8px !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-body { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-language-picker { display: flex !important; justify-content: center !important; margin: 8px auto 0 !important; position: relative !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-language-button { font-size: 14px !important; min-width: min(220px, 100%) !important; justify-content: space-between !important; }
  body:not(.aios-variant-m2) #toggleScreen .toggle-card-button { font-size: 15px !important; margin-top: auto !important; width: 100% !important; }
  /* Gate foot: same stack as desktop (lockup above, sentence below), centred, 10.5px. */
  :root[data-stacked-mobile-gate="true"] body:not(.aios-variant-m2) #toggleScreen .toggle-poweredby,
  :root[data-stacked-mobile-gate="true"] body:not(.aios-variant-m2) #toggleScreen .aios-attribution,
  #toggleScreen #gatePartnerLockup, #toggleScreen .toggle-poweredby.aios-attribution { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; max-width: none !important; margin: 14px 0 0 !important; padding: 0 !important; }
  #toggleScreen .aios-attribution-marks { display: flex !important; justify-content: center; padding: 0 !important; margin: 0 !important; }
  #toggleScreen .aios-attribution-marks .attr-mark { height: 26px !important; width: auto !important; }
  #toggleScreen #gateAttribution, #toggleScreen .aios-attribution-line { display: block !important; flex: 0 0 auto !important; width: 100% !important; max-width: none !important; text-align: center !important; font-size: 10.5px !important; line-height: 1.4 !important; letter-spacing: 0 !important; padding: 0 !important; margin: 0 !important; }
}

/* 390 frame: title only on the starters (the 430 frame carries the subtext; production's
   measured check decides between them for the real copy). */
@media (max-width: 429px) { #welcomeActions .welcome-action-sub { display: none !important; } }