/*
 * R56-P2 — the chat's look (the app's message_tile / chat_look, R55-P7 → P11).
 * Plain text, linked after rolemodel.css; style.css stays append-only.
 *
 * Everything is scoped to `.dochi-chat` — the chat page AND the Appearance
 * page's preview carry it, so the preview is drawn by the same rules as the
 * chat. The colours, type and spacing arrive as custom properties written once
 * per look by chat-render.js (`applyLook`); this file only says where they go.
 *
 * ⚠️ style.css still carries four generations of bubble rules, two with
 * `!important` on background / border / shadow. The properties those set are
 * re-declared here with `!important` under `.dochi-chat` — on purpose, once.
 */

.dochi-chat {
  --chat-ground: #0A0A0F;
  --chat-col: 900px;
  --cyan: #00F0FF;
  --ease-c: cubic-bezier(.215, .61, .355, 1);   /* Flutter easeOutCubic */
  --ease-q: cubic-bezier(.23, 1, .32, 1);       /* Flutter easeOutQuint */
  color-scheme: dark;
}

/* ── backdrop: art (image or MP4 loop), darkened art, or a plain colour ────── */
.dochi-chat::before { display: none !important; }
.dochi-chat .chat-bg-blur {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  filter: none !important; transform: none !important;
  background: var(--chat-ground) !important;
}
.dochi-chat .chat-bg-blur > img,
.dochi-chat .chat-bg-blur > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 27.5%;   /* the app's Alignment(0, -0.45): heads stay in frame */
}
/* The chat's own legibility scrim (the app's stops), plus the chosen darkness. */
.dochi-chat .chat-bg-blur::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,var(--dim, 0)), rgba(0,0,0,var(--dim, 0))),
    linear-gradient(180deg, rgba(5,5,5,.85) 0%, rgba(5,5,5,.6) 42%, rgba(5,5,5,.75) 92%);
}
.dochi-chat[data-look-bg="plain"] .chat-bg-blur { background: var(--plain-bg) !important; }
.dochi-chat[data-look-bg="plain"] .chat-bg-blur::after { display: none; }

/* ── the message column ───────────────────────────────────────────────────── */
.dochi-chat .chat-canvas {
  gap: 0 !important;
  padding: 16px max(16px, calc((100% - var(--chat-col)) / 2)) 16px !important;
  scroll-behavior: auto;
}
.dochi-chat .chat-message {
  position: relative;
  display: flex; flex-direction: column;
  max-width: none !important; width: auto;
  margin: 0 0 16px;
  animation: none;
}
.dochi-chat .chat-message.user-message { align-self: flex-end; align-items: flex-end; max-width: 82% !important; padding-left: 40px; }
.dochi-chat .chat-message.ai-message { align-self: flex-start; align-items: flex-start; max-width: var(--a-max, 82%) !important; }
.dochi-chat .chat-message.intro-msg { align-self: flex-start; }
.dochi-chat .msg-stack { display: flex; flex-direction: column; align-items: inherit; max-width: 100%; }

/* ── bubbles ──────────────────────────────────────────────────────────────── */
.dochi-chat .chat-message .bubble {
  position: relative;
  max-width: 100%;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-weight: 400 !important;
  overflow-wrap: anywhere;
}
.dochi-chat .user-message .bubble {
  background: var(--u-bg) !important;
  border: var(--u-border) !important;
  border-right: var(--u-edge) !important;
  box-shadow: var(--u-shadow) !important;
  border-radius: var(--u-radius) !important;
  padding: var(--u-pad) !important;
  color: var(--u-text) !important;
  font-family: var(--u-font); font-size: var(--u-size) !important; line-height: var(--lh);
  text-shadow: var(--txt-shadow);
}
.dochi-chat .ai-message .bubble,
.dochi-chat .typing-msg .bubble {
  background: var(--a-bg) !important;
  border: var(--a-border) !important;
  border-left: var(--a-edge) !important;
  box-shadow: var(--a-shadow) !important;
  border-radius: var(--a-radius) !important;
  padding: var(--a-pad) !important;
  color: var(--a-text) !important;
  font-family: var(--a-font); font-size: var(--a-size) !important; line-height: var(--lh);
  text-shadow: var(--txt-shadow);
}
/* The greeting is a reply like any other — the old "intro card" look is gone. */
.dochi-chat .intro-msg .bubble { border-left-width: revert; }
.dochi-chat[data-look-family="classic"] .intro-msg .bubble { border-left: var(--a-edge) !important; }
.dochi-chat .bubble p { margin: 0; white-space: normal; }
.dochi-chat .msg-body { white-space: normal; }

.dochi-chat .user-message .rp-action { color: var(--u-narr) !important; font-size: var(--u-size-act); font-style: italic; font-weight: 400 !important; }
.dochi-chat .user-message .rp-speech { color: inherit !important; font-weight: 700 !important; }
.dochi-chat .ai-message .rp-action { color: var(--narr) !important; font-size: var(--a-size-act); font-style: italic; font-weight: 400 !important; }
.dochi-chat .ai-message .rp-speech { color: var(--speech) !important; font-weight: 700 !important; }
.dochi-chat .u-prefix { margin-right: 0; }

/* Paragraph beats (every family but Classic). */
.dochi-chat .rp-para + .rp-para { margin-top: var(--para-gap); }
.dochi-chat .para-card + .para-card { margin-top: var(--para-gap); }

/* Tails (Comic, Messenger): one shape with the bubble, stroked only on its slants. */
.dochi-chat[data-look-tail="1"] .chat-message { margin-bottom: 26px; }
.dochi-chat .bubble-tail { position: absolute; bottom: -11px; width: 16px; height: 12px; overflow: visible; pointer-events: none; }
.dochi-chat .ai-message .bubble-tail { left: 18px; }
.dochi-chat .user-message .bubble-tail { right: 18px; }
.dochi-chat .user-message .bubble-tail .t-fill { fill: var(--tail-u-fill); }
.dochi-chat .user-message .bubble-tail .t-line { stroke: var(--tail-u-stroke); stroke-width: var(--tail-u-bw); stroke-linejoin: round; fill: none; }
.dochi-chat .ai-message .bubble-tail .t-fill { fill: var(--tail-a-fill); }
.dochi-chat .ai-message .bubble-tail .t-line { stroke: var(--tail-a-stroke); stroke-width: var(--tail-a-bw); stroke-linejoin: round; fill: none; }

/* ── the speaker line: avatar · name · time ───────────────────────────────── */
.dochi-chat .msg-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; min-width: 0; max-width: 100%; }
.dochi-chat .mh-avatar {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 700;
}
.dochi-chat .mh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dochi-chat .mh-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--name-ink); font-weight: 700; font-size: 13px; text-shadow: var(--txt-shadow); }
.dochi-chat .mh-time { color: rgba(255,255,255,.35); font-size: 10px; flex: 0 0 auto; }
.dochi-chat .user-message .msg-time { display: block; margin-top: 3px; font-size: 10px; color: var(--u-ink-45) !important; text-align: right; opacity: 1; }

/* ── the reply's tools ────────────────────────────────────────────────────── */
.dochi-chat .ai-message .msg-actions { display: none; }
.dochi-chat .ai-message.latest-ai .msg-actions { display: flex; animation: none; margin: 8px 0 0; }
.dochi-chat .msg-actions.footer { margin: 4px 0 0 !important; padding-top: 2px; border-top: 1px solid var(--a-ink-12); }
.dochi-chat .mt-pill {
  display: flex; flex-wrap: wrap; align-items: center;
  padding: 2px 4px; border-radius: 20px;   /* ⚠️ not a stadium: it must still look right on a second line */
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
}
.dochi-chat .msg-actions.footer .mt-pill { background: none; border: none; padding: 0; color: var(--a-ink-72); }
.dochi-chat .mt-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer;
  transition: background-color 160ms var(--ease-c), color 160ms var(--ease-c);
}
.dochi-chat .mt-btn svg { width: 18px; height: 18px; }
.dochi-chat .mt-btn:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.dochi-chat .mt-btn:disabled { opacity: .38; cursor: default; }
.dochi-chat .mt-btn:focus-visible, .dochi-chat .rp-say:focus-visible, .dochi-chat .msg-pic:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dochi-chat .mt-btn.speaking, .dochi-chat .rp-say.speaking { color: var(--cyan); }
.dochi-chat .mt-variants { display: inline-flex; align-items: center; margin-right: 4px; }
.dochi-chat .mt-count { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .76; min-width: 26px; text-align: center; }
.dochi-chat .msg-actions.compact { flex-direction: column; align-items: flex-start; }
.dochi-chat .msg-actions.compact .mt-fold { color: rgba(255,255,255,.72); }
.dochi-chat .msg-actions.compact .mt-pill[hidden] { display: none; }

.dochi-chat .para-tools { display: flex; justify-content: flex-end; align-items: center; color: var(--para-ink); margin-top: 2px; }
.dochi-chat .pt-spin {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
}
.dochi-chat .pt-spin::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0,240,255,.25); border-top-color: var(--cyan);
  animation: chatSpin .8s linear infinite;
}
@keyframes chatSpin { to { transform: rotate(360deg); } }

/* The small speaker before a quoted line. */
.dochi-chat .rp-say {
  display: inline-grid; place-items: center; vertical-align: -2px;
  width: 19px; height: 19px; padding: 0 4px 0 0; margin: 0;
  border: 0; background: none; color: var(--a-ink-42); cursor: pointer;
}
.dochi-chat .rp-say svg { width: 15px; height: 15px; }
.dochi-chat .rp-say:hover { color: var(--a-text); }

