/**
 * MarkyMaths — Hybrid A "Today's Letter"
 * Editorial redesign: parchment palette, Fraunces serif, graph-paper substrate.
 */

/* ─── Palette variables ────────────────────────────────────────────────────── */

:root {
    --ha-bg:       #f7f3eb;
    --ha-surf:     #fbfaf7;
    --ha-ink:      #0c1220;
    --ha-ink2:     #5a6070;
    --ha-accent:   #1a3a8a;
    --ha-line:     #dcd6c8;
    --ha-grid-clr: rgba(50, 80, 120, 0.09);

    /* Override base palette vars so the whole app uses parchment */
    --bg-color:    #f7f3eb;
    --bg-secondary: #f3efe6;
    --bg-tertiary: #ede9df;
    --bg-hover:    #e8e3d8;
    --input-bg:    #ffffff;
    --border-color: #dcd6c8;
    --border-subtle: #e8e3d8;
    --text-primary:   #0c1220;
    --text-secondary: #5a6070;
    --text-tertiary:  #8a929e;
    --shadow-sm: rgba(60, 40, 10, 0.07);
    --shadow-md: rgba(60, 40, 10, 0.12);
    --chip-bg: #f3efe6;
    --chip-border: #dcd6c8;
    --card-bg: #fbfaf7;
}

[data-theme="dark"] {
    --ha-bg:       #0c1018;
    --ha-surf:     #0a0d14;
    --ha-ink:      #e7ecf3;
    --ha-ink2:     #8a96aa;
    --ha-accent:   #7aa0ff;
    --ha-line:     #1a2030;
    --ha-grid-clr: rgba(120, 150, 200, 0.08);

    --bg-color:    #0c1018;
    --bg-secondary: #0a0d14;
    --bg-tertiary: #111520;
    --bg-hover:    #151c28;
    --input-bg:    #0a0d14;
    --border-color: #1a2030;
    --border-subtle: #151c28;
    --text-primary:   #e7ecf3;
    --text-secondary: #8a96aa;
    --text-tertiary:  #5a6680;
    --shadow-sm: rgba(0, 0, 0, 0.35);
    --shadow-md: rgba(0, 0, 0, 0.55);
    --chip-bg: #111520;
    --chip-border: #1a2030;
    --card-bg: #0a0d14;
}

/* ─── Graph-paper substrate ─────────────────────────────────────────────────
   Applied to body AND the two stage elements that paint over the body bg.
   Without this, #chat-stage and #visual-stage (both background: var(--bg-color))
   cover the body's grid entirely. ────────────────────────────────────────── */

body,
#chat-stage,
#visual-stage {
    background-color: var(--ha-bg) !important;
    background-image:
        linear-gradient(var(--ha-grid-clr) 1px, transparent 1px),
        linear-gradient(90deg, var(--ha-grid-clr) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
}

/* ─── Global font ──────────────────────────────────────────────────────────── */

body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* ─── Zero state — resets from chat.css ────────────────────────────────────── */

body.is-idle .zero-state {
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    width: 100%;
    max-width: 680px;
    /* Mobile: 18px from chrome to dateline, 22px gutters (matches reference) */
    padding: 18px 22px 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.is-idle .zero-state {
        /* Desktop: 64px top, 96px sides — matches reference exactly */
        padding: 64px 96px 0;
        max-width: 980px;
    }
}

/* ─── Letter exit animation ────────────────────────────────────────────────── */

@keyframes haLetterExit {
    0%   { opacity: 1; transform: translateY(0);     max-height: 1000px; }
    100% { opacity: 0; transform: translateY(-32px); max-height: 0; padding-top: 0; margin: 0; }
}

/* Replaces the chat.css display:none so the animation can play first */
body.is-active .zero-state {
    animation: haLetterExit 360ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    overflow: hidden;
}

/* ─── Top row: VOL · DATE (mobile) ─────────────────────────────────────────── */

.ha-toprow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* No bottom margin — "A note for" uses margin-top: 40px instead */
    margin-bottom: 0;
}

/* ─── Header row (desktop): A NOTE FOR [name]   VOL · DATE ─────────────────── */

.ha-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* 32px to headline, matching reference */
    margin-bottom: 32px;
}

