/* =============================================================================
   MUSE · Layout — auth screen, app shell, sidebar, conversation, composer
   ========================================================================== */

/* ── Ambient canvas: a faint warm aura, kept very subtle for a light scheme ─ */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50vw 50vh at 100% 110%, rgba(122,92,240,0.06), transparent 70%);
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(52vw 52vh at 100% 110%, rgba(155,125,255,0.10), transparent 72%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH (US-001, US-002) — register / login / email-validation
   ═══════════════════════════════════════════════════════════════════════════ */
.auth {
  position: relative; z-index: 1;
  height: 100%; display: grid; place-items: center; padding: var(--s-5);
}
.auth__card {
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 40px 36px 30px;
}
.auth__brand { display: flex; align-items: center; margin-bottom: 26px; color: var(--ink); }
.auth__logo { display: block; height: 27px; width: auto; }
.auth__title { font: 600 25px/1.15 var(--font-display); margin-bottom: 6px; letter-spacing: -0.01em; }
.auth__sub { color: var(--ink-mid); font-size: 13.5px; margin-bottom: 24px; }
.auth__form { display: flex; flex-direction: column; gap: 16px; }
.auth__row { display: flex; flex-direction: column; }
.auth__error {
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--danger-soft); color: var(--danger-ink);
  border-radius: var(--r-md); padding: 11px 13px; font-size: 12.5px; line-height: 1.45;
}
.auth__error .icon { color: var(--danger); width: 16px; height: 16px; margin-top: 1px; }
.auth__foot { margin-top: 22px; text-align: center; font-size: 13px; color: var(--ink-mid); }
.auth__link { color: var(--accent); font-weight: 500; cursor: pointer; }
.auth__link:hover { text-decoration: underline; }

/* Email-sent confirmation state */
.auth__sent { text-align: center; }
.auth__sent-ico { width: 60px; height: 60px; border-radius: 18px; background: var(--accent-soft);
  display: grid; place-items: center; margin: 4px auto 20px; }
