/* ==========================================================
   TaalBuddy AI — Design tokens
   Palette inspired by Delft Blue pottery: cream canvas, deep
   cobalt ink, a single warm orange used sparingly (streaks/CTA).
   ========================================================== */
:root {
    --bg: #FAF7F0;
    --tile: #FFFFFF;
    --delft: #1B4B6B;
    --delft-dark: #0F2E44;
    --delft-soft: #E7EEF2;
    --orange: #E2662D;
    --ink: #1A1A1A;
    --ink-soft: #5B6570;
    --line: #D8CFC0;
    --radius: 3px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, .brand {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--delft-dark);
    letter-spacing: -0.01em;
}

.mono, .cefr-tag, .streak-count {
    font-family: 'IBM Plex Mono', monospace;
}

a { color: var(--delft); }

/* ---------- Top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    border-bottom: 1px solid var(--line);
    background: var(--tile);
}

.topbar .brand {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar .brand .tile-mark {
    width: 22px;
    height: 22px;
    background: var(--delft);
    border-radius: 2px;
    position: relative;
    flex-shrink: 0;
}
.topbar .brand .tile-mark::before,
.topbar .brand .tile-mark::after {
    content: "";
    position: absolute;
    background: var(--bg);
}
.topbar .brand .tile-mark::before {
    width: 2px; top: 4px; bottom: 4px; left: 50%; transform: translateX(-50%);
}
.topbar .brand .tile-mark::after {
    height: 2px; left: 4px; right: 4px; top: 50%; transform: translateY(-50%);
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.user-pill button {
    background: none;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
}
.user-pill button:hover { border-color: var(--delft); color: var(--delft); }

/* ---------- Auth screens ---------- */
.auth-wrap {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-card {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px;
    width: 100%;
    max-width: 400px;
}

.auth-card h1 {
    font-size: 1.8rem;
    margin: 0 0 6px;
}
.auth-card p.sub {
    color: var(--ink-soft);
    margin: 0 0 28px;
    font-size: 0.95rem;
}

label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    margin-bottom: 6px;
    margin-top: 16px;
}

input, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--bg);
}
input:focus, select:focus {
    outline: none;
    border-color: var(--delft);
}

button.primary {
    width: 100%;
    margin-top: 24px;
    padding: 12px;
    background: var(--delft);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s;
}
button.primary:hover { background: var(--delft-dark); }

.form-error {
    background: #FBEAE5;
    color: #A3391C;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    margin-top: 16px;
    display: none;
}

.switch-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.switch-link a { cursor: pointer; text-decoration: underline; }

/* ---------- Dashboard layout ---------- */
.dashboard {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: calc(100vh - 70px);
}

.sidebar {
    border-right: 1px solid var(--line);
    padding: 28px 24px;
    background: var(--tile);
}

.sidebar h2 {
    font-size: 1.1rem;
    margin: 0 0 4px;
}
.sidebar .sub {
    color: var(--ink-soft);
    font-size: 0.85rem;
    margin: 0 0 20px;
}

.progress-box {
    background: var(--delft-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.progress-box .streak-count {
    font-size: 1.4rem;
    color: var(--orange);
    font-weight: 600;
}
.progress-box .streak-label {
    font-size: 0.75rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scenario tiles — Delft-tile inspired cards */
.scenario-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.scenario-tile {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px 16px 52px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.scenario-tile:hover { border-color: var(--delft); background: var(--delft-soft); }
.scenario-tile.active {
    border-color: var(--delft);
    background: var(--delft-soft);
}

.scenario-tile .tile-icon {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 24px;
    height: 24px;
}
.scenario-tile .tile-icon svg { width: 100%; height: 100%; stroke: var(--delft); fill: none; stroke-width: 1.4; }

.scenario-tile .tile-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--delft-dark);
    margin-bottom: 3px;
}
.scenario-tile .tile-desc {
    font-size: 0.8rem;
    color: var(--ink-soft);
}
.cefr-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.7rem;
    background: var(--delft);
    color: white;
    padding: 2px 7px;
    border-radius: 2px;
    letter-spacing: 0.04em;
}

/* ---------- Chat area ---------- */
.chat-area {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px);
}

.chat-header {
    padding: 20px 32px;
    border-bottom: 1px solid var(--line);
}
.chat-header h2 { margin: 0 0 2px; font-size: 1.2rem; }
.chat-header .sub { color: var(--ink-soft); font-size: 0.85rem; }

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.chat-empty {
    margin: auto;
    text-align: center;
    color: var(--ink-soft);
    max-width: 320px;
}

.msg {
    max-width: 68%;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
}
.msg.user {
    align-self: flex-end;
    background: var(--delft);
    color: white;
    border-top-right-radius: 0;
}
.msg.ai {
    align-self: flex-start;
    background: var(--tile);
    border: 1px solid var(--line);
    border-top-left-radius: 0;
}
.msg .correction {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 0.8rem;
    color: var(--ink-soft);
    font-style: italic;
}
.msg.ai .correction { border-top-color: var(--line); }

