:root {
  --chat-sidebar: #2f2b37;
  --chat-ink: #302c39;
  --chat-soft: #f7f1ec;
}

.chat-body { height: 100vh; overflow: hidden; background: #f8f3ef; }
.chat-body::before { opacity: .08; }
.chat-app { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(420px, 1fr) 286px; width: 100%; height: 100vh; min-height: 0; overflow: hidden; }

.chat-sidebar { min-width: 0; display: flex; flex-direction: column; padding: 20px 16px 16px; color: white; background: linear-gradient(180deg, #35303e, #292631); }
.chat-brand { display: flex; align-items: center; gap: 11px; padding: 2px 5px 24px; color: white; text-decoration: none; font-size: 14px; font-weight: 850; }
.chat-brand > span:last-child { display: flex; flex-direction: column; gap: 2px; }.chat-brand small { color: rgba(255,255,255,.48); font-size: 9px; font-weight: 650; letter-spacing: .12em; }
.chat-sidebar .brand-mark { width: 35px; height: 35px; border-radius: 11px; }
.sidebar-section { min-height: 0; margin-bottom: 22px; }
.conversation-section { flex: 1; display: flex; flex-direction: column; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 9px; color: rgba(255,255,255,.5); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.sidebar-heading a, .sidebar-heading button { border: 0; color: rgba(255,255,255,.62); background: transparent; text-decoration: none; font-size: 11px; }.sidebar-heading button { font-size: 18px; line-height: 1; }
.companion-picker-list, .conversation-list { display: grid; gap: 6px; }
.conversation-list { min-height: 0; overflow-y: auto; padding-right: 2px; }
.companion-choice, .conversation-choice { width: 100%; border: 0; color: rgba(255,255,255,.72); background: transparent; text-align: left; }
.companion-choice { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border-radius: 12px; }
.companion-choice:hover, .companion-choice.active, .conversation-choice:hover, .conversation-choice.active { color: white; background: rgba(255,255,255,.09); }
.side-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #ffd4c6; background: rgba(239,106,91,.2); font-size: 12px; font-weight: 850; }
.companion-choice strong, .companion-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.companion-choice strong { font-size: 12px; }.companion-choice small { margin-top: 2px; color: rgba(255,255,255,.42); font-size: 9px; }
.side-online { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }.side-online.on { background: #67caa7; box-shadow: 0 0 0 4px rgba(103,202,167,.1); }
.conversation-choice { padding: 10px 11px; border-radius: 10px; }
.conversation-choice strong, .conversation-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.conversation-choice strong { font-size: 11px; font-weight: 720; }.conversation-choice small { margin-top: 3px; color: rgba(255,255,255,.35); font-size: 9px; }
.conversation-entry { position: relative; min-width: 0; }
.conversation-entry .conversation-choice { padding-right: 38px; }
.conversation-delete { position: absolute; top: 50%; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: rgba(255,255,255,.5); background: transparent; font-size: 17px; line-height: 1; transform: translateY(-50%); opacity: .72; transition: opacity .18s ease, color .18s ease, background .18s ease; }
.conversation-entry:hover .conversation-delete, .conversation-entry:focus-within .conversation-delete { opacity: 1; }
.conversation-delete:hover { color: #ffd6cf; background: rgba(239,106,91,.2); }
.conversation-delete:disabled { opacity: .4; cursor: wait; }
.sidebar-empty { padding: 14px 10px; color: rgba(255,255,255,.35); font-size: 11px; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.035); }
.mode-dot { width: 8px; height: 8px; border-radius: 50%; background: #e9a23b; box-shadow: 0 0 0 4px rgba(233,162,59,.1); }.sidebar-footer strong, .sidebar-footer small { display: block; }.sidebar-footer strong { font-size: 10px; }.sidebar-footer small { margin-top: 2px; color: rgba(255,255,255,.36); font-size: 8px; }
.mode-dot.openai { background: #67caa7; box-shadow: 0 0 0 4px rgba(103,202,167,.1); }

.chat-workspace { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; background: rgba(255,252,249,.9); }
.chat-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 13px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.72); backdrop-filter: blur(18px); }
.active-companion { display: flex; align-items: center; gap: 11px; }.chat-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--coral-dark); background: #ffe8df; font-weight: 850; transition: color .25s, background .25s, transform .25s; }
.chat-body[data-expression="happy"] .chat-avatar { color: #a65b13; background: #fff0c9; transform: translateY(-1px); }
.chat-body[data-expression="sad"] .chat-avatar { color: #64718d; background: #e9edf6; }
.chat-body[data-expression="jealous"] .chat-avatar { color: #795777; background: #f0e5ef; transform: rotate(-2deg); }
.chat-body[data-expression="caring"] .chat-avatar { color: #3e826d; background: #e1f2ec; }
.chat-body[data-expression="shy"] .chat-avatar { color: #a85f79; background: #fbe4ec; transform: translateY(1px); }
.chat-body[data-expression="anxious"] .chat-avatar { color: #6c6a91; background: #ecebfa; }
.chat-body[data-expression="curious"] .chat-avatar { color: #2f7487; background: #e2f3f6; transform: rotate(2deg); }
.chat-body[data-expression="tired"] .chat-avatar { color: #6f7785; background: #eceff2; transform: translateY(2px); }
.chat-body[data-expression="relaxed"] .chat-avatar { color: #527b67; background: #e6f1e9; }
.active-companion strong, .active-companion span { display: block; }.active-companion strong { font-size: 14px; }.active-companion span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.chat-top-actions { display: flex; align-items: center; gap: 12px; }.chat-top-actions a { color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 750; }
.memory-toggle { display: none; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: white; font-size: 9px; font-weight: 800; }
.model-badge { padding: 6px 8px; border: 1px solid rgba(76,169,137,.2); border-radius: 999px; color: #3f866f; background: rgba(76,169,137,.08); font: 750 8px ui-monospace, monospace; letter-spacing: .08em; }
.mobile-selectors { display: none; }

.message-stream { min-height: 0; overflow-y: auto; padding: 28px clamp(24px, 6vw, 82px); scroll-behavior: smooth; }
.chat-empty { max-width: 620px; margin: clamp(30px, 9vh, 90px) auto 0; text-align: center; }
.empty-orbit { width: 86px; height: 86px; display: grid; place-items: center; margin: 0 auto 24px; border: 1px dashed rgba(239,106,91,.42); border-radius: 50%; }.empty-orbit span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; color: var(--coral); background: white; box-shadow: var(--shadow); }
.chat-empty h1 { margin: 0 0 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }.chat-empty p { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 13px; line-height: 1.7; }
.starter-prompts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 25px; }.starter-prompts button { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.78); font-size: 11px; }.starter-prompts button:hover { color: var(--coral-dark); border-color: rgba(239,106,91,.28); }
.message-row { display: flex; gap: 11px; max-width: 760px; margin: 0 auto 22px; }.message-row.user { justify-content: flex-end; }.message-row.assistant { justify-content: flex-start; }
.message-avatar { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; margin-top: 3px; border-radius: 10px; color: var(--coral-dark); background: #ffe8df; font-size: 10px; font-weight: 850; }
.message-row.user .message-avatar { display: none; }
.message-bubble { max-width: min(82%, 620px); padding: 13px 16px; border: 1px solid var(--line); border-radius: 5px 17px 17px 17px; color: var(--chat-ink); background: rgba(255,255,255,.92); box-shadow: 0 8px 26px rgba(79,55,42,.06); font-size: 13px; line-height: 1.72; white-space: pre-wrap; word-break: break-word; }
.message-row.user .message-bubble { border: 0; border-radius: 17px 17px 5px 17px; color: white; background: linear-gradient(135deg, #ef6a5b, #df594d); box-shadow: 0 10px 24px rgba(239,106,91,.17); }
.typing-cursor::after { content: ""; display: inline-block; width: 5px; height: 14px; margin-left: 3px; vertical-align: -2px; border-radius: 2px; background: var(--coral); animation: cursor-blink .8s infinite; }@keyframes cursor-blink { 50% { opacity: .2; } }

.chat-composer { margin: 0 clamp(20px, 5vw, 68px) 20px; padding: 12px 13px 10px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 16px 45px rgba(79,55,42,.1); }
.chat-composer textarea { max-height: 150px; min-height: 30px; padding: 5px 4px; border: 0; border-radius: 0; background: transparent; resize: none; line-height: 1.55; }.chat-composer textarea:focus { border: 0; box-shadow: none; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 7px; }.composer-footer > span { color: #a39ba5; font-size: 9px; }.composer-footer button { display: flex; align-items: center; gap: 8px; padding: 8px 9px 8px 12px; border: 0; border-radius: 11px; color: white; background: var(--coral); font-size: 10px; font-weight: 800; }.composer-footer button b { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.18); }.composer-footer button:disabled { opacity: .38; cursor: not-allowed; }

.chat-context { min-width: 0; padding: 18px; overflow-y: auto; border-left: 1px solid var(--line); background: rgba(247,241,236,.84); }
.context-scrim, .context-close { display: none; }
.context-card { margin-bottom: 12px; padding: 17px; border: 1px solid rgba(234,223,216,.9); border-radius: 17px; background: rgba(255,255,255,.76); box-shadow: 0 10px 30px rgba(79,55,42,.055); }
.context-kicker { display: block; margin-bottom: 13px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.context-portrait { display: flex; align-items: center; gap: 12px; }.context-portrait strong, .context-portrait small { display: block; }.context-portrait strong { font-size: 14px; }.context-portrait small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.mini-mora { width: 54px; height: 58px; display: grid; place-items: center; border-radius: 48% 48% 42% 42%; background: white; box-shadow: inset 0 -8px 15px rgba(231,215,205,.38), 0 8px 20px rgba(79,55,42,.1); }.mini-mora span { width: 38px; height: 27px; border-radius: 12px; background: #383241; }
.context-state { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 15px; }.context-state > div { padding: 10px; border-radius: 11px; background: #f7f1ec; }.context-state span, .context-state strong { display: block; }.context-state span { color: var(--muted); font-size: 8px; }.context-state strong { margin-top: 3px; font-size: 12px; }
.affective-combination { margin-top: 10px; padding: 12px; border: 1px solid #eee3db; border-radius: 14px; background: linear-gradient(145deg,#fffaf7,#f8f4f0); }
.affective-heading,.affective-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.affective-heading span,.affective-meta span { color: var(--muted); font-size: 8px; }.affective-heading small { color: var(--coral-dark); font-size: 8px; font-weight: 750; }
.affective-primary { display: block; margin-top: 6px; font-size: 16px; letter-spacing: -.02em; }.affective-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 18px; margin: 7px 0 9px; }.affective-chips span { padding: 4px 6px; border-radius: 999px; color: #6b5b67; background: #f2e9e5; font-size: 8px; }
.affective-meta { padding-top: 6px; border-top: 1px solid rgba(229,216,208,.7); }.affective-meta + .affective-meta { margin-top: 5px; padding-top: 5px; }.affective-meta b { color: #4e4652; font-size: 9px; text-align: right; }
.context-main { display: block; font-size: 13px; line-height: 1.55; }.context-card p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.context-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }.context-tags span { padding: 5px 7px; border-radius: 999px; color: #655b67; background: #f5eee8; font-size: 9px; }
.device-line { display: flex; align-items: center; gap: 11px; }.device-line strong, .device-line small { display: block; }.device-line strong { font-size: 12px; }.device-line small { margin-top: 3px; color: var(--muted); font-size: 9px; }.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #aaa; }.status-dot.online { background: var(--mint); box-shadow: 0 0 0 5px rgba(76,169,137,.12); }
.context-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.context-card-heading small { color: var(--muted); font-size: 9px; }.context-card-heading .context-kicker { margin-bottom: 10px; }

@media (max-width: 1050px) {
  .chat-app { grid-template-columns: 230px minmax(420px,1fr); }
  .chat-context { display: none; }
  .memory-toggle { display: inline-flex; }
  .chat-context.open { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; display: block; width: min(360px, 88vw); padding-top: 54px; box-shadow: -20px 0 50px rgba(47,43,55,.18); }
  .context-scrim.open { position: fixed; z-index: 28; inset: 0; display: block; border: 0; background: rgba(47,43,55,.28); backdrop-filter: blur(2px); }
  .context-close.open { position: fixed; z-index: 32; top: 13px; right: 15px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: white; font-size: 20px; }
}

@media (max-width: 720px) {
  .chat-app { display: block; }
  .chat-sidebar { display: none; }
  .chat-workspace { height: 100vh; }
  .chat-topbar { min-height: 70px; padding: 9px 12px; }
  .active-companion { display: none; }
  .chat-top-actions .model-badge { display: none; }.chat-top-actions a { white-space: nowrap; font-size: 10px; }
  .mobile-selectors { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 6px; }
  .mobile-selectors select { min-width: 0; padding: 8px 25px 8px 9px; border-radius: 10px; font-size: 10px; }
  .message-stream { padding: 22px 13px; }
  .chat-empty { margin-top: 30px; }.chat-empty h1 { font-size: 31px; }.chat-empty p { font-size: 12px; }
  .starter-prompts { display: grid; }.starter-prompts button { text-align: left; }
  .message-row { gap: 8px; margin-bottom: 17px; }.message-avatar { width: 27px; height: 27px; }.message-bubble { max-width: 86%; padding: 11px 13px; font-size: 12px; }
  .chat-composer { margin: 0 10px 10px; border-radius: 15px; }
  .composer-footer > span { display: none; }
  .composer-footer { justify-content: flex-end; }
}

/* V0.7 · calmer conversation canvas and browser voice controls */
:root {
  --voice-mint: #58b996;
  --voice-violet: #766b87;
}

.chat-app { grid-template-columns: 320px minmax(420px, 1fr) 390px; }
.sidebar-heading { font-size: 11px; }
.sidebar-heading a { font-size: 12px; }
.companion-choice strong { font-size: 13px; }
.companion-choice small { font-size: 10px; }
.conversation-choice strong { font-size: 12px; }
.conversation-choice small { font-size: 10px; }
.sidebar-footer strong { font-size: 11px; }
.sidebar-footer small { font-size: 9px; }
.chat-sidebar { padding: 18px 14px 14px; background: linear-gradient(165deg, #34303d 0%, #292631 62%, #25232c 100%); }
.chat-brand { padding: 3px 6px 22px; }
.companion-choice { padding: 10px; border-radius: 14px; transition: background .18s ease, transform .18s ease; }
.companion-choice:hover { transform: translateX(2px); }
.companion-choice.active { background: linear-gradient(110deg, rgba(255,255,255,.12), rgba(255,255,255,.065)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); }
.conversation-choice { border-radius: 12px; }
.sidebar-footer { border-radius: 14px; }

.chat-workspace { position: relative; background:
  radial-gradient(circle at 82% 8%, rgba(255,224,211,.42), transparent 28%),
  linear-gradient(180deg, rgba(255,253,251,.96), rgba(250,246,242,.96)); }
.chat-topbar { min-height: 72px; padding: 11px 24px; border-bottom-color: rgba(234,223,216,.72); background: rgba(255,253,251,.78); }
.chat-avatar { width: 44px; height: 44px; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(239,106,91,.08), 0 8px 22px rgba(239,106,91,.09); }
.active-companion strong { font-size: 15px; }.active-companion span { font-size: 10px; }
.chat-top-actions { gap: 8px; }
.top-action-button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(234,223,216,.9); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.82); font-size: 9px; font-weight: 780; }
.top-action-button span { font-size: 13px; }.top-action-button[aria-pressed="true"] { color: #3f866f; border-color: rgba(76,169,137,.26); background: rgba(76,169,137,.1); }
.voice-session-toggle[aria-pressed="true"] { color: #d9574b; border-color: rgba(239,106,91,.28); background: rgba(239,106,91,.1); box-shadow: 0 0 0 4px rgba(239,106,91,.055); }
.memory-toggle { display: inline-flex; padding: 6px 9px; }
.memory-toggle[aria-pressed="true"] { color: #a04f48; border-color: rgba(239,106,91,.28); background: rgba(239,106,91,.1); }
.model-badge { padding: 7px 9px; background: rgba(76,169,137,.075); }

.message-stream { padding: 28px clamp(28px, 5vw, 76px) 18px; scrollbar-width: thin; scrollbar-color: rgba(117,105,120,.2) transparent; }
.message-row { width: 100%; max-width: none; margin-bottom: 20px; }
.message-avatar { width: 32px; height: 32px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(239,106,91,.08); }
.message-content { max-width: min(84%, 780px); display: flex; flex-direction: column; align-items: flex-start; }
.message-row.user .message-content { align-items: flex-end; }
.message-bubble { max-width: min(84%, 780px); padding: 14px 17px; border-color: rgba(230,218,211,.82); border-radius: 6px 19px 19px 19px; background: rgba(255,255,255,.84); box-shadow: 0 8px 28px rgba(79,55,42,.045); font-size: 14px; line-height: 1.76; backdrop-filter: blur(12px); }
.message-content .message-bubble { max-width: 100%; }
.message-row.user .message-bubble { border-radius: 19px 19px 6px 19px; background: linear-gradient(135deg, #ef6a5b, #e15c50); box-shadow: 0 12px 28px rgba(239,106,91,.16); }
.message-actions { min-height: 22px; margin: 4px 4px 0; display: flex; align-items: center; gap: 8px; }
.message-row.user .message-actions { justify-content: flex-end; }
.message-meta { color: #aaa1a8; font-size: 8px; }
.message-playback { padding: 3px 7px; border: 0; border-radius: 8px; color: #8b7e86; background: transparent; font-size: 9px; line-height: 1; transition: .18s ease; }
.message-playback:hover { color: var(--coral); background: rgba(239,106,91,.08); }
.message-playback.active { color: white; background: var(--coral); }
.message-playback.loading { color: var(--coral); cursor: wait; }
.message-playback:disabled { display: none; }
.chat-empty { margin-top: clamp(25px, 7vh, 72px); }
.chat-empty h1 { font-size: clamp(30px, 3.3vw, 44px); }
.empty-orbit { width: 92px; height: 92px; }
.empty-orbit span { width: 62px; height: 62px; border-radius: 22px; font-size: 20px; }
.starter-prompts button { padding: 10px 14px; background: rgba(255,255,255,.86); box-shadow: 0 7px 22px rgba(79,55,42,.04); }

.chat-composer { width: min(860px, calc(100% - 40px)); justify-self: center; margin: 0 0 18px; padding: 9px 11px 8px; border-color: rgba(224,211,203,.9); border-radius: 22px; background: rgba(255,255,255,.93); box-shadow: 0 18px 48px rgba(65,48,42,.12), 0 2px 9px rgba(65,48,42,.035); backdrop-filter: blur(18px); }
.voice-session-controls { display: flex; align-items: center; gap: 9px; margin: -2px -2px 8px; padding: 8px 9px; border: 1px solid rgba(239,106,91,.16); border-radius: 15px; color: #6c6067; background: linear-gradient(100deg, rgba(255,240,234,.9), rgba(250,246,242,.66)); }
.voice-session-controls[hidden] { display: none; }
.voice-session-controls > div { display: flex; align-items: center; gap: 7px; }
.voice-session-controls strong { font-size: 10px; }.voice-session-controls small { color: var(--coral-dark); font: 750 8px ui-monospace, monospace; }
.voice-session-controls > span { min-width: 0; flex: 1; overflow: hidden; color: #988d94; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.voice-session-controls button { padding: 5px 8px; border: 1px solid rgba(224,211,203,.9); border-radius: 9px; color: #776c73; background: rgba(255,255,255,.78); font-size: 9px; font-weight: 760; }
.voice-session-controls button[aria-pressed="true"] { color: #d9574b; border-color: rgba(239,106,91,.25); background: rgba(239,106,91,.08); }
.voice-session-controls .session-end { color: white; border-color: var(--coral); background: var(--coral); }
.session-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(239,106,91,.09); animation: session-pulse 1.5s ease-in-out infinite; }
@keyframes session-pulse { 50% { box-shadow: 0 0 0 7px rgba(239,106,91,.035); } }
.composer-main { display: flex; align-items: flex-end; gap: 9px; }
.chat-composer textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 150px; padding: 10px 5px 7px; font-size: 13px; }
.chat-composer textarea::placeholder { color: #aaa1a8; }
.mic-button, .send-button { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 0; border-radius: 15px; }
.mic-button { position: relative; color: var(--voice-violet); background: #f4efec; transition: transform .18s ease, background .18s ease, color .18s ease; }
.mic-button:hover { transform: translateY(-1px); background: #eee7e3; }
.mic-button:disabled { opacity: .38; cursor: not-allowed; }
.mic-button.listening { color: white; background: var(--coral); box-shadow: 0 0 0 6px rgba(239,106,91,.11); animation: voice-pulse 1.25s ease-in-out infinite; }
.mic-button.speaking { color: white; background: var(--voice-mint); }
.mic-button.session-active:not(.listening):not(.speaking) { color: var(--coral-dark); background: #fff0eb; }
.mic-glyph { position: relative; width: 12px; height: 18px; border: 2px solid currentColor; border-radius: 8px; }
.mic-glyph::before { content: ""; position: absolute; left: 50%; bottom: -7px; width: 18px; height: 10px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 10px 10px; transform: translateX(-50%); }
.mic-glyph::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 2px; height: 5px; background: currentColor; transform: translateX(-50%); }
.send-button { grid-auto-flow: column; gap: 0; color: white; background: var(--coral); box-shadow: 0 9px 22px rgba(239,106,91,.19); }
.send-button.stopping { background: #3c3540; box-shadow: 0 9px 22px rgba(48,41,51,.18); }
.send-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.send-button b { font-size: 18px; transform: translateY(-1px); }.send-button:disabled { opacity: .32; box-shadow: none; cursor: not-allowed; }
.composer-footer { padding: 6px 3px 0 52px; }.composer-footer > span, .composer-footer small { color: #aaa1a8; font-size: 8px; }.composer-footer small { margin-left: auto; }
.composer-footer .voice-session-shortcut { padding: 4px 7px; border: 1px solid rgba(239,106,91,.16); border-radius: 8px; color: #a04f48; background: rgba(239,106,91,.07); font-size: 8px; box-shadow: none; }
.voice-session-shortcut i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.composer-footer .voice-session-shortcut b { width: auto; height: auto; display: inline; border-radius: 0; background: transparent; font-weight: 800; }
.composer-footer .voice-session-shortcut[aria-pressed="true"] { color: white; border-color: var(--coral); background: var(--coral); }
.composer-footer .song-shortcut { padding: 4px 8px; border: 1px solid rgba(118,107,135,.18); border-radius: 8px; color: #6f637e; background: rgba(118,107,135,.07); font-size: 8px; box-shadow: none; }
.composer-footer .song-shortcut i { width: auto; height: auto; font-size: 12px; font-style: normal; }
.composer-footer .song-shortcut b { width: auto; height: auto; display: inline; background: transparent; }
.composer-footer .song-shortcut:disabled { opacity: .38; }

.singing-card { width: min(100%, 430px); margin-top: 9px; overflow: hidden; border: 1px solid rgba(118,107,135,.15); border-radius: 17px; background: linear-gradient(135deg, #3a3445, #655872); box-shadow: 0 12px 28px rgba(58,52,69,.15); color: white; }
.singing-card-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px 9px; }
.singing-note { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; background: rgba(255,255,255,.12); font-size: 18px; }
.singing-card-head div { min-width: 0; flex: 1; }
.singing-card strong, .singing-card small { display: block; }
.singing-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.singing-card small { margin-top: 3px; color: rgba(255,255,255,.67); font-size: 8px; }
.singing-card .singing-status { padding: 0 14px 12px; color: rgba(255,255,255,.74); font-size: 9px; }
.singing-card audio { display: block; width: calc(100% - 20px); height: 38px; margin: 0 10px 11px; }
.singing-card.loading .singing-note { animation: singing-pulse 1s ease-in-out infinite alternate; }
.singing-card.failed { background: linear-gradient(135deg, #5c474c, #77565a); }
@keyframes singing-pulse { to { transform: scale(1.1) rotate(8deg); background: rgba(255,255,255,.22); } }

.voice-live-state { max-height: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; opacity: 0; padding: 0 4px; color: var(--muted); transition: max-height .2s ease, opacity .2s ease, padding .2s ease; }
.voice-live-state.active { max-height: 34px; opacity: 1; padding: 2px 4px 8px; }
.voice-live-state b { font-size: 10px; }.voice-live-state small { font-size: 9px; }
.voice-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #b2aab1; }
.voice-live-state[data-state="listening"] .voice-live-dot { background: var(--coral); box-shadow: 0 0 0 4px rgba(239,106,91,.1); }
.voice-live-state[data-state="thinking"] .voice-live-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(233,162,59,.1); }
.voice-live-state[data-state="speaking"] .voice-live-dot { background: var(--voice-mint); box-shadow: 0 0 0 4px rgba(76,169,137,.1); }
.voice-live-state[data-state="muted"] .voice-live-dot { background: #aaa1a8; }
.voice-bars { display: flex; align-items: center; gap: 2px; height: 13px; margin-left: auto; }
.voice-bars i { width: 2px; height: 4px; border-radius: 3px; background: currentColor; }
.voice-live-state[data-state="listening"] .voice-bars i, .voice-live-state[data-state="speaking"] .voice-bars i { animation: voice-bar .7s ease-in-out infinite alternate; }
.voice-bars i:nth-child(2) { animation-delay: -.2s !important; }.voice-bars i:nth-child(3) { animation-delay: -.4s !important; }.voice-bars i:nth-child(4) { animation-delay: -.1s !important; }
@keyframes voice-bar { to { height: 13px; } }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 10px rgba(239,106,91,.055); } }

.chat-context { padding: 16px; background: rgba(246,240,235,.82); }
.context-card { padding: 16px; border-radius: 19px; box-shadow: 0 10px 34px rgba(79,55,42,.045); }
.chat-context .context-kicker { font-size: 10px; }
.chat-context .context-main { font-size: 14px; }
.chat-context .context-card p { font-size: 11px; }
.chat-context .context-state span { font-size: 9px; }
.chat-context .context-state strong { font-size: 13px; }
.browser-voice-line { display: flex; align-items: center; gap: 11px; }
.browser-voice-line strong, .browser-voice-line small { display: block; }.browser-voice-line strong { font-size: 11px; }.browser-voice-line small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.voice-orb { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13px; background: #f4efec; }
.voice-orb i { width: 8px; height: 8px; border-radius: 50%; background: #aaa; }.voice-orb.listening i { background: var(--coral); }.voice-orb.speaking i { background: var(--voice-mint); }
.voice-privacy-badge { padding: 4px 6px; border-radius: 999px; color: #3f866f !important; background: rgba(76,169,137,.1); }
.microphone-diagnostics { display: grid; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(224,211,203,.75); }
.microphone-diagnostics label { color: var(--muted); font-size: 8px; font-weight: 760; }
.microphone-diagnostics select, .microphone-diagnostics button { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid rgba(224,211,203,.9); border-radius: 9px; color: #665d63; background: rgba(255,255,255,.82); font-size: 9px; }
.microphone-diagnostics button { color: #a04f48; background: rgba(239,106,91,.07); font-weight: 800; cursor: pointer; }
.microphone-diagnostics button:disabled { opacity: .55; cursor: wait; }
.microphone-level { height: 7px; overflow: hidden; border-radius: 999px; background: #eee8e4; }
.microphone-level i { width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #65bda0, #efaa55, #ef6a5b); transform: scaleX(var(--mic-level, 0)); transform-origin: left; transition: transform .08s linear; }
.microphone-diagnostics > small { color: var(--muted); font-size: 8px; }
.voice-turn-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 3px; }
.voice-turn-metrics span { min-width: 0; padding: 7px 4px; border: 1px solid rgba(224,211,203,.75); border-radius: 9px; text-align: center; background: rgba(255,255,255,.66); }
.voice-turn-metrics small, .voice-turn-metrics b { display: block; }
.voice-turn-metrics small { color: var(--muted); font-size: 7px; }
.voice-turn-metrics b { margin-top: 3px; color: #665d63; font: 800 9px ui-monospace, monospace; }
.voice-turn-metrics b.ready { color: #3f866f; }

@media (max-width: 1120px) {
  .chat-app { grid-template-columns: 228px minmax(420px,1fr); }
  .chat-context { display: none; }
  .memory-toggle { display: inline-flex; }
}

@media (max-width: 720px) {
  .chat-app { display: block; }
  .chat-topbar { min-height: 66px; padding: 8px 10px; }
  .chat-top-actions { gap: 5px; }.chat-top-actions .voice-playback-toggle b { display: none; }.chat-top-actions .voice-playback-toggle { width: 30px; justify-content: center; padding: 5px; }
  .chat-top-actions .voice-session-toggle b { display: none; }.chat-top-actions .voice-session-toggle { width: 30px; justify-content: center; padding: 5px; }
  .message-stream { padding: 20px 12px 12px; }
  .message-content { max-width: 88%; }.message-bubble { max-width: 100%; padding: 12px 14px; font-size: 13px; }
  .chat-composer { width: calc(100% - 16px); margin-bottom: 8px; padding: 8px 8px 7px; border-radius: 19px; }
  .mic-button, .send-button { width: 40px; height: 40px; border-radius: 14px; }
  .chat-composer textarea { min-height: 40px; padding-top: 9px; }
  .composer-footer { padding-left: 48px; }.composer-footer small { display: none; }.composer-footer .voice-session-shortcut { margin-left: auto; }
  .voice-live-state small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voice-session-controls { gap: 6px; padding: 7px; }.voice-session-controls > span { display: none; }.voice-session-controls button { padding: 5px 7px; }
}

/* Desktop navigation sizing: keep the conversation canvas readable while giving
   both navigation columns enough room for their labels and metadata. */
@media (min-width: 1121px) {
  .chat-app { grid-template-columns: 350px minmax(420px, 1fr) 430px; }
  .chat-composer { width: min(960px, calc(100% - 28px)); }
  .chat-composer textarea { min-height: 52px; }
  .sidebar-heading { font-size: 12px; }
  .sidebar-heading a { font-size: 13px; }
  .companion-choice strong { font-size: 14px; }
  .companion-choice small { font-size: 11px; }
  .conversation-choice strong { font-size: 13px; }
  .conversation-choice small { font-size: 11px; }
  .sidebar-empty { font-size: 12px; }
  .sidebar-footer strong { font-size: 12px; }
  .sidebar-footer small { font-size: 10px; }
  .chat-context .context-kicker { font-size: 11px; }
  .chat-context .context-main { font-size: 15px; }
  .chat-context .context-card p { font-size: 12px; }
  .chat-context .context-state span { font-size: 10px; }
  .chat-context .context-state strong { font-size: 14px; }
  .context-portrait strong { font-size: 15px; }
  .context-portrait small { font-size: 11px; }
  .context-tags span { font-size: 10px; }
}

/* V0.26: portrait stage and live reply ticker */
.chat-workspace { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.conversation-canvas {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 42%) minmax(320px, 1fr);
  overflow: hidden;
}
.conversation-canvas .message-stream { min-width: 0; min-height: 0; }
.companion-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 3vw, 42px);
}
.companion-face {
  position: relative;
  width: min(100%, 56vh, 560px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(224, 211, 203, .82);
  border-radius: 50%;
  color: rgba(181, 104, 94, .72);
  background: linear-gradient(145deg, rgba(255, 239, 232, .94), rgba(255, 255, 255, .88));
  box-shadow: 0 28px 70px rgba(79, 55, 42, .12), inset 0 0 0 10px rgba(255, 255, 255, .45);
  isolation: isolate;
}
.companion-face::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 12%;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 46% 54% 50% 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.companion-face::after {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: inherit;
}
.companion-face > span {
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 850;
  line-height: 1;
}
.companion-face img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform-origin: 50% 58%;
  filter: saturate(1.03) contrast(1.02);
  transition: filter .35s ease;
}
.companion-face.has-image img { animation: avatar-engine-breathe 4.6s ease-in-out infinite; }
.chat-body[data-voice-state="speaking"] .companion-face.has-image img { animation: avatar-engine-talk .24s ease-in-out infinite alternate; }
.chat-body[data-expression="happy"] .companion-face.has-image img { filter: saturate(1.2) brightness(1.04) contrast(1.04); animation-name: avatar-engine-happy; }
.chat-body[data-expression="sad"] .companion-face.has-image img { filter: saturate(.72) brightness(.93) contrast(1.03); animation-name: avatar-engine-sad; }
.chat-body[data-expression="jealous"] .companion-face.has-image img { filter: saturate(1.12) hue-rotate(-4deg); animation-name: avatar-engine-jealous; }
.chat-body[data-expression="shy"] .companion-face.has-image img { filter: saturate(1.16) brightness(1.02); animation-name: avatar-engine-shy; }
.chat-body[data-expression="angry"] .companion-face.has-image img,
.chat-body[data-expression="tense"] .companion-face.has-image img { filter: saturate(1.18) contrast(1.12) brightness(.98); animation-name: avatar-engine-tense; }
.chat-body[data-expression="curious"] .companion-face.has-image img { animation-name: avatar-engine-curious; }
.chat-body[data-expression="tired"] .companion-face.has-image img { filter: saturate(.78) brightness(.95); animation-name: avatar-engine-tired; }
.chat-body[data-expression="happy"] .companion-face::before,
.chat-body[data-expression="shy"] .companion-face::before,
.chat-body[data-expression="jealous"] .companion-face::before { opacity: 1; animation: avatar-engine-aura 1.8s ease-in-out infinite; }
.face-image-button {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 12%;
  min-width: 88px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  color: #6e5e64;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(48, 41, 51, .15);
  font-size: 10px;
  font-weight: 800;
  transform: translateX(-50%);
  transition: opacity .18s ease, transform .18s ease;
}
.companion-face.has-image .face-image-button { opacity: 0; transform: translateX(-50%) translateY(4px); }
.companion-face.has-image:hover .face-image-button,
.companion-face.has-image:focus-within .face-image-button { opacity: 1; transform: translateX(-50%); }
.reply-ticker {
  min-width: 0;
  height: 46px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 clamp(20px, 5vw, 68px) 8px;
  overflow: hidden;
  border-top: 1px solid rgba(224, 211, 203, .82);
  border-bottom: 1px solid rgba(224, 211, 203, .82);
  color: #5e545a;
  background: rgba(255, 255, 255, .45);
}
.reply-ticker-label {
  padding-left: 12px;
  color: var(--coral-dark);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.reply-ticker-viewport { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.reply-ticker-text {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: max-content;
  max-width: none;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateY(-50%);
  will-change: transform;
}
.reply-ticker[data-state="waiting"] .reply-ticker-text { color: #a39ba5; }
.reply-ticker[data-state="streaming"] { border-color: rgba(239, 106, 91, .3); }

@media (max-width: 900px) and (min-width: 721px) {
  .conversation-canvas { grid-template-columns: minmax(270px, 44%) minmax(260px, 1fr); }
  .companion-stage { padding: 18px; }
  .companion-face { width: min(100%, 46vh, 420px); }
}

@media (max-width: 720px) {
  .conversation-canvas { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 30vh) minmax(0, 1fr); }
  .companion-stage { grid-row: 1; padding: 10px 16px; }
  .companion-face { width: min(46vw, 25vh, 190px); }
  .companion-face > span { font-size: 38px; }
  .face-image-button { bottom: 8%; padding: 7px 10px; font-size: 9px; }
  .conversation-canvas .message-stream { grid-row: 2; }
  .reply-ticker { height: 40px; margin: 0 10px 6px; gap: 8px; }
  .reply-ticker-label { padding-left: 8px; }
  .reply-ticker-text { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .reply-ticker-text { will-change: auto; }
  .companion-face.has-image img,
  .companion-face::before { animation: none !important; }
}

@keyframes avatar-engine-breathe { 0%,100% { transform: translateY(1.5%) scale(1.005); } 50% { transform: translateY(-.8%) scale(1.018); } }
@keyframes avatar-engine-talk { from { transform: translateY(1.5%) scale(1.005, 1.008); } to { transform: translateY(0) scale(1.014, .994); } }
@keyframes avatar-engine-happy { 0%,100% { transform: translateY(1.5%) rotate(-.3deg) scale(1.01); } 50% { transform: translateY(-1%) rotate(.5deg) scale(1.025); } }
@keyframes avatar-engine-sad { 0%,100% { transform: translateY(3%) rotate(.2deg) scale(.995); } 50% { transform: translateY(4.5%) rotate(-.2deg) scale(.99); } }
@keyframes avatar-engine-jealous { 0%,100% { transform: translate(1.2%, 2%) rotate(1deg) scale(1.005); } 50% { transform: translate(-1%, 1%) rotate(-1deg) scale(1.012); } }
@keyframes avatar-engine-shy { 0%,100% { transform: translateY(2%) rotate(-.4deg) scale(1.005); } 50% { transform: translate(1%, 2.5%) rotate(.5deg) scale(1.018); } }
@keyframes avatar-engine-tense { 0%,100% { transform: translateY(1.5%) scale(1.01); } 50% { transform: translateY(.5%) scale(1.02, .99); } }
@keyframes avatar-engine-curious { 0%,100% { transform: translate(0, 1.5%) rotate(-.8deg) scale(1.005); } 50% { transform: translate(1.4%, 0) rotate(1.2deg) scale(1.018); } }
@keyframes avatar-engine-tired { 0%,100% { transform: translateY(3%) scale(.995); } 50% { transform: translateY(4%) scale(.99); } }
@keyframes avatar-engine-aura { 0%,100% { transform: scale(.98); opacity: .35; } 50% { transform: scale(1.03); opacity: .8; } }

/* V0.27: the face is the primary visual; keep chat history available to the
   script while presenting it through the live subtitle ticker instead. */
.conversation-canvas {
  grid-template-columns: minmax(0, 1fr);
}
.conversation-canvas .message-stream {
  display: none;
}
.companion-stage {
  grid-column: 1;
}

@media (max-width: 720px) {
  .conversation-canvas {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .companion-stage {
    grid-row: 1;
  }
}