/*
 * Shing Chat client frontend layout
 * Single authoritative layer for the header, onboarding, roles, scenarios,
 * and mobile conversation layout. Loaded after chat.css.
 */

html,
body {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
}

.app-container,
#chat-tab.tab-content.active {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#chat-tab.tab-content.active {
    display: flex;
    flex-direction: column;
}

.chat-header {
    flex: 0 0 auto;
}

.messages-container {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.messages-area {
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Onboarding shell */
.welcome-screen {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
    padding: clamp(1rem, 3vw, 2.5rem) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.welcome-screen.stage-language .welcome-card-shell {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    min-width: 0 !important;
    margin: auto !important;
    padding: clamp(1.35rem, 4vw, 3rem) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.welcome-screen.stage-language .welcome-icon {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: clamp(76px, 10vw, 104px) !important;
    height: clamp(76px, 10vw, 104px) !important;
    margin: 0 auto 1rem !important;
}

.welcome-screen.stage-language .welcome-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto .75rem !important;
    font-size: clamp(1.55rem, 4.2vw, 2.65rem) !important;
    line-height: 1.12 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.welcome-screen.stage-language .welcome-title span {
    display: inline-block;
}

.welcome-screen.stage-language .welcome-description {
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: clamp(.92rem, 2.2vw, 1.15rem) !important;
    line-height: 1.55 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.welcome-screen.stage-language #language-cards.role-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin: 1.25rem auto 0 !important;
    padding: 0 !important;
    gap: .85rem !important;
    overflow: visible !important;
}

.welcome-screen.stage-language .language-card.role-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: .85rem 1rem !important;
    box-sizing: border-box !important;
}

.welcome-screen.stage-language .language-card .role-icon {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
}

.language-card-copy {
    min-width: 0;
}

/* Role and scenario screens */
.welcome-screen.stage-role .welcome-card-shell,
.welcome-screen.stage-scenario .welcome-card-shell {
    display: none !important;
}

.role-selection,
.scenario-selection {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.back-btn {
    max-width: 100%;
    white-space: normal;
}

#role-cards.role-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    height: auto !important;
    margin: 1rem auto 0 !important;
    padding: 0 !important;
    gap: 1.25rem !important;
    overflow: visible !important;
}

#role-cards .role-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
}

.scenario-selector-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.scenario-selector {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .5rem !important;
    gap: 1rem !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
}

.scenario-card.scenario-card-v3 {
    display: flex !important;
    flex: none !important;
    flex-direction: column !important;
    width: min(100%, 760px) !important;
    min-width: 0 !important;
    max-width: 760px !important;
    min-height: 300px !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.scenario-card.scenario-card-v3 .scenario-image {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #fff7f2 0%, #fff 62%, #fff4ee 100%) !important;
}

.scenario-card.scenario-card-v3 .scenario-image-img {
    display: block !important;
    width: 158px !important;
    height: 158px !important;
    max-width: 70% !important;
    max-height: 90% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    border: 5px solid #fff !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(99, 23, 23, .14) !important;
}

.scenario-card.scenario-card-v3 .scenario-favorite,
.scenario-card.scenario-card-v3 .scenario-ref-icon {
    top: 14px !important;
    width: 42px !important;
    height: 42px !important;
}

.scenario-card.scenario-card-v3 .scenario-ref-icon {
    inset-inline-start: 14px !important;
    inset-inline-end: auto !important;
}

.scenario-card.scenario-card-v3 .scenario-favorite {
    inset-inline-start: auto !important;
    inset-inline-end: 14px !important;
}

.scenario-card.scenario-card-v3 .scenario-status-badge {
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 28px) !important;
    white-space: nowrap !important;
}

[dir="rtl"] .scenario-card.scenario-card-v3 .scenario-status-badge {
    left: auto !important;
    right: 50% !important;
    transform: translateX(50%) !important;
}

.scenario-card.scenario-card-v3 .scenario-info {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 140px !important;
    padding: 1.1rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.scenario-card.scenario-card-v3 .scenario-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem) !important;
    line-height: 1.22 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.scenario-card.scenario-card-v3 .scenario-meta-row,
.scenario-card.scenario-card-v3 .scenario-desc,
.scenario-card.scenario-card-v3 .scenario-card-footer {
    display: none !important;
}

@media (max-width: 768px) {
    .chat-header {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 68px !important;
        padding: .65rem .75rem !important;
        gap: .55rem !important;
        box-sizing: border-box !important;
        border-radius: 0 0 22px 22px !important;
    }

    .header-left {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .bot-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        padding: .3rem !important;
        border-radius: 15px !important;
    }

    .bot-info,
    .header-text-btn {
        display: none !important;
    }

    #refresh-scenarios-btn,
    #info-btn {
        display: none !important;
    }

    .header-actions {
        display: flex !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        min-width: 0 !important;
        gap: .4rem !important;
    }

    .language-selector {
        flex: 1 1 96px !important;
        width: auto !important;
        min-width: 74px !important;
        max-width: 150px !important;
        height: 40px !important;
        padding: .4rem .55rem !important;
        font-size: .82rem !important;
    }

    .header-btn {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    .messages-area {
        padding: .8rem !important;
    }

    .welcome-screen {
        min-height: auto !important;
        padding: .75rem 0 !important;
    }

    .welcome-screen.stage-language .welcome-card-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1.25rem 1rem !important;
        border-radius: 22px !important;
    }

    .welcome-screen.stage-language .welcome-title {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
    }

    .welcome-screen.stage-language .welcome-title span {
        display: block !important;
        margin-top: .15rem !important;
    }

    .welcome-screen.stage-language .welcome-description {
        font-size: .95rem !important;
    }

    .role-selection,
    .scenario-selection {
        width: 100% !important;
        max-width: 100% !important;
    }

    #role-cards.role-cards,
    .scenario-selector {
        grid-template-columns: 1fr !important;
    }

    #role-cards.role-cards {
        width: min(100%, 360px) !important;
        gap: 1rem !important;
    }

    .scenario-selector {
        width: 100% !important;
        padding: .35rem 0 1rem !important;
        gap: 1rem !important;
    }

    .scenario-card.scenario-card-v3 {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
        min-height: 330px !important;
        margin: 0 auto !important;
    }

    .scenario-card.scenario-card-v3 .scenario-image {
        height: 184px !important;
        min-height: 184px !important;
        padding: 14px !important;
    }

    .scenario-card.scenario-card-v3 .scenario-image-img {
        width: 152px !important;
        height: 152px !important;
        max-width: 62vw !important;
        max-height: 62vw !important;
    }

    .scenario-card.scenario-card-v3 .scenario-info {
        min-height: 124px !important;
        padding: 1rem !important;
    }

    .scenario-card.scenario-card-v3 .scenario-title {
        font-size: 1.15rem !important;
    }

    .training-context.active {
        display: grid !important;
        grid-template-columns: 1fr !important;
        flex: 0 0 auto !important;
        max-height: 25dvh !important;
        padding: .6rem .7rem !important;
        gap: .5rem !important;
        overflow: hidden !important;
    }

    .active-persona-card,
    .conversation-progress-timeline {
        min-width: 0 !important;
        padding: .6rem .7rem !important;
        border-radius: 16px !important;
    }

    .persona-avatar {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }

    .persona-content p,

    .response-container {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-height: 44dvh !important;
        padding: .7rem .75rem calc(.8rem + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border-radius: 22px 22px 0 0 !important;
    }

    .response-options {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .65rem !important;
    }
}

@media (max-width: 420px) {
    .chat-header {
        padding-inline: .55rem !important;
        gap: .35rem !important;
    }

    .bot-avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .header-actions {
        gap: .3rem !important;
    }

    .language-selector {
        min-width: 68px !important;
        height: 36px !important;
        font-size: .76rem !important;
    }

    .header-btn {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    .messages-area {
        padding: .65rem !important;
    }

    .welcome-screen.stage-language .welcome-card-shell {
        padding: 1.05rem .8rem !important;
        border-radius: 18px !important;
    }

    .welcome-screen.stage-language .welcome-icon {
        width: 68px !important;
        height: 68px !important;
    }

    .welcome-screen.stage-language .welcome-title {
        font-size: clamp(1.3rem, 7.5vw, 1.7rem) !important;
    }

    .welcome-screen.stage-language .language-card.role-card {
        grid-template-columns: 46px minmax(0, 1fr) auto !important;
        padding: .75rem .8rem !important;
    }

    .welcome-screen.stage-language .language-card .role-icon {
        width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
    }
}

/* ===== v1.4 hardening: compact phones (320-375px) and short viewports ===== */
@media (max-width: 375px) {
    .chat-header {
        min-height: 60px !important;
        padding: .5rem !important;
        gap: .3rem !important;
    }

    .bot-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 13px !important;
    }

    .header-actions {
        gap: .25rem !important;
    }

    .language-selector {
        flex: 1 1 78px !important;
        min-width: 62px !important;
        max-width: 116px !important;
        height: 34px !important;
        padding: .25rem .4rem !important;
        font-size: .72rem !important;
    }

    .header-btn {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
    }

    .messages-area {
        padding: .5rem !important;
    }

    .welcome-screen {
        padding: .5rem 0 !important;
    }

    .welcome-screen.stage-language .welcome-card-shell {
        padding: .9rem .7rem !important;
        border-radius: 16px !important;
    }

    .welcome-screen.stage-language .welcome-icon {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: .7rem !important;
    }

    .welcome-screen.stage-language .welcome-title {
        font-size: 1.28rem !important;
        line-height: 1.12 !important;
        margin-bottom: .55rem !important;
    }

    .welcome-screen.stage-language .welcome-description {
        font-size: .86rem !important;
        line-height: 1.42 !important;
    }

    .welcome-screen.stage-language #language-cards.role-cards {
        width: 100% !important;
        gap: .6rem !important;
        margin-top: .9rem !important;
    }

    .welcome-screen.stage-language .language-card.role-card {
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        gap: .55rem !important;
        padding: .65rem !important;
    }

    .welcome-screen.stage-language .language-card .role-icon {
        width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    #role-cards.role-cards,
    .scenario-card.scenario-card-v3 {
        width: 100% !important;
        max-width: 100% !important;
    }

    .scenario-card.scenario-card-v3 {
        min-height: 286px !important;
        border-radius: 18px !important;
    }

    .scenario-card.scenario-card-v3 .scenario-image {
        height: 158px !important;
        min-height: 158px !important;
        padding: 10px !important;
    }

    .scenario-card.scenario-card-v3 .scenario-image-img {
        width: 132px !important;
        height: 132px !important;
        max-width: 54vw !important;
        max-height: 54vw !important;
        border-width: 4px !important;
    }

    .scenario-card.scenario-card-v3 .scenario-info {
        min-height: 112px !important;
        padding: .8rem !important;
    }

    .scenario-card.scenario-card-v3 .scenario-title {
        font-size: 1.02rem !important;
    }

    .training-context.active {
        max-height: 21dvh !important;
        padding: .45rem .5rem !important;
        gap: .35rem !important;
        overflow-y: auto !important;
    }

    .active-persona-card,
    .conversation-progress-timeline {
        padding: .45rem .55rem !important;
        border-radius: 13px !important;
    }

    .persona-avatar {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .response-container {
        max-height: 40dvh !important;
        padding: .55rem .55rem calc(.65rem + env(safe-area-inset-bottom)) !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .response-options {
        gap: .5rem !important;
    }

    .premium-response-card {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: .7rem !important;
        border-radius: 14px !important;
    }
}

@media (max-width: 340px) {
    .chat-header {
        padding-inline: .4rem !important;
    }

    .bot-avatar {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .language-selector {
        min-width: 58px !important;
        max-width: 102px !important;
        font-size: .68rem !important;
    }

    .header-btn {
        flex-basis: 30px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .welcome-screen.stage-language .welcome-card-shell {
        padding-inline: .6rem !important;
    }

    .welcome-screen.stage-language .welcome-title {
        font-size: 1.2rem !important;
    }

    .scenario-card.scenario-card-v3 .scenario-image-img {
        width: 122px !important;
        height: 122px !important;
    }
}

/* Short mobile displays: preserve usable message viewport at all times. */
@media (max-width: 768px) and (max-height: 700px) {
    .training-context.active {
        max-height: 18dvh !important;
    }

    .response-container {
        max-height: 36dvh !important;
    }
}

@media (max-width: 375px) and (max-height: 620px) {
    .training-context.active {
        max-height: 16dvh !important;
    }

    .response-container {
        max-height: 34dvh !important;
    }
}

/* =========================================================
   CLIENT DELIVERY UI PATCH v1.5 - 2026-08-16
   Targeted visual-only repair based on client screenshots.
   No workflow / scenario / scoring / backend logic changed.
   ========================================================= */

/* Let onboarding content breathe without being cut by a fixed viewport. */
.messages-area {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.welcome-screen.stage-language,
.welcome-screen.stage-role,
.welcome-screen.stage-scenario {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    justify-content: flex-start !important;
}

/* Language screen: compact card, fully visible Arabic + English options. */
.welcome-screen.stage-language {
    padding: clamp(2rem, 5vh, 3.25rem) 1rem 2rem !important;
}

.welcome-screen.stage-language .welcome-card-shell {
    width: min(760px, calc(100% - 1rem)) !important;
    max-width: 760px !important;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem) 2.25rem !important;
    border-radius: 30px !important;
    overflow: visible !important;
}

.welcome-screen.stage-language .welcome-icon {
    width: 92px !important;
    height: 92px !important;
    margin-bottom: 1rem !important;
}

.welcome-screen.stage-language .welcome-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    margin-bottom: .7rem !important;
}

.welcome-screen.stage-language .welcome-description {
    max-width: 560px !important;
    margin-bottom: .75rem !important;
    font-size: clamp(1rem, 1.8vw, 1.18rem) !important;
}

.welcome-screen.stage-language #language-cards.role-cards {
    width: min(520px, 100%) !important;
    max-width: 520px !important;
    margin-top: 1rem !important;
    gap: .8rem !important;
}

/* Role screen: remove oversized empty cards and keep both roles visible. */
.welcome-screen.stage-role {
    padding: 1.5rem 1rem 2rem !important;
}

.welcome-screen.stage-role .role-selection {
    width: min(920px, 100%) !important;
    max-width: 920px !important;
    padding: 1rem 1.25rem 1.4rem !important;
}

.welcome-screen.stage-role .back-btn {
    margin-top: .15rem !important;
    margin-bottom: .75rem !important;
}

.welcome-screen.stage-role .role-title {
    margin: .2rem 0 1.15rem !important;
}

#role-cards.role-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    gap: 1.2rem !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

#role-cards .role-card:not(.language-card) {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 24px !important;
}

#role-cards .role-card:not(.language-card) .role-icon {
    height: clamp(210px, 23vw, 285px) !important;
    min-height: 210px !important;
    background: linear-gradient(145deg, #fff8f4, #fff) !important;
}

#role-cards .role-card:not(.language-card) .role-icon img {
    object-fit: contain !important;
    object-position: center bottom !important;
    padding: .65rem .75rem 0 !important;
}

#role-cards .role-card:not(.language-card) .role-name {
    padding: .9rem .75rem 1.05rem !important;
    font-size: clamp(1.1rem, 2vw, 1.45rem) !important;
}

