/* Chat Interface Styles - Extracted from scenario.html */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
button,
input,
select,
textarea {
    font-family: var(--chat-font-family, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    -webkit-tap-highlight-color: transparent;
    unicode-bidi: isolate;
}

html,
body {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}


:root {
    --chat-primary: #9d0a0e;
    --chat-secondary: #f15a22;
    --chat-gradient: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-secondary) 100%);
    --chat-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --primary: var(--chat-primary);
    --primary-dark: var(--chat-primary);
    --primary-light: #d71921;
    --secondary: var(--chat-secondary);
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark: #1e293b;
    --gray-900: #0f172a;
    --gray-800: #1e293b;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-500: #64748b;
    --gray-400: #94a3b8;
    --gray-300: #cbd5e1;
    --gray-200: #e2e8f0;
    --gray-100: #f1f5f9;
    --gray-50: #f8fafc;
    --white: #ffffff;
    --gradient: var(--chat-gradient);
    --gradient-2: var(--chat-gradient);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

body {
    background-color: #f8fafc;
    background-image: url('../../img/bgg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100dvh;

    width: 100%;
    min-height: -webkit-fill-available;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    padding-inline-end: env(safe-area-inset-right);
    padding-block-end: env(safe-area-inset-bottom);
    padding-inline-start: env(safe-area-inset-left);
    color: var(--gray-800);
    line-height: 1.6;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-overflow-scrolling: touch;
}

.app-container {
    width: 100%;
    max-width: 800px;
    height: 100dvh;
    /* Modern mobile browsers */
    height: calc(var(--vh, 1vh) * 100);
    /* Fallback */
    background: var(--white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: slideUp 0.5s ease-out;
}

@media (max-width: 768px) {
    .app-container {
        height: 100dvh;
        height: -webkit-fill-available;
        border-radius: 0;
        max-width: none;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
}

.tab-btn {
    flex: 1;
    padding: 1rem;
    background: none;
    border: none;
    color: var(--gray-600);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.tab-btn:hover {
    color: var(--primary);
}

.tab-btn.active {
    color: var(--primary);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--chat-primary);
}

.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}

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

/* FontAwesome Icon Rendering - CRITICAL */
.fas,
.fa-solid,
.fa,
i[class*="fa-"] {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands' !important;
    font-weight: 900 !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.chat-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    margin: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 20;
}

@media (max-width: 480px) {
    .chat-header {
        margin: 0;
        padding: 0.75rem 1rem;
        border-radius: 0;
    }
}

@media (max-width: 375px) {
    .chat-header {
        margin: 0;
        padding: 0.5rem 0.75rem;
    }

    .bot-avatar {
        width: 30px;
        height: 30px;
    }

    .header-actions {
        gap: 0.4rem;
    }

    .header-btn {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[dir="rtl"] .header-left {
    flex-direction: row;
}

[dir="rtl"] .header-actions {
    flex-direction: row-reverse;
}


.bot-avatar {
    width: clamp(32px, 10vw, 40px);
    height: clamp(32px, 10vw, 40px);
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bot-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    border-radius: 0 !important;
}

.bot-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bot-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.bot-status {
    font-size: 0.75rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: var(--success);
    border-radius: 50%;
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.language-selector {
    padding: 0.5rem 0.875rem;
    background: #f2f4f7;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.language-selector:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.language-selector:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(157, 10, 14, 0.1);
}

.header-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: #f2f4f7;
    border: none;
    border-radius: 50%;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1rem;
    margin-inline-start: 0.25rem;
}

[dir="rtl"] .header-btn {
    margin-inline-start: 0;
    margin-inline-end: 0.25rem;
}


.header-btn:hover {
    background: #e5e7eb;
    color: var(--gray-700);
    transform: scale(1.08);
}

/* Messages Area */
.messages-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    padding-bottom: 3rem;
    /* Increased bottom padding */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background-image: url('../../img/chatttbackground.png');
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.6);
    background-blend-mode: lighten;
    scroll-padding-bottom: 100px;
}

/* Mobile: Reduce padding */
@media (max-width: 480px) {
    .messages-area {
        padding: 1rem;
        padding-bottom: 4rem;
        /* More space for response sheet */
        gap: 0.75rem;
    }


}

@media (max-width: 768px) and (min-width: 481px) {
    .messages-area {
        padding: 1.2rem;
        padding-bottom: 1.8rem;
        gap: 0.9rem;
    }
}

.messages-area::-webkit-scrollbar {
    width: 4px;
}

.messages-area::-webkit-scrollbar-track {
    background: transparent;
}

.messages-area::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 2px;
}

.messages-area::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.message {
    display: flex;
    gap: 0.75rem;
    max-width: 75%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile: Wider messages */
@media (max-width: 480px) {
    .message {
        max-width: 88%;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .message {
        max-width: 85%;
        gap: 0.6rem;
    }
}

@keyframes bubble-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.bubble-in {
    animation: bubble-in 0.18s ease-out;
}

.message.bot {
    align-self: flex-start;
}

.message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

[dir="rtl"] .message {
    direction: rtl;
}

[dir="rtl"] .message.user {
    flex-direction: row;
    align-self: flex-start;
}

[dir="rtl"] .message.bot {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    overflow: hidden;
}

.message-avatar.has-image {
    background: transparent;
    color: inherit;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bot-message-avatar {
    background: var(--chat-primary);
    color: var(--white);
}

.bot-message-avatar.has-image {
    background: transparent;
}

.user-message-avatar {
    background: var(--gray-200);
    color: var(--gray-700);
}

.user-message-avatar.has-image {
    background: transparent;
}

.message-content {
    flex: 1;
}

.message-bubble {
    padding: 0.85rem 1.15rem;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    line-height: 1.45;
    unicode-bidi: isolate;
}


.message.bot .message-bubble {
    background: #ffffff;
    color: var(--gray-800);
    border-bottom-left-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.message.user .message-bubble {
    background: var(--chat-primary);
    color: #ffffff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 10px rgba(157, 10, 14, 0.15);
}

/* Mobile: Adjust padding */
@media (max-width: 480px) {
    .message-bubble {
        padding: 0.65rem 0.9rem;
        font-size: 0.9rem;
        border-radius: 16px;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .message-bubble {
        padding: 0.7rem 0.95rem;
        font-size: 0.92rem;
    }
}

/* Already handled above */

.message-bubble:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.message-text {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: -0.011em;
    unicode-bidi: isolate;
    direction: inherit;
    text-align: start;
}


/* Clinical Info Card Utility */
.clinical-card {
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 0.75rem;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.clinical-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--chat-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clinical-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gray-900);
}

.message-time {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.message.bot .message-time {
    color: var(--gray-500);
}

.message.user .message-time {
    color: rgba(255, 255, 255, 0.8);
}

/* Enhanced Typing Indicator */
.typing-indicator {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.typing-indicator.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.typing-dots {
    display: flex;
    gap: 0.3rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gray-100);
}

.typing-dots::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.08), transparent);
    animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: typing 1.2s infinite ease-in-out;
    position: relative;
    z-index: 1;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    60%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }

    30% {
        transform: translateY(-6px) scale(1.1);
        opacity: 1;
    }
}

.typing-status {
    font-size: 0.75rem;
    color: var(--primary);
    font-style: italic;
    font-weight: 500;
    animation: pulse 2s infinite;
}

/* Response Area */
.response-handle {
    width: 40px;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin: -8px auto 12px auto;
    display: none;
}

@media (max-width: 768px) {
    .response-handle {
        display: block;
    }
}

.response-container {
    padding: 1.5rem;
    background: var(--white);
    border-top: 1px solid var(--gray-100);
    display: block;
    visibility: visible;
    min-height: auto;
    position: relative;
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    max-height: none;
    overflow-y: visible;
}

/* Mobile: Reduce padding and adjust height */
@media (max-width: 480px) {
    .response-container {
        padding: 1.25rem 1rem 1rem 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        min-height: 70px;
        max-height: 50vh;
        /* Prevent it from covering everything */
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    }
}

@media (max-width: 375px) {
    .response-container {
        padding: 1rem 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .response-label {
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .response-container {
        padding: 1.2rem;
        min-height: 75px;
        max-height: 100vh;
    }
}

.response-container::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--white));
    pointer-events: none;
}

.response-container.has-scroll-above::after {
    content: '↑ Scroll up to see more messages';
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gray-800);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0.8;
    animation: fadeInOut 3s ease-in-out;
    pointer-events: none;
}

@keyframes fadeInOut {

    0%,
    100% {
        opacity: 0;
    }

    20%,
    80% {
        opacity: 0.8;
    }
}

/* Toast System (Target 4) */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -100%);
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 10000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 320px;
    max-width: 90vw;
    border-inline-start: 5px solid var(--primary);
}

.toast-container.show {
    transform: translate(-50%, 0);
}

.toast-container.toast-success {
    border-color: #10b981;
}

.toast-container.toast-error {
    border-color: #ef4444;
}

.toast-container.toast-info {
    border-color: #3b82f6;
}

.toast-container i {
    font-size: 1.25rem;
}

.toast-success i {
    color: #10b981;
}

.toast-error i {
    color: #ef4444;
}

.toast-info i {
    color: #3b82f6;
}

.toast-message {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
}

.toast-close {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.toast-close:hover {
    color: var(--gray-700);
}

@media (max-width: 480px) {
    .toast-container {
        top: 20px;
        bottom: auto;
        min-width: auto;
        width: calc(100% - 40px);
    }
}


.response-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.response-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 40px;
    width: 100%;
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Mobile: Horizontal scroll for response buttons */
@media (max-width: 480px) {
    .response-options {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: hidden;
        overflow-y: auto;
        gap: 0.75rem;
        padding: 0.5rem 0 1rem 0;
    }

    .response-options::-webkit-scrollbar {
        display: none;
    }

    .response-btn {
        padding: 1rem 1.25rem;
        font-size: 0.95rem;
        width: 100%;
        min-height: 56px;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        border: 1.5px solid rgba(0, 0, 0, 0.04);
        border-radius: 18px;
        line-height: 1.4;
        color: var(--gray-800);
        font-weight: 500;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .response-btn:active {
        transform: scale(0.97);
        border-color: #3b82f6;
        /* Neutral blue instead of red */
        background: #f0f7ff;
    }
}


/* Scroll to Bottom Button */
.scroll-to-bottom {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--chat-primary);
    color: var(--white);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    opacity: 0;
    transform: translateY(10px);
}

.scroll-to-bottom.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.scroll-to-bottom:hover {
    background: var(--chat-secondary);
    transform: translateY(-3px);
}

/* Tablet: Allow wrapping */
@media (max-width: 768px) and (min-width: 481px) {
    .response-options {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
}

.response-btn {
    padding: 0.75rem 1.25rem;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 14px;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: start;
    width: 100%;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    gap: 0.75rem;
}

.response-btn:hover {
    border-color: var(--chat-primary);
    background: rgba(157, 10, 14, 0.02);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(157, 10, 14, 0.1);
}

.response-btn:focus {
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 4px rgba(157, 10, 14, 0.15);
    outline: none;
}

.response-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /*background: var(--chat-primary);*/
    transition: left 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.response-btn:hover,
.response-btn:active {
    border-color: #3b82f6;
    /* Neutral blue */
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    background: #f0f7ff;
}


.response-btn:hover::before,
.response-btn:active::before {
    left: 0;
}

/* Mobile touch feedback */
@media (hover: none) and (pointer: coarse) {
    .response-btn:active {
        transform: translateY(-1px) scale(0.98);
        box-shadow: var(--shadow-sm);
    }
}

/* Welcome Screen */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Start from top on mobile */
    height: 100%;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;

    overflow-y: auto;
    /* Changed from hidden to allow scrolling */
    /* Lock horizontal scroll */
    overflow-x: hidden;

    background-size: cover;
    background-position: center;

    background-blend-mode: overlay;
    scroll-behavior: smooth;
    position: relative;
}

.welcome-screen::-webkit-scrollbar {
    display: none;
}

/* Mobile: Adjust padding and spacing */
@media (max-width: 480px) {
    .welcome-screen {
        padding: 1rem;
        justify-content: center;
        padding-top: 1rem;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .welcome-screen {
        padding: 2rem 1.5rem;
    }
}

.welcome-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    background: white;
    padding: 15px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.welcome-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: floatingLogo 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.welcome-logo-img:hover {
    transform: scale(1.05);
}

@keyframes floatingLogo {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Global fix to ensure no red text or other overlays appear on images */
.role-icon::after {
    display: none !important;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    background: white;
    color: var(--gray-700);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50px;
    /* Modern pill style */
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.back-btn:hover {
    background: var(--gray-200);
    transform: translateX(-4px);
}

@media (max-width: 480px) {
    .back-btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
}

.welcome-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
    display: none;
}

.welcome-description {
    font-size: 1rem;
    color: var(--gray-600);
    max-width: 450px;
    margin-bottom: 2rem;
}

/* Role Selection */
.role-selection {
    width: 100%;
    max-width: 600px;
}

.role-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

@media (max-width: 480px) {
    .role-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
}

.role-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem;
    width: 100% !important;
    max-width: 600px;
    margin: 0 auto;
    overflow-y: auto;
    max-height: 100%;
}

@media (max-width: 768px) {
    .role-selection {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }

    .role-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Force 2 columns beside each other */
        align-content: start !important;
        /* Prevents rows from stretching */
        gap: 1rem !important;
        padding: 1rem !important;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        overflow-y: auto !important;
        /* Internal scroll */
        flex: 1;
        -webkit-overflow-scrolling: touch;
    }

    .role-card {
        padding: 0 !important;
        height: min-content !important;
        /* Fix: prevents cards from stretching tall */
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .role-icon {
        width: 100% !important;
        height: 140px !important;
        /* Fixed height for consistency */
        margin-bottom: 0 !important;
        border-radius: 12px 12px 0 0 !important;
        border: none !important;
        overflow: hidden;
        aspect-ratio: 1.2 / 1 !important;
        /* Consistent aspect ratio */
    }

    .role-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        object-position: center !important;
        /* Consistent cropping for both images */
    }

    .role-card:active {
        transform: scale(0.98);
        background: #fdfdfd;
    }

    .role-name {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
    }

    .scenario-card {
        padding: 0 !important;
    }
}

.role-card {
    padding: 0;
    /* Remove default padding for image flush */
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    /* Important for border-radius on children */
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.role-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(157, 10, 14, 0.05) 0%, rgba(241, 90, 34, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.role-card:hover {
    border-color: #d1d5db;
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.role-card:hover::before {
    opacity: 1;
}

.role-card.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}


.role-icon {
    width: 100%;
    height: clamp(140px, 20vw, 200px);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0;
    background-color: #f3f4f6;
    border: none;
    background-size: cover;
    background-position: center;
    position: relative;
    /* Font size 0 and color transparent to hide any accidental text nodes */
    font-size: 0 !important;
    color: transparent !important;
}

.role-icon img {
    width: 100% !important;
    height: 100% !important;
    object-position: center !important;
    border-radius: 0 !important;
    /* Forces rectangular cover image with consistent sizing */
    min-height: 140px;
    max-height: 200px;
}

.role-name {
    padding: 0.85rem 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
}

.role-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

.role-skeletons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.role-skeleton-card {
    height: 180px;
    border-radius: 16px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Mobile: Horizontal scroll (default for all mobile sizes) */
.scenario-selector {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 1rem;
    /* Added horizontal padding to prevent cards from being cut off */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scenario-selector::-webkit-scrollbar {
    display: none;
}

/* Desktop: Horizontal Scroll for scenarios */
@media (min-width: 769px) {
    .scenario-selector {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 1.5rem;
        width: 100%;
        max-width: 850px;
        /* Wider container for 2 large cards */
        margin: 0 auto 1.5rem auto;
        padding: 1.5rem 2rem;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        min-height: 400px;
    }
}

.scenario-selector-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    /* Slightly larger */
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--chat-primary);
    /* More visible border */
    color: var(--chat-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    /* Ensure on top */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    /* More prominent shadow */
    font-size: 18px;
    /* Larger icon */
    font-weight: 900;
}

.scroll-arrow:hover {
    background: var(--chat-primary);
    color: var(--white);
    border-color: var(--chat-primary);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 12px 24px rgba(157, 10, 14, 0.25);
}

.scroll-arrow:active {
    transform: translateY(-50%) scale(0.9);
}

.scroll-arrow.prev {
    inset-inline-start: -25px;
}

.scroll-arrow.next {
    inset-inline-end: -25px;
}


@media (max-width: 900px) {
    .scroll-arrow.prev {
        left: 10px;
        /* More visible on smaller screens */
    }

    .scroll-arrow.next {
        right: 10px;
        /* More visible on smaller screens */
    }
}

/* Show arrows on all screen sizes - FIXED */
@media (max-width: 768px) {
    .scroll-arrow {
        display: flex !important;
        /* Force show on mobile */
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .scroll-arrow.prev {
        inset-inline-start: 8px;
    }

    .scroll-arrow.next {
        inset-inline-end: 8px;
    }


    .scenario-selector {
        padding: 1rem 60px !important;
        /* Add padding for arrow space */
    }
}

.scenario-selector::-webkit-scrollbar {
    height: 6px;
}

.scenario-selector::-webkit-scrollbar-track {
    background: transparent;
}

.scenario-selector::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 999px;
}

.scenario-selector::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

[dir="rtl"] .scenario-selector {
    direction: rtl;
}

.scenario-card {
    padding: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: left;
    scroll-snap-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    outline: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
}

.scenario-ref-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chat-primary);
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.scenario-ref-icon:hover {
    transform: scale(1.1);
    background: white;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

[dir="rtl"] .scenario-ref-icon {
    inset-inline-end: auto;
    inset-inline-start: 15px;
}


#reference-modal .score-content {
    max-width: 600px;
    width: 90%;
    border-radius: 24px;
    padding: 2.5rem;
}

#reference-modal .score-icon {
    background: linear-gradient(135deg, var(--chat-primary) 0%, var(--chat-secondary) 100%);
    color: white;
    width: 70px;
    height: 70px;
    font-size: 2rem;
}

#reference-modal .reference-body {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

#reference-modal .reference-body::-webkit-scrollbar {
    width: 6px;
}

#reference-modal .reference-body::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 10px;
}

