:root {
            --pink-50: #fdf2f8;
            --pink-100: #fce7f3;
            --pink-200: #fbcfe8;
            --pink-300: #f9a8d4;
            --pink-400: #f472b6;
            --pink-500: #ec4899;
            --pink-600: #db2777;
            --cream: #fefcf3;
            --cream-dark: #f5f0e8;
            --warm-gray: #78716c;
            --warm-dark: #44403c;
            --gold: #d4a574;
            --gold-light: #f0dcc8;
            --white: #ffffff;
            --shadow: 0 2px 16px rgba(236, 72, 153, 0.08);
            --shadow-lg: 0 8px 32px rgba(236, 72, 153, 0.12);
            --radius: 16px;
            --radius-sm: 10px;
        }

        /* ── Male theme: soft blue ─────────────────── */
        [data-theme="male"] {
            --pink-50: #f0f7ff;
            --pink-100: #dbeafe;
            --pink-200: #b8d4f0;
            --pink-300: #89CFF0;
            --pink-400: #60a5e8;
            --pink-500: #4a90d9;
            --pink-600: #3b7dd4;
            --shadow: 0 2px 16px rgba(74, 144, 217, 0.08);
            --shadow-lg: 0 8px 32px rgba(74, 144, 217, 0.12);
        }

        /* ── Other/neutral theme: lavender ────────── */
        [data-theme="other"] {
            --pink-50: #f5f0ff;
            --pink-100: #ede5ff;
            --pink-200: #d8ccf0;
            --pink-300: #C3A6E8;
            --pink-400: #a78bda;
            --pink-500: #9171cc;
            --pink-600: #7c5cb8;
            --shadow: 0 2px 16px rgba(145, 113, 204, 0.08);
            --shadow-lg: 0 8px 32px rgba(145, 113, 204, 0.12);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--cream);
            color: var(--warm-dark);
            height: 100vh;
            overflow: hidden;
        }

        /* ── Auth Screen (split layout) ──────────────── */
        #auth-screen {
            display: flex;
            height: 100vh;
            background: #FFF8F5;
        }

        .auth-left {
            width: 48%;
            background: linear-gradient(165deg, #F4B0A4 0%, #F2A69A 45%, #E89488 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 40px;
            position: relative;
            overflow: hidden;
        }

        .auth-left::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0));
            border-radius: 50%;
        }

        .auth-left::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(255,255,255,0.12), rgba(255,255,255,0));
            border-radius: 50%;
        }

        .auth-left-content {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 420px;
        }

        .auth-avatar-large {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 32% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.05) 55%),
                linear-gradient(135deg, #FFD2C8, #F2A69A 60%, #C97A6F);
            border: 4px solid rgba(255,255,255,0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5em;
            margin: 0 auto 32px;
            box-shadow:
                0 18px 48px rgba(120, 40, 30, 0.22),
                inset 0 -8px 24px rgba(160, 80, 70, 0.18);
        }

        .auth-left .foundation-name {
            font-family: 'Playfair Display', serif;
            font-size: 0.95em;
            font-weight: 600;
            color: rgba(255,255,255,0.95);
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .auth-left .tagline {
            font-family: 'Playfair Display', serif;
            font-size: 1.85em;
            font-weight: 600;
            color: #fff;
            line-height: 1.3;
            margin-bottom: 36px;
            text-shadow: 0 2px 12px rgba(120, 40, 30, 0.15);
        }

        .auth-left .tagline em {
            font-style: normal;
            display: block;
            font-size: 1.35em;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 8px;
        }

        .auth-badges {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .auth-badge {
            padding: 9px 20px;
            background: #ffffff;
            border-radius: 999px;
            color: #A0674A;
            font-size: 0.82em;
            font-weight: 600;
            letter-spacing: 0.3px;
            box-shadow: 0 6px 18px rgba(120, 40, 30, 0.18);
        }

        .auth-right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            position: relative;
        }

        .auth-right-inner {
            width: 100%;
            max-width: 400px;
        }

        /* top-right badge */
        .auth-badge-corner {
            position: absolute;
            top: 24px;
            right: 28px;
            padding: 6px 14px;
            background: #FFF0EB;
            border: 1px solid #F2D4C8;
            border-radius: 999px;
            font-size: 0.68em;
            font-weight: 700;
            color: #A0674A;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        /* top-left language switch */
        .lang-switch {
            position: absolute;
            top: 24px;
            left: 28px;
        }

        .lang-switch select {
            padding: 6px 14px;
            border: 1px solid #e8d5cc;
            border-radius: 20px;
            background: #FFF0EB;
            font-family: 'Inter', sans-serif;
            font-size: 0.78em;
            font-weight: 500;
            color: #A0674A;
            cursor: pointer;
            outline: none;
        }

        .lang-switch select:focus { border-color: #A0674A; }

        /* ornella speech bubble at top */
        .auth-ornella-bubble {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 28px;
        }

        .auth-ornella-mini {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background:
                radial-gradient(circle at 32% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0) 60%),
                linear-gradient(135deg, #F4B0A4, #D87C75);
            border: 2px solid #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            flex-shrink: 0;
            box-shadow: 0 6px 16px rgba(216, 124, 117, 0.28);
        }

        .auth-speech {
            padding: 9px 18px;
            background: #A0674A;
            border-radius: 16px;
            border-bottom-left-radius: 4px;
            font-size: 0.85em;
            color: #ffffff;
            font-weight: 500;
            box-shadow: 0 6px 18px rgba(160, 103, 74, 0.22);
        }

        /* titles */
        .auth-right h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2em;
            font-weight: 700;
            color: #2C1810;
            margin-bottom: 8px;
            letter-spacing: -0.3px;
        }

        .auth-right .auth-subtitle {
            font-size: 0.9em;
            color: #8a6b5c;
            margin-bottom: 28px;
        }

        /* form fields */
        .form-group {
            margin-bottom: 18px;
            text-align: left;
        }

        .form-group label {
            display: block;
            font-size: 0.72em;
            font-weight: 600;
            color: #A0674A;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 7px;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 13px 16px;
            border: 1.5px solid #F2D4C8;
            border-radius: var(--radius-sm);
            font-size: 0.92em;
            font-family: 'Inter', sans-serif;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
            outline: none;
            background: #FFFAF7;
            color: #2C1810;
        }

        .form-group input:focus, .form-group select:focus {
            border-color: #A0674A;
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(160, 103, 74, 0.12);
        }

        .form-group input::placeholder { color: #c4a99a; }

        .form-row {
            display: flex;
            gap: 12px;
        }

        .form-row .form-group { flex: 1; }

        /* buttons */
        .btn {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 0.92em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
        }

        .btn-primary {
            background: #A0674A;
            color: white;
            margin-top: 10px;
            letter-spacing: 0.3px;
            box-shadow: 0 4px 14px rgba(160, 103, 74, 0.22);
        }

        .btn-primary:hover { transform: translateY(-1px); background: #8d5a40; box-shadow: 0 8px 22px rgba(160, 103, 74, 0.3); }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

        .btn-outline {
            width: 100%;
            padding: 13px;
            border: 1.5px solid #A0674A;
            border-radius: var(--radius-sm);
            font-size: 0.92em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
            background: transparent;
            color: #A0674A;
            margin-top: 10px;
        }

        .btn-outline:hover { background: #FFF0EB; }

        .error-msg {
            color: #e11d48;
            font-size: 0.82em;
            margin-top: 8px;
            min-height: 20px;
        }

        .auth-footer-text {
            text-align: center;
            margin-top: 24px;
            font-size: 0.75em;
            color: #c4a99a;
        }

        /* ── App Layout ──────────────────────────────── */
        #app-screen { display: none; height: 100vh; }

        .app-layout {
            display: flex;
            height: 100%;
        }

        /* ── Sidebar ─────────────────────────────────── */
        .sidebar {
            width: 300px;
            background: var(--white);
            border-right: 1px solid var(--pink-100);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid var(--pink-100);
        }

        .sidebar-header .brand {
            font-family: 'Playfair Display', serif;
            font-size: 1.4em;
            color: var(--pink-500);
        }

        .sidebar-header .user-name {
            font-size: 0.8em;
            color: var(--warm-gray);
            margin-top: 2px;
        }

        .sidebar-actions {
            padding: 12px 16px;
            display: flex;
            gap: 8px;
        }

        .btn-new-chat {
            flex: 1;
            padding: 10px;
            background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 0.85em;
            font-weight: 500;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: all 0.2s;
        }

        .btn-new-chat:hover { transform: translateY(-1px); }

        .btn-admin-toggle, .btn-logout, .btn-lang {
            padding: 10px 12px;
            background: var(--pink-50);
            border: 1px solid var(--pink-200);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.85em;
            transition: all 0.2s;
        }

        .btn-admin-toggle:hover, .btn-logout:hover, .btn-lang:hover { background: var(--pink-100); }

        .sidebar-footer {
            padding: 12px 16px;
            border-top: 1px solid var(--pink-100);
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .sidebar-footer-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            font-family: 'Inter', sans-serif;
            font-size: 0.84em;
            color: var(--warm-gray);
            cursor: pointer;
            transition: all 0.15s;
            text-decoration: none;
            width: 100%;
            text-align: left;
        }

        .sidebar-footer-btn:hover { background: var(--pink-50); color: var(--warm-dark); }

        .sidebar-footer-btn.sign-out { color: #e11d48; }
        .sidebar-footer-btn.sign-out:hover { background: #fef2f2; }

        .lang-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 10px 14px;
            font-size: 0.84em;
            color: var(--warm-gray);
        }

        .lang-toggle span { font-weight: 500; }

        .lang-toggle-switch {
            position: relative;
            width: 44px;
            height: 24px;
            background: var(--pink-200);
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.2s;
            border: none;
            padding: 0;
            flex-shrink: 0;
        }

        .lang-toggle-switch::after {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 18px;
            height: 18px;
            background: var(--white);
            border-radius: 50%;
            transition: transform 0.2s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
        }

        .lang-toggle-switch.es::after { transform: translateX(20px); }
        .lang-toggle-switch.es { background: var(--pink-400); }

        .conversation-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .conversation-item {
            padding: 12px 16px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.88em;
            color: var(--warm-dark);
            transition: background 0.15s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 2px;
        }

        .conversation-item:hover { background: var(--pink-50); }
        .conversation-item.active { background: var(--pink-100); font-weight: 500; }

        .conversation-item {
            display: flex;
            align-items: flex-start;
            gap: 0;
        }

        .conversation-item .conv-content { flex: 1; overflow: hidden; }

        .conversation-item .conv-date {
            font-size: 0.75em;
            color: var(--warm-gray);
            display: block;
            margin-top: 2px;
        }

        .conversation-item .conv-delete {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.8em;
            color: var(--warm-gray);
            padding: 2px 4px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .conversation-item:hover .conv-delete { display: block; }
        .conversation-item .conv-delete:hover { color: #e11d48; }

        /* ── Main Content ────────────────────────────── */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        /* ── Chat Area ───────────────────────────────── */
        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            scroll-behavior: smooth;
        }

        .welcome-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            padding: 40px;
        }

        .welcome-screen .ornella-avatar-large {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--pink-300), var(--pink-500));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.8em;
            margin-bottom: 20px;
            box-shadow: var(--shadow-lg);
        }

        .welcome-screen h1 {
            font-family: 'Playfair Display', serif;
            font-size: 1.8em;
            color: var(--warm-dark);
            margin-bottom: 8px;
        }

        .welcome-screen p {
            color: var(--warm-gray);
            max-width: 480px;
            line-height: 1.6;
            font-size: 0.95em;
        }

        .message {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

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

        .message-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
        }

        .message.assistant .message-avatar {
            background: linear-gradient(135deg, var(--pink-300), var(--pink-500));
        }

        .message.user .message-avatar {
            background: var(--gold-light);
            color: var(--warm-dark);
            font-weight: 600;
            font-size: 0.8em;
        }

        .message-bubble {
            padding: 14px 18px;
            border-radius: var(--radius);
            max-width: 70%;
            line-height: 1.6;
            font-size: 0.92em;
        }

        .message.assistant .message-bubble {
            background: var(--white);
            border: 1px solid var(--pink-100);
            box-shadow: var(--shadow);
        }

        .message.user .message-bubble {
            background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
            color: white;
        }

        .message-bubble p { margin-bottom: 8px; }
        .message-bubble p:last-child { margin-bottom: 0; }
        .message-bubble strong { font-weight: 600; }
        .message-bubble em { font-style: italic; }

        .message-bubble .speak-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.9em;
            padding: 3px 6px;
            margin-top: 8px;
            opacity: 0.5;
            transition: opacity 0.2s;
            float: right;
            clear: both;
        }

        .message-bubble .speak-btn:hover { opacity: 1; }

        /* Typing indicator */
        .typing-indicator {
            display: none;
            gap: 12px;
            margin-bottom: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .typing-indicator .dots {
            display: flex;
            gap: 4px;
            padding: 16px 20px;
            background: var(--white);
            border: 1px solid var(--pink-100);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .typing-indicator .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--pink-300);
            animation: typing 1.4s ease-in-out infinite;
        }

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

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-6px); opacity: 1; }
        }

        /* ── Input Area ──────────────────────────────── */
        .input-area {
            padding: 16px 24px;
            border-top: 1px solid var(--pink-100);
            background: var(--white);
        }

        .input-wrapper {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            max-width: 800px;
            margin: 0 auto;
            background: var(--pink-50);
            border: 1.5px solid var(--pink-200);
            border-radius: var(--radius);
            padding: 8px 12px;
            transition: border-color 0.2s;
        }

        .input-wrapper:focus-within {
            border-color: var(--pink-400);
            background: var(--white);
        }

        .input-wrapper textarea {
            flex: 1;
            border: none;
            outline: none;
            resize: none;
            background: transparent;
            font-family: 'Inter', sans-serif;
            font-size: 0.92em;
            line-height: 1.5;
            max-height: 120px;
            padding: 6px 4px;
            color: var(--warm-dark);
        }

        .input-wrapper textarea::placeholder { color: var(--warm-gray); opacity: 0.6; }

        .input-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1em;
            transition: all 0.2s;
            flex-shrink: 0;
            background: transparent;
            color: var(--warm-gray);
        }

        .input-btn:hover { background: var(--pink-100); color: var(--pink-500); }

        .input-btn.send-btn {
            background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
            color: white;
        }

        .input-btn.send-btn:hover { transform: scale(1.05); }
        .input-btn.send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

        .input-btn.recording {
            background: #ef4444;
            color: white;
            animation: pulse 1.5s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
        }

        /* ── Attachment Preview ───────────────────────── */
        .attachment-preview {
            display: none;
            max-width: 800px;
            margin: 0 auto 8px;
            padding: 8px 12px;
            background: var(--pink-50);
            border: 1.5px solid var(--pink-300);
            border-radius: var(--radius-sm);
            align-items: center;
            gap: 8px;
            font-size: 0.85em;
            color: var(--warm-dark);
        }

        .attachment-preview.visible { display: flex; }

        .attachment-preview .attach-icon { font-size: 1.1em; flex-shrink: 0; }

        .attachment-preview .attach-name {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 500;
        }

        .attachment-preview .attach-remove {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1.1em;
            color: var(--warm-gray);
            padding: 2px 4px;
            border-radius: 4px;
            transition: all 0.15s;
            flex-shrink: 0;
        }

        .attachment-preview .attach-remove:hover {
            background: var(--pink-200);
            color: #e11d48;
        }

        /* ── Disclaimer ──────────────────────────────── */
        .disclaimer {
            text-align: center;
            padding: 8px 16px;
            font-size: 0.75em;
            color: var(--warm-gray);
            background: var(--cream-dark);
            border-top: 1px solid var(--pink-100);
        }

        /* ── Admin Panel ─────────────────────────────── */
        .admin-panel {
            display: none;
            flex-direction: column;
            height: 100%;
        }

        .admin-panel.visible { display: flex; }
        .chat-container.hidden { display: none; }

        .admin-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--pink-100);
            background: var(--white);
        }

        .admin-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.3em;
            color: var(--warm-dark);
        }

        .admin-body {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }

        .upload-zone {
            border: 2px dashed var(--pink-300);
            border-radius: var(--radius);
            padding: 40px;
            text-align: center;
            background: var(--pink-50);
            margin-bottom: 24px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .upload-zone:hover { border-color: var(--pink-400); background: var(--pink-100); }

        .upload-zone p { color: var(--warm-gray); margin-top: 8px; font-size: 0.9em; }
        .upload-zone .upload-icon { font-size: 2.5em; }

        .upload-progress {
            display: none;
            margin-bottom: 24px;
            padding: 16px;
            background: var(--white);
            border-radius: var(--radius-sm);
            border: 1px solid var(--pink-100);
        }

        .upload-progress .progress-bar {
            height: 6px;
            background: var(--pink-100);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 8px;
        }

        .upload-progress .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--pink-400), var(--pink-500));
            border-radius: 3px;
            transition: width 0.3s;
            width: 0%;
        }

        .doc-list { list-style: none; }

        .doc-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            background: var(--white);
            border: 1px solid var(--pink-100);
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
        }

        .doc-item .doc-info { flex: 1; }
        .doc-item .doc-name { font-weight: 500; font-size: 0.92em; }

        .doc-item .doc-meta {
            font-size: 0.78em;
            color: var(--warm-gray);
            margin-top: 2px;
        }

        .doc-item .btn-delete {
            padding: 8px 14px;
            background: #fef2f2;
            color: #ef4444;
            border: 1px solid #fecaca;
            border-radius: var(--radius-sm);
            font-size: 0.82em;
            cursor: pointer;
            transition: all 0.2s;
        }

        .doc-item .btn-delete:hover { background: #fee2e2; }

        /* ── File input hidden ───────────────────────── */
        .hidden-input { display: none; }

        /* ── Mobile responsive ───────────────────────── */
        .mobile-header {
            display: none;
            padding: 12px 16px;
            background: var(--white);
            border-bottom: 1px solid var(--pink-100);
            align-items: center;
            justify-content: space-between;
        }

        .mobile-header .brand {
            font-family: 'Playfair Display', serif;
            font-size: 1.2em;
            color: var(--pink-500);
        }

        .mobile-header .menu-btn {
            background: none;
            border: none;
            font-size: 1.4em;
            cursor: pointer;
            padding: 4px;
        }

        .sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.3);
            z-index: 99;
        }

        @media (max-width: 768px) {
            .sidebar {
                position: fixed;
                left: -300px;
                top: 0;
                bottom: 0;
                z-index: 100;
                transition: left 0.3s ease;
            }

            .sidebar.open { left: 0; }
            .sidebar-overlay.open { display: block; }
            .mobile-header { display: flex; }

            .chat-messages { padding: 16px; }
            .input-area { padding: 12px 16px; }

            .message-bubble { max-width: 85%; }

            .auth-left { display: none; }
            .auth-right { padding: 24px 20px; }
            .auth-right-inner { max-width: 100%; }
            .auth-badge-corner { top: 12px; right: 16px; font-size: 0.65em; }
            .lang-switch { top: 12px; left: 16px; }
            .auth-right h2 { font-size: 1.5em; }
            .form-row { flex-direction: column; gap: 0; }
        }

        /* ── Projects Section ─────────────────────────── */
        .projects-section {
            padding: 8px 12px;
            border-bottom: 1px solid var(--pink-100);
        }

        .projects-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 4px 8px;
        }

        .projects-header span {
            font-size: 0.7em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--warm-gray);
        }

        .projects-header button {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1em;
            color: var(--warm-gray);
            padding: 2px 4px;
            border-radius: 4px;
            transition: all 0.15s;
        }

        .projects-header button:hover { background: var(--pink-100); color: var(--pink-500); }

        .project-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.84em;
            color: var(--warm-dark);
            transition: background 0.15s;
        }

        .project-item:hover { background: var(--pink-50); }
        .project-item.active { background: var(--pink-100); font-weight: 500; }

        .project-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .project-item .project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        .project-item .project-delete {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 0.85em;
            color: var(--warm-gray);
            padding: 0 2px;
        }

        .project-item:hover .project-delete { display: block; }
        .project-item .project-delete:hover { color: #e11d48; }

        .project-create {
            display: none;
            flex-direction: column;
            gap: 6px;
            padding: 4px 0;
        }

        .project-create.visible { display: flex; }

        .project-create-row {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .project-create input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid var(--pink-200);
            border-radius: 6px;
            font-size: 0.82em;
            font-family: 'Inter', sans-serif;
            outline: none;
            background: var(--pink-50);
        }

        .project-create input:focus { border-color: var(--pink-400); }

        .project-create-colors {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .color-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            transition: border-color 0.15s;
        }

        .color-dot:hover, .color-dot.selected { border-color: var(--warm-dark); }

        .project-create button.save-project {
            padding: 6px 10px;
            background: var(--pink-400);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.78em;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
        }

        .conversations-label {
            padding: 8px 16px 4px;
            font-size: 0.7em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--warm-gray);
        }

        /* ── Admin Dashboard ─────────────────────────── */
        .admin-tabs {
            display: flex;
            border-bottom: 1px solid var(--pink-100);
            padding: 0 24px;
            background: var(--white);
        }

        .admin-tab {
            padding: 12px 20px;
            border: none;
            background: none;
            font-family: 'Inter', sans-serif;
            font-size: 0.88em;
            font-weight: 500;
            color: var(--warm-gray);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
        }

        .admin-tab:hover { color: var(--warm-dark); }
        .admin-tab.active { color: var(--pink-500); border-bottom-color: var(--pink-500); }

        .admin-tab-content { display: none; }
        .admin-tab-content.active { display: block; }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }

        .stat-card {
            background: var(--white);
            border: 1px solid var(--pink-100);
            border-radius: var(--radius-sm);
            padding: 18px;
            text-align: center;
        }

        .stat-card .stat-value {
            font-size: 2em;
            font-weight: 700;
            color: var(--pink-500);
        }

        .stat-card .stat-label {
            font-size: 0.78em;
            color: var(--warm-gray);
            margin-top: 4px;
        }

        .users-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85em;
        }

        .users-table th {
            text-align: left;
            padding: 10px 12px;
            background: var(--pink-50);
            color: var(--warm-gray);
            font-weight: 600;
            font-size: 0.82em;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--pink-100);
        }

        .users-table td {
            padding: 10px 12px;
            border-bottom: 1px solid var(--pink-50);
            color: var(--warm-dark);
        }

        .users-table tr:hover td { background: var(--pink-50); }

        .toggle-btn {
            padding: 4px 12px;
            border-radius: 12px;
            border: none;
            font-size: 0.78em;
            font-weight: 500;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
        }

        .toggle-btn.active { background: #dcfce7; color: #16a34a; }
        .toggle-btn.inactive { background: #fef2f2; color: #ef4444; }

        .edit-btn {
            padding: 4px 10px;
            border-radius: 6px;
            border: 1px solid var(--pink-200);
            background: var(--pink-50);
            font-size: 0.78em;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            margin-left: 4px;
        }

        .edit-btn:hover { background: var(--pink-100); }

        /* ── Modal ───────────────────────────────────── */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            z-index: 200;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.visible { display: flex; }

        .modal {
            background: var(--white);
            border-radius: var(--radius);
            padding: 32px;
            width: 460px;
            max-width: 92vw;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }

        .modal h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.2em;
            margin-bottom: 20px;
            color: var(--warm-dark);
        }

        .modal .form-group { margin-bottom: 14px; }

        .modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .modal-actions button {
            flex: 1;
            padding: 11px;
            border-radius: var(--radius-sm);
            font-size: 0.88em;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            border: none;
        }

        .modal-actions .btn-save { background: var(--pink-500); color: white; }
        .modal-actions .btn-save:hover { opacity: 0.9; }
        .modal-actions .btn-cancel { background: var(--pink-50); color: var(--warm-dark); border: 1px solid var(--pink-200); }

        /* ── Country Map ─────────────────────────────── */
        .map-section { margin-bottom: 24px; }

        .map-section h4 {
            font-size: 0.9em;
            font-weight: 600;
            color: var(--warm-dark);
            margin-bottom: 12px;
        }

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

        .country-chip {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: var(--white);
            border: 1px solid var(--pink-100);
            border-radius: 20px;
            font-size: 0.84em;
        }

        .country-chip .count {
            background: var(--pink-500);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.82em;
            font-weight: 600;
        }

        /* ── Voice Chat Mode ──────────────────────────── */
        .voice-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 500;
            background: #0a0a0a;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 24px;
        }

        .voice-overlay.visible { display: flex; }

        .voice-close {
            position: absolute;
            top: 24px;
            right: 28px;
            background: rgba(255,255,255,0.1);
            border: none;
            color: rgba(255,255,255,0.7);
            font-size: 1.4em;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s;
        }

        .voice-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

        .voice-orb-wrap {
            position: relative;
            width: 200px;
            height: 200px;
            margin-bottom: 32px;
        }

        .voice-orb {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, var(--orb-light), var(--orb-mid), var(--orb-dark));
            box-shadow: 0 0 60px var(--orb-glow), 0 0 120px var(--orb-glow-outer);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            animation: orbIdle 4s ease-in-out infinite;
        }

        .voice-orb-wrap[data-state="listening"] .voice-orb {
            animation: orbListen 1.5s ease-in-out infinite;
        }

        .voice-orb-wrap[data-state="thinking"] .voice-orb {
            animation: orbThink 0.8s ease-in-out infinite;
            opacity: 0.7;
        }

        .voice-orb-wrap[data-state="speaking"] .voice-orb {
            animation: orbSpeak 0.6s ease-in-out infinite;
            box-shadow: 0 0 80px var(--orb-glow), 0 0 160px var(--orb-glow-outer);
        }

        @keyframes orbIdle {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.03); }
        }

        @keyframes orbListen {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.12); }
        }

        @keyframes orbThink {
            0%, 100% { transform: scale(0.95); opacity: 0.6; }
            50% { transform: scale(1.05); opacity: 1; }
        }

        @keyframes orbSpeak {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.08); }
            50% { transform: scale(0.96); }
            75% { transform: scale(1.1); }
        }

        .voice-orb-ring {
            position: absolute;
            inset: -15px;
            border-radius: 50%;
            border: 2px solid var(--orb-glow);
            opacity: 0.2;
            animation: ringPulse 3s ease-in-out infinite;
        }

        .voice-orb-ring:nth-child(2) {
            inset: -30px;
            opacity: 0.1;
            animation-delay: 0.5s;
        }

        @keyframes ringPulse {
            0%, 100% { transform: scale(1); opacity: 0.2; }
            50% { transform: scale(1.1); opacity: 0.05; }
        }

        .voice-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.6em;
            color: rgba(255,255,255,0.9);
            margin-bottom: 8px;
        }

        .voice-status {
            font-size: 0.9em;
            color: rgba(255,255,255,0.5);
            margin-bottom: 40px;
            min-height: 24px;
        }

        .voice-transcript {
            width: 100%;
            max-width: 600px;
            text-align: center;
        }

        .voice-user-text {
            font-size: 1.1em;
            color: rgba(255,255,255,0.8);
            margin-bottom: 16px;
            min-height: 28px;
            font-style: italic;
        }

        .voice-ornella-text {
            font-size: 1em;
            color: rgba(255,255,255,0.5);
            line-height: 1.6;
            min-height: 24px;
            max-height: 120px;
            overflow-y: auto;
        }

        .voice-start-btn {
            position: absolute;
            bottom: 40px;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.7);
            font-size: 1.5em;
            cursor: pointer;
            transition: all 0.2s;
        }

        .voice-start-btn:hover { background: rgba(255,255,255,0.2); }
        .voice-start-btn.active { background: #ef4444; color: #fff; animation: pulse 1.5s ease-in-out infinite; }

        /* Orb color themes */
        .voice-overlay {
            --orb-light: #fda4af;
            --orb-mid: #ec4899;
            --orb-dark: #9d174d;
            --orb-glow: rgba(236, 72, 153, 0.4);
            --orb-glow-outer: rgba(236, 72, 153, 0.15);
        }

        .voice-overlay.theme-male {
            --orb-light: #93c5fd;
            --orb-mid: #3b82f6;
            --orb-dark: #1e3a5f;
            --orb-glow: rgba(59, 130, 246, 0.4);
            --orb-glow-outer: rgba(59, 130, 246, 0.15);
        }

        .voice-overlay.theme-other {
            --orb-light: #c4b5fd;
            --orb-mid: #8b5cf6;
            --orb-dark: #4c1d95;
            --orb-glow: rgba(139, 92, 246, 0.4);
            --orb-glow-outer: rgba(139, 92, 246, 0.15);
        }

        /* Voice chat button in input area */
        .voice-chat-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 2px solid var(--pink-300);
            background: transparent;
            color: var(--pink-400);
            font-size: 1.1em;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .voice-chat-btn:hover { background: var(--pink-100); border-color: var(--pink-500); color: var(--pink-500); }

        /* ── Scrollbar styling ───────────────────────── */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--pink-200); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--pink-300); }