/* =========================================================
   0) BASE / GLOBAL
   ========================================================= */

@font-face {
    font-family: "DIN Pro";
    src: url("../fonts/DINPro-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Pro";
    src: url("../fonts/DINPro-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Pro";
    src: url("../fonts/DINPro-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Pro";
    src: url("../fonts/DINPro-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Pro";
    src: url("../fonts/DINPro-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── AADC Brand Palette ── */
    --ld-primary: #0e9390;
    --ld-primary-deep: #0b4c45;
    --ld-primary-soft: #318e86;
    --ld-accent: #c5b683;
    --ld-cream: #e7e0ca;
    --ld-surface: #f6f4ec;
    --ld-surface-soft: #efebda;
    --ld-mist: #c5dddc;
    --ld-muted-blue: #78908d;
    --ld-gray: #e7e7e8;
    --ld-ink: #404041;

    /* ── AADC Typography Scale ── */
    --ld-fs-overline: clamp(12px, 0.12vw + 11.5px, 13px);
    --ld-fs-caption: clamp(13px, 0.20vw + 12.3px, 14px);
    --ld-fs-ui: clamp(14px, 0.35vw + 12.8px, 16px);
    --ld-fs-body: clamp(16px, 0.35vw + 14.8px, 18px);
    --ld-fs-lead: clamp(18px, 0.45vw + 16.4px, 20px);
    --ld-fs-title-sm: clamp(18px, 0.60vw + 15.8px, 22px);
    --ld-fs-title-md: clamp(24px, 1vw + 20px, 32px);
    --ld-fs-title-lg: clamp(32px, 2.1vw + 24px, 56px);
    --ld-lh-ui: 1.4;
    --ld-lh-body: 1.65;
    --ld-lh-heading: 1.22;

    /* ── Global UI Tokens ── */
    --bg: #f7f7f8;
    --panel: #ffffff;
    --sidebar: #f3f4f6;
    --border: #e5e7eb;
    --text: #0f172a;
    --muted: #64748b;
    --userBubble: #eaf2ff;
    --assistantBubble: #ffffff;
    --shadow: 0 1px 2px rgba(0,0,0,0.06);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "DIN Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
}

*, *::before, *::after {
    font-family: inherit;
}

button, input, select, textarea {
    font-family: inherit;
}

/* ===== Notification System ===== */
.notification-host {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* Base toast */
.app-toast {
    min-width: 280px;
    max-width: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .app-toast.show {
        opacity: 1;
        transform: translateX(0);
    }

    .app-toast.hide {
        opacity: 0;
        transform: translateX(20px);
    }

    .app-toast .msg {
        white-space: normal;
        word-break: break-word;
        flex: 1;
        line-height: 1.4;
    }

    /* Close button */
    .app-toast .x {
        border: none;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        color: #6b7280;
        padding: 0;
    }

        .app-toast .x:hover {
            color: #111827;
        }

    /* ===== Variants ===== */

    /*  Warning */
    .app-toast.warn {
        background: #fff7ed;
        border: 1px solid #fbbf24;
        color: #92400e;
        box-shadow: 0 8px 20px rgba(251, 191, 36, 0.15);
    }

        .app-toast.warn .icon {
            color: #f59e0b;
        }

        .app-toast.warn .x:hover {
            background: rgba(245, 158, 11, 0.10);
        }

    /* Error */
    .app-toast.error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.12);
    }

        .app-toast.error .icon {
            color: #ef4444;
        }

        .app-toast.error .x:hover {
            background: rgba(239, 68, 68, 0.10);
        }

    /* Success */
    .app-toast.ok {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
        box-shadow: 0 8px 20px rgba(34, 197, 94, 0.12);
    }

        .app-toast.ok .icon {
            color: #22c55e;
        }

        .app-toast.ok .x:hover {
            background: rgba(34, 197, 94, 0.10);
        }

@keyframes toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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


/* Bootstrap focus override */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Floating label placeholder tweaks (optional) */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* =========================================================
   1) APP LAYOUT
   ========================================================= */

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100dvh;
    min-height: 100dvh;
    transition: grid-template-columns .18s ease;
}

    .app-shell.sidebar-collapsed {
        grid-template-columns: 64px 1fr;
    }

.chat-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.chat-page,
.shell {
    height: 100%;
    min-height: 0;
    min-width: 0;
}

/* =========================================================
   2) SIDEBAR
   ========================================================= */

/*.sidebar {
    font-size: 15px;
    height: 100vh;
    overflow: hidden;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-width: 280px;
}*/

.sidebar {
    font-size: 15px;
    height: 100%;
    overflow: hidden;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-width: 280px;
}

.sb {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Top row */
.sb-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    background: white;
}

.sb-title {
    font-size: 18px;
    font-weight: 700;
}

.sb-collapse {
    width: 36px;
    height: 32px;
    border-radius: 10px;
    /*    border: 1px solid #e5e7eb;
    background: #fff;*/
    border: none;
    background: #c5b683;
    cursor: pointer;
    color: white;
}

    .sb-collapse:hover {
        background: #bcc3cc;
    }

/* Scroll area (ONLY scroll this area) */
.sb-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 12px;
    scrollbar-gutter: stable;
    background: #318e86;
}

    /* Scrollbar styling */
    .sb-scroll::-webkit-scrollbar {
        width: 10px;
    }

    .sb-scroll::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.18);
        border-radius: 999px;
    }

    .sb-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

