/* Shared dark-DM product shell; protocol/state visibility stays in chat.js. */
.chat-website main { max-width:680px; padding:24px 0 12px; }
#chat-root { display:flex; flex-direction:column; gap:0; width:100%; height:min(780px,calc(100dvh - 100px)); min-height:360px; overflow:hidden; border:1px solid var(--border); background:var(--bg); }
#chat-root h1 { margin:0; font-size:15px; line-height:1; font-weight:700; letter-spacing:0; }
#chat-root p { margin:0; }
.chat-header { order:0; height:48px; flex:none; padding:0 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--border); }
.chat-brand { display:flex; gap:10px; align-items:center; }
.brand-ring { width:26px; height:26px; border:2px solid var(--online); border-radius:50%; flex:none; }
.chat-presence { display:flex; gap:6px; align-items:center; min-width:0; }
#chat-presence { font-size:13px; color:var(--text-muted); white-space:nowrap; }
.presence-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--online); }
.is-reconnecting .presence-dot { animation:presence-pulse 1.2s infinite; }
@keyframes presence-pulse { 50% { opacity:.35; } }
#chat-status { order:1; flex:none; min-height:32px; display:flex; justify-content:center; align-items:center; padding:5px 12px; text-align:center; font-size:13px; line-height:1.35; color:var(--text-muted); overflow-wrap:anywhere; }
.chat-banner { order:2; flex:none; padding:8px 12px; border-bottom:1px solid var(--border); font-size:12px; line-height:1.35; color:var(--text-muted); text-align:center; }
#chat-voice { order:3; flex:none; padding:8px 16px; border-bottom:1px solid var(--border); }
#chat-voice-status:empty { display:none; }
#chat-voice-status { padding-bottom:6px; color:var(--text-muted); font-size:12px; }
.voice-actions,.handoff-actions { display:flex; gap:8px; flex-wrap:wrap; }
#chat-root button { height:40px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--text); font-size:14px; font-weight:500; padding:0 20px; transition:background-color .12s,transform .1s; }
#chat-root button:hover:not(:disabled) { background:var(--hover-wash); }
#chat-root button:active:not(:disabled) { transform:scale(.97); }
#chat-root button:disabled { opacity:.4; cursor:default; }
#chat-root :is(button,input):focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
#chat-root :is(#chat-stop,#chat-voice-end):hover:not(:disabled) { color:var(--danger); border-color:var(--danger); }
#chat-messages { order:4; flex:1; min-height:0; display:flex; flex-direction:column; align-items:flex-start; overflow-y:auto; overscroll-behavior:contain; list-style:none; margin:0; padding:12px 16px; }
#chat-root:not(.state-matched)::after { content:""; order:5; flex:1; min-height:0; }
#chat-messages .message { flex:none; width:fit-content; max-width:75%; border-radius:22px; padding:10px 14px; margin:0; font-size:15px; line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
.message.incoming { align-self:flex-start; background:var(--bubble-in); }
.message.outgoing { align-self:flex-end; background:var(--bubble-out); }
.message + .message { margin-top:12px !important; }
.incoming + .incoming { margin-top:2px !important; border-top-left-radius:6px !important; }
.outgoing + .outgoing { margin-top:2px !important; border-top-right-radius:6px !important; }
.chat-bottom { order:6; flex:none; display:flex; flex-direction:column; gap:8px; padding:12px 16px 4px; border-top:1px solid var(--border); }
#chat-form { display:flex; gap:8px; align-items:center; }
#chat-root input { width:100%; min-width:0; height:40px; background:transparent; border:1px solid var(--border); border-radius:999px; padding:0 16px; font:inherit; font-size:15px; color:var(--text); }
#chat-input { flex:1; }
#chat-input::placeholder { color:var(--text-muted); }
#chat-root #chat-send { width:40px; height:40px; padding:0; flex:none; display:flex; justify-content:center; align-items:center; background:var(--bubble-out); }
#chat-send svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.chat-actions { display:flex; gap:8px; }
.chat-actions button { flex:1; }
#chat-root #chat-find,#chat-root #chat-open { background:var(--bubble-out); }
#chat-root #chat-handoff { height:32px; min-height:32px; border:0; padding:0 4px; color:var(--text-muted); background:transparent; font-size:13px; }
#chat-handoff-panel { max-height:168px; overflow-y:auto; border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:8px; display:flex; flex-direction:column; gap:8px; }
#chat-handoff-panel p { font-size:11px; color:var(--text-muted); }
#chat-handoff-panel input { font-size:13px; }
#chat-handoff-panel button { font-size:12px; padding:0 12px; flex:1; }
#chat-root:has(#chat-handoff-panel:not([hidden])) #chat-form { display:none; }
#chat-root.is-readonly .chat-bottom { border-top:0; }
.privacy-note { font-size:11px; line-height:1.4; margin:12px 16px 0; color:var(--text-muted); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.embed:not(.experiment-page) main { max-width:480px; height:100dvh; padding:0; overflow:hidden; }
.embed:not(.experiment-page) #chat-root { height:100dvh; min-height:0; max-height:none; border:0; }
.embed .chat-header { padding:0 12px; }
.embed #chat-messages { padding:12px; }
.embed #chat-messages .message { max-width:80%; }
.embed #chat-root button { height:36px; font-size:13px; }
.embed #chat-root #chat-send { height:40px; }
.embed .chat-bottom { padding:12px 12px 4px; }
.embed #chat-voice { padding:0; border:0; }
.embed #chat-voice:has(#chat-voice-note:not([hidden])) { padding:6px 12px; border-bottom:1px solid var(--border); }
.embed .voice-actions { display:contents; }
.embed.experiment-page main { height:auto; min-height:100dvh; overflow-y:auto; }
.embed.experiment-page #chat-root { height:480px; }
@media (max-width:600px) {
  .chat-website main { max-width:100%; padding:0; }
  .chat-website #chat-root { height:calc(100dvh - 56px); min-height:320px; border:0; }
  .chat-website .chat-bottom { padding-bottom:max(4px,env(safe-area-inset-bottom)); }
  .chat-website .privacy-note { margin:10px 16px; }
  #chat-root:has(#chat-handoff-panel:not([hidden])) .chat-bottom { max-height:55dvh; overflow-y:auto; }
}
@media (prefers-reduced-motion:reduce) {
  #chat-root button { transition:none; }
  #chat-root button:active { transform:none !important; }
  .presence-dot { animation:none !important; }
}

#chat-root .is-error { color:var(--danger); }
.incoming:has(+ .incoming) { border-bottom-left-radius:6px !important; }
.outgoing:has(+ .outgoing) { border-bottom-right-radius:6px !important; }
#chat-form:has(#chat-input:placeholder-shown) #chat-send { opacity:.4; }