/* ==========================================================================
   The AI page (18 Oct 2026) — pages/chat.js, the middle of the row where
   Today stood. The live chat fills the page, the newest words at the bottom
   over the box; since 19 Oct 2026, evening, nothing of its own in the rail —
   the chats are the AI coin's fan (aiFan.js, below). The phone's twin is
   components/ai/AiPage.tsx.
   ========================================================================== */

.ai-page { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Starts below the rail's keys and ends a little above the box, where the
   screen's own fade is. A chat scrolled up is gone by the keys' foot (48px):
   the screen's fade (shell.css) is for a page's first row at rest, and here
   the words would still show between the keys. */
.ai-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  padding: calc(72px + env(safe-area-inset-top)) clamp(12px, 3vw, 32px) 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(env(safe-area-inset-top) + 54px), #000 calc(env(safe-area-inset-top) + 72px));
  mask-image: linear-gradient(to bottom, transparent calc(env(safe-area-inset-top) + 54px), #000 calc(env(safe-area-inset-top) + 72px));
}
/* A short chat sits down by the box, the way a chat does; a long one scrolls up from there. */
.ai-inner { max-width: 760px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.ai-thread { min-width: 0; }
.ai-thread .msg { overflow-wrap: anywhere; }
.ai-thread .msg.assistant .md { overflow-x: auto; }
/* A wide table scrolls in its own box, its cells keeping their words whole (the thread's anywhere-wrapping broke "$4,200" into digits). */
.ai-thread .md table { display: block; overflow-x: auto; max-width: 100%; }
.ai-thread .md th, .ai-thread .md td { overflow-wrap: normal; word-break: normal; min-width: 4.5em; }

/* Your words with no reply after them: a tap runs the turn again (pages/chat.js; the phone's RetryRow). */
.ai-retry {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 4px 0 6px; padding: 12px 14px; min-height: 44px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-bottom-width: 3px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font: inherit; text-align: left; cursor: pointer;
}
.ai-retry:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.ai-retry svg { width: 17px; height: 17px; flex: none; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 40; }
.ai-retry-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-retry-head { font-size: 14.5px; font-weight: 700; }
.ai-retry-why { font-size: 13px; color: var(--ink-muted); overflow-wrap: anywhere; }

/* An empty chat: the AI's home, the day (19 Oct 2026; pages/today.js `home`) — from the top of the page, lots of air,
   no cards: the backdrop shows through. The phone's components/pages/TodayPage.tsx `home`. */
.ai-scroll.ai-home .ai-inner { justify-content: flex-start; }
.ai-dayhome { width: 100%; max-width: 640px; margin: 0 auto; }
.ai-dayhome > .inner.today { max-width: none; margin: 0; padding: 0 0 12px; gap: 8px; }
.ai-dayhead { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 44px; }
.ai-daydate {
  margin-right: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; border-radius: 12px; color: var(--ink); cursor: pointer; text-align: left;
  font: inherit; font-family: var(--font-display, inherit); font-size: 21px; font-weight: 700; line-height: 1.25;
}
.ai-daydate:hover { background: var(--accent-soft); }
.ai-daydate svg { width: 16px; height: 16px; flex: none; stroke: var(--ink-faint); fill: none; stroke-width: 36; }
.ai-daytoday { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 14px; background: none; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ai-daystreak { flex: none; font-size: 13px; font-weight: 800; color: var(--ink-muted); }
.ai-dayhead .alarm-pill.compact { height: 36px; padding: 0 11px; }
.ai-dayhead .alarm-pill.bare { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: none; }
.ai-dayhead .alarm-pill.bare:hover { background: var(--accent-soft); }
.ai-dayoff { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px; }
.ai-dayoff-head { font-size: 15px; font-weight: 700; color: var(--ink); }
.ai-dayempty { padding: 6px 6px 0; }

/* Soon (../daySoonView.js): School's and Work's few urgent things, each block a small head with its button. */
.ai-soon { display: flex; flex-direction: column; gap: 18px; padding-top: 14px; }
.ai-soon[hidden] { display: none; }
.ai-soon-block { display: flex; flex-direction: column; gap: 2px; }
.ai-soon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 0 4px; }
.ai-soon-title { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); }
.ai-soon-open {
  display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ai-soon-open:hover { color: var(--ink); }
.ai-soon-open svg { width: 14px; height: 14px; stroke: var(--ink-faint); fill: none; stroke-width: 44; }
.ai-soon-row {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 46px; padding: 4px; border: 0; border-radius: 12px;
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ai-soon-row:hover { background: var(--accent-soft); }
.ai-soon-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.ai-soon-row.late .ai-soon-dot { background: var(--danger); }
.ai-soon-row.clock .ai-soon-dot { background: var(--success); }
.ai-soon-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-soon-name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ai-soon-sub { font-size: 12.5px; color: var(--ink-muted); }
.ai-soon-row.late .ai-soon-sub { color: var(--danger); }

/* A key in the rail (Past chats' Back, pages/archive.js): the Shmangus sticker (a 1.5px edge, a deeper lip,
   a press that sinks onto it), round, 36px drawn and past 44 to the touch. */
.float-nav .ai-key {
  position: relative; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 18px;
  border: 1.5px solid var(--border); border-bottom-width: 3px;
  background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.float-nav .ai-key::before { content: ''; position: absolute; inset: -5px; }
.float-nav .ai-key svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 34; }
.float-nav .ai-key:not(:disabled):hover { background: color-mix(in srgb, var(--surface) 82%, var(--ink) 6%); }
.float-nav .ai-key:not(:disabled):active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.float-nav .ai-key:disabled { opacity: 0.4; cursor: default; }
.float-nav .ai-key[hidden] { display: none; }
/* The update key's dot (appUpdate.js: a newer version is waiting) sits on its rim. */
.float-nav .ai-key.dot { color: var(--accent); border-color: var(--accent); }
.float-nav .ai-key.dot::after { top: 1px; right: 1px; }
.float-nav .ai-key .head-spin { width: 16px; height: 16px; }

/* ---- 19 Oct 2026: the list of chats, the cards --------------------------- */

/* The whole list of chats (the fan's "All chats"): over the thread, under the rail. */
.ai-chats { position: absolute; inset: 0; z-index: 25; }
.ai-chats[hidden] { display: none; }
.ai-chats-scrim {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 72%, transparent);
  opacity: 0; transition: opacity 160ms ease-in;
}
.ai-chats-panel:focus { outline: none; }
.ai-chats-panel {
  position: absolute; top: calc(env(safe-area-inset-top) + 56px); left: 10px;
  width: min(460px, calc(100% - 20px)); max-height: calc(100% - env(safe-area-inset-top) - 64px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-solid); border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  opacity: 0; transform: translateY(-14px) scale(0.97); transform-origin: 50% 0;
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}
.ai-chats.open .ai-chats-scrim { opacity: 1; transition-duration: 220ms; transition-timing-function: ease-out; }
.ai-chats.open .ai-chats-panel {
  opacity: 1; transform: none;
  transition: opacity 220ms ease-out, transform 220ms var(--arc-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
@media (prefers-reduced-motion: reduce) { .ai-chats-panel, .ai-chats.open .ai-chats-panel { transition: opacity 120ms; transform: none; } }

.ai-chats-head { flex: none; display: flex; align-items: center; gap: 8px; margin: 10px 10px 2px; }
.ai-chats-title { flex: 1; min-width: 0; padding-left: 6px; font-size: 17px; font-weight: 800; }
.ai-chats-title[hidden] { display: none; }
.ai-chats-close {
  position: relative; flex: none; width: 42px; height: 42px; padding: 0; border-radius: 21px;
  border: 1px solid var(--border); border-bottom-width: 3px; background: var(--bg); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ai-chats-close::before { content: ''; position: absolute; inset: -3px; }
.ai-chats-close svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 40; }
.ai-chats-close:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.ai-chats-find {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--ink-muted); cursor: text;
}
.ai-chats-find[hidden] { display: none; }
.ai-chats-find svg { flex: none; width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 40; }
.ai-chats-search { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none; color: var(--ink); font: inherit; font-size: 16px; }
.ai-chats-search::-webkit-search-cancel-button { cursor: pointer; }
.ai-chats-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.ai-chats-wait { flex: none; padding: 10px 14px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.ai-chats-wait[hidden] { display: none; }
.ai-chats-none { padding: 22px 12px; text-align: center; color: var(--ink-muted); font-size: 14.5px; }

.ai-chat { position: relative; display: flex; align-items: center; border: 1.5px solid transparent; border-radius: 14px; }
.ai-chat + .ai-chat { margin-top: 2px; }
.ai-chat.live { background: var(--tint); border-color: var(--accent); }
.ai-chat-open {
  flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 2px;
  padding: 9px 12px; border: none; border-radius: 13px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none;
}
.ai-chat:not(.live) .ai-chat-open:hover, .ai-chat:not(.live) .ai-chat-open:active { background: var(--bg); }
.ai-chat.waits .ai-chat-open { opacity: 0.45; cursor: default; }
.ai-chat-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
/* The title whole (21 Oct 2026: never "…" on a name; aiChats.mjs chatTitle keeps it short) — it wraps; the last line under it may still cut (a preview). */
.ai-chat-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; font-size: 15px; font-weight: 700; }
.ai-chat-when { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.ai-chat.live .ai-chat-when { color: var(--accent); }
.ai-chat-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink-muted); }
/* The bin: on the row under a mouse, and to a keyboard; a touch screen holds the row instead.
   It stands over the row's right end where the date was, so nothing moves under the mouse. */
.ai-chat-del {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 0; border-radius: 18px;
  border: 1.5px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid); color: var(--ink-muted);
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
.ai-chat-del svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 36; }
.ai-chat-del:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.ai-chat-del:disabled { opacity: 0.4; cursor: default; }
.ai-chat:hover .ai-chat-del, .ai-chat:focus-within .ai-chat-del, .ai-chat-del:focus-visible { display: inline-flex; }
.ai-chat:hover .ai-chat-when, .ai-chat:focus-within .ai-chat-when { visibility: hidden; }
@media (hover: none) and (pointer: coarse) {
  .ai-chat:hover .ai-chat-del, .ai-chat:focus-within .ai-chat-del { display: none; }
  .ai-chat:hover .ai-chat-when, .ai-chat:focus-within .ai-chat-when { visibility: visible; }
}


/* The key back to the newest words, over the foot of the thread. */
.ai-page .ai-newest {
  position: absolute; left: 50%; bottom: 12px; z-index: 5; transform: translateX(-50%);
  width: 40px; height: 40px; padding: 0; border-radius: 21px;
  border: 1.5px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.ai-page .ai-newest[hidden] { display: none; }
.ai-page .ai-newest svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 44; }
.ai-page .ai-newest:active { transform: translateX(-50%) translateY(1.5px); border-bottom-width: 1.5px; }

/* ---- 19 Oct 2026, evening: the thread as texts --------------------------------
   Each message a bubble with the picture beside it — Shmangus's face beside every
   reply, yours beside the last of your run — its corner pointing at who spoke, the
   time under the last of a run (aiChats.mjs threadMarks). The Claude page's
   .pane-msg (styles.css), the phone's components/ai/AiMessage.tsx. */
.ai-msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; margin: 2px 0; min-width: 0; }
.ai-msg > * { grid-column: 2; justify-self: start; }
.ai-msg.mine { grid-template-columns: minmax(0, 1fr) 30px; }
.ai-msg.mine > * { grid-column: 1; justify-self: end; }
.ai-msg > .ai-msg-face { grid-row: 1; grid-column: 1; align-self: end; width: 30px; height: 30px; }
.ai-msg.mine > .ai-msg-face { grid-column: 2; }
.ai-msg.tail { margin-bottom: 12px; }
.ai-bubble {
  max-width: 86%; min-width: 0; padding: 9px 13px; border-radius: 19px;
  font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere;
}
.ai-bubble.wide { width: 86%; }
.ai-msg.mine .ai-bubble { background: var(--bubble-user); color: var(--bubble-user-ink); }
.ai-said { white-space: pre-wrap; }
.ai-msg.theirs .ai-bubble { background: var(--bubble-agent, var(--surface)); color: var(--ink); border: 1px solid var(--border); }
.ai-msg.theirs .ai-bubble .md > :first-child { margin-top: 0; }
.ai-msg.theirs .ai-bubble .md > :last-child { margin-bottom: 0; }
.ai-msg.mine.tail .ai-bubble { border-bottom-right-radius: 6px; }
.ai-msg.theirs.tail .ai-bubble { border-bottom-left-radius: 6px; }
.ai-msg-time { margin: 3px 6px 0; font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* The chat in short, under its last finished reply (pages/chat.js footEl; the phone's components/ai/ChatFoot.tsx):
   quiet — a small label and a muted 13px line across the thread, centred, not a reply's bubble or column. Whole. */
.ai-foot { max-width: 520px; margin: 4px auto 14px; padding: 0 16px; text-align: center; }
.ai-foot-label { display: block; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-muted); }
.ai-foot-words { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); overflow-wrap: break-word; }
/* The reply that is coming: three dots taking turns in his bubble. */
.ai-dots { display: inline-flex; align-items: center; gap: 5px; padding: 13px 16px; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); animation: ai-dot 1.2s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: 0.16s; }
.ai-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ai-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ai-dots i { animation: none; opacity: 0.6; } }