/* Mobile: Horizontal scroll card sizing with fixed page */
@media (max-width: 768px) {
    .scenario-selection {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 400px;
        width: 100%;
        overflow: visible;
    }

    .back-btn {
        flex-shrink: 0;
        margin-top: 5px;
    }

    .scenario-title {
        flex-shrink: 0;
        margin-bottom: 0.5rem !important;
    }

    .scenario-selector {
        display: flex !important;
        flex-direction: row !important;
        /* BACK TO HORIZONTAL */
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory;
        padding: 1rem 10vw !important;
        /* Space for centering first/last cards */
        gap: 1.25rem !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        align-items: stretch;
        /* Center cards vertically in the row */
    }

    .scenario-selector::-webkit-scrollbar {
        display: none;
    }

    .scenario-card {
        min-width: 280px;
        max-width: 85vw;
        width: 80vw;
        flex-shrink: 0;
        scroll-snap-align: center;
        border-radius: 24px;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 280px;
        /* Ensure space for title */
        overflow: hidden;
    }

    .scenario-image {
        height: 200px !important;
        width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        flex-shrink: 0;
        object-fit: cover;
    }

    .scenario-info {
        padding: 1.25rem 1.5rem !important;
        background: white;
        flex-shrink: 0;
        /* Don't squash the title area */
        min-height: 80px;
        display: flex;
        align-items: center;
    }

    .scenario-card .scenario-title {
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        color: #1a202c !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
        display: block !important;
        text-align: start;
    }


    .scenario-desc {
        display: block !important;
    }

    .welcome-icon {
        margin-top: 10px;
        flex-shrink: 0;
    }
}

/* Desktop: Vertical Card Layout (Image Top, Text Bottom) */
@media (min-width: 769px) {
    .scenario-card {
        flex-direction: column !important;
        flex: 0 0 calc(45% - 1rem) !important;
        width: auto !important;
        height: 100%;
        /* Increased to fit title comfortably */
        padding: 0;
        align-items: stretch;
        border-radius: 24px;
        scroll-snap-align: center;
        flex-shrink: 0 !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .scenario-image {
        width: 100% !important;

        /* Slightly adjusted */
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        flex-shrink: 0;
    }

    .scenario-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-inline: 1.5rem !important;
        padding-block: 1.25rem !important;
        text-align: start;
        background: white;
        min-height: 90px;
        flex-shrink: 0;
    }


    .scenario-card .scenario-title {

        font-size: 1.4rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        color: #1a202c !important;
        line-height: 1.2 !important;
    }

    .scenario-desc {
        display: block !important;
    }
}

.scenario-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.scenario-card.selected {
    border-color: transparent;
    background: var(--chat-primary);
    color: var(--white);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.scenario-card.selected .scenario-desc {
    opacity: 0.9;
}

.scenario-card.selected .scenario-icon,
.scenario-card.selected .scenario-title {
    color: var(--white);
}

.scenario-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    border-color: var(--gray-200);
}

.scenario-card .scenario-badge {
    display: inline-block;
    margin-block-start: 0.5rem;
    background: var(--gray-100);
    color: var(--gray-700);
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-inline-start: 1.25rem;
    margin-block-end: 1.25rem;
}


.scenario-icon {
    font-size: 1.5rem;
    margin-block-end: 0.5rem;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
}


.scenario-icon-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.scenario-image {
    width: 100%;
    height: 180px;
    /* Increased height to show more of the face */
    margin: 0;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: var(--gray-100);
}

.scenario-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Focus on faces to prevent head cropping */
    display: block;
}