/* Scenario screen: horizontal scroll carousel, cards beside each other. */
.welcome-screen.stage-scenario {
    padding: 1.35rem 1rem 2rem !important;
}

.welcome-screen.stage-scenario .scenario-selection {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    padding: 1rem 1.15rem 1.25rem !important;
}

.scenario-selector-wrapper {
    width: 100% !important;
    max-width: 1080px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

.scenario-selector {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .55rem .5rem 1rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: .5rem !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(157,10,14,.35) rgba(157,10,14,.07) !important;
    -webkit-overflow-scrolling: touch !important;
}

.scenario-selector::-webkit-scrollbar {
    display: block !important;
    height: 8px !important;
}

.scenario-selector::-webkit-scrollbar-track {
    background: rgba(157,10,14,.07) !important;
    border-radius: 999px !important;
}

.scenario-selector::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #b30013, #f15a22) !important;
    border-radius: 999px !important;
}

.scenario-card.scenario-card-v3 {
    flex: 0 0 clamp(285px, 31vw, 350px) !important;
    width: clamp(285px, 31vw, 350px) !important;
    min-width: clamp(285px, 31vw, 350px) !important;
    max-width: 350px !important;
    min-height: 320px !important;
    height: auto !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    border-radius: 24px !important;
}

.scenario-card.scenario-card-v3 .scenario-image {
    height: 188px !important;
    min-height: 188px !important;
    padding: 14px !important;
}

