/* Full-page messaging: solid navigation and composer, water behind the thread. */
:root { --chat-sent: var(--selected-face); --chat-sent-ink: var(--selected-ink); --chat-received: var(--glass-face); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:root[data-view="chat"] :is(.corner-controls, .corner-footer) { display: none; }
.scene[data-phase="chat"] { position: fixed; top: var(--chat-top, 0px); left: 0; right: 0; min-height: 0; height: var(--chat-vh, 100dvh); }
.chat-screen { position: relative; z-index: 1; height: 100%; width: 100%; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); padding: 0; }
.chat-shell { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; position: relative; overflow: hidden; color: var(--ink); background: transparent; }
.chat-sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--dialog); box-shadow: inset -1px 0 var(--glass-edge); }
.conversation-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; padding: 18px 12px 12px; }
.conversation-header h2 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.conversation-header h2:focus { outline: none; }
.conversation-scope { margin: 0 22px 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.conversation-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--utility-selected) transparent; }
.conversation-row { display: grid; gap: 6px; width: 100%; min-height: 100px; padding: 18px 22px; border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.conversation-row[aria-current="true"] { background: var(--utility); }
.conversation-row strong { font-size: 15px; line-height: 1.4; font-weight: 600; }
.conversation-id { color: var(--muted); font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.conversation-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; line-height: 1.5; }
.conversation-save { color: var(--muted); font-size: 11px; line-height: 1.4; }
.conversation-row:focus-visible { outline-offset: -5px; }
:is(#return-saved-list, #chat-conversations) .conversation-row { grid-template-columns: minmax(0, 1fr) 20px; column-gap: 16px; }
:is(#return-saved-list, #chat-conversations) .conversation-row > :not(.conversation-open) { grid-column: 1; min-width: 0; }
:is(#return-saved-list, #chat-conversations) .conversation-id { overflow-wrap: anywhere; }
.conversation-open { grid-column: 2; grid-row: 1 / 5; align-self: center; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
#chat-conversations .conversation-row { border-bottom: 1px solid var(--glass-edge); border-bottom-color: color-mix(in srgb, var(--ink) 18%, var(--dialog)); }
#chat-conversations .conversation-row:active { background: var(--utility-selected); }
@media (hover: hover) { #chat-conversations .conversation-row:hover { background: var(--utility); } }
.chat-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; align-items: center; gap: 12px; padding: 18px 24px 10px; background: var(--dialog); }
.chat-preferences { display: flex; align-items: center; gap: 10px; }
.chat-preferences .utility { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.chat-preferences .language-switch { padding: 2px; }
.chat-preferences .language-switch button { height: 44px; }
#chat-list-preferences:not(:empty) { display: flex; justify-content: flex-end; padding: 0 12px 12px; }
#chat-list-preferences .chat-preferences { margin: 0; }
.chat-heading h1 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.chat-heading h1:focus { outline: none; }
.chat-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chat-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; }
.chat-icon:active { opacity: 0.6; }
.chat-icon svg { width: 22px; height: 22px; }
.chat-room-row { padding: 0 32px 14px; box-shadow: 0 1px 0 var(--glass-edge); background: var(--dialog); }
.chat-room-code { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; padding: 6px 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.5; cursor: pointer; text-align: left; }
.chat-room-code code { color: var(--ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; user-select: all; }
.chat-room-code svg { width: 15px; height: 15px; }
.chat-room-code:active { opacity: 0.6; }
#chat-notice { margin: 3px 0 0; max-width: 65ch; color: var(--muted); font-size: 12px; line-height: 1.5; }
.chat-history { position: relative; min-height: 0; }
.chat-log { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 28px max(32px, calc((100% - 1000px) / 2)); scrollbar-width: thin; scrollbar-color: var(--utility-selected) transparent; scroll-padding: 24px; }
.chat-log:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; border-radius: 12px; }
.chat-empty { min-height: 100%; display: grid; place-items: center; color: var(--muted); text-align: center; font-size: 14px; }
.chat-empty p { margin: 0; }
.message-list { display: grid; align-content: start; gap: 20px; list-style: none; margin: 0; padding: 0; }
.message { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.message[data-sender="visitor"] { justify-items: end; }
.message-bubble { max-width: min(76%, 560px); margin: 0; padding: 13px 18px; border-radius: 22px 22px 22px 6px; background: var(--chat-received); color: var(--ink); font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message[data-sender="visitor"] .message-bubble { border-radius: 22px 22px 6px 22px; color: var(--chat-sent-ink); background: var(--chat-sent); }
.message-meta { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 8px; max-width: 90%; padding-inline: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.message-retry { min-height: 44px; margin: -15px 0; padding: 12px 4px; border: 0; background: transparent; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.chat-error { margin: 8px 12px 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
.chat-load-older { display: block; margin: 0 auto 18px; }
.chat-new-messages { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); min-height: 40px; padding: 10px 18px; border: 0; border-radius: 999px; color: var(--ink); background: var(--utility-selected); font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 4px 18px -8px var(--shadow); }
.chat-composer { padding: 16px max(24px, calc((100% - 1000px) / 2)) 14px; background: var(--dialog); }
.composer-field { display: flex; align-items: flex-end; gap: 10px; padding: 9px 10px 9px 18px; border-radius: 26px; background: var(--utility); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.composer-field:focus-within { box-shadow: inset 0 0 0 1px var(--muted); }
#chat-message { display: block; width: 100%; min-width: 0; height: 26px; min-height: 26px; max-height: 130px; margin: 5px 0; padding: 0; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); caret-color: var(--ink); font: inherit; font-size: 16px; line-height: 26px; overflow-y: auto; scrollbar-width: thin; }
#chat-message::placeholder { color: var(--muted); opacity: 1; }
.chat-send { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--selected-face); color: var(--selected-ink); cursor: pointer; }
.chat-send:disabled { opacity: 0.35; cursor: default; }
.chat-send:not(:disabled):active { opacity: 0.7; }
.chat-send { touch-action: manipulation; }
.typing-indicator { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 90%; margin-top: 20px; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--glass-face); color: var(--ink); font-size: 12px; line-height: 1.5; }
.typing-dots { display: inline-flex; align-items: center; gap: 4px; min-height: 16px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: typing-dot 1.5s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: 150ms; }
.typing-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; } }
.chat-send svg { width: 22px; height: 22px; stroke-width: 2; }
.composer-meta { display: flex; justify-content: space-between; gap: 12px; min-height: 20px; padding: 7px 12px 0; color: var(--muted); font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.chat-ended { padding: 22px 24px; box-shadow: 0 -1px 0 var(--glass-edge); background: var(--dialog); text-align: center; }
.chat-ended h2 { margin: 0; font-size: 18px; line-height: 1.4; }
.chat-ended h2:focus { outline: none; }
.chat-ended p { margin: 6px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.chat-settings-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 20px; font-size: 15px; }
.chat-options .privacy-link { padding-inline: 0; }
.chat-close-action { width: 100%; min-height: 48px; margin-top: 18px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--utility-selected); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.chat-close-action:disabled { opacity: 0.45; cursor: default; }
.chat-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.message-review { width: min(620px, calc(100% - 32px)); max-height: calc(100dvh - 32px); }
.message-review h2 { text-wrap: balance; }
.message-review-preview { max-height: min(32dvh, 280px); overflow-y: auto; margin: 20px 0 12px; padding: 16px; border-radius: 12px; background: var(--utility); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.7; }
.message-review-preview mark { padding: 1px 2px; border-radius: 3px; background: var(--selected-face); color: var(--selected-ink); text-decoration: underline; text-underline-offset: 3px; }
.message-review .message-review-categories { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.message-review-preview:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chat-confirm-close { min-height: 48px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--selected-face); color: var(--selected-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.chat-id-select { width: 100%; margin: 0 0 20px; padding: 14px; border: 0; border-radius: 10px; background: var(--utility); color: var(--ink); font-size: 20px; text-align: center; user-select: all; }
.chat-id-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.chat-save-status { margin: 8px 0 18px !important; font-size: 13px !important; }
.chat-remember input { width: 20px; height: 20px; accent-color: var(--ink); }
.chat-expansion { z-index: 4; }
@media (hover: hover) { .chat-icon:hover { background: var(--utility); } .chat-room-code:hover { color: var(--ink); } }
@media (pointer: coarse) { .keyboard-hint { visibility: hidden; } }
@media (max-width: 760px) {
  .chat-screen { grid-template-columns: minmax(0, 1fr); }
  .chat-sidebar { display: none; }
  .chat-screen[data-list="true"] .chat-sidebar { display: flex; }
  .chat-screen[data-list="true"] .chat-shell { display: none; }
  .conversation-header { padding-top: max(14px, env(safe-area-inset-top)); }
  .chat-shell { width: 100%; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
  .chat-header { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; padding: max(14px, env(safe-area-inset-top)) 12px 8px; }
  .chat-preferences { grid-row: 2; grid-column: 2 / 4; justify-self: end; margin-top: 2px; }
  #chat-options-open { grid-column: -2; grid-row: 1; }
  .chat-heading h1 { font-size: 18px; }
  .chat-icon { width: 44px; height: 44px; }
  .chat-room-row { padding: 0 20px 12px; }
  .chat-room-code { gap: 8px; }
  .chat-log { padding: 24px 20px; }
  .message-bubble { max-width: 85%; padding: 11px 15px; }
  .chat-composer { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .composer-meta { min-height: 0; padding-top: 0; }
  .composer-meta:has(#chat-length:empty) { display: none; }
  .keyboard-hint { display: none; }
}