/* New chat button */
.btn-new {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    text-decoration: none;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 14px;
}

    /* Chat list items */
.chat-row {
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 10px;
}

.chat-row:active {
    background: #c5b683;
    color: #fff;
}

    .chat-item {
        font-size: 15px;
        font-weight: 500;
        display: block;
        padding: 10px 36px 10px 12px;
        margin-top: 2px;
        border-radius: 10px;
        text-decoration: none;
        color: #111827;
        min-height: 40px;
        box-sizing: border-box;
        background: #e7e0ca;
        border: 1px solid transparent;
/*        transition: background-color 0.16s ease, border-color 0.16s ease;*/
    }

        .chat-item .title {
            font-weight: 600;
            font-size: 16px;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .title-edit {
        position: absolute;
        left: 12px;
        right: 36px;
        top: 50%;
        transform: translateY(-50%);
        height: 32px;
        padding: 6px 8px;
        border-radius: 8px;
        border: 1px solid #cbd5e1;
        outline: none;
        background: #fff;
        font-size: 14px;
    }

        .title-edit:focus {
            border-color: #94a3b8;
            box-shadow: 0 0 0 3px rgba(37, 140, 251, 0.15);
        }

    .chat-row.is-editing .chat-item {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        pointer-events: none;
        background: #fff;
        border: 1px solid #e5e7eb;
        pointer-events: none;
    }

        .chat-row.is-editing .chat-item:hover {
            background: transparent !important;
        }

        .chat-row.is-editing .chat-item .title {
            visibility: hidden;
        }
    /* hide the "..." while editing */
    .chat-row.is-editing .chat-more {
        display: none !important;
    }

    .chat-item:hover {
        background: #bcc3cc;
    }

    .chat-item.active {
        background: #d1d5db;
        font-weight: 700;
        border-color: transparent;
    }

/*        .chat-item.active:hover {
            background: #bcc3cc;
        }*/



    .chat-more {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        display: none;
    }

    .chat-row:hover .chat-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Long-press feedback on touch devices */
    .chat-row.long-pressing .chat-item {
        background: #e5e7eb;
        transition: background 0.15s;
    }
    /* Hide the ... button on touch-only screens — long press opens the menu instead */
    @media (pointer: coarse) {
        .chat-more {
            display: none !important;
        }
    }

    .chat-more:hover {
        background: #e5e7eb;
    }
    /* Dropdown menu */
    .chat-menu {
        position: absolute;
        right: 8px;
        top: calc(50% + 18px);
        transform: translateY(-50%);
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        padding: 6px;
        display: none;
        min-width: 140px;
        z-index: 50;
    }

        .chat-menu.open {
            display: block;
        }

    .chat-menu-item {
        width: 100%;
        text-align: left;
        border: none;
        background: transparent;
        padding: 10px 10px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
    }

        .chat-menu-item:hover {
            background: #f3f4f6;
        }

        .chat-menu-item.danger {
            color: #b91c1c;
        }

    .chat-row.is-editing .chat-more,
    .chat-row.is-editing .chat-menu {
        display: none !important;
    }
    /* Sidebar collapsed behavior */
    .app-shell.sidebar-collapsed .sidebar .btn-new,
    .app-shell.sidebar-collapsed .sidebar .title,
    .app-shell.sidebar-collapsed .sidebar .chat-more,
    .app-shell.sidebar-collapsed .sidebar .chat-menu,
    .app-shell.sidebar-collapsed .sidebar .sb-title {
        display: none !important;
    }

    .app-shell.sidebar-collapsed .sidebar {
        align-items: center;
        min-width: 64px !important;
    }

        .app-shell.sidebar-collapsed .sidebar .sb-top {
            width: 100%;
            justify-content: center;
        }

        .app-shell.sidebar-collapsed .sidebar .sb-scroll {
            display: none !important; /* no scrollbar when collapsed */
        }
    /* =========================================================
   3) SIDEBAR USER MENU
   ========================================================= */

    .sb-user {
        margin-top: auto;
        padding: 12px;
        border-top: 1px solid var(--border);
        position: relative;
    }

    .sb-user-btn {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        /*    border: 1px solid var(--border);*/
        border: none;
        background: #fff;
        border-radius: 12px;
        padding: 10px 12px;
        cursor: pointer;
        box-shadow: var(--shadow);
    }

        .sb-user-btn:hover {
            background: #f3f4f6;
        }

    .sb-avatar {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-weight: 800;
        background: #111827;
        color: #fff;
        flex: 0 0 auto;
    }

    .sb-user-meta {
        min-width: 0;
        text-align: left;
    }

    .sb-user-name {
        font-weight: 700;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sb-user-sub {
        font-size: 12px;
        color: var(--muted);
    }
    /* Dropdown (expanded) */
    .sb-user-menu {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 62px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,.16);
        padding: 6px;
        z-index: 9999;
        min-width: 200px;
    }

    .sb-user-item {
        display: block;
        width: 100%;
        text-align: left;
        border: none;
        background: transparent;
        padding: 10px 10px;
        border-radius: 10px;
        cursor: pointer;
        text-decoration: none;
        color: var(--text);
        font-size: 14px;
    }

        .sb-user-item:hover {
            background: #f3f4f6;
        }

        .sb-user-item.danger {
            color: #b91c1c;
        }
    /* When collapsed: show menu floating beside sidebar */
    .app-shell.sidebar-collapsed .sb-user {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .app-shell.sidebar-collapsed .sb-user-btn {
        justify-content: center;
        padding: 10px;
    }

    .app-shell.sidebar-collapsed .sb-user-meta {
        display: none;
    }

    .app-shell.sidebar-collapsed .sb-user-menu {
        position: fixed;
        left: 76px;
        bottom: 16px;
        width: 220px;
        right: auto;
    }
    /* =========================================================
   ANONYMOUS CHAT — LANDING PAGE
   ========================================================= */
    /* Page wrapper: fills viewport, scrollable */
    .lp-page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: var(--bg);
    }
    /* ── Top nav ── */
    .lp-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 32px;
        border-bottom: 1px solid var(--border);
        background: rgba(255,255,255,.92);
        backdrop-filter: blur(8px);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .lp-nav-brand {
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.3px;
        color: var(--text);
        text-decoration: none;
    }

    .lp-nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .lp-nav-link {
        font-size: 14px;
        font-weight: 600;
        color: var(--muted);
        text-decoration: none;
        padding: 7px 14px;
        border-radius: 10px;
        transition: background .15s;
    }

        .lp-nav-link:hover {
            background: #f3f4f6;
            color: var(--text);
        }

    .lp-nav-btn {
        font-size: 14px;
        font-weight: 700;
        background: #111827;
        color: #fff;
        border: none;
        padding: 8px 18px;
        border-radius: 10px;
        cursor: pointer;
        text-decoration: none;
        transition: opacity .15s;
    }

        .lp-nav-btn:hover {
            opacity: .88;
            color: #fff;
        }
    /* ── Hero ── */
    .lp-hero {
        text-align: center;
        padding: 72px 24px 48px;
    }

    .lp-badge {
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .6px;
        text-transform: uppercase;
        background: #eaf2ff;
        color: #1d4ed8;
        border: 1px solid #bfdbfe;
        padding: 4px 12px;
        border-radius: 999px;
        margin-bottom: 20px;
    }

    .lp-headline {
        font-size: clamp(28px, 5vw, 48px);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -.5px;
        color: var(--text);
        margin: 0 auto 16px;
        max-width: 680px;
    }

    .lp-sub {
        font-size: clamp(15px, 2vw, 18px);
        color: var(--muted);
        line-height: 1.6;
        max-width: 560px;
        margin: 0 auto;
    }
    /* ── Composer section ── */
    .lp-composer-section {
        padding: 0 24px 56px;
    }

    .lp-composer-inner {
        max-width: 760px;
        margin: 0 auto;
    }

    .lp-composer-label {
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: .3px;
        margin-bottom: 14px;
    }
    /* Override input-inner grid to be full-width in landing context */
    .lp-composer-inner .input-inner {
        max-width: 100%;
        padding: 0;
    }

    .lp-composer-card {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: 0 4px 24px rgba(0,0,0,.07);
        padding: 8px 8px 14px;
        overflow: hidden;
    }

        .lp-composer-card .composer {
            border: none;
            box-shadow: none;
            border-radius: 12px;
            background: #f9fafb;
            margin-bottom: 8px;
        }

    .lp-composer-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 6px;
    }

    .lp-composer-hint {
        font-size: 12px;
        color: var(--muted);
    }

        .lp-composer-hint a {
            color: #1d4ed8;
            font-weight: 600;
            text-decoration: none;
        }

            .lp-composer-hint a:hover {
                text-decoration: underline;
            }
    /* Validation errors */
    .lp-error {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #991b1b;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 14px;
        margin-bottom: 12px;
    }
    /* ── Features ── */
    .lp-features {
        background: var(--panel);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 56px 24px;
    }

    .lp-features-inner {
        max-width: 900px;
        margin: 0 auto;
    }

    .lp-features-title {
        text-align: center;
        font-size: 22px;
        font-weight: 800;
        margin: 0 0 36px;
        color: var(--text);
    }

    .lp-feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    @media (max-width: 680px) {
        .lp-feature-grid {
            grid-template-columns: 1fr;
        }
    }

    .lp-feature-card {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 24px 20px;
    }

    .lp-feature-icon {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .lp-feature-title {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 6px;
        color: var(--text);
    }

    .lp-feature-desc {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.55;
        margin: 0;
    }
    /* ── Bottom CTA ── */
    .lp-cta {
        text-align: center;
        padding: 64px 24px;
    }

    .lp-cta-title {
        font-size: clamp(20px, 3vw, 28px);
        font-weight: 800;
        margin: 0 0 8px;
        color: var(--text);
    }

    .lp-cta-sub {
        font-size: 15px;
        color: var(--muted);
        margin: 0 0 28px;
    }

    .lp-cta-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .lp-cta-primary {
        background: #111827;
        color: #fff;
        padding: 12px 28px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: opacity .15s;
    }

        .lp-cta-primary:hover {
            opacity: .88;
            color: #fff;
        }

    .lp-cta-secondary {
        background: #fff;
        color: var(--text);
        padding: 12px 24px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        border: 1px solid var(--border);
        transition: background .15s;
    }

        .lp-cta-secondary:hover {
            background: #f3f4f6;
        }
    /* ── Footer ── */
    .lp-footer {
        margin-top: auto;
        padding: 20px 32px;
        border-top: 1px solid var(--border);
        text-align: center;
        font-size: 12px;
        color: var(--muted);
    }
    /* ── Mobile nav tweaks ── */
    @media (max-width: 480px) {
        .lp-nav {
            padding: 12px 16px;
        }

        .lp-nav-link {
            display: none;
        }

        .lp-hero {
            padding: 48px 16px 32px;
        }
    }
    /* ── Login gate modal (anonymous chat → register/login prompt) ── */
    .login-prompt-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 900;
        align-items: center;
        justify-content: center;
    }

        .login-prompt-modal.open {
            display: flex;
        }

    .login-prompt-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
    }

    .login-prompt-card {
        position: relative;
        background: #fff;
        border-radius: 20px;
        padding: 40px 36px 32px;
        width: min(440px, 92vw);
        text-align: center;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
        z-index: 1;
        animation: lpModal-in .2s ease;
    }

    @keyframes lpModal-in {
        from {
            opacity: 0;
            transform: translateY(14px) scale(.97);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .login-prompt-x {
        position: absolute;
        top: 14px;
        right: 16px;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        color: var(--muted);
        border-radius: 8px;
        display: grid;
        place-items: center;
        transition: background .12s;
    }

        .login-prompt-x:hover {
            background: #f3f4f6;
        }

    .login-prompt-icon {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .login-prompt-title {
        font-size: 22px;
        font-weight: 800;
        color: #111827;
        margin: 0 0 10px;
    }

    .login-prompt-sub {
        font-size: 14px;
        color: var(--muted);
        margin: 0 0 24px;
        line-height: 1.6;
    }

    .login-prompt-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

        .login-prompt-actions .lp-cta-primary,
        .login-prompt-actions .lp-cta-secondary {
            width: 100%;
            text-align: center;
        }
    /* =========================================================
   4) MAIN CHAT AREA
   ========================================================= */

/*    .main {
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-width: 0;
    }*/

.main {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/*    .chat-wrap {
        flex: 1;
        overflow: auto;
        padding: 18px 18px 120px;
    }*/

.chat-wrap {
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

    .chat {
        max-width: 950px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .empty {
        border: 1px dashed var(--border);
        border-radius: 12px;
        background: rgba(255,255,255,.7);
        color: var(--muted);
        padding: 16px;
        text-align: center;
    }

    #sendBtn.is-disabled,
    #sendBtn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }
    /* =========================================================
   5) MESSAGE BUBBLES (COPY BUTTON)
   ========================================================= */

    .msg-row {
        max-width: 100%;
        display: flex;
    }

        .msg-row.user {
            justify-content: flex-end;
        }

        .msg-row.assistant {
            justify-content: flex-start;
        }
    /* Inline stop button inside assistant bubble */
    .bubble .stop-inline {
        position: absolute;
        right: 12px;
        bottom: 10px;
        padding: 8px 12px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,.12);
        background: #fff;
        cursor: pointer;
        font-size: 14px;
    }

        .bubble .stop-inline:hover {
            background: rgba(0,0,0,.03);
        }


    .bubble {
        position: relative;
        display: inline-block;
        width: auto;
        min-width: 44px;
        max-width: min(720px, 78%);
        padding: 10px 14px;
        border-radius: 14px;
        line-height: 1.55;
        white-space: normal;
        word-break: break-word;
        box-shadow: var(--shadow);
        /* border: 1px solid var(--border); */
        background: #fff;
        color: var(--text);
        overflow: hidden;
    }

        .bubble.has-actions {
            padding-bottom: 34px;
        }

    .msg-row.assistant .bubble.has-actions {
        padding-bottom: 44px;
    }

    .msg-row.user .bubble {
        margin-left: auto;
        /*    background: var(--userBubble);*/
        background: #c5dddc;
        border-bottom-right-radius: 8px;
        max-width: min(720px, 78%);
    }

    .msg-row.assistant .bubble {
        margin-right: auto;
        background: var(--assistantBubble);
        border-bottom-left-radius: 8px;
        max-width: min(900px, 92%);
    }

    .msg-text {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

        .msg-text hr {
            border: 0;
            border-top: 2px solid #0f172a; /* or #e5e7eb for lighter */
            margin: 14px 0;
        }

        .msg-text pre,
        .msg-text code {
            white-space: pre-wrap;
        }

    .bubble-error {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }
    /* Copy button */
    .copy-btn {
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 5;
        width: 32px;
        height: 28px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 1px solid rgba(0,0,0,.12);
        background: rgba(255,255,255,.95);
        border-radius: 8px;
        cursor: pointer;
        opacity: 0;
        transform: translateY(2px);
        pointer-events: none;
        transition: opacity 120ms ease, transform 120ms ease;
    }
    /* Bottom-right action bar inside bubble */
    .bubble-actions {
        position: absolute;
        right: 10px;
        bottom: 10px;
        display: flex;
        gap: 8px;
        z-index: 6;
    }

        .bubble-actions .copy-btn {
            position: static;
            opacity: 1;
            transform: translateY(2px);
            pointer-events: none;
        }
    /* Small clean icon-style button */
    .icon-btn {
        width: 36px;
        height: 28px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(0,0,0,.12);
        background: rgba(255,255,255,.95);
        border-radius: 8px;
        text-decoration: none;
        color: #111827;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
        opacity: 1;
        transform: translateY(2px);
        pointer-events: none;
        transition: opacity 120ms ease, transform 120ms ease;
    }
    /* Show actions on hover */
    .bubble:hover .icon-btn,
    .bubble:hover .copy-btn {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    /* Optional hover effect */
    .icon-btn:hover {
        background: #f3f4f6;
    }

    .icon-btn:hover,
    .bubble-actions .copy-btn:hover {
        background: #f3f4f6;
    }
    /* Stop button */
    .btn-stop {
        margin-left: 10px;
        background: #fff;
        border: 1px solid #d1d5db;
        color: #111827;
    }

        .btn-stop:hover {
            background: #f9fafb;
        }
    /* Show on hover */
    .bubble:hover .copy-btn {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .copy-src, [hidden] {
        display: none !important;
    }
    /* ===== Assistant Markdown: stable typography (prevents random big/small text) ===== */
    .msg-text.md {
        font-size: 17px; /* your base size */
        line-height: 1.65;
        font-weight: 400;
        text-size-adjust: 100%;
    }
        /* Keep all markdown children inheriting the same base size */
        .msg-text.md :where(p, li, blockquote, td, th, pre, code, strong, em, span) {
            font-size: inherit;
            line-height: inherit;
        }
        /* Control headings so they don't jump huge */
        .msg-text.md :where(h1, h2, h3, h4) {
            line-height: 1.25;
            margin: 0.9em 0 0.5em;
            font-weight: 750;
        }

        .msg-text.md h1 {
            font-size: 1.35em;
        }

        .msg-text.md h2 {
            font-size: 1.20em;
        }

        .msg-text.md h3 {
            font-size: 1.10em;
        }

        .msg-text.md h4 {
            font-size: 1.05em;
        }
        /* Paragraph spacing: consistent */
        .msg-text.md p {
            margin: 0.6em 0;
        }
        /* Lists */
        .msg-text.md :where(ul, ol) {
            margin: 0.5em 0 0.5em 1.2em;
            padding: 0;
        }
        /* Tables: keep stable and prevent layout blowups */
        .msg-text.md table {
            font-size: inherit;
            border-collapse: collapse;
            width: 100%;
            display: block; /* allows horizontal scroll if needed */
            overflow-x: auto;
        }

        .msg-text.md :where(th, td) {
            padding: 6px 8px;
            border: 1px solid rgba(0,0,0,.08);
        }
        /* Code blocks */
        .msg-text.md pre {
            font-size: 0.92em;
            line-height: 1.5;
            overflow-x: auto;
        }

        .msg-text.md code {
            font-size: 0.92em;
        }
    /* =========================================================
   6) CHAT IMAGES
   ========================================================= */

    .chat-img-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        margin-top: 8px;
        max-width: 520px;
    }
    /* uniform size */
    .chat-img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
        background: #f2f2f2;
        transition: transform 0.2s ease;
    }
    /* Single image: bigger, no forced crop */
    .chat-img-grid:has(> .chat-img:only-child) {
        max-width: 680px;
        grid-template-columns: 1fr;
    }

        .chat-img-grid:has(> .chat-img:only-child) > .chat-img {
            width: 100%;
            max-height: 420px;
            aspect-ratio: auto;
            object-fit: contain; /* show full image, no crop */
            background: #f2f2f2;
        }
    /* Fallback if :has() not supported */
    .chat-img-grid.single {
        max-width: 680px;
        grid-template-columns: 1fr;
    }

        .chat-img-grid.single > .chat-img {
            max-height: 420px;
            aspect-ratio: auto;
            object-fit: contain;
            background: transparent;
        }

    .chat-img:hover {
        transform: scale(1.03);
    }

    .dropzone {
        border: 2px dashed var(--ld-mist);
        border-radius: 14px;
        padding: 12px;
        cursor: pointer;
        user-select: none;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .05s ease;
        margin-bottom: 8px;
        background: #fff;
        position: relative;
        z-index: 1;
    }

        .dropzone:focus {
            outline: none;
            border-color: var(--ld-primary-soft);
            box-shadow: 0 0 0 4px rgba(49, 142, 134, .18);
        }

        .dropzone.dragover {
            opacity: 1;
            border-color: var(--ld-primary);
            background: rgba(14, 147, 144, .10);
            box-shadow: 0 0 0 4px rgba(14, 147, 144, .20);
        }

    .dropzone__title {
        font-weight: 600;
        font-size: var(--ld-fs-ui);
        line-height: var(--ld-lh-ui);
    }

    .dropzone__hint {
        opacity: .7;
        font-size: var(--ld-fs-caption);
        margin-top: 2px;
    }
    /* =========================================================
   7) INPUT BAR / COMPOSER
   ========================================================= */

/*    .input-bar {
        position: sticky;
        bottom: 0;
        background: rgba(247,247,248,.88);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--border);
        padding: 12px 0;
    }*/

.input-bar {
    position: relative;
    background: rgba(247,247,248,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    z-index: 5;
    flex: 0 0 auto;
}

/*    .input-inner {
        max-width: 950px;
        margin: 0 auto;
        padding: 0 18px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: end;
    }*/

.input-inner {
    max-width: 950px;
    margin: 0 auto;
    padding: 0 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

    .composer {
        position: relative;
        background: #fff;
        /*    border: 1px solid var(--border);*/
        border-radius: 14px;
        padding: 10px;
        box-shadow: var(--shadow);
    }

        .composer textarea {
            width: 100%;
            border: none;
            outline: none;
            resize: none;
            min-height: 52px;
            color: var(--text);
            font-size: var(--ld-fs-body);
            line-height: var(--ld-lh-body);
        }

/*    #chatInput {
        padding-top: 24px;
    }*/

    .composer .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        /*margin-top: 8px;*/
    }

    .file {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .btn {
        border: none;
        background: #111827;
        color: #fff;
        padding: 10px 14px;
        border-radius: 14px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: var(--shadow);
        white-space: nowrap;
    }

        .btn:hover {
            opacity: .95;
        }
    /* =========================================================
   8) SUGGESTIONS
   ========================================================= */

    .suggestion-pill {
        border: 1px solid #ddd;
        background: #f7f7f8;
        color: #333;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 13px;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

        .suggestion-pill:hover {
            background: #ececf1;
            border-color: #cfcfcf;
        }

    .suggestion-toggle {
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid #ddd;
        background: #fff;
        cursor: pointer;
        font-size: 12px;
        line-height: 28px;
    }

    #chatSuggestions.is-disabled {
        opacity: 0.55;
    }

        #chatSuggestions.is-disabled .suggestion-pill {
            pointer-events: none;
            cursor: not-allowed;
        }
    /* =========================================================
   9) ATTACHMENT PREVIEW
   ========================================================= */

    .attach-preview {
        margin-top: 8px;
    }

    .attach-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .attach-chip {
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--ld-mist);
        background: #fff;
    }

    .attach-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .attach-x {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-size: 12px;
        cursor: pointer;
    }

        .attach-x:hover {
            background: rgba(255,0,0,0.8);
        }

    .attach-remove {
        margin-left: 4px;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.10);
        background: rgba(255,255,255,.95);
        cursor: pointer;
        display: grid;
        place-items: center;
        font-size: 18px;
        line-height: 1;
    }

        .attach-remove:hover {
            background: #f3f4f6;
        }
    /* =========================================================
   10) MODAL (IMAGE VIEWER)
   ========================================================= */

    .img-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.75);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 24px;
    }

        .img-modal.open {
            display: flex;
        }

        .img-modal .modal-inner {
            position: relative;
            width: min(1100px,95vw);
            height: min(800px,85vh);
            background: rgba(15,15,15,.65);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,.5);
        }

        .img-modal .toolbar {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 8px;
            z-index: 2;
        }

            .img-modal .toolbar button {
                border: 1px solid rgba(255,255,255,.18);
                background: rgba(0,0,0,.35);
                color: #fff;
                padding: 8px 10px;
                border-radius: 10px;
                cursor: pointer;
                font-size: 13px;
            }

        .img-modal .viewer {
            width: 100%;
            height: 100%;
            overflow: hidden;
            cursor: grab;
            touch-action: none;
        }

            .img-modal .viewer.dragging {
                cursor: grabbing;
            }

    #modalImg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        transform-origin: center center;
        max-width: none;
        max-height: none;
        user-select: none;
        -webkit-user-drag: none;
    }
    /* =========================================================
   11) LOADING INDICATOR
   ========================================================= */
    .loading-indicator {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        opacity: .9;
    }

    .loading-dots span {
        display: inline-block;
        animation: loadingDot 1s infinite;
    }

        .loading-dots span:nth-child(2) {
            animation-delay: .15s;
        }

        .loading-dots span:nth-child(3) {
            animation-delay: .30s;
        }

    @keyframes loadingDot {
        0%,20% {
            transform: translateY(0);
            opacity: .3;
        }

        50% {
            transform: translateY(-3px);
            opacity: 1;
        }

        100% {
            transform: translateY(0);
            opacity: .3;
        }
    }
    /* ===== Fix: loading bubble should NOT expand due to pre-wrap whitespace ===== */
    .msg-text.is-loading {
        white-space: normal !important; /* stop preserving template newlines */
    }

    .loading-indicator {
        white-space: nowrap; /* keep everything on one line */
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .loading-dots {
        line-height: 1;
    }
    /* =========================================================
   12) MOBILE / TABLET SIDEBAR OVERLAY  (≤ 900 px)
   ========================================================= */
    /* Float button — hidden on desktop */
    #sbFloatBtn {
        display: none;
    }
    /* Backdrop — always in DOM, shown via JS class */
    #sbBackdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    @media (max-width: 900px) {
        /* Collapse the grid to a single column regardless of collapsed state */
        .app-shell,
        .app-shell.sidebar-collapsed {
            grid-template-columns: 1fr !important;
        }
        /* Sidebar is hidden by default; shown as a fixed overlay */
        .sidebar {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: min(280px, 85vw);
            min-width: unset;
            z-index: 1000;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
        }
        /* Reveal sidebar overlay when shell has sidebar-open */
        .app-shell.sidebar-open .sidebar {
            display: flex;
        }
        /* Show backdrop when sidebar is open */
        .app-shell.sidebar-open #sbBackdrop {
            display: block;
        }
        /* Floating hamburger button to re-open the sidebar */
        #sbFloatBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 1001;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            background: #fff;
            cursor: pointer;
            font-size: 18px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
            transition: background 0.15s ease;
        }

            #sbFloatBtn:hover {
                background: #f3f4f6;
            }
        /* Hide float button while sidebar overlay is open */
        .app-shell.sidebar-open #sbFloatBtn {
            display: none;
        }
    }

