/* ============================================================
   Chat component styles
   Extracted from Components/Chat.razor (Phase 3 restyling).
   Loaded globally via App.razor. Scoped to chat classes
   (.chat-*, .rz-material-dark .chat-*) so it does not leak
   into the rest of the admin UI.
   ============================================================ */

    /* Brand tokens — centralize accent colors so future restyles happen in one
       place instead of scattered hardcoded hexes. */
    :root {
        --brand-teal: #0EA299;
        --brand-teal-dark: #0B7F79;
        /* Indigo accent for markdown tables in chat (header gradient + first col) */
        --chat-table-grad-from: #667eea;
        --chat-table-grad-to: #764ba2;
        /* Dev-mode switch "on" state */
        --dev-mode-on: #88AC68;
        /* Chat typeface — single source of truth for the whole chat surface */
        --chat-font: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
    }

    /* Chat Layout Grid */
    .chat-layout {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: 'rz-header rz-header rz-header' 'left-sidebar rz-body rz-sidebar';
        max-height: 100%;
    }

    .chat-sidebar {
        background-color: #F9FAFC;
    }

    .rz-material-dark .chat-sidebar {
        background-color: #2C2B30 !important;
    }

    /* Mobile: Chat history sidebar slides from left */
    .mobile-chat-sidebar {
        background-color: white;
        position: fixed !important;
        left: 0 !important;
        top: 70px !important;
        width: auto !important;
        max-width: 320px !important;
        z-index: 1000 !important;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    .mobile-chat-sidebar.rz-sidebar-expanded {
        transform: translateX(0) !important;
    }

    /* Mobile sidebar header styles */
    .mobile-sidebar-header {
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
    }

    .rz-material-dark .mobile-sidebar-header {
        border-bottom-color: #6d6d6d;
        background-color: #2C2B30;
    }

    .mobile-sidebar-title-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .sidebar-back-button {
        min-width: 36px !important;
        padding: 0.25rem !important;
    }

    .sidebar-title {
        margin: 0;
        color: #495057;
        font-size: 1.25rem;
        flex: 1;
    }

    .rz-material-dark .sidebar-title {
        color: #f8f9fa;
    }

    .mobile-sidebar-actions {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .sidebar-close-button {
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
    }

    .mobile-search-input {
        background-color: white !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
        padding: 0.5rem !important;
        height: 40px !important;
    }

    .rz-material-dark .mobile-search-input {
        background-color: #3a3a3a !important;
        border-color: #6d6d6d !important;
        color: #f8f9fa !important;
    }

    .mobile-new-chat-button {
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        padding: 0 !important;
    }

    /* Mobile menu toggle styling */
    .mobile-menu-toggle {
        background: transparent !important;
        border: none !important;
    }

    .mobile-menu-toggle .rz-button-icon {
        font-size: 1.5rem;
    }

    .rz-material-dark .rz-header {
        background-color: #2d2d2d !important;
    }

    #messageTextBox {
        width: 100%;
        height: 100%;
        background-color: transparent !important;
        border: none !important;
        /* Same scale as the message text (.chat-markdown / .user-text, 0.95rem):
           what you type should not read bigger than what gets sent. Radzen's
           default is --rz-input-font-size (1rem). */
        font-size: 0.95rem;
    }

        #messageTextBox:focus {
            box-shadow: none;
        }

    .rz-material-dark #messageTextBox {
        background-color: #2C2B30 !important;
    }

    .chat-options-section {
        margin-top: 5px;
        padding: 5px 0;
    }

    .option-button {
        color: black !important;
        background: none !important;
    }

    .rz-material-dark .option-button {
        color: white !important;
    }

    .rz-material-dark .chat-options-section {
        background-color: #2d2d2d !important;
    }

    /* Chat body */
    .analysis-ready-indicator {
        position: absolute;
        top: 2px;
        background-color: #e4f5e4 !important;
        padding: 5px 10px;
        justify-self: center;
        z-index: 2;
    }

    .analysis-filter-indicator {
        position: absolute;
        top: 2px;
        background-color: #e4e7f5 !important;
        padding: 5px 10px;
        justify-self: center;
        z-index: 2;
    }

    .chat-body {
        background-color: white;
    }

    .rz-material-dark .chat-body {
        background-color: #2d2d2d !important;
    }

    .video-type-chat-body {
        display: grid;
        grid-template-columns: 30% 50% 20%;
        grid-template-areas: 'chat-container video-container alt-video-container';
        max-height: 90vh;
    }

    /* ===========================================================
       Single typographic voice for the WHOLE chat surface.
       The Radzen material theme resolves every .rz-text-* class,
       the body copy and the alert titles from the custom property
       --rz-text-font-family (icons use the separate
       --rz-icon-font-family, so they are untouched). Redefining
       that variable at the chat roots re-themes every RadzenText,
       button, input and dropdown inside — titles, sidebar, history,
       composer, status lines — by custom-property inheritance,
       with no specificity fights and no per-class whack-a-mole.
       The plain font-family covers non-Radzen elements. Scoped to
       the chat roots so the rest of the admin UI keeps the theme
       default. .chat-markdown is listed on its own because the
       skill playground renders it outside any chat root. */
    .chat-layout,
    .chat-container,
    .chat-markdown {
        --rz-text-font-family: var(--chat-font);
        font-family: var(--chat-font);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .chat-container {
        grid-area: chat-container;
        display: flex;
        flex-direction: column;
        height: 97%;
        min-height: 0;
        overflow: hidden;
        background: transparent !important;
    }

    .rz-material-dark .chat-container {
        background-color: #383A45 !important;
    }


    .rz-material-dark .custom-arrow-button {
        color: white !important;
        border: 1px solid white !important;
    }

    .title-section {
        background-color: #F9FAFF;
        padding: 15px 20px;
    }

    .rz-material-dark .title-section {
        background-color: #242424;
    }

    .language-icon, .chat-icon {
        color: black;
    }

    .rz-material-dark .chat-icon {
        color: white;
    }

    .custom-dropdown {
        width: 150px;
    }

    .rz-material-dark .custom-dropdown {
        background-color: #3B3D48 !important;
    }

    .custom-arrow-button {
        text-transform: none;
        border-radius: 50%;
    }

    .custom-textarea {
        width: 100%;
        height: 200px;
        resize: none;
        border-radius: 10px;
    }

    .chat-panel {
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        padding: 0 10px;
        margin: 0 !important;
        border-radius: 15px;
        margin-bottom: 10px;
    }

    /* Markdown table styling */
    .chat-panel table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
        margin: 12px 0;
        font-size: 0.9rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chat-panel thead {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .chat-panel tbody {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .chat-panel thead tr {
        background: linear-gradient(90deg, var(--chat-table-grad-from), var(--chat-table-grad-to));
    }

    .chat-panel thead th {
        color: #ffffff;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.78rem;
        letter-spacing: 0.03em;
        padding: 10px 14px;
        white-space: nowrap;
        border: none;
    }

    .chat-panel tbody tr {
        background-color: #ffffff;
        transition: background-color 0.15s ease;
    }

    .chat-panel tbody tr:nth-child(even) {
        background-color: #f5f3ff;
    }

    .chat-panel tbody tr:hover {
        background-color: #ede8ff;
    }

    .chat-panel tbody td {
        padding: 9px 14px;
        border-bottom: 1px solid #e9ecef;
        white-space: nowrap;
    }

    .chat-panel tbody tr:last-child td {
        border-bottom: none;
    }

    .chat-panel tbody td:first-child {
        color: var(--chat-table-grad-from);
        font-weight: 600;
    }

    /* ===========================================================
       Agent markdown response — harmonious typographic scale.
       Scoped to `.chat-markdown` so it only affects the HTML that
       ConvertMarkdownToHtml produces for agent messages, never the
       surrounding Radzen chrome. Heading sizes are deliberately
       compressed: inside a chat bubble a theme h1 (~2.5rem) reads
       as oversized, so the whole scale is pulled down and headings
       are differentiated by weight as much as by size.
       =========================================================== */
    .chat-markdown {
        font-size: 0.95rem;
        line-height: 1.6;
        color: inherit;
    }

    /* Collapse the outer margins so the bubble padding controls spacing */
    .chat-markdown > :first-child {
        margin-top: 0;
    }

    .chat-markdown > :last-child {
        margin-bottom: 0;
    }

    .chat-markdown h1,
    .chat-markdown h2,
    .chat-markdown h3,
    .chat-markdown h4,
    .chat-markdown h5,
    .chat-markdown h6 {
        font-weight: 600;
        line-height: 1.3;
        margin: 1em 0 0.4em;
        color: inherit;
    }

    .chat-markdown h1 {
        font-size: 1.3rem;
        font-weight: 700;
    }

    .chat-markdown h2 {
        font-size: 1.15rem;
        color: #4a3a7a;
        padding-bottom: 0.25em;
        border-bottom: 1px solid #ece8f6;
    }

    .chat-markdown h3 {
        font-size: 1.05rem;
        color: #6f4cb3;
    }

    .chat-markdown h4,
    .chat-markdown h5,
    .chat-markdown h6 {
        font-size: 1rem;
    }

    .chat-markdown h5 {
        opacity: 0.85;
    }

    .chat-markdown h6 {
        opacity: 0.75;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        font-size: 0.85rem;
    }

    .chat-markdown p {
        margin: 0 0 0.75em;
    }

    .chat-markdown ul,
    .chat-markdown ol {
        margin: 0 0 0.75em;
        padding-left: 1.4em;
    }

    .chat-markdown li {
        margin-bottom: 0.3em;
    }

    .chat-markdown li > ul,
    .chat-markdown li > ol {
        margin-top: 0.3em;
        margin-bottom: 0.3em;
    }

    .chat-markdown a {
        color: #6f4cb3;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .chat-markdown a:hover {
        color: #5a3a99;
    }

    .chat-markdown strong {
        font-weight: 600;
    }

    /* Inline code — pill background */
    .chat-markdown code {
        font-family: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 0.85em;
        background-color: rgba(111, 76, 179, 0.10);
        color: #5a3a99;
        padding: 0.12em 0.4em;
        border-radius: 5px;
        word-break: break-word;
    }

    /* Fenced code block — scrollable, no pill background on the inner code */
    .chat-markdown pre {
        background-color: #f6f5fb;
        border: 1px solid #e6e2f2;
        border-radius: 10px;
        padding: 12px 14px;
        margin: 0 0 0.75em;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chat-markdown pre code {
        background: none;
        color: inherit;
        padding: 0;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .chat-markdown blockquote {
        margin: 0 0 0.75em;
        padding: 0.2em 0 0.2em 1em;
        border-left: 3px solid #b793ed;
        color: #555;
        font-style: italic;
    }

    .chat-markdown hr {
        border: none;
        border-top: 1px solid #e6e2f2;
        margin: 1em 0;
    }

    /* Dark mode — agent markdown */
    .rz-material-dark .chat-markdown h2 {
        color: #cdbdf2;
        border-bottom-color: #3b3d55;
    }

    .rz-material-dark .chat-markdown h3 {
        color: #b79aef;
    }

    .rz-material-dark .chat-markdown a {
        color: #d6c2f5;
    }

    .rz-material-dark .chat-markdown a:hover {
        color: #e6d9ff;
    }

    .rz-material-dark .chat-markdown code {
        background-color: rgba(183, 147, 237, 0.18);
        color: #d6c2f5;
    }

    .rz-material-dark .chat-markdown pre {
        background-color: #2d2f3a;
        border-color: #444660;
    }

    .rz-material-dark .chat-markdown blockquote {
        border-left-color: #9e6ffa;
        color: #c8c8d0;
    }

    .rz-material-dark .chat-markdown hr {
        border-top-color: #444660;
    }

    /* Dark mode table */
    .rz-material-dark .chat-panel thead tr {
        background: linear-gradient(90deg, #5a67d8, #6b46c1);
    }

    .rz-material-dark .chat-panel tbody tr {
        background-color: #2d2f3a;
    }

    .rz-material-dark .chat-panel tbody tr:nth-child(even) {
        background-color: #333542;
    }

    .rz-material-dark .chat-panel tbody tr:hover {
        background-color: #3a3d4e;
    }

    .rz-material-dark .chat-panel tbody td {
        border-bottom-color: #444660;
        color: #e0e0e0;
    }

    .rz-material-dark .chat-panel tbody td:first-child {
        color: #9e6ffa;
    }

    /* Embedded HTML preview (iframe) */
    .chat-html-preview {
        margin: 12px 0;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e2e5ea;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .chat-html-iframe {
        width: 100%;
        min-height: 300px;
        border: none;
        background: #ffffff;
        display: block;
    }

    .rz-material-dark .chat-html-preview {
        border-color: #444660;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .rz-material-dark .chat-html-iframe {
        background: #1f2937;
    }

    /* Pulsing dots thinking animation */
    .thinking-dots {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 8px 4px;
    }

    .thinking-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #9e9e9e;
        animation: thinking-pulse 1.4s ease-in-out infinite;
    }

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

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

    @keyframes thinking-pulse {
        0%, 80%, 100% {
            opacity: 0.3;
            transform: scale(0.8);
        }
        40% {
            opacity: 1;
            transform: scale(1);
        }
    }

    .thinking-status {
        opacity: 0.7;
        font-size: 0.8rem !important;
    }

    /* In dark mode the RadzenText subtitle color + 0.7 opacity renders the
       SignalR processing-status line nearly invisible on the dark surface.
       Force a light color so it stays legible. */
    .rz-material-dark .thinking-status {
        color: #CECECE !important;
    }

    .document-label {
        color: darkgrey;
    }

    .temp-files-container {
        max-height: 140px;
        overflow-y: auto;
        flex-wrap: nowrap !important;
        width: 100%;
        /* Difensivo, non correttivo: è un flex item con `overflow-y: auto`, e col flex-shrink di
           default (1) cederebbe lui quando lo spazio verticale è conteso. Il difetto del chip fuori
           dal box NON era questo — era l'altezza del card, vedi .send-message-card. */
        flex-shrink: 0;
        /* Hide the scrollbar visually but keep wheel/touch scroll working for the
           rare case of many attachments. With a single chip the natural height is
           slightly under max-height yet `overflow: auto` still reserves a 1-2 px
           gutter on WebKit, surfacing as a tiny floating bar to the right of the
           chip. */
        scrollbar-width: none;
    }

    .temp-files-container::-webkit-scrollbar {
        display: none;
    }

    .active-files-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        margin: 0 4px 6px 4px;
        background-color: rgba(183, 147, 237, 0.15);
        color: #6f4cb3;
        border-radius: 12px;
        font-size: 0.78rem;
        font-weight: 500;
        cursor: default;
        user-select: none;
        white-space: nowrap;
        max-width: fit-content;
    }

    .rz-material-dark .active-files-badge {
        background-color: rgba(183, 147, 237, 0.20);
        color: #d6c2f5;
    }

    .temp-file-item {
        max-width: 280px;
        flex-shrink: 0;
    }

    .temp-file-name {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    .document-link {
        color: black !important;
    }

    .rz-material-dark .document-label {
        color: #D1D1D1;
    }

    /* Borderless assistant messages in dark mode too — matches light mode, where
       the assistant reply is plain text on the chat surface with no card fill.
       Tables and code blocks inside set their own dark backgrounds, so making the
       panel itself transparent does not affect them. */
    .rz-material-dark .chat-panel {
        background-color: transparent !important;
    }

    .rz-material-dark .video-type-chat-body .chat-panel {
        background-color: transparent !important
    }

    .rz-material-dark .document-link {
        color: #E6E6E6;
    }

    /* User message — no bubble at all (replaces the raster user-message-bg.png).
       Just text, same font as the assistant reply but formatted differently:
       right-aligned and semibold, in a muted slate tone so the user's turn reads
       as a secondary "you said" echo, distinct from the assistant's dark body
       copy. Transparent surface, no border/shadow/padding box. */
    .user-chat-bg {
        background: transparent !important;
        border: none;
        box-shadow: none;
    }

    .rz-material-dark .chat-panel.user-chat-bg {
        background: transparent !important;
        border: none;
        box-shadow: none;
    }

    .user-chat-bg .user-text {
        font-weight: 600;
        text-align: right;
        color: #475467;
        /* Same typographic scale as the assistant reply (.chat-markdown) so the
           two turns stay in proportion; only weight/alignment/tone differ. */
        font-size: 0.95rem;
        line-height: 1.6;
        /* Drop the legacy bubble padding — with no bubble it just stacked extra
           space on top of the card/wrapper margins and broke the turn rhythm. */
        padding-top: 0;
        margin: 0;
    }

    .rz-material-dark .user-chat-bg .user-text {
        color: #CECECE;
    }

    .user-message {
        max-width: 600px;
    }

    /* Uniform vertical rhythm between turns. The user turn wrapper carries
       Radzen's `rz-my-2`, the assistant turn wrapper carries none, so gaps were
       uneven. Normalize every top-level turn (both are RadzenStacks = .rz-stack)
       to a single consistent gap. The #chatContainer id gives enough specificity
       to override the rz-my-2 utility without editing the markup. */
    #chatContainer > .rz-stack {
        margin-top: 0;
        margin-bottom: 16px;
    }

    .chat-icon-button {
        width: 30px;
    }

    .custom-switch.rz-switch .rz-switch-circle {
        border-radius: 5px;
    }

    /* Dev mode OFF */
    .custom-switch.rz-state-empty {
        background-color: #ECEDEB;
    }

    /* Dev mode ON */
    .custom-switch.rz-switch-checked {
        background-color: var(--dev-mode-on);
    }

    .rz-switch.custom-switch .rz-switch-circle:before {
        background-image: url('/images/dev-mode-off-logo.svg');
        background-size: 20px;
        background-color: white;
        border-radius: 5px;
    }

    .custom-switch.rz-switch-checked .rz-switch-circle:before {
        background-image: url('/images/dev-mode-on-logo.svg');
        color: var(--dev-mode-on);
    }

    /* These target a Radzen menu popup inside the chat surface. They MUST stay
       scoped to .chat-container: unscoped, `.rz-navigation-menu` leaks app-wide
       and absolutely-positions/translates every RadzenPanelMenu submenu (e.g. the
       nav "Impostazioni" dropdown) off-screen. */
    .chat-container .rz-menu {
        background-color: transparent !important;
        height: 20px;
    }

        .chat-container .rz-menu .rz-navigation-item-icon {
            color: black !important;
        }

        .chat-container .rz-menu .rz-navigation-item-icon-children {
            display: none;
        }

    .chat-container .rz-navigation-menu {
        position: absolute;
        transform: translateX(-80%);
    }

    .rz-material-dark .preview-button {
        color: #BABABA;
    }

    .rz-material-dark .chat-title {
        color: white;
    }

    .send-message-card,
    .send-message-card:focus,
    .send-message-card:focus-within {
        justify-self: center;
        background: transparent !important;
        background-color: transparent !important;
        border: 1px solid var(--rz-base-300, #e0e0e0) !important;
        outline: none !important;
        box-shadow: none !important;
        /* Anchor the composer row (paperclip + textbox + send) to the bottom of
           the card so attachment chips and the "Analyzing documents..." indicator
           grow UPWARD into the chat-messages area instead of pushing the textbox
           and buttons downward. Without this, the inner content stacks from the
           top in normal flow and the textbox Y shifts every time a chip/status
           line is added or removed. */
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex-shrink: 0;

        /* L'altezza deve comprendere padding e bordo, altrimenti il contenuto esce dal bordo ALTO.
           Misurato nel browser con un allegato presente: il card risolveva a height 72px, che è
           esattamente la somma dei figli (chip 24 + composer 48) — padding 8+8 e bordo 1+1 NON
           inclusi. Con box-sizing: border-box quei 18px vengono sottratti al contenuto, che si
           ritrova 54px per starne 72; e poiché justify-content è flex-end l'eccesso non accorcia il
           box ma esce dal lato superiore, portando il chip dell'allegato 18px sopra il bordo del
           card. Con min-height: fit-content il card risolve a 90px e il chip torna dentro
           (verificato: contentTop e top del chip coincidono).
           Il 50px resta come fallback per browser senza fit-content, ed è comunque inferiore
           all'altezza del solo composer, quindi non vincola nulla. */
        min-height: 50px;
        min-height: fit-content;
    }

    .send-message-card *,
    .send-message-card .rz-textbox,
    .send-message-card .rz-stack,
    .send-message-card input {
        background: transparent !important;
        background-color: transparent !important;
    }

    .rz-material-dark .send-message-card,
    .rz-material-dark .send-message-card:focus,
    .rz-material-dark .send-message-card:focus-within {
        background: transparent !important;
        background-color: transparent !important;
        border: 1px solid var(--rz-base-600, #757575) !important;
        box-shadow: none !important;
    }

    .rz-material-dark .send-message-card *,
    .rz-material-dark .send-message-card .rz-textbox,
    .rz-material-dark .send-message-card .rz-stack,
    .rz-material-dark .send-message-card input {
        background: transparent !important;
        background-color: transparent !important;
    }

    .mic-button {
        background: url('/images/backgrounds/chat-mic-bg.png');
        background-size: cover;
        background-position: center;
    }

    .rz-material-dark .mic-button {
        background: url('/images/backgrounds/chat-mic-bg-dark.png');
        background-size: cover;
        background-position: center;
        /* Light icon on the dark mic background — #444444 was invisible on dark. */
        color: #E6E6E6 !important;
    }

    .video-progress-container {
        margin-top: 10px;
    }

    @media (max-width: 1920px) {
        .floating-chat-container .chat-container {
            max-height: 100vh;
        }

        .chat-container {
            max-height: 80vh;
        }
    }


    @media(max-width: 768px) {
        .input-stack {
            width: 90% !important;
        }
    }

    @media (max-width: 576px) {
        .show-desktop {
            display: none;
        }

        .chat-input-desktop {
            display: none;
        }

        .chat-container {
            padding: 10px 0;
        }

        .max-width-400 {
            max-width: 100%;
        }

        .language-icon {
            font-size: 1.1rem;
        }

        .custom-dropdown {
            font-size: .9rem;
            justify-content: center;
        }

        .preview-button {
            font-size: x-small;
        }

        .chat-title {
            font-size: small;
        }

        .chat-icon-button {
            width: 20px;
        }

        .chat-text {
            font-size: 0.9rem;
        }

        .help-card {
            padding: 1rem;
        }

        .help-subtitle {
            font-size: 0.875rem;
        }

        .help-question-button {
            font-size: 0.875rem !important;
            padding: 0.75rem !important;
        }

        .chat-layout {
            grid-template-columns: 1fr !important;
            grid-template-areas: 'rz-header' 'rz-body' 'rz-sidebar' !important;
        }

        .rz-sidebar.chat-sidebar:not(.mobile-chat-sidebar) {
            width: 100% !important;
            height: auto !important;
            max-height: 70vh !important;
            position: relative !important;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        }
        
        .send-message-card {
            width: 100% !important;
        }
    }

    /* Floating Help Content */
    .floating-help-content {
        background-color: #f8f9fa;
        border-radius: 15px;
    }

    .rz-material-dark .floating-help-content {
        background-color: #383a45;
    }

    .rz-material-dark .help-icon {
        color: #adb5bd;
    }

    .help-subtitle {
        color: #6c757d;
        line-height: 1.6;
        font-size: 1rem;
    }

    .rz-material-dark .help-subtitle {
        color: #adb5bd;
    }

    .help-question-button {
        text-transform: none;
        width: 100% !important;
        padding: 1rem !important;
        border-radius: 10px !important;
        border: 1px solid #e9ecef !important;
        color: #495057 !important;
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        background-color: #f8f9fa !important;
    }

    .rz-material-dark .help-question-button {
        color: #e9ecef !important;
        border-color: #495057 !important;
        background-color: #495057 !important;
    }

    .help-question-button:hover {
        background-color: #e9ecef !important;
        color: #212529 !important;
        border-color: var(--brand-teal) !important;
    }

    .rz-material-dark .help-question-button:hover {
        background-color: #6c757d !important;
        color: #f8f9fa !important;
        border-color: var(--brand-teal) !important;
    }

    /* Mobile Video Chat Styles */
    .mobile-swipe-container {
        position: relative;
        width: 100%;
        height: 35rem;
    }

    /* Desktop/Web chat container (used when not on a mobile device) */
    .chat-container-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

        /* Reset grid-area and height for desktop embedded chat */
        .chat-container-wrapper .chat-container {
            grid-area: unset !important;
            height: 100% !important;
            width: 100%;
            max-height: none !important;
            overflow-y: auto;
        }

    .swipe-section {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translate3d(0, 0, 0);
        will-change: transform;
        overflow-y: auto;
        padding: 1rem;
    }

    .mobile-swipe-container.dragging .swipe-section {
        transition: none !important;
    }

    .video-section {
        height: 100% !important;
        transform: translate3d(100%, 0, 0);
    }

    .chat-section {
        transform: translate3d(0, 0, 0);
    }

    .video-section.active {
        transform: translate3d(0, 0, 0);
    }

    .chat-section.active {
        transform: translate3d(0, 0, 0);
    }

    .video-section:not(.active) {
        transform: translate3d(100%, 0, 0);
    }

    .chat-section:not(.active) {
        transform: translate3d(-100%, 0, 0);
    }

    .main-video-container {
        width: 100%;
        margin-bottom: 1rem;
    }

    .mobile-video-player {
        width: 100%;
        height: auto;
        max-height: 40vh;
        border-radius: 15px;
        background-color: #000;
    }

    .no-video-placeholder {
        width: 100%;
        height: 200px;
        background-color: #f5f5f5;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
    }

    .highlights-container {
        background-color: #f9f9f9;
        border-radius: 15px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .rz-material-dark .highlights-container {
        background-color: #383a45;
    }

    .highlights-header {
        padding: 1rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e0e0e0;
    }

    .rz-material-dark .highlights-header {
        border-bottom-color: #555;
    }

    .highlights-title {
        margin: 0;
        color: #333;
    }

    .rz-material-dark .highlights-title {
        color: #fff;
    }

    .highlights-toggle-icon {
        color: #666;
        font-size: 1.5rem;
    }

    .rz-material-dark .highlights-toggle-icon {
        color: #ccc;
    }

    .highlights-content {
        padding: 0.5rem 1rem 1rem 1rem;
    }

    .highlight-plus-icon {
        color: #007bff;
        font-size: 1.2rem;
    }

    .highlight-time {
        background-color: #007bff;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 15px;
        font-size: 0.875rem;
        font-weight: bold;
    }

    .alt-videos-container {
        background-color: #f9f9f9;
        border-radius: 15px;
        padding: 1rem;
        overflow: hidden;
    }

    .rz-material-dark .alt-videos-container {
        background-color: #383a45;
    }

    .alt-videos-title {
        margin: 0 0 1rem 0;
        color: #333;
    }

    .rz-material-dark .alt-videos-title {
        color: #fff;
    }

    .alt-videos-scroll {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        max-height: 300px;
        overflow-y: auto;
    }

    .alt-video-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background-color: white;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .rz-material-dark .alt-video-item {
        background-color: #2c2c2c;
    }

    .alt-video-item:hover {
        background-color: #f0f0f0;
        transform: translateY(-1px);
    }

    .rz-material-dark .alt-video-item:hover {
        background-color: #404040;
    }

    .alt-video-item.current {
        border: 2px solid #007bff;
        background-color: #e3f2fd;
    }

    .rz-material-dark .alt-video-item.current {
        background-color: #1a237e;
        border-color: #448aff;
    }

    .alt-video-preview {
        position: relative;
        width: 80px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .alt-video-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .alt-video-placeholder {
        width: 100%;
        height: 100%;
        background-color: #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .alt-video-item:hover .video-overlay {
        opacity: 1;
    }

    .play-icon {
        color: white;
        font-size: 1.5rem;
    }

    .alt-video-info {
        flex: 1;
        overflow: hidden;
    }

    .alt-video-title {
        margin: 0;
        color: #333;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .rz-material-dark .alt-video-title {
        color: #fff;
    }

    .chat-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background-color: #f9f9f9;
        border-radius: 15px;
        margin-bottom: 1rem;
    }

    .rz-material-dark .chat-header-mobile {
        background-color: #383a45;
    }

    .chat-section-title {
        margin: 0;
        color: #333;
    }

    .rz-material-dark .chat-section-title {
        color: #fff;
    }

    .highlights-shortcut-btn {
        color: #007bff !important;
        font-size: 0.875rem !important;
    }

    .mobile-chat-container {
        height: calc(100% - 80px);
        display: flex;
        flex-direction: column;
    }

    .mobile-chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem;
    }

    .mobile-chat-panel {
        max-width: 100%;
        margin-bottom: 0.5rem !important;
    }

    .mobile-chat-icon {
        width: 24px;
        height: 24px;
    }

    .mobile-overlay-input {
        position: fixed;
        bottom: env(safe-area-inset-bottom, 10px);
        left: 20px;
        right: 20px;
        z-index: 1000;
    }

    .input-stack {
        justify-self: center; overflow: hidden;
        background: transparent !important;
        flex: 0 0 auto;
        align-self: center;
    }

    /* CTA Suggestions Styles */
    .cta-suggestion-button {
        background-color: #F9FAFF !important;
        border: 1px solid #90D6DD !important;
        padding: 0.35rem 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
        text-transform: none;
        white-space: nowrap;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cta-suggestion-button:hover {
        transform: translateY(-1px);
    }

    .rz-material-dark .cta-suggestion-button {
        background-color: #1F2128 !important;
        border: 1px solid #4FAAB2 !important;
    }

    .cta-suggestions-container {
        padding: 0.5rem;
        width: 100%;
        max-width: 100% !important;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #90D6DD transparent;
        box-sizing: border-box;
    }

    .cta-suggestions-container::-webkit-scrollbar {
        height: 6px;
    }

    .cta-suggestions-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .cta-suggestions-container::-webkit-scrollbar-thumb {
        background-color: #90D6DD;
        border-radius: 3px;
    }

    .rz-material-dark .cta-suggestions-container {
        scrollbar-color: #4FAAB2 transparent;
    }

    .rz-material-dark .cta-suggestions-container::-webkit-scrollbar-thumb {
        background-color: #4FAAB2;
    }

    @media (min-width: 992px) {
        .cta-suggestions-container {
            flex-wrap: wrap !important;
            overflow-x: hidden;
            overflow-y: auto;
            max-height: calc(2 * (1.75rem + 0.7rem + 2px) + 0.5rem);
            scrollbar-width: thin;
        }

        .cta-suggestions-container::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
    }

    /* Chat messages scrollbar: intentionally left to the browser's NATIVE
       overlay scrollbars (overflow-y:auto on #chatContainer). Styling
       ::-webkit-scrollbar opts the element into classic (always-present)
       scrollbars, which show a persistent bar even when there is no overflow
       — that was the regression. No custom scrollbar CSS here on purpose. */

    /* ===========================================================
       Extracted from Components/Shared/ChatMessageList.razor
       (inline <style> moved here for CSS consolidation).
       =========================================================== */
    .chat-icon-button {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        margin-right: 8px;
    }