/*
 * luma-components.css — the unified LumaBrowser component library.
 *
 * ONE definition per UI primitive, drawn from the chat surface (the canonical
 * look) and built entirely on the design tokens in base.css. Every surface —
 * the LLM tab, Setup, extension Setup-tabs, the main browser window, the PWA —
 * should compose its UI from these `.luma-*` classes and only add bespoke CSS
 * for genuinely one-off needs.
 *
 * Conventions:
 *   - base class `.luma-x`; variants as `.luma-x.primary` / modifiers `.luma-x--lg`.
 *   - interactive hover = brighten text to --text + `border-color: var(--accent)`.
 *   - primary action = the accent gradient (--accent-grad) with --on-accent-warm ink.
 *   - all colors/spacing/radius come from base.css tokens (no magic numbers).
 *
 * See documentation/design-system.md for usage guidance.
 */

/* ── Section scaffolding ─────────────────────────────────────────────── */
.luma-setup { padding: 4px 2px 40px; color: var(--text); }
.luma-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: 18px; }
.luma-title { margin: 0 0 4px; font-size: 18px; }
.luma-sub { margin: 0; max-width: 680px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.luma-sub code { background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 11.5px; }
.luma-sub a { color: var(--accent); }
/* Uppercase eyebrow caption — used above section/card titles. */
.luma-eyebrow, .luma-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-muted); font-weight: 600;
}

/* ── Button (chat-canonical: --border-strong, weight 600, accent hover) ── */
.luma-btn {
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: var(--radius-md); cursor: pointer;
  white-space: nowrap; transition: color 0.13s, border-color 0.13s, background 0.13s;
}
.luma-btn:hover { color: var(--text); border-color: var(--accent); }
.luma-btn:disabled { opacity: 0.45; cursor: default; }
.luma-btn:disabled:hover { color: var(--text-dim); border-color: var(--border-strong); }
.luma-btn.pill { border-radius: var(--radius-pill); }
/* Primary = chat's accent gradient with warm-black ink. */
.luma-btn.primary { border-color: transparent; background: var(--accent-grad); color: var(--on-accent-warm); }
.luma-btn.primary:hover { filter: brightness(1.06); color: var(--on-accent-warm); border-color: transparent; }
.luma-btn.danger { color: var(--bad); border-color: var(--bad); }
.luma-btn.danger:hover { background: rgba(248, 113, 113, 0.10); color: var(--bad); border-color: var(--bad); }
/* Link variant — borderless underlined accent text-button. */
.luma-btn.link { border-color: transparent; background: transparent; color: var(--accent); padding: 4px 6px; text-decoration: underline; }
.luma-btn.link:hover { filter: brightness(1.1); }
.luma-btn--block { width: 100%; justify-content: center; }
.luma-btn--sm { font-size: 11.5px; padding: 6px 10px; }

/* Icon button — borderless square/row icon affordance (chat .cm-icon-btn). */
.luma-icon-btn {
  display: inline-flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 8px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background 0.13s, color 0.13s;
}
.luma-icon-btn:hover { background: var(--bg-card); color: var(--text); }
.luma-icon-btn.active { color: var(--accent); background: var(--accent-soft); }
.luma-icon-btn svg { flex: 0 0 20px; width: 20px; height: 20px; }
.luma-icon-btn--sq { width: 28px; height: 28px; padding: 0; justify-content: center; border-radius: 7px; gap: 0; }
.luma-icon-btn--sq svg { flex-basis: 16px; width: 16px; height: 16px; }

/* Pill on/off toggle. */
.luma-toggle {
  height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-dim);
  font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.luma-toggle:hover { color: var(--text); border-color: var(--accent); }
.luma-toggle.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* iOS-style switch (replaces .ext-toggle / .gs-toggle / .img-toggle / .watcher-toggle). */
.luma-switch { position: relative; display: inline-block; width: 38px; height: 20px; flex: 0 0 auto; }
.luma-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.luma-switch-track {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10); transition: background 0.2s ease; cursor: pointer;
}
.luma-switch-track::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #e6e9f2; transition: transform 0.2s cubic-bezier(0.4, 0.1, 0.2, 1.2);
}
.luma-switch input:checked + .luma-switch-track { background: var(--accent-soft); }
.luma-switch input:checked + .luma-switch-track::before { transform: translateX(18px); background: var(--accent); }

