/* AVA-HR prototype — layout and screen patterns.
   Design system: nmblr.foundry-codex (css/foundry/*), product theme Foundation.
   Components are fds-*; this file is layout only. Colour is always a --c-* token;
   spacing, radius, shadow and rings are always tokens. Breakpoints are the
   system's four: sm 640 · md 768 · lg 1024 · xl 1280. Mobile is below md.

   One responsive app. Screens are organised by the PRD's sub-features —
   1.1 clocking in · 1.2 hours by project code · 2.1 assignment · 2.2 check-in
   · 2.3 journal · 5.1 team today — and each screen carries the id it builds. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--c-canvas); color: var(--c-text);
  font-family: var(--font-text); font-size: 14px; line-height: 20px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-accent-strong); text-decoration: none; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.chrome { font-family: var(--font-display); }
.muted { color: var(--c-text-2); }
.cap { font-size: 12px; line-height: 18px; color: var(--c-text-2); }
.micro { font-size: 11px; line-height: 16px; color: var(--c-muted); }
.code { font-family: var(--font-mono); font-size: 11px; color: var(--c-muted); background: var(--c-subtle); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 1px var(--space-6); white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--space-8); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.stack { display: flex; flex-direction: column; gap: var(--space-12); }
.stack--8 { gap: var(--space-8); }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }

/* ── stage · the harness may clamp it to a device width ─────────────── */
body.app { height: 100dvh; overflow: hidden; }
.stage { height: 100%; display: flex; justify-content: center; }
.device { position: relative; width: 100%; height: 100%; display: flex; min-width: 0; background: var(--c-canvas); overflow: hidden; }
body[data-device="phone"]  .device { max-width: 390px; }
body[data-device="tablet"] .device { max-width: 834px; }
body[data-device="phone"]  .stage,
body[data-device="tablet"] .stage { padding: var(--space-24) var(--space-16); }
body[data-device="phone"]  .device,
body[data-device="tablet"] .device { border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl), 0 0 0 1px var(--c-border-strong); }

/* ── navigation · tabs below md, rail at md and up ──────────────────── */
.rail { display: none; }
@media (min-width: 768px) { /* --bp-md */
  .rail { display: flex; flex-direction: column; gap: var(--space-4); width: 220px; flex: none;
          padding: var(--space-16) var(--space-12); background: var(--c-surface); border-right: 1px solid var(--c-border); }
  .tabbar { display: none !important; }
}
.railitem { display: flex; align-items: center; gap: var(--space-8); min-height: 40px; width: 100%;
            padding: var(--space-8) var(--space-12); border: none; background: transparent; cursor: pointer;
            border-radius: var(--radius-10); font-family: var(--font-display); font-size: 14px; font-weight: 500;
            color: var(--c-text-2); text-align: left; }
.railitem:hover { background: var(--c-surface-hover); color: var(--c-text); }
.railitem[data-on="true"] { background: var(--c-accent-faint); color: var(--c-accent-strong); }
.rail__foot { margin-top: auto; border-top: 1px solid var(--c-border); padding-top: var(--space-12); }

.tabbar { flex: 0 0 auto; display: flex; gap: var(--space-4); padding: var(--space-6) var(--space-8) var(--space-8);
          border-top: 1px solid var(--c-border); background: var(--c-surface); }
.tab { flex: 1; min-height: 44px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-10);
       display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
       font-family: var(--font-display); font-size: 10px; font-weight: 600; color: var(--c-text-2); }
.tab b { font-size: 16px; font-weight: 400; line-height: 1; }
.tab[data-on="true"] { color: var(--c-accent-strong); background: var(--c-accent-faint); }

/* ── screens ────────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-12);
       padding: var(--space-12) var(--space-16); background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.bar__t { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.bar__s { font-size: 12px; color: var(--c-text-2); }
.mark { width: 30px; height: 30px; flex: none; border-radius: var(--radius-10); background: var(--c-gradient-brand);
        color: var(--c-text-on-accent-solid); display: grid; place-items: center;
        font-family: var(--font-display); font-size: 10px; font-weight: 700; }

.screens { flex: 1; min-height: 0; position: relative; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen[data-on="true"] { display: flex; animation: rise .18s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen[data-on="true"] { animation: none; } }
.body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-16); }
/* A phone has no persistent scrollbar — it scrolls, the bar just isn't drawn.
   Only the clamped device hides it; a desktop window keeps its own. */
