/* ChatSurface — the shared chat used by the front page and the full-page analyst. */

.chat-surface {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Empty state */

.chat-surface-greeting {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 1rem;
}

.chat-surface-greeting-inner {
    text-align: center;
    width: 100%;
    max-width: 720px;
}

.chat-surface-greeting-title {
    font-weight: 300;
    /* was 0.5rem; the removed subtitle used to carry the gap before the composer. */
    margin-bottom: 1.5rem;
    color: #000000;
}

.chat-surface-input-row {
    margin: 0 auto;
}

.chat-surface-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.chat-surface-empty-footer {
    margin-top: 1.5rem;
}

/* Active state */

.chat-surface-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* A slim in-flow header row above the messages — not the floating close-corner cluster it used to be.
   New-chat (compose) sits left; history + open-full ride right via an ml-auto group in the host. */
.chat-surface-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    flex-shrink: 0;
}

.chat-surface-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.chat-surface-message-column {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
}

.chat-surface-input-area {
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}

/* Input row controls. These used to be inline styles duplicated across the two chat copies. */

.chat-mic-btn {
    background: none;
    border: none;
    padding: 0 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1.2em;
}

.chat-surface-trace-btn {
    background: none;
    border: none;
    padding: 0 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* ── Unified composer ──
   The single bordered box holding the textarea + ghost mic/trace + square send. Fills its centering
   wrapper (.analyst-input-row). Corners stay square; the border darkens on focus-within. */
.chat-composer {
    flex: 1;
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    border: 1px solid #dee2e6;
    background: #ffffff;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
}

/* Voice status shown over the (empty) textarea while recording/transcribing, or a brief message
   afterwards ("no speech detected", errors). Sits where the placeholder would be; clicks pass through. */
.chat-composer-status {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: calc(100% - 5rem);
    font-size: 0.85em;
    color: #6c757d;
    background: #ffffff;
    padding-right: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.chat-composer-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1d1d1d;
    animation: voice-pulse 1s ease-in-out infinite;
    flex-shrink: 0;
}

.chat-composer:focus-within {
    border-color: #1d1d1d;
}

/* The textarea's own border/rounding moves to .chat-composer. `.chat-composer textarea` (0,1,1) beats
   the base `.analyst-input-field` (0,1,0), so the shared field keeps its look everywhere else. */
.chat-composer textarea {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0.5rem;
}

/* Match the ghost mic/trace buttons to the send button's height so all three share a vertical centre
   when the composer bottom-aligns them (flex-end keeps send pinned as the textarea grows multi-line). */
.chat-composer .chat-mic-btn,
.chat-composer .chat-surface-trace-btn {
    height: 2rem;
    justify-content: center;
}

/* Compact square send button with an ↑ arrow, inside-right. */
.chat-composer-send {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: #1d1d1d;
    color: #ffffff;
    cursor: pointer;
    font-size: 1rem;
}

.chat-composer-send:disabled {
    opacity: 0.35;
    cursor: default;
}

@keyframes trace-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}