.auth__sent-ico .icon { width: 28px; height: 28px; color: var(--accent); }
.auth__sent code {
  display: inline-block; margin-top: 4px; font-family: var(--font-mono); font-size: 12px;
  background: var(--sunken); color: var(--ink-2); padding: 3px 8px; border-radius: 7px;
}
.auth__hint { font-size: 11.5px; color: var(--ink-low); margin-top: 18px; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════════════════════════════════════════ */
.app {
  position: relative; z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  /* Pin the single row to the viewport (minmax(0,…) clamps it) so the sidebar
     and main can't grow past it — that's what lets their inner scroll regions
     (.sidebar__scroll, .thread) actually overflow + scroll. */
  grid-template-rows: minmax(0, 1fr);
  transition: grid-template-columns var(--dur-base) var(--ease-out);
}
.app[data-sidebar="closed"] { grid-template-columns: 0 1fr; }

/* ── SIDEBAR (US-003, US-004, US-017, US-018) ───────────────────────────── */
.sidebar {
  position: relative;
  background: var(--canvas-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  transition: opacity var(--dur-base) var(--ease-out), border-right-color var(--dur-base) var(--ease-out);
}
/* collapse: the grid column animates to 0 (on .app) while the panel fades out */
.app[data-sidebar="closed"] .sidebar { border-right-color: transparent; opacity: 0; }

/* ── Compact icon rail (data-sidebar="mini") — the minimized sidebar.
   Labels + lists hide, icons center; every control keeps a title + aria-label
   so hovering shows its name. This is the industry baseline collapse. */
.app[data-sidebar="mini"] { grid-template-columns: var(--sidebar-mini-w) 1fr; }
/* z-index lifts the whole rail into its own stacking context ABOVE .main, so the
   hover pills (which overflow into the content area) paint over it. Without this
   the pill's z-index is trapped: .sidebar + .main are z:auto siblings, so .main
   paints after the entire rail regardless of the pill's own z-index. Stays below
   flyouts (60) / modals (80) so those still cover the rail when open. */
.app[data-sidebar="mini"] .sidebar { opacity: 1; border-right-color: var(--line); position: relative; z-index: 10; }
.app[data-sidebar="mini"] .brand-logo,
.app[data-sidebar="mini"] .nav-entry__label,
.app[data-sidebar="mini"] .nav-entry__count,
.app[data-sidebar="mini"] .nav-entry__chev,
.app[data-sidebar="mini"] .acct__id,
.app[data-sidebar="mini"] .acct__chev,
.app[data-sidebar="mini"] .btn__label { display: none; }
/* Collapsed rail keeps the EXPANDED row structure: the icons stay in their gutter
   (they barely move), only the labels + trailing bits hide and the rail narrows to
   fit. Nothing re-flows into a centered column, so no icon jumps to the middle. The
   rail width is tuned so the icon (at its expanded left) lands visually centered. */
.app[data-sidebar="mini"] .sidebar__head { justify-content: center; padding: 16px 0 10px; }
.app[data-sidebar="mini"] .sidebar__new { margin: 4px 0 8px; display: flex; justify-content: center; }
.app[data-sidebar="mini"] .sidebar__new .btn { width: 38px; height: 38px; padding: 0; min-width: 0; }
.app[data-sidebar="mini"] .acct { justify-content: center; width: 100%; padding: 8px 0; }
/* Compact rail = ICON ONLY on desktop; the label is revealed on hover / focus as
   a floating pill to the right (we deliberately rely on hover here). Mobile never
   uses this rail: its drawer keeps full labels. Every control still carries a
   title + aria-label, so the name stays available to assistive tech regardless. */
.app[data-sidebar="mini"] .sidebar,
.app[data-sidebar="mini"] .sidebar__nav,
.app[data-sidebar="mini"] .sidebar__scroll { overflow: visible; }   /* let the pill escape the rail */
.app[data-sidebar="mini"] [data-mini] { position: relative; }
.app[data-sidebar="mini"] [data-mini]::after {
  content: attr(data-mini);
  position: absolute; left: calc(100% - 4px); top: 50%;
  transform: translateY(-50%) translateX(-6px); transform-origin: left center;
  z-index: 1; pointer-events: none; white-space: nowrap;   /* within the rail's own context, which already sits above .main */
  padding: 6px 11px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--sh-md);
  font: 500 12.5px/1 var(--font-ui); letter-spacing: .01em;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.app[data-sidebar="mini"] [data-mini]:hover::after,
.app[data-sidebar="mini"] [data-mini]:focus-visible::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
/* the compact rail surfaces projects as folder icons; conversations and sections
   stay in the full sidebar (expand to browse them). */
.app[data-sidebar="mini"] .sidebar__scroll { padding: 4px 8px; }
.app[data-sidebar="mini"] .rail-section,
.app[data-sidebar="mini"] .rail-empty,
.app[data-sidebar="mini"] .rail-newproj,
.app[data-sidebar="mini"] .rail-swipe { display: none; }
.app[data-sidebar="mini"] .rail-row[data-kind="project"] .rail-row__text,
.app[data-sidebar="mini"] .rail-row[data-kind="project"] .rail-row__more { display: none; }

.sidebar__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 12px 18px;
}
.brand { display: flex; align-items: center; color: var(--ink); cursor: pointer; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.brand-logo { display: block; height: 28px; width: auto; overflow: visible; }   /* tightened to align with the iconography */
.brand-logo .brand-mark { will-change: filter; }

.sidebar__new { margin: 4px 14px 6px; }

/* Artifacts entry — opens the second-level menu (US-017) */
.sidebar__nav { padding: 2px 8px 2px; }
.nav-entry {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 8px 9px 11px; border-radius: var(--r-sm); color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-entry:hover { background: var(--hover); }
.nav-entry.is-open { background: var(--surface); box-shadow: var(--sh-xs), inset 0 0 0 1px var(--line-soft); }
.nav-entry__ico { color: var(--ink-low); display: grid; place-items: center; }
.nav-entry.is-open .nav-entry__ico { color: var(--accent); }
.nav-entry__label { flex: 1; text-align: left; font: 500 13px/1 var(--font-ui); color: var(--ink); }
.nav-entry__count { font: 500 11px/1 var(--font-mono); color: var(--ink-low); background: var(--sunken); padding: 2px 7px; border-radius: var(--r-pill); }
.nav-entry__chev { color: var(--ink-low); transition: transform var(--dur-fast) var(--ease-out); }
.nav-entry.is-open .nav-entry__chev { color: var(--accent); transform: translateX(1px); }

.sidebar__scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 8px 4px;
  display: flex; flex-direction: column; gap: 4px;
}

/* section header inside the rail */
.rail-section { padding: 14px 10px 4px; display: flex; align-items: center; justify-content: space-between; }
.rail-section__lead { display: flex; align-items: center; gap: 7px; }
.rail-section__ico { color: var(--ink-low); display: grid; place-items: center; }
.rail-section__ico .icon { width: 14px; height: 14px; }
.rail-section__title { font: 600 11px/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-low); }
.rail-section__count { font: 500 11px/1 var(--font-mono); color: var(--ink-low); }

/* "New project" action under the Projects section */
.rail-newproj { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; margin: 2px 0 8px;
  background: none; border: 0; cursor: pointer; border-radius: 10px; text-align: left;
  font: 500 12.5px/1 var(--font-ui); color: var(--ink-low);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rail-newproj:hover { background: var(--hover); color: var(--ink-2); }
.rail-newproj .icon { width: 14px; height: 14px; }

/* generic rail row (chat or artifact) */
.rail-row {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 8px 9px 11px;
  border-radius: var(--r-sm);
  text-align: left; color: var(--ink-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.rail-row:hover { background: var(--hover); }
.rail-row.is-active { background: var(--surface); box-shadow: var(--sh-xs), inset 0 0 0 1px var(--line-soft); }
.rail-row__ico { color: var(--ink-low); display: grid; place-items: center; }
.rail-row.is-active .rail-row__ico { color: var(--accent); }
.rail-row__text { flex: 1; min-width: 0; }
.rail-row__title {
  font: 500 13px/1.3 var(--font-ui); color: var(--ink);
  display: flex; align-items: center; gap: 7px;   /* status dot rides just right of the title */
}
.rail-row__titletext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row__meta { font: 400 11px/1.3 var(--font-ui); color: var(--ink-low);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* line the meta up under the title text, past the leading status dot (8px + 7px gap) */
.rail-row.has-status .rail-row__meta { padding-left: 15px; }
.rail-row__type { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }

/* meatball menu trigger (US-005) — appears on hover/active */
.rail-row__more {
  opacity: 0; flex: none;
  width: 26px; height: 26px; border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--ink-low);
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rail-row:hover .rail-row__more,
.rail-row.is-active .rail-row__more { opacity: 1; }
.rail-row__more:hover { background: var(--hover-strong); color: var(--ink); }

/* Live status dot (Claude-style, three states) — idle reads as a quiet grey
   outline; a chat generating now reads yellow (pulsing, "writing"); one that just
   finished reads green for a short window. It rides inline, just right of the
   conversation title. */
.rail-row__status {
  flex: none; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* idle — hollow grey ring (a resting "slot", not a live signal) */
.rail-row__status--idle { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
/* writing now — solid yellow, pulsing */
.rail-row__status--working {
  background: var(--warn);
  animation: railStatusPulse 1.8s var(--ease-out) infinite;
}
.rail-row__status--done { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
@keyframes railStatusPulse {
  0%   { box-shadow: 0 0 0 0 var(--warn-soft); }
  70%  { box-shadow: 0 0 0 6px rgba(201, 132, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 132, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rail-row__status--working { animation: none; box-shadow: 0 0 0 3px var(--warn-soft); }
}

/* Swipe-to-delete wrapper (conversation rows). Inert on desktop: the wrapper is
   layout-transparent and the delete backdrop is hidden — the meatball menu owns
   delete there. Phones turn it into a real swipe container (see mobile.css). */
.rail-swipe { display: contents; }
.rail-swipe__del { display: none; }

.rail-empty { padding: 18px 12px; color: var(--ink-low); font-size: 12.5px; line-height: 1.5; text-align: center; }

/* sidebar footer — avatar + flyout trigger (US-018) */
.sidebar__foot { padding: 10px 12px; border-top: 1px solid var(--line); }
.acct {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 8px 10px; border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.acct:hover { background: var(--hover); }
.acct__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--muse-grad); color: #fff;
  display: grid; place-items: center; font: 600 13px/1 var(--font-ui);
  box-shadow: var(--sh-xs);
}
.acct__id { flex: 1; min-width: 0; text-align: left; }
.acct__name { font: 500 13px/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__mail { font: 400 11px/1.2 var(--font-ui); color: var(--ink-low); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__mail:empty { display: none; }
.acct__chev { color: var(--ink-low); }

/* ── MAIN — conversation column ─────────────────────────────────────────── */
.main { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); }

.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; border-bottom: 1px solid var(--line);
  background: var(--glass); backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.topbar__name { font: 600 15px/1.2 var(--font-display); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Renaming a conversation ───────────────────────────────────────────────
   In place, on the row. The field takes the title's slot and nothing else on
   the row moves, so the name you are changing never leaves the list you are
   reading. */
.rename__field { flex: 1; min-width: 0; box-sizing: border-box; border: 0; margin: -3px 0;
  padding: 3px 6px; border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink);
  font: inherit; box-shadow: inset 0 0 0 1px var(--accent); }
.rename__field:focus { outline: none; }

.topbar__meta { font: 400 11.5px/1.2 var(--font-ui); color: var(--ink-low); display: flex; align-items: center; gap: 6px; }
.topbar__spacer { flex: 1; }
/* Files button — the conversation's artifacts popover (Claude-style) */
.topbar__files { flex: none; gap: 7px; }
.topbar__files .icon { color: var(--ink-low); }
.topbar__files-n { font: 600 11px/1 var(--font-mono); color: var(--ink-mid);
  background: var(--sunken); padding: 2px 6px; border-radius: var(--r-pill); }

/* Sidebar reopen tab — visible only when the rail is collapsed */
.reopen { display: none; }
.app[data-sidebar="closed"] .reopen { display: inline-grid; }

/* Minimal PRISM mark — appears in the top bar only when the sidebar is collapsed */
.brand-mini { display: none; width: 32px; height: 32px; flex: none; place-items: center;
  border-radius: var(--r-sm); cursor: pointer; color: #E74141; background: transparent;
  transition: background var(--dur-fast) var(--ease-out); }
.app[data-sidebar="closed"] .brand-mini { display: grid; }
.brand-mini__svg { height: 22px; width: auto; display: block; }
.brand-mini:hover { background: var(--hover); }
.brand-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Collapse control: a plain sidebar icon when open; in the mini rail it wears the
   Muse mark and swaps to the open icon on hover, click to reopen (ChatGPT-style). */
#btnCollapse .collapse__ico { display: grid; place-items: center; }
#btnCollapse .collapse__brand { display: none; place-items: center; color: #E74141; }
.collapse__brandsvg { height: 21px; width: auto; display: block; }
/* In the mini rail the wordmark container is gone entirely, and the control must
   not shrink, so the Muse mark sits centered at full size. */
.app[data-sidebar="mini"] .sidebar__head .brand { display: none; }
.app[data-sidebar="mini"] #btnCollapse { flex: none; }
.app[data-sidebar="mini"] #btnCollapse .collapse__ico { display: none; }
.app[data-sidebar="mini"] #btnCollapse .collapse__brand { display: grid; }
.app[data-sidebar="mini"] #btnCollapse:hover .collapse__ico,
.app[data-sidebar="mini"] #btnCollapse:focus-visible .collapse__ico { display: grid; }
.app[data-sidebar="mini"] #btnCollapse:hover .collapse__brand,
.app[data-sidebar="mini"] #btnCollapse:focus-visible .collapse__brand { display: none; }

/* ── THREAD ─────────────────────────────────────────────────────────────── */
.thread {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 28px 24px 8px;
  scroll-behavior: smooth;
  /* subtle paper-grain texture so the chat reads distinct from other surfaces */
  background-image: radial-gradient(circle, var(--line-soft) 0.6px, transparent 0.7px);
  background-size: 22px 22px; background-position: -11px -11px;
}
/* …but keep home + the overview dashboard clean (texture is for the chat only) */
.app[data-home="true"] .thread,
.app[data-view="gallery"] .thread { background-image: none; }
/* Chat view: extra breathing room below the last message so it isn't glued to the
   composer, so it never feels glued. Scoped to chat/home so the Overview and
   Files pages keep their tight bottom. */
.app:not([data-view="gallery"]) .thread { padding-bottom: 96px; }
.thread__inner {
  max-width: var(--thread-max); margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
}

/* Conversation empty / welcome state */
.welcome { max-width: 600px; margin: max(6vh, 40px) auto 0; text-align: center; }
.welcome__mark { width: 64px; height: 64px; border-radius: 20px; background: var(--accent-grad);
  display: grid; place-items: center; margin: 0 auto 22px; box-shadow: var(--sh-accent); }
.welcome__mark .icon { color: #fff; width: 32px; height: 32px; }
.welcome__title { font: 600 30px/1.1 var(--font-display); letter-spacing: -0.015em; margin-bottom: 12px; }
.welcome__sub { color: var(--ink-mid); font-size: 15px; line-height: 1.55; }
.welcome__seeds { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.seed {
  padding: 11px 15px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--sh-xs), inset 0 0 0 1px var(--line-soft);
  font-size: 13px; color: var(--ink-2); text-align: left; max-width: 270px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.seed:hover { transform: translateY(-2px); box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); }
.seed b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* ── COMPOSER (US-007, US-016) ──────────────────────────────────────────── */
.composer-wrap { flex: none; padding: 10px 24px 22px; }
.composer {
  max-width: var(--thread-max); margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md), inset 0 0 0 1px var(--line-soft);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* focus: no glow, no accent — the box itself shows the active area */
.composer.is-dragover { box-shadow: var(--sh-lg), inset 0 0 0 2px var(--accent); transform: scale(1.006); }

/* uploaded-file chips live above the field (US-016) */
.composer__attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 0; }
.composer__attachments:empty { display: none; }

/* actions sit BELOW the editable text (standard pattern): attach left, send right */
.composer__main { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; }
.composer__input {
  width: 100%; min-height: 28px; max-height: 200px; overflow-y: auto;
  padding: 0 2px; font-size: 15px; line-height: 1.55; color: var(--ink);
  resize: none; border: 0; background: transparent;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;   /* subtle, not white */
}
.composer__input::-webkit-scrollbar { width: 9px; }
.composer__input::-webkit-scrollbar-track { background: transparent; }
.composer__input::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px;
  border: 3px solid transparent; background-clip: padding-box; }
.composer__input::placeholder { color: var(--ink-low); }
/* the composer box's focus glow is the affordance — no accent outline on the field itself */
.composer__input:focus, .composer__input:focus-visible { outline: none; }
.composer__tools { display: flex; align-items: center; justify-content: space-between; padding-top: 2px; }
.composer__send {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-grad); color: #fff; box-shadow: var(--sh-accent);
  transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
}
.composer__send:hover { transform: scale(1.06); }
.composer__send:active { transform: scale(0.92); }
.composer__send:disabled { opacity: 0.4; box-shadow: none; background: var(--ink-faint); cursor: default; transform: none; }
/* Stop state (interrupt a running turn): neutral, not the coral Send; a square glyph.
   The BUTTON keeps Send's footprint (same 38px circle, so nothing jumps); what
   reads louder is the square inside (bigger glyph) plus a soft glow that breathes
   on the rim while a turn is running. Neutral ink, never per-state colours. */
.composer__send--stop { position: relative; overflow: visible;
  background: var(--surface-2); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.composer__send--stop:hover { background: var(--hover-strong); transform: scale(1.06); }
.composer__send--stop .icon { width: 24px; height: 24px; position: relative; z-index: 1; }
/* A small light that travels around the rim: a short bright arc on a conic
   gradient, masked to a thin ring, rotating. Continuous, no pulsing. It sits ON
   the rim (above the fill, below the glyph) so it actually reads; the arc has a
   soft head and tail. Uses the button's own ink, so it works on light and dark. */
.composer__send--stop::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, currentColor 10%, transparent) 30deg,
    color-mix(in srgb, currentColor 85%, transparent) 60deg,
    color-mix(in srgb, currentColor 10%, transparent) 90deg,
    transparent 120deg 360deg);
  /* keep only a ~2px ring: punch out the middle */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: stopOrbit 2.4s linear infinite;
}
/* a faint halo follows the same light, just outside the rim */
.composer__send--stop::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, currentColor 22%, transparent) 60deg,
    transparent 120deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 4px), transparent 100%);
          mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 4px), transparent 100%);
  filter: blur(1.5px);
  animation: stopOrbit 2.4s linear infinite;
}
@keyframes stopOrbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .composer__send--stop::before, .composer__send--stop::after { animation: none; opacity: 0; }
}