body[data-device="phone"] .body,
body[data-device="phone"] .scroll-x,
body[data-device="phone"] .thread { scrollbar-width: none; -ms-overflow-style: none; }
body[data-device="phone"] .body::-webkit-scrollbar,
body[data-device="phone"] .scroll-x::-webkit-scrollbar,
body[data-device="phone"] .thread::-webkit-scrollbar { width: 0; height: 0; display: none; }
.foot { flex: 0 0 auto; padding: var(--space-12) var(--space-16) var(--space-16);
        border-top: 1px solid var(--c-border); background: var(--c-surface); }
.col { width: 100%; max-width: 560px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-16); }
.col--wide { max-width: 1180px; }

/* ── the day spine ──────────────────────────────────────────────────── */
.spine { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { /* --bp-lg */
  .spine { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; max-width: 980px; margin-inline: auto; }
}
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-12); padding-bottom: var(--space-16); position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--c-border); }
.step[data-state="done"]:not(:last-child)::before { background: var(--c-success); }
.step__n { width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; z-index: 1;
           font-family: var(--font-display); font-size: 12px; font-weight: 700;
           background: var(--c-subtle); color: var(--c-muted); border: 1px solid var(--c-border); }
.step[data-state="done"] .step__n { background: var(--c-success-bg); color: var(--c-success-text); border-color: var(--c-success-border); }
.step[data-state="now"]  .step__n { background: var(--c-accent-solid); color: var(--c-text-on-accent-solid); border-color: transparent; }
.step__t { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.step[data-state="todo"] .step__t { color: var(--c-text-2); }
.step__m { font-size: 12px; color: var(--c-text-2); margin-top: 2px; }

/* ── pieces ─────────────────────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-xl); padding: var(--space-16); }
.card__t { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
/* White ink on the brand gradient, in both modes. The white comes from a
   token either way: --c-surface is #FFF in light, --c-text is #FFF in dark.
   (--c-text-on-accent-solid is the dark-ink pair, which is for the flat
   accent fill — on the gradient it reads as a stamp.) */
.hero { background: var(--c-gradient-brand); color: var(--c-surface); border-radius: var(--radius-2xl);
        padding: var(--space-16); box-shadow: var(--shadow-md); }
/* In dark mode the brand gradient is theme-independent, so the same neon
   cyan-green sits against a near-black UI and glares. The mandated scrim
   sinks it to the room's light level; the gradient itself is untouched and
   white ink then sits around 5:1 instead of 2.3:1. */
.dark .hero { color: var(--c-text);
              background-image: linear-gradient(rgba(8, 9, 28, 0.45), rgba(8, 9, 28, 0.45)), var(--c-gradient-brand); }
.hero__l { font-family: var(--font-display); font-size: 13px; font-weight: 600; opacity: .92; }
.hero__v { font-family: var(--font-mono); font-size: 40px; line-height: 1.1; font-weight: 500; margin-top: var(--space-4); }
.hero__m { font-size: 12px; opacity: .92; margin-top: var(--space-4); }
.hero__b { width: 100%; min-height: 44px; margin-top: var(--space-12); border: none; border-radius: var(--radius-full);
           background: var(--c-surface); color: var(--c-accent-strong); cursor: pointer;
           font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.hero__b:disabled { opacity: .55; cursor: not-allowed; }

.item { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-12) 0; border-bottom: 1px solid var(--c-border); }
.item:last-child { border-bottom: none; }
.item__t { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.item__m { display: block; font-size: 12px; color: var(--c-text-2); margin-top: 2px; }

.filing { border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-surface-raised); }
.filing__h { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); background: var(--c-subtle); border-bottom: 1px solid var(--c-border); }
.filing__b { padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-8); }
.line { display: flex; justify-content: space-between; gap: var(--space-12); font-size: 13px; }
.line .k { color: var(--c-text-2); }
.checks { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-8); border-top: 1px dashed var(--c-border); }
.ck { font-size: 12px; color: var(--c-text-2); display: flex; gap: var(--space-6); }
.ck[data-pass="true"] b { color: var(--c-success-text); }
.ck[data-pass="false"] b { color: var(--c-error-text); }
.total { display: flex; justify-content: space-between; gap: var(--space-12); padding: var(--space-8) var(--space-12);
         border-radius: var(--radius-md); font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.total[data-ok="true"]  { background: var(--c-success-bg); color: var(--c-success-text); border: 1px solid var(--c-success-border); }
.total[data-ok="false"] { background: var(--c-error-bg);   color: var(--c-error-text);   border: 1px solid var(--c-error-border); }
.splitrow { display: grid; grid-template-columns: minmax(0, 1fr) 92px 36px; gap: var(--space-8); align-items: center; }
.splitrow .fds-field__input { text-align: right; }

.thread { display: flex; flex-direction: column; gap: var(--space-12); }
.msg { display: flex; gap: var(--space-8); max-width: min(620px, 100%); min-width: 0; }
.msg__a { width: 26px; height: 26px; flex: none; border-radius: var(--radius-10); background: var(--c-gradient-brand);
          color: var(--c-text-on-accent-solid); display: grid; place-items: center;
          font-family: var(--font-display); font-size: 9px; font-weight: 700; }
.bub { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-xl);
       border-top-left-radius: var(--radius-sm); padding: var(--space-8) var(--space-12); font-size: 13px;
       min-width: 0; overflow-wrap: anywhere; }