.scenario-card.scenario-card-v3 .scenario-image-img {
    width: 154px !important;
    height: 154px !important;
    max-width: 154px !important;
    max-height: 154px !important;
}

.scenario-card.scenario-card-v3 .scenario-info {
    min-height: 118px !important;
    padding: .9rem 1rem !important;
}

.scenario-card.scenario-card-v3 .scenario-title {
    font-size: 1.08rem !important;
    line-height: 1.25 !important;
}

/* Tablet/mobile: keep scenario cards side-by-side in a swipeable row. */
@media (max-width: 768px) {
    .welcome-screen.stage-language {
        padding: 1rem .7rem 1.4rem !important;
    }

    .welcome-screen.stage-language .welcome-card-shell {
        width: 100% !important;
        padding: 1.15rem .9rem 1.1rem !important;
        border-radius: 22px !important;
    }

    .welcome-screen.stage-language .welcome-icon {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: .6rem !important;
    }

    .welcome-screen.stage-language .welcome-title {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
    }

    .welcome-screen.stage-role .role-selection,
    .welcome-screen.stage-scenario .scenario-selection {
        padding: .85rem .65rem 1rem !important;
    }

    #role-cards.role-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: .75rem !important;
    }

    #role-cards .role-card:not(.language-card) .role-icon {
        height: clamp(145px, 37vw, 210px) !important;
        min-height: 145px !important;
    }

    .scenario-selector {
        display: flex !important;
        grid-template-columns: none !important;
        padding: .45rem .35rem .85rem !important;
        gap: .85rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .scenario-card.scenario-card-v3 {
        flex: 0 0 min(78vw, 310px) !important;
        width: min(78vw, 310px) !important;
        min-width: min(78vw, 310px) !important;
        max-width: 310px !important;
        min-height: 300px !important;
        margin: 0 !important;
    }

    .scenario-card.scenario-card-v3 .scenario-image {
        height: 170px !important;
        min-height: 170px !important;
    }

    .scenario-card.scenario-card-v3 .scenario-image-img {
        width: 140px !important;
        height: 140px !important;
        max-width: 140px !important;
        max-height: 140px !important;
    }
}