/* ── Waiting its turn ──────────────────────────────────────────────────────
   A message you sent while Muse was still answering the last one. It is not
   disabled: disabled says "you cannot use this", and a message drawn that way
   gets read as failed and sent again. It is waiting, so it keeps its shape,
   its side and its colour, and simply carries less weight until its turn. */
.msg.is-waiting .msg__text, .msg.is-waiting .filechip { opacity: .62; filter: saturate(.85);
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring); }

/* one line of state, and the one thing you can do about it */
.waitnote { display: flex; align-items: center; gap: 7px; margin: 6px 2px 0;
  font: 400 11.5px/1.3 var(--font-ui); color: var(--ink-low);
  animation: waitIn 260ms var(--ease-out); }
@keyframes waitIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.waitnote__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint);
  animation: waitPulse 1.8s var(--ease-in-out) infinite; }
@keyframes waitPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.waitnote__x { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 0;
  border-radius: 6px; cursor: pointer; background: transparent; color: var(--ink-faint);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.waitnote__x:hover { background: var(--hover); color: var(--ink-2); }
.waitnote__x .icon { width: 12px; height: 12px; }

/* Its turn comes: it comes back to full weight and the state line goes. This
   half second is where the queue explains itself without a word. */
.msg.is-waking .msg__text { opacity: 1; filter: none; transform: scale(1.012); }
.msg.is-waking .waitnote { opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
/* taken back: it leaves the way it came in */
.msg.is-withdrawing { animation: withdraw 200ms var(--ease-out) forwards; }
@keyframes withdraw { to { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) {
  .waitnote, .waitnote__dot, .msg.is-withdrawing { animation: none; }
  .msg.is-waking .msg__text { transform: none; }
}

/* ── A ping when it is ready ────────────────────────────────────────────────
   Rises above the composer once a turn has run long, and offers, once, to
   tell you when it is done. Same width as the thread it belongs to. --r-md is
   the radius for a component this size: a pill would read as a button. */
.notifybar { position: relative; max-width: var(--thread-max); margin: 0 auto 10px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px 11px 15px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--sh-md);
  will-change: transform, opacity; }
.notifybar[hidden] { display: none; }
.notifybar__ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--ink-mid); }
.notifybar__ico svg { width: 17px; height: 17px; }
.notifybar__text { flex: 1; min-width: 0; font: 500 13px/1.4 var(--font-ui); color: var(--ink-2); }
.notifybar__cta { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-md); border: 0;
  background: var(--accent); color: var(--on-accent); font: 600 12.5px/1 var(--font-ui);
  transition: filter var(--dur-fast) var(--ease-out); }