/* Mobile: toprow shows VOL/date, anote sits below it separately */
.ha-toprow .ha-dateline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ha-ink2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Hide the header-row on mobile (it's desktop only) */
.ha-header-row { display: none; }

/* Mobile anote sits on its own line */
.ha-anote-mobile {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--ha-accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* 40px from dateline row, headline uses its own margin-top */
    margin-top: 40px;
    margin-bottom: 0;
}
/* Hide desktop anote on mobile */
.ha-anote-desktop { display: none; }

@media (min-width: 768px) {
    /* On desktop: hide the mobile top-row and mobile anote, show header-row */
    .ha-toprow        { display: none; }
    .ha-anote-mobile  { display: none; }
    .ha-header-row    { display: flex; }
    .ha-anote-desktop { display: block; }

    /* Desktop: header-row's margin-bottom already provides the gap to headline */
    .ha-headline { margin-top: 0; }

    .ha-anote-desktop {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: var(--ha-accent);
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .ha-header-row .ha-dateline {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: var(--ha-ink2);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

/* ─── Fraunces headline ─────────────────────────────────────────────────────── */

.ha-headline {
    font-family: 'Fraunces', serif;
    font-weight: 400;
    /* 38px on mobile (reference), scales to 86px on large desktop */
    font-size: clamp(38px, 8vw, 86px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ha-ink);
    /* 10px below "A note for" on mobile; desktop uses header-row margin-bottom */
    margin: 10px 0 0;
}

.ha-headline em {
    font-style: italic;
    color: var(--ha-accent);
}

/* ─── Letter body / hook ────────────────────────────────────────────────────── */

.ha-body {
    font-family: 'Fraunces', serif;
    font-style: italic;
    /* 16px mobile (reference), 22px desktop (reference) */
    font-size: clamp(16px, 2.2vw, 22px);
    line-height: 1.55;
    color: var(--ha-ink2);
    max-width: 600px;
    /* 18px below headline on mobile (reference) */
    margin: 18px 0 0;
}

@media (min-width: 768px) {
    /* 32px below headline on desktop (reference) */
    .ha-body { margin-top: 32px; }
}

/* ─── Dive-in button ────────────────────────────────────────────────────────── */

.ha-dive-btn {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: var(--ha-accent);
    cursor: pointer;
    transition: opacity 0.15s;
}

.ha-dive-btn:hover { opacity: 0.65; }

[data-theme="dark"] .ha-dive-btn { color: var(--ha-accent); }

/* ─── Sign-off ──────────────────────────────────────────────────────────────── */

.ha-signoff {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    color: var(--ha-ink2);
    /* 14px below dive button (reference: 14px below body, similar rhythm) */
    margin-top: 14px;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ha-signoff {
        font-size: 18px;
        margin-top: 18px;
    }
}

/* ─── Conversation wrapper — idle layout ────────────────────────────────────── */

body.is-idle #conversation-wrapper {
    justify-content: flex-start;
    padding-bottom: 24px;
    overflow-x: hidden;
}

/* ─── Idle input — width matches the letter column ──────────────────────────── */

body.is-idle #input-anchor {
    width: 100%;
    max-width: 680px;
    margin: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.is-idle #input-anchor {
        /* composer-area padding handles alignment; let input fill its flex column */
        max-width: none;
    }
}

/* ─── "Your reply" composer label ───────────────────────────────────────────── */

#ha-your-reply-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ha-ink2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: 0 2px;
}

body.is-active #ha-your-reply-label {
    display: none;
}

/* ─── Idle input — "Your reply" editorial treatment ─────────────────────────── */

body.is-idle #input-anchor {
    background: var(--ha-surf) !important;
    border: 1px solid var(--ha-line) !important;
    border-top: 2px solid var(--ha-accent) !important;
    border-radius: 2px 2px 14px 14px !important;
    box-shadow: none !important;
    padding: 14px 16px 14px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.is-idle .input-wrapper {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.is-idle #chat-input {
    font-family: 'Fraunces', serif !important;
    font-style: italic !important;
    font-size: 17px !important;
    color: var(--ha-ink2) !important;
    padding: 4px 0 !important;
    min-height: 72px;
    caret-color: var(--ha-accent);
}

body.is-idle #chat-input:empty::before {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--ha-ink2);
    opacity: 0.65;
}

/* Bottom row of composer in idle — dashed divider style */
body.is-idle .input-bottom-row {
    border-top: 1px dashed var(--ha-line);
    margin-top: 12px;
    padding-top: 10px;
}

/* ─── Send button — idle state ───────────────────────────────────────────────── */

/* Default idle: muted until content is typed */
body.is-idle #send-btn {
    background: var(--ha-line) !important;
    color: var(--ha-ink2) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Has content: accent colour signals ready-to-send */
body.is-idle #input-anchor.has-content #send-btn {
    background: var(--ha-accent) !important;
    color: #fff !important;
}