/* ── List / empty / error / muted ────────────────────────────────────── */
.luma-list { display: flex; flex-direction: column; gap: 10px; }
.luma-empty { color: var(--text-muted); font-size: 13px; padding: 18px; text-align: center; border: 1px dashed var(--border); border-radius: 10px; line-height: 1.6; }
.luma-empty code { background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 11px; }
.luma-empty--plain { border: 0; padding: 14px 10px; font-size: 12.5px; }
/* Boxed error callout (chat .cm-error). */
.luma-error { color: var(--bad); font-size: 13px; border: 1px solid rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.06); border-radius: var(--radius-md); padding: 9px 13px; }
.luma-muted { color: var(--text-muted); font-size: 12px; margin-top: 6px; }

/* ── Card ────────────────────────────────────────────────────────────── */
.luma-card {
  display: flex; align-items: flex-start; gap: var(--space-4);
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); padding: 14px 16px;
}
.luma-card--center { align-items: center; }
.luma-card.selectable { cursor: pointer; transition: border-color 0.13s, background 0.13s; }
.luma-card.selectable:hover { border-color: var(--accent); }
.luma-card.selectable[aria-selected="true"], .luma-card.selectable.sel { border-color: var(--accent); background: var(--accent-soft); }
.luma-card-main { flex: 1; min-width: 0; }
.luma-card-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.luma-card-name { font-weight: 600; font-size: 14px; }
.luma-card-desc { color: var(--text-dim); font-size: 12.5px; margin: 3px 0 8px; }
.luma-card-actions { display: flex; gap: var(--space-2); }
.luma-card-actions--stack { flex-direction: column; align-items: stretch; }

/* Selectable option card column (wizard presets, mode picker). */
.luma-choice {
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 11px; background: var(--bg-card);
  padding: 14px; transition: border-color 0.13s, background 0.13s;
}
.luma-choice:hover { border-color: var(--accent); }
.luma-choice.sel, .luma-choice[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* Activity / status row with a left accent edge (chat .cm-toolcard). */
.luma-toolcard {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--border); border-left: 2px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--bg-card); font-size: 12.5px;
}
.luma-toolcard.run { border-left-color: var(--accent); }
.luma-toolcard.ok { border-left-color: var(--good); }
.luma-toolcard.err { border-left-color: var(--bad); }
.luma-tc-main { flex: 1; min-width: 0; color: var(--text); }
.luma-tc-det { color: var(--text-muted); font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Chip / badge / dot / tag ─────────────────────────────────────────── */
.luma-chip { font-size: 11px; color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 2px 9px; }
/* Interactive starter/context chip (chat .cm-chip). */
.luma-chip.action { padding: 8px 15px; font-size: 13px; cursor: pointer; transition: color 0.13s, border-color 0.13s, background 0.13s; }
.luma-chip.action:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
/* Badge — outline-tint, the canonical chat/setup look (NOT solid fill). */
.luma-badge { font-size: 10.5px; font-weight: 600; border-radius: var(--radius-pill); padding: 2px 9px; letter-spacing: 0.04em; border: 1px solid transparent; white-space: nowrap; }
.luma-badge.ok { color: var(--good); background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.35); }
.luma-badge.warn { color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); }
.luma-badge.bad { color: var(--bad); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); }
.luma-badge.info { color: #6ea8fe; background: rgba(110, 168, 254, 0.12); border-color: rgba(110, 168, 254, 0.35); }
.luma-badge.accent { color: var(--accent); background: var(--accent-soft); border-color: rgba(245, 144, 52, 0.4); }
.luma-badge.muted { color: var(--text-dim); background: transparent; border-color: var(--border-strong); }
/* Square tinted category tag (distinct from the pill badge). */
.luma-tag { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(245, 144, 52, 0.3); border-radius: 3px; padding: 1px 6px; font-family: var(--mono); }
/* Status dot with a glow ring. */
.luma-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-muted); }
.luma-dot.ok { background: var(--good); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
.luma-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.luma-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }
.luma-dot.busy { background: var(--accent); animation: luma-pulse 1.2s ease-in-out infinite; }
@keyframes luma-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Form / field ────────────────────────────────────────────────────── */
.luma-form {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 18px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.luma-form-title { margin: 0; font-size: 15px; }
.luma-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.luma-field > span { color: var(--text-dim); font-weight: 600; }
.luma-field > span small { color: var(--text-muted); font-weight: 400; }
.luma-field input, .luma-field textarea, .luma-field select {
  background: var(--surface-input);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text); font: inherit; font-size: 13px; padding: 9px 11px;
}
.luma-field textarea { resize: vertical; line-height: 1.5; }
.luma-field input:focus, .luma-field textarea:focus, .luma-field select:focus { outline: none; border-color: var(--accent); }
/* Class-on-node field variant — when markup puts explicit classes on the
   label/input nodes instead of using the bare `.luma-field` wrapper. Same look. */
.luma-field-label { display: block; color: var(--text-dim); font-weight: 600; font-size: 12.5px; margin-bottom: 6px; }
.luma-field-input, .luma-field-select, .luma-field-textarea {
  width: 100%; background: var(--surface-input); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text); font: inherit; font-size: 13px; padding: 9px 11px; line-height: 1.4; transition: border-color 0.13s;
}
.luma-field-input:focus, .luma-field-select:focus, .luma-field-textarea:focus { outline: none; border-color: var(--accent); }
.luma-field-input::placeholder, .luma-field-textarea::placeholder { color: var(--text-muted); }
.luma-field-textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.luma-field-help { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.5; }
.luma-form-err { color: var(--bad); font-size: 12.5px; min-height: 1px; }
.luma-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.luma-check { display: flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--text); cursor: pointer; }
.luma-check input { accent-color: var(--accent); }
/* Key/value definition rows. */
.luma-kv { display: flex; flex-direction: column; gap: 4px; }
.luma-kv-row { display: flex; gap: var(--space-3); font-size: 12.5px; }
.luma-kv-key { min-width: 110px; color: var(--text-dim); font-weight: 600; }
.luma-kv-val { color: var(--text); font-family: var(--mono); word-break: break-all; }

/* ── Scrollbox ───────────────────────────────────────────────────────── */
.luma-scrollbox { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* ── Spinner (chat .cm-tc-spin: 12px, border-strong, 0.7s) ───────────── */
.luma-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  animation: luma-spin 0.7s linear infinite;
}
.luma-spinner--lg { width: 26px; height: 26px; border-width: 3px; }
@keyframes luma-spin { to { transform: rotate(360deg); } }

/* ── Segmented control / tabs / steps ────────────────────────────────── */
.luma-segmented { display: inline-flex; gap: 2px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; }
.luma-segmented button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; padding: 5px 14px; border-radius: var(--radius-pill); cursor: pointer; }
.luma-segmented button.active { background: var(--accent-soft); color: var(--accent); }
.luma-segmented button:disabled { color: var(--text-muted); cursor: not-allowed; }
.luma-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.luma-tabs button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 13px; padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.luma-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.luma-steps { display: flex; flex-direction: column; gap: 4px; }
.luma-step { display: flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.luma-step-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 10px; flex: 0 0 auto; }
.luma-step.on { color: var(--text); }
.luma-step.on .luma-step-dot { border-color: var(--accent); color: var(--accent); }
.luma-step.done .luma-step-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent-warm); }

/* ── Progress bar (replaces 5 reimplementations) ─────────────────────── */
.luma-progress { width: 100%; height: 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.luma-progress-fill { height: 100%; background: var(--accent-grad); border-radius: inherit; transition: width 0.2s ease; }
.luma-progress.indeterminate .luma-progress-fill { width: 40% !important; animation: luma-indet 1.1s ease-in-out infinite; }
@keyframes luma-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ── Callout / notice / banner ───────────────────────────────────────── */
.luma-callout { border: 1px solid rgba(245, 144, 52, 0.3); background: var(--accent-soft); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--text); }
.luma-callout.ok { border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.08); }
.luma-callout.warn { border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.08); }
.luma-callout.bad { border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.08); }

/* ── Table ───────────────────────────────────────────────────────────── */
.luma-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.luma-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border-strong); }
.luma-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.luma-table tbody tr:hover { background: var(--surface-hover); }