/* ── reactions, pictures, cut-off ─────────────────────────────────────────── */
.dochi-chat .msg-reaction {
  display: inline-block; margin-top: 8px; padding: 3px 8px; font-size: 15px; line-height: 1.2;
  border-radius: 20px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
  animation: reactPop 220ms cubic-bezier(.175,.885,.32,1.275) backwards;
}
@keyframes reactPop { from { transform: scale(.4); opacity: 0; } }
.dochi-chat .msg-pics { margin: 8px 0; }
.dochi-chat .msg-pics:first-child { margin-top: 0; }
.dochi-chat .msg-pics.strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.dochi-chat .msg-pic { padding: 0; border: 0; background: rgba(255,255,255,.13); cursor: zoom-in; display: block; overflow: hidden; }
.dochi-chat .msg-pics.one .msg-pic { width: min(180px, 100%); aspect-ratio: 9 / 16; max-height: 240px; border-radius: 14px; }
.dochi-chat .msg-pic.in-strip { flex: 0 0 63px; height: 112px; border-radius: 10px; }
.dochi-chat .msg-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dochi-chat .msg-photo-bubble { margin-top: 8px; padding: 6px !important; }
.dochi-chat[data-look-tail="1"] .msg-photo-bubble { margin-top: 16px; }
.dochi-chat .msg-cutoff { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: rgba(255,255,255,.62); font-size: 12px; font-weight: 500; }
.dochi-chat .msg-cutoff svg { width: 14px; height: 14px; flex: 0 0 14px; }
.dochi-chat .mc-line { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; }
.dochi-chat .mc-line svg { margin-top: 1px; }
.dochi-chat .mc-continue {
  min-height: 48px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px;
  border: 0; border-radius: 20px; background: none; color: var(--cyan); font-weight: 700; font-size: 13px; cursor: pointer;
}
.dochi-chat .mc-continue svg { width: 16px; height: 16px; }

/* ── Thoughts (collapsed by default) ──────────────────────────────────────── */
.dochi-chat .rp-thoughts {
  align-self: flex-start; max-width: 100%; margin: 0 0 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
}
.dochi-chat .rp-thoughts-head { color: rgba(255,255,255,.62); font-size: 12px; font-weight: 600; min-height: 36px; }
.dochi-chat .rp-thoughts-body { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.45; }

/* ── the typing indicator wears the companion's bubble ────────────────────── */
.dochi-chat .typing-msg { align-self: flex-start; }
.dochi-chat .typing-bubble { color: var(--a-ink-72) !important; font-size: 14px !important; }
.dochi-chat .typing-name { color: var(--a-text); }

/* ── entrances: only for genuinely new turns; `backwards`, never `both` ──── */
@keyframes msgInFade { from { opacity: 0; } }
@keyframes msgInSlideU { from { opacity: 0; transform: translateX(8%); } }
@keyframes msgInSlideA { from { opacity: 0; transform: translateX(-5%); } }
.dochi-chat .msg-in-fade { animation: msgInFade 300ms var(--ease-c) backwards; }
.dochi-chat .user-message.msg-in-fade { animation-duration: 220ms; }
.dochi-chat .msg-in-slide-u { animation: msgInSlideU 220ms var(--ease-c) backwards; }
.dochi-chat .msg-in-slide-a { animation: msgInSlideA 300ms var(--ease-c) backwards; }

/* The chat is dark in BOTH themes (the app's R38): the light theme must not reach in. */
[data-theme="light"] .dochi-chat { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .dochi-chat .msg-in-fade, .dochi-chat .msg-in-slide-u, .dochi-chat .msg-in-slide-a, .dochi-chat .msg-reaction { animation: none !important; }
  .dochi-chat .mt-btn { transition: none; }
}

/* ══ R56-P2 — the shell: header, deck, rail, composer, menu, Orbit ═════════════ */

/* The chat fills the content area edge to edge (the app's full-screen chat). */
.content-area:has(> .dochi-chat) { padding: 0 !important; overflow: hidden !important; }
/* The floating version badge would sit on the composer's Send button. */
body:has(.dochi-chat) #version-badge { display: none !important; }
.dochi-chat.chatmode-wrapper {
  --hdr-h: 64px;
  --deck-h: 0px;
  --rail-pad: 0px;
  position: relative; display: flex; flex-direction: column;
  height: 100% !important; min-height: 0; overflow: hidden; isolation: isolate;
  background: var(--chat-ground);
}
.dochi-chat[data-layout="deck"] { --deck-h: 48px; }
.dochi-chat[data-layout="rail"] { --rail-pad: 48px; }

/* ── header: over the art, ink with a soft shadow; the shade is optional ── */
.dochi-chat .chat-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  height: var(--hdr-h); display: flex; align-items: center; gap: 4px;
  padding: 8px max(8px, calc((100% - var(--chat-col)) / 2 - 40px));
  background: transparent !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  transition: transform 260ms var(--ease-q);
}
.dochi-chat[data-look-shade="1"] .chat-header::before {
  content: ''; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,15,.94) 0%, rgba(10,10,15,.85) 62%, rgba(10,10,15,0) 100%);
}
.dochi-chat[data-header-away="1"] .chat-header,
.dochi-chat[data-header-away="1"] .chat-deck { transform: translateY(calc(-1 * (var(--hdr-h) + var(--deck-h)))); pointer-events: none; }
.dochi-chat .ch-back, .dochi-chat .ctl-icon {
  width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.75));
  transition: background-color 160ms var(--ease-c);
}
.dochi-chat .ch-back svg, .dochi-chat .ctl-icon svg { width: 22px; height: 22px; }
.dochi-chat .ch-back:hover, .dochi-chat .ctl-icon:hover { background: rgba(255,255,255,.1); }
.dochi-chat .ch-identity { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.dochi-chat .chat-avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  background: rgba(255,255,255,.12) center / cover no-repeat;
  display: grid; place-items: center; color: #fff; font-weight: 800;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.5);
}
.dochi-chat .ch-name {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; font-weight: 800; line-height: 1.2; color: #fff; letter-spacing: 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
.dochi-chat .ch-trail { display: flex; align-items: center; gap: 2px; }

/* ── the band chip (model): a 48px target around a small drawn pill ── */
.dochi-chat .ctl-chip { min-height: 48px; padding: 0 2px; border: 0; background: none; cursor: pointer; display: inline-grid; place-items: center; }
.dochi-chat .ctl-chip .pill {
  display: inline-flex; align-items: center; gap: 5px; max-width: 170px;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11.5px; font-weight: 800; line-height: 1.2;
}
.dochi-chat .ctl-band .pill { color: var(--band); background: rgba(0,0,0,.32); border: 1px solid color-mix(in srgb, var(--band) 55%, transparent); }
.dochi-chat .ctl-persona .pill { color: #fff; font-weight: 600; font-size: 12px; background: rgba(0,240,255,.10); border: 1px solid rgba(0,240,255,.28); }
.dochi-chat .ctl-persona svg { width: 13px; height: 13px; color: var(--cyan); }
.dochi-chat .ctl:disabled { opacity: .35; cursor: default; }
.dochi-chat .ctl:focus-visible, .dochi-chat .ch-back:focus-visible, .dochi-chat .cmp-menu:focus-visible,
.dochi-chat .cmp-send:focus-visible, .dochi-chat .chat-nav-tile:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dochi-chat [data-busy="1"] svg { animation: chatPulse 1s ease-in-out infinite; }
@keyframes chatPulse { 50% { opacity: .35; } }

/* ── Deck: a row of named chips under the header ── */
.dochi-chat .chat-deck {
  position: absolute; left: 0; right: 0; top: var(--hdr-h); z-index: 5; height: 44px;
  display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 0 max(12px, calc((100% - var(--chat-col)) / 2));
  transition: transform 260ms var(--ease-q);
}
.dochi-chat .chat-deck[hidden] { display: none; }
.dochi-chat .ctl-deck {
  flex: 0 0 auto; max-width: 170px; height: 32px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 11px; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.9);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  animation: deckIn 380ms var(--ease-q) backwards;
}
.dochi-chat .ctl-deck:nth-child(2) { animation-delay: 46ms; }
.dochi-chat .ctl-deck:nth-child(3) { animation-delay: 92ms; }
.dochi-chat .ctl-deck:nth-child(4) { animation-delay: 138ms; }
.dochi-chat .ctl-deck svg { width: 15px; height: 15px; opacity: .85; }
.dochi-chat .ctl-deck span { overflow: hidden; text-overflow: ellipsis; }
.dochi-chat .ctl-deck.ctl-band { color: var(--band); font-weight: 800; background: color-mix(in srgb, var(--band) 14%, transparent); border-color: color-mix(in srgb, var(--band) 55%, transparent); }
@keyframes deckIn { from { opacity: 0; transform: translateX(-18px) scale(.86); } }

/* ── Rail: a slim column on the right that steps aside while you read or write ── */
.dochi-chat .chat-rail {
  position: absolute; z-index: 5; right: max(8px, calc((100% - var(--chat-col)) / 2 - 56px)); top: 50%;
  width: 42px; padding: 4px 0; display: flex; flex-direction: column; align-items: center;
  border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.14);
  transform: translateY(-50%); transition: transform 260ms var(--ease-q), opacity 260ms var(--ease-q);
}
.dochi-chat .chat-rail[hidden] { display: none; }
.dochi-chat[data-rail-away="1"] .chat-rail { transform: translate(130%, -50%); opacity: 0; pointer-events: none; }
.dochi-chat .ctl-rail { width: 42px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: rgba(255,255,255,.9); cursor: pointer; border-radius: 999px; }
.dochi-chat .ctl-rail svg { width: 21px; height: 21px; }
.dochi-chat .ctl-rail.ctl-band { color: var(--band); }
.dochi-chat .ctl-rail:hover { background: rgba(255,255,255,.08); }

/* ── the conversation, under the header (messages stop below it unless the shade is on) ── */
.dochi-chat .chat-canvas {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; z-index: 1;
  padding-top: calc(var(--hdr-h) + var(--deck-h) + 8px) !important;
  padding-right: calc(max(16px, calc((100% - var(--chat-col)) / 2)) + var(--rail-pad)) !important;
  clip-path: inset(calc(var(--hdr-h) + var(--deck-h)) 0 0 0);
  transition: clip-path 260ms var(--ease-q);
}
.dochi-chat[data-look-shade="1"] .chat-canvas,
.dochi-chat[data-header-away="1"] .chat-canvas { clip-path: inset(0 0 0 0); }