/* News Bar / Disclaimer Bar Styles */
.news-bar {
    width: 100%;
    background: #f8fafc;
    border-top: 1px solid var(--gray-200);
    padding: 0.6rem 0;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.news-bar-content {
    display: inline-flex;
    white-space: nowrap;
    animation: newsTicker 95s linear infinite;
    gap: 3rem;
    padding-inline-start: 100%;
}

.news-bar-text {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

.news-bar-text b {
    color: var(--gray-700);
    font-weight: 700;
}

.news-bar:hover .news-bar-content {
    animation-play-state: paused;
}

@keyframes newsTicker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Mobile: Responsive scenario image */
@media (max-width: 480px) {
    .scenario-image {
        height: clamp(80px, 20vw, 120px);
        margin: 0;
    }
}

.scenario-selection {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scenario-selection::-webkit-scrollbar {
    display: none;
}

/* Tablet: Responsive scenario image */
@media (min-width: 481px) and (max-width: 768px) {
    .scenario-image {
        height: clamp(100px, 22vw, 140px);
    }
}

/* Desktop: Responsive scenario image */
@media (min-width: 769px) {
    .scenario-image {
        height: clamp(120px, 25vw, 180px);
    }
}

.scenario-skeletons {
    display: none;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.scenario-skeleton-card {
    height: 160px;
    border-radius: 18px;
    flex: 0 0 240px;
}

.skeleton-line {
    width: 180px;
    height: 14px;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.skeleton-message {
    opacity: 1;
    pointer-events: none;
}

.skeleton-message .message-bubble {
    background: var(--gray-100);
    min-width: 200px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.scenario-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--gray-900);
    padding: 1rem 1.25rem 0.25rem 1.25rem;
}

.scenario-desc {
    padding-inline: 1.25rem;
    padding-block-end: 1rem;
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.4;
    flex-grow: 1;
    text-align: start;
}


.scenario-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Mobile: Responsive text sizes */
@media (max-width: 480px) {
    .scenario-title {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
        padding: 1rem 1rem 0.25rem 1rem;
    }

    .scenario-desc {
        font-size: 0.8rem;
        padding: 0 1rem 1rem 1rem;
    }
}

/* Tablet: Responsive text sizes */
@media (min-width: 481px) and (max-width: 768px) {
    .scenario-title {
        font-size: 0.98rem;
        padding: 1.1rem 1.1rem 0.4rem 1.1rem;
    }

    .scenario-desc {
        font-size: 0.82rem;
        padding: 0 1.1rem 1.1rem 1.1rem;
    }
}

.start-btn {
    padding: 0.75rem 1.5rem;
    background: var(--chat-primary);
    color: var(--white);
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.start-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Score Modal - Enhanced Responsive Design */
.score-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    z-index: 1000;
    animation: fadeIn 0.4s ease;
    padding: 1rem;
    overflow-y: auto;
}

.score-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.score-content {
    background: var(--white);
    border-radius: 24px;
    padding: 3rem;
    max-width: 650px;
    width: 95%;
    min-height: 600px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-2xl);
    animation: slideInUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    position: relative;
    border: 1px solid var(--gray-100);
}

/* Mobile: Adjust padding and sizing */
@media (max-width: 480px) {
    .score-content {
        padding: 1.5rem 1rem;
        border-radius: 16px;
        min-height: auto;
        max-height: 90vh;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .score-content {
        padding: 2rem 1.5rem;
        border-radius: 20px;
        min-height: auto;
        max-height: 88vh;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.score-icon {
    width: 80px;
    height: 80px;
    background: var(--chat-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 2rem;
    margin: 0 auto 1.5rem;
    animation: celebrationBounce 2s ease-in-out infinite;
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.3);
    will-change: transform;
    padding: 15px;
}

@keyframes celebrationBounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.1);
    }
}

.score-title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.score-value {
    font-size: clamp(3rem, 15vw, 4.5rem);
    font-weight: 900;
    background: var(--chat-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 1.5rem 0;
    line-height: 1;
    text-shadow: 0 4px 8px rgba(5, 150, 105, 0.2);
    transition: all 0.5s ease;
}

/* Score level styling */
.score-value.score-excellent {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.score-value.score-great {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.score-value.score-good {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.score-value.score-fair {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.score-value.score-poor {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.score-message {
    color: var(--gray-700);
    margin-block-end: 2rem;
    line-height: 1.7;
    font-size: 1.1rem;
    max-width: 500px;
    margin-inline: auto;
    font-weight: 500;
    white-space: pre-wrap;
    text-align: start;
    display: inline-block;
}


.score-legend {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem auto 1.5rem auto;
    max-width: 400px;
    text-align: left;
}

.score-legend-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.95rem;
}

.score-legend-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.score-legend-item:first-child {
    padding-top: 0;
}

.legend-range {
    font-weight: 600;
    color: var(--gray-700);
}

.legend-label {
    font-weight: 500;
}

.score-duration-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gray-100);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: var(--gray-600);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.score-duration-wrap i {
    color: var(--chat-primary);
}

.score-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Mobile: Stack stats vertically or 2 columns */
@media (max-width: 480px) {
    .score-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .score-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
        margin-bottom: 2rem;
    }
}

.stat-item {
    padding: 1.75rem 1.25rem;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    border-radius: 18px;
    border: 1px solid var(--gray-100);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--chat-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.stat-item:hover::before {
    opacity: 1;
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: var(--gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.score-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* Mobile: Stack buttons vertically */
@media (max-width: 480px) {
    .score-actions {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .score-actions {
        gap: 1.2rem;
        margin-top: 1.8rem;
    }
}

.btn {
    padding: 1rem 2rem;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    min-width: 140px;
    justify-content: center;
    min-height: 48px;
}

/* Mobile: Full width buttons */
@media (max-width: 480px) {
    .btn {
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
        width: 100%;
        min-width: auto;
        min-height: 44px;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .btn {
        padding: 0.95rem 1.75rem;
        font-size: 0.98rem;
        min-height: 46px;
    }
}

.btn-primary {
    background: var(--chat-primary);
    color: var(--white);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-200);
}

/* Tag Breakdown Styles */
.insight-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-200);
}

.insight-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.insight-title i {
    color: var(--primary);
}

.tag-breakdown-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.tag-breakdown-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

/* Tag Performance Colors - Based on Performance Level */

/* Excellent Performance (85%+) - Green */
.tag-breakdown-item.tag-excellent,
.tag-breakdown-item[data-performance="excellent"] {
    border-left: 4px solid #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.tag-breakdown-item.tag-excellent .tag-percentage,
.tag-breakdown-item[data-performance="excellent"] .tag-percentage {
    color: #065f46;
}

/* Good Performance (70-84%) - Blue */
.tag-breakdown-item.tag-good,
.tag-breakdown-item[data-performance="good"] {
    border-left: 4px solid #3b82f6;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.tag-breakdown-item.tag-good .tag-percentage,
.tag-breakdown-item[data-performance="good"] .tag-percentage {
    color: #1e40af;
}

/* Fair Performance (50-69%) - Amber/Orange */
.tag-breakdown-item.tag-fair,
.tag-breakdown-item[data-performance="fair"] {
    border-left: 4px solid #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.tag-breakdown-item.tag-fair .tag-percentage,
.tag-breakdown-item[data-performance="fair"] .tag-percentage {
    color: #92400e;
}

/* Poor Performance (<50%) - Red */
.tag-breakdown-item.tag-poor,
.tag-breakdown-item[data-performance="poor"] {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
}

.tag-breakdown-item.tag-poor .tag-percentage,
.tag-breakdown-item[data-performance="poor"] .tag-percentage {
    color: #991b1b;
}

.tag-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.tag-info {
    flex: 1;
}

.tag-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.25rem;
}

/* Tag name colors based on performance level */
.tag-header-3col {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 0;
    min-height: 80px;
}

.tag-col-info {
    flex: 2.5;
    padding-right: 1.5rem;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tag-col-score {
    flex: 1;
    text-align: center;
    padding: 0 1.5rem;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tag-score-label {
    font-size: 0.95rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.tag-col-action {
    flex: 1.5;
    text-align: center;
    padding-left: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

[dir="rtl"] .tag-col-info {
    padding-right: 0;
    padding-left: 1.5rem;
    border-right: none;
    border-left: 1px solid var(--gray-200);
}

[dir="rtl"] .tag-col-score {
    border-right: none;
    border-left: 1px solid var(--gray-200);
}

[dir="rtl"] .tag-col-action {
    padding-left: 0;
    padding-right: 1.5rem;
}

.tag-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
}

.tag-link-btn:hover {
    background: rgba(5, 150, 105, 0.1);
    border-color: rgba(5, 150, 105, 0.2);
    color: var(--primary-dark);
}

.tag-link-btn i {
    margin-left: 0.5rem;
    font-size: 0.85em;
    transition: transform 0.2s ease;
}

.tag-link-btn:hover i {
    transform: translateX(3px);
}

[dir="rtl"] .tag-link-btn i {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .tag-link-btn:hover i {
    transform: translateX(-3px);
}

/* Tag name colors based on performance level */
.tag-breakdown-item.tag-excellent .tag-name {
    color: #065f46;
}

.tag-breakdown-item.tag-good .tag-name {
    color: #1e40af;
}

.tag-breakdown-item.tag-fair .tag-name {
    color: #92400e;
}

.tag-breakdown-item.tag-poor .tag-name {
    color: #991b1b;
}

.tag-link {
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.tag-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.tag-link i {
    font-size: 0.875rem;
    opacity: 0.7;
}

.tag-description {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin: 0;
}

.tag-score {
    text-align: right;
    flex-shrink: 0;
}

.tag-percentage {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-800);
    display: block;
}

.tag-responses {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-weight: 500;
}

.tag-breakdown-bars {
    margin-top: 1rem;
}

.breakdown-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin-bottom: 0.75rem;
}

.bar-segment {
    height: 100%;
    transition: all 0.3s ease;
}

.bar-segment.good {
    background: #10b981;
}

.bar-segment.medium {
    background: #3b82f6;
}

.bar-segment.bad {
    background: #ef4444;
}

.breakdown-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
}

.legend-item::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-item.good::before {
    background: #10b981;
}

.legend-item.medium::before {
    background: #3b82f6;
}

.legend-item.bad::before {
    background: #ef4444;
}

.legend-item.good {
    color: #065f46;
}

.legend-item.medium {
    color: #1e40af;
}

.legend-item.bad {
    color: #991b1b;
}

/* Responsive Tag Breakdown Styles */
@media (max-width: 768px) {
    .tag-header {
        flex-direction: column;
        gap: 1rem;
    }

    .tag-score {
        text-align: left;
    }

    .tag-percentage {
        font-size: 1.25rem;
    }

    .breakdown-legend {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .tag-breakdown-item {
        padding: 1rem;
    }

    .insight-section {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    .tag-name {
        font-size: 1rem;
    }

    .tag-description {
        font-size: 0.85rem;
    }

    .breakdown-legend {
        font-size: 0.8rem;
    }

    .legend-item::before {
        width: 10px;
        height: 10px;
    }

    /* Enhanced mobile styles for small screens */
    .app-container {
        padding: 0;
        border-radius: 0;
    }

    .chat-header {
        padding: 0.75rem 1rem;
    }

    .bot-name {
        font-size: 0.95rem;
    }

    .header-btn {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .messages-area {
        padding: 0.5rem;
    }

    .message-bubble {
        padding: 0.65rem 0.9rem;
        font-size: 0.85rem;
        max-width: calc(100vw - 100px);
    }

    .message-time {
        font-size: 0.6rem;
        margin-top: 0.25rem;
    }

    .response-container {
        padding: 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .response-btn {
        padding: 0.9rem 1rem;
        font-size: 0.85rem;
        min-height: 48px;
        text-align: left;
    }

    .welcome-screen {
        padding: 0.75rem;
    }

    .welcome-title {
        font-size: 1.25rem;
    }

    .welcome-description {
        font-size: 0.85rem;
    }

    .scenario-card {
        padding: 0.75rem;
    }

    .scenario-title {
        font-size: 0.95rem;
    }

    .scenario-desc {
        font-size: 0.8rem;
    }

    .start-btn {
        padding: 0.9rem 1.25rem;
        font-size: 0.85rem;
    }
}

/* Insight Section - Enhanced Responsive Design */
.insight-section {
    margin-top: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
    border-radius: 18px;
    border: 1px solid var(--gray-100);
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    text-align: left;
}

.insight-section:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.insight-title {
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-title i {
    color: var(--primary);
    background: rgba(5, 150, 105, 0.1);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.insight-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: var(--gray-600);
    background: var(--white);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--gray-100);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: 70px;
}

.insight-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--chat-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.insight-item:hover {
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.insight-item:hover::before {
    opacity: 1;
}

.insight-item:last-child {
    margin-bottom: 0;
}

.insight-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--gray-700);
    flex: 1;
}

.insight-icon {
    color: var(--primary);
    background: rgba(5, 150, 105, 0.12);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.insight-item:hover .insight-icon {
    background: var(--primary);
    color: var(--white);
    transform: scale(1.1);
}

.insight-metrics {
    text-align: right;
    font-size: 0.95rem;
    color: var(--gray-500);
    font-weight: 500;
    line-height: 1.5;
}

.insight-metrics div:first-child {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

/* Mobile Responsive for Insight Section */
@media (max-width: 768px) {
    .insight-section {
        padding: 1.25rem;
        margin-top: 1.25rem;
    }

    .insight-title {
        font-size: 0.9rem;
        margin-bottom: 0.875rem;
    }

    .insight-item {
        padding: 1rem;
        gap: 0.75rem;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .insight-label {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .insight-metrics {
        width: 100%;
        text-align: left;
        font-size: 0.8rem;
    }

    .insight-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .insight-section {
        padding: 1rem;
        border-radius: 12px;
    }

    .insight-title {
        font-size: 0.85rem;
        gap: 0.5rem;
    }

    .insight-title i {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .insight-item {
        padding: 0.875rem;
        border-radius: 10px;
    }

    .insight-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
}

/* Toast Notification */
.toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(15, 23, 42, 0.92);
    color: var(--white);
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2000;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.toast-success {
    background: var(--success);
}

.toast.toast-error {
    background: var(--danger);
}

.toast.toast-warning {
    background: var(--warning);
    color: var(--gray-900);
}

/* Analytics Styles */
.analytics-header {
    padding: 1.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
}

.analytics-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.analytics-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.analytics-actions {
    display: flex;
    gap: 0.75rem;
}

.analytics-export-btn {
    padding: 0.75rem 1.5rem;
    background: var(--chat-primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
}

.analytics-export-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: var(--primary-dark);
}

.analytics-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--gray-50);
}

/* Documentation Styles */
.docs-header {
    padding: 1.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.docs-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.docs-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    background: var(--white);
}

/* Mobile Text Wrapping and Layout Fixes */
.message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    white-space: pre-wrap;
}

.response-btn {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    text-overflow: ellipsis;
    text-align: left;
}

/* Ensure proper mobile viewport handling */
@supports (-webkit-touch-callout: none) {
    .app-container {
        height: -webkit-fill-available;
    }
}

/* Enhanced Mobile Responsive */
@media (max-width: 768px) {
    body {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .app-container {
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        max-width: 100%;
        margin: 0 !important;
        padding-top: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .tab-content.active {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .chat-header {
        border-radius: 0 !important;
        margin-top: 0 !important;
        padding-top: 0.75rem !important;
    }

    .tab-navigation {
        padding: 0.5rem;
    }

    .tab-btn {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    .chat-header {
        padding: 1rem;
        flex-wrap: wrap;
    }

    .header-left {
        flex: 1;
        min-width: 200px;
    }

    .bot-avatar {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .bot-name {
        font-size: 1rem;
    }

    .bot-status {
        font-size: 0.75rem;
    }

    .header-actions {
        gap: 0.25rem;
    }

    .header-btn {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .messages-area {
        padding: 0.75rem;
        padding-bottom: 2rem;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        min-height: 0;
    }

    .message {
        max-width: 85%;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .message.bot {
        align-self: flex-start;
    }

    .message.user {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

    .message-avatar {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    .message-bubble {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: calc(100vw - 120px);
    }

    .message.bot .message-bubble {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 18px 18px 18px 4px;
    }

    .message.user .message-bubble {
        background: var(--gradient);
        color: var(--white);
        border-radius: 18px 18px 4px 18px;
    }

    .message-time {
        font-size: 0.65rem;
    }

    .welcome-screen {
        padding: 1rem;
    }

    .welcome-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .welcome-title {
        font-size: 1.5rem;
    }

    .welcome-description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .response-container {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        background: var(--white);
        border-top: 2px solid var(--gray-100);
        position: sticky;
        bottom: 0;
        z-index: 100;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }

    .response-label {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--gray-700);
    }

    .response-options {
        gap: 0.75rem;
        flex-direction: column;
        max-height: 35vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .response-btn {
        padding: 1rem 1.25rem;
        font-size: 0.9rem;
        line-height: 1.5;
        width: 100%;
        text-align: left;
        min-height: 52px;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        transition: all 0.2s ease;
        border: 1px solid var(--gray-200);
        background: var(--white);
        color: var(--gray-800);
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .response-btn:hover,
    .response-btn:active {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
        background: var(--primary);
        color: var(--white);
    }

    .scenario-selector {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.5rem 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .scenario-card {
        min-width: 200px;
        max-width: 280px;
        flex-shrink: 0;
        padding: 1rem;
        text-align: center;
        scroll-snap-align: start;
    }

    .start-btn {
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center;
    }

    .typing-indicator {
        padding: 0.5rem 0;
    }

    .typing-dots {
        padding: 0.5rem 0.75rem;
    }

    .score-modal {
        padding: 1rem;
        align-items: center;
        justify-content: center;
    }

    .score-content {
        width: 100%;
        max-width: none;
        padding: 2.5rem 2rem;
        margin: 0;
        border-radius: 20px;
        max-height: 90vh;
        overflow-y: auto;
        min-height: auto;
    }

    .score-icon {
        width: 75px;
        height: 75px;
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    .score-title {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }

    .score-value {
        font-size: 3.5rem;
        margin: 1rem 0;
    }

    .score-message {
        font-size: 1rem;
        margin-bottom: 2rem;
        line-height: 1.6;
        white-space: pre-wrap;
    }

    .score-stats {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 2rem;
    }

    .stat-item {
        padding: 1.5rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        min-height: 80px;
    }

    .stat-value {
        font-size: 1.75rem;
        margin-bottom: 0;
    }

    .stat-label {
        font-size: 0.9rem;
    }

    .score-actions {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
    }

    .btn {
        width: 100%;
        justify-content: center;
        padding: 1.25rem 1.5rem;
        font-size: 1.05rem;
        border-radius: 12px;
        min-height: 50px;
    }

    .insight-section {
        padding: 1.75rem;
        margin-top: 1.75rem;
    }

    .insight-title {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .insight-item {
        padding: 1.25rem;
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        min-height: 80px;
    }

    .insight-label {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .insight-metrics {
        width: 100%;
        text-align: left;
        font-size: 0.9rem;
    }

    .insight-icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .analytics-header,
    .docs-header {
        padding: 1rem;
    }

    .analytics-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .analytics-export-btn {
        width: 100%;
        justify-content: center;
    }

    .analytics-header-top {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .toast {
        right: 1rem;
        left: 1rem;
        bottom: 1rem;
        padding: 0.75rem 1rem;
        display: none;
    }

    .docs-content {
        padding: 1rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .app-container {
        min-height: 100vh;
        min-height: 100dvh;
    }



    .response-container {
        padding: 0.75rem;
        padding-bottom: 1.5rem;
        /*position: fixed;*/
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white);
        border-top: 2px solid var(--primary);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        z-index: 1000;
    }

    .messages-area {
        padding-bottom: 120px;
    }

    .response-btn {
        padding: 1rem;
        font-size: 0.85rem;
        min-height: 44px;
        border-radius: 10px;
    }

    .tab-btn {
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }

    .chat-header {
        padding: 0.75rem;
    }

    .messages-area {
        padding: 0.5rem;
    }

    .response-container {
        padding: 0.75rem;
    }

    .welcome-screen {
        padding: 0.75rem;
    }

    .welcome-title {
        font-size: 1.25rem;
    }

    .scenario-card {
        padding: 0.75rem;
    }

    .response-btn {
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    /* Score Modal for Extra Small Devices */
    .score-modal {
        padding: 0.5rem;
        align-items: center;
        justify-content: center;
    }

    .score-content {
        border-radius: 16px;
        height: auto;
        max-height: 95vh;
        min-height: auto;
        padding: 2rem 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .score-icon {
        width: 65px;
        height: 65px;
        font-size: 1.6rem;
        margin-bottom: 1.25rem;
    }

    .score-title {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .score-value {
        font-size: 3rem;
        margin: 1rem 0;
    }

    .score-message {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

    .score-stats {
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-item {
        padding: 1.25rem 1rem;
        border-radius: 14px;
        min-height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    .score-actions {
        gap: 1rem;
        margin-top: 1rem;
    }

    .btn {
        padding: 1rem 1.25rem;
        font-size: 0.95rem;
        border-radius: 12px;
        min-height: 48px;
    }

    .insight-section {
        padding: 1.5rem;
        margin-top: 1.5rem;
    }

    .insight-title {
        font-size: 0.95rem;
        gap: 0.5rem;
    }

    .insight-title i {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }

    .insight-item {
        padding: 1rem;
        border-radius: 12px;
        min-height: 70px;
    }

    .insight-icon {
        width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
}

/* Loading and Warning Messages */
.loading {
    text-align: center;
    padding: 20px;
    color: var(--gray-600);
    font-style: italic;
}

.warning-message {
    background: #fff3cd;
    color: #856404;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    text-align: center;
    border: 1px solid #ffeaa7;
    font-size: 0.9rem;
}

.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 1s ease-in-out infinite;
    margin-inline-start: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================
   CLEANUP: Removed redundant duplicate sections
   ============================================ */

/* Scenario Skeletons */
.scenario-skeletons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1.5rem;
    overflow: hidden;
    padding: 1rem 2rem;
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
}

.scenario-skeleton-card {
    min-width: 280px;
    height: 300px;
    border-radius: 20px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .scenario-skeletons {
        padding: 1rem 5vw;
    }

    .scenario-skeleton-card {
        min-width: 240px;
        height: 260px;
    }
}

/* Reference notes text button */
.header-text-btn {
    width: auto;
    min-width: unset;
    padding: 0 1rem;
    border-radius: 22px;
    font-weight: 600;
    font-size: 0.9rem;
    gap: 0.5rem;
}

/* Premium Language Selection Layout */
#language-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    max-width: 320px !important;
    margin: 0 auto 2rem auto !important;
}

#language-cards .role-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1rem 1.75rem !important;
    background: var(--white) !important;
    border: 2px solid transparent !important;
    border-radius: 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    height: auto !important;
}

#language-cards .role-card:before {
    display: none !important;
}

#language-cards .role-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(157, 10, 14, 0.4) !important;
}

#language-cards .role-card[data-lang="ar"] {
    flex-direction: row-reverse !important;
}

#language-cards .role-icon {
    width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    background: transparent !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    border: 2px solid white !important;
}

#language-cards .role-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
}

#language-cards .role-name {
    padding: 0 0 0 1.5rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    color: var(--gray-800) !important;
    flex-grow: 1 !important;
}

#language-cards .role-card[data-lang="ar"] .role-name {
    padding: 0 1.5rem 0 0 !important;
    text-align: right !important;
}

@media (max-width: 480px) {
    #language-cards {
        max-width: 280px !important;
    }

    #language-cards .role-card {
        padding: 0.85rem 1.5rem !important;
    }

    #language-cards .role-icon {
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    #language-cards .role-name {
        font-size: 1.15rem !important;
    }
}
/* Modern mobile chat polish */
.chat-container, .chat-card, .message-bubble, .response-option { border-radius: 22px; }
.response-option, .chat-input button { min-height: 46px; }
@media (max-width: 768px) {
    body { overflow-x: hidden; }
    .chat-container, .chat-wrapper, .main-chat { width: 100% !important; max-width: 100% !important; }
    .chat-header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); }
    .messages-container, .chat-messages { padding: .85rem !important; }
    .message-bubble { max-width: 92% !important; font-size: .95rem; }
    .response-options { display: grid !important; grid-template-columns: 1fr !important; gap: .65rem !important; }
    .response-option { width: 100%; text-align: start; padding: .85rem 1rem; }
    .chat-input, .input-area { position: sticky; bottom: 0; z-index: 20; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); }
}

/* =========================================================
   Client UI Refresh v3 - modern chat conversation
   Brand colors: ShingChat red/orange.
   ========================================================= */
:root {
    --chat-primary: #9d0a0e;
    --chat-secondary: #f15a22;
    --chat-gradient: linear-gradient(135deg, #9d0a0e 0%, #d71921 46%, #f15a22 100%);
    --chat-soft: rgba(157,10,14,.08);
    --chat-soft-2: rgba(241,90,34,.10);
}
body {
    background-color: #fff7f4 !important;
    background-image:
        radial-gradient(circle at 10% 2%, rgba(241,90,34,.24), transparent 32%),
        radial-gradient(circle at 90% 8%, rgba(157,10,14,.20), transparent 28%),
        url('../../img/bgg.png') !important;
    background-blend-mode: normal, normal, soft-light;
}
.app-container {
    max-width: 920px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 30px 90px rgba(82,18,18,.22);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
}
.chat-header {
    background:
        linear-gradient(135deg, rgba(157,10,14,.96), rgba(215,25,33,.95) 48%, rgba(241,90,34,.95)) !important;
    color: #fff;
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    min-height: 74px;
    box-shadow: 0 14px 34px rgba(157,10,14,.24);
}
.bot-avatar {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 16px;
    padding: .35rem;
}
.bot-logo-img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.16)); }
.bot-name,
.bot-status,
.bot-status .status-dot + * {
    color: #fff !important;
}
.bot-status { opacity: .9; }
.status-dot {
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52,211,153,.15);
}
.language-selector,
.header-btn {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow: none !important;
}
.language-selector option { color: #111827; }
.header-btn:hover,
.language-selector:hover {
    background: rgba(255,255,255,.26) !important;
    color: #fff !important;
}
.messages-area {
    background-image:
        linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.86)),
        url('../../img/chatttbackground.png') !important;
    background-size: cover, 360px auto;
    background-position: center, center;
    padding: 1.4rem 1.6rem 2rem;
}
.message { max-width: min(78%, 680px); }
.message-avatar {
    width: 38px;
    height: 38px;
    box-shadow: 0 10px 20px rgba(15,23,42,.10);
}
.bot-message-avatar {
    background: #fff;
    border: 2px solid rgba(157,10,14,.10);
}
.user-message-avatar {
    background: var(--chat-gradient);
    color: #fff;
}
.message-bubble {
    border-radius: 24px;
    padding: .95rem 1.15rem;
    box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.message.bot .message-bubble {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(157,10,14,.08) !important;
    border-bottom-left-radius: 8px;
}
.message.user .message-bubble {
    background: var(--chat-gradient) !important;
    border-bottom-right-radius: 8px;
    box-shadow: 0 14px 32px rgba(157,10,14,.22) !important;
}
.message-text { letter-spacing: -.006em; }
.typing-indicator {
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(157,10,14,.08);
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08);
}
.typing-dot { background: var(--chat-secondary) !important; }
.response-container {
    background: rgba(255,255,255,.92) !important;
    border-top: 1px solid rgba(157,10,14,.10) !important;
    box-shadow: 0 -20px 45px rgba(99,23,23,.10);
    backdrop-filter: blur(18px);
}
.response-handle {
    background: rgba(157,10,14,.22) !important;
}
.response-label {
    color: #7f1d1d !important;
    font-weight: 800;
}
.response-btn,
.response-option {
    border-radius: 18px !important;
    border: 1px solid rgba(157,10,14,.12) !important;
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: 0 12px 26px rgba(99,23,23,.07) !important;
    min-height: 52px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.response-btn:hover,
.response-option:hover {
    border-color: rgba(241,90,34,.38) !important;
    box-shadow: 0 18px 38px rgba(99,23,23,.11) !important;
    transform: translateY(-2px);
}
.response-btn:active,
.response-option:active {
    transform: scale(.985);
    background: #fff7f4 !important;
}
.welcome-screen {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(157,10,14,.08);
    border-radius: 28px;
    box-shadow: 0 18px 50px rgba(99,23,23,.07);
}
.welcome-title,
.role-title,
.scenario-title {
    letter-spacing: -.035em;
}
.role-card,
.scenario-card {
    border-radius: 22px !important;
    border: 1px solid rgba(157,10,14,.12) !important;
    box-shadow: 0 14px 36px rgba(99,23,23,.07) !important;
    overflow: hidden;
}
.role-card:hover,
.scenario-card:hover {
    border-color: rgba(241,90,34,.34) !important;
    transform: translateY(-4px) !important;
}
.role-card.selected,
.scenario-card.selected {
    background: var(--chat-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.role-card.selected .role-name,
.scenario-card.selected .scenario-title,
.scenario-card.selected .scenario-desc { color: #fff !important; }
.scroll-to-bottom {
    background: var(--chat-gradient) !important;
    box-shadow: 0 14px 30px rgba(157,10,14,.22) !important;
}
.score-content {
    border-radius: 28px !important;
    border: 1px solid rgba(157,10,14,.10);
    box-shadow: 0 30px 80px rgba(99,23,23,.22) !important;
}
.score-icon,
.btn-primary {
    background: var(--chat-gradient) !important;
}
@media (max-width: 768px) {
    .app-container {
        border-radius: 0 !important;
        border: 0;
        box-shadow: none;
        max-width: none;
    }
    .chat-header {
        border-radius: 0 !important;
        min-height: 64px;
        padding: .75rem .85rem !important;
    }
    .bot-avatar { width: 42px; height: 42px; border-radius: 14px; }
    .bot-name { font-size: .95rem; }
    .bot-status { font-size: .7rem; }
    .header-actions { gap: .45rem; }
    .language-selector { max-width: 82px; padding: .45rem .55rem; }
    .header-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
    .messages-area { padding: .95rem .85rem 1.1rem !important; }
    .message { max-width: 94% !important; }
    .message-avatar { width: 32px; height: 32px; }
    .message-bubble { border-radius: 20px; padding: .82rem .95rem; }
    .response-container {
        border-radius: 24px 24px 0 0;
        padding: .75rem .85rem calc(.85rem + env(safe-area-inset-bottom)) !important;
        max-height: 46vh;
    }
    .response-options { max-height: 34vh !important; }
    .response-btn,
    .response-option { min-height: 56px; border-radius: 18px !important; }
    .welcome-screen { margin: .75rem 0; border-radius: 22px; }
    .role-cards, .scenario-selector { gap: .8rem !important; }
}

/* ===== Phase 2 Premium Chat Conversation ===== */
.training-context{display:none;gap:14px;align-items:stretch;padding:14px 18px;background:linear-gradient(135deg,rgba(157,10,14,.06),rgba(241,90,34,.08));border-bottom:1px solid rgba(157,10,14,.12);box-shadow:0 10px 24px rgba(15,23,42,.04);z-index:3}.training-context.active{display:grid;grid-template-columns:minmax(240px,1.35fr) minmax(260px,1fr) auto}.active-persona-card{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.92);border:1px solid rgba(241,90,34,.16);border-radius:22px;padding:12px;box-shadow:0 14px 32px rgba(15,23,42,.06)}.persona-avatar{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--chat-primary,#9d0a0e),var(--chat-secondary,#f15a22));color:#fff;font-size:1.35rem;flex:0 0 auto;overflow:hidden}.persona-avatar img{width:100%;height:100%;object-fit:cover}.persona-content{min-width:0}.persona-kicker{text-transform:uppercase;letter-spacing:.08em;font-size:.65rem;color:#f15a22;font-weight:900}.persona-content strong{display:block;color:#111827;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.persona-content p{margin:3px 0 8px;color:#64748b;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.persona-badges{display:flex;gap:6px;flex-wrap:wrap}.persona-badges span{border-radius:999px;background:#fff2ed;color:#9d0a0e;padding:4px 8px;font-size:.68rem;font-weight:900}.conversation-progress-timeline{background:rgba(255,255,255,.92);border:1px solid rgba(241,90,34,.16);border-radius:22px;padding:14px;display:flex;justify-content:center;flex-direction:column;box-shadow:0 14px 32px rgba(15,23,42,.06)}.timeline-track{height:7px;background:#fee2e2;border-radius:999px;overflow:hidden}.timeline-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--chat-primary,#9d0a0e),var(--chat-secondary,#f15a22));border-radius:inherit;transition:width .35s ease}.timeline-steps{display:flex;justify-content:space-between;margin-top:8px;gap:8px}.timeline-steps span{font-size:.68rem;color:#94a3b8;font-weight:900}.timeline-steps span.active{color:#9d0a0e}.trainer-controls{display:flex;gap:8px;align-items:center}.trainer-pill{border:1px solid rgba(157,10,14,.14);background:#fff;color:#9d0a0e;border-radius:999px;padding:10px 12px;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(15,23,42,.06);white-space:nowrap}.trainer-pill:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(157,10,14,.14)}
.response-container{border-top:1px solid rgba(157,10,14,.12)!important;box-shadow:0 -18px 50px rgba(15,23,42,.11)!important}.response-options{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px!important}.premium-response-card{height:auto!important;text-align:left!important;display:grid!important;gap:9px!important;padding:14px 16px!important;border-radius:20px!important;border:1px solid #e5e7eb!important;background:#fff!important;color:#182230!important;box-shadow:0 14px 34px rgba(15,23,42,.08)!important;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.premium-response-card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:#f59e0b}.premium-response-card[data-quality="good"]:before{background:#10b981}.premium-response-card[data-quality="bad"]:before,.premium-response-card[data-quality="low"]:before{background:#ef4444}.premium-response-card:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(15,23,42,.14)!important;border-color:rgba(241,90,34,.45)!important}.premium-response-card.selected-response{outline:3px solid rgba(241,90,34,.22)}.response-card-topline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.response-number{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#9d0a0e;color:#fff;font-size:.75rem;font-weight:900}.response-tag-pill,.response-quality-pill{font-size:.68rem;font-weight:900;border-radius:999px;padding:4px 8px}.response-tag-pill{background:#fff2ed;color:#9d0a0e}.response-quality-pill{background:#f8fafc;color:#334155}.response-card-body{font-size:.95rem;line-height:1.5;color:#111827}.response-emoji{font-size:1.15rem;margin-inline-end:6px}.response-card-meta{display:flex;gap:10px;flex-wrap:wrap;color:#64748b;font-size:.72rem;font-weight:800}.feedback-reveal{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 11px;border-radius:14px;background:#fff7ed;color:#9a3412;font-size:.82rem;border:1px solid #fed7aa}.feedback-reveal i{color:#f15a22;margin-top:2px}.final-performance-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.summary-chip{padding:10px;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0;text-align:center}.summary-chip strong{display:block;font-size:1.1rem;color:#111827}.summary-chip span{font-size:.7rem;color:#64748b;font-weight:800}.summary-chip.good{background:#ecfdf5;border-color:#bbf7d0}.summary-chip.medium{background:#fffbeb;border-color:#fde68a}.summary-chip.bad{background:#fff1f2;border-color:#fecdd3}
@media (max-width:820px){.training-context.active{grid-template-columns:1fr;padding:10px}.persona-content p{white-space:normal}.trainer-controls{display:none}.response-container{position:sticky!important;bottom:0;border-radius:24px 24px 0 0!important;padding:10px 12px calc(12px + env(safe-area-inset-bottom))!important;max-height:52vh;overflow:auto}.response-options{grid-template-columns:1fr!important}.premium-response-card{border-radius:18px!important;padding:13px!important}.timeline-steps span{font-size:.62rem}.final-performance-summary{grid-template-columns:repeat(2,1fr)}}


/* ===== Phase 3 completion polish ===== */
.phase3-map-toolbar{position:sticky;top:0;z-index:3;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-20px -20px 16px;padding:12px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(148,163,184,.22)}
.phase3-map-toolbar button{border:1px solid rgba(157,10,14,.16);background:#fff;color:#9d0a0e;border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.phase3-map-stage{transition:transform .18s ease;width:max-content;min-width:100%}
.phase3-best-path{display:inline-flex;gap:8px;align-items:center;background:linear-gradient(135deg,rgba(157,10,14,.1),rgba(241,90,34,.12));color:#78070a;border:1px solid rgba(157,10,14,.18);border-radius:999px;padding:9px 14px;font-weight:900;margin-bottom:16px}
.phase3-map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;min-width:760px}
.phase3-map-node{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:16px;box-shadow:0 16px 35px rgba(15,23,42,.08);transition:.18s ease;position:relative;overflow:hidden}
.phase3-map-node:before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:#cbd5e1}.phase3-map-node.best:before{background:linear-gradient(#9d0a0e,#f15a22)}.phase3-map-node.broken:before{background:#ef4444}.phase3-map-node.spotlight,.phase3-map-node.route-target{transform:translateY(-4px);box-shadow:0 22px 44px rgba(157,10,14,.18);border-color:rgba(157,10,14,.35)}
.phase3-map-node header{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;color:#0f172a;font-weight:900}.phase3-map-node header small{color:#64748b}.phase3-map-node p{margin:0 0 12px;color:#475569;font-size:.88rem;line-height:1.5}.phase3-map-routes{display:flex;flex-wrap:wrap;gap:7px}.phase3-route{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 10px;background:#f1f5f9;color:#334155;font-weight:800;cursor:pointer}.phase3-route span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff}.phase3-route.ok.good{background:#dcfce7;color:#166534}.phase3-route.medium{background:#fef3c7;color:#92400e}.phase3-route.bad,.phase3-route.bad.bad{background:#fee2e2;color:#991b1b}.phase3-route-end,.phase3-map-empty{color:#64748b}.phase3-map-empty{display:grid;place-items:center;gap:10px;min-height:280px;text-align:center}.phase3-map-empty i{font-size:2rem;color:#9d0a0e}
#export-score-report-btn{background:#fff;color:var(--chat-primary,#9d0a0e);border:1px solid rgba(157,10,14,.18)}
.trainer-pill{position:relative;overflow:hidden}.trainer-pill:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%);transition:.45s}.trainer-pill:hover:after{transform:translateX(120%)}
@media(max-width:768px){.phase3-map-toolbar{gap:6px;overflow-x:auto;flex-wrap:nowrap}.phase3-map-toolbar button{white-space:nowrap;padding:8px 11px}.phase3-map-grid{min-width:620px;grid-template-columns:repeat(2,280px)}.score-actions{display:grid;grid-template-columns:1fr;gap:10px}.chat-header{border-radius:0 0 24px 24px}.response-container{max-height:58vh;overflow:auto}.premium-response-card{min-height:76px}}


/* =========================================================
   Final client polish patch - landing/chat start screen
   Matches approved SHINGCHAT mockup, keeps brand colors.
   ========================================================= */
:root {
    --shing-red: #9d0a0e;
    --shing-red-2: #d71921;
    --shing-orange: #f15a22;
    --shing-cream: #fff8f4;
    --shing-text: #111827;
    --shing-muted: #6b7280;
    --shing-gradient: linear-gradient(135deg, var(--shing-red) 0%, var(--shing-red-2) 48%, var(--shing-orange) 100%);
}
.app-container {
    background: linear-gradient(180deg, #fffaf7 0%, #fff 42%, #fff7f2 100%) !important;
}
.chat-header {
    min-height: 88px !important;
    padding: 1.05rem 1.55rem !important;
    border-radius: 0 0 26px 26px !important;
    background:
        radial-gradient(circle at 88% -20%, rgba(255,255,255,.18), transparent 32%),
        var(--shing-gradient) !important;
    box-shadow: 0 18px 45px rgba(157, 10, 14, .25) !important;
}
.bot-avatar {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    padding: .46rem !important;
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
}
.bot-name {
    font-size: 1.32rem !important;
    font-weight: 900 !important;
    letter-spacing: -.045em;
}
.bot-status {
    font-weight: 800 !important;
    gap: .46rem !important;
}
.header-actions {
    gap: 1rem !important;
}
.language-selector {
    min-height: 44px !important;
    padding: .65rem 1.25rem !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
}
.header-btn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
}
.header-btn:hover,
.language-selector:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.22) !important;
}
.messages-area {
    padding: 2.2rem 2rem !important;
    background:
        radial-gradient(circle at 10% 15%, rgba(241,90,34,.08), transparent 24%),
        radial-gradient(circle at 86% 78%, rgba(157,10,14,.08), transparent 25%),
        linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.90)),
        url('../../img/chatttbackground.png') !important;
    background-size: auto, auto, auto, 390px auto !important;
}
.toast-container {
    top: 118px !important;
    right: clamp(1rem, 5vw, 4.5rem) !important;
    left: auto !important;
    transform: translateY(-18px) scale(.98) !important;
    border-radius: 18px !important;
    min-width: min(360px, calc(100vw - 2rem)) !important;
    padding: 1rem 1.15rem !important;
    border-inline-start-width: 4px !important;
    box-shadow: 0 20px 48px rgba(15,23,42,.15) !important;
}
.toast-container.show {
    transform: translateY(0) scale(1) !important;
}
.welcome-screen {
    justify-content: center !important;
    padding: 3.5rem 1rem !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 100%;
}
.welcome-screen::before,
.welcome-screen::after {
    content: '';
    position: absolute;
    pointer-events: none;
    opacity: .45;
}
.welcome-screen::before {
    width: 280px;
    height: 520px;
    left: -120px;
    top: 12%;
    border: 1px solid rgba(241,90,34,.18);
    border-radius: 50%;
    transform: rotate(18deg);
}
.welcome-screen::after {
    width: 290px;
    height: 290px;
    right: -70px;
    bottom: 7%;
    background-image: radial-gradient(rgba(241,90,34,.16) 1.2px, transparent 1.2px);
    background-size: 14px 14px;
    border-radius: 50%;
}
.welcome-card-shell {
    width: min(760px, 100%);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5.3rem clamp(1.2rem, 4vw, 4.2rem) 3.2rem;
    border-radius: 34px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 30px 90px rgba(99,23,23,.10), inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter: blur(18px);
}
.welcome-icon {
    position: absolute !important;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    width: 116px !important;
    height: 116px !important;
    margin: 0 !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 48px rgba(99,23,23,.12) !important;
}
.welcome-logo-img {
    animation: none !important;
}
.welcome-title {
    display: block !important;
    margin: 0 0 .75rem !important;
    font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
    font-weight: 950 !important;
    color: var(--shing-text) !important;
    letter-spacing: -.055em;
}
.welcome-title span {
    background: var(--shing-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.welcome-description {
    display: block !important;
    margin: 0 auto 1.15rem !important;
    max-width: 440px;
    color: var(--shing-muted) !important;
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
}
.welcome-divider {
    width: 96px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(157,10,14,.18), transparent);
    margin: .45rem 0 1.55rem;
    position: relative;
}
.welcome-divider span {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--shing-orange);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 6px rgba(241,90,34,.10);
}
.language-selection {
    width: min(500px, 100%);
}
.language-selection .role-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
#language-cards.role-cards {
    display: grid !important;
    gap: 1.05rem !important;
    width: 100%;
    max-width: none !important;
}
.language-card.role-card {
    width: 100% !important;
    min-height: 108px !important;
    display: grid !important;
    grid-template-columns: 76px 1fr auto;
    align-items: center;
    text-align: start !important;
    gap: 1rem;
    padding: 1.15rem 1.25rem !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(157,10,14,.11) !important;
    box-shadow: 0 16px 38px rgba(99,23,23,.08) !important;
    color: var(--shing-text) !important;
}
.language-card.role-card:hover,
.language-card.role-card:focus-visible {
    transform: translateY(-3px) !important;
    border-color: rgba(241,90,34,.45) !important;
    box-shadow: 0 22px 54px rgba(99,23,23,.13) !important;
}
.language-card .role-icon {
    width: 68px !important;
    height: 68px !important;
    border-radius: 999px !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.12) !important;
}
.language-card .role-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.language-card .role-name {
    font-size: 1.28rem !important;
    font-weight: 950 !important;
    margin: 0 0 .24rem !important;
    color: var(--shing-text) !important;
}
.language-card-copy small {
    color: var(--shing-muted);
    font-weight: 700;
    font-size: .92rem;
}
.language-card-arrow {
    color: var(--shing-orange);
    font-size: 1rem;
}
[dir="rtl"] .language-card-arrow {
    transform: rotate(180deg);
}
@media (max-width: 768px) {
    .chat-header {
        min-height: 72px !important;
        border-radius: 0 0 22px 22px !important;
    }
    .bot-avatar {
        width: 44px !important;
        height: 44px !important;
    }
    .bot-name { font-size: 1rem !important; }
    .language-selector { max-width: 96px !important; }
    .header-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    .toast-container {
        top: 86px !important;
        right: 1rem !important;
    }
    .messages-area { padding: 1.25rem .95rem !important; }
    .welcome-screen { padding: 4rem .55rem 1.5rem !important; }
    .welcome-card-shell {
        padding: 4.7rem 1rem 1.35rem;
        border-radius: 26px;
    }
    .welcome-icon {
        width: 92px !important;
        height: 92px !important;
        top: -38px;
        border-radius: 24px !important;
    }
    .welcome-title { font-size: 1.55rem !important; }
    .welcome-description { font-size: .92rem !important; }
    .language-card.role-card {
        grid-template-columns: 58px 1fr auto;
        min-height: 88px !important;
        padding: .9rem !important;
        gap: .8rem;
    }
    .language-card .role-icon {
        width: 54px !important;
        height: 54px !important;
    }
    .language-card .role-name { font-size: 1.06rem !important; }
}


/* Final client cleanup: remove trainee helper pills and internal scoring/meta labels from learner view */
.trainer-controls[hidden],
.trainer-controls:empty {
    display: none !important;
}
.response-quality-pill,
.response-card-meta {
    display: none !important;
}
.premium-response-card .response-card-topline.clean-response-topline {
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}
.premium-response-card .response-card-body {
    margin-top: 0;
}
.persona-badges span:empty {
    display: none;
}
html[dir="rtl"] .premium-response-card {
    text-align: right;
}
html[dir="rtl"] .response-card-topline.clean-response-topline {
    direction: rtl;
}
.training-context.active {
    grid-template-columns: minmax(300px, 1.25fr) minmax(340px, .95fr) !important;
}


/* =========================================================
   Final responsive design repair - role/scenario flow
   - removes the oversized empty hero after language selection
   - fixes broken scenario image fallback
   - improves mobile spacing and card layout
   ========================================================= */
.app-container {
    max-width: none !important;
    width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
}

.chat-header {
    position: relative;
    flex-shrink: 0;
}

/* Keep header controls usable on every viewport */
.header-actions {
    flex-wrap: nowrap !important;
    min-width: 0;
}
.header-text-btn {
    width: auto !important;
    min-width: max-content !important;
    padding: 0 .95rem !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
}

/* Stage handling: the intro hero is only for the language screen. */
.welcome-screen.stage-role,
.welcome-screen.stage-scenario {
    justify-content: flex-start !important;
    padding-top: clamp(1.25rem, 3vw, 2.25rem) !important;
}
.welcome-screen.stage-role .welcome-card-shell,
.welcome-screen.stage-scenario .welcome-card-shell {
    display: none !important;
}
.welcome-screen.stage-role .role-selection,
.welcome-screen.stage-scenario .scenario-selection {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: min(1120px, 100%);
    max-width: min(1120px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}

/* Clean role/scenario headings */
.role-title,
.scenario-title {
    margin: .75rem 0 1.25rem !important;
    font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
    font-weight: 950 !important;
    color: var(--shing-text, #111827) !important;
    letter-spacing: -.045em;
}
.back-btn {
    margin: 0 auto 1rem !important;
    border-radius: 999px !important;
    min-height: 46px;
    padding: .75rem 1.25rem !important;
    border: 1px solid rgba(157,10,14,.10) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 14px 30px rgba(99,23,23,.07) !important;
    color: #374151 !important;
    font-weight: 900 !important;
}
.back-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(241,90,34,.32) !important;
    color: var(--shing-red, #9d0a0e) !important;
}

/* Role cards: premium, centered, not cut off */
#role-cards.role-cards {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.6rem) !important;
    margin: 0 auto !important;
    padding: .25rem !important;
    overflow: visible !important;
}
#role-cards .role-card {
    border-radius: 28px !important;
    border: 1px solid rgba(157,10,14,.10) !important;
    box-shadow: 0 22px 56px rgba(99,23,23,.10) !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.92) !important;
}
#role-cards .role-icon {
    height: clamp(230px, 24vw, 320px) !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #fff7f2, #fff) !important;
}
#role-cards .role-icon img {
    object-fit: contain !important;
    object-position: bottom center !important;
    padding: 0 !important;
}
#role-cards .role-name {
    padding: 1.1rem 1rem 1.25rem !important;
    font-size: clamp(1.12rem, 1.7vw, 1.45rem) !important;
    font-weight: 950 !important;
}

/* Scenario carousel: stable dimensions and better centering */
.scenario-selector-wrapper {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    padding: 0 3.5rem;
}
.scenario-selector {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    padding: 1rem .5rem 1.5rem !important;
    gap: 1.35rem !important;
    align-items: stretch !important;
}
.scenario-card {
    flex: 0 0 clamp(280px, 31vw, 380px) !important;
    width: clamp(280px, 31vw, 380px) !important;
    min-height: 410px !important;
    max-height: none !important;
    border-radius: 28px !important;
    border: 1px solid rgba(157,10,14,.10) !important;
    box-shadow: 0 24px 60px rgba(99,23,23,.10) !important;
    background: rgba(255,255,255,.94) !important;
}
.scenario-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 28px 70px rgba(99,23,23,.16) !important;
}
.scenario-image {
    height: 250px !important;
    width: 100% !important;
    border-radius: 28px 28px 0 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #fff1ea, #f8fafc) !important;
}
.scenario-image-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
.scenario-image-placeholder {
    display: grid !important;
    place-items: center;
}
.scenario-placeholder-mark {
    width: 84px;
    height: 84px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    color: var(--shing-red, #9d0a0e);
    background: rgba(255,255,255,.82);
    box-shadow: 0 18px 40px rgba(99,23,23,.10);
    font-size: 2rem;
}
.scenario-info {
    min-height: 150px !important;
    padding: 1.35rem 1.55rem !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: #fff !important;
}
.scenario-card .scenario-title {
    font-size: clamp(1.2rem, 1.7vw, 1.6rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -.045em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scenario-desc {
    margin-top: .5rem !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    color: #64748b !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.scroll-arrow {
    width: 56px !important;
    height: 56px !important;
    background: #fff !important;
    border-color: var(--shing-red, #9d0a0e) !important;
    color: var(--shing-red, #9d0a0e) !important;
    box-shadow: 0 18px 42px rgba(99,23,23,.14) !important;
}
.scroll-arrow.prev { inset-inline-start: .2rem !important; left: auto !important; }
.scroll-arrow.next { inset-inline-end: .2rem !important; right: auto !important; }

/* Active chat context: no empty/oversized top cards on small screens */
.training-context.active {
    grid-template-columns: minmax(280px, 1fr) minmax(300px, .9fr) !important;
    align-items: stretch;
}
.trainer-controls,
.trainer-controls[hidden],
.trainer-controls:empty {
    display: none !important;
}

/* Learner response cards: hide internal labels/metadata permanently. */
.response-quality-pill,
.response-card-meta,
.premium-response-card .response-card-meta,
.premium-response-card .response-quality-pill {
    display: none !important;
}
.response-card-topline.clean-response-topline {
    justify-content: space-between !important;
}
.response-tag-pill:empty { display: none !important; }

@media (max-width: 1024px) {
    .chat-header {
        min-height: 78px !important;
        padding: .9rem 1.05rem !important;
        gap: .75rem;
    }
    .bot-avatar { width: 48px !important; height: 48px !important; border-radius: 17px !important; }
    .bot-name { font-size: 1.12rem !important; }
    .header-actions { gap: .55rem !important; }
    .header-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
    .language-selector { min-height: 42px !important; max-width: 132px !important; padding: .55rem .9rem !important; }
    .header-text-btn { max-width: 154px; overflow: hidden; text-overflow: ellipsis; }
    .scenario-selector-wrapper { padding: 0 2.75rem; }
    .scenario-card { flex-basis: clamp(270px, 42vw, 360px) !important; width: clamp(270px, 42vw, 360px) !important; }
}

@media (max-width: 768px) {
    html, body { overflow: hidden; }
    .chat-header {
        min-height: auto !important;
        padding: .75rem .8rem !important;
        border-radius: 0 0 22px 22px !important;
    }
    .header-left { gap: .55rem !important; min-width: 0; }
    .bot-info { min-width: 0; }
    .bot-name { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bot-status { font-size: .72rem !important; }
    .header-actions { gap: .4rem !important; }
    .language-selector {
        max-width: 104px !important;
        min-height: 38px !important;
        font-size: .82rem !important;
        padding: .45rem .55rem !important;
        border-radius: 12px !important;
    }
    .header-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: .92rem !important;
    }
    .header-text-btn {
        display: none !important;
    }
    .messages-area {
        padding: 1rem .75rem 1.6rem !important;
    }
    .welcome-screen.stage-language { padding-top: 3.7rem !important; }
    .welcome-screen.stage-role,
    .welcome-screen.stage-scenario {
        padding: 1.1rem .75rem 1.5rem !important;
    }
    #role-cards.role-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: .9rem !important;
        padding: 0 !important;
    }
    #role-cards .role-card { border-radius: 22px !important; }
    #role-cards .role-icon { height: clamp(160px, 35vw, 230px) !important; }
    #role-cards .role-name { font-size: 1rem !important; padding: .9rem .5rem 1rem !important; }
    .scenario-selector-wrapper {
        padding: 0 !important;
        overflow: visible;
    }
    .scenario-selector {
        padding: .7rem calc((100vw - min(82vw, 340px)) / 2) 1.25rem !important;
        gap: 1rem !important;
    }
    .scenario-card {
        flex: 0 0 min(82vw, 340px) !important;
        width: min(82vw, 340px) !important;
        min-width: min(82vw, 340px) !important;
        min-height: 360px !important;
        border-radius: 24px !important;
    }
    .scenario-image { height: 210px !important; border-radius: 24px 24px 0 0 !important; }
    .scenario-info { min-height: 130px !important; padding: 1.05rem 1.15rem !important; }
    .scenario-card .scenario-title { font-size: 1.28rem !important; }
    .scroll-arrow { display: none !important; }
    .training-context.active { grid-template-columns: 1fr !important; padding: .7rem !important; }
    .active-persona-card, .conversation-progress-timeline { border-radius: 18px !important; }
    .response-container { max-height: 56vh !important; }
}

@media (max-width: 480px) {
    .bot-avatar { width: 40px !important; height: 40px !important; border-radius: 15px !important; }
    .bot-name { font-size: .95rem !important; max-width: 108px; }
    .language-selector { max-width: 88px !important; }
    .header-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; }
    .role-title, .scenario-title { font-size: 1.35rem !important; }
    .back-btn { min-height: 42px; padding: .65rem .95rem !important; font-size: .9rem !important; }
    #role-cards.role-cards { grid-template-columns: 1fr !important; max-width: 330px !important; }
    #role-cards .role-icon { height: 210px !important; }
    .scenario-selector { padding-inline: 7vw !important; }
    .scenario-card { flex-basis: 86vw !important; width: 86vw !important; min-width: 86vw !important; }
    .scenario-image { height: 190px !important; }
}


/* === Client-ready UX upgrades: scenario discovery, preview, report, mobile polish === */
html, body { overflow: hidden !important; }
.chat-header {
    background: linear-gradient(135deg, var(--chat-primary, #9d0a0e) 0%, var(--chat-secondary, #f15a22) 100%) !important;
    border-radius: 0 0 28px 28px !important;
    padding: clamp(.8rem, 2vw, 1.1rem) clamp(1rem, 3vw, 2rem) !important;
    min-height: 82px;
    color: #fff;
    box-shadow: 0 16px 36px rgba(157,10,14,.22) !important;
}
.chat-header .bot-name, .chat-header #bot-status-text { color:#fff !important; }
.header-controls { gap: clamp(.5rem, 1.2vw, 1rem) !important; flex-wrap: wrap; justify-content: flex-end; }
.language-selector, .header-btn {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.18);
}
.language-selector option { color:#111827; }
.header-text-btn { padding-inline: 1.1rem !important; }

.messages-area { background: linear-gradient(180deg, rgba(255,247,244,.65), rgba(255,255,255,.94)) !important; }
.welcome-screen {
    align-items: flex-start !important;
    justify-content: center !important;
    min-height: 100% !important;
    padding: clamp(1rem, 3vw, 2.2rem) clamp(.8rem, 3vw, 2rem) 2rem !important;
    overflow-y: auto !important;
    gap: 1.5rem !important;
}
.welcome-screen.stage-role,
.welcome-screen.stage-scenario {
    padding-top: clamp(1rem, 3vw, 2rem) !important;
}
.welcome-screen.stage-role .welcome-card-shell,
.welcome-screen.stage-scenario .welcome-card-shell { display:none !important; }
.welcome-card-shell {
    width: min(92vw, 760px) !important;
    margin: 0 auto !important;
    padding: clamp(1.4rem, 4vw, 3rem) !important;
    border-radius: 32px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(241,90,34,.13) !important;
    box-shadow: 0 32px 70px rgba(15,23,42,.10) !important;
}
.role-selection, .scenario-selection {
    width: min(1180px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.back-btn {
    display: inline-flex !important; align-items:center; gap:.55rem;
    border-radius: 999px !important; background: #fff !important;
    border: 1px solid rgba(157,10,14,.12) !important;
    box-shadow: 0 12px 28px rgba(15,23,42,.06) !important;
    color: #1f2937 !important; font-weight: 800 !important;
    padding: .8rem 1.2rem !important;
}
.role-title, .scenario-title { color:#111827 !important; font-weight:900 !important; letter-spacing:-.02em; }

.scenario-tools {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    margin: 1rem auto 1.2rem; width:min(1120px,100%);
}
.scenario-search-wrap {
    flex: 1 1 320px; display:flex; align-items:center; gap:.7rem;
    background: rgba(255,255,255,.96); border:1px solid rgba(157,10,14,.11);
    border-radius: 18px; padding: .85rem 1rem; box-shadow: 0 14px 32px rgba(15,23,42,.06);
}
.scenario-search-wrap input { border:0; outline:0; background:transparent; flex:1; font:inherit; color:#111827; min-width:0; }
.scenario-search-wrap i { color:#b91c1c; }
.scenario-filter-chips { display:flex; gap:.55rem; overflow-x:auto; padding-bottom:2px; }
.scenario-filter-chip {
    border:1px solid rgba(157,10,14,.13); background:#fff; color:#475569;
    border-radius:999px; padding:.72rem .95rem; font-weight:900; white-space:nowrap; cursor:pointer;
    transition:.2s ease; box-shadow: 0 8px 18px rgba(15,23,42,.04);
}
.scenario-filter-chip.active { background: linear-gradient(135deg, #b30013, #f15a22); color:#fff; border-color:transparent; }

.scenario-selector-wrapper { width: min(1180px, 100%) !important; margin: 0 auto !important; }
.scenario-selector { gap: 1.25rem !important; padding: .5rem .2rem 1.5rem !important; align-items: stretch !important; }
.scenario-card.scenario-card-v3 {
    flex: 0 0 clamp(290px, 31vw, 370px) !important;
    width: clamp(290px, 31vw, 370px) !important;
    min-height: 430px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #fff !important;
    border:1px solid rgba(157,10,14,.10) !important;
    box-shadow: 0 20px 44px rgba(15,23,42,.09) !important;
    text-align: start !important;
    display:flex !important; flex-direction:column !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.scenario-card.scenario-card-v3:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(157,10,14,.13) !important; }
.scenario-card-v3 .scenario-image { height: 210px !important; width:100%; position:relative; background:#fff7ed; overflow:hidden; display:grid; place-items:center; }
.scenario-card-v3 .scenario-image-img { width:100%; height:100%; object-fit:cover; display:block; }
.scenario-placeholder-mark { width:76px; height:76px; border-radius:24px; display:grid; place-items:center; background:linear-gradient(135deg,#fff,#fee2e2); color:#b91c1c; font-size:2rem; }
.scenario-favorite, .scenario-ref-icon {
    position:absolute; top:14px; border:0; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
    background:rgba(255,255,255,.94); color:#b91c1c; box-shadow:0 10px 24px rgba(15,23,42,.14); cursor:pointer; z-index:2;
}
.scenario-favorite { inset-inline-end:14px; }
.scenario-favorite.active { background:linear-gradient(135deg,#b30013,#f15a22); color:#fff; }
.scenario-ref-icon { inset-inline-start:14px; }
.scenario-status-badge { position:absolute; left:14px; bottom:14px; border-radius:999px; padding:.45rem .7rem; font-size:.78rem; font-weight:900; display:inline-flex; gap:.35rem; align-items:center; }
.scenario-status-badge.completed { background:#ecfdf5; color:#047857; }
.scenario-status-badge.continue { background:#fff7ed; color:#c2410c; }
.scenario-card-v3 .scenario-info { padding:1.15rem !important; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.scenario-meta-row { display:flex; flex-wrap:wrap; gap:.45rem; }
.scenario-chip { border-radius:999px; background:#fff7ed; color:#9d0a0e; padding:.38rem .62rem; font-size:.72rem; font-weight:900; display:inline-flex; align-items:center; gap:.35rem; }
.scenario-chip.difficulty { background:#fef2f2; }
.scenario-card-v3 .scenario-title { font-size:1.35rem !important; line-height:1.15 !important; color:#111827 !important; margin:0 !important; }
.scenario-card-v3 .scenario-desc { color:#64748b !important; font-size:.92rem !important; line-height:1.45 !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.scenario-card-footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; color:#b91c1c; font-weight:900; padding-top:.7rem; border-top:1px solid #fee2e2; }
.scenario-empty-state { min-width: min(720px, 92vw); margin:auto; border-radius:28px; background:#fff; border:1px dashed #fecaca; color:#64748b; padding:2rem; text-align:center; display:grid; gap:.5rem; box-shadow:0 18px 42px rgba(15,23,42,.06); }
.scenario-empty-state i { font-size:2rem; color:#f15a22; }
.scenario-empty-state strong { color:#111827; }

.scenario-preview-modal, .onboarding-tour { position:fixed; inset:0; z-index:10000; display:none; place-items:center; padding:1rem; }
.scenario-preview-modal.active, .onboarding-tour { display:grid; }
.scenario-preview-backdrop, .onboarding-tour::before { content:""; position:absolute; inset:0; background:rgba(15,23,42,.42); backdrop-filter:blur(8px); }
.scenario-preview-card, .onboarding-card {
    position:relative; width:min(640px, 94vw); max-height:90vh; overflow:auto;
    background:#fff; border-radius:32px; border:1px solid rgba(255,255,255,.75); padding:clamp(1.2rem, 3vw, 2rem);
    box-shadow:0 36px 90px rgba(15,23,42,.28); animation:previewIn .22s ease;
}
@keyframes previewIn { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:none} }
.scenario-preview-close { position:absolute; top:1rem; inset-inline-end:1rem; width:42px;height:42px;border:0;border-radius:50%;background:#fff7ed;color:#9d0a0e;cursor:pointer; }
.scenario-preview-hero { display:flex; gap:1rem; align-items:center; padding-inline-end:2.6rem; }
.scenario-preview-avatar { flex:0 0 92px; width:92px; height:92px; border-radius:28px; display:grid; place-items:center; background:linear-gradient(135deg,#fff7ed,#fee2e2); color:#b91c1c; font-size:2rem; overflow:hidden; }
.scenario-preview-avatar img { width:100%; height:100%; object-fit:cover; }
.scenario-preview-kicker { color:#f15a22; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; font-weight:900; }
.scenario-preview-card h3 { color:#111827; font-size:clamp(1.45rem,3vw,2rem); line-height:1.1; margin:.25rem 0; }
.scenario-preview-card p { color:#64748b; margin:0; }
.scenario-preview-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; margin:1.2rem 0; }
.scenario-preview-stats span { border-radius:16px; background:#fff7ed; color:#9d0a0e; padding:.8rem; font-weight:900; display:flex; align-items:center; gap:.5rem; justify-content:center; text-align:center; }
.scenario-preview-stats .completed { background:#ecfdf5; color:#047857; }
.scenario-preview-goal { background:#f8fafc; border:1px solid #eef2f7; border-radius:22px; padding:1rem; display:grid; gap:.35rem; margin-bottom:1rem; }
.scenario-preview-goal strong { color:#111827; }
.scenario-preview-goal span { color:#64748b; }
.scenario-preview-actions { display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; }
.scenario-preview-actions .btn, .onboarding-card .btn { border:0; border-radius:16px; padding:.9rem 1.15rem; font-weight:900; cursor:pointer; }
.scenario-preview-actions .btn-primary, .onboarding-card .btn-primary { background:linear-gradient(135deg,#b30013,#f15a22); color:#fff; box-shadow:0 14px 28px rgba(157,10,14,.2); }
.scenario-preview-actions .btn-secondary { background:#fff; color:#9d0a0e; border:1px solid #fee2e2; }
.onboarding-card { text-align:center; width:min(480px, 92vw); }
.onboarding-icon { width:76px;height:76px;border-radius:24px;margin:0 auto 1rem;display:grid;place-items:center;background:linear-gradient(135deg,#b30013,#f15a22);color:#fff;font-size:2rem; }
.onboarding-card h3 { color:#111827; font-size:1.5rem; margin-bottom:.8rem; }
.onboarding-card ol { text-align:start; color:#475569; margin:0 auto 1.2rem; max-width:320px; line-height:1.9; font-weight:700; }
.final-performance-summary { grid-template-columns:repeat(4,1fr) !important; }
.summary-recommendation { grid-column:1 / -1; display:flex; gap:.6rem; align-items:center; border-radius:18px; padding:1rem; background:#fff7ed; color:#9d0a0e; font-weight:800; }
.score-actions #export-score-report-btn { background:linear-gradient(135deg,#b30013,#f15a22) !important; color:#fff !important; border:0 !important; }

@media (max-width: 900px) {
    .chat-header { min-height:auto; align-items:flex-start; gap:.7rem; }
    .header-controls { width:100%; justify-content:flex-start; overflow-x:auto; padding-bottom:.15rem; flex-wrap:nowrap; }
    .scenario-tools { flex-direction:column; align-items:stretch; }
    .scenario-filter-chips { width:100%; }
    .scenario-preview-stats { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
    body { align-items:stretch; }
    .app-container { height:100dvh !important; max-width:none !important; border-radius:0 !important; }
    .chat-header { border-radius:0 0 22px 22px !important; padding:.8rem .9rem !important; }
    .bot-avatar { width:54px !important; height:54px !important; }
    .bot-name { font-size:1.4rem !important; }
    .language-selector { min-width:128px !important; }
    .welcome-screen { padding:1rem .75rem 1.35rem !important; }
    .welcome-card-shell { width:100% !important; border-radius:26px !important; padding:1.25rem !important; }
    .role-cards { grid-template-columns:1fr !important; }
    .scenario-card.scenario-card-v3 { flex-basis:86vw !important; width:86vw !important; min-width:86vw !important; min-height:410px !important; }
    .scroll-arrow { width:48px !important; height:48px !important; }
    .response-container { left:0 !important; right:0 !important; width:100% !important; border-radius:24px 24px 0 0 !important; }
    .final-performance-summary { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
    .chat-header { gap:.55rem; }
    .header-controls .header-text-btn { display:none !important; }
    .header-btn { width:46px !important; height:46px !important; }
    .language-selector { height:46px !important; }
    .scenario-preview-hero { flex-direction:column; text-align:center; padding-inline-end:0; }
    .scenario-preview-close { top:.75rem; }
    .scenario-preview-actions { display:grid; grid-template-columns:1fr; }
    .scenario-preview-actions .btn { width:100%; }
}


/* =========================================================
   FINAL CLIENT HOTFIX - compact language screen + stable scenario list
   Fixes:
   1) Welcome/language card became too large after Phase 3.
   2) Language choices became horizontal; restore clean compact vertical layout.
   3) Role/scenario screens should not keep any large empty hero area.
   4) Scenario carousel/cards stay visible on desktop and mobile.
   ========================================================= */
.messages-area {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}

.welcome-screen.stage-language {
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    padding: clamp(1.4rem, 4vh, 2.4rem) clamp(.9rem, 3vw, 1.5rem) 2rem !important;
    gap: 0 !important;
}

.welcome-screen.stage-language::before,
.welcome-screen.stage-language::after {
    opacity: .22 !important;
}

.welcome-screen.stage-language .welcome-card-shell {
    width: min(520px, calc(100vw - 2rem)) !important;
    margin: 0 auto !important;
    padding: 1.45rem 1.35rem 1.35rem !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(157,10,14,.09) !important;
    box-shadow: 0 20px 56px rgba(99,23,23,.10) !important;
    backdrop-filter: blur(14px) !important;
}

.welcome-screen.stage-language .welcome-icon {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto .75rem !important;
    border-radius: 20px !important;
    padding: 10px !important;
    box-shadow: 0 14px 34px rgba(99,23,23,.11) !important;
}

.welcome-screen.stage-language .welcome-title {
    display: block !important;
    margin: 0 0 .45rem !important;
    font-size: clamp(1.55rem, 2.6vw, 2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.045em !important;
    text-align: center !important;
}

.welcome-screen.stage-language .welcome-description {
    margin: 0 auto .7rem !important;
    max-width: 380px !important;
    font-size: .98rem !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

.welcome-screen.stage-language .welcome-divider {
    margin: .45rem auto .95rem !important;
    width: 74px !important;
}

.welcome-screen.stage-language .language-selection {
    width: min(380px, 100%) !important;
    margin: 0 auto !important;
}

.welcome-screen.stage-language #language-cards.role-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.welcome-screen.stage-language .language-card.role-card {
    width: 100% !important;
    min-height: 74px !important;
    grid-template-columns: 54px 1fr auto !important;
    gap: .8rem !important;
    padding: .8rem .9rem !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(99,23,23,.07) !important;
}

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

.welcome-screen.stage-language .language-card .role-name {
    font-size: 1.08rem !important;
    margin-bottom: .1rem !important;
}

.welcome-screen.stage-language .language-card-copy small {
    font-size: .82rem !important;
}

.welcome-screen.stage-role,
.welcome-screen.stage-scenario {
    justify-content: flex-start !important;
    align-items: center !important;
    padding: clamp(1rem, 3vh, 1.8rem) clamp(.85rem, 3vw, 1.5rem) 2rem !important;
    min-height: auto !important;
}

.welcome-screen.stage-role .welcome-card-shell,
.welcome-screen.stage-scenario .welcome-card-shell {
    display: none !important;
}

.welcome-screen.stage-role .role-selection,
.welcome-screen.stage-scenario .scenario-selection {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(1180px, 100%) !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.scenario-selection[style*="display: block"],
.scenario-selection[style*="display:block"] {
    display: flex !important;
}

.scenario-tools {
    width: min(1040px, 100%) !important;
    margin: .65rem auto 1rem !important;
}

.scenario-selector-wrapper {
    width: min(1100px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 3rem !important;
    position: relative !important;
}

.scenario-selector {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x proximity !important;
    padding: .75rem .4rem 1.2rem !important;
    min-height: 360px !important;
}

.scenario-card.scenario-card-v3,
.scenario-card {
    scroll-snap-align: start !important;
    flex: 0 0 clamp(260px, 28vw, 340px) !important;
    width: clamp(260px, 28vw, 340px) !important;
    min-height: 360px !important;
}

.scenario-card-v3 .scenario-image,
.scenario-image {
    height: 180px !important;
}

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

.scroll-arrow {
    z-index: 5 !important;
}

@media (max-width: 900px) {
    .chat-header {
        border-radius: 0 0 22px 22px !important;
    }
    .welcome-screen.stage-language {
        padding-top: 1rem !important;
    }
    .welcome-screen.stage-language .welcome-card-shell {
        width: min(460px, calc(100vw - 1.5rem)) !important;
        padding: 1.2rem 1rem !important;
    }
    .scenario-selector-wrapper {
        padding: 0 !important;
    }
    .scenario-selector {
        padding-inline: max(.75rem, calc((100vw - min(86vw, 330px)) / 2)) !important;
        min-height: 350px !important;
    }
    .scenario-card.scenario-card-v3,
    .scenario-card {
        flex-basis: min(86vw, 330px) !important;
        width: min(86vw, 330px) !important;
        min-width: min(86vw, 330px) !important;
        min-height: 350px !important;
    }
    .scroll-arrow {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .welcome-screen.stage-language .welcome-card-shell {
        border-radius: 22px !important;
    }
    .welcome-screen.stage-language .welcome-title {
        font-size: 1.45rem !important;
    }
    .welcome-screen.stage-language .welcome-description {
        font-size: .9rem !important;
    }
    .welcome-screen.stage-language .language-card.role-card {
        min-height: 68px !important;
        grid-template-columns: 46px 1fr auto !important;
    }
    .welcome-screen.stage-language .language-card .role-icon {
        width: 44px !important;
        height: 44px !important;
    }
    .scenario-tools {
        gap: .65rem !important;
    }
    .scenario-filter-chips {
        padding-bottom: .25rem !important;
    }
}

/* =========================================================
   FINAL CLIENT FIX - clean contained learner shell + scenario list
   User request:
   - remove scenario search/filter row
   - keep the learner app centered like the reference screenshot, not full-width desktop
   - make scenarios visible immediately after selecting a role
   ========================================================= */
.scenario-tools,
.scenario-search-wrap,
.scenario-filter-chips {
    display: none !important;
}

/* Desktop/tablet: present the experience as a contained training app shell. */
@media (min-width: 769px) {
    html,
    body {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    body {
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background-color: #fff7f4 !important;
        background-image:
            radial-gradient(circle at 15% 18%, rgba(241,90,34,.16), transparent 26%),
            linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(255,248,244,.96) 52%, rgba(157,10,14,.10) 100%),
            url('../../img/bgg.png') !important;
        background-size: cover, cover, 560px auto !important;
        background-position: center, center, center !important;
    }

    .app-container {
        width: min(920px, 100vw) !important;
        max-width: 920px !important;
        height: min(760px, 100dvh) !important;
        max-height: 760px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 34px 90px rgba(76, 22, 22, .20) !important;
        border: 1px solid rgba(255,255,255,.68) !important;
    }

    .chat-header {
        min-height: 74px !important;
        padding: .85rem 1.05rem !important;
        border-radius: 0 !important;
    }

    .bot-avatar {
        width: 54px !important;
        height: 54px !important;
        border-radius: 17px !important;
    }

    .bot-name {
        font-size: 1.25rem !important;
        letter-spacing: -.025em !important;
    }

    .header-controls {
        gap: .55rem !important;
    }

    .language-selector {
        height: 48px !important;
        min-width: 126px !important;
        border-radius: 14px !important;
    }

    .header-btn {
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
    }

    .messages-container {
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    .messages-area {
        min-height: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        background: rgba(255, 247, 244, .72) !important;
    }

    .welcome-screen.stage-role,
    .welcome-screen.stage-scenario {
        min-height: 100% !important;
        padding: 1.35rem 1.15rem 1.5rem !important;
        background-image: url('../../img/bgg.png') !important;
        background-size: 520px auto !important;
        background-position: center top !important;
    }

    .welcome-screen.stage-role .role-selection,
    .welcome-screen.stage-scenario .scenario-selection {
        width: min(820px, 100%) !important;
        max-width: 820px !important;
    }

    .role-selection .welcome-icon,
    .scenario-selection .welcome-icon {
        display: none !important;
    }

    .back-btn {
        margin-bottom: 1rem !important;
        padding: .7rem 1rem !important;
        font-size: .92rem !important;
    }

    .role-title,
    .scenario-title {
        font-size: clamp(1.45rem, 3vw, 2rem) !important;
        margin-bottom: 1.35rem !important;
        text-align: center !important;
    }

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

    .role-card:not(.language-card) {
        min-height: 220px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .role-card:not(.language-card) .role-icon {
        min-height: 160px !important;
    }

    .scenario-selector-wrapper {
        width: min(840px, 100%) !important;
        max-width: 840px !important;
        padding: 0 2.5rem !important;
        margin: 0 auto !important;
    }

    .scenario-selector {
        min-height: 315px !important;
        padding: .45rem .25rem 1rem !important;
        gap: 1rem !important;
        align-items: stretch !important;
    }

    .scenario-card.scenario-card-v3,
    .scenario-card {
        flex: 0 0 255px !important;
        width: 255px !important;
        min-width: 255px !important;
        min-height: 310px !important;
        border-radius: 18px !important;
    }

    .scenario-card-v3 .scenario-image,
    .scenario-image {
        height: 150px !important;
    }

    .scenario-card-v3 .scenario-info,
    .scenario-info {
        padding: .85rem .95rem !important;
        min-height: 145px !important;
    }

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

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

    .scroll-arrow {
        width: 46px !important;
        height: 46px !important;
        background: #fff !important;
        border: 3px solid #b30013 !important;
        color: #b30013 !important;
    }
}

/* Mobile stays full-screen and responsive. */
@media (max-width: 768px) {
    .app-container {
        max-width: none !important;
        width: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    .scenario-tools {
        display: none !important;
    }

    .welcome-screen.stage-role,
    .welcome-screen.stage-scenario {
        padding: 1rem .75rem 1.25rem !important;
    }

    .scenario-selector {
        min-height: 345px !important;
    }
}

/* =========================================================
   FINAL FRONT-END STABILIZATION PATCH
   - Keep learner app contained and premium on desktop
   - Remove red/geometric oversized background blocks from role/scenario screens
   - Make scenarios visibly load in a clean horizontal carousel
   - Keep mobile fully responsive
   ========================================================= */
.scenario-tools,
.scenario-search-wrap,
.scenario-filter-chips {
    display: none !important;
}

@media (min-width: 769px) {
    body {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background:
            radial-gradient(circle at 18% 18%, rgba(241, 90, 34, .12), transparent 26%),
            radial-gradient(circle at 85% 72%, rgba(157, 10, 14, .10), transparent 28%),
            linear-gradient(135deg, #fffaf8 0%, #fff3ef 100%) !important;
        overflow: hidden !important;
    }

    .app-container {
        width: min(980px, 100vw) !important;
        max-width: 980px !important;
        height: min(780px, 100dvh) !important;
        max-height: 780px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 32px 88px rgba(78, 19, 19, .20) !important;
        border: 1px solid rgba(255, 255, 255, .85) !important;
    }

    .chat-header {
        min-height: 78px !important;
        padding: .85rem 1.25rem !important;
        border-radius: 0 !important;
    }

    .bot-avatar { width: 54px !important; height: 54px !important; border-radius: 17px !important; }
    .bot-name { font-size: 1.28rem !important; }
    .header-actions { gap: .65rem !important; }
    .language-selector { height: 48px !important; min-width: 128px !important; border-radius: 15px !important; }
    .header-btn { width: 48px !important; height: 48px !important; border-radius: 50% !important; }

    .messages-container,
    .messages-area {
        min-height: 0 !important;
        height: 100% !important;
    }

    .messages-area {
        overflow-y: auto !important;
        background:
            linear-gradient(180deg, rgba(255, 247, 244, .88), rgba(255, 255, 255, .97)),
            url('../../img/chatbackground.png') !important;
        background-size: cover, 420px auto !important;
        background-position: center, center !important;
    }

    .welcome-screen.stage-role,
    .welcome-screen.stage-scenario {
        min-height: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 1.25rem 1.25rem 1.4rem !important;
        gap: 1rem !important;
        background: transparent !important;
        overflow-y: auto !important;
    }

    .welcome-screen.stage-role::before,
    .welcome-screen.stage-role::after,
    .welcome-screen.stage-scenario::before,
    .welcome-screen.stage-scenario::after {
        display: none !important;
    }

    .welcome-screen.stage-role .welcome-card-shell,
    .welcome-screen.stage-scenario .welcome-card-shell {
        display: none !important;
    }

    .welcome-screen.stage-role .role-selection,
    .welcome-screen.stage-scenario .scenario-selection {
        width: min(900px, 100%) !important;
        max-width: 900px !important;
        margin: 0 auto !important;
        padding: 1.15rem 1.25rem 1.25rem !important;
        border-radius: 30px !important;
        background: rgba(255, 255, 255, .88) !important;
        border: 1px solid rgba(157, 10, 14, .08) !important;
        box-shadow: 0 22px 60px rgba(99, 23, 23, .10) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .back-btn {
        margin: 0 auto .9rem !important;
        padding: .72rem 1.08rem !important;
        font-size: .92rem !important;
        border-radius: 999px !important;
        background: #fff !important;
        border: 1px solid rgba(157, 10, 14, .12) !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
    }

    .role-title,
    .scenario-title {
        margin: .15rem 0 1.15rem !important;
        font-size: clamp(1.6rem, 3vw, 2.15rem) !important;
        line-height: 1.1 !important;
        color: #111827 !important;
        text-align: center !important;
    }

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

    .role-card:not(.language-card) {
        width: 100% !important;
        min-height: 230px !important;
        border-radius: 22px !important;
        background: #fff !important;
        border: 1px solid rgba(157, 10, 14, .09) !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
        overflow: hidden !important;
    }

    .role-card:not(.language-card) .role-icon {
        width: 100% !important;
        height: 170px !important;
        min-height: 170px !important;
        border-radius: 0 !important;
        background: #fff !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    .role-card:not(.language-card) .role-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        padding: .6rem .5rem 0 !important;
    }

    .role-card:not(.language-card) .role-name {
        padding: .9rem 1rem 1rem !important;
        font-size: 1.05rem !important;
        color: #111827 !important;
        text-align: center !important;
    }

    .scenario-selector-wrapper {
        width: min(850px, 100%) !important;
        max-width: 850px !important;
        margin: 0 auto !important;
        padding: 0 2.75rem !important;
        position: relative !important;
        min-height: 330px !important;
    }

    .scenario-selector {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 1rem !important;
        align-items: stretch !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: .3rem .2rem 1rem !important;
        min-height: 315px !important;
        width: 100% !important;
    }

    .scenario-card.scenario-card-v3,
    .scenario-card {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 250px !important;
        width: 250px !important;
        min-width: 250px !important;
        min-height: 300px !important;
        border-radius: 20px !important;
        background: #fff !important;
        border: 1px solid rgba(157, 10, 14, .10) !important;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
        overflow: hidden !important;
    }

    .scenario-card-v3 .scenario-image,
    .scenario-image {
        height: 148px !important;
        min-height: 148px !important;
        background: #fff7ed !important;
    }

    .scenario-card-v3 .scenario-image-img,
    .scenario-image-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .scenario-card-v3 .scenario-info,
    .scenario-info {
        padding: .9rem .95rem !important;
        min-height: 130px !important;
        flex: 1 !important;
    }

    .scenario-card-v3 .scenario-title,
    .scenario-card .scenario-title {
        font-size: 1.05rem !important;
        line-height: 1.18 !important;
        color: #111827 !important;
        margin: 0 !important;
    }

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

    .scroll-arrow {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 3px solid #b30013 !important;
        color: #b30013 !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, .14) !important;
        z-index: 10 !important;
    }

    .scenario-empty-state {
        min-width: min(560px, 100%) !important;
        width: min(560px, 100%) !important;
        margin: 1rem auto !important;
        border-radius: 24px !important;
        background: #fff !important;
    }
}

@media (max-width: 768px) {
    .app-container {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    .welcome-screen.stage-role,
    .welcome-screen.stage-scenario {
        padding: 1rem .8rem 1.25rem !important;
        background: linear-gradient(180deg, rgba(255, 247, 244, .92), #fff) !important;
    }

    .welcome-screen.stage-role .role-selection,
    .welcome-screen.stage-scenario .scenario-selection {
        width: 100% !important;
        padding: 1rem .75rem !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, .90) !important;
    }

    .role-cards {
        grid-template-columns: 1fr !important;
        gap: .9rem !important;
        width: 100% !important;
    }

    .role-card:not(.language-card) {
        min-height: 210px !important;
    }

    .scenario-selector-wrapper {
        width: 100% !important;
        padding: 0 !important;
    }

    .scenario-selector {
        min-height: 330px !important;
        padding-inline: max(.8rem, calc((100vw - min(84vw, 320px)) / 2)) !important;
    }

    .scenario-card.scenario-card-v3,
    .scenario-card {
        flex: 0 0 min(84vw, 320px) !important;
        width: min(84vw, 320px) !important;
        min-width: min(84vw, 320px) !important;
        min-height: 330px !important;
    }

    .scroll-arrow { display: none !important; }
}

/* =========================================================
   DESIGN RESTORE MOBILE HOTFIX - 2026-06
   Keeps the original chat conversation design, while only preventing
   mobile/tablet horizontal clipping and unreadable overflow.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }

@media (max-width: 768px) {
    body {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .app-container,
    .tab-content,
    .messages-container,
    .messages-area,
    .welcome-screen,
    .role-selection,
    .scenario-selection,
    .training-context,
    .response-container {
        max-width: 100% !important;
    }

    .app-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .chat-header {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .55rem !important;
        padding: .72rem .85rem !important;
        border-radius: 0 0 22px 22px !important;
    }

    .header-left {
        min-width: 0 !important;
        flex: 0 1 auto !important;
        gap: .5rem !important;
    }

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

    .bot-info {
        min-width: 0 !important;
    }

    .bot-name,
    .bot-status {
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

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

    .language-selector {
        flex: 1 1 104px !important;
        min-width: 92px !important;
        max-width: 140px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 .65rem !important;
        border-radius: 14px !important;
        font-size: .92rem !important;
    }

    .header-btn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        border-radius: 50% !important;
    }

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

    .messages-area {
        min-width: 0 !important;
        overflow-x: hidden !important;
        padding-left: .85rem !important;
        padding-right: .85rem !important;
    }

    .training-context.active {
        grid-template-columns: 1fr !important;
        gap: .65rem !important;
        padding: .7rem !important;
        overflow-x: hidden !important;
    }

    .active-persona-card,
    .conversation-progress-timeline {
        min-width: 0 !important;
        width: 100% !important;
    }

    .persona-content strong,
    .persona-content p {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .timeline-steps {
        gap: .35rem !important;
    }

    .timeline-steps span {
        text-align: center !important;
        font-size: clamp(.58rem, 2.4vw, .72rem) !important;
    }

    .response-container {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 56dvh !important;
        padding-left: .85rem !important;
        padding-right: .85rem !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .response-options {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .premium-response-card,
    .response-btn,
    .response-option {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }

    .response-card-body,
    .response-btn,
    .response-option {
        overflow-wrap: break-word !important;
        word-break: normal !important;
        line-height: 1.45 !important;
    }

    .scenario-selector-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .scenario-selector {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        padding-inline: max(.75rem, calc((100vw - min(86vw, 330px)) / 2)) !important;
    }

    .scenario-card.scenario-card-v3,
    .scenario-card {
        flex: 0 0 min(86vw, 330px) !important;
        width: min(86vw, 330px) !important;
        min-width: min(86vw, 330px) !important;
        max-width: min(86vw, 330px) !important;
    }
}

@media (max-width: 430px) {
    .bot-info { display: none !important; }
    .chat-header { gap: .45rem !important; padding: .65rem .7rem !important; }
    .bot-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    .header-actions { gap: .35rem !important; }
    .language-selector {
        min-width: 88px !important;
        max-width: 124px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: .86rem !important;
    }
    .header-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 360px) {
    .language-selector { max-width: 110px !important; font-size: .8rem !important; }
    .header-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    .bot-avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}

/* =========================================================
   Mobile Conversation Visibility Fix
   Keeps the original chat design but makes the conversation
   visible above the response sheet on phones/tablets.
   ========================================================= */
@media (max-width: 768px) {
    body { overflow: hidden !important; }

    .app-container {
        height: 100dvh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #chat-tab.tab-content.active,
    .tab-content.active#chat-tab {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

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

    .training-context.active {
        flex: 0 0 auto !important;
        grid-template-columns: 1fr !important;
        gap: .55rem !important;
        padding: .65rem .85rem !important;
        max-height: 28dvh !important;
        overflow: visible !important;
    }

    .active-persona-card {
        min-height: 0 !important;
        padding: .65rem .75rem !important;
        gap: .65rem !important;
        border-radius: 18px !important;
    }

    .persona-avatar {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
        border-radius: 15px !important;
    }

    .persona-kicker {
        font-size: .56rem !important;
        line-height: 1.1 !important;
        letter-spacing: .11em !important;
    }

    .persona-content strong {
        font-size: .96rem !important;
        line-height: 1.15 !important;
    }

    .persona-content p {
        margin: .15rem 0 .35rem !important;
        font-size: .74rem !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .persona-badges { gap: .35rem !important; }
    .persona-badges span {
        padding: .18rem .46rem !important;
        font-size: .62rem !important;
        line-height: 1.2 !important;
    }

    .conversation-progress-timeline {
        padding: .65rem .75rem !important;
        border-radius: 18px !important;
    }

    .timeline-track { height: 6px !important; }
    .timeline-steps { margin-top: .45rem !important; gap: .3rem !important; }
    .timeline-steps span {
        font-size: clamp(.54rem, 2.25vw, .66rem) !important;
        line-height: 1.15 !important;
    }

    .messages-container {
        flex: 1 1 auto !important;
        min-height: 24dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .messages-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: .9rem .85rem 1.05rem !important;
        gap: .7rem !important;
        scroll-padding-bottom: 1rem !important;
    }

    .message { max-width: 96% !important; }
    .message-bubble {
        padding: .82rem .95rem !important;
        border-radius: 20px !important;
    }
    .message-text {
        font-size: .92rem !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    .response-container {
        position: relative !important;
        flex: 0 0 auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-height: 42dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: .75rem .85rem calc(.9rem + env(safe-area-inset-bottom)) !important;
        border-radius: 22px 22px 0 0 !important;
        z-index: 12 !important;
    }

    .response-handle { margin: -.25rem auto .7rem auto !important; }
    .response-label {
        font-size: .95rem !important;
        line-height: 1.25 !important;
        margin-bottom: .65rem !important;
    }

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

    .premium-response-card,
    .response-btn,
    .response-option {
        min-height: auto !important;
        padding: .82rem .9rem !important;
        border-radius: 16px !important;
    }

    .response-card-body {
        font-size: .9rem !important;
        line-height: 1.38 !important;
    }
}

@media (max-width: 480px) {
    .training-context.active {
        padding: .55rem .7rem !important;
        gap: .45rem !important;
        max-height: 25dvh !important;
    }

    .active-persona-card {
        padding: .55rem .65rem !important;
        gap: .55rem !important;
    }

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

    .persona-content p { display: none !important; }
    .persona-badges span {
        font-size: .58rem !important;
        padding: .16rem .42rem !important;
    }

    .conversation-progress-timeline { padding: .55rem .65rem !important; }
    .messages-container { min-height: 27dvh !important; }
    .messages-area { padding: .75rem .7rem .9rem !important; }

    .response-container {
        max-height: 38dvh !important;
        padding: .65rem .7rem calc(.8rem + env(safe-area-inset-bottom)) !important;
    }

    .response-label { font-size: .9rem !important; }
    .premium-response-card,
    .response-btn,
    .response-option { padding: .75rem .78rem !important; }
    .response-card-body {
        font-size: .86rem !important;
        line-height: 1.34 !important;
    }
}

/* === FINAL HARD MOBILE FIX 2026-06-04 ===
   Forces the chat and response choices to stay inside the visible Android/iOS viewport. */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 820px) {
  body, .app-container, .chat-app, .main-container, .chat-main, .chat-wrapper, .chat-container, .screen, .welcome-card, .language-selection, .role-selection {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .welcome-card, .language-selection, .role-selection, .scenario-card, .active-scenario-card {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
  .chat-container, .chat-wrapper, .messages-container, .messages-area, #messages-area {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .message, .message-row, .message-bubble {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .response-container {
    display: block;
    position: relative !important;
    sticky: auto !important;
    fixed: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 12px 0 calc(16px + env(safe-area-inset-bottom)) !important;
    padding: 12px !important;
    border-radius: 22px !important;
    z-index: 10 !important;
    background: #fff !important;
  }
  .response-container:not(.is-visible) { display: none !important; }
  .response-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }
  .response-btn, .response-option, .premium-response-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    white-space: normal !important;
    text-align: start !important;
    touch-action: manipulation !important;
  }
}


/* === FINAL CLIENT MOBILE UI SUPERFIX ===
   Android Chrome-safe layout: no horizontal crop, scenario cards fit, responses stay visible. */
@media (max-width: 820px) {
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body { position: relative !important; }
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  .chat-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }
  .header-actions {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
  }
  .language-selector {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 160px !important;
  }
  .header-btn { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
  .messages-container,
  .messages-area,
  #messages-area,
  .welcome-screen,
  .welcome-card-shell,
  .language-selection,
  .role-selection,
  .scenario-selection,
  .training-context,
  .active-persona-card,
  .conversation-progress-timeline,
  .response-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .messages-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .messages-area {
    height: auto !important;
    min-height: 58svh !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 12px 16px !important;
  }
  .welcome-card-shell,
  .language-selection,
  .role-selection,
  .scenario-selection {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    transform: none !important;
  }
  .welcome-card-shell { width: calc(100vw - 24px) !important; }
  .role-cards,
  #language-cards {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }
  .role-card,
  .language-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
  }
  .scenario-selector-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  .scenario-selector {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: flex !important;
    gap: 12px !important;
    padding: 4px 2px 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .scroll-arrow { display: none !important; }
  .scenario-card,
  .scenario-card.scenario-card-v3,
  .active-scenario-card {
    flex: 0 0 calc(100vw - 28px) !important;
    width: calc(100vw - 28px) !important;
    min-width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    scroll-snap-align: center !important;
    overflow: hidden !important;
  }
  .scenario-card-v3 .scenario-image { height: 170px !important; }
  .scenario-card-v3 .scenario-info { padding: 12px !important; }
  .scenario-card-v3 .scenario-title,
  .scenario-card .scenario-title {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  .training-context.active {
    padding: 10px 12px !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .active-persona-card,
  .conversation-progress-timeline {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
  }
  .persona-content strong { font-size: 1rem !important; line-height: 1.12 !important; overflow-wrap: anywhere !important; }
  .timeline-steps { gap: 4px !important; }
  .timeline-steps span { font-size: 0.58rem !important; white-space: nowrap !important; }
  .message, .message-row, .message-bubble {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .response-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    display: block;
    margin: 8px 0 calc(14px + env(safe-area-inset-bottom)) !important;
    padding: 12px !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    z-index: 20 !important;
  }
  .response-container:not(.is-visible) { display: none !important; }
  .response-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  .response-btn,
  .response-option,
  .premium-response-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    white-space: normal !important;
    text-align: start !important;
    overflow-wrap: anywhere !important;
  }
}