/* === Linguy Styles === */
:root {
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --secondary: #00CEC9;
    --accent: #FD79A8;
    --bg: #EDEEF5;
    --card-bg: #FFFFFF;
    --text: #2D3436;
    --text-light: #636E72;
    --user-bubble: #6C5CE7;
    --bot-bubble: #FFFFFF;
    --danger: #FF6B6B;
    --success: #00B894;
    --shadow: 0 2px 15px rgba(0,0,0,0.08);
    --radius: 16px;
    --radius-sm: 10px;
    --font-size-latin: 16px;
    --font-size-cjk: 20px;
}

/* Dark theme */
:root[data-theme="dark"] {
    --bg: #1a1a2e;
    --bg-secondary: #16213e;
    --card-bg: #222244;
    --text: #e0e0e0;
    --text-light: #a0a0a0;
    --primary: #7c73e6;
    --primary-light: #9d96f0;
    --user-bubble: #6C63FF;
    --bot-bubble: #2a2a4a;
    --danger: #ff6b6b;
    --success: #00b894;
    --shadow: 0 2px 15px rgba(0,0,0,0.3);
    --border: #333;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .history-panel,
:root[data-theme="dark"] .admin-card,
:root[data-theme="dark"] .screen-header,
:root[data-theme="dark"] .settings-section,
:root[data-theme="dark"] .stat-card {
    background: var(--card-bg); color: var(--text);
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: #2a2a4a; color: var(--text); border-color: #444;
}
:root[data-theme="dark"] .chat-area { background: var(--bg); }
:root[data-theme="dark"] .welcome-message { color: var(--text); }
:root[data-theme="dark"] .login-container { background: var(--bg); }
:root[data-theme="dark"] .logo { color: var(--primary); }
:root[data-theme="dark"] .badge { border-color: #444; }
:root[data-theme="dark"] .msg-bot .msg-content { background: var(--bot-bubble); color: var(--text); }
:root[data-theme="dark"] .msg-user .msg-content { background: var(--user-bubble); color: #fff; }
:root[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
:root[data-theme="dark"] .btn:not(.btn-primary) { background: #2a2a4a; color: var(--text); border-color: #444; }
:root[data-theme="dark"] #chat-header { background: var(--card-bg); }
:root[data-theme="dark"] .theme-card .tc-label { color: #e0e0e0; font-weight: 700; }
:root[data-theme="dark"] .theme-card .tc-level { color: var(--primary-light); }
:root[data-theme="dark"] .theme-category { color: #c0c0c0; }
:root[data-theme="dark"] footer { background: var(--card-bg); }
:root[data-theme="dark"] #chat-input-area { background: var(--card-bg); box-shadow: 0 -2px 10px rgba(0,0,0,0.3); }
:root[data-theme="dark"] .chat-input { background: #2a2a4a; color: var(--text); border-color: #444; }
:root[data-theme="dark"] #transcription-preview { background: #2a2a4a; color: var(--primary); }
:root[data-theme="dark"] .btn-icon { color: var(--text); }
:root[data-theme="dark"] .btn-icon:hover { background: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .safety-item { background: var(--card-bg); border-color: #444; }
:root[data-theme="dark"] .user-item { background: var(--card-bg); }
:root[data-theme="dark"] .lang-badge { background: #2a2a4a; color: var(--text); }

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

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.hidden { display: none !important; }

/* Screens */
.screen { display: none; height: 100vh; height: 100dvh; flex-direction: column; }
.screen.active { display: flex; }

/* === LOGIN === */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 2rem;
    text-align: center;
}

.logo {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.tagline {
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.form-group { margin-bottom: 1rem; width: 100%; max-width: 320px; }

.form-group input, .form-group select {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #E0E0E0;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color 0.2s;
    background: white;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

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

.btn-primary:hover { background: var(--primary-light); }

.btn-large {
    padding: 16px 40px;
    font-size: 1.1rem;
    border-radius: var(--radius);
}

.btn-icon {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
}

.btn-icon:hover { background: rgba(0,0,0,0.05); }

.btn-small {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px 8px;
    color: var(--text-light);
}

.error-msg { color: var(--danger); margin-top: 1rem; font-size: 0.9rem; }

/* === CHAT HEADER === */
#chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    box-shadow: var(--shadow);
    z-index: 10;
    flex-shrink: 0;
}

.header-left { display: flex; align-items: center; gap: 8px; }
.header-right { display: flex; gap: 4px; }

.greeting {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
}

.lang-badge {
    background: var(--secondary);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* === CHAT AREA === */
.chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.welcome-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

.welcome-emoji { font-size: 3rem; margin-bottom: 1rem; }

.message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: var(--radius);
    line-height: 1.5;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
    /* All messages left-aligned by default */
    align-self: flex-start;
}

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

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

.message.assistant {
    background: var(--bot-bubble);
    color: var(--text);
    border: 1px solid #E8E8E8;
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow);
}

/* Subtle tint: native = légèrement gris, foreign = légèrement teinté primaire */
.message.assistant.native-msg {
    background: #f3f1f8;
}
.message.assistant.foreign-msg {
    background: #f0eeff;
    border-left: 2px solid var(--primary-light);
}

/* RTL: user messages go right */
.message.user[dir="rtl"] {
    align-self: flex-end;
}

.message .audio-btn {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
}

.message .transcription {
    display: block;
    font-style: italic;
    opacity: 0.7;
    margin-top: 4px;
    font-size: 0.85rem;
}

.message .detected-langs {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 6px;
}

.typing-indicator {
    align-self: flex-start;
    padding: 12px 20px;
    background: var(--bot-bubble);
    border-radius: var(--radius);
    border: 1px solid #E8E8E8;
}

.typing-indicator span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--primary-light);
    border-radius: 50%;
    margin: 0 2px;
    animation: bounce 1.4s infinite ease-in-out;
}

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

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* === INPUT AREA === */
#chat-input-area {
    padding: 12px 16px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    flex-shrink: 0;
}

#transcription-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F0F0FF;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--primary);
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

#chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #E8E8E8;
    border-radius: var(--radius);
    font-size: 1rem;
    resize: none;
    min-height: 56px;
    max-height: 120px;
    line-height: 1.4;
    font-family: inherit;
}

#chat-input:focus {
    outline: none;
    border-color: var(--primary);
}

#btn-send {
    width: 48px;
    height: 56px;
    border-radius: var(--radius);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

/* Mic button */
.btn-mic {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 56px;
    border-radius: var(--radius);
    background: white;
    border: 2px solid var(--primary);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--primary);
}

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

.btn-mic:active {
    transform: scale(0.92);
}

.btn-mic .mic-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.btn-mic.recording {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,107,107,0.4); }
    70% { box-shadow: 0 0 0 15px rgba(255,107,107,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}

.mic-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--danger);
    animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* === SCREEN HEADERS === */
.screen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    box-shadow: var(--shadow);
}

.screen-header h2 {
    font-size: 1.1rem;
    color: var(--primary);
}

.screen-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* === ADMIN === */
.admin-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-tab {
    padding: 6px 12px;
    border: 2px solid #E0E0E0;
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.admin-tab.active {
    border-color: var(--primary);
    color: var(--primary);
    background: #F0F0FF;
}

.admin-card {
    background: white;
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.admin-card h3 {
    color: var(--primary);
    margin-bottom: 8px;
}

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

.stat-card {
    background: white;
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 4px;
}

.user-item, .safety-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #F0F0F0;
}

.user-item:last-child, .safety-item:last-child { border-bottom: none; }

.badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
}

.badge-admin { background: var(--primary-light); color: white; }
.badge-child { background: var(--secondary); color: white; }
.badge-danger { background: var(--danger); color: white; }

.add-user-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.add-user-form input, .add-user-form select {
    padding: 10px;
    border: 2px solid #E0E0E0;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.add-user-form button {
    grid-column: 1 / -1;
}

/* === PROGRESSION === */
.progress-item {
    background: white;
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
}

.progress-bar-container {
    height: 8px;
    background: #E8E8E8;
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-bar.beginner { width: 25%; background: var(--danger); }
.progress-bar.elementary { width: 50%; background: var(--accent); }
.progress-bar.intermediate { width: 75%; background: var(--primary); }
.progress-bar.advanced { width: 100%; background: var(--success); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .message { max-width: 90%; }
    .logo { font-size: 2.5rem; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .add-user-form { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .greeting { font-size: 0.95rem; }
    .message { padding: 10px 12px; font-size: 0.95rem; }
    #chat-input { padding: 10px 12px; }
}

/* Now-playing animation */
.message.now-playing {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 8px rgba(0, 206, 201, 0.3), var(--shadow);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.message.assistant.now-playing {
    border-left: 3px solid var(--secondary);
}

/* Message labels */
.msg-label {
    font-size: 0.85em;
    margin-right: 4px;
}

/* User audio re-listen button */
.user-audio-btn {
    opacity: 0.7;
}
.user-audio-btn:hover {
    opacity: 1;
}

.karaoke-word {
    transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
    border-radius: 3px;
    padding: 0 1px;
}

.karaoke-active {
    color: var(--kk-color, var(--primary)) !important;
    background: rgba(108, 92, 231, 0.12);
    font-weight: 700;
    border-radius: 3px;
}

.karaoke-active.foreign-msg {
    color: var(--kk-color, var(--primary)) !important;
    background: rgba(108, 92, 231, 0.18);
}

/* Scrollbar */
.chat-area::-webkit-scrollbar { width: 6px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: #D0D0D0; border-radius: 3px; }

/* Conversations Panel */
.history-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 90;
}
.history-panel {
    position: fixed; top: 0; left: 0; bottom: 0; width: 420px;
    background: white; z-index: 100; box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; transform: translateX(0);
    transition: transform 0.25s ease;
}
.history-panel.hidden { transform: translateX(-100%); }
.history-header {
    padding: 12px 16px; border-bottom: 1px solid #E8E8E8;
}
.history-header h3 { margin: 0 0 6px 0; font-size: 1.1rem; }
.history-actions {
    display: flex; gap: 8px; align-items: center;
}
.history-actions input {
    flex: 1; padding: 6px 10px; border: 1px solid #D0D0D0; border-radius: var(--radius);
    font-size: 0.85rem;
}
.btn-small { font-size: 0.8rem; padding: 6px 12px; }
.conv-tabs {
    display: flex; gap: 4px;
}
.conv-tab {
    flex: 1; padding: 6px 10px; border: 1px solid #ddd; border-radius: 8px;
    background: transparent; cursor: pointer; font-size: 0.85rem; text-align: center;
    transition: all 0.15s;
}
.conv-tab.active {
    background: var(--primary); color: white; border-color: var(--primary);
}
.conv-tab:not(.active):hover { background: #f0f0f0; }
.history-item {
    padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
    display: flex; align-items: flex-start; gap: 6px;
    transition: background 0.15s;
}
.history-item:hover { background: #F0F0FF; }
.history-item.active { background: var(--user-bubble); color: white; }
.history-item .hi-checkbox { flex-shrink: 0; margin-top: 4px; }
.history-item .hi-flag { flex-shrink: 0; margin-top: 2px; }
.history-item .hi-info { flex: 1; min-width: 0; cursor: pointer; }
.history-item .hi-title { font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.3; }
.history-item .hi-custom-title { font-size: 0.78rem; color: var(--text-light); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item .hi-meta { font-size: 0.72rem; opacity: 0.7; margin-top: 2px; }
.history-item .hi-actions { display: flex; gap: 2px; flex-shrink: 0; margin-top: 2px; }
.history-item .hi-action-btn {
    background: none; border: none; color: #999; cursor: pointer; font-size: 0.9rem; padding: 2px 4px; border-radius: 4px;
}
.history-item .hi-action-btn:hover { color: var(--danger); background: #fff0f0; }
.history-item .hi-username { font-size: 0.7rem; color: var(--primary); font-weight: 600; }
.history-item .hi-rename-input {
    font-size: 0.78rem; padding: 2px 6px; border: 1px solid var(--primary); border-radius: 4px;
    width: 100%; outline: none;
}
@media (max-width: 500px) {
    .history-panel { width: 100%; }
}
#btn-history { font-size: 1.2rem; background: none; border: none; cursor: pointer; padding: 4px 8px; }
#btn-history:hover { opacity: 0.7; }

/* XP Display */
.xp-display {
    display: flex; align-items: center; gap: 6px; font-size: 0.75rem;
}
.xp-level { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.xp-bar-container {
    width: 60px; height: 6px; background: #E8E8E8; border-radius: 3px; overflow: hidden;
}
.xp-bar {
    height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 3px; transition: width 0.5s ease;
}
.xp-title { font-size: 0.7rem; color: var(--text-light); white-space: nowrap; }

/* XP Animations */
.xp-animations {
    position: fixed; top: 60px; right: 20px; z-index: 200;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.xp-popup {
    padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 700;
    animation: xpFloat 2s ease-out forwards; pointer-events: none;
    white-space: nowrap;
}
.xp-popup.gain { background: #10B981; color: white; }
.xp-popup.miss { background: #F59E0B; color: white; }
.xp-popup.levelup {
    background: linear-gradient(135deg, #8B5CF6, #EC4899); color: white;
    font-size: 1.1rem; padding: 10px 20px;
    animation: xpLevelUp 2.5s ease-out forwards;
}
@keyframes xpFloat {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}
@keyframes xpLevelUp {
    0% { opacity: 0; transform: translateY(20px) scale(0.5); }
    20% { opacity: 1; transform: translateY(-5px) scale(1.2); }
    40% { transform: translateY(0) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-30px) scale(0.9); }
}

/* Progress Screen */
.progress-container { max-width: 800px; margin: 0 auto; padding: 20px; }
.progress-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.progress-header h2 { margin: 0; }
.progress-profile { text-align: center; padding: 16px; background: white; border-radius: var(--radius); box-shadow: var(--shadow); }
.progress-profile .pp-title { font-size: 1.3rem; font-weight: 700; }
.progress-profile .pp-xp { color: var(--text-light); font-size: 0.9rem; }
.progress-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.theme-card {
    padding: 10px 12px; background: white; border-radius: var(--radius); box-shadow: var(--shadow);
    border-left: 3px solid var(--primary);
}
.theme-card .tc-header { display: flex; justify-content: space-between; align-items: center; }
.theme-card .tc-icon { font-size: 1.2rem; }
.theme-card .tc-label { font-weight: 600; font-size: 0.85rem; }
.theme-card .tc-level { font-size: 0.75rem; color: var(--primary); font-weight: 700; }
.theme-card .tc-xp { font-size: 0.7rem; color: var(--text-light); margin-top: 4px; }
.theme-category { font-size: 0.75rem; color: var(--text-light); text-transform: uppercase; font-weight: 700; margin: 16px 0 8px; }

/* Settings */
.settings-group { padding: 0 20px 20px; }
.settings-group h3 { margin-bottom: 16px; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.settings-group label { display: block; margin-bottom: 16px; font-weight: 500; }
.settings-group input[type="range"] {
    flex: 1; accent-color: var(--primary);
}
.settings-group span { font-size: 0.9rem; color: var(--text-light); margin-left: 8px; }

/* Settings sections */
.settings-section {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

/* Setting label row */
.setting-label {
    display: flex; align-items: center; gap: 6px;
}

/* Range slider row */
.range-row {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.range-label {
    font-size: 0.75rem; color: var(--text-light); white-space: nowrap; min-width: 32px; text-align: center;
}
.range-value {
    display: inline-block; background: var(--primary); color: white;
    padding: 2px 10px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; margin-top: 6px;
}

/* Checkbox labels */
.checkbox-label {
    display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer;
    padding: 12px; border-radius: var(--radius-sm); transition: background 0.15s;
}
.checkbox-label:hover { background: #F8F8FF; }
.checkbox-label input[type="checkbox"] {
    width: 22px; height: 22px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0;
}
.checkbox-label div { flex: 1; }
.checkbox-label span { font-weight: 600; color: var(--text); margin-left: 0; font-size: 0.95rem; }
.checkbox-label small {
    display: block; font-size: 0.8rem; color: var(--text-light); margin-top: 4px; line-height: 1.4; margin-left: 0;
}

/* Help bubbles */
.help-bubble {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary-light); color: white;
    font-size: 0.7rem; font-weight: 700; cursor: help;
    position: relative; transition: background 0.2s;
}
.help-bubble:hover { background: var(--primary); }
.help-bubble::after {
    content: attr(data-help);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: #2D3436; color: white; padding: 10px 14px;
    border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 400;
    width: 260px; line-height: 1.4; z-index: 1000;
    opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.help-bubble:hover::after { opacity: 1; visibility: visible; }
/* Arrow */
.help-bubble::before {
    content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #2D3436;
    opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s;
    z-index: 1001;
}
.help-bubble:hover::before { opacity: 1; visibility: visible; }
/* Mobile: tap to toggle */
@media (max-width: 768px) {
    .help-bubble.active::after, .help-bubble.active::before {
        opacity: 1; visibility: visible;
    }
}

/* Settings - white text on range values + date input */
.range-value {
  color: white !important;
}
#input-birth-date {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary-light);
}
#input-birth-date::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Settings footer */
.settings-footer {
    text-align: center; padding-top: 8px;
}
.btn-block { width: 100%; }
.settings-hint {
    font-size: 0.8rem; color: var(--text-light); margin-top: 12px; line-height: 1.4;
}

/* Inline images in chat */
.msg-image {
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 280px;
}
.msg-image img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

/* Photo preview */
.photo-preview {
    position: relative;
    padding: 8px;
    max-width: 200px;
}
.photo-preview img {
    width: 100%;
    border-radius: 8px;
    display: block;
}

/* Image thumbnails in chat */
.msg-image {
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
    max-width: 200px;
    max-height: 150px;
    cursor: pointer;
    display: inline-block;
}
.msg-image img {
    max-width: 180px;
    max-height: 140px;
    width: auto;
    height: auto;
    border-radius: 12px;
    display: block;
}
.msg-image:hover {
    opacity: 0.85;
    transform: scale(1.02);
    transition: all 0.15s;
}

/* Fullscreen image overlay */
.image-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.image-overlay.hidden { display: none; }
.image-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 8px;
    object-fit: contain;
}

/* Photo preview improved */
.photo-preview {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
}

/* === Word click-to-hear === */
.word-btn {
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s;
    display: inline-block;
    position: relative;
    z-index: 3;
    padding: 2px 1px;
    margin: 0;
    /* Ensure large enough touch target */
    min-height: 24px;
    line-height: 1.6;
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.2);
}
.word-btn:hover {
    background: rgba(108, 92, 231, 0.15);
}
.word-btn:active {
    background: rgba(108, 92, 231, 0.3);
}

/* === Translation subtitle === */
.msg-translation {
    font-size: 0.82em;
    color: var(--text-light);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.3;
}

/* === Font size by script === */
.msg-latin .msg-content { font-size: var(--font-size-latin); }
.msg-cjk .msg-content { font-size: var(--font-size-cjk); }

/* === Global snail toggle === */
.snail-btn.active {
    background: rgba(108, 92, 231, 0.15);
    border-radius: 50%;
}

/* === DARK THEME COMPREHENSIVE OVERRIDES === */
:root[data-theme="dark"] .progress-item,
:root[data-theme="dark"] .progress-profile,
:root[data-theme="dark"] .theme-card {
    background: var(--card-bg); color: var(--text);
}
:root[data-theme="dark"] .admin-tab {
    background: #2a2a4a; color: var(--text); border-color: #444;
}
:root[data-theme="dark"] .admin-tab.active {
    background: var(--primary); color: white; border-color: var(--primary);
}
:root[data-theme="dark"] .hi-rename-input {
    background: #1a1a2e; color: var(--text); border-color: #555;
}
:root[data-theme="dark"] .hi-custom-title {
    color: var(--text-light);
}
:root[data-theme="dark"] .conv-tab {
    background: var(--bg-secondary); color: var(--text);
}
:root[data-theme="dark"] .conv-tab.active {
    background: var(--primary); color: white;
}
:root[data-theme="dark"] .history-item {
    border-color: #333;
}
:root[data-theme="dark"] .history-item:hover {
    background: #2a2a4a;
}
:root[data-theme="dark"] .history-search,
:root[data-theme="dark"] .history-actions input {
    background: #2a2a4a; color: var(--text); border-color: #444;
}
:root[data-theme="dark"] .settings-section {
    background: var(--card-bg);
}
:root[data-theme="dark"] .setting-row {
    border-color: #333;
}
:root[data-theme="dark"] table {
    border-color: #333;
}
:root[data-theme="dark"] th {
    background: #1a1a2e; color: var(--text);
}
:root[data-theme="dark"] td {
    border-color: #333; color: var(--text);
}
:root[data-theme="dark"] .xp-bar-container {
    background: #333;
}
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group select {
    background: #2a2a4a; color: var(--text); border-color: #444;
}
:root[data-theme="dark"] .btn-mic {
    background: #2a2a4a; border-color: var(--primary); color: var(--primary);
}
:root[data-theme="dark"] #transcription-preview {
    background: #2a2a4a;
}
:root[data-theme="dark"] .msg-content {
    color: var(--text);
}
:root[data-theme="dark"] .message.assistant.native-msg {
    background: #2a2a4a;
}
:root[data-theme="dark"] .message.assistant.foreign-msg {
    background: #222244; border-left-color: var(--primary-light);
}
:root[data-theme="dark"] .checkbox-label:hover {
    background: #2a2a4a;
}
:root[data-theme="dark"] .progress-bar-container {
    background: #333;
}
:root[data-theme="dark"] .conv-tab:not(.active):hover {
    background: #2a2a4a;
}
:root[data-theme="dark"] .history-header {
    border-color: #333;
}
:root[data-theme="dark"] .hi-action-btn:hover {
    background: #3a1a1a;
}
/* Override inline background:white/#fff in dark mode */
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"] {
    background: var(--card-bg) !important;
}


/* Word translation tooltip */
.word-btn { position: relative; cursor: pointer; }
.word-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: none;
    min-width: 60px;
    text-align: center;
    line-height: 1.3;
}
.word-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}
.word-tooltip .wt-primary { font-weight: 700; }
.word-tooltip .wt-others { opacity: 0.7; font-size: 0.78rem; }

/* User translation display */
.user-translation {
    display: inline-block;
    background: rgba(0,0,0,0.05);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 4px;
    font-size: 0.82rem;
    color: #888;
    font-style: italic;
}

/* Romanization display under native text */
.msg-romanization {
    display: block;
    color: #999;
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
}

/* Romanization display under native text */
.msg-romanization {
    display: block;
    color: #999;
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
}

/* === Word Translation Panel === */
.word-panel {
    position: fixed;
    top: 56px; /* below top bar */
    bottom: 60px; /* above input area */
    right: 0;
    width: 240px;
    max-width: 40vw;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    z-index: 80;
    display: flex;
    flex-direction: column;
    padding: 40px 16px 16px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    overflow-y: auto;
}
.word-panel.hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.wp-fade {
    animation: wpFadeIn 0.2s ease;
}
@keyframes wpFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.wp-word {
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    word-break: break-all;
}
.wp-primary {
    font-size: 1.1rem;
    color: var(--primary, #6c5ce7);
    font-weight: 600;
    margin-bottom: 6px;
}
.wp-others {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
}

/* Registration language dropdown */
#reg-lang-chevron.open {
    transform: rotate(180deg);
}
.reg-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.reg-lang-item:hover {
    background: #f5f0ff;
    transform: scale(1.02);
}
.reg-lang-item.selected {
    background: var(--primary);
    color: white;
}
.reg-lang-item.selected .reg-lang-native { color: rgba(255,255,255,0.8); }
.reg-lang-cat {
    font-size: 0.75rem;
    color: var(--text-light);
    padding: 6px 12px 2px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
:root[data-theme="dark"] #reg-lang-dropdown { background: #1e1e2e; border-color: var(--primary); }
:root[data-theme="dark"] #reg-lang-trigger { background: var(--card-bg); border-color: #444; }
:root[data-theme="dark"] .reg-lang-item:hover { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .reg-lang-item.selected { background: var(--primary); }