[data-theme="dark"] body.is-idle #input-anchor.has-content #send-btn {
    color: var(--ha-bg) !important;
}

/* ─── Composer area — idle layout ───────────────────────────────────────────── */

/* Mobile: composer + footer stack vertically, padded to match letter gutters */
body.is-idle #ha-composer-area {
    width: 100%;
    max-width: 680px;
    margin: 18px 0 0;
    padding: 0 22px;
    box-sizing: border-box;
}

/* Desktop: composer fills full padded width */
@media (min-width: 768px) {
    body.is-idle #ha-composer-area {
        max-width: 980px;
        /* 96px side padding aligns composer with letter text above */
        padding: 0 96px;
        box-sizing: border-box;
        /* Sit directly below the news strip */
        margin-top: 20px;
    }
}

/* ─── Footer: margin annotation strip between sign-off and composer ─────────── */

#ha-footer-wrap[hidden] { display: none !important; }
body.is-active #ha-footer-wrap { display: none !important; }

@media (min-width: 768px) {
    body.is-idle #ha-footer-wrap {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%;
        max-width: 980px;
        box-sizing: border-box;
        padding: 24px 96px 0;
        margin-top: 0;
        align-items: flex-start;
    }
}

/* ─── Margin annotation cards ───────────────────────────────────────────────── */

.ha-margin-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* per-card resting rotations — slight tilt like pages laid on a desk */
.ha-margin-wrap:nth-child(1) { transform: rotate(-1.5deg); }
.ha-margin-wrap:nth-child(2) { transform: rotate( 0.6deg); }
.ha-margin-wrap:nth-child(3) { transform: rotate(-0.4deg); }
.ha-margin-wrap:nth-child(4) { transform: rotate( 1.1deg); }

.ha-margin-wrap:nth-child(1):hover { transform: rotate(-1.5deg) translateY(-6px); }
.ha-margin-wrap:nth-child(2):hover { transform: rotate( 0.6deg) translateY(-6px); }
.ha-margin-wrap:nth-child(3):hover { transform: rotate(-0.4deg) translateY(-6px); }
.ha-margin-wrap:nth-child(4):hover { transform: rotate( 1.1deg) translateY(-6px); }

/* fold triangle — sits in the cut corner, outside the card's clip-path */
.ha-margin-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 26px; height: 26px;
    background: linear-gradient(to bottom left, #d0c7b0 50%, transparent 50%);
    pointer-events: none;
    z-index: 3;
    transform-origin: top right;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s;
}
.ha-margin-wrap:hover::after {
    transform: scale(1.55);
    filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.15));
}

/* card: dog-eared top-right corner + lined-paper body */
.ha-margin-card {
    background: #faf8f2;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent  0px,
        transparent  21px,
        #ddd8cc      21px,
        #ddd8cc      22px
    );
    background-position: 0 38px;
    border: 1px solid #c8c0a8;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
    padding: 13px 16px 15px 13px;
    min-height: 155px;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(1px 3px 8px rgba(0,0,0,0.1));
    transition: filter 0.22s;
}
.ha-margin-wrap:hover .ha-margin-card {
    filter: drop-shadow(3px 8px 16px rgba(0,0,0,0.16));
}

/* Caveat handwritten note — Marky's red-ink annotation */
.ha-margin-note {
    font-family: 'Caveat', cursive;
    font-size: 15px;
    font-weight: 600;
    color: #b03020;
    line-height: 1.2;
    margin-bottom: 9px;
    flex-shrink: 0;
}

/* ruled excerpt block */
.ha-margin-excerpt {
    border-top: 1px solid #c0b8a4;
    padding-top: 7px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ha-margin-rule {
    height: 1px;
    background: #ddd8cc;
    flex-shrink: 0;
}

/* lesson title — sits on a ruled line, underlined in red ink */
.ha-margin-title {
    font-family: 'Fraunces', serif;
    font-size: 13px;
    line-height: 1;
    color: var(--ha-ink);
    position: relative;
    padding-bottom: 3px;
    flex-shrink: 0;
}
.ha-margin-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 1.5px;
    background: #b03020;
    opacity: 0.5;
}

.ha-margin-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: auto;
    padding-top: 4px;
    flex-shrink: 0;
}

/* Surprise card: blank lined page, large Caveat ? scrawled in margin */
.ha-margin-wrap--surprise .ha-margin-note {
    font-size: 42px;
    font-weight: 600;
    color: #b03020;
    line-height: 1;
    margin-bottom: 0;
    flex: 1;
    opacity: 0.7;
}