.chat-input-bar {
    border-top: 1px solid var(--line);
    padding: 18px 32px 24px;
    display: flex;
    gap: 12px;
    background: var(--tile);
}
.chat-input-bar input {
    flex: 1;
}
.chat-input-bar button {
    background: var(--delft);
    color: white;
    border: none;
    padding: 0 24px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
}
.chat-input-bar button:hover { background: var(--delft-dark); }
.chat-input-bar button:disabled { background: var(--ink-soft); cursor: not-allowed; }

.mic-btn {
    background: var(--bg) !important;
    border: 1px solid var(--line) !important;
    color: var(--delft) !important;
    width: 44px;
    padding: 0 !important;
    font-size: 1.1rem;
}
.mic-btn:hover:not(:disabled) { border-color: var(--delft) !important; background: var(--delft-soft) !important; }
.mic-btn.recording {
    background: var(--orange) !important;
    color: white !important;
    border-color: var(--orange) !important;
    animation: pulse 1.2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(226,102,45,0.5); }
    70% { box-shadow: 0 0 0 8px rgba(226,102,45,0); }
    100% { box-shadow: 0 0 0 0 rgba(226,102,45,0); }
}

.speak-btn {
    background: none;
    border: none;
    color: var(--delft);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    margin-left: 8px;
    opacity: 0.7;
}
.speak-btn:hover { opacity: 1; }

.level-group-header {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
}
.level-group-header:first-child { margin-top: 0; }

/* ---------- Lesson tabs & panel ---------- */
.tab-row { display: flex; gap: 8px; margin-top: 14px; }
.tab-btn {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 7px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.tab-btn.active { background: var(--delft); color: white; border-color: var(--delft); }

.lesson-panel {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}
.lesson-panel h3 {
    font-size: 1rem;
    margin: 24px 0 12px;
}
.lesson-panel h3:first-child { margin-top: 0; }

.flashcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.flashcard {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 14px;
    cursor: pointer;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.15s;
    position: relative;
}
.flashcard:hover { border-color: var(--delft); }
.fc-speak {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
    opacity: 0.6;
    line-height: 1;
}
.fc-speak:hover { opacity: 1; }
.flashcard .fc-word {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--delft-dark);
    font-size: 1rem;
    margin-bottom: 4px;
}
.flashcard .fc-phonetic {
    font-size: 0.75rem;
    color: var(--ink-soft);
    font-style: italic;
}
.flashcard .fc-translation {
    display: none;
    font-size: 0.85rem;
    color: var(--ink);
    margin-top: 6px;
    border-top: 1px dashed var(--line);
    padding-top: 6px;
}
.flashcard .fc-translation .fa-line {
    color: var(--delft);
    direction: rtl;
    display: block;
    margin-top: 2px;
}
.flashcard.flipped .fc-translation { display: block; }
.flashcard.flipped .fc-word, .flashcard.flipped .fc-phonetic { opacity: 0.5; }

.grammar-note {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: 0.92rem;
}
.grammar-note p { margin: 0 0 12px; }
.grammar-note p:last-child { margin-bottom: 0; }

.quiz-question {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.quiz-question .q-text { font-weight: 500; margin-bottom: 10px; font-size: 0.92rem; }
.quiz-option {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
}
.quiz-option:hover:not(:disabled) { border-color: var(--delft); }
.quiz-option.correct { background: #E1F0E5; border-color: #1B6B3A; color: #1B6B3A; }
.quiz-option.incorrect { background: #FBEAE5; border-color: #A3391C; color: #A3391C; }
.quiz-option:disabled { cursor: default; }
.quiz-explanation {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
}

/* ---------- Lesson tabs ---------- */
.tab-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.tab-btn {
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 7px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.tab-btn.active {
    background: var(--delft);
    color: white;
    border-color: var(--delft);
}

/* ---------- Lesson panel ---------- */
.lesson-panel {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}
.lesson-panel h3 {
    font-size: 1rem;
    margin: 24px 0 12px;
    color: var(--delft-dark);
}
.lesson-panel h3:first-child { margin-top: 0; }

.flashcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.flashcard {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
    cursor: pointer;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.15s, border-color 0.15s;
}
.flashcard:hover { border-color: var(--delft); }
.flashcard.flipped {
    background: var(--delft-soft);
    font-style: italic;
    color: var(--delft-dark);
}
.flashcard .word { font-weight: 600; color: var(--delft-dark); }

.grammar-note {
    background: var(--delft-soft);
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ink);
}

.quiz-question {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.quiz-question .q-text {
    font-weight: 500;
    margin-bottom: 10px;
}
.quiz-options {
    display: grid;
    gap: 8px;
}
.quiz-option {
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 9px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
}
.quiz-option:hover:not(:disabled) { border-color: var(--delft); }
.quiz-option.correct { background: #E1F0E5; border-color: #1B6B3A; color: #1B6B3A; }
.quiz-option.incorrect { background: #FBEAE5; border-color: #A3391C; color: #A3391C; }
.quiz-option:disabled { cursor: default; }

.typing-indicator {
    align-self: flex-start;
    color: var(--ink-soft);
    font-size: 0.85rem;
    font-style: italic;
}

@media (max-width: 800px) {
    .dashboard { grid-template-columns: 1fr; }
    .sidebar { border-right: none; border-bottom: 1px solid var(--line); }
    .chat-area { height: auto; }
    .msg { max-width: 85%; }
}