/* ============================================================
   ATOMS — only the pieces the Investigation + Chat screens use.
   All values reference tokens.css. Reusable across both modules.
   ============================================================ */

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;border-radius:var(--r-md);
  border:1px solid transparent;background:transparent;
  font-weight:600;font-size:14px;line-height:1;white-space:nowrap;
  cursor:pointer;user-select:none;
  transition:background .15s var(--ease),border-color .15s,color .15s,opacity .15s;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--ghost{color:var(--text-secondary);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface-raised);color:var(--text-primary)}
.btn--subtle{color:var(--text-secondary);background:var(--surface-raised)}
.btn--subtle:hover{background:var(--surface-hover);color:var(--text-primary)}
.btn--sm{height:32px;padding:0 12px;font-size:13px}
.btn--sm svg{width:16px;height:16px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- ICON BUTTON (composer + toolbar) ---------- */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-full);
  background:var(--surface-raised);color:var(--icon);border:0;cursor:pointer;
  transition:background .15s var(--ease),color .15s;flex:none;
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:hover{background:var(--surface-hover);color:var(--text-primary)}
.icon-btn.is-active{background:var(--surface-hover);color:var(--text-primary)}
.icon-btn--sm{width:32px;height:32px}.icon-btn--sm svg{width:16px;height:16px}
.icon-btn--ghost{background:transparent}
.icon-btn--ghost:hover{background:var(--surface-raised)}
.icon-btn--accent{background:var(--accent);color:var(--on-accent)}
.icon-btn--accent:hover{background:var(--accent-hover)}

/* ---------- CHIP / PILL (source pill, Full Analysis, EN) ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;
  border-radius:var(--r-full);background:var(--surface-raised);border:1px solid var(--border);
  color:var(--text-secondary);font-weight:500;font-size:13px;line-height:1;
  cursor:pointer;transition:background .15s var(--ease),border-color .15s;
}
.chip:hover{background:var(--surface-hover)}
.chip svg{width:16px;height:16px;color:var(--icon-muted);flex:none}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}
.chip .chev{margin-inline-start:2px;width:14px;height:14px}
.chip--static{cursor:default}
.chip--sm{height:30px;font-size:12px;padding:0 10px}

/* ---------- TAG / STATUS BADGE (small) ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;
  border-radius:var(--r-xs);font-weight:600;font-size:11px;line-height:1}
.tag svg{width:12px;height:12px;flex:none}
.tag--success{background:var(--success-soft);color:var(--success)}
.tag--warning{background:var(--warning-soft);color:var(--warning)}
.tag--danger{background:var(--danger-soft);color:var(--danger)}
.tag--accent{background:var(--accent-soft);color:var(--accent)}
.tag--neutral{background:var(--surface-raised);color:var(--text-muted)}

/* ---------- VERIFY / CONFIDENCE ---------- */
.verify{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;line-height:1}
.verify svg{width:15px;height:15px;flex:none}
.verify--verified{color:var(--success)}
.verify--review{color:var(--warning)}
.verify--critical{color:var(--danger)}
/* boxed confidence pill */
.verify.is-pill{padding:5px 10px;border-radius:var(--r-full);border:1px solid currentColor}
.verify--verified.is-pill{background:var(--success-soft)}
.verify--review.is-pill{background:var(--warning-soft)}
.verify--critical.is-pill{background:var(--danger-soft)}

/* ---------- AVATAR ---------- */
.avatar{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--surface-hover);
  color:var(--text-secondary);font-weight:600;font-size:11px;line-height:1;
  text-transform:uppercase;flex:none}
.avatar--lg{width:36px;height:36px;font-size:13px}
.avatar--accent{background:var(--accent-soft);color:var(--accent)}

/* ---------- ACCENT ICON BADGE (answer header spark) ---------- */
.icon-badge{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-sm);background:var(--accent-soft);
  color:var(--accent);flex:none}
.icon-badge svg{width:16px;height:16px}
.icon-badge--lg{width:32px;height:32px;border-radius:var(--r-md)}
.icon-badge--lg svg{width:18px;height:18px}

/* ---------- INPUT ---------- */
.input{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  color:var(--text-primary);font-size:14px;font-family:var(--font-sans);
  transition:border-color .15s var(--ease)}
.input::placeholder{color:var(--text-faint)}
.input:focus,.input:focus-within{outline:none;border-color:var(--accent)}
textarea.input{height:auto;min-height:44px;padding:11px 12px;resize:none;line-height:1.5}

/* ---------- MENU / DROPDOWN ---------- */
.menu{background:var(--menu-bg);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:6px;box-shadow:var(--shadow-lg);min-width:210px}
.menu-label{padding:6px 10px 4px;font-weight:600;font-size:11px;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-sm);
  background:none;border:0;text-align:start;font-family:var(--font-sans);
  color:var(--text-secondary);font-weight:500;font-size:13px;line-height:1;cursor:pointer;
  transition:background .12s var(--ease),color .12s}
