/* A conversation must fit the visible screen, including when the keyboard is open. */
#nav { top: var(--chat-visible-top, 0px); }
#nav .nav-in { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; }
.who-name { min-width: 0; flex: 1; }
.who .preview-note { flex: none; }
.log { min-height: 0; min-width: 0; overscroll-behavior-y: contain; overflow-anchor: none; scroll-behavior: auto; scrollbar-gutter: stable; }
.log:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }
.log, .dock textarea, .room-stage, .side { scrollbar-width: thin; scrollbar-color: var(--line-2) var(--ink); }
.msg { flex: none; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg .quick, .msg .refs, .msg .idea-map { white-space: normal; }
.dock { min-width: 0; }
.dock .tray:empty { display: none; }
.dock .composer { align-items: flex-end; border-radius: 24px; padding: 6px; }
.dock .composer:focus-within { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(201, 163, 106, .12); }
.dock .composer textarea { display: block; flex: 1; width: 0; min-width: 0; height: 44px; min-height: 44px; max-height: min(140px, calc(var(--chat-visible-height, 100dvh) * .22)); padding: 10px 4px; border: 0; border-radius: 0; background: none; color: var(--bone); outline: 0; resize: none; font-size: 16px; line-height: 24px; overflow-y: auto; }
.dock .composer textarea::placeholder { color: var(--faint); }
.dock .ibtn { width: 44px; height: 44px; }
.dock .ibtn:disabled { opacity: .45; cursor: wait; }
.latest-reply { justify-self: center; min-height: 36px; border-color: var(--brass); color: var(--brass-2); }
.bf { min-width: 0; } .bf .v { min-width: 0; overflow-wrap: anywhere; }
.phone-country select, .room-field select, .room-field input { font-size: 16px; }
.room-stage { min-height: 0; overscroll-behavior-y: contain; }
.room-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
/* A minimized meeting reserves its own row instead of covering the messages. */
.room.min { position: relative; inset: auto; grid-row: 2; grid-column: 1; box-shadow: none; }
.room.min .room-top { padding-block: 6px; }
.room.min .room-id b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.room.min .room-meta { display: none; }
.room.min .room-ai, .room.min .room-status, .room.min .room-btn span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.room.min .room-min { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.room.min .room-bar { padding-block: 6px; }
.side { overscroll-behavior-y: contain; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) {
  .who { padding: 10px var(--gut); gap: 10px; }
  .who img { width: 36px; height: 36px; }
  .who .tiny { font-size: 12px; }
  .who .preview-note { display: none; }
  .log { padding: 16px var(--gut); gap: 12px; }
  .msg { max-width: 96%; }
  .quick .chip, .ref-actions .chip { min-height: 44px; }
  .phone-country { gap: 4px; }
}
/* This is based on visible height rather than device name; it covers landscape and tablet keyboards. */
.chat-short #nav .nav-in { padding-block: 4px; padding-top: calc(4px + env(safe-area-inset-top)); }
.chat-short .who { padding-block: 6px; }
.chat-short .who img { width: 30px; height: 30px; }
.chat-short .who b { font-size: 18px; }
.chat-short .who .tiny { font-size: 11px; }
.chat-short .dock { gap: 6px; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.chat-short .dock .voice-entry, .chat-short .dock .tray { display: none; }
.chat-short .log { padding-block: 10px; }
.chat-short .room-top { padding-block: 6px; }
.chat-short .room-stage { padding-block: 10px; gap: 10px; }
.chat-short .room-ring, .chat-short .room[data-state="lobby"] .room-ring { width: 64px; }
.chat-short .room-sarah figcaption { display: none; }
.chat-short .room-bar { padding-block: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
.chat-short .room-btn svg, .chat-short .room-talk svg { padding: 10px; width: 22px; height: 22px; }
@media (max-width: 360px) {
  .room-btn { min-width: 52px; }
  .room-timer { width: 100%; text-align: center; }
}