.msg[data-me="true"] { margin-left: auto; flex-direction: row-reverse; }
.msg[data-me="true"] .bub { background: var(--c-accent-solid); color: var(--c-text-on-accent-solid); border-color: transparent;
                            border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-sm); }
.composer { display: flex; gap: var(--space-8); align-items: center; background: var(--c-surface);
            border: 1px solid var(--c-border); border-radius: var(--radius-full);
            padding: var(--space-4) var(--space-4) var(--space-4) var(--space-16); }
.composer input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--c-text);
                  font-family: var(--font-text); font-size: 16px; } /* 16px — iOS must not zoom */
.composer input:focus { outline: none; }
.composer:focus-within { border-color: var(--c-accent); box-shadow: var(--ring-focus); }
.chips { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-8); }

.kpis { display: grid; gap: var(--space-12); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi__n { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 600; }
.kpi__l { font-size: 12px; color: var(--c-text-2); }
.panes { display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .panes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.meter { height: 8px; border-radius: var(--radius-full); background: var(--c-subtle); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--c-accent); }
.meter > i[data-tone="warning"] { background: var(--c-warning); }
.meter > i[data-tone="error"]   { background: var(--c-error); }
.meter > i[data-tone="neutral"] { background: var(--c-icon); }
.dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; flex: none; }
.dot[data-tone="success"] { background: var(--c-success); }
.dot[data-tone="error"]   { background: var(--c-error); }
.dot[data-tone="warning"] { background: var(--c-warning); }
.dot[data-tone="neutral"] { background: var(--c-icon); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .06em;
     text-transform: uppercase; color: var(--c-muted); padding: var(--space-6); border-bottom: 1px solid var(--c-border); }
td { padding: var(--space-8) var(--space-6); border-bottom: 1px solid var(--c-border); font-size: 13px; }
tr:last-child td { border-bottom: none; }
.scroll-x { overflow-x: auto; }

.signin { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-16);
          padding: var(--space-32) var(--space-24); max-width: 460px; margin-inline: auto; width: 100%; }