/* ── the composer: a floating card (Classic, Command) or one line (the rest) ── */
.dochi-chat .chat-input-dock {
  position: relative; z-index: 4; flex: 0 0 auto;
  background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 4px max(12px, calc((100% - var(--chat-col)) / 2)) calc(12px + env(safe-area-inset-bottom)) !important;
}
.dochi-chat .composer {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  margin: 0; padding: 5px 6px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.35));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 24px rgba(0,229,255,.13);
  transition: border-color 160ms var(--ease-c), border-radius 260ms var(--ease-q);
}
.dochi-chat[data-composer="slim"] .composer { padding: 3px 4px; border-radius: 28px; background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.5)); }
.dochi-chat[data-composing="1"] .composer { border-color: rgba(255,255,255,.24); }
.dochi-chat[data-expanded="1"] .composer { border-radius: 24px; background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.86)); }
.dochi-chat .cmp-field-row { display: flex; align-items: flex-end; min-width: 0; }
.dochi-chat .cmp-lead { display: flex; align-items: center; flex: 0 0 auto; }
.dochi-chat .cmp-lead:empty { width: 2px; }
.dochi-chat[data-composing="1"] .cmp-lead { display: none; }
.dochi-chat #chat-input-field {
  flex: 1 1 auto; min-width: 0; min-height: 48px; max-height: 40vh; resize: none;
  margin: 0; padding: 13px 12px; border: 0 !important; outline: none; box-shadow: none !important;
  background: none !important; color: #fff; caret-color: var(--cyan);
  font-size: 15.5px; font-weight: 400; line-height: 1.4; font-family: inherit; overflow-y: auto;
}
.dochi-chat #chat-input-field::placeholder { color: rgba(255,255,255,.4); }
.dochi-chat[data-expanded="1"] #chat-input-field { height: min(560px, 52vh) !important; max-height: none; }
.dochi-chat .cmp-action-row { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 2px 2px 4px; }
.dochi-chat .cmp-dock { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.dochi-chat[data-composing="1"] .cmp-dock .ctl:not([data-ctl="persona"]) { display: none; }
.dochi-chat .cmp-markup, .dochi-chat .cmp-expand { display: none; }
.dochi-chat[data-composing="1"] .cmp-markup {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7);
  font-size: 12px; font-style: italic; font-weight: 600;
}
.dochi-chat[data-composing="1"] .cmp-expand {
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto;
  border: 0; border-radius: 50%; background: none; color: rgba(255,255,255,.7); cursor: pointer;
}
.dochi-chat .cmp-expand svg { width: 18px; height: 18px; }
.dochi-chat[data-composer="slim"] .cmp-action-row { display: none; }
.dochi-chat[data-composer="slim"][data-composing="1"] .cmp-action-row { display: flex; padding: 0 2px 2px 6px; }
.dochi-chat[data-composer="slim"] .cmp-action-row .cmp-dock { display: none; }
.dochi-chat[data-composer="slim"][data-composing="1"] .cmp-markup { margin-right: auto; }

/* ONE control, ONE position, TWO identities: the menu while there is nothing
   to send, Send once there is (the app's R37-P1, on the web's terms). */
