/* components.css — QI UI component styles
 * Ported from QIChatComponents.swift + QIDesignSystem.swift
 */

/* ── Eyebrow label ─────────────────────────────────── */
/* Mirrors QIEyebrow — uppercase, letter-spaced */
.qi-eyebrow {
  font: var(--qi-font-eyebrow);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--qi-accent);
}

.qi-eyebrow--muted { color: var(--qi-text-muted); }
.qi-eyebrow--trust { color: var(--qi-trust); }

/* ── Progress bar ──────────────────────────────────── */
/* Mirrors QIProgressBar — gold → cyan gradient */
.qi-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.qi-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--qi-trust), var(--qi-accent));
  border-radius: 2px;
  transition: width var(--qi-dur-normal) var(--qi-ease-out);
}

/* ── Circular button ───────────────────────────────── */
/* Mirrors QICircularButton — glass with bounce */
.qi-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--qi-glass);
  border: 1px solid var(--qi-glass-border-subtle);
  color: var(--qi-text);
  cursor: pointer;
  transition: transform var(--qi-dur-fast) var(--qi-ease-spring);
}

.qi-btn-circle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.qi-btn-circle:active {
  transform: scale(0.88);
}

.qi-btn-circle--primary {
  background: var(--qi-accent);
  border-color: var(--qi-accent);
  color: var(--qi-bg);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--qi-accent) 25%, transparent);
}

/* ── Simple icon button (no circle) ────────────────── */
.qi-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--qi-text);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--qi-dur-fast);
}

.qi-icon-btn:hover {
  opacity: 1;
}

.qi-icon-btn:active {
  opacity: 0.5;
}

.qi-icon-btn--primary {
  color: var(--qi-accent);
  opacity: 1;
}

.qi-icon-btn--primary:hover {
  opacity: 0.8;
}

.qi-icon-btn.recording {
  color: #f44336;
  animation: qi-pulse 1s infinite;
}

@keyframes qi-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Chat bubble ───────────────────────────────────── */
/* Mirrors QIChatBubble — variants: human, ai, mission, hit, channel, system */
.qi-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--qi-space-xs);
  padding: var(--qi-space-sm) var(--qi-space-md);
  max-width: 75%;
  font: var(--qi-font-body);
  color: var(--qi-text);
  animation: qi-card-enter var(--qi-dur-slow) var(--qi-ease-out);
}

.qi-bubble--human {
  align-self: flex-end;
  align-items: flex-end;
}

.qi-bubble--ai {
  align-self: flex-start;
}

.qi-bubble--mission {
  align-self: flex-start;
}

.qi-bubble--system {
  align-self: center;
  max-width: 90%;
  color: var(--qi-text-muted);
  font: var(--qi-font-caption);
  text-align: center;
}

.qi-bubble__sender {
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--qi-font-eyebrow);
}

.qi-bubble__channel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.qi-bubble__timestamp {
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
}

/* ── Channel pill ──────────────────────────────────── */
.qi-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--qi-space-xs);
  padding: var(--qi-space-xs) var(--qi-space-md);
  border-radius: var(--qi-radius-pill);
  background: var(--qi-glass);
  border: 0.5px solid var(--qi-glass-border-subtle);
  color: var(--qi-text-muted);
  font: var(--qi-font-body-sm);
  cursor: pointer;
  transition: all var(--qi-dur-fast) var(--qi-ease-out);
  white-space: nowrap;
}

.qi-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--qi-text);
}

.qi-pill--active {
  background: color-mix(in srgb, var(--qi-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--qi-accent) 30%, transparent);
  color: var(--qi-accent);
}

.qi-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── Mission card ──────────────────────────────────── */
/* Mirrors QIMissionCard — gold-tinted glass with status badge */
.qi-mission-card {
  padding: var(--qi-space-md);
  cursor: pointer;
  transition: transform var(--qi-dur-fast) var(--qi-ease-spring);
}

.qi-mission-card:hover {
  transform: scale(1.02);
}

.qi-mission-card:active {
  transform: scale(0.98);
}

.qi-mission-card__title {
  font: var(--qi-font-title-sm);
  color: var(--qi-text);
  margin-bottom: var(--qi-space-xs);
}

.qi-mission-card__desc {
  font: var(--qi-font-body-sm);
  color: var(--qi-text-muted);
  margin-bottom: var(--qi-space-sm);
}