@media (max-width: 480px) {
    #role-cards.role-cards {
        grid-template-columns: 1fr !important;
        width: min(100%, 330px) !important;
    }

    #role-cards .role-card:not(.language-card) .role-icon {
        height: 195px !important;
    }

    .scenario-card.scenario-card-v3 {
        flex-basis: 82vw !important;
        width: 82vw !important;
        min-width: 82vw !important;
    }
}




/* =========================================================
   SHING CLIENT FRONTEND FINAL v1.8.0
   Single final override layer. Design only; no workflow logic.
   ========================================================= */

/* Welcome */
.welcome-screen.stage-language .welcome-card-shell,
#language-selection { display:flex !important; flex-direction:column !important; align-items:center !important; }
.welcome-screen.stage-language .welcome-title { width:100% !important; text-align:center !important; margin:0 auto .7rem !important; }
#language-selection .role-title { display:none !important; }
#language-cards { width:min(520px,100%) !important; margin-inline:auto !important; }
.language-card[data-lang="ar"] { direction:rtl !important; grid-template-columns:52px minmax(0,1fr) auto !important; }
.language-card[data-lang="ar"] .role-icon { order:3 !important; }
.language-card[data-lang="ar"] .language-card-copy { order:2 !important; text-align:center !important; }
.language-card[data-lang="ar"] .language-card-arrow { order:1 !important; justify-self:start !important; transform:rotate(180deg) !important; }

