/* Tray on the iPhone app, round 3 (docs/next-project/03-UI-FEEDBACK.md):
   UI-15 message actions only on tap, UI-16 a ChatGPT-style chat header,
   UI-21 the start-chat page. Loaded after mobile.css. Refinements of the
   shared components; the desktop keeps its layout. */

/* Phone-only controls stay out of the desktop. */
:root .thread-top .thread-new-chat, :root .thread-settings .thread-pin-chat { display: none; }

/* ==== UI-21 · Start page: a chat holding only the agent's greeting ====
   The greeting is the headline, centred between the header and the message
   box; its suggestions (links to /#/ask/…) are quiet chips. Ends the moment
   the person sends (the :has() guards cover the optimistic message). */
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-scroll { display: flex; flex-direction: column; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-msgs {
  flex: 1 0 auto; justify-content: center; align-items: center; gap: 14px; padding-bottom: 10vh; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-msgs > [data-timeline-message] { width: 100%; max-width: 600px; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent { justify-content: center; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent :is(.msg-avatar, .who, .message-tools, .msg-actions) { display: none; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .msg-body { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; max-width: 100%; text-align: center; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble {
  background: transparent; border: 0; box-shadow: none; padding: 0; max-width: 34ch; margin: 0 auto;
  color: var(--ink-2); font-size: 16px; line-height: 1.5; font-weight: 400; text-align: center; text-wrap: balance; }
/* The first message is the headline. */
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-msgs > [data-timeline-message]:first-of-type .bubble {
  color: var(--ink); font-size: 26px; line-height: 1.28; font-weight: 600; letter-spacing: -0.022em; max-width: 24ch; }
.thread.is-start[data-start-length="long"]:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-msgs > [data-timeline-message]:first-of-type .bubble {
  font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -0.012em; max-width: 32ch; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble p { margin: 0 0 .5em; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble > :last-child { margin-bottom: 0; }
/* Suggestions: a list of /#/ask/ links becomes a row of chips. */
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble :is(ul, ol):has(a[href^="/#/ask/"]) {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; padding: 0; max-width: 520px; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble li:has(> a[href^="/#/ask/"]) { margin: 0; padding: 0; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble li:has(> a[href^="/#/ask/"])::marker { content: none; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble a[href^="/#/ask/"],
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .new-agent-starters .btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 22px;
  background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-decoration: none; text-align: left;
  transition: background-color .12s ease, border-color .12s ease; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble a[href^="/#/ask/"]:hover,
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .new-agent-starters .btn:hover { background: var(--hover); border-color: var(--line-3); }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .new-agent-starters { justify-content: center; padding: 6px 0 0; max-width: 560px; }
.thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .greeting-reveal { animation-duration: 320ms; }

/* ==== UI-30 · The floating agent (phone and desktop, Muse) ====
   A large avatar floats at the top centre with the agent's name in a pill
   just under it; tapping either opens the agent panel. While the agent
   works, the status pill (UI-11) sits right under the name. */
.thread { --thread-top-h: 92px; }
:root .thread-top { align-items: flex-start; padding-top: 14px; }
.thread-top .thread-agent-float { top: 6px; transform: translateX(-50%); }
.thread-top .thread-agent-btn {
  flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; height: auto; max-width: 100%; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-theme="light"] .thread-top .thread-agent-btn { box-shadow: none; }
.thread-top .thread-agent-btn:hover { background: transparent; }
.thread-top .thread-agent-btn:hover .taf-name { background: var(--raise); }
.thread-top .thread-agent-btn:active { opacity: .75; }
.thread-top .taf-avatar { width: 52px; height: 52px; box-shadow: 0 2px 14px rgba(0, 0, 0, .28); }
.thread-top .taf-name {
  position: relative; z-index: 1; margin-top: -9px; max-width: 100%; padding: 3px 11px; border: 1px solid var(--line-2); border-radius: 999px;
  background: color-mix(in srgb, var(--panel-2) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); letter-spacing: 0; }
.thread-top .thread-status { top: calc(100% + 6px); }
.thread-top .thread-status .typing-pill { height: 28px; font-size: 13px; }
.thread-top:has(.thread-status:not([hidden])) ~ .chat-scroll > .chat-msgs { padding-top: calc(var(--thread-top-h) + 34px); }
@container thread (max-width: 560px) { .thread-top .thread-agent-btn { height: auto; } .thread-top .taf-avatar { width: 52px; height: 52px; } }

/* ==== UI-30 · Messages (phone and desktop): the person's in brand colour,
   the agent's in a quiet gray card, both in large type ==== */
:root { --bubble-me: #41509d; --bubble-me-ink: #ffffff; --bubble-agent: #1c1c1c; }
:root[data-theme="light"] { --bubble-agent: #f2f2f2; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bubble-agent: #f2f2f2; } }
#chat-msgs .msg.user .bubble { background: var(--bubble-me); color: var(--bubble-me-ink); border: 0; border-radius: 22px; }
#chat-msgs .msg.user .bubble :is(a, code) { color: inherit; }
#chat-msgs .msg.agent:not(.progress) .bubble { background: var(--bubble-agent); border: 0; border-radius: 22px; padding: 13px 17px; box-shadow: none; }
#chat-msgs .msg.agent.progress .bubble { background: transparent; padding: 0; color: var(--ink-2); }

/* ==== Phones ==== */
@media (max-width: 600px) {
  /* -- UI-21 on a phone: a little smaller, still the headline -- */
  .thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-msgs { padding: 0 24px 6vh; }
  .thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-msgs > [data-timeline-message]:first-of-type .bubble { font-size: 23px; }
  .thread.is-start[data-start-length="long"]:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .chat-msgs > [data-timeline-message]:first-of-type .bubble { font-size: 19px; }
  .thread.is-start:not(:has(.msg.user, .pending-turn, #pending-msg, [data-optimistic-send])) .msg.agent .bubble { font-size: 16px; }

  /* -- UI-16 · The chat header, like ChatGPT's --
     Left: the menu (the floating topbar). Middle: the agent's avatar with its
     name underneath, floating; tapping it opens the agent panel. Right: new
     chat and ⋯ in one capsule; ⋯ holds Rename, Pin chat, Pin agent, Agent
     settings and Delete. No separate panel button, no page Pin. */
  [data-page="chat"] .thread { --thread-top-h: 112px; position: relative; }
  [data-page="chat"] .thread-top {
    height: var(--thread-top-h); min-height: var(--thread-top-h); padding: 6px 10px 0 64px; justify-content: flex-end; align-items: flex-start; gap: 0;
    background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 58%, color-mix(in srgb, var(--bg) 0%, transparent) 100%); }
  [data-page="chat"] .thread-top .thread-agent-float { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 228px); }
  [data-page="chat"] .thread-top .taf-avatar { width: 64px; height: 64px; }
  [data-page="chat"] .thread-top .taf-name { font-size: 14px; padding: 4px 12px; }
  [data-page="chat"] .thread-top:has(.thread-status:not([hidden])) ~ .chat-scroll > .chat-msgs { padding-top: calc(var(--thread-top-h) + 30px); }
  [data-page="chat"] .thread-top .thread-panel-toggle { display: none !important; }
  [data-page="chat"] > .main > .topbar .btn { display: none !important; } /* the page Pin moved into ⋯ */
  /* New chat + ⋯: one capsule, the same glass as the menu button. */
  [data-page="chat"] .thread-top :is(.thread-new-chat, .thread-settings > summary) {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0;
    border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink-1);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; }
  [data-page="chat"] .thread-top .thread-new-chat { border-radius: 22px 0 0 22px; border-right: 0; padding-left: 4px; }
  [data-page="chat"] .thread-top .thread-settings > summary { border-radius: 0 22px 22px 0; border-left: 0; padding-right: 4px; }
  [data-page="chat"] .thread-top :is(.thread-new-chat, .thread-settings > summary) svg { width: 19px; height: 19px; }
  [data-page="chat"] .thread-top :is(.thread-new-chat, .thread-settings > summary):active { background: var(--hover); }
  [data-page="chat"] .thread-top .thread-settings[open] > summary { border-color: var(--line); background: var(--hover); }
  /* ⋯: an iOS-style menu under the capsule. */
  [data-page="chat"] .thread-top .thread-settings { position: static; }
  [data-page="chat"] .thread-top .thread-settings-body {
    position: absolute; top: 54px; right: 10px; left: auto; width: min(250px, calc(100vw - 20px)); margin: 0; padding: 6px;
    border: 1px solid var(--line-2); border-radius: 14px; background: var(--menu, var(--panel)); box-shadow: var(--shadow-pop); z-index: 60; }
  [data-page="chat"] .thread-top .thread-settings-actions { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
  [data-page="chat"] .thread-top .thread-settings-actions > span { display: contents; }
  [data-page="chat"] .thread-top .thread-settings-actions :is(.btn, a.btn) {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; height: 44px; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; box-shadow: none; }
  [data-page="chat"] .thread-top .thread-settings-actions :is(.btn, a.btn):active { background: var(--hover); }
  [data-page="chat"] .thread-top .thread-settings-actions :is(.btn, a.btn) svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
  [data-page="chat"] .thread-top .thread-settings-actions .btn > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  [data-page="chat"] .thread-top .thread-pin-chat { display: flex; order: 2; }
  [data-page="chat"] .thread-top #rename-chat { order: 1; }
  [data-page="chat"] .thread-top #thread-pin-agent { order: 3; }
  [data-page="chat"] .thread-top #thread-agent-settings > a { order: 4; }
  [data-page="chat"] .thread-top .thread-settings-actions .btn[data-new-agent] { display: none; } /* New agent lives in Agents and the sidebar */
  [data-page="chat"] .thread-top #delete-chat { order: 10; margin-top: 6px; position: relative; color: var(--red); }
  [data-page="chat"] .thread-top #delete-chat svg { color: var(--red); }
  [data-page="chat"] .thread-top #delete-chat::before { content: ""; position: absolute; left: 8px; right: 8px; top: -4px; border-top: 1px solid var(--line); }
  [data-page="chat"] .thread-top .thread-new-chat { display: inline-flex; }
}

/* ==== UI-15 / UI-23 · One quiet action row, under answers only ====
   Phones and other touch screens, like the ChatGPT app: each finished answer
   has one quiet row (copy, share, ⋯); the person's own messages and every
   time stamp show their actions only when tapped or long-pressed
   (public/phone-chat.js). The desktop keeps them on hover. */
.message-share { display: none; place-items: center; width: 30px; height: 30px; padding: 6px; border: 0; border-radius: 7px; color: var(--ink-3); background: none; cursor: pointer; }
.message-share svg { width: 17px; height: 17px; }
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  #chat-msgs .msg.user:not(.tools-shown) .message-tools:not(:has(details[open])) { display: none; }
  #chat-msgs .msg.agent .message-tools { opacity: 1; }
  #chat-msgs .msg.user.tools-shown .message-tools { opacity: 1; animation: phone-tools-in 160ms ease-out both; }
  #chat-msgs .msg:not(.tools-shown) .who time { display: none; }
  html.can-share #chat-msgs .msg.agent .message-share { display: grid; }
  #chat-msgs .message-tools { height: 40px; min-height: 40px; margin-top: 4px; gap: 0; }
  #chat-msgs .msg.agent .message-tools { margin-left: 2px; }
  #chat-msgs .message-tools :is(.message-copy, .message-share, .message-menu > summary) { width: 40px; height: 40px; padding: 10px; color: var(--ink-3); border-radius: 10px; }
  #chat-msgs .message-tools :is(.message-copy, .message-share, .message-menu > summary) svg { width: 19px; height: 19px; }
  #chat-msgs .message-tools :is(.message-copy, .message-share, .message-menu > summary):active { background: var(--hover); color: var(--ink); }
}
@keyframes phone-tools-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #chat-msgs .msg.user.tools-shown .message-tools { animation: none; } }

/* ==== UI-23 / UI-24 / UI-28 · The phone chat: bigger, calmer, floating ==== */
@media (max-width: 600px) {
  /* Readable body text (~17 pt) with room between lines; the person's message a soft bubble. */
  #chat-msgs .msg.agent :is(.bubble, .md) { font-size: 17px; line-height: 1.55; }
  #chat-msgs .msg.user .bubble { font-size: 17px; line-height: 1.45; padding: 9px 15px; }
  #chat-msgs { gap: 18px; }
  /* Inline references: small rounded chips at the end of a sentence. */
  #chat-msgs .bubble.md a.cc-cite { height: 22px; line-height: 22px; padding: 0 9px; font-size: 12.5px; vertical-align: 2px; }

  /* The message box floats at the bottom; the conversation scrolls under it and fades out. */
  [data-page="chat"] .thread > .composer-dock {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding-top: 22px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent) 0%, var(--bg) 22px); }
  [data-page="chat"] .thread > .chat-scroll > .chat-msgs { padding-bottom: calc(var(--composer-dock-h, 110px) + 12px); }
  [data-page="chat"] .composer-dock .composer {
    background: color-mix(in srgb, var(--panel-2) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    border-color: var(--line-2); }
  /* ↓ to the latest message, just above the box. */
  .thread > .scroll-latest { bottom: calc(var(--composer-dock-h, 110px) + 4px); }
  /* Bigger type and touch targets in the box (UI-28). */
  .composer .composer-input { font-size: 17px; }
  .composer :is(#thread-model, #composer-model-slot) :is(.model-pill, .model-pick-btn, .composer-model-wrap, .model-loading) { font-size: 15px; }
}
.thread > .scroll-latest {
  position: absolute; left: 50%; bottom: 120px; z-index: 7; transform: translateX(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }
.thread > .scroll-latest[hidden] { display: none; }
.thread > .scroll-latest svg { width: 18px; height: 18px; }
.thread { position: relative; }

/* ==== UI-25 · The start screen (Home on a phone), like Claude's ====
   An empty screen: the agent (tap to pick another) and its greeting in the
   middle, the message box at the bottom in a large rounded card. The
   greeting's words come from the server (#home-greeting, UI-19) or Home's
   own line; the rest of Home stays a tap away in the menu. */
.home-agent-slot:empty { display: none; }
@media (max-width: 600px) {
  [data-page="home"] .home-start-page { padding: calc(env(safe-area-inset-top, 0px) + 60px) 0 0; }
  [data-page="home"] .chat-empty-inner.home-start {
    display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: none; padding: 0 16px;
    min-height: calc(100svh - env(safe-area-inset-top, 0px) - 60px); }
  [data-page="home"] .home-start > :is(#home-suggestions, .home-grid, #home-leverage, .home-links, .hosted-home-pins, .composer-privacy, .chat-privacy) { display: none !important; }
  /* The middle: agent, greeting, its follow-ups. */
  [data-page="home"] .home-agent-slot { margin-top: auto; display: flex; justify-content: center; padding-bottom: 14px; }
  [data-page="home"] .home-agent-slot:empty + .ce-title { margin-top: auto; }
  [data-page="home"] .home-agent-pick { position: relative; flex: none; width: auto; }
  [data-page="home"] .home-agent-pick .agent-pick-btn {
    display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 10px 4px; height: auto; max-width: 100%; padding: 6px 12px;
    border: 0; border-radius: 16px; background: transparent; box-shadow: none; }
  [data-page="home"] .home-agent-pick .agent-pick-btn .em { grid-column: 1 / -1; justify-self: center; }
  [data-page="home"] .home-agent-pick .agent-pick-btn:active { background: var(--hover); }
  [data-page="home"] .home-agent-pick .agent-pick-btn .em { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; }
  [data-page="home"] .home-agent-pick .agent-pick-btn .em > *, [data-page="home"] .home-agent-pick .agent-pick-btn .em :is(svg, img, .agent-identity) { width: 100%; height: 100%; }
  [data-page="home"] .home-agent-pick .agent-pick-btn .nm { font-size: 15px; font-weight: 600; color: var(--ink); }
  [data-page="home"] .home-agent-pick .agent-pick-btn :is(.nm, .caret) { display: inline-flex; position: static; }
  [data-page="home"] .home-agent-pick .agent-pick-btn .caret { color: var(--ink-3); }
  [data-page="home"] .home-agent-pick .agent-pick-btn .caret svg { width: 15px; height: 15px; }
  [data-page="home"] .home-agent-pick .agent-pick-menu { left: 50%; right: auto; top: calc(100% + 4px); bottom: auto; transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); }
  [data-page="home"] .home-start .ce-title { margin: 0 auto; max-width: 18ch; text-align: center; font-size: 26px; line-height: 1.22; font-weight: 600; letter-spacing: -0.024em; text-wrap: balance; }
  [data-page="home"] .home-start #home-greeting:not([hidden]) { margin: 12px auto 0; max-width: 32ch; text-align: center; }
  [data-page="home"] .home-start #home-greeting .home-greeting-text { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
  /* Its follow-ups wrap onto centred lines (a sideways row hid the first one's start). */
  [data-page="home"] .home-start #home-greeting .home-greeting-asks { flex-wrap: wrap; justify-content: center; overflow: visible; margin-top: 16px; }
  [data-page="home"] .home-start #home-greeting .home-greeting-asks > * { margin: 0; max-width: 100%; }
  [data-page="home"] .home-start #home-greeting .home-greeting-ask { display: block; overflow: hidden; text-overflow: ellipsis; line-height: 42px; }
  [data-page="home"] .home-start #home-greeting .home-greeting-ask { min-height: 44px; padding: 0 16px; font-size: 16px; }
  [data-page="home"] .home-start #home-notes:not(:empty) { display: flex; justify-content: center; margin: 0 0 8px; }
  /* With the agent's own greeting (#home-greeting holds its avatar and
     headline, UI-19): the greeting is the middle; the picker is a small pill above the box. */
  [data-page="home"] .home-start.has-greeting #home-greeting:not([hidden]) { margin-top: auto; max-width: 100%; }
  [data-page="home"] .home-start.has-greeting .home-greeting-avatar { width: 64px; height: 64px; margin-bottom: 14px; }
  [data-page="home"] .home-start.has-greeting > :is(.ce-title, .home-brand-line, .home-personal-intro) { display: none; }
  [data-page="home"] .home-start.has-greeting .home-agent-slot { order: 45; margin: auto auto 10px; padding: 0; }
  [data-page="home"] .home-start.has-greeting .home-agent-pick .agent-pick-btn {
    grid-template-columns: auto auto auto; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--raise); }
  [data-page="home"] .home-start.has-greeting .home-agent-pick .agent-pick-btn .em { grid-column: auto; width: 32px; height: 32px; }
  [data-page="home"] .home-start.has-greeting .home-agent-pick .agent-pick-menu { top: auto; bottom: calc(100% + 6px); }
  [data-page="home"] .home-start.has-greeting > .composer.big { margin-top: 0; }
  [data-page="home"] .home-start.has-greeting > .home-agent-slot:not(:empty) ~ .onboard-card.home-setup { margin-top: 0; }
  /* The bottom: an optional notice (agent setup), then the box. */
  [data-page="home"] .home-start .onboard-card.home-setup {
    order: 50; margin: auto 0 8px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
    border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); }
  [data-page="home"] .home-start .onboard-card.home-setup p { display: none; }
  [data-page="home"] .home-start .onboard-card.home-setup strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
  [data-page="home"] .home-start .onboard-card.home-setup .btn { grid-column: 2; grid-row: 1; min-height: 36px; white-space: nowrap; }
  [data-page="home"] .home-start .composer.big {
    order: 60; margin: auto 0 calc(10px + env(safe-area-inset-bottom, 0px)); padding: 12px 10px 8px 16px; border-radius: 28px;
    background: color-mix(in srgb, var(--panel-2) 90%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
  [data-page="home"] .home-start:has(> .onboard-card.home-setup) > .composer.big { margin-top: 0; }
  [data-page="home"] .home-start .composer.big .composer-input { min-height: 52px; font-size: 17px; }
  /* The box sits at the bottom: its menus open upward. */
  :root [data-page="home"] .home-start .composer.big :is(.model-pick-menu, .agent-pick-menu).down { top: auto; bottom: calc(100% + 8px); }
  [data-page="home"] .home-start .ce-title ~ .composer.big { box-shadow: none; }
}

/* ==== UI-29 · The menu drawer on a phone (Muse) ====
   About 80% of the screen with the chat dimmed at the edge. The workspace
   name large at the top with Settings beside it; the same menu items; Search
   and New chat at the bottom. */
.sb-settings { display: none; }
@media (max-width: 600px) {
  .sidebar {
    width: min(80vw, 340px); display: flex; flex-direction: column; border-right: 0; background: var(--bg);
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 0 calc(env(safe-area-inset-bottom, 0px) + 12px); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  .scrim.open { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
  .sidebar .ws { height: auto; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 4px 14px 10px 22px; border: 0; }
  .sidebar .ws .brand-mark { display: none; }
  .sidebar .ws .workspace-label { flex: 1; min-width: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
  .sidebar .sb-settings {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
    background: var(--raise); color: var(--ink); }
  .sidebar .sb-settings svg { width: 21px; height: 21px; }
  .sidebar .sb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 10px 8px; }
  .sidebar .nav a.item, .sidebar .nav .item { min-height: 48px; padding: 0 12px; gap: 14px; border-radius: 14px; font-size: 17px; font-weight: 500; }
  .sidebar .nav a.item svg, .sidebar .nav .item svg { width: 22px; height: 22px; }
  .sidebar .nav a.item.active { background: var(--raise); }
  .sidebar :is(.sb-group-title, .sb-resources > summary) { font-size: 13px; letter-spacing: .02em; }
  .sidebar .sb-bottom { padding: 4px 10px; }
  /* Admin and Avori operations are rows like the rest, not a solid button. */
  :root .sidebar .sb-bottom .sb-btn.sb-operations {
    height: auto; min-height: 48px; padding: 0 12px; gap: 14px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font-size: 17px; font-weight: 500; }
  :root .sidebar .sb-bottom .sb-btn.sb-operations svg { width: 22px; height: 22px; }
  :root .sidebar .sb-bottom .sb-btn.sb-operations:is(:hover, :active, .active) { background: var(--raise); color: var(--ink); }
  .sidebar :is(.sb-group-title, .sb-resources > summary) { margin-top: 6px; padding: 8px 12px 4px; min-height: 40px; }
  .sidebar .sb-resources { margin-top: 2px; }
  .sidebar .sb-bottom :is(a.item, .sb-btn) { margin: 0; width: 100%; }
  .sidebar .foot .usage-avatar-ring::after { display: none; } /* the tiny "100%" badge: usage lives in Settings */
  .sidebar .sb-group-edit { border: 0; background: transparent; min-height: 44px; font-size: 15px; color: var(--ink-3); }
  .sidebar .foot.account-footer { padding: 6px 12px; border-top: 0; }
  .sidebar .foot .who .role { display: none; }
  .sidebar .foot .who .name { font-size: 16px; }
  /* Search (a pill) and New chat (a round compose button) at the bottom. */
  .sidebar .sb-actions { order: 99; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 0; border: 0; }
  .sidebar .sb-empty { display: none; }
  .sidebar :is(.sb-bottom, .foot) { flex: none; }
  .sidebar .sb-actions #sb-search-btn {
    order: 1; flex: 1 1 auto; justify-content: flex-start; height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 24px;
    background: var(--raise); color: var(--ink-3); font-size: 17px; font-weight: 400; }
  .sidebar .sb-actions #sb-search-btn svg, .sidebar .sb-actions .sb-kbd { display: none; }
  .sidebar .sb-actions #sb-newchat {
    order: 2; flex: none; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
    background: var(--raise); color: var(--ink); }
  .sidebar .sb-actions #sb-newchat > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sidebar .sb-actions #sb-newchat svg { width: 21px; height: 21px; color: var(--ink); opacity: 1; }
}

/* ==== UI-34 · Settings, like Muse's sheet (phone and desktop) ====
   A large title, the plan card, then grouped rounded rows: icon, one or two
   words, chevron. The explanations stay one tap deeper (each row's page). */
[data-page="settings"] .content .inner { max-width: 640px; margin: 0 auto; }
.settings-close { display: none; }
[data-page="settings"] .settings-group { margin: 0 0 16px; }
[data-page="settings"] .settings-group > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root [data-page="settings"] .settings-grid {
  display: flex; flex-direction: column; gap: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--bubble-agent, var(--panel-2)); }
:root [data-page="settings"] :is(.settings-card, .settings-row) {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 56px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; width: 100%; cursor: pointer; }
:root [data-page="settings"] :is(.settings-card, .settings-row) + :is(.settings-card, .settings-row)::before {
  content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: 1px solid var(--line); }
:root [data-page="settings"] :is(.settings-card, .settings-row):hover { background: var(--hover); box-shadow: none; }
:root [data-page="settings"] .settings-icon { flex: none; width: 24px; height: 24px; margin: 0; display: grid; place-items: center; border-radius: 0; background: transparent; color: var(--ink); }
:root [data-page="settings"] .settings-icon svg { width: 22px; height: 22px; }
:root [data-page="settings"] .settings-card h3, [data-page="settings"] .settings-row-label { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 400; line-height: 1.3; }
:root [data-page="settings"] .settings-card p { display: none; }
[data-page="settings"] .settings-chevron { flex: none; display: grid; place-items: center; color: var(--ink-3); }
[data-page="settings"] .settings-chevron svg { width: 18px; height: 18px; }
[data-page="settings"] .settings-row .theme-switch { flex: none; --toggle-size: 10px; }
:root [data-page="settings"] .settings-signout { color: var(--red); }
:root [data-page="settings"] .settings-signout .settings-icon { color: var(--red); }
/* The plan card. */
.settings-plan {
  display: grid; gap: 8px; margin: 0 0 16px; padding: 16px 18px; border-radius: 18px; background: var(--bubble-agent, var(--panel-2)); color: var(--ink); text-decoration: none; }
.settings-plan[hidden] { display: none; }
.settings-plan:hover { background: var(--hover); }
.settings-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.settings-plan-top strong { font-size: 17px; font-weight: 600; }
.settings-plan-top span, .settings-plan-line { font-size: 15px; color: var(--ink-3); }
.settings-plan-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.settings-plan-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.settings-plan-link { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--accent); }
@media (max-width: 600px) {
  /* A sheet: a large bold title and ✕, no title bar. */
  [data-page="settings"] > .main > .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 40; min-height: 0; border: 0; background: none !important; padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 0; pointer-events: none; }
  [data-page="settings"] > .main > .topbar > * { pointer-events: auto; }
  [data-page="settings"] > .main > .topbar :is(h1, .topbar-heading) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  [data-page="settings"] > .main > .topbar .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--raise); }
  [data-page="settings"] > .main > .content { padding-top: calc(env(safe-area-inset-top, 0px) + 60px); }
  [data-page="settings"] .content .inner::before { content: "Settings"; display: block; margin: 8px 4px 16px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
  [data-page="settings"] .settings-close {
    display: grid; place-items: center; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 12px; z-index: 41; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 50%; background: var(--raise); color: var(--ink); font-size: 18px; text-decoration: none; }
}

/* Set up Avori (public/setup-hub.js) inside Settings: the same grouped rows. */
:root [data-page="settings"] [data-setup-hub] { margin: 0 0 16px; padding: 0; border: 0; background: none; box-shadow: none; }
:root [data-page="settings"] [data-setup-hub] > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root [data-page="settings"] .setup-hub-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; border-radius: 18px; overflow: hidden; background: var(--bubble-agent, var(--panel-2)); }
:root [data-page="settings"] .setup-item {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 60px; margin: 0; padding: 10px 16px; border: 0; border-radius: 0; background: transparent; }
:root [data-page="settings"] .setup-item + .setup-item::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; border-top: 1px solid var(--line); }
:root [data-page="settings"] .setup-item-icon { flex: none; width: 24px; height: 24px; margin: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--ink); }
:root [data-page="settings"] .setup-item-icon svg { width: 22px; height: 22px; }
:root [data-page="settings"] .setup-item-text { flex: 1 1 0; min-width: 0; }
:root [data-page="settings"] .setup-item-text > p { display: none; }
:root [data-page="settings"] .setup-item-name { font-size: 17px; font-weight: 400; color: var(--ink); text-decoration: none; }
/* Rule zero: each device row is its name and one trailing word (Connected,
   Not yet) or its action; the detail is one tap deeper, on its page. */
:root [data-page="settings"] .setup-item-text { display: flex; align-items: center; gap: 10px; }
:root [data-page="settings"] .setup-item-icon { align-self: center; }
:root [data-page="settings"] .setup-item-detail { display: none; }
:root [data-page="settings"] .setup-item-status { margin: 0 0 0 auto; flex: none; font-size: 15px; color: var(--ink-3); }
:root [data-page="settings"] .setup-item-status .badge { padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 15px; font-weight: 400; }
:root [data-page="settings"] .setup-item[data-status="unavailable"] .setup-item-status::after { content: "Not yet"; }
:root [data-page="settings"] .setup-item-actions { flex: none; display: flex; gap: 8px; margin: 0; }
:root [data-page="settings"] .setup-item-actions .btn { min-height: 44px; font-size: 15px; }
:root [data-page="settings"] :is(.settings-group > h2, [data-setup-hub] > h2) { font-size: 15px; }
:root [data-page="settings"] .setup-item-accounts { flex: 1 0 100%; padding-left: 38px; }

/* Composer menus that open upward (Home's box now sits at the bottom on a
   phone): their measured max-height includes padding and border. */
.composer :is(.approval-menu, .effort-menu) { box-sizing: border-box; }

/* ==== UI-16 / UI-30 · The unread dot (public/phone-chat.js) ====
   Another chat has news since you last opened it: a small dot on the menu
   button and beside Chat in the menu. */
.menu-btn { position: relative; }
html.has-unread-chat .menu-btn::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--unread-dot, #0a84ff); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
html.has-unread-chat .sidebar .nav a.item[href="#/chat"]::after {
  content: ""; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--unread-dot, #0a84ff); flex: none; }

/* ==== UI-35 · Phones: where a reply ran ("In the cloud") is one tap deeper,
   with the time; when shown it is readable. ==== */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  #chat-msgs .msg:not(.tools-shown) .who .route-label { display: none; }
  #chat-msgs .msg .who :is(time, .route-label) { font-size: 14px; }
}

/* ==== Phones: a toast is a centred pill above the message box, never over it ==== */
@media (max-width: 600px) {
  #toast-root { left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); align-items: center; }
  .toast { max-width: 100%; padding: 12px 18px; border-radius: 999px; font-size: 16px; line-height: 1.3; text-align: center; }
}

/* ==== UI-22 / UI-35 · File cards on a phone: readable name and detail ==== */
@media (max-width: 600px) {
  .msg .cc-file .cc-file-name, .cc-file .cc-file-name { font-size: 17px; }
  .cc-file-copy small { font-size: 14px; margin-top: 2px; }
  .delivery-file.cc-file .cc-file-icon { width: 44px; height: 44px; }
  .cc-file-actions .file-download-status { font-size: 15px; line-height: 18px; }
}

/* ==== UI-35 on the desktop: the time and where a reply ran show with the
   message's actions (on hover or focus), not under every message ==== */
@media (min-width: 601px) and (hover: hover) {
  #chat-msgs .msg .who :is(time, .route-label) { font-size: 12.5px; opacity: 0; transition: opacity .12s ease; }
  #chat-msgs .msg:is(:hover, :focus-within) .who :is(time, .route-label) { opacity: 1; }
}

/* ==== UI-28 / UI-35 · Rule zero in the phone chat: nothing under 15–16 px,
   every target 44 pt ==== */
@media (max-width: 600px) {
  /* "Worked for 8s ›": one short, tappable line; the counts are inside it. */
  .worked-fold > summary { min-height: 44px; padding: 0 10px 0 0; gap: 6px; font-size: 16px; }
  .worked-fold-meta { display: none; }
  .worked-fold-caret, .worked-fold-caret svg { width: 16px; height: 16px; }
  .worked-fold-body { padding: 10px 14px 12px; }
  .worked-fold-body :is(.ca-steps.compact .ca-step, .ca-step, .ca-empty, .ca-helper-name) { font-size: 16px; }
  .worked-fold-body :is(.ca-step time, .ca-helper-line, .ca-helper-detail) { font-size: 15px; }
  .worked-fold-open { min-height: 44px; font-size: 16px; }
  /* An answer's actions: 44 pt targets; its ⋯ menu in 16 pt rows. */
  #chat-msgs .message-tools { height: 44px; min-height: 44px; }
  #chat-msgs .message-tools :is(.message-copy, .message-share, .message-menu > summary) { width: 44px; height: 44px; padding: 12px; }
  #chat-msgs .message-menu-body :is(.msg-action, button, a) { min-height: 44px; font-size: 16px; }
  #chat-msgs .message-menu-body :is(.msg-action, button, a) svg { width: 18px; height: 18px; }
  /* Inline references and the Sources chip. */
  #chat-msgs .bubble.md a.cc-cite { height: 28px; line-height: 28px; padding: 0 10px; font-size: 15px; vertical-align: 1px; }
  #chat-msgs .cc-sources-head { min-height: 44px; }
  #chat-msgs .cc-sources-mark { width: 28px; height: 28px; font-size: 16px; }
  #chat-msgs .cc-sources-title { font-size: 16px; }
  #chat-msgs .cc-sources-count { font-size: 15px; }
  #chat-msgs .cc-sources.is-open .cc-source { font-size: 16px; }
  /* The menu's section labels. */
  .sidebar :is(.sb-group-title, .sb-resources > summary, .sb-more-tools > summary) { font-size: 15px; }
  .sidebar .sb-actions #sb-newchat > span { font-size: 16px; }
}

/* ==== UI-23 / UI-30 · The message box on a phone: one floating pill ====
   + (the model, agent, approvals and the rest wait behind it), the message,
   the mic and send, in one row. Anything else the box holds (attachments,
   a notice) sits on its own line above. "+" opens the full box as before. */
@media (max-width: 600px) {
  :root .composer:not(.tools-open), :root .composer.big:not(.tools-open) {
    flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0; padding: 4px; border-radius: 28px; min-height: 0; }
  .composer:not(.tools-open) > .composer-tools { display: contents; }
  .composer:not(.tools-open) > :not(.composer-input, .composer-tools) { order: -1; flex: 1 0 100%; }
  .composer:not(.tools-open) .composer-more { order: 0 !important; align-self: flex-end; }
  :root .composer:not(.tools-open) > .composer-input, :root .composer.big:not(.tools-open) > .composer-input {
    order: 1; flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 11px 4px 10px; line-height: 1.35; align-self: center; }
  .composer:not(.tools-open) > .composer-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .composer:not(.tools-open) :is(#thread-model, #composer-model-slot) { display: none !important; }
  .composer:not(.tools-open) .composer-mic { order: 30 !important; margin-left: 0; align-self: flex-end; }
  .composer:not(.tools-open) .composer-send { order: 31 !important; align-self: flex-end; }
  /* The start screen's box is the same pill (UI-30); it keeps its glass. */
  [data-page="home"] .home-start .composer.big:not(.tools-open) .composer-input { min-height: 44px; }
}

/* ==== UI-25 · The agent-setup notice: a row on top of the start screen's box ==== */
@media (max-width: 600px) {
  :root [data-page="home"] .home-start .composer .onboard-card.home-setup-notice {
    order: -1; flex: 0 0 auto; width: 100%; display: flex; align-items: center; gap: 0; margin: 0 0 4px; padding: 0 0 4px 6px; min-height: 0;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  :root [data-page="home"] .home-start .composer .home-setup-notice :is(strong, p) { display: none; }
  :root [data-page="home"] .home-start .composer .home-setup-notice [data-personal-start] {
    flex: 1 1 auto; justify-content: flex-start; min-height: 44px; height: auto; padding: 0 8px; border: 0; border-radius: 12px;
    background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; box-shadow: none; }
  :root [data-page="home"] .home-start .composer .home-setup-notice [data-personal-start]::after { content: "›"; margin-left: 8px; color: var(--ink-3); font-size: 20px; line-height: 1; }
  :root [data-page="home"] .home-start .composer .home-setup-notice .home-setup-close {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 16px; cursor: pointer; }
}

/* ==== UI-23 / UI-24 · Sources under an answer (phone and desktop, like ChatGPT) ====
   One small chip, the sites' marks stacked and "Sources", at the end of the
   answer; the full list opens one tap deeper (public/phone-chat.js). */
#chat-msgs .cc-sources { width: auto; margin-top: 8px; padding: 0; border: 0; background: none; }
#chat-msgs .cc-sources-head {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px;
  cursor: pointer; -webkit-user-select: none; user-select: none; }
#chat-msgs .cc-sources-head:active { background: var(--hover); }
#chat-msgs .cc-sources-marks { display: inline-flex; }
#chat-msgs .cc-sources-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--raise); color: var(--ink-2);
  box-shadow: 0 0 0 2px var(--bg); font-size: 13px; font-weight: 650; line-height: 1; }
#chat-msgs .cc-sources-mark + .cc-sources-mark { margin-left: -7px; }
#chat-msgs .cc-sources-title { font-weight: 600; }
#chat-msgs .cc-sources:not(.is-open) :is(.cc-sources-list, .cc-sources-more) { display: none; }
#chat-msgs .cc-sources.is-open .cc-sources-list { margin-top: 8px; padding: 6px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
#chat-msgs .cc-sources.is-open .cc-source { min-height: 48px; }
#chat-msgs .cc-sources-head:hover { background: var(--hover); }
#chat-msgs .cc-sources-head:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#chat-msgs .cc-sources-title { font-size: 15px; }
#chat-msgs .cc-sources-count { font-size: 14px; color: var(--ink-3); }
#chat-msgs .cc-sources.is-open .cc-sources-list { width: min(440px, 100%); max-width: 560px; }
@media (max-width: 600px) {
  #chat-msgs .cc-sources-head { min-height: 44px; }
  #chat-msgs .cc-sources-mark { width: 28px; height: 28px; font-size: 16px; }
  #chat-msgs .cc-sources-title { font-size: 16px; }
  #chat-msgs .cc-sources-count { font-size: 15px; }
  #chat-msgs .cc-sources.is-open .cc-source { font-size: 16px; }
}