:root {
  color-scheme: light dark;
  --background: #ffffff;
  --foreground: #111113;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --accent: #111113;
  --accent-foreground: #ffffff;
  --operator: #f1f5f9;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #09090b;
    --foreground: #fafafa;
    --muted: #18181b;
    --muted-foreground: #a1a1aa;
    --border: #27272a;
    --accent: #fafafa;
    --accent-foreground: #09090b;
    --operator: #18181b;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--background); color: var(--foreground); }
body { overflow: hidden; }
button, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.chat-shell { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.announcement { display: flex; flex-shrink: 0; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, #f6c843 18%, var(--background)); padding: 11px 12px 10px 14px; }
.announcement[hidden] { display: none; }
.announcement-copy { min-width: 0; flex: 1; }
.announcement strong { display: block; margin-bottom: 2px; font-size: 11px; }
.announcement p { margin: 0; color: var(--foreground); font-size: 11px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement button { display: grid; width: 25px; height: 25px; flex-shrink: 0; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.announcement button:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
.announcement button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
.messages { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 10px; overflow-y: auto; padding: 18px 16px 12px; scrollbar-width: thin; }
.empty-state { display: grid; flex: 1; place-content: center; justify-items: center; padding: 24px; text-align: center; }
.empty-state[hidden] { display: none; }
.support-mark { display: block; width: 42px; height: 42px; border-radius: 13px; object-fit: cover; }
.empty-state h1 { margin: 14px 0 5px; font-size: 16px; }
.empty-state p { max-width: 270px; margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.45; }
.message-row { display: flex; max-width: 91%; align-items: flex-end; gap: 7px; }
.message-row.visitor { align-self: flex-end; }
.message-row.operator { align-self: flex-start; }
.message-avatar { width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.message { max-width: 84%; border-radius: 15px; padding: 9px 11px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row .message { max-width: 100%; }
.message.visitor { border-bottom-right-radius: 5px; background: var(--accent); color: var(--accent-foreground); }
.message.operator { border-bottom-left-radius: 5px; background: var(--operator); color: var(--foreground); }
.message.system { align-self: center; max-width: 92%; padding: 4px 8px; color: var(--muted-foreground); font-size: 11px; text-align: center; }
.message time { display: block; margin-top: 4px; font-size: 9px; opacity: .62; }
.status { min-height: 18px; margin: 0; padding: 0 17px 3px; color: var(--muted-foreground); font-size: 10px; }
.status.error { color: #ef4444; }
.composer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin: 0 12px max(12px, env(safe-area-inset-bottom)); border: 1px solid var(--border); border-radius: 15px; background: var(--muted); padding: 7px 7px 7px 11px; }
.composer:focus-within { border-color: color-mix(in srgb, var(--foreground) 35%, var(--border)); }
textarea { width: 100%; max-height: 112px; resize: none; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: 13px; line-height: 1.45; }
textarea::placeholder { color: var(--muted-foreground); }
textarea:disabled { cursor: wait; }
.composer button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-foreground); cursor: pointer; }
.composer button:disabled { cursor: not-allowed; opacity: .35; }
.composer svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }