/*
 * client-frontend.css  v3.0.1
 * Thin complement to chat.css.
 * Contains ONLY rules that cannot cleanly live in chat.css:
 *   - Stage-specific welcome-screen layout
 *   - Inline-style resets written by JS
 *   - Chat.html app-container height insurance
 * NO duplicate media queries. NO !important except where HTML inline styles must be beaten.
 */

/* =========================================================
   A. Layout insurance
   chat.css owns .app-container sizing. Do not override its
   desktop max-width / max-height here.
   ========================================================= */
html,
body {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

body { margin: 0; }

.app-container {
    min-height: 0;
    overflow: hidden;
}

#chat-tab.tab-content.active {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* =========================================================
   B. Welcome-screen stage switching
   ========================================================= */

/* Stage: language — shows the card shell */
.welcome-screen.stage-language {
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1.25rem, 4vh, 2.75rem) 1rem 1.5rem;
}

.welcome-screen.stage-language .welcome-card-shell {
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

/* Stage: role — hides card shell, shows role-selection */
.welcome-screen.stage-role {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem .75rem 1.5rem;
}

.welcome-screen.stage-role .welcome-card-shell {
    display: none;
}

/* Stage: scenario — hides card shell, shows scenario-selection */
.welcome-screen.stage-scenario {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem .75rem 1.5rem;
}

.welcome-screen.stage-scenario .welcome-card-shell {
    display: none;
}

/* =========================================================
   C. Messages-area must always scroll (not clip)
   ========================================================= */
.messages-area {
    overflow-y: auto;
    overflow-x: hidden;
}

/* =========================================================
   D. Scroll-to-bottom button RTL positioning
   ========================================================= */
[dir="rtl"] .scroll-to-bottom {
    inset-inline-end: auto;
    inset-inline-start: 1rem;
}