/* ═══════════════ e'thix — the composer on a phone (N19), the balance ring (K3), the case chip's pulse (B1) ═══════════════
   Wave 5. js/composer-dock.js marks the composer's notices (data-notice="top" | "queued"), draws the «+n» button and the
   one status line under the box, and sets --kb-inset / --vv-top from window.visualViewport. CSP is style-src 'self':
   nothing here is inline; the two custom properties are set through the CSSOM. Theme tokens only (light and dark). */

/* ─── one notice slot: the queued wait behind «+n» until it is pressed ─── */
.composer-wrap:not(.notices-open) [data-notice="queued"]{display:none !important}
.c-dock{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.c-dock-list:empty{display:none}
.c-notice{
  margin:0 0 6px;padding:8px 12px;border-radius:var(--r-sm,12px);font-size:12.5px;line-height:1.55;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
}
.c-notice.is-warn{color:var(--ink);border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--surface))}
.c-more{
  align-self:flex-end;min-height:28px;min-width:44px;margin:-2px 0 6px;padding:0 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
.c-more:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.c-more:focus-visible{outline:2px solid var(--accent-b);outline-offset:2px}
.c-more[hidden]{display:none}
.docs-note[tabindex="-1"]:focus{outline:2px solid var(--accent-b);outline-offset:2px}

/* ─── the chips' row: one line that scrolls sideways (every width; the phone rules in docs.css size the chips) ─── */
.attach-tray{flex-wrap:wrap;overflow:visible}
.tray-scroll{
  --fs:0px;--fe:0px;--fdir:right;
  display:flex;gap:8px;flex:1 0 100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px;
  -webkit-mask-image:linear-gradient(to var(--fdir),transparent,#000 var(--fs),#000 calc(100% - var(--fe)),transparent);
  mask-image:linear-gradient(to var(--fdir),transparent,#000 var(--fs),#000 calc(100% - var(--fe)),transparent);
}
.tray-scroll::-webkit-scrollbar{display:none}
html[dir="rtl"] .tray-scroll{--fdir:left}
.tray-scroll.fade-start{--fs:28px}
.tray-scroll.fade-end{--fe:28px}
.tray-scroll:focus-visible{outline:2px solid var(--accent-b);outline-offset:2px;border-radius:14px}
.tray-scroll > .tray-item{flex:none;scroll-snap-align:start}

/* ─── the one line under the box (phones) ─── */
.c-status{display:none}
.c-status-bal,.c-status-why{
  min-height:24px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;
}
.c-status-bal{font-weight:600;color:var(--ink-soft)}
.c-status.is-low .c-status-bal{color:var(--warn)}
.c-status-why{margin-inline-start:6px;text-decoration:underline;text-underline-offset:2px;color:var(--ink)}
.c-status-bal:focus-visible,.c-status-why:focus-visible{outline:2px solid var(--accent-b);outline-offset:2px;border-radius:6px}
.c-status [hidden]{display:none}

@media (max-width:640px){
  .c-status:not([hidden]){
    display:block;margin:4px 2px 0;font-size:12px;line-height:24px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* the line (and the top bar's ring) say the balance: the three bars leave the phone composer; a notice that the model
     no longer fits stays — it is one of the queue's */
  .usage-slot .usage-live--compact{display:none}
  /* the tools and the model chip: one row that scrolls sideways rather than wrapping under the box */
  .c-bar .c-left{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .c-bar .c-left::-webkit-scrollbar{display:none}
  .c-bar .c-left > *{flex:none;scroll-snap-align:start}
  .attach-tray.has-docs .tray-scroll{scroll-snap-type:x mandatory}
}

/* ─── the keyboard: #app spans only what the visual viewport shows, so the composer sits on the keyboard ─── */
html.kb-open,html.kb-open body{overflow:hidden;overscroll-behavior:none}
html.kb-open #app{top:var(--vv-top,0px);bottom:var(--kb-inset,0px);height:auto}
/* the keyboard covers the home indicator: its safe-area inset would only float the composer off the keys */
html.kb-open .composer-wrap{padding-bottom:8px}
html.kb-open .composer-wrap .disclaimer{display:none}

/* ─── K3: the balance ring in the top bar ─── */
.usage-pill .bal-ring{flex:none;display:block}
.bal-ring-track,.bal-ring-fill{fill:none;stroke-width:2.6}
.bal-ring-track{stroke:color-mix(in srgb,var(--ink) 14%,transparent)}
.bal-ring-fill{stroke:var(--ok);stroke-linecap:round;transition:stroke-dasharray .6s var(--ease,ease)}
.usage-pill.warn .bal-ring-fill{stroke:var(--warn)}
.usage-pill.over .bal-ring-fill{stroke:var(--danger)}
@media (max-width:820px){.usage-pill.balance-pill{padding:0 7px}}

/* ─── B1: the case chip pulses once when the file really changed ─── */
.case-chip.cf-pulse,.tb-case.cf-pulse{animation:cf-pulse 1.1s var(--ease,ease-out) 1}
@keyframes cf-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-b) 55%,transparent)}
  60%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent-b) 0%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){.case-chip.cf-pulse,.tb-case.cf-pulse,.bal-ring-fill{animation:none;transition:none}}
html.reduce-motion .case-chip.cf-pulse,html.reduce-motion .tb-case.cf-pulse,html.reduce-motion .bal-ring-fill{animation:none;transition:none}

/* N20 (P2): the phone row of tools scrolls sideways, and a scroller clips what it paints outside itself — the «+»'s
   focus ring came out cut. The row keeps 4px of room on every side for rings, taken back by its margin. */
@media (max-width:640px){
  .c-bar .c-left{padding:4px;margin:-4px}
}