/* components.css — Vibe Learn component styles */

/* ── Progress bar (meter-based, no inline styles needed) ───────── */
.vs-progress { display: flex; align-items: center; gap: 8px; }
.vs-progress-sm .vs-progress-meter { height: 4px; }
.vs-progress-md .vs-progress-meter { height: 6px; }
.vs-progress-meter {
  flex: 1; border: none; height: 6px; border-radius: var(--r-pill);
  background: var(--border-subtle); overflow: hidden;
  appearance: none; -webkit-appearance: none;
}
/* WebKit */
.vs-progress-meter::-webkit-meter-bar { background: var(--border-subtle); border: none; border-radius: var(--r-pill); }
.vs-progress-meter::-webkit-meter-optimum-value { background: var(--accent-primary); border-radius: var(--r-pill); }
/* Firefox */
.vs-progress-meter::-moz-meter-bar { background: var(--accent-primary); border-radius: var(--r-pill); }
.vs-progress-label { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Button ─────────────────────────────────────────────────────── */
.vs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: 1px solid transparent; border-radius: var(--r-md);
  cursor: default; font-weight: 500; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease,
              transform .08s ease, box-shadow .12s ease;
  text-decoration: none; user-select: none;
}
.vs-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; border-radius: var(--r-sm); }
.vs-btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
.vs-btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
.vs-btn-full { width: 100%; }

.vs-btn-primary {
  background: var(--accent-primary); color: var(--text-on-accent);
  border-color: var(--accent-primary);
}
.vs-btn-primary:hover { background: var(--accent-primary-hover); border-color: var(--accent-primary-hover); text-decoration: none; }
.vs-btn-primary:active { transform: translateY(1px); }

.vs-btn-secondary {
  background: var(--bg-surface); color: var(--text-primary);
  border-color: var(--border-default);
}
.vs-btn-secondary:hover { background: var(--bg-surface-raised); border-color: var(--border-strong); text-decoration: none; color: var(--text-primary); }

.vs-btn-ghost {
  background: transparent; color: var(--text-primary); border-color: transparent;
}
.vs-btn-ghost:hover { background: var(--bg-surface-raised); text-decoration: none; color: var(--text-primary); }

.vs-btn-danger {
  background: var(--accent-danger); color: var(--color-white); border-color: var(--accent-danger);
}
.vs-btn-danger:hover { background: var(--color-poster-accent); border-color: var(--color-poster-accent); text-decoration: none; color: var(--color-white); }

.vs-btn-link {
  background: transparent; color: var(--accent-primary); border-color: transparent;
  padding: 0; height: auto;
}
.vs-btn-link:hover { text-decoration: underline; }

.vs-btn:disabled, .vs-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}
.vs-btn.is-loading { pointer-events: none; }
.vs-btn-spin { display: inline-flex; animation: vs-spin 1s linear infinite; }
.vs-btn-ic { display: inline-flex; }

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

/* ── Card ──────────────────────────────────────────────────────── */
.vs-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 0;
}
.vs-card-raised { background: var(--bg-surface-raised); border-color: var(--border-subtle); }
.vs-card-int { cursor: default; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.vs-card-int:hover { border-color: var(--border-default); box-shadow: var(--shadow-card); }
.vs-card-accent { border-left-width: 3px; }
.vs-card-accent-success { border-left-color: var(--accent-success); }
.vs-card-accent-danger { border-left-color: var(--accent-danger); }
.vs-card-accent-warning { border-left-color: var(--accent-warning); }
.vs-card-accent-info { border-left-color: var(--accent-info); }
.vs-card-accent-primary { border-left-color: var(--accent-primary); }

/* ── Chip ──────────────────────────────────────────────────────── */
.vs-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--r-pill); font-weight: 500;
  background: var(--bg-surface-raised); color: var(--text-secondary);
  white-space: nowrap;
}
.vs-chip-md { height: 24px; padding: 0 10px; font-size: 12px; }
.vs-chip-sm { height: 20px; padding: 0 8px; font-size: 11px; }
.vs-chip-lg { height: 28px; padding: 0 12px; font-size: 13px; }
.vs-chip-info { background: var(--accent-info-soft); color: var(--accent-info); }
.vs-chip-success { background: var(--accent-success-soft); color: var(--accent-success); }
.vs-chip-warning { background: var(--accent-warning-soft); color: var(--accent-warning); }
.vs-chip-danger { background: var(--accent-danger-soft); color: var(--accent-danger); }
.vs-chip-primary { background: var(--accent-primary-soft); color: var(--accent-primary-hover); }
.vs-chip-ic { display: inline-flex; }