.ha-recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: none;
    border: none;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.ha-recent-row:hover {
    background: var(--ha-line);
}

.ha-recent-title {
    font-family: 'Fraunces', serif;
    font-size: 13px;
    color: var(--ha-ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.ha-recent-row--first .ha-recent-title {
    font-size: 14px;
}

.ha-recent-arrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--ha-ink2);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}

.ha-recent-row:hover .ha-recent-arrow {
    opacity: 1;
}

/* ─── Mobile-only: compact last-session row (HA reference aesthetic) ─────────── */

/* Desktop list hidden on mobile; mobile row hidden on desktop */
.ha-desktop-only { display: none; }
.ha-mobile-last-row { display: none; }

@media (min-width: 768px) {
    .ha-desktop-only { display: block; }
}

@media (max-width: 767px) {
    .ha-mobile-last-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-top: 12px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        color: var(--ha-ink2);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

.ha-mobile-last-title {
    color: var(--ha-ink);
    text-transform: none;
}

.ha-mobile-resume-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ha-accent);
    cursor: pointer;
    text-transform: uppercase;
}


@media (max-width: 767px) {
    /* News strip is desktop-only */
    body.is-idle #ha-footer-wrap { display: none !important; }

    /* Idle input: column layout so dashed divider spans full width */
    body.is-idle .input-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    body.is-idle .input-top-row {
        display: flex !important;
    }
    body.is-idle .input-bottom-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    /* Shorter textarea on mobile — 72px desktop default is too tall */
    body.is-idle #chat-input {
        min-height: 40px;
    }

    /* Push composer + jump-back-in to sit just above the privacy notice */
    body.is-idle #ha-composer-area {
        margin-top: auto;
    }
    body.is-idle #input-anchor {
        margin-bottom: 0;
    }
}

/* ─── Hide prompt cards in idle — letter is the prompt ──────────────────────── */

body.is-idle #prompt-cards {
    display: none;
}

/* ─── Dark mode idle input override ─────────────────────────────────────────── */

[data-theme="dark"] body.is-idle #input-anchor {
    background: var(--ha-surf) !important;
    border-color: var(--ha-line) !important;
    border-top-color: var(--ha-accent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] body.is-idle .input-wrapper {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* ─── Visual stage — use banner surface colour ── */

#visual-stage {
    background-color: var(--ha-surf) !important;
}

/* ─── Active chat — strip grid from chat stage; use banner surface colour ── */

body.is-active #chat-stage {
    background-color: var(--ha-surf) !important;
    background-image: none !important;
}

/* ─── Active chat (no visual) — floating card on parchment, desktop only ─── */

@media (min-width: 769px) {
    body.is-active:not(.is-visual-open) {
        background: var(--bg-secondary);
    }

    body.is-active:not(.is-visual-open) #app-container {
        padding: 12px;
        box-sizing: border-box;
    }

    body.is-active:not(.is-visual-open) #chat-stage {
        border-radius: 14px !important;
        background: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 2px 20px var(--shadow-md) !important;
        overflow: hidden;
    }
}

/* ─── Active chat — session progress bar: peer treatment to graph panel header */

body.is-active #session-progress-bar {
    background: var(--ha-surf) !important;
    border-top: 2px solid var(--ha-accent);
    border-bottom: 1px solid var(--ha-line) !important;
    padding: 0 16px;
    height: 44px;
    align-items: center;
    flex-shrink: 0;
}

body.is-active #session-progress-title {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    color: var(--ha-ink) !important;
}

/* ─── Active chat — tutor messages in Fraunces ──────────────────────────────── */

.tutor-message {
    font-family: 'Fraunces', serif;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ha-ink);
}

.tutor-message p {
    font-family: 'Fraunces', serif;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ha-ink);
}

.tutor-message code,
.tutor-message pre,
.tutor-message .eq-pill {
    font-family: 'JetBrains Mono', monospace;
    font-style: normal;
}

/* User message pill — white note on parchment */
.user-message {
    background: #ffffff;
    color: var(--ha-ink);
    border: 1px solid var(--ha-line);
}

[data-theme="dark"] .user-message {
    background: var(--ha-line);
    color: var(--ha-ink);
    border: none;
}

/* ─── Active input bar — matches welcome screen treatment ─────────────────── */

body.is-active .input-wrapper {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.is-active .input-bottom-row {
    border-top: 1px dashed var(--ha-line);
    margin-top: 12px;
    padding-top: 10px;
}

body.is-active #chat-input {
    font-family: 'Fraunces', serif !important;
    font-style: italic !important;
    font-size: 17px !important;
    color: var(--ha-ink2) !important;
    caret-color: var(--ha-accent);
}

