/*
 * Chat page — layout only. Cards, buttons, badges, switch, select,
 * textarea, empty state and modal all come from components/. What
 * lives here is the two-column conversation layout, the phone drawer,
 * the message bubbles (.msg) and the docked composer.
 */

/* ── Layout ─────────────────────────────────────────────────────── */
.chat__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    min-height: 480px;
}
@media (min-width: 720px) {
    /* Fill the viewport below header + nav so the composer docks at the
       bottom and the conversation scrolls inside its card. The page
       block owns the height; the layout takes what is left under the
       page header. */
    .chat {
        height: calc(100dvh - var(--header-h) - var(--nav-h) - var(--footer-h) - var(--gutter) * 2);
        min-height: 560px;
    }
    .chat__layout {
        grid-template-columns: 260px minmax(0, 1fr);
        flex: 1 1 auto;
        min-height: 0;
    }
}
@media (min-width: 1080px) {
    .chat__layout { grid-template-columns: 300px minmax(0, 1fr); }
}
.chat__active-title { color: var(--color-text); }

/* ── Conversation list ──────────────────────────────────────────── */
.chat__sidebar { min-height: 0; }
.chat__sidebar-title {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
    white-space: nowrap;
    line-height: var(--lh-tight);
}
.chat__sessions { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.chat__sessions-empty { list-style: none; }
.chat__session { border-bottom: 1px solid var(--color-border); }
.chat__session:last-child { border-bottom: 0; }
.chat__session-link {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    color: var(--color-text);
    border-left: 2px solid transparent;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.chat__session-link:hover { background: var(--color-surface-hi); color: var(--color-text); }
.chat__session--active .chat__session-link {
    background: var(--color-primary-soft);
    border-left-color: var(--color-primary-hi);
}
.chat__session-title {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.chat__session-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--color-text-dim);
}
.chat__session-user { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--color-text-muted); }
.chat__session-meta .badge { margin-left: auto; }

/* Drawer controls are phone-only; the list is always visible on wider screens. */
.chat__drawer-toggle, .chat__drawer-close, .chat__backdrop { display: none; }

/* ── Conversation pane ──────────────────────────────────────────── */
.chat__main { min-height: 0; }
.chat__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.chat__empty { flex: 1 1 auto; }
.chat__suggestions {
    list-style: none;
    padding: 0;
    margin: var(--sp-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    max-width: 40rem;
}
.chat__suggestion-chip { white-space: normal; text-align: left; }
.chat__conversation {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.chat__conversation:empty { display: none; }

/* ── Message bubbles ────────────────────────────────────────────── */
.msg {
    max-width: min(100%, 72ch);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    min-width: 0;
}
.msg--user {
    align-self: flex-end;
    background: var(--color-primary-soft);
    border-color: transparent;
    border-bottom-right-radius: var(--radius-sm);
}
.msg--assistant { align-self: flex-start; border-bottom-left-radius: var(--radius-sm); }
.msg--tool, .msg--system {
    align-self: stretch;
    max-width: none;
    background: var(--color-code-bg);
    border-style: dashed;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.msg__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.msg__role {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xxs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}
.msg--user .msg__role { color: var(--color-primary-hi); }
.msg__time { font-size: var(--fs-xs); color: var(--color-text-dim); white-space: nowrap; }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msg__actions { margin-top: var(--sp-2); display: flex; gap: var(--sp-1); align-items: center; flex-wrap: wrap; }
.msg__meta-chip { margin-left: auto; font-family: var(--font-mono); }
.msg--pending .msg__body { color: var(--color-text-dim); }
.msg--pending .msg__body::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: var(--sp-2);
    vertical-align: middle;
    border: 2px solid var(--color-text-dim);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}
.msg--error { border-color: var(--color-danger); }
.msg--error .msg__body { color: var(--color-danger); }

/* Feedback toggles: a rated message keeps its thumb lit. */
.msg__feedback--good.msg__feedback--active { background: var(--color-success-soft); color: var(--color-success); }
.msg__feedback--bad.msg__feedback--active  { background: var(--color-danger-soft);  color: var(--color-danger); }

/* ── Docked composer + voice toolbar ────────────────────────────── */
.chat__dock {
    position: sticky;
    bottom: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
.chat__voice-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}
.chat__voice-select { width: auto; min-width: 140px; max-width: 220px; }
.chat__voice-speed { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chat__voice-speed input[type="range"] { width: 96px; }
.chat__voice-speed-val { min-width: 4.5ch; color: var(--color-text); }
.chat__voice-design { margin-left: auto; }
.chat__outcomes { display: inline-flex; align-items: center; gap: var(--sp-1); }
.chat__composer { display: flex; gap: var(--sp-2); align-items: flex-end; }
.chat__input { flex: 1 1 auto; min-height: var(--height-control); max-height: 40vh; resize: vertical; }
.chat__send { flex-shrink: 0; }
.chat__hint { margin: 0; font-size: var(--fs-xxs); }

/* ── Voice designer modal ───────────────────────────────────────── */
.voice-designer .modal__panel { max-width: 480px; }
.voice-designer__status { margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.voice-designer__status:empty { display: none; }

/* ── Phone: the list becomes an off-canvas drawer ───────────────── */
@media (max-width: 719px) {
    .chat__drawer-toggle { display: inline-flex; }
    .chat__drawer-close  { display: inline-flex; }
    .chat__sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(320px, 86vw);
        border-radius: 0;
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
        z-index: var(--z-modal);
        transform: translateX(-100%);
        transition: transform var(--t-base);
        box-shadow: var(--shadow-lg);
    }
    .chat__sidebar--open { transform: translateX(0); }
    .chat__backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-modal) - 1);
        background: rgba(0, 0, 0, 0.6);
    }
    .chat__backdrop:not([hidden]) { display: block; }
    /* The page scrolls on phones, so the card must not clip (a clipped
       ancestor pins `sticky` to the card instead of the viewport). */
    .chat__main { overflow: visible; }
    .chat__scroll { padding: var(--sp-3); overflow-y: visible; }
    .msg { max-width: 92%; }
    .chat__dock {
        padding: var(--sp-2) var(--sp-3);
        border-radius: 0 0 var(--radius-card) var(--radius-card);
    }
    .chat__send-label { display: none; }
    .chat__send { width: var(--height-control); padding: 0; }
    .chat__hint { display: none; }
    .chat__voice-select { min-width: 0; flex: 1 1 120px; }
}