.signin__m { width: 56px; height: 56px; border-radius: var(--radius-xl); background: var(--c-gradient-brand);
             color: var(--c-text-on-accent-solid); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.signin__t { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 700; }


/* ── harness viewport clamps override the media queries ──────────────
   A media query reads the WINDOW, not the clamped device, so a phone clamp on
   a 2560px monitor would otherwise get the desktop rail inside a 390px frame.
   These rules make the clamp behave like the device it is imitating. */
body[data-device="phone"] .rail { display: none !important; }
body[data-device="phone"] .tabbar { display: flex !important; }
body[data-device="phone"] .spine,
body[data-device="tablet"] .spine { grid-template-columns: minmax(0, 1fr); max-width: none; }
body[data-device="phone"] .panes,
body[data-device="tablet"] .panes { grid-template-columns: minmax(0, 1fr); }
body[data-device="phone"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-device="phone"] .col,
body[data-device="tablet"] .col { max-width: none; }

/* ── launcher ───────────────────────────────────────────────────────── */
.launch { max-width: 1040px; margin-inline: auto; padding: var(--space-48) var(--space-24) var(--space-64); }
.launch__h { display: flex; align-items: center; gap: var(--space-16); }
.launch__m { width: 48px; height: 48px; border-radius: var(--radius-xl); background: var(--c-gradient-brand);
             color: var(--c-text-on-accent-solid); display: grid; place-items: center;
             font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.launch__g { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: var(--space-32); }
.launch__g a { color: inherit; display: block; }

/* ── readable small print ────────────────────────────────────────────
   --c-text-subtle is a hairline/ghost token (1.9:1 on canvas) — it is for
   dividers and disabled glyphs, never for words. Small print uses --c-muted,
   which clears 4.5:1 in both modes. Placeholders are set explicitly because
   the UA default ignores the token. */
.fds-field__input::placeholder,
.composer input::placeholder,
input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: 1; }

/* A step of the day, posted into the conversation. Everything inside a card
   shares one left edge: the field, its label, its helper and the chips. */
.bub--card { width: 100%; max-width: 420px; background: var(--c-surface); border: 1px solid var(--c-border);
             padding: var(--space-12); }
.bub--card .col, .bub--card .col--wide { max-width: none; padding: 0; }
.bub--card .foot { padding: var(--space-12) 0 0; border: none; background: none; }
.bub--card > * > * { margin-left: 0; margin-right: 0; }
.bub--card .fds-field { display: block; }
.bub--card .fds-field__input { width: 100%; box-sizing: border-box; }
.bub--card .chips { margin: var(--space-8) 0 0; padding: 0; gap: var(--space-6); }
.bub--card .fds-field__helper { margin-top: var(--space-6); }
.bub--card .stack { gap: var(--space-12); }

/* ── AVA, as a sheet (old block kept below for reference) ── */
/* ── AVA, as a sheet ──────────────────────────────────────────────────
   The conversation is not a destination you leave your work for: it opens
   over whatever you are looking at. A side sheet at md and up, a bottom
   sheet below it, and the scrim is the one colour literal the system allows. */
.scrim { position: absolute; inset: 0; z-index: 40; background: rgba(8, 9, 28, 0.38); }
.sheet { position: absolute; z-index: 50; display: flex; flex-direction: column; min-width: 0;
         background: var(--c-canvas); box-shadow: var(--shadow-xl); }
.sheet[hidden], .scrim[hidden] { display: none !important; }
.sheet__h { display: flex; align-items: center; gap: var(--space-12); flex: none;
            padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.sheet .body { flex: 1; min-height: 0; }

/* below md: a bottom sheet, and AVA is the middle button of the tab bar */
.sheet { inset: auto 0 0 0; height: 86%; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.tab[data-ava="true"] { color: var(--c-accent-strong); }
.tab[data-ava="true"] b { display: inline-flex; align-items: center; justify-content: center;
                          width: 34px; height: 34px; border-radius: var(--radius-full);
                          background: var(--c-accent-solid); color: var(--c-text-on-accent-solid);
                          font-family: var(--font-display); font-size: 11px; font-weight: 700; }
.avafab { display: none; }

@media (min-width: 768px) {
  .sheet { inset: 0 0 0 auto; width: min(440px, 92%); height: auto;
           border-radius: var(--radius-2xl) 0 0 var(--radius-2xl); border-left: 1px solid var(--c-border); }
  .avafab { display: flex; position: absolute; right: var(--space-24); bottom: var(--space-24); z-index: 30;
            align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-20, 18px);
            border: none; border-radius: var(--radius-full); cursor: pointer;
            background: var(--c-accent-solid); color: var(--c-text-on-accent-solid);
            font-family: var(--font-display); font-size: 15px; font-weight: 700; box-shadow: var(--shadow-lg); }
  .avafab:hover { filter: brightness(1.05); }
}
body[data-device="phone"] .sheet { inset: auto 0 0 0; width: auto; height: 86%;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; border-left: none; }
body[data-device="phone"] .avafab { display: none; }

/* Cards inside the sheet must wrap, not spill. */
.sheet .bub--card { max-width: none; }
.sheet .chips { flex-wrap: wrap; }
.sheet .fds-chip { max-width: 100%; }
.sheet .fds-chip__body { white-space: normal; text-align: left; }

/* ── the AVA button and its transition ───────────────────────────────
   One round button that stays put and turns into the way out, the way a
   banking app's menu does: the overlay blooms from it, the app behind dims
   and recedes, nothing navigates. */
.scrim { transition: opacity .22s ease; opacity: 0; }
.scrim[data-open="true"] { opacity: 1; }
.sheet { transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
         transform: translateY(16px) scale(.985); opacity: 0; transform-origin: 50% 100%; }
.sheet[data-open="true"] { transform: none; opacity: 1; }
.device[data-dim="true"] .screens { transition: transform .26s ease, filter .26s ease;
         transform: scale(.985); filter: saturate(.75); }

.avafab { transition: transform .22s cubic-bezier(.2,.8,.3,1), background .2s ease, color .2s ease; }
.avafab[data-open="true"] { background: var(--c-surface); color: var(--c-text-2);
         box-shadow: var(--shadow-md), 0 0 0 1px var(--c-border); }

/* phone: the button floats above the tab bar, centred, and the sheet is full height */
body[data-device="phone"] .avafab { display: flex; left: 50%; right: auto; bottom: var(--space-16);
  transform: translateX(-50%); width: 68px; height: 68px; min-height: 0; padding: 0; border-radius: var(--radius-full);
  font-size: 13px; line-height: 1.1; text-align: center; z-index: 60; }
body[data-device="phone"] .avafab[data-open="true"] { transform: translateX(-50%) scale(.92); }
body[data-device="phone"] .sheet { inset: 0; height: auto; border-radius: 0; }
body[data-device="phone"] .sheet .body { padding-bottom: 96px; }
body[data-device="phone"] .tab[data-ava="true"] { display: none; }
@media (max-width: 767px) {
  .avafab { display: flex; left: 50%; right: auto; bottom: var(--space-16); transform: translateX(-50%);
    width: 68px; height: 68px; min-height: 0; padding: 0; border-radius: var(--radius-full);
    font-size: 13px; line-height: 1.1; text-align: center; z-index: 60; }
  .avafab[data-open="true"] { transform: translateX(-50%) scale(.92); }
  .sheet { inset: 0; height: auto; border-radius: 0; }
  .sheet .body { padding-bottom: 96px; }
  .tab[data-ava="true"] { display: none; }
}

/* the button sits clear of the tab bar, and of the composer when open */
body[data-device="phone"] .avafab { bottom: 74px; }
body[data-device="phone"] .sheet .foot { padding-bottom: 84px; }
@media (max-width: 767px) {
  .avafab { bottom: 74px; }
  .sheet .foot { padding-bottom: 84px; }
}

/* The conversation takes two thirds of the frame, never all of it: the day
   stays visible behind it, and the launcher hides while it is open. */
.avafab[data-open="true"] { opacity: 0; pointer-events: none; transform: scale(.9); }
body[data-device="phone"] .avafab[data-open="true"] { transform: translateX(-50%) scale(.9); }
body[data-device="phone"] .sheet,
body[data-device="tablet"] .sheet { inset: auto 0 0 0; height: 66%;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; box-shadow: var(--shadow-xl); }
body[data-device="phone"] .sheet .foot { padding-bottom: var(--space-16); }
@media (max-width: 767px) {
  .avafab[data-open="true"] { transform: translateX(-50%) scale(.9); }
  .sheet { inset: auto 0 0 0; height: 66%; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
  .sheet .foot { padding-bottom: var(--space-16); }
}
@media (min-width: 768px) { .sheet { height: auto; max-height: none; } }

/* ── AVA in the navigation ───────────────────────────────────────────
   Same row as the others, raised and filled so it reads as the primary
   action — the pattern a wallet app uses for its middle button. */
.avafab { display: none !important; }
.tab[data-ava="true"] { display: flex !important; position: relative; color: var(--c-text-2); }
.tab[data-ava="true"] b { display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; margin-top: -26px; margin-bottom: 2px; border-radius: var(--radius-full);
  background: var(--c-accent-solid); color: var(--c-text-on-accent-solid);
  box-shadow: 0 0 0 4px var(--c-surface), var(--shadow-md);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.tab[data-ava="true"][data-on="true"] { color: var(--c-accent-strong); }
.railitem[data-ava="true"] { background: var(--c-accent-faint); color: var(--c-accent-strong); font-weight: 700; }
.railitem[data-ava="true"] > span:first-child { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-full); flex: none;
  background: var(--c-accent-solid); color: var(--c-text-on-accent-solid); font-size: 9px; font-weight: 700; }
.tabbar { overflow: visible; }

/* Desktop keeps the same rule: the conversation takes two thirds at most,
   anchored to the corner it was opened from. */
@media (min-width: 768px) {
  .sheet { inset: auto 0 0 auto; width: min(440px, 92%); height: 66%;
           border-radius: var(--radius-2xl) 0 0 0; border-left: 1px solid var(--c-border);
           border-top: 1px solid var(--c-border); }
}
body[data-device="tablet"] .sheet { inset: auto 0 0 auto; width: min(420px, 70%); height: 66%;
  border-radius: var(--radius-2xl) 0 0 0; }

/* The floating button is the desktop way in; the raised tab is the phone's. */
.avafab { display: none !important; }
@media (min-width: 768px) {
  .avafab { display: flex !important; right: var(--space-24); left: auto; bottom: var(--space-24);
            transform: none; width: auto; height: auto; min-height: 52px; padding: 0 var(--space-24); border-radius: var(--radius-full); }
  .avafab[data-open="true"] { opacity: 0; pointer-events: none; transform: scale(.9); }
  /* two thirds of the frame, anchored where it opened from */
  .sheet { inset: auto 0 0 auto; width: min(460px, 46%); height: 66%;
           border-radius: var(--radius-2xl) 0 0 0; }
}
body[data-device="phone"] .avafab { display: none !important; }
body[data-device="tablet"] .avafab { display: flex !important; }

.avafab { gap: var(--space-8); }
.avafab svg { flex: none; }

/* The sheet sits inside the frame, so its outer corners must follow the
   frame's, not cut across them. */
.device { overflow: hidden; }
@media (min-width: 768px) {
  .sheet { border-radius: var(--radius-2xl) 0 var(--radius-2xl) 0; }
}
body[data-device="phone"] .sheet,
body[data-device="tablet"] .sheet {
  border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl);
}
body[data-device="tablet"] .sheet { border-radius: var(--radius-2xl) 0 var(--radius-2xl) 0; }
@media (max-width: 767px) {
  .sheet { border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl) var(--radius-2xl); }
}

/* The sheet is a card like everything else: it floats inside the frame with
   every corner rounded, rather than butting against the edges. */
@media (min-width: 768px) {
  .sheet { inset: auto var(--space-16) var(--space-16) auto; width: min(460px, 46%); height: 66%;
           border-radius: var(--radius-2xl); border: 1px solid var(--c-border); }
}
body[data-device="phone"] .sheet,
body[data-device="tablet"] .sheet {
  inset: auto var(--space-12) var(--space-12) var(--space-12); width: auto; height: 66%;
  border-radius: var(--radius-2xl); border: 1px solid var(--c-border);
}
@media (max-width: 767px) {
  .sheet { inset: auto var(--space-12) var(--space-12) var(--space-12); width: auto; height: 66%;
           border-radius: var(--radius-2xl); border: 1px solid var(--c-border); }
}
.sheet__h { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.sheet .foot { border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }

/* Mobile: a full-width bottom sheet flush to the frame, rounded at the top
   only. Desktop keeps the floating card. */
body[data-device="phone"] .sheet,
body[data-device="tablet"] .sheet {
  inset: auto 0 0 0; width: auto; height: 66%;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  border: 1px solid var(--c-border); border-bottom: none;
}
@media (max-width: 767px) {
  .sheet { inset: auto 0 0 0; width: auto; height: 66%;
           border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
           border: 1px solid var(--c-border); border-bottom: none; }
}
.sheet .foot { border-radius: 0; }

/* Desktop: AVA is not an overlay at all — it is a persistent column beside
   the app, full height, always open. The phone keeps the bottom sheet. */
@media (min-width: 768px) {
  .scrim, .avafab { display: none !important; }
  .sheet, .sheet[hidden] {
    display: flex !important; position: relative; inset: auto; z-index: 1;
    flex: 0 0 380px; width: 380px; height: 100%;
    transform: none !important; opacity: 1 !important;
    border: none; border-left: 1px solid var(--c-border); border-radius: 0; box-shadow: none;
  }
  .sheet__h { border-radius: 0; }
  .sheet__h .fds-btn[aria-label="Close"] { display: none; }
  .device[data-dim="true"] .screens { transform: none; filter: none; }
}
@media (min-width: 1280px) { .sheet, .sheet[hidden] { flex-basis: 420px; width: 420px; } }
body[data-device="phone"] .sheet[hidden] { display: none !important; }
body[data-device="phone"] .scrim[hidden] { display: none !important; }

/* The persistent column is a DESKTOP rule. A clamped phone on a wide window
   still matched it, so the sheet sat in flow and squeezed the app into a
   third of the frame with the tab bar stranded mid-screen. */
body[data-device="phone"] .sheet,
body[data-device="phone"] .sheet[hidden] {
  position: absolute; inset: auto 0 0 0; flex: none; width: auto; height: 66%;
  z-index: 50; border: 1px solid var(--c-border); border-bottom: none;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; box-shadow: var(--shadow-xl);
}
body[data-device="phone"] .sheet[hidden] { display: none !important; }
body[data-device="phone"] .scrim { display: block; }
body[data-device="phone"] .scrim[hidden] { display: none !important; }
body[data-device="phone"] .sheet__h .fds-btn[aria-label="Close"] { display: inline-flex; }
body[data-device="phone"] .avafab { display: none !important; }
body[data-device="phone"] .sheet { transform: translateY(16px); opacity: 0; }
body[data-device="phone"] .sheet[data-open="true"] { transform: none; opacity: 1; }

/* The persistent column needs room. Below 1100px — and in the tablet clamp —
   the conversation goes back to being an overlay with its own button, so the
   screen behind keeps its width. */
@media (min-width: 768px) and (max-width: 1099px) {
  .sheet, .sheet[hidden] {
    position: absolute; inset: auto var(--space-16) var(--space-16) auto; flex: none;
    width: min(420px, 72%); height: 70%; z-index: 50;
    border: 1px solid var(--c-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl);
    transform: translateY(16px); opacity: 0;
  }
  .sheet[data-open="true"] { transform: none; opacity: 1; }
  .sheet[hidden] { display: none !important; }
  .scrim { display: block; } .scrim[hidden] { display: none !important; }
  .avafab { display: flex !important; }
  .sheet__h .fds-btn[aria-label="Close"] { display: inline-flex; }
}
body[data-device="tablet"] .sheet,
body[data-device="tablet"] .sheet[hidden] {
  position: absolute; inset: auto var(--space-16) var(--space-16) auto; flex: none;
  width: min(420px, 72%); height: 70%; z-index: 50;
  border: 1px solid var(--c-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl);
  transform: translateY(16px); opacity: 0;
}
body[data-device="tablet"] .sheet[data-open="true"] { transform: none; opacity: 1; }
body[data-device="tablet"] .sheet[hidden] { display: none !important; }
body[data-device="tablet"] .scrim { display: block; }
body[data-device="tablet"] .scrim[hidden] { display: none !important; }
body[data-device="tablet"] .avafab { display: flex !important; }
body[data-device="tablet"] .sheet__h .fds-btn[aria-label="Close"] { display: inline-flex; }