/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color 180ms, color 180ms, border-color 180ms, transform 180ms;
  white-space: nowrap;
  cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active:not(:disabled) { animation: press 180ms cubic-bezier(0.34, 1.56, 0.64, 1); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-bg-tertiary); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-secondary); }

.btn-subtle {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}
.btn-subtle:hover:not(:disabled) { filter: brightness(0.96); }

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

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.25rem; font-size: 0.9375rem; }

.btn-icon {
  width: 2.25rem; height: 2.25rem;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: background-color 180ms, color 180ms;
  cursor: pointer;
}
.btn-icon:hover:not(:disabled) { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.btn-icon[data-active="true"] { background: var(--color-primary-subtle); color: var(--color-primary); }
.btn-icon-sm { width: 1.875rem; height: 1.875rem; }

/* ── Inputs ───────────────────────────────────────────── */
.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  transition: border-color 180ms, box-shadow 180ms;
}
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / 0.15);
}
.input::placeholder { color: var(--color-text-muted); }
.input-error { border-color: var(--color-error); }

textarea.input { resize: none; min-height: 3rem; line-height: 1.5; }

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary);
}
.field-help {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── Badge ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}
.badge-primary {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}
.badge-outline {
  background: transparent;
  border: 1px solid var(--color-border);
}

/* ── Card ─────────────────────────────────────────────── */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}
.card-flush { padding: 0; }
.card-bg-secondary { background: var(--color-bg-secondary); }

/* ── Modal ────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--color-overlay);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 50;
  padding: 2rem 1rem;
  animation: fade-in 180ms ease-out;
}
.modal-backdrop[data-center="true"] { align-items: center; }
.modal {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.25), var(--shadow-soft);
  max-width: 32rem;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  animation: zoom-in 150ms ease-out;
}
.modal-lg { max-width: 42rem; }
.modal-md { max-width: 32rem; }
.modal-sm { max-width: 24rem; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); }
.modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-footer {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Drawer (right-side compare panel) ────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: var(--color-overlay);
  z-index: 50;
  animation: fade-in 150ms ease-out;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 26rem;
  max-width: 100vw;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  z-index: 51;
  display: flex; flex-direction: column;
  animation: slide-in-right 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── Toggle / Switch ──────────────────────────────────── */
.toggle {
  appearance: none;
  width: 2.25rem; height: 1.25rem;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background-color 180ms;
  flex-shrink: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 1rem; height: 1rem;
  background: var(--color-primary-fg);
  border-radius: 50%;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}
.toggle:checked { background: var(--color-primary); }
.toggle:checked::after { transform: translateX(1rem); }

/* ── Divider ──────────────────────────────────────────── */
.divider { height: 1px; background: var(--color-border); margin: 0.5rem 0; }
.divider-vertical { width: 1px; background: var(--color-border); align-self: stretch; }

/* ── Avatar ───────────────────────────────────────────── */
.avatar {
  width: 2rem; height: 2rem;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.avatar-lg { width: 3rem; height: 3rem; font-size: 1.125rem; }

/* ── Context menu / dropdown ──────────────────────────── */
.menu {
  position: absolute;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 0.25rem;
  min-width: 12rem;
  z-index: 70;
  animation: fade-in 120ms ease-out;
}
.menu-item {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  background: transparent;
}
.menu-item:hover { background: var(--color-bg-secondary); }
.menu-item[data-destructive="true"] { color: var(--color-error); }
.menu-item[data-active="true"] { color: var(--color-primary); }
.menu-divider { height: 1px; background: var(--color-border); margin: 0.25rem 0; }
.menu-label {
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ── Dev theme switcher (floating bottom-right) ──────── */
.dev-theme-switcher {
  position: fixed;
  bottom: 0.75rem; right: 0.75rem;
  z-index: 60;
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem;
  background: color-mix(in srgb, var(--color-bg-secondary) 95%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
}
.dts-pill {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color 140ms, color 140ms;
}
.dev-theme-switcher[data-collapsed="true"] { padding: 0; }
.dts-icon-only {
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  font-size: 0.875rem;
}
.dts-pill:hover { background: var(--color-bg-tertiary); }
.dts-pill.is-active {
  background: var(--color-primary);
  color: var(--color-primary-fg);
}
.dts-divider {
  width: 1px; height: 1rem;
  background: var(--color-border);
  margin: 0 0.25rem;
}

/* ── Tooltip (simple) ─────────────────────────────────── */
.has-tooltip { position: relative; }
.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.5rem;
  background: var(--color-text-primary);
  color: var(--color-bg);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms;
  z-index: 80;
}
.has-tooltip:hover::after { opacity: 1; }

/* ── Skeleton ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Tag/Chip ─────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.chip-active { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); }

/* ── Tabs (settings nav) ──────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 0.25rem;
  overflow-x: auto;
}
.tab {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms, border-color 140ms;
  background: transparent;
}
.tab:hover { color: var(--color-text-primary); }
.tab[data-active="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── List rows (settings, projects) ───────────────────── */
.list-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.list-row:last-child { border-bottom: 0; }
.list-row-clickable { cursor: pointer; transition: background-color 140ms; }
.list-row-clickable:hover { background: var(--color-bg-secondary); }

/* ── Progress bar ─────────────────────────────────────── */
.progress {
  height: 0.5rem;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 240ms ease-out;
}

/* ── Compare grid (chat compare responses) ────────────── */
.compare-grid {
  display: grid;
  gap: 0.75rem;
}
.compare-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .compare-grid[data-cols="3"], .compare-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr !important; }
}

.compare-col {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  min-width: 0;
}
.compare-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--color-border);
}
.compare-col-body {
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  max-height: 22rem;
}
.compare-col-footer {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-top: 1px solid var(--color-border);
}

/* ── Password input ───────────────────────────────────── */
.pw-input-wrap {
  position: relative;
}
.pw-toggle-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: 0.25rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.pw-toggle-btn:hover { color: var(--color-text-primary); }
.pw-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb) / 0.3);
}
.pw-input-wrap .input { padding-right: 2.5rem; }

/* Strength meter */
.pw-strength-meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pw-strength-bars {
  flex: 1;
  display: flex;
  gap: 0.25rem;
}
.pw-bar {
  flex: 1;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: background-color 200ms;
}
.pw-strength-label {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  min-width: 3rem;
  text-align: right;
}

/* Error under password field */
.pw-error {
  font-size: 0.75rem;
  color: var(--color-error);
}

/* ── Button loading ───────────────────────────────────── */
.btn-loading { cursor: wait; pointer-events: none; }
.btn-loading .btn-text { opacity: 0.6; }
.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-sm .btn-spinner { width: 12px; height: 12px; }
.btn-lg .btn-spinner { width: 16px; height: 16px; }