.notifybar__cta:hover { filter: brightness(1.06); }
.notifybar__cta svg { width: 14px; height: 14px; }
.notifybar__x { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent;
  color: var(--ink-low); cursor: pointer; display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.notifybar__x:hover { background: var(--hover); color: var(--ink); }
.notifybar__x svg { width: 15px; height: 15px; }
/* accepted: the icon turns green and the button is gone; the bar leaves on its own */
.notifybar.is-done .notifybar__ico { color: var(--ok); }
/* entrance and exit: a short slide up, and a shorter drop out */
.notifybar { opacity: 0; transform: translateY(14px); transition:
  opacity .28s var(--ease-out), transform .32s cubic-bezier(.22,1,.36,1); }
.notifybar.is-in { opacity: 1; transform: none; }
.notifybar.is-out { opacity: 0; transform: translateY(10px); transition:
  opacity .18s var(--ease-in, ease-in), transform .2s var(--ease-in, ease-in); }
@media (prefers-reduced-motion: reduce) {
  .notifybar, .notifybar.is-out { transition: opacity .15s linear; transform: none !important; }
}
.composer__hint { max-width: var(--thread-max); margin: 8px auto 0; text-align: center;
  font-size: 11px; color: var(--ink-low); }
.composer__hint kbd { font-family: var(--font-mono); background: var(--sunken); padding: 1px 5px; border-radius: 5px; font-size: 10.5px; }

/* drop overlay covering the thread while dragging files */
.dropzone {
  position: absolute; inset: 0; z-index: 30;
  display: none; place-items: center;
  background: rgba(246,244,239,0.78); backdrop-filter: blur(3px);
}
.main.is-dragover .dropzone { display: grid; }
.dropzone__card {
  padding: 28px 40px; border-radius: var(--r-lg);
  border: 2px dashed var(--accent); background: var(--surface);
  text-align: center; box-shadow: var(--sh-lg);
}
.dropzone__card .icon { width: 34px; height: 34px; color: var(--accent); margin: 0 auto 10px; }
.dropzone__card b { display: block; font: 600 16px/1.2 var(--font-display); margin-bottom: 4px; }
.dropzone__card span { font-size: 12.5px; color: var(--ink-mid); }

/* ── Responsive: a phone gets an overlay drawer (medium widths keep the
   in-flow compact rail, handled by data-sidebar="mini") ─────────────────── */
@media (max-width: 700px) {
  :root { --sidebar-w: 84vw; }
  /* Sidebar is a fixed overlay here (out of grid flow), so the grid is a single
     column — otherwise the only in-flow item (main) lands in a 0px track. */
  .app, .app[data-sidebar="closed"], .app[data-sidebar="open"], .app[data-sidebar="mini"] { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: var(--z-flyout);
    box-shadow: var(--sh-lg);
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
  }
  /* the drawer always shows full labels (never the mini icon rail) */
  .app[data-sidebar="open"] .sidebar { transform: translateX(0); opacity: 1; }
  .app[data-sidebar="open"] .brand-logo, .app[data-sidebar="open"] .nav-entry__label,
  .app[data-sidebar="open"] .nav-entry__chev, .app[data-sidebar="open"] .sidebar__scroll,
  .app[data-sidebar="open"] .acct__id, .app[data-sidebar="open"] .acct__chev,
  .app[data-sidebar="open"] .btn__label { display: revert; }
  .app[data-sidebar="open"]::after {
    content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: 45;
  }
}