/* ---- the AI coin's fan of chats (aiFan.js; the phone's components/ai/ChatFan.tsx) ----
   New chat nearest the coin, the chats over it newest first, "All chats" on top when
   they do not all fit. Since 21 Oct 2026 New chat is the coin in the middle of its foot (.ai-fan-coins, below). */
.ai-fan {
  position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(14px); transition: opacity 110ms ease-in, transform 110ms ease-in; pointer-events: none;
}
/* No veil (19 Oct 2026, late: "no random opaque screen behind the buttons when holding it down it feels weird"): the
   rows float over the page as it is. Up with a quick spring, a hair past and back (the phone's Animated.spring); away
   short, a fade as they drop. */
.ai-fan.up { opacity: 1; transform: none; transition: opacity 120ms ease-out, transform 240ms cubic-bezier(.34,1.45,.64,1); pointer-events: auto; }
.ai-fan-opt {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--border); border-bottom-width: 4px; border-radius: 16px;
  background: var(--surface-solid, var(--surface)); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  /* With nothing dimmed behind them, the rows stand off the page by a deep soft shadow. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08); -webkit-tap-highlight-color: transparent;
}
/* In dark, a face a touch lighter than a card and an edge that shows, as the profile fan's keys. */
:root[data-theme='dark'] .ai-fan-opt:not(.live):not(.hover) { background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, #fff); border-color: color-mix(in srgb, var(--border) 86%, #fff); }
:root[data-theme='dark'] .ai-fan-opt { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); }
.ai-fan-opt svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--ink-muted); stroke-width: 36; }
/* A chat's name whole, never cut (21 Oct 2026): a size down and a line more as it gets longer (aiChats.mjs fanNameSize). */
.ai-fan-name { flex: 1; min-width: 0; white-space: normal; overflow-wrap: break-word; line-height: 1.15; font-size: 15px; font-weight: 700; }
.ai-fan-when { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.ai-fan-dot { display: none; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ai-coin); }
.ai-fan-opt.live { border-color: var(--ai-coin); border-bottom-color: var(--ai-coin-lip); background: color-mix(in srgb, var(--ai-coin) 14%, var(--surface-solid, var(--surface))); }
.ai-fan-opt.live .ai-fan-dot { display: inline-block; }
.ai-fan-opt.live .ai-fan-when { color: var(--ink); }
.ai-fan-new .ai-fan-name, .ai-fan-all .ai-fan-name { font-weight: 800; }
.ai-fan-new svg { stroke: var(--ai-coin); }
.ai-fan-opt:not(:disabled):hover, .ai-fan-opt.hover { border-color: var(--ai-coin); background: color-mix(in srgb, var(--ai-coin) 18%, var(--surface-solid, var(--surface))); }
.ai-fan-opt:not(:disabled):active, .ai-fan-opt.hover { transform: translateY(2px); }
.ai-fan-opt:focus-visible { outline: 2px solid var(--ai-coin); outline-offset: 2px; }
.ai-fan-opt:disabled { opacity: 0.45; cursor: default; }
/* The fan's foot (21 Oct 2026; the phone's ChatFan FanCoin): round coins straight over the AI coin, New chat in the
   middle wearing the logo on the coin's night, Settings and Admin left of it, Claude and Family Tree right — each
   placed by aiFan.js where the phone puts it, its name whole under it on its own small face, one line. */