body.is-active #send-btn:not(.sending) {
    background: var(--ha-line) !important;
    color: var(--ha-ink2) !important;
    border: none !important;
    box-shadow: none !important;
}

body.is-active #input-anchor.has-content #send-btn:not(.sending) {
    background: var(--ha-accent) !important;
    color: #fff !important;
}

[data-theme="dark"] body.is-active #input-anchor.has-content #send-btn:not(.sending) {
    color: var(--ha-bg) !important;
}

/* ─── Sidebar — parchment palette ────────────────────────────────────────────── */

#history-sidebar {
    background: var(--ha-surf) !important;
    border-right-color: var(--ha-line) !important;
}

/* ─── Sidebar: Topics section ────────────────────────────────────────────────── */

#sidebar-topics-section {
    border-bottom: 1px solid var(--ha-line);
    /* Match .sidebar-actions horizontal padding so icon aligns with new-chat/search */
    padding: 0 8px 4px;
    margin-bottom: 4px;
}

/* Toggle button matches new-chat / search-chats style exactly */
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    justify-content: center;
    transition: background 150ms ease;
}

.sidebar-section-toggle:hover {
    background: var(--bg-hover);
}

/* In open sidebar: left-align, same padding as action buttons */
body.is-sidebar-open .sidebar-section-toggle {
    justify-content: flex-start;
    padding: 10px 8px 10px 16px;
}

/* Push chevron to far right in open mode */
body.is-sidebar-open .sidebar-section-toggle .sidebar-toggle-arrow {
    margin-left: auto;
}

.sidebar-topics-icon {
    display: block;
    flex-shrink: 0;
}

.sidebar-toggle-arrow {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.sidebar-section-toggle[aria-expanded="true"] .sidebar-toggle-arrow {
    transform: rotate(180deg);
}

/* Force-hide topics list when sidebar is collapsed (even if previously open) */
body:not(.is-sidebar-open) #sidebar-topics-list {
    display: none;
}

#sidebar-topics-list {
    padding: 2px 0;
    max-height: 300px;
    overflow-y: auto;
}

.sidebar-topic-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 7px 10px 7px 16px;
    text-align: left;
    cursor: pointer;
    color: var(--ha-ink);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12.5px;
    line-height: 1.3;
    border-radius: 6px;
    transition: background 0.12s;
}

.sidebar-topic-item:hover {
    background: var(--ha-line);
}

.sidebar-topic-icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--ha-ink2);
}

.sidebar-topic-icon-wrap svg {
    display: block;
}

.sidebar-topic-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-topic-tier {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    background: var(--ha-line);
    color: var(--ha-ink2);
}

.sidebar-topic-tier--h   { background: #dde8ff; color: #1a3a8a; }
.sidebar-topic-tier--al  { background: #d4f0e8; color: #1a5a3a; }
[data-theme="dark"] .sidebar-topic-tier--h  { background: #1a2840; color: #7aa0ff; }
[data-theme="dark"] .sidebar-topic-tier--al { background: #0f2820; color: #5ad4a0; }

.sidebar-topic-category {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ha-ink2);
    padding: 10px 12px 4px 16px;
    opacity: 0.7;
}

/* Composer area: match zero-state horizontal padding on mobile */
@media (max-width: 767px) {
    body.is-idle #ha-composer-area {
        padding: 0 22px;
        box-sizing: border-box;
        width: 100%;
    }

    body.is-idle #ha-composer-area #input-anchor {
        width: 100%;
        max-width: none;
    }
}

/* ─── Mobile: safe area + keyboard ──────────────────────────────────────────── */

/* Respect home indicator / notch bottom on iOS */
@media (max-width: 767px) {
    body.is-idle #conversation-wrapper {
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }
}

/* Prevent input-anchor from overflowing on narrow screens */
@media (max-width: 480px) {
    body.is-idle #input-anchor {
        border-radius: 2px 2px 10px 10px !important;
    }

    body.is-idle #chat-input {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }
}

/* Active state safe-area bottom so keyboard doesn't clip the send button */
body.is-active #input-anchor {
    margin-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    background: #ffffff !important;
    border: 1px solid var(--ha-line) !important;
    border-top: 2px solid var(--ha-accent) !important;
    border-radius: 2px 2px 14px 14px !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] body.is-active #input-anchor {
    background: var(--ha-surf) !important;
    border-color: var(--ha-line) !important;
    border-top-color: var(--ha-accent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] body.is-active .input-wrapper {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
}