.dochi-chat .cmp-morph { position: relative; width: 48px; height: 48px; flex: 0 0 48px; margin-left: auto; }
.dochi-chat .cmp-menu, .dochi-chat .cmp-send {
  position: absolute; inset: 2px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  transition: opacity 160ms var(--ease-c), transform 260ms var(--ease-q), filter 160ms var(--ease-c);
}
.dochi-chat .cmp-menu { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; }
.dochi-chat .cmp-menu svg { width: 20px; height: 20px; }
.dochi-chat .cmp-menu.has-dot::after {
  content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: #FF00E6; box-shadow: 0 0 8px rgba(255,0,230,.6);
}
.dochi-chat .cmp-send { border: 0; color: #fff; background: linear-gradient(135deg, #00F0FF, #FF00E6); box-shadow: 0 0 16px rgba(0,240,255,.45); }
.dochi-chat .cmp-send svg { width: 20px; height: 20px; }
.dochi-chat .cmp-send:disabled { filter: saturate(.4) brightness(.8); box-shadow: none; cursor: default; }
.dochi-chat .cmp-morph[data-mode="menu"] .cmp-send,
.dochi-chat .cmp-morph[data-mode="send"] .cmp-menu { opacity: 0; transform: scale(.6) rotate(-45deg); pointer-events: none; }

/* the suggestion chips sit just above the composer */
.dochi-chat .suggestion-chips-bar { max-width: 100%; margin: 0 0 6px; }

/* ── Orbit: the orb and its fan ── */
.dochi-chat .ctl-orb { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.dochi-chat .orb-face {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle, #0c0d14 58%, transparent 60%), conic-gradient(from 210deg, #00F0FF, #FF00E6, #9D5CFF, #00F0FF);
  transition: transform 260ms var(--ease-q);
}
.dochi-chat .orb-face svg { width: 18px; height: 18px; }
.dochi-chat[data-fan="1"] .orb-face { transform: rotate(45deg); }
.dochi-chat .orbit-fan { position: absolute; inset: 0; z-index: 30; }
.dochi-chat .orbit-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.dochi-chat .orbit-item {
  position: absolute; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(12,13,20,.92); color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.dochi-chat .orbit-item svg { width: 21px; height: 21px; }
.dochi-chat .orbit-item[data-fan="model"] { color: var(--band); border-color: color-mix(in srgb, var(--band) 55%, transparent); }
.dochi-chat .orbit-item span {
  position: absolute; left: 56px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 700; color: #fff;
}

/* ── the chat menu: grows out of the menu button as a circle ── */
.dochi-chat .chat-nav { position: absolute; inset: 0; z-index: 40; overflow: hidden; background: #050505; }
.dochi-chat .chat-nav-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 27.5%; }
.dochi-chat .chat-nav-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,8,.9) 0%, rgba(5,5,8,.85) 40%, rgba(5,5,8,.95) 100%); }
.dochi-chat .chat-nav-inner { position: relative; height: 100%; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
.dochi-chat .chat-nav-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; }
.dochi-chat .chat-nav-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 22px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dochi-chat .chat-nav-close { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.dochi-chat .chat-nav-close svg { width: 22px; height: 22px; }
.dochi-chat .chat-nav-close:hover { background: rgba(255,255,255,.08); }
.dochi-chat .chat-nav-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 24px; }
.dochi-chat .chat-nav-group h3 { margin: 16px 0 8px; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.5); }
.dochi-chat .chat-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.dochi-chat .chat-nav-tile {
  position: relative; aspect-ratio: .92; min-height: 104px; padding: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);
  color: #fff; cursor: pointer; text-align: center;
  transition: background-color 160ms var(--ease-c), border-color 160ms var(--ease-c), transform 160ms var(--ease-c);
}
.dochi-chat .chat-nav-tile:hover { background: rgba(255,255,255,.1); border-color: rgba(0,240,255,.35); transform: translateY(-2px); }
.dochi-chat .nav-ico { color: var(--cyan); display: grid; place-items: center; }
.dochi-chat .nav-ico svg { width: 26px; height: 26px; }
.dochi-chat .nav-label { font-size: 12.5px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dochi-chat .nav-sub { font-size: 11px; color: rgba(255,255,255,.5); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dochi-chat .chat-nav-tile.danger { background: rgba(255,59,48,.08); border-color: rgba(255,59,48,.25); }
.dochi-chat .chat-nav-tile.danger .nav-ico, .dochi-chat .chat-nav-tile.danger .nav-label { color: #FF6B61; }
.dochi-chat .nav-new { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #FF00E6; box-shadow: 0 0 8px rgba(255,0,230,.6); }
.dochi-chat .chat-nav.tiles-in .chat-nav-tile { animation: navTileIn 220ms var(--ease-c) backwards; animation-delay: calc(140ms + var(--i, 0) * 28ms); }
@keyframes navTileIn { from { opacity: 0; transform: scale(.94); } }

/* the morph's in-flight copies (inside the chat root, so they keep its styles) */
.dochi-chat .ctl-ghost { transition: none !important; animation: none !important; }

/* ── small sheets (Enhancement) on the Studio's tag-picker frame ── */
.chat-sheet .tag-picker-body { display: flex; flex-direction: column; gap: 4px; }
.sheet-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer;
}
.sheet-switch > span { display: flex; flex-direction: column; gap: 2px; }
.sheet-switch strong { font-size: 15px; color: var(--text-primary, #fff); }
.sheet-switch small { font-size: 12.5px; color: var(--text-secondary, rgba(255,255,255,.6)); }
.sheet-switch input { width: 20px; height: 20px; accent-color: #00F0FF; flex: 0 0 auto; }
.sheet-switch.locked { opacity: .7; cursor: default; }
.sheet-note { margin: 10px 4px 0; font-size: 12.5px; color: var(--text-secondary, rgba(255,255,255,.6)); }

@media (prefers-reduced-motion: reduce) {
  .dochi-chat .chat-header, .dochi-chat .chat-deck, .dochi-chat .chat-rail, .dochi-chat .chat-canvas,
  .dochi-chat .composer, .dochi-chat .cmp-menu, .dochi-chat .cmp-send, .dochi-chat .orb-face { transition: none !important; }
  .dochi-chat .ctl-deck, .dochi-chat .chat-nav.tiles-in .chat-nav-tile { animation: none !important; }
}

/* ══ R56-P2 — Appearance (the app's Chat Customization) ═════════════════════ */
.cz-page {
  --panel: .48;
  --cz-top: 56px;
  position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column;
  background: #050505; color: #fff; color-scheme: dark;
}
.cz-top { height: var(--cz-top); flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(5,5,5,.92); border-bottom: 1px solid rgba(255,255,255,.08); }
.cz-top h2 { flex: 1; margin: 0; min-width: 0; font-size: 18px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.cz-icon svg { width: 22px; height: 22px; }
.cz-icon:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.cz-icon:disabled { opacity: .3; cursor: default; }
.cz-save { min-width: 72px; height: 40px; padding: 0 18px; margin-right: 4px; border: 0; border-radius: 12px; background: #00F0FF; color: #000; font-weight: 800; font-size: 15px; cursor: pointer; }
.cz-save:hover { filter: brightness(1.08); }
.cz-page button:focus-visible, .cz-page input:focus-visible, .cz-grip:focus-visible { outline: 2px solid #00F0FF; outline-offset: 2px; }

.cz-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; }
.cz-preview { position: relative; overflow: hidden; --hdr-h: 0px; --deck-h: 0px; --rail-pad: 0px; background: var(--chat-ground); }
.cz-preview .cz-thread {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: 24px max(16px, calc((100% - 760px) / 2)) 24px !important; clip-path: none !important;
}
.cz-preview .cz-thread > :first-child { margin-top: auto; }
.cz-preview .cz-thread * { pointer-events: none; }
.cz-shade { position: absolute; left: 0; right: 0; top: 0; height: 104px; z-index: 2; pointer-events: none; display: none;
  background: linear-gradient(180deg, rgba(10,10,15,.94) 0%, rgba(10,10,15,.85) 62%, rgba(10,10,15,0) 100%); }
.cz-preview[data-look-shade="1"] .cz-shade { display: block; }

.cz-panel { position: relative; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: #14141C; border-left: 1px solid rgba(255,255,255,.10);
  scroll-padding-top: 60px; scroll-padding-bottom: 16px; }   /* focus and scroll-into-view clear the sticky tabs */
/* ⚠️ Nothing in the panel may shrink: a flex child with its own overflow (the tab
   row) has a minimum height of 0 and collapsed to its 1px border once the content
   overflowed, leaving the tiles on top of the tabs. */
.cz-panel > * { flex-shrink: 0; }
.cz-grip { display: none; }
.cz-only { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; cursor: pointer; }
.cz-only > span, .cz-toggle > span, .cz-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.cz-only strong, .cz-toggle strong, .cz-row strong { font-size: 15px; font-weight: 600; color: #fff; }
.cz-only small, .cz-toggle small, .cz-row small { font-size: 12px; color: rgba(255,255,255,.55); }
.cz-page input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #00F0FF; cursor: pointer; }
.cz-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; background: #14141C; border-bottom: 1px solid rgba(255,255,255,.08); padding: 0 8px; }
.cz-tab { flex: 0 0 auto; min-height: 48px; padding: 0 14px; border: 0; background: none; color: rgba(255,255,255,.5); font-weight: 700; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.cz-tab[aria-selected="true"] { color: #fff; border-bottom-color: #00F0FF; }
.cz-tabpanel { padding: 16px; }
.cz-h { margin: 18px 0 8px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.6); }
.cz-tabpanel > .cz-h:first-child { margin-top: 0; }
.cz-note { margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,.6); padding-left: 24px; position: relative; }
.cz-note::before { content: '◐'; position: absolute; left: 0; color: #00F0FF; }

/* Screen layout: the live drawing beside its name; six still drawings */
.cz-ly-hero { display: flex; align-items: center; gap: 16px; }
.cz-ly-hero .ls { width: 150px; flex: 0 0 150px; }
.cz-ly-name { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #fff; }
.cz-ly-blurb { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.62); }
.cz-ly-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cz-ly-tile { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 20px; background: #15151E; border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; cursor: pointer; }
.cz-ly-tile[aria-pressed="true"] { border: 2px solid #00F0FF; padding: 5px; color: #fff; font-weight: 800; }
.ls { position: relative; aspect-ratio: 100 / 140; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #1d1d2a, #0c0c13); }
.ls i { position: absolute; display: block; }
.ls-head { left: 0; right: 0; top: 0; height: 9%; background: rgba(255,255,255,.06); }
.ls-deck { left: 4%; right: 4%; top: 11.5%; height: 5%; }
.ls-b { left: 6%; height: 5%; border-radius: 4px; background: rgba(255,255,255,.18); }
.ls-b.me { left: auto; right: 6%; background: rgba(0,240,255,.32); }
.ls-b.ai2 { background: rgba(255,255,255,.12); }
.ls-rail { right: 3%; top: 36%; width: 10%; height: 30%; border-radius: 999px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); }
.ls-cmp { left: 3%; right: 3%; bottom: 2.5%; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.ls-cmp.card { height: 16%; }
.ls-cmp.slim { height: 10%; border-radius: 999px; }
.ls-orb, .ls-menu { width: 10%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.ls-orb { background: conic-gradient(from 210deg, #00F0FF, #FF00E6, #9D5CFF, #00F0FF); }
.ls-menu { background: rgba(255,255,255,.28); }
.ls-ctl { width: 7%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.85); z-index: 2; }
.ls-ctl.model { width: 15%; aspect-ratio: 2.4; border-radius: 999px; background: #00F0FF; }
.ls-ctl.chip { width: 15%; aspect-ratio: 2.4; border-radius: 999px; }
.ls.live .ls-ctl { transition: left 460ms cubic-bezier(.23,1,.32,1), top 460ms cubic-bezier(.23,1,.32,1), transform 460ms cubic-bezier(.23,1,.32,1); }

/* Style: ten families, six colour sets */
.cz-fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cz-fam { aspect-ratio: 1.55; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px; border-radius: 20px; background: #15151E; border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.7); cursor: pointer; font-size: 12.5px; font-weight: 700; }
.cz-fam[aria-pressed="true"] { border: 2px solid #00F0FF; padding: 7px; color: #fff; }
.cz-fam > span { margin-top: auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-mini { display: block; height: 16px; padding: 5px; box-sizing: border-box; }
.cz-mini.ai { width: 78px; max-width: 75%; }
.cz-mini.me { width: 54px; max-width: 52%; align-self: flex-end; }
.cz-mini i { display: block; height: 100%; border-radius: 2px; }
.cz-pal-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cz-pal { width: 48px; height: 48px; padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; cursor: pointer; }
.cz-pal[aria-pressed="true"] { border-color: #fff; }
.cz-pal i { display: block; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--pu) 50%, var(--pa) 50%); }

/* Font chips, choice chips */
.cz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; background: #1A1A24; border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.cz-chip[aria-pressed="true"] { background: #00F0FF; border-color: #00F0FF; color: #000; }

/* Size sliders */
.cz-slider { display: block; margin-bottom: 14px; }
.cz-sl-top { display: flex; align-items: baseline; gap: 12px; }
.cz-sl-top strong { flex: 1; font-weight: 600; font-size: 15px; color: #fff; }
.cz-sl-top output { color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.cz-page input[type="range"] { width: 100%; height: 32px; accent-color: #00F0FF; cursor: pointer; }

/* Colour rows, swatches, the picker */
.cz-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: none; cursor: pointer; }
.cz-swatch { display: inline-block; width: var(--sz); height: var(--sz); flex: 0 0 var(--sz); border-radius: 50%; background: var(--sw); border: 1px solid rgba(255,255,255,.2); }
.cz-swatch.on { border: 2.5px solid #fff; }
.cz-swatches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cz-sw-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.cz-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; cursor: pointer; }
.cz-picker {
  position: sticky; bottom: 0; z-index: 4; margin-top: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
  background: #14141C; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -12px 30px rgba(0,0,0,.45);
  animation: czPickIn 260ms cubic-bezier(.23,1,.32,1) backwards;
}
@keyframes czPickIn { from { opacity: 0; transform: translateY(16px); } }
.cz-pk-big { display: flex; justify-content: center; }
.cz-pk-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cz-pk-presets button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.cz-pk-sl { display: flex; flex-direction: column; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.6); }
.cz-pk-foot { display: flex; align-items: center; gap: 8px; }
.cz-pk-default { flex: 1; text-align: left; min-height: 40px; border: 0; background: none; color: rgba(255,255,255,.7); font-weight: 600; cursor: pointer; }
.cz-pk-use { min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: #00F0FF; color: #000; font-weight: 800; cursor: pointer; }

/* Narrow screens: the preview fills the page; the settings pull up from the bottom. */
@media (max-width: 899px) {
  .cz-body { display: block; position: relative; }
  .cz-preview { position: absolute; inset: 0; }
  .cz-preview .cz-thread { padding-bottom: calc(var(--panel) * (100dvh - var(--cz-top)) + 12px) !important; }
  .cz-panel {
    position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--panel) * 100%); z-index: 3;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.10); border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,.5); padding-bottom: env(safe-area-inset-bottom);
  }
  .cz-anim .cz-panel { transition: height 260ms cubic-bezier(.23,1,.32,1); }
  .cz-grip { display: grid; place-items: center; height: 28px; flex: 0 0 28px; cursor: grab; touch-action: none;
    position: sticky; top: 0; z-index: 4; background: #14141C; }   /* never scrolls away: it is what you drag */
  .cz-tabs { top: 28px; }
  .cz-panel { scroll-padding-top: 88px; }
  .cz-grip span { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
  .cz-ly-hero .ls { width: 120px; flex-basis: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls.live .ls-ctl, .cz-anim .cz-panel { transition: none !important; }
  .cz-picker { animation: none; }
}

/* ══ R56-P2B — Models: switcher, Ranking, a model's page, per-model settings ═ */
.mx-page {
  position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center;
  background: rgba(3,3,6,.72); color: #fff; color-scheme: dark;
  opacity: 0; transition: opacity 220ms cubic-bezier(.33,1,.68,1);
}
.mx-page.in { opacity: 1; }
.mx-art { position: absolute; inset: 0 0 auto 0; height: 300px; background-size: cover; background-position: 50% 27.5%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent); mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
  filter: blur(18px) saturate(1.1); opacity: .7; pointer-events: none; }
.mx-shell { position: relative; width: min(720px, 100%); height: 100%; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(14,14,20,.86), #0B0B11 220px); border-inline: 1px solid rgba(255,255,255,.08);
  transform: translateY(14px); transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.mx-page.in .mx-shell { transform: none; }
.mx-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 4px; }
.mx-title h2 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; }
.mx-title p { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,.6); }
.mx-icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: rgba(255,255,255,.75); cursor: pointer; }
.mx-icon svg { width: 21px; height: 21px; }
.mx-icon:hover:not(:disabled) { background: rgba(255,255,255,.08); color: #fff; }
.mx-icon:disabled { opacity: .3; cursor: default; }
.mx-tabs { display: flex; gap: 4px; padding: 6px 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mx-tab { min-height: 48px; padding: 0 14px; border: 0; background: none; color: rgba(255,255,255,.5); font-weight: 700; font-size: 14.5px; cursor: pointer; border-bottom: 2px solid transparent; }
.mx-tab[aria-selected="true"] { color: #fff; border-bottom-color: #00F0FF; }
.mx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 48px; display: flex; flex-direction: column; gap: 10px; }
.mx-body.swap > * { animation: mx-rise 260ms cubic-bezier(.33,1,.68,1) both; }
@keyframes mx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mx-page button:focus-visible, .mx-page input:focus-visible, .mx-sheet button:focus-visible, .mx-sheet textarea:focus-visible { outline: 2px solid #00F0FF; outline-offset: 2px; }

.mx-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 4px; border-radius: 14px; background: #15151E; border: 1px solid rgba(255,255,255,.08); }
.mx-seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 10px;
  background: rgba(0,240,255,.14); border: 1px solid rgba(0,240,255,.55); transform: translateX(calc(var(--i) * 100%));
  transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.mx-seg button { position: relative; min-height: 40px; border: 0; background: none; color: rgba(255,255,255,.62); font-weight: 700; font-size: 13.5px; cursor: pointer; border-radius: 10px; }
.mx-seg button[aria-selected="true"] { color: #fff; }

.mx-band-note { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.mx-band-note b { color: var(--band); font-weight: 800; }
.mx-band-note span { flex: 1; min-width: 0; }
.mx-band-note em { font-style: normal; font-weight: 700; color: rgba(255,255,255,.45); }
.mx-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 44px; border-radius: 12px; background: #15151E; border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
.mx-search:focus-within { border-color: rgba(0,240,255,.6); }
.mx-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: #fff; font-size: 14.5px; outline: none; }
.mx-list { display: flex; flex-direction: column; gap: 8px; }
.mx-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.mx-filter { flex: 0 0 auto; min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: #15151E; color: rgba(255,255,255,.75); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.mx-filter[aria-pressed="true"] { border-color: rgba(0,240,255,.8); background: rgba(0,240,255,.12); color: #fff; }
.mx-filter .dtag { margin: 0; }
.mx-empty { margin: 18px 4px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.6); }

.mx-row { display: flex; align-items: stretch; border-radius: 20px; background: #15151E; border: 1px solid rgba(255,255,255,.08); }
.mx-list.rise .mx-row, .mx-list.rise .mx-rank { animation: mx-rise 260ms cubic-bezier(.33,1,.68,1) both; animation-delay: calc(var(--d) * 30ms); }
.mx-row:hover { border-color: rgba(255,255,255,.18); }
.mx-row.selected { border: 1.5px solid color-mix(in srgb, var(--band) 70%, transparent); }
.mx-row-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px 14px 14px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 20px; }
.mx-row-ic { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: var(--band); }
.mx-row-ic svg { width: 20px; height: 20px; }
.mx-row.dim .mx-row-ic { color: rgba(255,255,255,.3); }
.mx-row.dim strong { color: rgba(255,255,255,.5); }
.mx-row-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.mx-row-text strong { font-size: 14.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.mx-row-text small { font-size: 12px; color: rgba(255,255,255,.6); }
.mx-row-text small i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.45); }
.mx-row-text small b { color: rgba(255,255,255,.8); }
.mx-star { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-right: 2px; }
.mx-star svg { width: 12px; height: 12px; }
.mx-star.gold { color: #F5B942; }
.mx-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.mx-warns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.mx-warn { padding: 3px 7px; border-radius: 999px; background: rgba(255,176,32,.14); color: #FFB020; font-size: 10.5px; font-weight: 800; }
.mx-gear { align-self: center; color: rgba(255,255,255,.55); }

.mx-blurb { margin: 0 4px; font-size: 12px; color: rgba(255,255,255,.55); }
.mx-band-h { margin: 12px 4px 0; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--band); }
.mx-band-h span { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.45); }
.mx-rank { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 10px; border: 0; border-radius: 16px; background: none; color: inherit; text-align: left; cursor: pointer; }
.mx-rank:hover { background: rgba(255,255,255,.05); }
.mx-badge { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 800; color: var(--band);
  background: color-mix(in srgb, var(--band) 14%, transparent); border: 1px solid color-mix(in srgb, var(--band) 45%, transparent); }
.mx-badge.none { color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); font-size: 15px; }
.mx-mark { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .02em; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.mx-chev { width: 20px; color: rgba(255,255,255,.35); flex: 0 0 auto; }
.mx-chev svg { width: 20px; height: 20px; }
.mx-skeleton { display: flex; flex-direction: column; gap: 10px; }
.mx-skeleton i { height: 58px; border-radius: 16px; background: linear-gradient(90deg, #15151E 0%, #1d1d29 50%, #15151E 100%); background-size: 200% 100%; animation: mx-shimmer 1.2s linear infinite; }
@keyframes mx-shimmer { to { background-position: -200% 0; } }

.mx-backlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px 0 4px; border: 0; border-radius: 12px; background: none; color: rgba(255,255,255,.75); font-weight: 700; cursor: pointer; }
.mx-backlink svg { width: 18px; height: 18px; }
.mx-card { padding: 16px; border-radius: 20px; background: #15151E; border: 1px solid rgba(255,255,255,.08); }
.mx-head h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #fff; }
.mx-head p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mx-head .mx-mark { font-size: 11.5px; padding: 3px 8px; }
.mx-muted { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.6); }
.mx-strong { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #fff; }
.mx-card > .mx-strong:first-child { margin-top: 0; }
.mx-score { display: flex; align-items: baseline; gap: 6px; }
.mx-score b { font-size: 34px; font-weight: 800; color: #fff; }
.mx-score span { width: 20px; height: 20px; color: #F5B942; align-self: center; }
.mx-score span svg { width: 20px; height: 20px; }
.mx-score small { font-size: 12.5px; color: rgba(255,255,255,.6); }
.mx-bars { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 5px; }
.mx-bar { display: grid; grid-template-columns: 14px 1fr 34px; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255,255,255,.6); }
.mx-bar i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.mx-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #F5B942; border-radius: 3px; }
.mx-bar em { font-style: normal; text-align: right; }
.mx-trend { width: 100%; height: 80px; margin-top: 10px; }
.mx-stars { display: flex; gap: 4px; margin-top: 6px; }
.mx-stars button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: rgba(255,255,255,.45); cursor: pointer; }
.mx-stars button svg { width: 28px; height: 28px; }
.mx-stars button.on { color: #F5B942; }
.mx-stars button:hover { background: rgba(255,255,255,.06); }
.mx-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mx-primary { min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: #00F0FF; color: #000; font-weight: 800; font-size: 15px; cursor: pointer; }
.mx-primary:hover:not(:disabled) { filter: brightness(1.08); }
.mx-primary:disabled { background: rgba(0,240,255,.25); color: rgba(0,0,0,.7); cursor: default; }
.mx-outline { min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 12px; border: 1px solid rgba(0,240,255,.6); background: none; color: #00F0FF; font-weight: 700; cursor: pointer; }
.mx-outline svg { width: 18px; height: 18px; }

/* The settings sheet: a centred dialog on a computer, a pull-up sheet on a phone */
.mx-sheet-overlay { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity 200ms cubic-bezier(.33,1,.68,1); color-scheme: dark; }
.mx-sheet-overlay.in { opacity: 1; }
.mx-sheet { width: min(560px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; border-radius: 20px; background: #14141C; border: 1px solid rgba(255,255,255,.10); color: #fff;
  transform: translateY(16px) scale(.98); transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.mx-sheet-overlay.in .mx-sheet { transform: none; }
.mx-grip { display: none; }
.mx-sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 8px 8px 20px; }
.mx-sheet-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; color: #fff; }
.mx-sheet-badge { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #00F0FF, #FF00E6); color: #fff; }
.mx-sheet-badge svg { width: 19px; height: 19px; }
.mx-sheet-head .mx-icon[data-act="reset"] { color: #00F0FF; }
.mx-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.mx-sheet-body > * { flex-shrink: 0; }
.mx-sec.rise { animation: mx-rise 260ms cubic-bezier(.33,1,.68,1) both; animation-delay: calc(var(--d) * 60ms); }
.mx-sec h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 800; color: #fff; }
.mx-sec h4 svg { width: 18px; height: 18px; color: #00F0FF; }
.mx-sec > .mx-muted:first-of-type { margin-bottom: 12px; }
.mx-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mx-choices button, .mx-mem button { min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: #0E0E15; color: rgba(255,255,255,.7); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.mx-choices button[aria-checked="true"], .mx-mem button[aria-checked="true"] { border-color: rgba(0,240,255,.75); background: rgba(0,240,255,.12); color: #00F0FF; font-weight: 800; }
.mx-mem { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.mx-mem button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; }
.mx-mem small { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); }
.mx-link { margin-top: 8px; min-height: 40px; padding: 0; border: 0; background: none; color: #00F0FF; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.mx-sec textarea { width: 100%; box-sizing: border-box; min-height: 76px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: #0E0E15; color: #fff; font: inherit; font-size: 14px; line-height: 1.4; resize: vertical; }
.mx-sec textarea:focus { border-color: #00F0FF; outline: none; }
.mx-count { margin: 4px 0 0; text-align: right; font-size: 11px; color: rgba(255,255,255,.45); }
.mx-sheet-foot { padding: 12px 20px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.mx-sheet-foot .mx-primary { width: 100%; }

@media (max-width: 640px) {
  .mx-shell { border-inline: 0; }
  .mx-body { padding: 12px 12px 40px; }
  .mx-sheet-overlay { place-items: end stretch; padding: 0; }
  .mx-sheet { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; transform: translateY(40px); padding-bottom: env(safe-area-inset-bottom); }
  .mx-grip { display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: rgba(255,255,255,.25); }
}
@media (prefers-reduced-motion: reduce) {
  .mx-page, .mx-shell, .mx-seg-thumb, .mx-sheet-overlay, .mx-sheet { transition: none !important; }
  .mx-body.swap > *, .mx-list.rise .mx-row, .mx-list.rise .mx-rank, .mx-sec.rise, .mx-skeleton i { animation: none !important; }
}
/* Enhancement: reply length for the model in use */
.chat-sheet .enh-len { display: flex; flex-direction: column; gap: 10px; padding: 12px 4px 4px; }
.chat-sheet .enh-len > span { display: flex; flex-direction: column; gap: 2px; }
.chat-sheet .enh-len strong { font-size: 15px; color: var(--text-primary, #fff); }
.chat-sheet .enh-len small { font-size: 12.5px; color: var(--text-secondary, rgba(255,255,255,.6)); }
.chat-sheet .enh-more { align-self: flex-start; margin: 8px 4px 0; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(0,240,255,.6); background: none; color: #00F0FF; font-weight: 700; cursor: pointer; }
/* R56-P2B — the old model drawer is retired (the Models page replaced it). */
#model-selector-drawer, #model-drawer-overlay { display: none !important; }
.chat-sheet .enh-len .mx-link { align-self: flex-start; margin-top: 0; }

/* ══ R56-P2B — pictures (viewer, Photo history) and Voices ════════════════════ */
.pv-page { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; background: rgba(0,0,0,.94); color: #fff; color-scheme: dark;
  opacity: 0; transition: opacity 200ms cubic-bezier(.33,1,.68,1); }
.pv-page.in { opacity: 1; }
.pv-top { display: flex; align-items: center; gap: 4px; padding: 8px; }
.pv-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px 16px 24px; }
.pv-stage img { max-width: 100%; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); object-fit: contain; border-radius: 12px; transform: scale(.97); transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.pv-page.in .pv-stage img { transform: none; }
.pv-page button:focus-visible, .pv-confirm button:focus-visible, .vx-page button:focus-visible { outline: 2px solid #00F0FF; outline-offset: 2px; }
.pv-confirm { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 160ms; color-scheme: dark; }
.pv-confirm.in { opacity: 1; }
.pv-confirm-card { width: min(420px, 100%); padding: 20px; border-radius: 20px; background: #14141C; border: 1px solid rgba(255,255,255,.10); color: #fff; }
.pv-confirm-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.pv-confirm-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.65); }
.pv-confirm-card div { display: flex; justify-content: flex-end; gap: 10px; }
.pv-danger { min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: #FF4D6D; color: #fff; font-weight: 800; cursor: pointer; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pv-cell { aspect-ratio: 3 / 4; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; background: #15151E; cursor: pointer;
  animation: mx-rise 260ms cubic-bezier(.33,1,.68,1) both; animation-delay: calc(var(--d) * 30ms); }
.pv-cell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 27.5%; display: block; transition: transform 260ms cubic-bezier(.33,1,.68,1); }
.pv-cell:hover img { transform: scale(1.04); }
.pv-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pv-skel i { height: auto; aspect-ratio: 3 / 4; }
.pv-empty { margin: 48px auto; max-width: 360px; text-align: center; }
.pv-empty h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #fff; }
.pv-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.6); }

.vx-modes { margin-top: 12px; display: grid; gap: 8px; }
.vx-modes button, .vx-pick { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 14px; text-align: left; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: #0E0E15; color: #fff; cursor: pointer; }
.vx-modes button[aria-checked="true"], .vx-pick[aria-checked="true"] { border-color: rgba(0,240,255,.75); background: rgba(0,240,255,.10); }
.vx-modes b, .vx-pick b { font-size: 14px; }
.vx-modes small, .vx-pick small { font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.6); }
.vx-locked { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,176,32,.10); color: #FFB020; font-size: 12.5px; line-height: 1.4; }
.vx-slots { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vx-slot { border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: #0E0E15; overflow: hidden; }
.vx-slot-head { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.vx-slot-head:disabled { cursor: default; opacity: .55; }
.vx-slot-head > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-slot-head small { font-size: 12px; color: rgba(255,255,255,.55); }
.vx-slot-head em { font-style: normal; font-size: 12.5px; color: #00F0FF; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-slot-head svg { width: 18px; height: 18px; color: rgba(255,255,255,.4); transition: transform 200ms; }
.vx-slot.open .vx-slot-head svg { transform: rotate(90deg); }
.vx-list { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
.vx-row { display: flex; align-items: center; gap: 6px; }
.vx-row .vx-pick { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .pv-page, .pv-stage img, .pv-confirm, .pv-cell img, .vx-slot-head svg { transition: none !important; }
  .pv-cell { animation: none !important; }
}

/* ══ R56-P2C — a group reply: one bubble per member who spoke ════════════════ */
.dochi-chat .msg-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dochi-chat .gseg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dochi-chat .gseg.narration .bubble { background: transparent !important; border-color: transparent !important; box-shadow: none !important; padding-left: 4px !important; font-style: italic; }
.dochi-chat .gseg .msg-head { margin-bottom: 0; }

/* ══ R56-P2C — Group chats in Studio: My groups, the group studio, the cast picker ═ */
.gs-section { margin-top: 32px; }
.gs-lead { margin: 0 0 12px; max-width: 70ch; }
.gs-modes { margin-bottom: 16px; }
.gs-h3 { margin: 8px 0 10px; font-size: 15px; font-weight: 800; color: var(--text-primary, #fff); }
.gs-list { display: flex; flex-direction: column; gap: 8px; }
.gs-row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 20px; background: var(--surface-color, #15151E); border: 1px solid rgba(127,127,127,.18); }
.gs-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.gs-open:focus-visible, .gs-pickrow:focus-visible, .gs-pencil:focus-visible { outline: 2px solid #00F0FF; outline-offset: 2px; }
.gs-avas { display: inline-flex; flex: 0 0 auto; }
.gs-ava { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: #23232f; color: #fff; font-weight: 700; border: 2px solid #0B0B11; flex: 0 0 auto; }
.gs-avas .gs-ava + .gs-ava { margin-left: -12px; }
.gs-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 27.5%; }
.gs-ava.more { font-size: 11px; }
.gs-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-text b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-text small { font-size: 12px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-form { gap: 8px; }
.gs-label { margin-top: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.gs-input { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: #0E0E15; color: #fff; font: inherit; font-size: 15px; line-height: 1.4; resize: vertical; }
.gs-input:focus { border-color: #00F0FF; outline: none; }
.gs-field { position: relative; }
.gs-field .gs-input { padding-right: 52px; }
.gs-pencil { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(0,240,255,.12); color: #00F0FF; cursor: pointer; }
.gs-pencil svg { width: 18px; height: 18px; }
.gs-pencil.busy { pointer-events: none; animation: gs-pulse 1s ease-in-out infinite; }
@keyframes gs-pulse { 50% { opacity: .35; } }
.gs-cast { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #15151E; border: 1px solid rgba(255,255,255,.10); font-size: 13px; color: #fff; }
.gs-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.gs-line { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.gs-line-name { font-weight: 800; font-size: 13.5px; color: #00F0FF; }
.gs-all { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.gs-all svg { width: 16px; height: 16px; }
.gs-error { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,77,109,.12); color: #ff8aa0; font-size: 13px; }
.gs-save { margin-top: 12px; }
.gs-picklist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gs-pickrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: #0E0E15; color: #fff; text-align: left; cursor: pointer; }
.gs-pickrow.on { border-color: rgba(0,240,255,.75); background: rgba(0,240,255,.08); }
.gs-pickrow[aria-busy="true"] { opacity: .6; }
.gs-pickrow .gs-text { flex: 1; }
.gs-tick { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); display: grid; place-items: center; color: #000; }
.gs-pickrow.on .gs-tick { background: #00F0FF; border-color: #00F0FF; }
.gs-tick svg { width: 14px; height: 14px; }
.gs-pick .mx-sheet-body { gap: 10px; }
@media (prefers-reduced-motion: reduce) { .gs-pencil.busy { animation: none; } }
/* the picker must never be wider than the screen (long names, long titles) */
.gs-pick .mx-sheet, .gs-pick .mx-sheet-body { min-width: 0; overflow-x: hidden; }
.gs-pickrow { width: 100%; min-width: 0; box-sizing: border-box; }
.gs-pickrow .gs-text { flex: 1 1 auto; min-width: 0; }

/* ══ R56-P3 — sign-in inside an app's built-in browser ═══════════════════════ */
.auth-inapp { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255,176,32,.10); border: 1px solid rgba(255,176,32,.35); text-align: left; }
.auth-inapp strong { display: block; margin-bottom: 6px; font-size: 15px; color: #FFB020; }
.auth-inapp p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary, rgba(255,255,255,.75)); }
.auth-inapp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-inapp-actions .auth-btn { flex: 1 1 140px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* =====================================================================
   R57-P3 — the twelve MESSAGE BOXES (the app's `composer_skin.dart`).
   A style brings its own box (`data-look-box`, set by applyLook); the
   person may pick another in Appearance. Classic has NO rules here: it is
   the composer exactly as it was. Colours come from `--box-*`
   (chat-render.js boxVars). No backdrop-filter; a glow is constant.
   ===================================================================== */
.dochi-chat .cmp-prefix, .dochi-chat .cmp-tab { display: none; }
.dochi-chat:not([data-look-box="classic"]) #chat-input-field,
.dochi-chat:not([data-look-box="classic"]) .cmp-hint { font-family: var(--box-font, inherit); }

/* The still box Appearance draws (same classes, a hint for a field). */
.dochi-chat .cmp-hint {
  flex: 1 1 auto; min-width: 0; padding: 13px 12px; color: rgba(255,255,255,.4);
  font-size: 15.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dochi-chat .cmp-pv { pointer-events: none; }
.dochi-chat .cmp-pv .cmp-dock { display: flex; gap: 14px; padding-left: 6px; color: rgba(255,255,255,.6); }
.dochi-chat .cmp-pv .cmp-dock svg { width: 18px; height: 18px; }
.dochi-chat .cmp-pv .cmp-send { position: absolute; }

/* Any box's writing canvas is near-solid (legibility beats effect). */
.dochi-chat[data-look-box]:not([data-look-box="classic"])[data-expanded="1"] .composer {
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.88));
}

/* ── Glass: the rim lights up when you tap the box ── */
.dochi-chat[data-look-box="glass"] .composer {
  border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  border-color: rgba(255,255,255,.28); box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.dochi-chat[data-look-box="glass"][data-composing="1"] .composer { border-color: rgba(255,255,255,.62); }

/* ── Story: a line on the page, a quill ── */
.dochi-chat[data-look-box="story"] .composer {
  border-radius: 4px; border-color: transparent; box-shadow: none;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}
.dochi-chat[data-look-box="story"] #chat-input-field,
.dochi-chat[data-look-box="story"] .cmp-hint { font-style: italic; }

/* ── Neon: a glowing tube that flickers on ── */
.dochi-chat[data-look-box="neon"] .composer {
  border-radius: 18px; background: linear-gradient(180deg, rgba(5,5,10,.85), rgba(5,5,10,.75));
  border: 1.6px solid color-mix(in srgb, var(--box-accent) 75%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--box-accent) 40%, transparent);
}
.dochi-chat[data-look-box="neon"][data-composing="1"] .composer { border-color: var(--box-accent); animation: box-flicker 420ms linear; }
@keyframes box-flicker { 0% { border-color: color-mix(in srgb, var(--box-accent) 20%, transparent); } 20% { border-color: var(--box-accent); } 40% { border-color: color-mix(in srgb, var(--box-accent) 35%, transparent); } 60% { border-color: color-mix(in srgb, var(--box-accent) 90%, transparent); } 80% { border-color: color-mix(in srgb, var(--box-accent) 60%, transparent); } 100% { border-color: var(--box-accent); } }

/* ── Comic and Letter: the typing area is a paper slip (the dock stays dark:
   its controls are white) ── */
.dochi-chat[data-look-box="comic"] .composer { border-radius: 24px; border-color: rgba(255,255,255,.12); }
.dochi-chat[data-look-box="letter"] .composer { border-radius: 18px; border-color: rgba(255,255,255,.12); }
.dochi-chat[data-look-box="comic"][data-composing="1"] .composer,
.dochi-chat[data-look-box="letter"][data-composing="1"] .composer { border-color: rgba(255,255,255,.2); }
.dochi-chat[data-look-box="comic"] .cmp-field-row,
.dochi-chat[data-look-box="letter"] .cmp-field-row { position: relative; }
.dochi-chat[data-look-box="comic"] #chat-input-field,
.dochi-chat[data-look-box="comic"] .cmp-hint {
  background: var(--box-paper) !important; color: var(--box-ink); caret-color: var(--box-ink);
  border: 2.5px solid #111114 !important; border-radius: 16px; box-shadow: 3px 3px 0 #111114 !important;
  margin: 2px 4px 7px 2px;
}
.dochi-chat[data-look-box="comic"] .cmp-field-row::after {
  content: ''; position: absolute; left: 26px; bottom: 1px; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid #111114;
}
.dochi-chat[data-look-box="letter"] #chat-input-field,
.dochi-chat[data-look-box="letter"] .cmp-hint {
  color: var(--box-ink); caret-color: var(--box-ink); border-radius: 6px; margin: 2px 2px 4px;
  border: 1px solid var(--box-paper-border) !important;
  background:
    linear-gradient(90deg, transparent 17px, rgba(192,57,43,.33) 17px, rgba(192,57,43,.33) 18px, transparent 18px),
    repeating-linear-gradient(180deg, transparent 0, transparent 33px, var(--box-ink-12) 33px, var(--box-ink-12) 34px),
    var(--box-paper) !important;
}
/* ⚠️ style.css forces `#chat-input-field` white and fully round, both with
   !important — so a box with its own ink and corners must say so the same way
   (found in the browser: white text on the cream paper). The field only: the
   hint keeps its quieter colour below. */
.dochi-chat[data-look-box="comic"] #chat-input-field,
.dochi-chat[data-look-box="letter"] #chat-input-field { color: var(--box-ink) !important; }
.dochi-chat[data-look-box="comic"] #chat-input-field { border-radius: 16px !important; }
.dochi-chat[data-look-box="letter"] #chat-input-field { border-radius: 6px !important; }
.dochi-chat[data-look-box="terminal"] #chat-input-field { color: var(--box-term) !important; }
.dochi-chat[data-look-box="comic"] #chat-input-field::placeholder,
.dochi-chat[data-look-box="letter"] #chat-input-field::placeholder,
.dochi-chat[data-look-box="comic"] .cmp-hint,
.dochi-chat[data-look-box="letter"] .cmp-hint { color: var(--box-ink-45); }
.dochi-chat[data-look-box="comic"] .cmp-send { background: #111114; border: 1.5px solid #fff; color: #fff; box-shadow: none; }
.dochi-chat[data-look-box="letter"] .cmp-send { background: radial-gradient(#C0392B, #7E1A14); color: #F6E3C8; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.dochi-chat .cmp-seal { font-size: 18px; line-height: 1; }

/* ── Minimal: a line, and the words "Send message" ── */
.dochi-chat[data-look-box="minimal"] .composer {
  border-radius: 0; border-color: transparent; box-shadow: none;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
}
.dochi-chat[data-look-box="minimal"]:not([data-expanded="1"]) .composer::after,
.dochi-chat[data-look-box="story"]:not([data-expanded="1"]) .composer::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(var(--box-accent), var(--box-accent)) center / 0% 100% no-repeat, rgba(255,255,255,.3);
  transition: background-size 420ms cubic-bezier(.33, 1, .68, 1);
}
.dochi-chat[data-look-box="minimal"][data-composing="1"] .composer::after,
.dochi-chat[data-look-box="story"][data-composing="1"] .composer::after { background-size: 100% 100%, auto; }
.dochi-chat[data-look-box="minimal"] .cmp-morph { width: auto; min-width: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; }
.dochi-chat[data-look-box="minimal"] .cmp-send {
  position: relative; inset: auto; width: auto; height: 34px; padding: 0 14px; border-radius: 20px;
  background: color-mix(in srgb, var(--box-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--box-accent) 55%, transparent);
  color: var(--box-accent); box-shadow: none;
}
.dochi-chat[data-look-box="minimal"] .cmp-morph[data-mode="menu"] .cmp-send { display: none; }
.dochi-chat[data-look-box="minimal"] .cmp-morph[data-mode="send"] .cmp-menu { display: none; }
.dochi-chat .cmp-send-word { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ── Messenger: a pill, an arrow that lifts off ── */
.dochi-chat[data-look-box="messenger"] .composer {
  border-radius: 26px; background: rgba(28,28,32,.92); border-color: rgba(255,255,255,.08); box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.dochi-chat[data-look-box="messenger"][data-composer="slim"] .composer { border-radius: 999px; }
.dochi-chat[data-look-box="messenger"] .cmp-send { background: var(--box-accent); color: #0b0b10; box-shadow: none; }

/* ── Terminal: a prompt, mono type, a ↵ key ── */
.dochi-chat[data-look-box="terminal"] .composer {
  border-radius: 8px; background: rgba(4,8,6,.95); border: 1px solid var(--box-term-40); box-shadow: none;
}
.dochi-chat[data-look-box="terminal"][data-composing="1"] .composer { border-color: color-mix(in srgb, var(--box-term) 75%, transparent); }
.dochi-chat[data-look-box="terminal"] #chat-input-field,
.dochi-chat[data-look-box="terminal"] .cmp-hint { color: var(--box-term); caret-color: var(--box-term); font-size: 14.5px; }
.dochi-chat[data-look-box="terminal"] #chat-input-field::placeholder,
.dochi-chat[data-look-box="terminal"] .cmp-hint { color: var(--box-term-40); }
.dochi-chat[data-look-box="terminal"] .cmp-prefix {
  display: block; flex: 0 0 auto; align-self: flex-start; padding: 13px 0 0 10px;
  color: var(--box-term); font-family: var(--box-font, monospace); font-weight: 700; font-size: 14.5px; line-height: 1.4;
}
.dochi-chat[data-look-box="terminal"] .cmp-send {
  border-radius: 8px; background: color-mix(in srgb, var(--box-term) 10%, transparent);
  border: 1.2px solid var(--box-term); color: var(--box-term); box-shadow: none;
}

/* ── Cards: a card with a second one behind, tabbed "Your reply" ── */
.dochi-chat[data-look-box="cards"] .composer {
  border-radius: 16px; background: rgba(18,18,24,.9); border-color: color-mix(in srgb, var(--box-accent) 35%, transparent);
  box-shadow: 0 5px 12px rgba(0,0,0,.4);
}
.dochi-chat[data-look-box="cards"][data-composing="1"] .composer { border-color: color-mix(in srgb, var(--box-accent) 60%, transparent); }
.dochi-chat[data-look-box="cards"]:not([data-expanded="1"]) .composer::before {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 24px; z-index: -1;
  border-radius: 16px; background: rgba(12,12,16,.8); border: 1px solid color-mix(in srgb, var(--box-accent) 18%, transparent);
}
.dochi-chat[data-look-box="cards"]:not([data-expanded="1"]) .cmp-tab {
  display: inline-block; position: absolute; top: -9px; left: 16px; z-index: 1;
  padding: 2px 8px; border-radius: 6px; background: var(--box-accent); color: #0b0b10;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.dochi-chat[data-look-box="cards"] .cmp-send { background: var(--box-accent); color: #0b0b10; box-shadow: none; }

/* ── Capsule: a big rounded box, a white send button ── */
.dochi-chat[data-look-box="capsule"] .composer {
  border-radius: 26px; background: rgba(30,30,36,.96); border-color: rgba(255,255,255,.1); box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.dochi-chat[data-look-box="capsule"][data-composing="1"] .composer { border-color: rgba(255,255,255,.2); }
.dochi-chat[data-look-box="capsule"] .cmp-send { background: #fff; color: #000; box-shadow: none; }

/* ── Light ring: a ring of light round the box ── */
.dochi-chat[data-look-box="halo"] .composer {
  border: 2px solid transparent; box-shadow: none;
  background:
    linear-gradient(180deg, rgba(10,10,16,.92), rgba(10,10,16,.86)) padding-box,
    linear-gradient(90deg, color-mix(in srgb, var(--box-accent) 55%, transparent), color-mix(in srgb, var(--box-accent2) 55%, transparent)) border-box;
}
.dochi-chat[data-look-box="halo"][data-composing="1"] .composer {
  background:
    linear-gradient(180deg, rgba(10,10,16,.92), rgba(10,10,16,.86)) padding-box,
    linear-gradient(90deg, var(--box-accent), var(--box-accent2)) border-box;
}

/* Solid accent send buttons. */
.dochi-chat[data-look-box="glass"] .cmp-send,
.dochi-chat[data-look-box="neon"] .cmp-send,
.dochi-chat[data-look-box="halo"] .cmp-send {
  background: var(--box-accent); color: #000; box-shadow: 0 0 14px color-mix(in srgb, var(--box-accent) 40%, transparent);
}
.dochi-chat[data-look-box="story"] .cmp-send {
  background: transparent; border: 1px solid color-mix(in srgb, var(--box-accent) 40%, transparent); color: var(--box-accent); box-shadow: none;
}

/* ── the send moves (class `box-sent`, for 450 ms after a real send) ── */
.dochi-chat.box-sent[data-look-box="comic"] #chat-input-field { animation: box-pop 300ms ease-out; }
.dochi-chat.box-sent[data-look-box="cards"] .composer { animation: box-lift 320ms cubic-bezier(.33, 1, .68, 1); }
.dochi-chat.box-sent[data-look-box="terminal"] .composer { animation: box-flash 320ms ease-out; }
.dochi-chat.box-sent[data-look-box="halo"] .composer { animation: box-pulse 320ms ease-out; }
.dochi-chat.box-sent[data-look-box="letter"] .cmp-send { animation: box-stamp 340ms cubic-bezier(.33, 1, .68, 1); }
.dochi-chat.box-sent[data-look-box="story"] .cmp-send svg { animation: box-quill 340ms ease-out; }
.dochi-chat.box-sent[data-look-box="messenger"] .cmp-send svg,
.dochi-chat.box-sent[data-look-box="capsule"] .cmp-send svg { animation: box-rise 340ms cubic-bezier(.33, 1, .68, 1); }
@keyframes box-pop { 50% { transform: scale(1.04); } }
@keyframes box-lift { 0% { transform: translateY(-6px); } }
@keyframes box-flash { 0% { border-color: var(--box-term); } }
@keyframes box-pulse { 0% { filter: brightness(1.5); } }
@keyframes box-stamp { 0% { transform: scale(1.3) rotate(-10deg); } }
@keyframes box-quill { 0% { transform: rotate(28deg); } }
@keyframes box-rise { 0% { transform: translateY(-8px); } }

/* ── the short loading moment after a Save that changed the look ── */
.dochi-chat .look-veil {
  position: absolute; inset: 0; z-index: 80; display: grid; place-items: center;
  background: rgba(5,5,8,.86); transition: opacity 200ms ease;
}
.dochi-chat .look-veil span { font-size: 40px; line-height: 1; color: #00F0FF; animation: veil-spin 1.1s linear infinite; }
.dochi-chat .look-veil.lifting { opacity: 0; }
@keyframes veil-spin { to { transform: rotate(360deg); } }

/* ── Appearance: the message-box tiles, and the drawing's cross-fade ── */
.cz-sub { margin: -4px 0 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.55); max-width: 60ch; }
.cz-pv-box { padding: 10px 0 4px; }
.cz-pv-box > .dochi-chat { position: relative; background: transparent; }
.cz-box-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 6px; scrollbar-width: thin; }
.cz-box {
  flex: 0 0 164px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 6px; cursor: pointer;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: rgba(255,255,255,.72);
  font-size: 12px; font-weight: 600; text-align: left;
}
.cz-box[aria-pressed="true"] { border: 1.6px solid #00F0FF; background: rgba(255,255,255,.08); color: #fff; font-weight: 800; }
.cz-box:focus-visible { outline: 2px solid #00F0FF; outline-offset: 2px; }
/* ⚠️ The box inside is drawn full size (320px) and scaled: `min-width: 0` on
   the tile and a flex stage keep that layout width from widening the tile,
   and flex centring keeps an overflowing child centred (a grid track would
   grow to 320px and push it off to one side). */
.cz-box-stage { height: 64px; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: visible; }
.cz-box-stage > .dochi-chat { width: 320px; transform: scale(.46); transform-origin: center; flex: 0 0 auto; }
.cz-box-label { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cz-box-label span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-ly-hero .ls.fade-in { animation: cz-fade 200ms ease both; }
@keyframes cz-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dochi-chat .composer, .dochi-chat .composer::after, .dochi-chat #chat-input-field,
  .dochi-chat .cmp-send, .dochi-chat .cmp-send svg, .dochi-chat .look-veil, .dochi-chat .look-veil span,
  .cz-ly-hero .ls.fade-in { animation: none !important; transition: none !important; }
}


/* ══ R57-P5 — the Mango models page (mango-ui.js) ══════════════════════════════
   Dochi neon with a mango-orange glow. Tokens for both themes; the overlay over
   a chat (.mgo-dark) stays dark like the Models page it opens from. #FFA630 is
   1.9:1 on white, so the light theme uses ink #A85300 (5.4:1) — the app's
   kMangoInk. One glow (the hero); every card rim is a border. */
.mgo {
  --mgo: #FFA630; --mgo-ink: #fff; --mgo-mute: rgba(255,255,255,.66);
  --mgo-card: rgba(18,18,26,.86); --mgo-line: rgba(255,255,255,.09);
  --mgo-track: rgba(255,255,255,.10); --mgo-cyan: #00F0FF;
  color: var(--mgo-ink); display: flex; flex-direction: column; gap: 16px;
}
[data-theme="light"] .mgo:not(.mgo-dark) {
  --mgo: #A85300; --mgo-ink: #15141c; --mgo-mute: rgba(21,20,28,.64);
  --mgo-card: #fff; --mgo-line: rgba(21,20,28,.10);
  --mgo-track: rgba(21,20,28,.08); --mgo-cyan: #00808A;
}
.mgo-tab { max-width: 760px; margin: 0 auto; padding: 8px 16px 48px; box-sizing: border-box; }
.mgo-overlay-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 48px; }
.mgo-hero {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--mgo) 40%, transparent);
  background: radial-gradient(140% 120% at 8% 0%, rgba(255,166,48,.24), rgba(255,0,230,.08) 55%, transparent);
}
.mgo-mark {
  font-size: 32px; line-height: 1; flex: 0 0 auto;
  background: linear-gradient(135deg, #FFA630, #FF00E6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mgo-hero h2 { margin: 0; font-size: 26px; font-weight: 800; color: var(--mgo-ink); text-wrap: balance; }
.mgo-hero p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--mgo-mute); max-width: 60ch; }
.mgo-card { background: var(--mgo-card); border: 1px solid var(--mgo-line); border-radius: 20px; padding: 16px; min-width: 0; }
.mgo-model {
  border-color: color-mix(in srgb, var(--mgo) 32%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, #FFA630 9%, var(--mgo-card)), var(--mgo-card) 40%);
  scroll-margin-top: 12px;
}
.mgo-model.focused { border-color: color-mix(in srgb, var(--mgo) 80%, transparent); box-shadow: inset 0 0 0 .5px var(--mgo); }
.mgo-label { margin: 18px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mgo-mute); }
.mgo-compare .mgo-label { margin-top: 0; }
.mgo-name { margin: 0; font-size: 22px; font-weight: 800; color: var(--mgo-ink); overflow-wrap: anywhere; }
.mgo-tagline { margin: 4px 0 0; color: var(--mgo); font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.mgo-tags { margin-top: 12px; }
.mgo-muted { margin: 4px 0; color: var(--mgo-mute); font-size: 13px; line-height: 1.45; }
.mgo-strong { margin: 0 0 8px; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.mgo-reset { margin: 6px 0 0; text-align: right; font-size: 12px; color: var(--mgo-mute); font-variant-numeric: tabular-nums; }
.mgo-meter { display: block; height: 8px; border-radius: 8px; background: var(--mgo-track); overflow: hidden; }
.mgo-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFA630, #FF00E6); }
.mgo-meter.cyan i { background: var(--mgo-cyan); }
.mgo-scroll { overflow-x: auto; }
.mgo-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mgo-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--mgo-mute); font-size: 13px; padding: 10px 8px 10px 0; min-width: 110px; }
.mgo-table td { text-align: center; font-weight: 600; font-size: 14px; padding: 10px 6px; min-width: 66px; color: var(--mgo-ink); }
.mgo-table td .mgo-meter { height: 6px; width: 52px; margin: 0 auto; }
.mgo-table tbody tr { border-top: 1px solid var(--mgo-line); }
.mgo-table td.lead { color: var(--mgo); font-weight: 800; }
.mgo-goto {
  min-height: 44px; background: none; border: 0; color: var(--mgo); font: inherit; font-weight: 800; font-size: 13px;
  cursor: pointer; padding: 4px 6px; border-radius: 10px; white-space: nowrap;
}
.mgo-goto:hover { background: color-mix(in srgb, var(--mgo) 12%, transparent); }
.mgo-goto:focus-visible, .mgo-retry:focus-visible { outline: 2px solid var(--mgo); outline-offset: 2px; }
.mgo-best { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mgo-best li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.4; }
.mgo-best li::before { content: '✦'; position: absolute; left: 0; top: 0; color: var(--mgo); font-size: 13px; }
.mgo-mem { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.mgo-mem-size { width: 46px; flex: 0 0 auto; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.mgo-mem-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 5px; }
.mgo-mem-bar small { font-size: 12px; font-weight: 600; color: var(--mgo-mute); }
.mgo-mem-bar small.free { color: var(--mgo-cyan); }
.mgo-speed { display: flex; gap: 8px; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.mgo-speed span { color: var(--mgo-mute); }
.mgo-speed b { font-weight: 700; text-align: right; }
.mgo-speed b.none { color: var(--mgo-mute); font-weight: 600; }
.mgo-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.mgo-rating > span { color: var(--mgo); font-size: 18px; letter-spacing: 1px; }
.mgo-rating b { font-size: 15px; font-weight: 800; }
.mgo-rating small { color: var(--mgo-mute); font-size: 12.5px; }
.mgo-about { margin: 0; white-space: pre-line; line-height: 1.55; font-size: 14px; color: var(--mgo-ink); max-width: 65ch; }
.mgo-empty { text-align: center; color: var(--mgo-mute); padding: 48px 16px; }
.mgo-retry {
  min-height: 44px; margin-top: 12px; padding: 0 20px; border-radius: 12px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--mgo) 60%, transparent); background: none; color: var(--mgo); font: inherit; font-weight: 700;
}
.mgo-skeleton { display: grid; gap: 14px; }
.mgo-skeleton i { display: block; height: 120px; border-radius: 20px; background: var(--mgo-track); }
.mgo-skeleton i:first-child { height: 90px; }
/* Motion is OPT-IN (no-preference), so reduced motion needs no override — and
   the chat's own reduced-motion block stays the last one in this file
   (chat_boxes.test.mjs reads it). Cards rise in once from a visible rest. */
@media (prefers-reduced-motion: no-preference) {
  .mgo-skeleton i { animation: mgo-pulse 1.4s ease-in-out infinite; }
  .mgo > .mgo-hero, .mgo > .mgo-card { animation: mgo-rise 380ms cubic-bezier(.22,1,.36,1) backwards; }
  .mgo > :nth-child(2) { animation-delay: 60ms; }
  .mgo > :nth-child(3) { animation-delay: 120ms; }
  .mgo > :nth-child(n+4) { animation-delay: 180ms; }
}
@keyframes mgo-pulse { 50% { opacity: .55; } }
@keyframes mgo-rise { from { transform: translateY(10px); opacity: 0; } }
/* The owner's Mango guide card (Profile → owner controls). */
.mgo-owner-list { display: grid; gap: 14px; }
.mgo-owner-model { border: 1px solid rgba(255,166,48,.35); border-radius: 14px; padding: 12px 14px 14px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.mgo-owner-model legend { font-weight: 800; padding: 0 6px; }
.mgo-owner-model legend small { font-weight: 500; opacity: .65; margin-left: 6px; }
.mgo-owner-model label { display: grid; gap: 4px; font-size: 13px; }
.mgo-owner-model textarea { resize: vertical; min-height: 84px; }
.mgo-owner-sub { font-size: 13px; margin-top: 2px; }
.mgo-owner-msg { text-align: center; margin-top: .75rem; font-size: .85rem; }
.mgo-owner-msg[data-tone="error"] { color: #FF3B30; }
.mgo-owner-msg[data-tone="warn"] { color: #FFB020; }
.mgo-owner-msg[data-tone="ok"] { color: #00C853; }