/* ============================================================================
   AIVE ONE — Component library  ·  depends on tokens.css + base.css
   Every value resolves to a semantic token, so theme/density/accent tweaks
   cascade automatically.
   ========================================================================== */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{--_h:var(--ctl-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--_h);padding:0 var(--space-5);border-radius:var(--radius-md);border:1px solid transparent;
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);
  user-select:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn svg{width:18px;height:18px}
.btn-sm{--_h:var(--ctl-sm);padding:0 var(--space-3);font-size:var(--fs-xs);border-radius:var(--radius-sm)}
.btn-lg{--_h:var(--ctl-lg);padding:0 var(--space-6);font-size:var(--fs-base)}
.btn-icon{padding:0;width:var(--_h)}
.btn-block{width:100%}

.btn-primary{background:var(--gradient-accent);color:var(--text-on-accent);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--border-strong);background:var(--surface-3);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--text-3);background:var(--surface-2)}
.btn-danger{background:var(--danger);color:#2a0a04;box-shadow:var(--shadow-sm)}
.btn-danger:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ai{color:var(--on-ai);background:var(--gradient-ai);box-shadow:var(--glow-ai)}
.btn-ai:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.label{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text)}
.hint{font-size:var(--fs-xs);color:var(--text-3)}
.input,.textarea,.select{width:100%;min-height:var(--ctl-md);background:var(--inset);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 var(--space-4);font-size:var(--fs-sm);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.textarea{padding:var(--space-3) var(--space-4);min-height:96px;line-height:var(--lh-normal);resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--border-strong)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:var(--ring)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238995ac' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-4) center;padding-right:var(--space-10)}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:var(--space-4);width:18px;height:18px;color:var(--text-3);pointer-events:none}
.search .input{padding-left:var(--space-10)}

/* checkbox / radio / switch */
.check{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--fs-sm)}
.check input{appearance:none;width:18px;height:18px;border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--inset);display:grid;place-content:center;transition:all var(--dur-fast)}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";width:10px;height:10px;background:var(--text-on-accent);clip-path:polygon(14% 47%,0 61%,40% 100%,100% 18%,86% 5%,38% 70%)}
.check input[type=radio]:checked::after{clip-path:none;border-radius:50%;width:8px;height:8px}
.switch{position:relative;width:42px;height:24px;flex:0 0 auto;cursor:pointer}
.switch input{appearance:none;position:absolute;inset:0;margin:0;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:background var(--dur-normal)}
.switch input:checked{background:var(--accent);border-color:var(--accent)}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--dur-normal) var(--ease-out)}
.switch input:checked::after{transform:translateX(18px)}

/* segmented control */
.segmented{display:inline-flex;background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px}
.segmented button{border:0;background:transparent;color:var(--text-2);font-size:var(--fs-xs);font-weight:var(--fw-medium);padding:var(--space-2) var(--space-4);border-radius:calc(var(--radius-md) - 3px);cursor:pointer;transition:all var(--dur-fast);white-space:nowrap}
.segmented button[aria-selected="true"]{background:var(--surface-2);color:var(--text);box-shadow:var(--shadow-xs)}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border)}
.tabs button{border:0;background:transparent;color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  padding:var(--space-3) var(--space-4);cursor:pointer;position:relative;transition:color var(--dur-fast)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:var(--space-4);right:var(--space-4);bottom:-1px;height:2px;background:var(--gradient-accent);border-radius:2px}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-xs)}
.card-hover{transition:transform var(--dur-normal) var(--ease-out),border-color var(--dur-normal),box-shadow var(--dur-normal)}
.card-hover:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)}
.card-glass{background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md))}
.metric{display:flex;flex-direction:column;gap:var(--space-1)}
.metric .v{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h2)}
.metric .k{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-family:var(--font-mono)}

/* ── Badges / pills / status ─────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide);white-space:nowrap;
  padding:3px var(--space-2);border-radius:var(--radius-pill);border:1px solid transparent}
.badge-neutral{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
.badge-accent{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.badge-ai{background:var(--ai-soft);color:var(--ai);border-color:color-mix(in srgb,var(--ai) 40%,transparent)}
.badge-success{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,transparent)}
.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.badge-warning{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 40%,transparent)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot-live{background:var(--success);box-shadow:0 0 0 0 var(--success);animation:pulse-dot 2s var(--ease-out) infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--success) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface)}
.alert .ic{width:20px;height:20px;flex:0 0 auto}
.alert-info{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:var(--accent-soft)}
.alert-success{border-color:color-mix(in srgb,var(--success) 30%,transparent);background:var(--success-soft)}
.alert-warning{border-color:color-mix(in srgb,var(--warning) 30%,transparent);background:var(--warning-soft)}
.alert-danger{border-color:color-mix(in srgb,var(--danger) 30%,transparent);background:var(--danger-soft)}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast{display:flex;align-items:center;gap:var(--space-3);background:var(--elevated);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-lg);min-width:280px}

/* ── Overlays: modal / drawer / tooltip / menu ───────────────────────────── */
.modal{background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);
  max-width:480px;width:100%;padding:var(--space-6)}
.drawer{background:var(--elevated);border-left:1px solid var(--border);box-shadow:var(--shadow-xl);width:380px;height:100%;padding:var(--space-6)}
.tooltip{background:var(--n-700);color:var(--n-50);font-size:var(--fs-xs);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);border:1px solid var(--border)}
.menu{background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-2);min-width:200px}
.menu button{display:flex;align-items:center;gap:var(--space-3);width:100%;border:0;background:transparent;color:var(--text);
  font-size:var(--fs-sm);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;text-align:left}
.menu button:hover{background:var(--surface-2)}
.menu hr{border:0;border-top:1px solid var(--border-soft);margin:var(--space-2) 0}

/* ── Command palette ─────────────────────────────────────────────────────── */
.cmdk{background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:560px;max-width:100%;overflow:hidden}
.cmdk .top{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}
.cmdk .top input{flex:1;background:transparent;border:0;font-size:var(--fs-lg);color:var(--text)}
.cmdk .top input:focus{outline:none}
.cmdk .list{padding:var(--space-2);max-height:320px;overflow:auto}
.cmdk .grp{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-3);font-family:var(--font-mono);padding:var(--space-3) var(--space-3) var(--space-1)}
.cmdk .item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);cursor:pointer;color:var(--text)}
.cmdk .item[aria-selected="true"],.cmdk .item:hover{background:var(--accent-soft)}
.cmdk .item .meta{margin-left:auto;color:var(--text-3);font-size:var(--fs-xs)}

/* ── AI components ───────────────────────────────────────────────────────── */
.chat{display:flex;flex-direction:column;gap:var(--space-4)}
.msg{display:flex;gap:var(--space-3);max-width:88%}
.msg .bubble{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.msg-user{align-self:flex-end;flex-direction:row-reverse}
.msg-user .bubble{background:var(--gradient-accent);color:var(--text-on-accent);border-bottom-right-radius:var(--radius-xs)}
.msg-ai .bubble{background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:var(--radius-xs)}
.ai-avatar{width:30px;height:30px;border-radius:var(--radius-sm);flex:0 0 auto;display:grid;place-content:center;background:var(--ai-soft);border:1px solid color-mix(in srgb,var(--ai) 40%,transparent)}
.thinking{display:inline-flex;align-items:center;gap:6px;color:var(--ai);font-size:var(--fs-sm)}
.thinking i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:think 1.4s var(--ease-standard) infinite}
.thinking i:nth-child(2){animation-delay:.2s} .thinking i:nth-child(3){animation-delay:.4s}
@keyframes think{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* agent run timeline */
.agent-run{display:flex;flex-direction:column;gap:0}
.agent-step{display:flex;gap:var(--space-3);padding-bottom:var(--space-4);position:relative}
.agent-step::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--border)}
.agent-step:last-child::before{display:none}
.agent-step .node{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-content:center;z-index:1;
  background:var(--surface);border:2px solid var(--border);font-size:11px}
.agent-step.done .node{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.agent-step.active .node{background:var(--ai-soft);border-color:var(--ai);color:var(--ai)}
.agent-step .body .t{font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.agent-step .body .d{font-size:var(--fs-xs);color:var(--text-3)}

/* ── Progress / skeleton / misc ──────────────────────────────────────────── */
.progress{height:6px;background:var(--inset);border-radius:99px;overflow:hidden}
.progress > i{display:block;height:100%;background:var(--p-prism);border-radius:99px}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--elevated) 37%,var(--surface-2) 63%);
  background-size:400% 100%;border-radius:var(--radius-sm);animation:shimmer 1.4s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:grid;place-content:center;font-size:var(--fs-sm);font-weight:var(--fw-semibold);overflow:hidden}
.kbd{font-family:var(--font-mono);font-size:var(--fs-2xs);background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--radius-xs);padding:2px 6px;color:var(--text-2)}
.code{font-family:var(--font-mono);font-size:var(--fs-xs);background:var(--inset);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);color:var(--text-2)}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th{text-align:left;font-family:var(--font-mono);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  color:var(--text-3);font-weight:var(--fw-semibold);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}
.table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-soft);color:var(--text-2)}
.table tr:hover td{background:var(--surface-2)}

/* ── App chrome: topbar + sidebar ────────────────────────────────────────── */
.topbar{height:var(--nav-h);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-5);
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(var(--blur-md));border-bottom:1px solid var(--border);position:sticky;top:0;z-index:var(--z-sticky)}
.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.nav-group{font-family:var(--font-mono);font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-3);padding:var(--space-4) var(--space-3) var(--space-2)}
.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--text-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}
.nav-item svg{width:18px;height:18px}