/* Scenario cards */
.scenario-card.scenario-card-v3 .scenario-info.clean-scenario-info { min-height:118px !important; padding:.95rem 1rem !important; display:flex !important; flex-direction:column !important; justify-content:center !important; gap:.25rem !important; text-align:center !important; }
.scenario-title-main { font-size:1.16rem; line-height:1.2; font-weight:900; color:#111827; }
.scenario-title-sub { font-size:.86rem; line-height:1.35; font-weight:700; font-style:italic; color:#7c2d12; }

/* Compact preview */
.scenario-preview-card.compact-preview-card { width:min(860px,92vw) !important; max-width:860px !important; padding:1.45rem !important; border-radius:30px !important; }
.scenario-preview-layout { display:grid; grid-template-columns:160px minmax(0,1fr); gap:1.35rem; align-items:center; }
.scenario-preview-side { display:grid; justify-items:center; gap:.65rem; text-align:center; }
.scenario-preview-avatar { width:116px !important; height:116px !important; border-radius:30px !important; box-shadow:0 16px 34px rgba(157,10,14,.14); }
.scenario-preview-name { font-size:1.12rem; line-height:1.2; font-weight:900; color:#111827; }
.scenario-preview-main { display:grid; gap:.65rem; }
.scenario-preview-main h3 { margin:0 !important; font-size:clamp(1.4rem,2.4vw,2rem) !important; }
.scenario-preview-main p { margin:0 !important; line-height:1.55 !important; }
.scenario-preview-goal.compact-goal { margin:.1rem 0 0 !important; padding:.9rem 1rem !important; border-radius:18px !important; }
.scenario-preview-actions { justify-content:flex-start !important; margin-top:.15rem; }

/* Active scenario + progress bar only */
.training-context.active { grid-template-columns:minmax(0,1fr) minmax(220px,320px) !important; align-items:center !important; gap:.7rem !important; padding:.6rem .85rem !important; }
.active-persona-card { padding:.72rem .85rem !important; min-height:0 !important; }
.persona-avatar { width:48px !important; height:48px !important; flex:0 0 48px !important; }
.compact-persona-content { display:grid; gap:.16rem !important; }
.persona-content strong { white-space:normal !important; font-size:1.03rem !important; }
.persona-subtitle { font-size:.82rem !important; line-height:1.3; color:#7c2d12; font-style:italic; font-weight:700; }
.conversation-progress-timeline { padding:.8rem .9rem !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.timeline-track.compact-track { width:100% !important; height:9px !important; margin:0 !important; }
.timeline-steps,.timeline-caption,.timeline-progress-text { display:none !important; }

/* Conversation */
.messages-area { padding:1rem 1.05rem 1.2rem !important; gap:.8rem !important; }
.message-bubble { max-width:min(820px,80vw) !important; padding:.92rem 1.05rem !important; border-radius:22px !important; box-shadow:0 9px 24px rgba(15,23,42,.055) !important; }
.message.bot .message-bubble { background:#fff !important; border:1px solid rgba(157,10,14,.11) !important; }
.message.user .message-bubble { background:linear-gradient(135deg,#b30013,#e84b19) !important; color:#fff !important; border:1px solid rgba(157,10,14,.14) !important; }
.message.user .message-text,.message.user .message-time { color:#fff !important; }

/* Responses: one clean bordered message per option */
.response-container { max-height:none !important; overflow:visible !important; padding:.8rem .95rem .95rem !important; border-top:1px solid rgba(157,10,14,.12) !important; box-shadow:0 -10px 30px rgba(15,23,42,.07) !important; }
.response-options { display:grid !important; grid-template-columns:1fr !important; gap:.62rem !important; max-width:1040px; margin:0 auto; }
.premium-response-card,.response-btn,.response-option { min-height:0 !important; height:auto !important; padding:.82rem .95rem !important; border:2px solid rgba(157,10,14,.24) !important; border-radius:18px !important; background:#fff !important; box-shadow:0 7px 20px rgba(15,23,42,.04) !important; display:grid !important; grid-template-columns:32px minmax(0,1fr) !important; gap:.7rem !important; align-items:center !important; text-align:start !important; }
.premium-response-card:before { display:none !important; }
.premium-response-card:hover { border-color:rgba(157,10,14,.55) !important; transform:translateY(-1px); }
.response-number { margin:0 !important; }
.response-card-body { font-size:.98rem !important; line-height:1.5 !important; margin:0 !important; }
.response-tag-pill,.response-quality-pill,.response-card-meta { display:none !important; }

/* Compact final report */
.final-performance-summary,.summary-recommendation,.score-duration-wrap,.score-icon { display:none !important; }
.score-modal .score-content { width:min(720px,92vw) !important; max-width:720px !important; max-height:86vh !important; overflow-y:auto !important; padding:1.2rem 1.25rem 1.1rem !important; border-radius:28px !important; }
.score-title { margin:.1rem 0 .15rem !important; }
.score-message { margin:.35rem auto .7rem !important; max-width:620px; line-height:1.45 !important; }
.insight-section { margin-top:.45rem !important; }
#tag-breakdown-list { display:grid; gap:.5rem; }
.tag-breakdown-item { padding:.72rem .8rem !important; border-radius:16px !important; }
.score-actions { margin-top:.8rem !important; gap:.6rem !important; }

@media (max-width:900px){
  .training-context.active { grid-template-columns:1fr !important; }
  .scenario-preview-layout { grid-template-columns:1fr; text-align:center; gap:.9rem; }
  .scenario-preview-main { justify-items:center; }
  .scenario-preview-main p,.scenario-preview-goal.compact-goal { text-align:center; }
  .scenario-preview-actions { width:100%; justify-content:stretch !important; }
}
@media (max-width:768px){
  .response-container { max-height:42dvh !important; overflow-y:auto !important; }
  .message-bubble { max-width:92% !important; }
  .score-modal .score-content { width:94vw !important; padding:1rem !important; }
}
@media (max-width:480px){
  .language-card[data-lang="ar"] { grid-template-columns:46px minmax(0,1fr) auto !important; }
  .scenario-title-main { font-size:1.04rem; }
  .scenario-title-sub { font-size:.78rem; }
  .premium-response-card,.response-btn,.response-option { grid-template-columns:28px minmax(0,1fr) !important; padding:.75rem .8rem !important; gap:.55rem !important; }
  .response-card-body { font-size:.9rem !important; }
}


/* =========================================================
   v1.8.1 hotfix
   Removes remaining active scenario block and refines welcome language cards.
   ========================================================= */
.training-context.active { display:block !important; padding:.35rem .9rem .12rem !important; margin-bottom:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; }
.active-persona-card { display:none !important; }
.conversation-progress-timeline { width:100% !important; background:transparent !important; border:none !important; box-shadow:none !important; padding:.15rem 0 .25rem !important; }
.conversation-progress-timeline .timeline-track.compact-track { max-width:460px !important; height:10px !important; margin-left:auto !important; margin-right:0 !important; border-radius:999px !important; }
@media (max-width:900px){ .conversation-progress-timeline .timeline-track.compact-track { max-width:100% !important; margin-left:0 !important; } }
.welcome-screen.stage-language #language-cards.role-cards { width:min(560px,100%) !important; gap:1rem !important; }
.welcome-screen.stage-language .language-card.role-card { grid-template-columns:74px minmax(0,1fr) 28px !important; align-items:center !important; gap:1rem !important; padding:1.15rem 1.25rem !important; }
.welcome-screen.stage-language .language-card .role-icon { width:74px !important; height:74px !important; justify-self:center !important; }
.welcome-screen.stage-language .language-card .language-card-copy { text-align:left !important; align-self:center !important; }
.welcome-screen.stage-language .language-card .language-card-arrow { justify-self:center !important; align-self:center !important; font-size:1.45rem !important; }
.language-card[data-lang="ar"] { direction:rtl !important; grid-template-columns:74px minmax(0,1fr) 28px !important; }
.language-card[data-lang="ar"] .role-icon { order:3 !important; }
.language-card[data-lang="ar"] .language-card-copy { order:2 !important; text-align:right !important; padding-inline:.15rem !important; }
.language-card[data-lang="ar"] .language-card-arrow { order:1 !important; justify-self:center !important; transform:none !important; }
@media (max-width:480px){ .welcome-screen.stage-language .language-card.role-card,.language-card[data-lang="ar"] { grid-template-columns:62px minmax(0,1fr) 24px !important; gap:.75rem !important; padding:.95rem 1rem !important; } .welcome-screen.stage-language .language-card .role-icon { width:62px !important; height:62px !important; } }


/* =========================================================
   v1.8.2 welcome cards precise fix
   Make English + Arabic cards visually balanced and consistent.
   ========================================================= */
.welcome-screen.stage-language #language-cards.role-cards {
    width: min(560px, 100%) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.welcome-screen.stage-language .language-card.role-card,
.welcome-screen.stage-language .language-card.role-card[data-lang="ar"] {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 22px !important;
    min-height: 124px !important;
}

.welcome-screen.stage-language .language-card.role-card .role-icon,
.welcome-screen.stage-language .language-card.role-card[data-lang="ar"] .role-icon {
    order: 1 !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 !important;
    justify-self: center !important;
}

.welcome-screen.stage-language .language-card.role-card .language-card-copy {
    order: 2 !important;
    align-self: center !important;
    text-align: left !important;
}

.welcome-screen.stage-language .language-card.role-card[data-lang="ar"] .language-card-copy {
    order: 2 !important;
    align-self: center !important;
    text-align: right !important;
}

.welcome-screen.stage-language .language-card.role-card .language-card-arrow,
.welcome-screen.stage-language .language-card.role-card[data-lang="ar"] .language-card-arrow {
    order: 3 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
    font-size: 1.4rem !important;
}

.welcome-screen.stage-language .language-card.role-card .role-name {
    display: block !important;
    margin-bottom: 6px !important;
}

.welcome-screen.stage-language .language-card.role-card small {
    display: block !important;
    line-height: 1.25 !important;
}

@media (max-width: 480px) {
    .welcome-screen.stage-language .language-card.role-card,
    .welcome-screen.stage-language .language-card.role-card[data-lang="ar"] {
        grid-template-columns: 60px minmax(0, 1fr) 24px !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        min-height: 106px !important;
    }

    .welcome-screen.stage-language .language-card.role-card .role-icon,
    .welcome-screen.stage-language .language-card.role-card[data-lang="ar"] .role-icon {
        width: 60px !important;
        height: 60px !important;
    }
}


/* =========================================================
   v1.8.3 Arabic language-card arrow fix
   ========================================================= */
.language-card[data-lang="ar"] .language-card-arrow {
    order: 1 !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    transform: rotate(180deg) !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.welcome-screen.stage-language .language-card.role-card[data-lang="ar"] {
    grid-template-columns: 42px minmax(0, 1fr) 72px !important;
}

@media (max-width: 480px) {
    .welcome-screen.stage-language .language-card.role-card[data-lang="ar"] {
        grid-template-columns: 36px minmax(0, 1fr) 60px !important;
    }
    .language-card[data-lang="ar"] .language-card-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.25rem !important;
    }
}


/* v1.8.4 exact Arabic arrow fix: use native left chevron, no transform */
.arabic-language-arrow {
    transform: none !important;
    rotate: 0deg !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
}

.language-card[data-lang="ar"] .arabic-language-arrow {
    transform: none !important;
    rotate: 0deg !important;
}