/* Compact controls; the message pane owns its zoom and scrolling. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#conv-header { min-height: 60px; padding: 6px 18px; gap: 3px; }
#conv-title { font-size: 16px; }
#conv-subtitle { margin-top: 0; overflow-x: auto; scrollbar-width: none; }
#conv-subtitle .chip-row { flex-wrap: nowrap; white-space: nowrap; }
#conv-subtitle .agent-chip { min-height: 24px; padding: 2px 5px; }
#rec-btn, #jump-btn, #info-btn, #chat-settings-btn { min-width: 34px; width: 34px; height: 34px; }
#chat-settings-btn, #chat-zoom-btn { flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; }
#chat-zoom-btn { min-width: 48px; height: 34px; padding: 0 5px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
#chat-settings-btn:hover, #chat-zoom-btn:hover, #chat-settings-btn[aria-expanded=true], #chat-zoom-btn[aria-expanded=true] { background: var(--fill); color: var(--text); }
#chat-zoom-panel { position: absolute; top: 100%; right: 18px; z-index: 20; display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel); box-shadow: var(--card-shadow); font-size: 13px; }
#chat-zoom-panel > span { padding-inline: 6px; }
#chat-zoom-panel button { height: 36px; min-width: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--fill); color: var(--text); font: inherit; cursor: pointer; }
#chat-zoom-panel button:disabled { opacity: .35; cursor: default; }
#settings-strip { position: absolute; right: 18px; z-index: 11; width: max-content; max-width: calc(100% - 36px); max-height: 60%; overflow: auto; padding: 10px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel); box-shadow: var(--card-shadow); }
#settings-strip .settings-summary { min-height: 34px; }
#work-progress { padding: 5px 18px; }
#messages { scroll-behavior: auto; }
#messages > .msg-col { width: auto; zoom: var(--chat-zoom, 1); }
.chat-event { display: flex; flex-direction: column; min-width: 0; margin-bottom: 24px; }
/* Auto margins also cover user bubbles nested in live event containers. */
#messages .bubble.user { margin-left: auto; }
.recipient-note { align-self: flex-end; margin: 5px 3px; color: var(--text-2); }
#composer-wrap { padding: 6px 18px calc(10px + env(safe-area-inset-bottom)); }
#composer { padding: 6px; }
#recipient-bar { position: relative; flex: 0 0 auto; align-self: flex-end; padding: 0; margin: 0; height: 42px; max-width: 90px; }
#recipient-label { position: absolute; left: 5px; right: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 12px; pointer-events: none; }
#recipient-bar::after { content: ""; position: absolute; right: 6px; width: 5px; height: 5px; margin-top: -3px; border-right: 1px solid var(--text-2); border-bottom: 1px solid var(--text-2); transform: rotate(45deg); pointer-events: none; }
#recipient-select { appearance: none; width: 90px; max-width: 100%; height: 36px; padding: 0 5px; border: 0; border-radius: 8px; background: transparent; color: transparent; font-size: 12px; cursor: pointer; }
#recipient-select:hover, #recipient-select:focus { background: var(--fill); }
#recipient-select option { color: var(--text); background: var(--panel); }
#send-options { flex: 0 0 auto; padding: 0; margin: 0 0 1px; }
#send-options #steer-now { display: grid; place-items: center; width: 38px; height: 40px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: var(--fill); color: var(--text); font-size: 21px; }
@media (max-width:760px) {
  #conv-header { padding: 5px 8px 5px 49px; min-height: 60px; gap: 1px; }
  #back-btn { top: calc(8px + env(safe-area-inset-top)); }
  #conv-title { font-size: 15px; }
  #chat-zoom-panel, #settings-strip { right: 8px; }
  #settings-strip { max-width: calc(100% - 16px); }
  #composer-wrap { padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
  #composer { gap: 1px; padding: 5px; }
  #recipient-bar, #recipient-select { width: 80px; max-width: 80px; }
  #compose-menu-btn, #mic-btn { width: 32px; min-width: 32px; }
  #send-options #steer-now { width: 32px; }
  #chat-input { padding-inline: 3px; }
}

/* Full-width writing area; actions share the compact row beneath the text. */
#composer { flex-wrap: wrap; border-radius: 22px; }
#composer #chat-input { order: -1; flex: 1 0 100%; width: 100%; box-sizing: border-box; padding: 8px 10px; }
#composer #backend-btn.locked { display: none; }
#composer #mic-btn { margin-left: auto; }
#composer #recipient-bar { height: 36px; align-self: center; }
#composer #compose-menu-btn, #composer #mic-btn { height: 36px; }