/* ── Reset & Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #f5f6f8;
  --surface:   #ffffff;
  --border:    #e0e3e8;
  --text:      #1a1d23;
  --text-muted:#6b7280;
  --primary:   #2563eb;
  --primary-h: #1d4ed8;
  --user-bg:   #2563eb;
  --user-fg:   #ffffff;
  --assist-bg: #f1f3f5;
  --assist-fg: #1a1d23;
  --danger:    #dc2626;
  --radius:    8px;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

#app { height: 100%; display: flex; flex-direction: column; }

/* ── Auth pages ─────────────────────────────────── */
.auth-page {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.auth-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  padding: 2.5rem 2rem; width: 100%; max-width: 400px;
}
.auth-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: .25rem; }
.auth-card .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 1.5rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .25rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: .9375rem; background: var(--surface);
  transition: border-color .15s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

button, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1.25rem; border: none; border-radius: var(--radius);
  font-size: .9375rem; font-weight: 500; cursor: pointer; transition: background .15s;
}
.auth-card button[type="submit"], .btn-primary {
  width: 100%; background: var(--primary); color: #fff; margin-top: .5rem;
}
.btn-primary:hover { background: var(--primary-h); }

.btn-sm { padding: .35rem .75rem; font-size: .8125rem; width: auto; }

.btn-text {
  background: none; color: var(--text-muted); border: none; cursor: pointer; font-size: .875rem;
}
.btn-text:hover { color: var(--text); }

.switch { text-align: center; margin-top: 1rem; font-size: .875rem; color: var(--text-muted); }
.switch a { color: var(--primary); text-decoration: none; }

.error { color: var(--danger); font-size: .875rem; padding: .5rem 0; }

/* ── Top bar ────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem 1.25rem; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.topbar .logo { font-weight: 700; font-size: 1.125rem; }
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.user-name { font-size: .875rem; color: var(--text-muted); }

/* ── Side-by-side layout ───────────────────────── */
.app-layout {
  flex: 1; display: flex; flex-direction: row;
  overflow: hidden; min-height: 0;
}
.panel-workboard {
  flex: 7; overflow-y: auto; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.panel-chat {
  flex: 3; display: flex; flex-direction: column; overflow: hidden;
  min-height: 0; min-width: 280px;
}

/* ── Chat (compact sidebar) ────────────────────── */
.chat-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: .75rem;
  display: flex; flex-direction: column; gap: .5rem;
}

.chat-msg { display: flex; }
.chat-msg-user { justify-content: flex-end; }
.chat-msg-assistant { justify-content: flex-start; }

.chat-bubble {
  max-width: 95%; padding: .5rem .75rem; border-radius: var(--radius);
  font-size: .8125rem; line-height: 1.5; word-wrap: break-word;
  overflow-wrap: break-word;
}
.chat-msg-user .chat-bubble { background: var(--user-bg); color: var(--user-fg); border-bottom-right-radius: 2px; }
.chat-msg-assistant .chat-bubble { background: var(--assist-bg); color: var(--assist-fg); border-bottom-left-radius: 2px; }

/* Markdown inside bubbles */
.chat-bubble p { margin-bottom: .4em; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble code { background: rgba(0,0,0,.06); padding: .1em .3em; border-radius: 3px; font-size: .85em; }
.chat-bubble pre { background: rgba(0,0,0,.06); padding: .4rem; border-radius: 4px; overflow-x: auto; margin: .4em 0; }
.chat-bubble ul, .chat-bubble ol { padding-left: 1.25em; margin: .4em 0; }
.chat-bubble strong { font-weight: 600; }

/* KaTeX overrides inside bubbles */
.chat-bubble .katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; }
.chat-msg-user .chat-bubble .katex { color: var(--user-fg); }

/* Typing dots */
.typing-indicator .dots span {
  animation: blink 1.4s infinite; font-size: 1.5rem; line-height: 1;
}
.typing-indicator .dots span:nth-child(2) { animation-delay: .2s; }
.typing-indicator .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{ opacity:.2; } 40%{ opacity:1; } }