/* ── Status icon ───────────────────────────────────────────────── */
.vs-status { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; flex: 0 0 auto; }
/* Status sizes — replace inline style="width:Npx;height:Npx;" on vs-status */
.vs-status-sz-14 { width: 14px; height: 14px; }
.vs-status-sz-16 { width: 16px; height: 16px; }
.vs-status-sz-18 { width: 18px; height: 18px; }
.vs-status-sz-20 { width: 20px; height: 20px; }
.vs-status-sz-24 { width: 24px; height: 24px; }
.vs-status-completed { background: var(--accent-success); color: var(--color-white); }
.vs-status-progress  { background: var(--accent-primary-soft); position: relative; }
.vs-status-progress .vs-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary);
  animation: vs-pulse 1.6s ease-in-out infinite;
}
@keyframes vs-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.7); opacity: .55; }
}
.vs-status-empty   { border: 1.5px solid var(--border-default); }
.vs-status-locked  { color: var(--text-tertiary); }

/* ── Progress ──────────────────────────────────────────────────── */
.vs-progress { display: flex; align-items: center; gap: 10px; width: 100%; }
.vs-progress-track {
  flex: 1; height: 6px; background: var(--bg-surface-raised);
  border-radius: var(--r-pill); overflow: hidden;
}
.vs-progress-sm .vs-progress-track { height: 4px; }
.vs-progress-lg .vs-progress-track { height: 8px; }
.vs-progress-fill {
  height: 100%; border-radius: var(--r-pill);
  transition: width .4s cubic-bezier(.4,.2,.2,1);
}
.vs-progress-primary { background: var(--accent-primary); }
.vs-progress-success { background: var(--accent-success); }
.vs-progress-warning { background: var(--accent-warning); }
.vs-progress-label { white-space: nowrap; }

/* ── Input ─────────────────────────────────────────────────────── */
.vs-input-row { display: flex; flex-direction: column; gap: 6px; }
.vs-input-label { letter-spacing: 0.06em; }
.vs-input-wrap { position: relative; display: flex; align-items: stretch; }
.vs-input {
  flex: 1; height: 40px; padding: 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font-size: 14px; color: var(--text-primary);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
.vs-input::placeholder { color: var(--text-tertiary); }
.vs-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px var(--accent-primary-ring);
}
.vs-input-mono { font-family: var(--font-mono); }
.vs-textarea { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.55; height: auto; }
.vs-input-row.has-error .vs-input { border-color: var(--accent-danger); }
.vs-input-row.has-error .vs-input:focus { box-shadow: 0 0 0 4px rgba(210, 71, 71, .18); }
.vs-input-msg-error { color: var(--accent-danger); }
.vs-input-trailing {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: default; padding: 6px;
  color: var(--text-tertiary); border-radius: var(--r-sm);
}
.vs-input-trailing:hover { color: var(--text-secondary); background: var(--bg-surface-raised); }

/* ── Callout ───────────────────────────────────────────────────── */
.vs-callout {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border-left: 3px solid;
}
.vs-callout-ic { flex: 0 0 auto; margin-top: 4px; }
.vs-callout-body { flex: 1; min-width: 0; }
.vs-callout-body .t-body { margin-top: 2px; }
.vs-callout-info     { background: var(--accent-info-soft);    border-left-color: var(--accent-info);    color: var(--text-primary); }
.vs-callout-info .vs-callout-ic    { color: var(--accent-info); }
.vs-callout-tip      { background: var(--accent-success-soft); border-left-color: var(--accent-success); }
.vs-callout-tip .vs-callout-ic     { color: var(--accent-success); }
.vs-callout-warning  { background: var(--accent-warning-soft); border-left-color: var(--accent-warning); }
.vs-callout-warning .vs-callout-ic { color: var(--accent-warning); }
.vs-callout-note     { background: var(--bg-surface-raised);   border-left-color: var(--border-strong); }
.vs-callout-note .vs-callout-ic    { color: var(--text-secondary); }
.vs-callout-success  { background: var(--accent-success-soft); border-left-color: var(--accent-success); }
.vs-callout-success .vs-callout-ic { color: var(--accent-success); }
.vs-callout-danger   { background: var(--accent-danger-soft);  border-left-color: var(--accent-danger); }
.vs-callout-danger .vs-callout-ic  { color: var(--accent-danger); }