.qi-mission-card__status {
  display: inline-flex;
  align-items: center;
  gap: var(--qi-space-xs);
  padding: 2px var(--qi-space-sm);
  border-radius: var(--qi-radius-pill);
  font: var(--qi-font-eyebrow);
}

.qi-mission-card__status--active {
  background: color-mix(in srgb, var(--qi-energy) 15%, transparent);
  color: var(--qi-energy);
}

.qi-mission-card__status--pending {
  background: color-mix(in srgb, var(--qi-trust) 15%, transparent);
  color: var(--qi-trust);
}

.qi-mission-card__status--done {
  background: rgba(255, 255, 255, 0.08);
  color: var(--qi-text-muted);
}

/* ── Input bar ─────────────────────────────────────── */
/* Mirrors ChatInputBar — glass with send button */
.qi-input-bar {
  display: flex;
  align-items: center;
  gap: var(--qi-space-sm);
  padding: var(--qi-space-md);
}

.qi-input-bar__input {
  flex: 1;
  padding: var(--qi-space-sm) var(--qi-space-md);
  background: var(--qi-glass);
  border: 0.5px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-md);
  color: var(--qi-text);
  font: var(--qi-font-body);
  font-size: 16px;
  outline: none;
  transition: border-color var(--qi-dur-fast);
  -webkit-appearance: none;
  appearance: none;
}

.qi-input-bar__input:focus {
  border-color: color-mix(in srgb, var(--qi-accent) 40%, transparent);
}

.qi-input-bar__input::placeholder {
  color: var(--qi-text-muted);
}

/* ── Status bar ────────────────────────────────────── */
/* Mirrors BackendStatusBar — mesh status, routing, RAG */
.qi-status-bar {
  display: flex;
  align-items: center;
  gap: var(--qi-space-md);
  padding: var(--qi-space-xs) var(--qi-space-md);
  border-top: 0.5px solid var(--qi-glass-border-subtle);
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
}

.qi-status-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qi-text-muted);
}

.qi-status-bar__dot--online { background: var(--qi-energy); }
.qi-status-bar__dot--working { background: var(--qi-accent); }
.qi-status-bar__dot--error { background: var(--qi-error); }

/* ── HIT card ──────────────────────────────────────── */
/* Mirrors QIHITCard — red-tinted with approve/deny */
.qi-hit-card {
  padding: var(--qi-space-md);
}

.qi-hit-card__actions {
  display: flex;
  gap: var(--qi-space-sm);
  margin-top: var(--qi-space-sm);
}

.qi-hit-card__btn {
  flex: 1;
  padding: var(--qi-space-sm);
  border-radius: var(--qi-radius-md);
  font: var(--qi-font-body-sm);
  cursor: pointer;
  transition: transform var(--qi-dur-fast) var(--qi-ease-spring);
}

.qi-hit-card__btn:active {
  transform: scale(0.95);
}

.qi-hit-card__btn--approve {
  background: color-mix(in srgb, var(--qi-energy) 20%, transparent);
  border: 1px solid var(--qi-energy);
  color: var(--qi-energy);
}

.qi-hit-card__btn--deny {
  background: color-mix(in srgb, var(--qi-error) 20%, transparent);
  border: 1px solid var(--qi-error);
  color: var(--qi-error);
}

/* ── Dashboard tile ────────────────────────────────── */
.qi-tile {
  padding: var(--qi-space-md);
  cursor: pointer;
  transition: transform var(--qi-dur-fast) var(--qi-ease-spring);
}

.qi-tile:hover {
  transform: translateY(-2px);
}

.qi-tile__eyebrow {
  font: var(--qi-font-eyebrow);
  color: var(--qi-text-muted);
  margin-bottom: var(--qi-space-xs);
}

.qi-tile__title {
  font: var(--qi-font-title-sm);
  color: var(--qi-text);
  margin-bottom: var(--qi-space-xs);
}

.qi-tile__meta {
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
}

/* ── Card enter animation ──────────────────────────── */
/* Mirrors QICardEnter — opacity + slide + scale */
@keyframes qi-card-enter {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.qi-card-enter {
  animation: qi-card-enter var(--qi-dur-slow) var(--qi-ease-out);
}

/* ── Streaming indicator ───────────────────────────── */
.qi-streaming {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--qi-accent);
  margin-left: 2px;
  animation: qi-blink 1s step-end infinite;
}

@keyframes qi-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Missing bubble variants ───────────────────────── */
.qi-bubble--hit {
  align-self: flex-start;
}

.qi-bubble--channel {
  align-self: flex-start;
}

.qi-bubble__text {
  font: var(--qi-font-body);
  color: var(--qi-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ── Side menu items ───────────────────────────────── */
.qi-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--qi-space-sm) var(--qi-space-md);
  background: none;
  border: none;
  color: var(--qi-text);
  font: var(--qi-font-body);
  cursor: pointer;
  border-radius: var(--qi-radius-md);
  transition: background var(--qi-dur-fast);
}

.qi-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.qi-menu-item--danger {
  color: var(--qi-error);
}

.qi-menu-item--muted {
  color: var(--qi-text-muted);
}

/* ── Recording state (voice button) ────────────────── */
.qi-btn-circle.recording {
  background: var(--qi-error);
  border-color: var(--qi-error);
  animation: qi-pulse-recording 1s ease-in-out infinite;
}

@keyframes qi-pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); }
}

/* ── PIP widget layer ─────────────────────────────── */
@keyframes qi-pip-enter {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.qi-pip-widget {
  font-family: var(--qi-font-sans, -apple-system, sans-serif);
}

.qi-pip-content::-webkit-scrollbar { width: 4px; }
.qi-pip-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}

/* ── Usage meter (guest quota) ─────────────────────── */
.qi-usage-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--qi-glass-bg, rgba(255,255,255,0.04));
  border: 0.5px solid var(--qi-glass-border, rgba(255,255,255,0.08));
  font: 11px/1 var(--qi-font-sans, -apple-system, sans-serif);
  color: var(--qi-text-muted, #888);
  cursor: pointer;
  transition: background 0.2s;
}

.qi-usage-meter:hover { background: rgba(255,255,255,0.08); }

.qi-usage-bar {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}

.qi-usage-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--qi-accent, #66FCF1);
  transition: width 0.4s ease;
}

.qi-usage-fill--warning { background: var(--qi-trust, #D4AF37); }
.qi-usage-fill--danger { background: var(--qi-error, #FF6B6B); }

/* Dual-bar variant: credits (accent) on top, tokens (gold) below */
.qi-usage-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qi-usage-bars .qi-usage-bar { width: 48px; height: 3px; }

.qi-usage-fill--tokens { background: var(--qi-trust, #D4AF37); }

/* Notification bell badge */
.qi-topbar__notif { position: relative; }

.qi-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--qi-error, #FF6B6B);
  color: #fff;
  font: 600 9px/14px var(--qi-font-sans, -apple-system, sans-serif);
  text-align: center;
}

/* ── Mission bubble (first message in messenger) ─── */
.qi-mission-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--qi-radius-lg, 16px);
  background: color-mix(in srgb, var(--qi-accent, #66FCF1) 8%, var(--qi-glass-bg, rgba(255,255,255,0.04)));
  border: 0.5px solid color-mix(in srgb, var(--qi-accent, #66FCF1) 20%, transparent);
  margin-bottom: 12px;
}

.qi-mission-bubble__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--qi-accent, #66FCF1) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qi-accent, #66FCF1);
}

.qi-mission-bubble__text {
  flex: 1;
  font: 500 14px/1.4 var(--qi-font-sans, -apple-system, sans-serif);
  color: var(--qi-text, #fff);
}

.qi-mission-bubble__label {
  font: 600 10px/1 var(--qi-font-sans, -apple-system, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qi-accent, #66FCF1);
  margin-bottom: 4px;
}

/* ── Right-side detail panels (QiPanel) ─────────────── */
.qi-panel__section {
  margin-bottom: var(--qi-space-xl);
}

.qi-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qi-space-xs) 0;
  color: var(--qi-text);
  font: var(--qi-font-body-sm);
}

.qi-panel__hint {
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
  margin: var(--qi-space-xs) 0 0;
}

.qi-panel__events {
  display: flex;
  flex-direction: column;
  gap: var(--qi-space-xs);
  max-height: 40vh;
  overflow-y: auto;
}

.qi-panel__event {
  font: var(--qi-font-caption);
  color: var(--qi-text-muted);
  padding: var(--qi-space-xs);
  border-radius: var(--qi-radius-sm);
  background: var(--qi-glass);
}

.qi-panel__event span {
  color: var(--qi-accent);
  margin-right: var(--qi-space-xs);
}

.qi-usage-bar--lg {
  height: 8px;
  border-radius: var(--qi-radius-pill);
  background: var(--qi-glass);
  overflow: hidden;
  margin-top: var(--qi-space-sm);
}

.qi-tenant-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--qi-space-xs);
  padding: var(--qi-space-xs) var(--qi-space-md);
  color: var(--qi-text);
  font: var(--qi-font-body-sm);
  border: 0.5px solid var(--qi-glass-border-subtle);
  background: rgba(15, 25, 22, 0.55);
  cursor: pointer;
}

.qi-tenant-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.qi-tenant-item--active {
  border-color: var(--qi-accent);
}

/* ── Skeleton loaders — layered shimmer (multilayer loader) ── */
@keyframes qi-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.qi-skeleton {
  border-radius: var(--qi-radius-md);
  background: linear-gradient(
    100deg,
    var(--qi-glass) 40%,
    rgba(102, 252, 241, 0.08) 50%,
    var(--qi-glass) 60%
  );
  background-size: 200% 100%;
  animation: qi-shimmer 1.6s ease-in-out infinite;
}

.qi-skeleton--card {
  height: 120px;
  padding: var(--qi-space-lg);
}

.qi-skeleton--line {
  height: 12px;
  margin: var(--qi-space-xs) 0;
}

.qi-skeleton--line:last-child {
  width: 60%;
}

/* Layered card: header + 2 body lines inside one shimmer card */
.qi-skeleton__inner {
  display: flex;
  flex-direction: column;
  gap: var(--qi-space-sm);
}

.qi-skeleton__inner .qi-skeleton--line {
  background: rgba(255, 255, 255, 0.06);
  animation: none;
}

.qi-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.qi-mission-card__when {
  font: var(--qi-font-caption);
  color: var(--qi-trust);
  margin-top: var(--qi-space-xs);
}

/* ── Shared QI kit — used by all views (settings/mesh/meet/phone/cloud/gov) ── */

.qi-card,
.qi-glass-card {
  background: var(--qi-glass);
  border: 1px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-lg);
  padding: var(--qi-space-lg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.qi-glass-card:hover {
  border-color: var(--qi-glass-border);
}

.qi-card--interactive {
  cursor: pointer;
}

.qi-card--interactive:active {
  transform: scale(0.99);
}

/* Buttons */
.qi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qi-space-sm);
  padding: var(--qi-space-sm) var(--qi-space-lg);
  font: var(--qi-font-body-sm);
  font-weight: 600;
  color: var(--qi-text);
  background: var(--qi-glass);
  border: 1px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
}

.qi-btn:hover {
  border-color: var(--qi-accent);
  background: rgba(102, 252, 241, 0.08);
}

.qi-btn:active { transform: scale(0.98); }
.qi-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.qi-btn--primary {
  background: rgba(102, 252, 241, 0.15);
  border-color: var(--qi-accent);
  color: var(--qi-accent);
}

.qi-btn--danger {
  border-color: rgba(255, 107, 107, 0.4);
  color: var(--qi-error);
}

.qi-btn--danger:hover {
  border-color: var(--qi-error);
  background: rgba(255, 107, 107, 0.08);
}

.qi-btn--sm {
  padding: var(--qi-space-xs) var(--qi-space-md);
  font-size: 0.8em;
}

/* Inputs */
.qi-input,
.qi-select {
  width: 100%;
  padding: var(--qi-space-sm) var(--qi-space-md);
  font: var(--qi-font-body-sm);
  color: var(--qi-text);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-md);
  outline: none;
  transition: border-color 0.2s ease;
}

.qi-input:focus,
.qi-select:focus {
  border-color: var(--qi-accent);
}

.qi-input::placeholder { color: var(--qi-text-muted); }

.qi-select {
  appearance: none;
  cursor: pointer;
}

.qi-select option { background: var(--qi-bg); color: var(--qi-text); }

/* Field row (label + control) */
.qi-field {
  display: flex;
  flex-direction: column;
  gap: var(--qi-space-xs);
  margin-bottom: var(--qi-space-md);
}

.qi-field__label {
  font: var(--qi-font-eyebrow-sm);
  color: var(--qi-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Key-value row */
.qi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--qi-space-md);
  padding: var(--qi-space-sm) 0;
  border-bottom: 1px solid var(--qi-glass-border-subtle);
}

.qi-row:last-child { border-bottom: 0; }

.qi-row__label { color: var(--qi-text-muted); font: var(--qi-font-body-sm); }
.qi-row__value { font: var(--qi-font-body-sm); text-align: right; word-break: break-all; }

/* Stat tile */
.qi-stat {
  display: flex;
  flex-direction: column;
  gap: var(--qi-space-xs);
  padding: var(--qi-space-md);
  background: var(--qi-glass);
  border: 1px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-md);
}

.qi-stat__value { font: var(--qi-font-title-sm); color: var(--qi-accent); }
.qi-stat__label { font: var(--qi-font-eyebrow-sm); color: var(--qi-text-muted); text-transform: uppercase; }

.qi-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--qi-space-sm);
}

/* Tag / status chip */
.qi-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--qi-space-xs);
  padding: 2px var(--qi-space-sm);
  font: var(--qi-font-eyebrow-sm);
  border-radius: var(--qi-radius-pill);
  background: var(--qi-glass);
  border: 1px solid var(--qi-glass-border-subtle);
  color: var(--qi-text-muted);
}

.qi-tag--accent { color: var(--qi-accent); border-color: rgba(102, 252, 241, 0.35); }
.qi-tag--energy { color: var(--qi-energy); border-color: rgba(53, 201, 154, 0.35); }
.qi-tag--trust  { color: var(--qi-trust);  border-color: rgba(212, 175, 55, 0.35); }
.qi-tag--error  { color: var(--qi-error);  border-color: rgba(255, 107, 107, 0.35); }

/* Empty state */
.qi-empty {
  padding: var(--qi-space-xl);
  text-align: center;
  color: var(--qi-text-muted);
  font: var(--qi-font-body-sm);
}

/* Section container (glass section w/ title) */
.qi-section {
  background: var(--qi-glass);
  border: 1px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-lg);
  padding: var(--qi-space-lg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  margin-bottom: var(--qi-space-lg);
}

.qi-section__title {
  font: var(--qi-font-eyebrow);
  color: var(--qi-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--qi-space-md);
}

/* Generic scrollable list */
.qi-list {
  display: flex;
  flex-direction: column;
  gap: var(--qi-space-sm);
  max-height: 22rem;
  overflow-y: auto;
}

.qi-list::-webkit-scrollbar { width: 6px; }
.qi-list::-webkit-scrollbar-thumb { background: var(--qi-glass-border-subtle); border-radius: 3px; }

/* Panel body (QiPanel content area) */
.qi-panel__body { padding: var(--qi-space-lg); overflow-y: auto; }

/* Tenant switcher button name */
.qi-tenant-btn__name { font: var(--qi-font-body-sm); }

/* Usage meter — tokens bar (gold) */
.qi-usage-bar--tokens .qi-usage-fill,
.qi-usage-fill--tokens { background: var(--qi-trust); }

/* Channel pill (venue tabs, scene chips) — alias of qi-pill look */
.qi-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--qi-space-xs);
  padding: var(--qi-space-xs) var(--qi-space-md);
  font: var(--qi-font-body-sm);
  color: var(--qi-text-muted);
  background: var(--qi-glass);
  border: 1px solid var(--qi-glass-border-subtle);
  border-radius: var(--qi-radius-pill);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.qi-channel-pill:hover { border-color: var(--qi-accent); }
.qi-channel-pill.active { color: var(--qi-accent); border-color: var(--qi-accent); background: rgba(102,252,241,0.08); }

/* Readonly inputs (username echo on password step) */
.login__field--readonly { opacity: 0.6; }

/* Topbar mesh status label */
.qi-topbar__status-label { font: var(--qi-font-caption); color: var(--qi-text-muted); }

/* Landing send spinner */
.landing__send-spinner { animation: qi-spin 0.9s linear infinite; }

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

/* Toast — transient bottom notice (outbox/sync feedback) */
.qi-toast {
  position: fixed;
  bottom: var(--qi-space-xl);
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  padding: var(--qi-space-sm) var(--qi-space-xl);
  font: var(--qi-font-body-sm);
  color: var(--qi-text);
  background: var(--qi-surface-raised);
  border: 1px solid var(--qi-glass-border);
  border-radius: var(--qi-radius-pill);
  backdrop-filter: blur(24px) saturate(160%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
}

.qi-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}