#receiver[data-chat] { display: flex; justify-content: center; }
.chat-decoder { position: absolute; bottom: 0; left: 0; width: 2px; height: 2px; opacity: .001; pointer-events: none; }
#receiver[data-chat] > :not(#chatDock) { display: none; }
#chatDock { width: min(100%, 36rem); color: var(--slate-text); font-family: var(--menu-font); font-style: italic; }
#chatBar { display: flex; gap: 2px; align-items: center; margin: 0; padding: 5px;
  border: 1px solid var(--edge); border-radius: 999px; background: #131b17f7; }
#chatBar:focus-within { border-color: var(--wire); }
#receiver #chatQuestion:focus-visible { outline: 0; }
#chatBar:has(#chatQuestion:focus-visible) { outline: 2px solid var(--wire); outline-offset: 1px; }
#chatBar button { display: grid; place-items: center; flex: none; width: 42px; height: 42px;
  background: transparent; border: 0; border-radius: 50%; padding: 0; color: #dedfd3; }
#chatBar button:hover { background: #334136; }
#chatBar button:not(#chatSwitch) svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#chatBar :is(#chatSend, #chatStop) { background: var(--wire); color: #121913; }
#chatBar #chatMic[aria-pressed=true] { color: #152016; background: var(--wire); }
#chatQuestion { flex: 1; min-width: 0; padding: 9px 4px; font: italic 600 16px/1.25 var(--menu-font);
  color: #fff8ea; background: transparent; border: 0; outline: 0; }
#chatQuestion::placeholder { color: #c6cbbf; opacity: 1; }
#chatLog { width: fit-content; max-width: 100%; margin: 0 auto 6px; padding: 5px 12px;
  color: #f2f3e4; background: #121b17f5; font: italic 580 14px/1.4 var(--menu-font); }
.chat-session { display: flex; align-items: center; gap: .65rem; margin: 0 auto 6px; padding: 2px 10px;
  width: fit-content; border-radius: 1rem; background: var(--bar); font: italic 650 13px var(--menu-font); }
#chatModeLabel { display: flex; align-items: center; gap: .45rem; }
#chatSignOut { min-height: 32px; padding: 0 4px; color: inherit; background: transparent; border: 0; font: inherit; text-decoration: underline; }
#chatBar #chatSwitch { width: 44px; height: 44px; background: var(--soft); color: var(--wire); }
#chatMode { min-inline-size: 6em; padding: 4px 8px; align-items: center; }
#chatLog { border-radius: 8px; }
#chatLog summary { cursor: pointer; }
#chatLog[open] { width: 100%; }
#chatMessages { max-height: min(28dvh, 170px); overflow-y: auto; overscroll-behavior: contain; }
#chatMessages p { margin: .5em 0; overflow-wrap: anywhere; }
#chatMessages strong { color: var(--wire); }
.chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#chatLock { width: min(390px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto;
  padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
#chatLock::backdrop { background: rgb(4 9 8 / 74%); }
#chatLockTitle { margin: 0; text-transform: none; }
#chatDismiss:hover { border-color: var(--wire); background: var(--soft); }
#chatLockHelp { margin: 12px 0 20px; font: 16px/1.45 system-ui, sans-serif; letter-spacing: normal; text-shadow: none; text-wrap: pretty; }
#chatLock label { display: block; margin-bottom: 6px; color: var(--wire); font-size: 14px; }
#chatPassword { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--slate-text); background: var(--wire-ink); caret-color: var(--wire); font-size: 16px; }
#chatLock :focus-visible, #chatDock :focus-visible { outline: 2px solid var(--wire); outline-offset: 2px; }
#chatLockError { margin: 8px 0; color: #ffcfaf; }
#chatLockError:empty { display: none; }
#chatUnlockButton { margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 8px 13px; border: 1px solid var(--wire); background: var(--soft); color: var(--wire); font-size: 16px; }
#chatUnlockButton:enabled:is(:hover, :focus-visible) { background: var(--wire); color: var(--wire-ink); text-shadow: none; }
#chatUnlockButton:disabled { opacity: .55; cursor: default; }
@media (max-width: 480px) {
  #receiver[data-chat] { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
  #chatBar button { width: 40px; }
}