/* ── Code block ────────────────────────────────────────────────── */
.vs-codeblock {
  background: var(--code-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
}
.vs-codeblock-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 6px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0,0,0,.015);
}
.vs-codeblock-copy {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: default;
  padding: 4px 8px; border-radius: var(--r-sm);
  color: var(--text-secondary);
}
.vs-codeblock-copy:hover { background: var(--bg-surface-raised); }
.vs-codeblock-pre {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  color: var(--text-primary);
}
.code-keyword { color: var(--code-keyword); }
.code-string  { color: var(--code-string); }
.code-comment { color: var(--code-comment); font-style: italic; }
.code-number  { color: var(--code-number); }
.code-fn      { color: var(--code-fn); }

/* ── Toast ─────────────────────────────────────────────────────── */
.vs-toast {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-overlay);
  padding: 10px 12px 10px 14px;
  min-width: 280px; max-width: 480px;
  animation: vs-toast-in .2s ease-out both;
}
@keyframes vs-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vs-toast-ic { flex: 0 0 auto; display: inline-flex; }
.vs-toast-success .vs-toast-ic { color: var(--accent-success); }
.vs-toast-info    .vs-toast-ic { color: var(--accent-info); }
.vs-toast-warning .vs-toast-ic { color: var(--accent-warning); }
.vs-toast-error   .vs-toast-ic { color: var(--accent-danger); }
.vs-toast-body { flex: 1; min-width: 0; }
.vs-toast-action {
  border: 0; background: transparent; cursor: default;
  color: var(--accent-primary); font-weight: 500; font-size: 13px;
  padding: 4px 8px; border-radius: var(--r-sm);
}
.vs-toast-action:hover { background: var(--accent-primary-soft); }
.vs-toast-x {
  border: 0; background: transparent; cursor: default; padding: 4px;
  border-radius: var(--r-sm); color: var(--text-tertiary);
  display: inline-flex;
}
.vs-toast-x:hover { background: var(--bg-surface-raised); color: var(--text-primary); }

/* ── Spinner ───────────────────────────────────────────────────── */
.vs-spinner {
  display: inline-block; border-radius: 50%;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-primary);
  animation: vs-spin .8s linear infinite;
}

/* ── Tooltip ───────────────────────────────────────────────────── */
.vs-tt { position: relative; display: inline-flex; }
.vs-tt::after {
  content: attr(data-label);
  position: absolute; white-space: nowrap;
  background: var(--text-primary); color: var(--bg-surface);
  font-size: 12px; padding: 4px 8px; border-radius: var(--r-sm);
  opacity: 0; pointer-events: none; transition: opacity .12s;
  z-index: 100;
}
.vs-tt-bottom::after { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; }
.vs-tt-top::after    { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; }
.vs-tt-right::after  { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; }
.vs-tt-left::after   { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 6px; }
.vs-tt:hover::after  { opacity: 1; }

/* ── Modal ─────────────────────────────────────────────────────── */
.vs-modal-backdrop {
  position: fixed; inset: 0; background: var(--bg-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 24px;
  animation: vs-fade .15s ease-out;
}
@keyframes vs-fade { from { opacity: 0; } to { opacity: 1; } }
.vs-modal {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-overlay);
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column;
  animation: vs-modal-in .18s cubic-bezier(.4,.2,.2,1);
}
@keyframes vs-modal-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.vs-modal-hd { padding: 24px 24px 0; }
.vs-modal-body { padding: 16px 24px 24px; color: var(--text-secondary); }
.vs-modal-ft {
  padding: 16px 24px; display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--border-subtle);
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.vs-tabs {
  display: inline-flex; gap: 2px; padding: 4px;
  background: var(--bg-surface-raised); border-radius: var(--r-md);
}
.vs-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 0; background: transparent;
  border-radius: var(--r-sm); cursor: default;
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  transition: background .12s, color .12s;
}
.vs-tab:hover { color: var(--text-primary); }
.vs-tab.is-active {
  background: var(--bg-surface); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(20,20,28,.06);
}
.vs-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--bg-surface-raised); border-radius: var(--r-pill);
  font-size: 10px; font-weight: 600;
}
.vs-tab.is-active .vs-tab-badge { background: var(--accent-primary-soft); color: var(--accent-primary-hover); }