.ai-fan-coins { position: relative; flex: none; margin-top: 6px; }
/* While the fan is up the line under the box steps aside — the hello, the weather and the date — so the coins' names
   never sit on its words (UI review, 21 Oct 2026). Nothing moves: it is only not drawn. */
body.ai-fan-up .cmd-splash, body.ai-fan-up .splash-side { visibility: hidden; }
.ai-fan .ai-fan-opt.ai-fan-coin, :root[data-theme='dark'] .ai-fan .ai-fan-opt.ai-fan-coin {
  position: absolute; top: 0; width: 72px; height: auto; padding: 0; gap: 4px; /* each coin's width is its name's (aiFan.js) */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center;
}
.ai-fan-face {
  display: grid; place-items: center; width: 46px; height: 46px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.08); transition: transform 90ms ease-out;
}
:root[data-theme='dark'] .ai-fan-face { background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, #fff); border-color: color-mix(in srgb, var(--border) 86%, #fff); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); }
.ai-fan-coin .ai-fan-face svg { width: 21px; height: 21px; stroke: var(--ink); }
/* New chat wears the AI coin's own gold (aiChats.mjs AI_GOLD; shell.css .wheel-ai), the dark one in dark. */
.ai-fan-new .ai-fan-face {
  background: linear-gradient(135deg, var(--ai-gold-a), var(--ai-gold-b)); border: 1.5px solid var(--ai-gold-rim); border-bottom: 4px solid var(--ai-gold-lip);
}
:root[data-theme='dark'] .ai-fan-new .ai-fan-face {
  background: linear-gradient(135deg, var(--ai-gold-dark-a), var(--ai-gold-dark-b)); border-color: var(--ai-gold-dark-rim); border-bottom-color: var(--ai-gold-dark-lip);
}
.ai-fan-new .ai-fan-face .ai-logo { border-radius: 50%; }
.ai-fan-coin-name {
  padding: 1px 4px; box-sizing: border-box; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-solid, var(--surface)); color: var(--ink); font-size: var(--coin-name, 11px); line-height: 13px; font-weight: 800;
  white-space: nowrap;
}
:root[data-theme='dark'] .ai-fan-coin-name { background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, #fff); }
.ai-fan .ai-fan-coin:not(:disabled):hover, .ai-fan .ai-fan-coin.hover { background: none; transform: none; }
.ai-fan-coin:not(:disabled):hover .ai-fan-face, .ai-fan-coin.hover .ai-fan-face { border-color: var(--ai-coin); border-bottom-color: var(--ai-coin-lip); transform: scale(1.08); }
.ai-fan-coin:not(:disabled):hover svg, .ai-fan-coin.hover svg { stroke: var(--ai-coin); }
.ai-fan-coin:not(:disabled):hover .ai-fan-coin-name, .ai-fan-coin.hover .ai-fan-coin-name { border-color: var(--ai-coin); }
.ai-fan-coin:focus-visible { outline: none; }
.ai-fan-coin:focus-visible .ai-fan-face { outline: 2px solid var(--ai-coin); outline-offset: 2px; }
.ai-fan-wait { align-self: center; margin-bottom: 4px; padding: 5px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); }
/* Mid-reply a click cannot start a new chat: the coin shakes its head (aiFan.js no). */
.wheel-ai.no { animation: ai-coin-no 280ms linear; }
@keyframes ai-coin-no { 20% { translate: -5px 0; } 45% { translate: 4px 0; } 70% { translate: -2px 0; } }
@media (prefers-reduced-motion: reduce) { .wheel-ai.no { animation: none; } .ai-fan.up { transition: opacity 90ms ease-out; } }

/* ---- the assistant's + (plusCard.js; the phone's ComposerPill + and PlusSheet), 21 Oct 2026 ----
   A coin on its lip in the box, as the row's coins are; lit in the accent while its card is up. The card stands over
   the bar — over the row and the AI's raised coin — and every tile is a real press: the model, Camera where there is
   one, Photo, File, Past chats. Picked photos and files wait as chips over the box until the next send. */
.cmd-plus { position: relative; width: 32px; height: 32px; padding: 0; border: none; background: none; cursor: pointer; align-self: flex-end; margin-bottom: 4px; -webkit-tap-highlight-color: transparent; }
.cmd-plus::after { content: ''; position: absolute; inset: -6px; }
.cmd-plus-face {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 29px; height: 32px; margin: 0 auto;
  border-radius: 50%; border: 1px solid var(--border); border-bottom-width: 4px;
  background: var(--surface-solid, var(--surface)); color: var(--ink);
  transition: transform 70ms ease-out, border-color 160ms ease, background 160ms ease;
}
.cmd-plus-face svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 40; }
.cmd-plus:active .cmd-plus-face { transform: translateY(2px); }
.cmd-plus.open .cmd-plus-face { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-solid, var(--surface))); }
.cmd-plus:focus-visible { outline: none; }
.cmd-plus:focus-visible .cmd-plus-face { outline: 2px solid var(--accent); outline-offset: 2px; }