/* ── Code block ──────────────────────────────────────────────────────── */
.luma-code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; overflow-x: auto; }
.luma-code code { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; background: transparent; color: #d6dbe6; }
.luma-code-inline { font-family: var(--mono); font-size: 0.86em; background: var(--code-bg); padding: 2px 6px; border-radius: 5px; }

/* ── Disclosure (animated collapse; chat .cm-think) ──────────────────── */
.luma-disclosure { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.luma-disclosure-sum { display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; padding: 8px 13px; font: inherit; font-size: 12px; color: var(--text-dim); }
.luma-disclosure-sum::before { content: "\25B8"; margin-right: 8px; transition: transform 0.2s ease; }
.luma-disclosure.open .luma-disclosure-sum::before { transform: rotate(90deg); }
.luma-disclosure-body { max-height: 0; padding: 0 13px; overflow: hidden; transition: max-height 0.28s ease, padding 0.28s ease; }
.luma-disclosure.open .luma-disclosure-body { max-height: 360px; padding: 2px 13px 11px; overflow: auto; }
/* CSS disclosure triangle for native <details> summaries. */
.luma-caret::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform 0.2s ease; }
details[open] > summary .luma-caret::before, .luma-caret.open::before { transform: rotate(90deg); }

/* ── Menu / popover (chat .cm-menu / .cm-model-pop) ──────────────────── */
.luma-menu { position: fixed; z-index: var(--z-dropdown); min-width: 160px; background: var(--surface-pop); border: 1px solid var(--border-strong); border-radius: 10px; padding: 5px; box-shadow: var(--shadow-md); }
.luma-menu-item { display: flex; width: 100%; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 7px; cursor: pointer; text-align: left; }
.luma-menu-item:hover { background: var(--bg-card); color: var(--text); }
.luma-menu-item.danger:hover { color: var(--bad); }
.luma-menu-item svg { flex: 0 0 15px; width: 15px; height: 15px; opacity: 0.7; }
.luma-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.luma-pop { min-width: 280px; max-height: 320px; overflow-y: auto; background: var(--surface-pop); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 6px; box-shadow: var(--shadow-md); z-index: var(--z-dropdown); }

/* ── Modal / dialog (canonical; mirrors core/shell/ui/luma-modal.js) ─── */
.luma-modal-overlay, .luma-modal-back { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(4, 8, 16, 0.72); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
/* Opaque surface (--surface-pop) so modal content is fully legible over the
   page — NOT the translucent --bg-card used by inline cards. */
.luma-modal { width: 480px; max-width: calc(100vw - 40px); background: var(--surface-pop); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; max-height: 88vh; }
.luma-modal--lg { width: min(880px, 96vw); }
.luma-modal-head { padding: 18px 20px 0; }
.luma-modal-title { font-size: 14px; font-weight: 600; color: var(--text); }
.luma-modal-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }
.luma-modal-body { padding: 16px 20px; overflow: auto; }
.luma-modal-foot, .luma-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 0 20px 18px; }
.luma-modal-x { position: absolute; top: 12px; right: 12px; }

/* ── Stat strip ──────────────────────────────────────────────────────── */
.luma-statgrid { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.luma-stat { display: flex; flex-direction: column; gap: 2px; }
.luma-stat-value { font-size: 22px; font-weight: 600; color: var(--accent); font-family: var(--mono); }
.luma-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

/* ── Docked bottom bar (extension panels) ────────────────────────────── */
.luma-bottombar { border-top: 1px solid rgba(245, 144, 52, 0.12); background: rgba(18, 26, 44, 0.97); backdrop-filter: blur(8px); }
.luma-bottombar-summary { display: flex; align-items: center; gap: var(--space-3); padding: 8px 12px; cursor: pointer; }
.luma-bottombar-expanded { max-height: 260px; overflow: auto; padding: 8px 12px; border-top: 1px solid var(--border); }

/* ── Toast ───────────────────────────────────────────────────────────── */
.luma-toast { position: fixed; z-index: var(--z-toast); background: var(--surface-pop); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 10px 14px; font-size: 12.5px; color: var(--text); }
.luma-toast.ok { border-left: 3px solid var(--good); }
.luma-toast.bad { border-left: 3px solid var(--bad); }