/* Conversation viewing controls. Geometry only; colors follow the active theme. */
/* Give the chat the space saved by header padding (21.6 -> 4px) and
   the gap above the conversation (18 -> 6px). */
body.chat-view-ready { --chat-reclaimed-space: 29.6px; }
body.chat-view-ready #app { margin-top: 6px; }
body.chat-view-ready header .header-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 12.6px;
    padding: 2px 18px;
}
body.chat-view-ready header .logo-section { gap: 13.5px; }
body.chat-view-ready header .logo-emblem { width: 76.5px; height: 76.5px; }
body.chat-view-ready header .logo-emblem img { width: 100%; height: 100%; }
body.chat-view-ready header h1 { font-size: 19.8px; letter-spacing: 1.8px; }
body.chat-view-ready header h1 span { font-size: 9.9px; letter-spacing: 3.6px; }
body.chat-view-ready header .header-motto { font-size: 11.7px; margin: 0 auto; }
body.chat-view-ready header #userBadge {
    margin-left: auto;
    flex-shrink: 0;
    padding: 7.2px 12.6px;
    font-size: 10.8px;
}
body.chat-view-ready header .user-icon { font-size: 14.4px; }
body.chat-view-ready header .header-middle-column,
body.chat-view-ready #muxMenuBtn { display: none !important; }

#chatControls { margin: 8px 0 12px; position: relative; }
.chat-view-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--ink);
}
.chat-view-toolbar-left, .chat-view-actions, .chat-zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.chat-view-toolbar-left { flex: 1; gap: 8px; }
.chat-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--ink);
    font: 600 12px/1.2 Inter, system-ui, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}
.chat-view-button:hover:not(:disabled) { border-color: var(--gold-main); background: var(--bg-panel); }
.chat-view-button:disabled { opacity: .4; cursor: default; }
.chat-view-button:focus-visible, #chatControlsPanel :focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 3px;
}
.chat-zoom-controls .chat-view-button { font-variant-numeric: tabular-nums; }
.chat-zoom-controls [data-chat-zoom="reset"] { min-width: 56px; }
#chatActiveModes { color: var(--ink-dim); font-size: 12px; overflow-wrap: anywhere; }
#chatControlsToggle[aria-expanded="true"] { border-color: var(--gold-main); }
#chatControlsPanel {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--gold-dim);
    border-radius: 10px;
    background: var(--bg-panel);
    color: var(--ink);
}
#chatControlsPanel[hidden] { display: none !important; }
.chat-control-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gold-dim);
}
#chatControlsPanel .header-btn { min-height: 36px; padding: 8px 12px; }
#chatControlsPanel #ctaButton { margin: 0; max-width: 100%; white-space: normal; }
#chatControlsPanel #checkUsageBtn { margin: 0; max-width: none; text-align: center; }
#chatControlsPanel .toggle-controls-outer {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 16px;
    padding: 10px 0 0;
    margin: 0;
    overflow: visible;
}
#chatControlsPanel .toggle-item { flex: 0 0 auto; width: auto; }
body.chat-view-ready #themeMenu {
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: calc(100vw - 16px);
}

/* Zoom the messages, not the page, composer, or scroll container. */
body.chat-view-ready #chat > * { zoom: var(--chat-content-zoom, 1); }
body.chat-view-ready #chat .msg { flex-shrink: 0; min-width: 0; }
body.chat-view-ready #chat .chat-view-settled { animation: none !important; }
body.chat-view-ready #chat .bubble-wrapper,
body.chat-view-ready #chat .bubble { min-width: 0; }

/* A modal top layer covers every part of the app, including sticky headers/docks. */
#chatFullscreen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: var(--bg-panel);
    color: var(--ink);
    overflow: hidden;
}
#chatFullscreen[open] { display: flex; flex-direction: column; }
#chatFullscreen::backdrop { background: var(--bg-panel); }
.chat-fullscreen-toolbar {
    flex: 0 0 auto;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--gold-dim);
    background: var(--bg-card);
}
.chat-fullscreen-title { margin: 0; font: 600 14px/1.3 Inter, system-ui, sans-serif; }
#chatFullscreenClose { margin-left: 8px; font-size: 24px; width: 40px; height: 40px; }
body.chat-view-ready #chatFullscreen #chat {
    flex: 1 1 0;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0;
    padding: 24px max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    overscroll-behavior: contain;
}
#chatFullscreen #chat::before, #chatFullscreen #chat::after { display: none; }
body.chat-view-fullscreen { overflow: hidden !important; }

@media (max-width: 768px) {
    /* Mobile starts with a 10px gap and 5.4px header padding. Respect
       the notch while transferring only the padding actually recovered. */
    body.chat-view-ready {
        --chat-reclaimed-space: calc(7.4px + max(5.4px, env(safe-area-inset-top)) - max(2px, env(safe-area-inset-top)));
    }
    /* Keep the drawer and its toolbar reachable on short/narrow phones. The
       older sticky composer can otherwise cover them even when collapsed. */
    body.chat-view-ready #composer { position: relative; bottom: auto; }
    body.chat-view-ready #composer .input-footer-reading,
    body.chat-view-ready #composer .input-footer-tts { flex-wrap: wrap; }
    body.chat-view-ready header .header-inner { padding: max(2px, env(safe-area-inset-top)) 10.8px 2px; gap: 7.2px; }
    body.chat-view-ready header .logo-section { gap: 7.2px; }
    body.chat-view-ready header .logo-emblem { width: 32.4px; height: 32.4px; }
    body.chat-view-ready header h1 { font-size: 13.5px; letter-spacing: 1px; }
    body.chat-view-ready header #userBadge { padding: 5.4px 7.2px; }
    #chatActiveModes { font-size: 11px; }
    #chatControlsPanel .toggle-controls-outer { gap: 8px; }
    #chatControlsPanel .toggle-label { white-space: normal; }
    #chatControlsPanel .toggle-switch:focus-visible + .toggle-label { outline: 2px solid var(--emerald); outline-offset: 2px; }
    #chatControlsPanel .header-btn { min-width: 0; }
    body.chat-view-ready #chatFullscreen #chat { padding: 14px 10px max(14px, env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
    #chatActiveModes:empty { display: none; }
    .chat-view-toolbar-left { flex: 1 1 100%; }
    #chatControls .chat-view-actions { margin-left: auto; }
    .chat-fullscreen-title { font-size: 12px; }
    .chat-fullscreen-toolbar { gap: 4px; padding-left: 8px; padding-right: 8px; }
    .chat-fullscreen-toolbar .chat-view-button { padding-left: 6px; padding-right: 6px; }
}
@media (pointer: coarse) {
    .chat-view-button, #chatFullscreenClose, #chatControlsPanel .header-btn,
    #chatControlsPanel #ctaButton, #chatControlsPanel #checkUsageBtn { min-height: 44px; }
    .chat-view-button, #chatFullscreenClose { min-width: 44px; }
    body.chat-view-ready header #userBadge { min-height: 44px; box-sizing: border-box; }
}
@media print {
    #chatControls, .chat-fullscreen-toolbar { display: none !important; }
    body.chat-view-ready #chat > * { zoom: 1; }
    #chatFullscreen[open] { position: static; height: auto; overflow: visible; }
    body.chat-view-ready #chatFullscreen #chat { overflow: visible; height: auto !important; }
}