.mobile-composer-toggle {
    display: none;
}

@media (max-width: 900px) {
    .main {
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .chat-wrap {
        padding: 14px 12px;
    }

    .input-bar {
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    }

    .mobile-composer-toggle {
        width: calc(100% - 24px);
        margin: 0 auto 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--text);
        border-radius: 12px;
        padding: 10px 12px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: var(--shadow);
    }

    .mobile-composer-toggle__icon {
        transition: transform .18s ease;
    }

    .input-bar.is-collapsed .mobile-composer-toggle__icon {
        transform: rotate(180deg);
    }

    .input-bar.is-collapsed .input-inner {
        display: none;
    }

    .input-bar:not(.is-collapsed) .input-inner {
        display: block;
    }

    .input-inner {
        padding: 0 12px;
    }

    .composer {
        border-radius: 14px;
    }

    .chat-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .suggestion-pill,
    .suggestion-toggle {
        max-width: 100%;
    }

    .bubble {
        max-width: 96%;
    }

    .msg-row.user .bubble,
    .msg-row.assistant .bubble {
        max-width: 96%;
    }
}

    /* =================================
   13) AADC Evaluation Overlay
   ================================= */
    .aadc-hidden {
        display: none;
    }
    /* Hidden by default */
    .aadc-eval {
        display: none;
    }
        /* Visible only when open */
        .aadc-eval.open {
            position: fixed;
            inset: 0;
            background: rgba(10, 14, 20, 0.55);
            backdrop-filter: blur(6px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

    .aadc-card {
        width: min(760px, calc(100vw - 32px));
        background: #0b1220;
        color: #e7eefc;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 18px;
        box-shadow: 0 18px 60px rgba(0,0,0,0.45);
        padding: 18px 18px 14px;
    }

    .aadc-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .aadc-badge {
        font-weight: 700;
        letter-spacing: .08em;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.08);
    }

    .aadc-title-main {
        font-weight: 650;
        font-size: 15px;
    }

    .aadc-title-sub {
        opacity: .8;
        font-size: 13px;
        margin-top: 2px;
    }

    .aadc-spinner {
        margin-left: auto;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.22);
        border-top-color: rgba(255,255,255,0.9);
        animation: aadc-spin 0.9s linear infinite;
    }

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

    .aadc-section {
        margin-top: 14px;
    }

    .aadc-section-title {
        font-size: 12px;
        letter-spacing: .04em;
        text-transform: uppercase;
        opacity: .75;
        margin-bottom: 10px;
    }

    .aadc-stepline {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 15px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.06);
    }

    .aadc-check {
        display: inline-flex;
        width: 22px;
        height: 22px;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        background: rgba(100, 255, 190, 0.12);
        border: 1px solid rgba(100, 255, 190, 0.18);
    }

    .aadc-hint {
        margin-top: 8px;
        font-size: 12px;
        opacity: .7;
    }

    .aadc-anchors {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 8px;
        font-size: 14px;
        opacity: .92;
    }

    .aadc-transition {
        font-size: 14px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.06);
    }

    .aadc-progressbar {
        margin-top: 10px;
        height: 8px;
        background: rgba(255,255,255,0.08);
        border-radius: 999px;
        overflow: hidden;
    }

    .aadc-bar {
        height: 100%;
        width: 0%;
        background: rgba(120, 180, 255, 0.9);
        transition: width 250ms ease;
    }
    /* ── Language Switcher (shared) ── */

    .ld-lang-switch {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid var(--ld-mist);
        background: #fff;
        border-radius: 999px;
        padding: 4px;
    }

    .ld-lang-icon {
        font-size: 14px;
        line-height: 1;
        padding: 0 6px 0 8px;
        color: var(--ld-primary-deep);
        display: inline-flex;
        align-items: center;
    }

    .ld-lang-option {
        font-size: var(--ld-fs-caption);
        font-weight: 700;
        line-height: var(--ld-lh-ui);
        color: var(--ld-muted-blue);
        text-decoration: none;
        padding: 4px 10px;
        border-radius: 999px;
        transition: background .15s, color .15s;
    }

        .ld-lang-option:hover {
            background: var(--ld-surface-soft);
            color: var(--ld-ink);
        }

        .ld-lang-option:focus-visible {
            outline: 2px solid var(--ld-primary);
            outline-offset: 1px;
        }

        .ld-lang-option.is-active {
            background: var(--ld-primary-deep);
            color: #fff;
        }

    @media (max-width: 480px) {
        .ld-lang-option {
            padding: 4px 8px;
        }
    }