.menu-item:focus-visible{outline:none;background:var(--glass);color:var(--text-primary)}
.menu-item svg{width:16px;height:16px;color:var(--icon-muted);flex:none}
.menu-item .kbd{margin-inline-start:auto;font-size:11px;color:var(--text-faint)}
.menu-item:hover{background:var(--glass);color:var(--text-primary)}
.menu-item:hover svg{color:var(--text-primary)}
.menu-item--danger{color:var(--danger)}.menu-item--danger svg{color:var(--danger)}
.menu-item--danger:hover{background:var(--danger-soft);color:var(--danger)}
.menu-sep{height:1px;background:var(--border);margin:6px 4px}

/* ---- nav ⋯ menu: Add-to-project submenu ---- */
.nav-more{min-width:200px}
.menu-item.has-sub{position:relative}
.menu-item.has-sub .mi-lbl{flex:1}
.menu-item.has-sub .sub-chev{margin-inline-start:auto;color:var(--icon-muted)}
.submenu{position:absolute;top:-6px;inset-inline-start:calc(100% + 6px);z-index:10;
  background:var(--menu-bg);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:6px;box-shadow:var(--shadow-lg);min-width:236px;
  opacity:0;transform:translateX(-6px);pointer-events:none;transition:opacity .14s var(--ease),transform .14s var(--ease)}
.menu-item.has-sub:hover .submenu,.menu-item.has-sub.sub-open .submenu{opacity:1;transform:none;pointer-events:auto}
.proj-search{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:2px 2px 6px;
  border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--border)}
.proj-search svg{width:16px;height:16px;color:var(--icon-muted);flex:none}
.proj-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text-primary);
  font-family:var(--font-sans);font-size:13px}
.proj-search input::placeholder{color:var(--text-faint)}
.proj-list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto}
.proj-item{display:flex;align-items:center;width:100%;padding:9px 10px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--text-secondary);font-family:var(--font-sans);font-weight:500;font-size:13px;
  text-align:start;cursor:pointer;transition:background .12s var(--ease),color .12s}
.proj-item:hover{background:var(--glass);color:var(--text-primary)}
.proj-empty{padding:10px;color:var(--text-faint);font-size:12px;text-align:center}

/* ---- confirmation dialog (Delete) ---- */
.dialog-scrim{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:scrimIn .16s var(--ease) both}
.dialog{width:min(400px,calc(100vw - 48px));background:var(--menu-bg);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:24px;box-shadow:var(--shadow-2xl);
  display:flex;flex-direction:column;gap:8px;animation:dialogIn .18s var(--ease) both}
.dialog__ic{width:44px;height:44px;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--danger-soft);color:var(--danger);margin-bottom:6px}
.dialog__ic svg{width:20px;height:20px}
.dialog__t{font-weight:600;font-size:16px;color:var(--text-primary)}
.dialog__m{font-size:13px;line-height:1.5;color:var(--text-muted)}
.dialog__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.dlg-btn{height:38px;padding:0 16px;border-radius:var(--r-md);font-family:var(--font-sans);
  font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent;transition:.12s var(--ease)}
.dlg-btn--ghost{background:var(--glass);border-color:var(--border);color:var(--text-primary)}
.dlg-btn--ghost:hover{background:var(--glass-2)}
.dlg-btn--danger{background:var(--danger);color:#fff}
.dlg-btn--danger:hover{filter:brightness(1.08)}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes dialogIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- POPOVER wrapper (for dropdown positioning) ---------- */
.pop{position:relative}
.pop > .menu{position:absolute;top:calc(100% + 6px);z-index:60;
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top;pointer-events:none;
  transition:opacity .14s var(--ease),transform .14s var(--ease)}
.pop.is-open > .menu{opacity:1;transform:none;pointer-events:auto}
.pop--end > .menu{right:0}
[dir="rtl"] .pop--end > .menu{right:auto;left:0}

/* ---------- CARD FRAME (title · verify · ⋮) ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:12px}
.card__head{display:flex;align-items:center;gap:10px}
.card__title{font-weight:600;font-size:15px;color:var(--text-primary);flex:1;min-width:0}
.card__divider{height:1px;background:var(--border);margin:2px 0}

/* ---------- SUGGESTION CARD ---------- */
.suggestion{display:flex;flex-direction:column;gap:6px;padding:14px 16px;text-align:start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer;
  transition:background .15s var(--ease),border-color .15s}
.suggestion:hover{background:var(--surface-raised);border-color:var(--border-hover)}
.suggestion__t{font-weight:600;font-size:14px;color:var(--text-primary)}
.suggestion__d{font-size:12px;color:var(--text-muted);line-height:16px}

/* A floated menu is parked on <body> (see floatMenu) so no ancestor stacking context
   — .afoot z1, .history z20 — can paint over it. It is positioned inline; these
   rules just restore the visible state that `.pop.is-open > .menu` used to give it. */
.menu--float{opacity:1;transform:none;pointer-events:auto;transform-origin:top;
  animation:menuIn .14s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}