/* ============================================================
   frontend-components.css — styles for the questions-form wizard
   ------------------------------------------------------------
   - Loaded by default on /chat (wired in views/chat.ejs).
   - Fully theme-aware via design-system tokens (var(--*)); the
     dark/light switch is automatic through [data-theme].
   - Scoped under .fc-* and #fc-active-wizard so it can NEVER
     leak into existing chat styles.
   - The wizard renders INSIDE a .message.user bubble, whose
     background is var(--accent) with var(--accent-contrast) text.
     Interactive rows therefore use translucent-white overlays so
     they stay readable on the sky-blue accent in BOTH themes.
   ============================================================ */

/* ---------- Wizard shell (fills the user bubble) ---------- */
#fc-active-wizard .fc-wizard {
    width: 100%;
    min-width: 260px;
    color: inherit;                 /* accent-contrast from the bubble */
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

#fc-active-wizard .fc-progress {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: var(--space-2);
}

/* ---------- Step visibility (only the active step shows) ---------- */
#fc-active-wizard .fc-step { display: none; }
#fc-active-wizard .fc-step.is-active { display: block; }

/* ---------- Questions ---------- */
#fc-active-wizard .fc-question { margin-bottom: var(--space-4); }
#fc-active-wizard .fc-question:last-child { margin-bottom: var(--space-2); }
#fc-active-wizard .fc-question__text {
    font-weight: 600;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
    color: inherit;
}
#fc-active-wizard .fc-question__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---------- Option rows (radio / checkbox) ---------- */
#fc-active-wizard .fc-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
#fc-active-wizard .fc-option:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.5);
}
#fc-active-wizard .fc-option input { accent-color: var(--accent-contrast); cursor: pointer; }
#fc-active-wizard .fc-option:has(input:checked) {
    background: rgba(255, 255, 255, 0.34);
    border-color: rgba(255, 255, 255, 0.7);
}
#fc-active-wizard .fc-option__label { flex: 1; }

/* ---------- Native select ---------- */
#fc-active-wizard .fc-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: inherit;
    font-family: inherit;
    font-size: var(--text-base);
    cursor: pointer;
}
#fc-active-wizard .fc-select:focus { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 1px; }
/* dropdown list reads better on a solid surface */
#fc-active-wizard .fc-select option { background: var(--bg-elevated); color: var(--text); }

/* ---------- Footer hint (Enter/Tab/Esc) ---------- */
#fc-active-wizard .fc-nav {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    opacity: 0.8;
    text-align: right;
}

/* ---------- Summary screen ---------- */
#fc-active-wizard .fc-summary { display: flex; flex-direction: column; gap: var(--space-2); }
#fc-active-wizard .fc-summary-title {
    font-weight: 700;
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}
#fc-active-wizard .fc-summary-row {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
#fc-active-wizard .fc-summary-q { font-size: var(--text-xs); opacity: 0.8; }
#fc-active-wizard .fc-summary-a { font-weight: 600; }

/* ---------- Resume button (in the composer bar) ---------- */
.fc-resume-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 2.6em;
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: none;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.fc-resume-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.fc-resume-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.fc-resume-btn[hidden] { display: none; }
.fc-resume-btn svg { flex-shrink: 0; }