/* ── Radio card ────────────────────────────────────────────────── */
.vs-radio-stack { display: flex; flex-direction: column; gap: 8px; }
.vs-radio-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-align: left; cursor: default; width: 100%;
  transition: border-color .12s, background .12s;
}
.vs-radio-card:hover { background: var(--bg-surface-raised); border-color: var(--border-strong); }
.vs-radio-card.is-selected {
  border-color: var(--border-focus);
  background: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border-focus) inset;
}
.vs-radio-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong); margin-top: 3px;
  position: relative;
}
.vs-radio-dot.is-on { border-color: var(--accent-primary); }
.vs-radio-dot.is-on::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--accent-primary);
}
.vs-check-box {
  width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: 4px; border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-surface); color: var(--color-white); margin-top: 3px;
}
.vs-check-box.is-on { background: var(--accent-primary); border-color: var(--accent-primary); }
.vs-radio-body { flex: 1; min-width: 0; }

/* ── Chat bubbles ──────────────────────────────────────────────── */
.vs-chat-bubble { display: flex; gap: 10px; max-width: 80%; align-items: flex-start; }
.vs-chat-llm { align-self: flex-start; }
.vs-chat-user { align-self: flex-end; margin-left: auto; flex-direction: row-reverse; }
.vs-chat-avatar {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; background: var(--accent-primary-soft); color: var(--accent-primary);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.vs-chat-user .vs-chat-body {
  background: var(--accent-primary); color: var(--text-on-accent);
  padding: 10px 14px; border-radius: 14px 14px 4px 14px; line-height: 1.55;
}
.vs-chat-llm .vs-chat-body {
  background: var(--bg-surface-raised); color: var(--text-primary);
  padding: 10px 14px; border-radius: 14px 14px 14px 4px; line-height: 1.55;
}
.vs-chat-meta {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 12px; padding-left: 38px;
}
.vs-chat-user + .vs-chat-meta { text-align: right; padding-left: 0; padding-right: 8px; align-self: flex-end; }
.vs-chat-meta-ok { color: var(--accent-success); }
.vs-chat-meta-bad { color: var(--accent-danger); }

/* ── Utility layout helpers (replaces all inline style= in templates) ── */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-32 { padding: 32px; }
.mw-440 { max-width: 440px; }
.mw-480 { max-width: 480px; }
.mw-640 { max-width: 640px; }
.mw-200 { max-width: 200px; }
.fl-1 { flex: 1; }
.text-center { text-align: center; }
.text-tertiary { color: var(--text-tertiary); }
.color-danger { color: var(--accent-danger); }
.w-36 { width: 36px; }
.h-36 { height: 36px; }
.fs-12 { font-size: 12px; }
.vs-auth-feat-title { font-weight: 500; }
.vs-auth-actions { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.vs-module-progress-wrap { max-width: 320px; }
.mt-2 { margin-top: 2px; }
.vs-settings-desc { max-width: 540px; }
.vs-set-nav-title { font-size: 14px; }
.vs-settings-privacy-disabled { opacity: 0.5; }
.vs-rc-card-disabled { opacity: 0.5; pointer-events: none; }
.vs-input-disabled { opacity: 0.5; }
.vs-btn-phase3-disabled { opacity: 0.5; }
.vs-toc-heading { padding: 0 4px 12px; }
.vs-lesson-title { max-width: 720px; }
.vs-lesson-toc-heading { padding: 0 4px 12px; }
.mt-40 { margin-top: 40px; }
.mb-12 { margin-bottom: 12px; }
.mb-24 { margin-bottom: 24px; }
.vs-card-p-24 { padding: 24px; }
.vs-tq-option-readonly { pointer-events: none; }
.vs-inline-form { display: inline; }
.vs-avatar-login { font-size: 13px; }
.vs-placeholder-desc { margin-top: 6px; margin-bottom: 0; text-align: center; max-width: 360px; }
.mb-16 { margin-bottom: 16px; }
.vs-tests-meta { margin: 4px 0 16px; }
.vs-tq-option-clickable { cursor: pointer; }
.vs-radio-input-hidden { display: none; }
.vs-empty-p-24 { padding: 24px; }