.aiplus-card {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% + 16px); z-index: 40; max-width: 460px; margin: 0 auto;
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: 12px 8px 6px; box-sizing: border-box;
  animation: aiplus-in 180ms cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes aiplus-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aiplus-card { animation: none; } }
.aiplus-head { padding: 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink-muted); }
.aiplus-models { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 6px 2px; }
.aiplus-model { min-height: 32px; padding: 5px 11px; border-radius: 16px; border: 1px solid var(--border); background: none; color: var(--ink-muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.aiplus-model.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.aiplus-tiles { display: grid; grid-template-columns: repeat(var(--tiles, 4), minmax(0, 1fr)); justify-items: center; padding-top: 4px; }
.aiplus-tile { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px; border: none; background: none; color: var(--ink); font: inherit; cursor: pointer; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.aiplus-tile:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.aiplus-tile:active .aiplus-tile-circle { transform: scale(0.95); }
.aiplus-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.aiplus-tile-circle { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); transition: transform 70ms ease-out; }
.aiplus-tile-circle svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 32; }
.aiplus-tile-label { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--ink); overflow-wrap: break-word; }

/* The photos and files waiting to go: a line over the box, each with its ×; names whole, wrapping if they must. */
/* Over the box itself: past the profile coin at its left, short of the microphone at its right (.cmd-line's 10 + 44 + 6). */
.cmd-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 60px 4px; }
.cmd-files[hidden] { display: none; }
.cmd-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box; padding: 4px 4px 4px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-solid, var(--surface)); font-size: 12.5px; font-weight: 500; color: var(--ink-muted); }
.cmd-file img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; }
.cmd-file > svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 32; flex: none; }
.cmd-file-name { min-width: 0; overflow-wrap: anywhere; }
.cmd-file-x { position: relative; flex: none; width: 24px; height: 24px; padding: 0; border: none; border-radius: 12px; background: none; color: var(--ink-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cmd-file-x::after { content: ''; position: absolute; inset: -10px; }
.cmd-file-x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; }

/* …and in the bubble once sent: a picture as a small picture, a file as its name. */
.ai-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ai-file-pic { display: block; max-width: 160px; max-height: 160px; border-radius: 12px; object-fit: cover; }
.ai-file { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ai-file svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 32; flex: none; }

/* A photo sent this moment, before the server has it: the picture picked, from this browser. */
.ai-file-pic.local { opacity: 0.9; }

/* ==========================================================================
   Claude in the AI page (22 Oct 2026) — the Claude page became part of it
   (claudeChats.mjs, claudeFront.js; pages/chat.js hosts the Claude page's
   engine, pages/panes.js mountClaudeChat). The user: "I want the Claude code
   app and the main ai chat to be merged … I want it to feel seamless".
   ========================================================================== */

/* A Claude chat in front: the engine's layer has the page, its box stands where the AI's box does. */
.ai-claude { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ai-claude[hidden], .ai-page > .ai-scroll[hidden] { display: none; }
body.claude-front .cmd-wrap > .cmd-line,
body.claude-front .cmd-wrap > .cmd-ai,
body.claude-front .cmd-wrap > .cmd-claude,
body.claude-front .cmd-wrap > .cmd-files,
body.claude-front .convo-root,
body.claude-front .kb-space,
body.claude-front .cmd-splash,
body.claude-front .splash-side { display: none !important; }
.cmd-wrap > .pane-composer { padding: 0; background: none; }
.cmd-wrap > .pane-composer > .cmd-line.pane-composer-row { margin: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
@media (max-width: 359px) { .cmd-wrap > .pane-composer > .cmd-line.pane-composer-row { margin-left: 8px; margin-right: 8px; } }
.cmd-wrap > .pane-composer > .pane-bits { margin: 6px 10px 0; background: none; }

/* The chat's top in the AI page: its face, name and status, and under them the stats line. Below the rail's keys. */
.claude-top { flex: none; padding-top: calc(50px + env(safe-area-inset-top)); border-bottom: 1px solid var(--border); }
.claude-top > .pane-head { border-bottom: 0; padding-bottom: 2px; }
.claude-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 28px; box-sizing: border-box;
  margin: 0 12px 6px 60px; padding: 3px 8px 3px 0; border: 0; background: none; color: var(--ink-muted);
  font: inherit; font-size: 12.5px; line-height: 18px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.claude-stats[hidden] { display: none; }
.claude-stat { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.claude-stat.model { color: var(--ink); font-weight: 700; }
.claude-stat.server { font-weight: 600; }
.claude-stat-dot { color: var(--ink-faint, var(--ink-muted)); }
.claude-stat-more { display: inline-flex; }
.claude-stat-more svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 44; }
.claude-stats:hover .claude-stat-more, .claude-stats:focus-visible .claude-stat-more { color: var(--ink); }

/* The chat's card: the model, Ultra and effort, the plans, the server, the chat's own actions. */
.claude-card { --pane-needs: #9c5a0a; }
:root[data-theme='dark'] .claude-card { --pane-needs: #e0902a; }
.claude-card-sec { margin: 12px 0 4px; }
.claude-card-label { margin: 0 2px 7px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-muted); }
.claude-card-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.claude-card-controls .pane-ultra:not([hidden]) { display: inline-flex; align-items: center; }
.claude-card-controls .pane-model, .claude-card-controls .pane-ultra { margin-right: 0; }
.claude-card-controls .pane-model .model-long { display: inline; }
.claude-card-controls .pane-model .model-short, .claude-card-controls .pane-model .model-tiny { display: none; }
.claude-card .pane-usage { margin: 0; }
.claude-card-rows { margin-top: 10px; border-top: 1px solid var(--border); }
.claude-signin { margin-top: 8px; color: var(--accent); font-weight: 700; }
.claude-host { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 13px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.claude-host-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.claude-host-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.claude-host-state { font-size: 12.5px; font-weight: 700; color: var(--success); }
.claude-host-state.asleep, .claude-host-state.stopped { color: var(--ink-muted); }
.claude-host-state.unpaid, .claude-host-state.failed { color: var(--danger); }
.claude-host-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px 12px; }
/* A meter's name and its figure wrap in a narrow card rather than run into the next one ("Memory 42%Disk 41%", review 22 Oct 2026). */
.claude-host-meters .pane-meter-top { flex-wrap: wrap; white-space: normal; column-gap: 4px; }
.claude-host-facts { font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.claude-host-none { font-size: 13px; color: var(--ink-muted); }
.claude-host-act {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 17px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface));
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.claude-host-act svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 40; }

/* A Claude chat carried on from an assistant chat: the chat it came from, folded, over what was asked. */
.pane-carried {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 2px 0;
  border: 0; background: none; color: inherit; opacity: 0.8; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: left;
}
.pane-carried svg { flex: none; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 36; }
.pane-carried-lines { margin: 0 0 8px; padding-left: 9px; border-left: 2px solid currentColor; opacity: 0.85; font-size: 12.5px; line-height: 17px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Under an assistant chat carried on into Claude: the way to it. */
.ai-handoff {
  display: flex; align-items: center; gap: 10px; width: min(100%, 520px); box-sizing: border-box; margin: 4px auto 14px; padding: 10px 14px;
  border: 1px solid var(--border); border-bottom-width: 3px; border-radius: 16px; background: var(--surface-solid, var(--surface));
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ai-handoff:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.ai-handoff-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ai-handoff-head { font-size: 12px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; color: var(--ink-muted); }
.ai-handoff-name { font-size: 14.5px; font-weight: 700; overflow-wrap: break-word; }
.ai-handoff > svg { flex: none; width: 18px; height: 18px; stroke: var(--ink-muted); fill: none; stroke-width: 40; }

/* The box's "@c": the chip over it — Claude, the project, a way back to the assistant. */
.cmd-claude {
  display: inline-flex; align-items: stretch; max-width: calc(100% - 82px); box-sizing: border-box; height: 30px; margin: 0 16px 0 66px;
  border-radius: 15px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); vertical-align: bottom;
}
.cmd-claude[hidden] { display: none; }
.cmd-claude-pick {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 0 6px 0 4px; border: 0; background: none;
  color: inherit; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.cmd-claude-pick svg { flex: none; width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 48; }
.cmd-claude-proj { min-width: 0; overflow-wrap: break-word; text-align: left; line-height: 14px; }
@media (max-width: 360px) { .cmd-claude-who, .cmd-claude-sep { display: none; } }
.cmd-claude-sep { opacity: 0.6; }
.cmd-claude-dot {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: -0.2px;
}
.claude-proj-menu .cmd-claude-dot { width: 24px; height: 24px; margin-right: 10px; font-size: 10px; }
.claude-proj-menu .pane-menu-row.on { color: var(--accent); font-weight: 700; }
.cmd-claude-x { flex: none; width: 30px; display: inline-grid; place-items: center; border: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); background: none; color: inherit; cursor: pointer; }
.cmd-claude-x svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 48; }
.cmd-claude-pick:focus-visible, .cmd-claude-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 15px; }

/* A Claude chat in the list: its face, its name and status, its project and last words. */
.ai-chat.claude .ai-chat-open, .ai-chat-open:has(> .ai-chat-face) { flex-direction: row; align-items: center; gap: 10px; }
.ai-chat-face { flex: none; display: flex; }
.ai-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-chat-when.working, .ai-fan-when.working { color: #1F5FBF; }
:root[data-theme='dark'] .ai-chat-when.working, :root[data-theme='dark'] .ai-fan-when.working { color: #6AA5FF; }
.ai-chat-when.needs, .ai-fan-when.needs { color: #9c5a0a; }
:root[data-theme='dark'] .ai-chat-when.needs, :root[data-theme='dark'] .ai-fan-when.needs { color: #e0902a; }
.ai-chat-when.failed, .ai-fan-when.failed { color: var(--danger); }
.ai-chat.claude:hover .ai-chat-when, .ai-chat.claude:focus-within .ai-chat-when { visibility: visible; }

/* The projects at the head of the list: chips that wrap, never a row that scrolls sideways. */
.ai-proj-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 4px; max-height: 26vh; overflow-y: auto; }
.ai-proj-chips[hidden] { display: none; }
.ai-proj-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 3px 12px 3px 4px;
  border-radius: 16px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface));
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ai-proj-chip.on { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.ai-proj-chip:active { transform: translateY(1.5px); border-bottom-width: 1.5px; }
.ai-proj-name { overflow-wrap: anywhere; }
.ai-proj-dot {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-faint, var(--ink-muted)); color: #fff; font-size: 9.5px; font-weight: 800;
}
.ai-proj-dot.moon { background: #1F2B50; }
.ai-proj-dot.moon svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 40; }
/* A project's page in the list: its tasks, ideas and chats (the Claude page's own business page), scrolling inside. */
.ai-chats-panel.project { height: calc(100% - env(safe-area-inset-top) - 64px); }
.ai-proj-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ai-proj-page[hidden], .ai-chats-list[hidden] { display: none; }
.ai-proj-page > .pane-layout { flex: 1; min-height: 0; background: none; }
.ai-proj-page .pane-list { padding: 0 10px 14px; }
.ai-proj-page .pane-list-head { margin: 0 -10px; padding: 4px 12px 6px; background: var(--surface-solid, var(--surface)); }
.ai-proj-page .pane-list-head::after { background: linear-gradient(var(--surface-solid, var(--surface)), transparent); }
.ai-proj-page .pane-layout[data-only] > .pane-chat { display: none; }
.ai-claude > .pane-layout[data-only='chat'] > .pane-list { display: none; }

/* A Claude chat in the AI coin's fan: its face before its name, its status where the time is. */
.ai-fan-opt.claude, .ai-fan-opt.face { gap: 8px; padding-left: 10px; }
.ai-fan-aiface { flex: none; display: flex; }
.ai-fan-opt.claude .work-chat-face { flex: none; display: flex; }
/* What it last said, or asks, over its row while a finger rests on it. A preview of what a tap opens. */
.ai-fan-peek {
  position: absolute; left: 0; right: 0; z-index: 3; box-sizing: border-box; padding: 10px 12px 11px;
  border-radius: 16px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2); pointer-events: none; animation: ai-peek-in 140ms ease-out;
}
:root[data-theme='dark'] .ai-fan-peek { background: color-mix(in srgb, var(--surface-solid, var(--surface)) 88%, #fff); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); }
.ai-fan-peek.asks { border-color: #9c5a0a; }
:root[data-theme='dark'] .ai-fan-peek.asks { border-color: #e0902a; }
.ai-fan-peek-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 12px; font-weight: 800; color: var(--ink-muted); }
.ai-fan-peek.asks .ai-fan-peek-status { color: #9c5a0a; }
:root[data-theme='dark'] .ai-fan-peek.asks .ai-fan-peek-status { color: #e0902a; }
.ai-fan-peek-words { /* preview: of a chat a tap opens whole */ font-size: 13.5px; line-height: 18px; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes ai-peek-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ai-fan-peek { animation: none; } }
.ai-chats-head[hidden] { display: none; }
.ai-proj-chip[hidden] { display: none; }
.ai-proj-chip.more { padding: 3px 12px; color: var(--ink-muted); }
/* A project's page in the list: its titles whole (the Claude page's rows cut them to one line). */
.ai-proj-page .pane-row-title, .ai-proj-page .pane-row-title.small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.ai-proj-page .work-band { padding-top: 6px; }
/* A long name beside a long status grows its row rather than spill out of it. */
.ai-fan-opt.claude { height: auto; min-height: 46px; padding-top: 4px; padding-bottom: 4px; }
/* The Claude page's engine in the AI page stands alone at every width: never its two columns side by side. */
@media (min-width: 720px) {
  .pane-layout[data-only] { flex-direction: column; }
  .pane-layout[data-only='chat'][data-view] > .pane-list,
  .pane-layout[data-only='biz'][data-view] > .pane-chat,
  .pane-layout[data-only='night'][data-view] > .pane-chat { display: none; }
  .pane-layout[data-only] > .pane-list { flex: 1 1 auto; border-right: 0; }
}
.ai-handoff-sub { font-size: 12.5px; color: var(--ink-muted); overflow-wrap: break-word; }

/* A finger's ✕ on the @c chip: the whole 44 (22 Oct 2026 review: 30×30 on a phone), and the chip kept inside the box at 320. */
@media (pointer: coarse) {
  .cmd-claude { height: auto; min-height: 36px; }
  .cmd-claude-x { width: 44px; min-height: 36px; }
}
@media (max-width: 360px) {
  .cmd-claude { margin-left: 52px; margin-right: 10px; max-width: calc(100% - 62px); }
}
/* The sleeping face's "zz" stands clear of the name beside it (22 Oct 2026 review). */
.ai-chat-face, .ai-fan-opt.claude .work-chat-face { margin-right: 4px; }