.chat-actions {
  display: flex; gap: .375rem; padding: .5rem .75rem .25rem;
  border-top: 1px solid var(--border); background: var(--surface);
}
.chat-action-btn {
  flex: 1; padding: .35rem .5rem; font-size: .75rem; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.chat-action-btn:hover:not(:disabled) { background: var(--bg); border-color: var(--primary); }
.chat-action-btn:disabled { opacity: .45; cursor: default; }
.chat-action-primary {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.chat-action-primary:hover:not(:disabled) { background: var(--primary-h); border-color: var(--primary-h); }

.chat-input-bar {
  display: flex; gap: .5rem; padding: .25rem .75rem .5rem;
  background: var(--surface);
}
.chat-input-bar textarea {
  flex: 1; resize: none; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .8125rem; font-family: inherit; line-height: 1.4;
}
.chat-input-bar textarea:focus { outline: none; border-color: var(--primary); }
.chat-input-bar button {
  background: var(--primary); color: #fff; border: none; border-radius: var(--radius);
  padding: .4rem 1rem; font-size: .8125rem; font-weight: 500; cursor: pointer;
}
.chat-input-bar button:hover { background: var(--primary-h); }

/* ── Workboard ──────────────────────────────────── */
.workboard { flex: 1; padding: 1.25rem; overflow-y: auto; }

.wb-topbar {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.wb-topbar select {
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; background: var(--surface); cursor: pointer;
}
.wb-topbar select:focus { outline: none; border-color: var(--primary); }

.wb-btn-new {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem 1rem; background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius); font-size: .875rem;
  font-weight: 500; cursor: pointer; transition: background .15s;
}
.wb-btn-new:hover { background: var(--primary-h); }
.wb-btn-new:disabled { opacity: .5; cursor: not-allowed; }

.wb-topbar-spacer { flex: 1; }
.wb-timer-label { font-size: .8125rem; color: var(--text-muted); white-space: nowrap; }

.empty { color: var(--text-muted); font-size: .875rem; padding: 2rem 0; text-align: center; }

/* ── Active problem card ─────────────────────────── */
.wb-active-area { margin-bottom: 1.5rem; }

.wb-empty-active {
  background: var(--surface); border: 2px dashed var(--border);
  border-radius: var(--radius); padding: 2rem; text-align: center;
}

.wb-loading {
  background: var(--surface); border: 2px dashed var(--primary);
  border-radius: var(--radius); padding: 3rem 2rem; text-align: center;
  color: var(--text-muted);
}
.wb-loading p { margin-top: 1rem; font-size: .9375rem; }
.wb-spinner {
  width: 32px; height: 32px; margin: 0 auto;
  border: 3px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: wb-spin .8s linear infinite;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }

.wb-active-card {
  background: var(--surface); border: 2px solid var(--primary);
  border-radius: var(--radius); padding: 1.25rem;
  box-shadow: 0 2px 12px rgba(37,99,235,.1);
}

.wb-active-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}

.wb-active-title-row { display: flex; align-items: center; gap: .5rem; }
.wb-active-title { font-weight: 700; font-size: 1.0625rem; }

.wb-difficulty {
  display: inline-block; padding: .125rem .5rem; border-radius: 4px;
  font-size: .75rem; font-weight: 600; text-transform: capitalize;
}
.wb-diff-easy   { background: #dcfce7; color: #166534; }
.wb-diff-medium { background: #fef9c3; color: #854d0e; }
.wb-diff-hard   { background: #fee2e2; color: #991b1b; }

/* Problem body */
.wb-active-body {
  padding: 1rem 0; font-size: .9375rem; line-height: 1.7;
  border-top: 1px solid var(--border);
}
.wb-active-body .katex-display { margin: .75em 0; overflow-x: auto; overflow-y: hidden; }

/* Feedback area */
.wb-feedback { margin-bottom: .75rem; }
.wb-feedback[hidden] { display: none; }
.wb-feedback-msg {
  padding: .75rem 1rem; border-radius: var(--radius);
  font-size: .875rem; line-height: 1.5;
}
.wb-feedback-incorrect { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.wb-feedback-correct   { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

/* Solution reveal */
.wb-solution-reveal {
  padding: .75rem 1rem; border-radius: var(--radius);
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  font-size: .875rem; margin-bottom: .75rem;
}

/* ── OMPT-style inline answer + buttons ───────────── */
.wb-answer-inline {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 0; flex-wrap: wrap;
}
.wb-answer-inline label {
  font-weight: 600; font-size: .9375rem; white-space: nowrap;
}
.wb-answer-inline input {
  flex: 1; min-width: 120px; max-width: 240px;
  padding: .45rem .65rem; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: .9375rem; background: var(--surface);
}
.wb-answer-inline input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.wb-answer-format {
  font-size: .8125rem; color: var(--text-muted); white-space: nowrap;
}

.wb-actions {
  display: flex; gap: .5rem; padding-top: .75rem;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}

.wb-btn-check {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1.5rem; background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius); font-size: .875rem;
  font-weight: 600; cursor: pointer; transition: background .15s;
}
.wb-btn-check:hover { background: var(--primary-h); }
.wb-btn-check:disabled { opacity: .5; cursor: not-allowed; }

.wb-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; cursor: pointer; transition: .15s;
}
.wb-btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.wb-btn-outline:disabled { opacity: .5; cursor: not-allowed; }
.wb-btn-outline.active { border-color: var(--primary); color: var(--primary); background: #eff6ff; }

/* ── Theory panel ─────────────────────────────────── */
.wb-theory {
  margin-top: .75rem; border: 1px solid #bfdbfe; border-radius: var(--radius);
  background: #eff6ff; overflow: hidden;
}
.wb-theory[hidden] { display: none; }
.wb-theory-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem; cursor: pointer; font-weight: 600; font-size: .875rem;
  color: #1e40af;
}
.wb-theory-header:hover { background: #dbeafe; }
.wb-theory-close {
  background: none; border: none; color: #1e40af; font-size: 1.125rem;
  cursor: pointer; line-height: 1; padding: 0 .25rem;
}
.wb-theory-body {
  padding: .75rem; font-size: .875rem; line-height: 1.6;
  border-top: 1px solid #bfdbfe;
}
.wb-theory-body .katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; }
.wb-theory-loading {
  color: var(--text-muted); font-style: italic;
}
.wb-theory-loading-wrap {
  display: flex; align-items: center; gap: .5rem;
  color: var(--text-muted); font-style: italic;
}
.wb-spinner-sm {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid #bfdbfe; border-top-color: #1e40af;
  border-radius: 50%; animation: wb-spin .8s linear infinite;
}

/* ── Calculator panel ──────────────────────────────── */
.wb-calc-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.2);
}
.wb-calc-overlay[hidden] { display: none; }

.wb-calc {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,.2); padding: 1rem;
  width: 260px;
}
.wb-calc-display {
  width: 100%; padding: .5rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 1.125rem; text-align: right;
  font-family: 'SF Mono', 'Fira Code', monospace; margin-bottom: .75rem;
  background: var(--bg);
}
.wb-calc-display:focus { outline: none; border-color: var(--primary); }

.wb-calc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem;
}
.wb-calc-grid button {
  padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; background: var(--surface); cursor: pointer;
  font-family: inherit; transition: .1s;
}
.wb-calc-grid button:hover { background: var(--bg); }
.wb-calc-grid button.calc-op { background: #eff6ff; color: var(--primary); font-weight: 600; }
.wb-calc-grid button.calc-op:hover { background: #dbeafe; }
.wb-calc-grid button.calc-eq {
  background: var(--primary); color: #fff; font-weight: 600;
  grid-column: span 2;
}
.wb-calc-grid button.calc-eq:hover { background: var(--primary-h); }
.wb-calc-grid button.calc-clear { color: var(--danger); font-weight: 600; }

.wb-calc-close {
  width: 100%; margin-top: .5rem; padding: .4rem;
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .8125rem; color: var(--text-muted); cursor: pointer;
}
.wb-calc-close:hover { color: var(--text); border-color: var(--text-muted); }

/* ── History ─────────────────────────────────────── */
.wb-history-section { margin-top: .5rem; }
.wb-history-section[hidden] { display: none; }
.wb-history-title {
  font-size: .9375rem; font-weight: 600; color: var(--text-muted);
  margin-bottom: .75rem;
}

.wb-list { display: flex; flex-direction: column; gap: .75rem; }

.wb-history-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1rem;
}
.wb-history-header {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.wb-history-title { font-weight: 500; font-size: .875rem; }
.wb-history-meta {
  display: flex; align-items: center; gap: .75rem; margin-top: .25rem;
  font-size: .8125rem; color: var(--text-muted);
}
.wb-history-date { margin-left: auto; }

/* Result badges */
.wb-badge {
  display: inline-block; padding: .125rem .5rem; border-radius: 4px;
  font-size: .75rem; font-weight: 600;
}
.wb-badge-correct   { background: #dcfce7; color: #166534; }
.wb-badge-incorrect { background: #fee2e2; color: #991b1b; }
.wb-badge-skipped   { background: #f1f5f9; color: #64748b; }
.wb-badge-timeout   { background: #fef9c3; color: #854d0e; }

/* ── Modal ──────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.modal-card {
  position: relative; background: var(--surface); border-radius: var(--radius);
  padding: 1.5rem; width: 90%; max-width: 500px; box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
.modal-card h3 { margin-bottom: 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.modal-actions .btn-primary { width: auto; }

/* ── Settings popup ────────────────────────────────── */
.settings-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
}
.settings-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
  width: 90%; max-width: 420px; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.settings-header h3 { font-size: 1.0625rem; font-weight: 700; }
.settings-close {
  background: none; border: none; font-size: 1.25rem;
  color: var(--text-muted); cursor: pointer; line-height: 1; padding: 0 .25rem;
}
.settings-close:hover { color: var(--text); }
.settings-section {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.settings-section:last-of-type { border-bottom: none; }
.settings-label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: .375rem; text-transform: uppercase;
  letter-spacing: .03em;
}
.settings-hint {
  font-size: .75rem; color: var(--text-muted); margin-bottom: .5rem;
}
.settings-row select {
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; background: var(--surface); cursor: pointer; width: 100%;
}
.settings-row select:focus { outline: none; border-color: var(--primary); }
.settings-subjects {
  max-height: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: .25rem;
}
.settings-checkbox {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; border-radius: var(--radius);
  cursor: pointer; font-size: .875rem;
  transition: background .1s;
}
.settings-checkbox:hover { background: var(--bg); }
.settings-checkbox input { margin: 0; cursor: pointer; accent-color: var(--primary); }
.settings-footer {
  padding: .75rem 1.25rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}

/* Gear icon button in topbar */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: .25rem; border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.btn-icon:hover { color: var(--text); background: var(--bg); }