/* =======================================================
   Layout 7 — Fusion
   #3's structure (list left / thread center / panel right,
   rich detail) in #6's floating-card-on-gradient style,
   with a left icon nav rail. No top metrics.

   Radii are tokenized (--r-lg/md/sm/xs) so the Corners
   tweak can retune them. Surface + Background are variant
   classes applied on .layout-fusion itself.
   ======================================================= */

.layout-fusion {
  --canvas: oklch(0.975 0.006 285);
  --surface: #ffffff;
  --fg: oklch(0.18 0.015 270);
  --fg-strong: oklch(0.08 0.020 270);
  --muted: oklch(0.48 0.012 270);
  --dim: oklch(0.66 0.010 270);
  --faint: oklch(0.82 0.006 270);
  --border: oklch(0.92 0.008 270);
  --hairline: oklch(0.95 0.006 270);
  --sunken: oklch(0.965 0.006 285);

  /* Radius scale — default = TIGHT (crisp, less "AI-rounded") */
  --r-lg: 9px;
  --r-md: 8px;
  --r-sm: 6px;
  --r-xs: 5px;
  --card-radius: var(--r-lg);
  --nav-w: 72px;

  /* Surface tokens — default = FLOATING */
  --card-shadow: 0 1px 2px rgba(30,20,80,0.04), 0 12px 32px rgba(40,28,110,0.07);
  --msg-shadow: 0 1px 2px rgba(30,20,80,0.03), 0 6px 18px rgba(40,28,110,0.05);
  --card-border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  --gradient-veil: radial-gradient(ellipse 300px 160px at 50% 0%, color-mix(in oklch, var(--brand) 9%, transparent), transparent 70%);
  --thread-veil: radial-gradient(ellipse 500px 300px at 50% -5%, color-mix(in oklch, var(--ai) 4%, transparent), transparent 70%);

  /* Background mesh — default = AURORA */
  --bg-mesh:
    radial-gradient(ellipse 760px 420px at 12% -8%, color-mix(in oklch, var(--brand) 13%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse 900px 520px at 95% 8%, color-mix(in oklch, var(--ai) 10%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 900px 600px at 80% 110%, color-mix(in oklch, var(--brand) 8%, transparent) 0%, transparent 60%);

  display: grid;
  grid-template-columns: var(--nav-w) 384px 1fr 408px;
  gap: 16px;
  padding: 16px;
  height: 100%;
  background: var(--bg-mesh), var(--canvas);
}

/* ===== Corner variants ===== */
.layout-fusion.fz-corners-tight  { --r-lg: 9px;  --r-md: 8px;  --r-sm: 6px;  --r-xs: 5px; }
.layout-fusion.fz-corners-medium { --r-lg: 15px; --r-md: 12px; --r-sm: 9px;  --r-xs: 7px; }
.layout-fusion.fz-corners-round  { --r-lg: 22px; --r-md: 17px; --r-sm: 13px; --r-xs: 9px; }

/* ===== Nav rail open/closed ===== */
.layout-fusion.fz-nav-open { --nav-w: 212px; }

/* ===== Surface variants ===== */
/* Floating = default tokens above. Flat = solid, hairline, no glow/gradient. */
.layout-fusion.fz-surface-flat {
  --canvas: oklch(0.985 0.004 285);
  --card-shadow: none;
  --msg-shadow: none;
  --card-border: 1px solid var(--border);
  --gradient-veil: none;
  --thread-veil: none;
}
.layout-fusion.fz-surface-flat .fz-rail .ico.is-active { box-shadow: none; border: 1px solid var(--border); }
.layout-fusion.fz-surface-flat .fz-conv.is-active {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand) 30%, transparent);
}
.layout-fusion.fz-surface-flat .fz-btn.primary,
.layout-fusion.fz-surface-flat .fz-rail .brand,
.layout-fusion.fz-surface-flat .fz-ai-banner .spark,
.layout-fusion.fz-surface-flat .fz-msg.draft .fz-msg-head {
  background: var(--brand);
  box-shadow: none;
}
.layout-fusion.fz-surface-flat .fz-msg.draft { box-shadow: none; border-color: color-mix(in oklch, var(--ai) 50%, white); }
.layout-fusion.fz-surface-flat .fz-ai-banner,
.layout-fusion.fz-surface-flat .fz-score,
.layout-fusion.fz-surface-flat .fz-risk {
  background: var(--sunken);
  border-color: var(--border);
}
.layout-fusion.fz-surface-flat .fz-ctx-head { background: transparent; }
.layout-fusion.fz-surface-flat .fz-ctx-head .av { box-shadow: none; }

/* ===== Background variants ===== */
.layout-fusion.fz-bg-plain  { --bg-mesh: none; }
.layout-fusion.fz-bg-dots {
  --bg-mesh:
    radial-gradient(circle at center, color-mix(in oklch, var(--fg) 9%, transparent) 1px, transparent 1px);
  background: var(--bg-mesh), var(--canvas);
  background-size: 22px 22px, auto;
}
.layout-fusion.fz-bg-grid {
  --bg-mesh:
    linear-gradient(to right, color-mix(in oklch, var(--fg) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--fg) 8%, transparent) 1px, transparent 1px);
  background: var(--bg-mesh), var(--canvas);
  background-size: 24px 24px, 24px 24px, auto;
}

/* ===== Section seams (gap between list / thread / panel) ===== */
/* gapped = default (16px gaps, separate floating cards) */
/* divided = no gap, single hairline trim, reads as one unified window */
.layout-fusion.fz-seams-divided { gap: 0; }
.layout-fusion.fz-seams-divided .fz-rail { margin-right: 14px; }
.layout-fusion.fz-seams-divided .fz-list   { border-radius: var(--r-lg) 0 0 var(--r-lg); border-right-width: 0; }
.layout-fusion.fz-seams-divided .fz-thread { border-radius: 0; border-right-width: 0; }
.layout-fusion.fz-seams-divided .fz-ctx    { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
/* grooved = thin canvas-colored channel between panels */
.layout-fusion.fz-seams-grooved { gap: 4px; }
.layout-fusion.fz-seams-grooved .fz-rail { margin-right: 10px; }

/* ===== Density variants ===== */
.layout-fusion.fz-density-compact { gap: 10px; padding: 10px; grid-template-columns: var(--nav-w) 340px 1fr 372px; }
.layout-fusion.fz-density-compact .fz-conv { padding: 8px 10px; }
.layout-fusion.fz-density-compact .fz-msg-body { padding: 11px 14px; font-size: 12.5px; }
.layout-fusion.fz-density-compact .fz-ctx-section { padding: 12px 14px; }
.layout-fusion.fz-density-airy { gap: 22px; padding: 24px; grid-template-columns: var(--nav-w) 410px 1fr 436px; }
.layout-fusion.fz-density-airy .fz-conv { padding: 14px 14px; }
.layout-fusion.fz-density-airy .fz-msg-body { padding: 18px 20px; font-size: 13.5px; line-height: 1.62; }
.layout-fusion.fz-density-airy .fz-ctx-section { padding: 20px 20px; }

/* ============ LEFT NAV RAIL (collapsible) ============ */
.layout-fusion .fz-rail {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 4px 8px;
  min-width: 0; overflow: hidden;
}
.layout-fusion .fz-rail .brand {
  height: 40px; flex: 0 0 40px;
  border-radius: var(--r-md);
  background: var(--brand); border: 1px solid var(--brand-border, transparent);
  color: var(--brand-fg);
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 0;
  font-weight: 700; font-size: 17px;
  box-shadow: 0 6px 16px color-mix(in oklch, var(--brand) 30%, transparent);
  margin-bottom: 8px; overflow: hidden;
}
.layout-fusion .fz-rail .brand .brandword {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
}
.layout-fusion .fz-nav { display: flex; flex-direction: column; gap: 3px; }
.layout-fusion .fz-navitem {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 9px;
  border-radius: var(--r-md);
  color: var(--muted); cursor: default; position: relative;
  transition: background .12s, color .12s;
}
.layout-fusion .fz-navitem:hover { background: rgba(255,255,255,0.7); color: var(--fg); }
.layout-fusion .fz-navitem.is-active {
  background: var(--surface); color: var(--brand);
  box-shadow: var(--card-shadow);
}
.layout-fusion .fz-navitem.is-active::before {
  content: "";
  position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 2px;
  background: var(--brand);
}
.layout-fusion .fz-navitem .ico {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.layout-fusion .fz-navitem .ico .badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px;
  background: var(--alert); color: #fff;
  font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--canvas);
}
.layout-fusion .fz-navitem .navword {
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.layout-fusion .fz-navitem.user-row .user { box-shadow: var(--card-shadow); border: 2px solid var(--surface); }
.layout-fusion .fz-rail .spacer { flex: 1; }
.layout-fusion .fz-rail-toggle {
  display: flex; align-items: center; gap: 12px;
  height: 36px; padding: 0 9px; margin-top: 4px;
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 500;
  border-radius: var(--r-md);
}
.layout-fusion .fz-rail-toggle:hover { background: rgba(255,255,255,0.7); color: var(--fg); }
.layout-fusion .fz-rail-toggle .ico {
  flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center;
}

/* collapsed (default): center items, hide words */
.layout-fusion .fz-rail .brand,
.layout-fusion .fz-navitem,
.layout-fusion .fz-rail-toggle { justify-content: center; }
.layout-fusion .fz-rail .brandword,
.layout-fusion .fz-navitem .navword,
.layout-fusion .fz-rail-toggle .navword { display: none; }

/* expanded */
.layout-fusion.fz-nav-open .fz-rail .brand { justify-content: flex-start; padding: 0 11px; }
.layout-fusion.fz-nav-open .fz-navitem,
.layout-fusion.fz-nav-open .fz-rail-toggle { justify-content: flex-start; }
.layout-fusion.fz-nav-open .fz-rail .brandword,
.layout-fusion.fz-nav-open .fz-navitem .navword,
.layout-fusion.fz-nav-open .fz-rail-toggle .navword { display: inline; }

/* ============ FLOATING CARD SHELL ============ */
.layout-fusion .fz-card {
  background: var(--surface);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ============ CONVERSATION LIST (left) ============ */
.layout-fusion .fz-list-head {
  padding: 16px 18px 12px;
  display: flex; flex-direction: column; gap: 12px;
  border-bottom: 1px solid var(--hairline);
}

/* ===== Panels flush to top (no canvas gap / no header band at top) ===== */
.layout-fusion.fz-paneltop-flush { padding-top: 0; }
.layout-fusion.fz-paneltop-flush .fz-list,
.layout-fusion.fz-paneltop-flush .fz-thread,
.layout-fusion.fz-paneltop-flush .fz-ctx { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; }
.layout-fusion.fz-paneltop-flush .fz-list-head,
.layout-fusion.fz-paneltop-flush .fz-thread-head,
.layout-fusion.fz-paneltop-flush .fz-ctx-head { background: transparent; }
.layout-fusion.fz-paneltop-flush .fz-thread-head { padding-top: 18px; }
.layout-fusion .fz-list-title {
  display: flex; align-items: center; gap: 10px;
}
.layout-fusion .fz-list-title h2 {
  font-size: 16px; font-weight: 700; margin: 0;
  color: var(--fg-strong); letter-spacing: -0.01em;
}
.layout-fusion .fz-list-title .count {
  font-size: 11.5px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-strong);
}
.layout-fusion .fz-list-title .spacer { flex: 1; }
.layout-fusion .fz-list-title .tool {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--sunken);
}
.layout-fusion .fz-search {
  height: 34px; border-radius: var(--r-sm);
  background: var(--sunken);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  color: var(--muted); font-size: 12.5px;
}
.layout-fusion .fz-search .kbd {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  padding: 1px 6px; background: var(--surface); border-radius: var(--r-xs);
}
.layout-fusion .fz-tabs {
  display: flex; gap: 4px;
}
.layout-fusion .fz-tab {
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; color: var(--muted);
}
.layout-fusion .fz-tab.is-active { background: var(--fg-strong); color: var(--surface); font-weight: 600; }

.layout-fusion .fz-list-body { flex: 1; overflow-y: auto; padding: 8px; }
.layout-fusion .fz-conv {
  padding: 11px 12px;
  border-radius: var(--r-md);
  display: grid; grid-template-columns: 40px 1fr; gap: 11px;
  cursor: default;
  margin-bottom: 2px;
}
.layout-fusion .fz-conv > .av:not(.sm) { width: 40px; height: 40px; font-size: 13px; align-self: start; }
.layout-fusion .fz-conv.qv-compact, .layout-fusion .fz-conv.qv-minimal { grid-template-columns: 30px 1fr; }
.layout-fusion .fz-conv:hover { background: var(--sunken); }
.layout-fusion .fz-conv.is-active {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand) 25%, transparent);
}
/* ===== Conversation selection-style variants ===== */
/* span — rows run edge-to-edge across the panel, AI-colored accent bar on selected */
.layout-fusion.fz-convsel-span .fz-list-body { padding-left: 0; padding-right: 0; }
.layout-fusion.fz-convsel-span .fz-conv { border-radius: 0; padding-left: 16px; padding-right: 16px; margin-bottom: 0; }
.layout-fusion.fz-convsel-span .fz-conv.is-active { background: var(--conv-fill, var(--sunken)); box-shadow: inset 3px 0 0 var(--ai); }
/* fill-shade variants */
.layout-fusion.fz-convfill-grey     .fz-conv.is-active { --conv-fill: color-mix(in oklch, var(--fg) 8%, white); }
.layout-fusion.fz-convfill-soft     .fz-conv.is-active { --conv-fill: color-mix(in oklch, var(--ai) 8%, white); }
.layout-fusion.fz-convfill-mid      .fz-conv.is-active { --conv-fill: color-mix(in oklch, var(--ai) 16%, white); }
.layout-fusion.fz-convfill-full     .fz-conv.is-active { --conv-fill: color-mix(in oklch, var(--ai) 28%, white); }
.layout-fusion .fz-conv-body { min-width: 0; }
.layout-fusion .fz-conv-l1 {
  display: flex; align-items: baseline; gap: 6px;
}
.layout-fusion .fz-conv-name { font-size: 13px; font-weight: 600; color: var(--fg-strong); }
.layout-fusion .fz-conv-co { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.layout-fusion .fz-conv-time { font-size: 10.5px; color: var(--dim); font-family: var(--mono); }
.layout-fusion .fz-conv-preview {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.layout-fusion .fz-conv-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap;
}

/* ===== Draft pinned as full-width footer below the scroll area ===== */
.layout-fusion .fz-thread-draft {
  flex: 0 0 auto;
  border-top: 1px solid var(--hairline);
}
.layout-fusion .fz-thread-draft .fz-msg.draft {
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.layout-fusion .fz-thread-draft .fz-msg.draft.is-resolved {
  border-radius: 0;
}

/* ===== Draft — full width, keeping original art styling ===== */
.layout-fusion .fz-thread-body .fz-msg.draft {
  margin-left: -4px;
  margin-right: -4px;
  width: calc(100% + 8px);
  border-radius: var(--r-md);
  /* restore original AI glow — don't override with generic msg-shadow */
  border: 1.5px solid color-mix(in oklch, var(--ai) 45%, white);
  box-shadow: 0 1px 2px rgba(40,28,110,0.05), 0 14px 36px color-mix(in oklch, var(--ai) 16%, transparent);
}

.layout-fusion .fz-task.ai-done { opacity: 0.75; }
.layout-fusion .ai-box { background: color-mix(in oklch, var(--ai) 18%, white) !important; border-color: var(--ai) !important; }
.layout-fusion .ai-auto-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 9.5px; font-weight: 700; color: var(--ai); margin-left: 6px; vertical-align: middle; }
.layout-fusion .fz-ch-switcher {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  flex-wrap: wrap;
}
.layout-fusion .fz-ch-tab {
  height: 30px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .12s, color .12s;
}
.layout-fusion .fz-ch-tab:hover { background: var(--sunken); color: var(--fg); }
.layout-fusion .fz-ch-tab.is-active {
  background: var(--fg-strong); color: #fff; font-weight: 700;
  border-color: transparent;
}
.layout-fusion .fz-ch-tab .cnt {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 0 5px; border-radius: 999px;
  background: rgba(255,255,255,0.2); color: inherit;
}
.layout-fusion .fz-ch-tab:not(.is-active) .cnt {
  background: var(--sunken); color: var(--dim);
}


.layout-fusion.fz-thlayout-chat .fz-thread-body { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.layout-fusion.fz-thlayout-chat .fz-msg { border-radius: var(--r-lg); width: min(98%, 860px); max-width: 98%; border: var(--card-border); }
.layout-fusion.fz-thlayout-chat .fz-msg:not(.draft):not(.outgoing) { align-self: flex-start; border-bottom-left-radius: 4px; width: min(92%, 800px); margin-right: auto; }
/* outgoing = rep's sent message, aligned right — white background */
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing { align-self: flex-end; border-bottom-right-radius: 4px; border-bottom-left-radius: var(--r-lg); width: min(92%, 800px); max-width: 92%; margin-left: auto;
  background: #fff; color: var(--fg) !important; border-color: var(--border); }
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing * { color: var(--fg) !important; }
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing .fz-msg-head { background: var(--surface); border-bottom-color: var(--hairline); }
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing .fz-msg-head .time,
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing .fz-msg-head .from,
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing .fz-msg-head span { color: var(--muted) !important; }
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing .fz-msg-foot,
.layout-fusion.fz-thlayout-chat .fz-msg.outgoing .fz-msg-foot * { color: var(--dim) !important; }
/* draft stays full width at top */
.layout-fusion.fz-thlayout-chat .fz-msg.draft,
.layout-fusion.fz-thlayout-chat .fz-msg.draft.is-resolved { align-self: stretch; max-width: 100%; border-radius: var(--r-lg); }
.layout-fusion.fz-thlayout-chat .fz-ai-banner { border-radius: var(--r-lg); }
.layout-fusion.fz-threadbg-white   .fz-thread-body { background: #fff; }
.layout-fusion.fz-threadbg-soft    .fz-thread-body { background: color-mix(in oklch, var(--ai) 5%, white); }
.layout-fusion.fz-threadbg-tinted  .fz-thread-body { background: color-mix(in oklch, var(--ai) 12%, white); }
.layout-fusion.fz-threadbg-dark    .fz-thread-body { background: oklch(0.20 0.02 270); }
.layout-fusion.fz-threadbg-dark .fz-msg-body,
.layout-fusion.fz-threadbg-dark .fz-msg-head { color: oklch(0.88 0.01 270); }
.layout-fusion.fz-threadbg-dark .fz-msg { border-color: oklch(0.30 0.02 270); background: oklch(0.23 0.02 270); }
.layout-fusion.fz-threadbg-dark .fz-ai-banner { background: oklch(0.26 0.03 270); border-color: oklch(0.34 0.04 270); color: oklch(0.88 0.01 270); }
.layout-fusion .fz-conv-preview.one { -webkit-line-clamp: 1; margin-top: 2px; }
.layout-fusion .fz-conv-preview.two { -webkit-line-clamp: 2; }
.layout-fusion .statusdot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex-shrink: 0; }
.layout-fusion .statusdot.alert { background: var(--alert); }
.layout-fusion .statusdot.warn { background: oklch(0.66 0.15 65); }
.layout-fusion .statusdot.ok { background: oklch(0.60 0.10 200); }
.layout-fusion .statusdot.info { background: oklch(0.62 0.10 245); }
.layout-fusion .fz-conv-dealval { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--fg-strong); }
.layout-fusion .fz-conv-dealval.sm { font-size: 11px; }
.layout-fusion .fz-conv-next { font-size: 11px; color: var(--ai); font-weight: 500; margin-top: 6px; }
.layout-fusion .fz-conv-next b { color: var(--fg); font-weight: 600; }
/* minimal */
.layout-fusion .fz-conv.qv-minimal { align-items: center; gap: 9px; padding-top: 9px; padding-bottom: 9px; }
.layout-fusion .fz-conv.qv-minimal .fz-conv-l1 { margin: 0; }
/* compact */
.layout-fusion .fz-conv.qv-compact { padding-top: 9px; padding-bottom: 9px; }
.layout-fusion .fz-conv.qv-compact .fz-conv-l1 { gap: 7px; }
/* deal */
.layout-fusion .fz-conv.qv-deal .fz-conv-dealval { font-size: 13px; }

/* chips (shared by list + thread + ctx) */
.layout-fusion .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.layout-fusion .chip .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.layout-fusion .chip.ok    { background: var(--ok-bg);    color: var(--ok); }
.layout-fusion .chip.alert { background: var(--alert-bg); color: var(--alert); }
.layout-fusion .chip.warn  { background: var(--warn-bg);  color: var(--warn); }
.layout-fusion .chip.info  { background: var(--info-bg);  color: var(--info); }
.layout-fusion .chip.ai    { background: var(--ai-bg);    color: var(--ai); }
.layout-fusion .chip.neutral { background: var(--sunken); color: var(--fg); }

/* sequence step pips */
.layout-fusion .pips { display: inline-flex; gap: 2px; align-items: center; }
.layout-fusion .pips i { width: 8px; height: 3px; border-radius: 1px; background: var(--faint); display: block; }
.layout-fusion .pips i.done { background: var(--brand); }
.layout-fusion .pips i.failed { background: var(--alert); }
.layout-fusion .pips .lbl { font-size: 9.5px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0.03em; }

.layout-fusion .fz-conv-score {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--brand-strong);
}
.layout-fusion .fz-conv-score .bar { width: 28px; height: 4px; border-radius: 2px; background: var(--sunken); overflow: hidden; }
.layout-fusion .fz-conv-score .bar i { display: block; height: 100%; background: var(--brand); }

/* ============ THREAD (center) ============ */
.layout-fusion .fz-thread-head {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px;
}
.layout-fusion .fz-th-row1 { display: flex; align-items: center; gap: 12px; }
.layout-fusion .fz-th-temp { margin-left: auto; }
.layout-fusion .fz-tempbar { display: block; width: 52px; height: 6px; border-radius: 3px; background: var(--faint); border: 1px solid var(--border); overflow: hidden; cursor: default; }
.layout-fusion .fz-tempbar i { display: block; height: 100%; border-radius: 3px; transition: width .3s ease; }
.layout-fusion .fz-th-name { font-size: 18px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.015em; }
.layout-fusion .fz-th-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.layout-fusion .fz-th-meta .sep { color: var(--faint); }
.layout-fusion .fz-th-meta .lk { color: var(--brand); }
.layout-fusion .fz-th-tags { margin-left: auto; display: flex; gap: 5px; }
.layout-fusion .fz-th-row2 { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.layout-fusion .fz-th-row2 .kv b { color: var(--fg); font-weight: 600; }
.layout-fusion .fz-th-actions { display: flex; align-items: center; gap: 6px; }
.layout-fusion .fz-btn {
  height: 30px; padding: 0 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg); font-size: 12.5px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.layout-fusion .fz-btn:hover { background: var(--sunken); }
.layout-fusion .fz-btn.primary {
  background: var(--brand);
  border-color: var(--brand-border, transparent); color: var(--brand-fg); font-weight: 600;
}
.layout-fusion .fz-btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.layout-fusion .fz-btn.ghost:hover { background: var(--sunken); color: var(--fg); }
.layout-fusion .fz-btn.sm { height: 27px; padding: 0 12px; font-size: 11.5px; border-radius: var(--r-sm); gap: 7px; }
.layout-fusion .fz-btn.sm.primary { padding: 0 15px; }
.layout-fusion .fz-btn svg { flex-shrink: 0; }
.layout-fusion .fz-th-actions .spacer { flex: 1; }
.layout-fusion .fz-ch-switcher .spacer { flex: 1; }

.layout-fusion .fz-thread-body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--thread-veil);
}

/* AI banner — floating pill */
.layout-fusion .fz-ai-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: color-mix(in oklch, var(--ai) 8%, white);
  border: 1px solid color-mix(in oklch, var(--ai) 22%, white);
  font-size: 12.5px;
}
.layout-fusion .fz-ai-banner .spark {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--ai);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.layout-fusion .fz-ai-banner b { color: var(--fg-strong); }
.layout-fusion .fz-ai-banner .acts { margin-left: auto; display: flex; gap: 6px; }

/* message style variants (teammate request) */
/* band — grey header spans the full panel width, edge-to-edge */
.layout-fusion.fz-msg-band .fz-thread-body { padding-left: 0; padding-right: 0; }
.layout-fusion.fz-msg-band .fz-ai-banner { margin-left: 20px; margin-right: 20px; }
.layout-fusion.fz-msg-band .fz-msg { border-radius: 0; border-left: none; border-right: none; overflow: hidden; }
.layout-fusion.fz-msg-band .fz-msg-head { background: var(--sunken); border-bottom-color: var(--border); padding-left: 20px; padding-right: 20px; }
.layout-fusion.fz-msg-band .fz-msg.draft .fz-msg-head { background: color-mix(in oklch, var(--ai) 9%, white); }
.layout-fusion.fz-msg-band .fz-msg-body,
.layout-fusion.fz-msg-band .fz-msg-foot,
.layout-fusion.fz-msg-band .fz-draft-sub,
.layout-fusion.fz-msg-band .fz-draft-variants,
.layout-fusion.fz-msg-band .fz-draft-foot,
.layout-fusion.fz-msg-band .fz-draft-resolved { padding-left: 20px; padding-right: 20px; }
/* outline — no grey fill anywhere, just a clean outline */
.layout-fusion.fz-msg-outline .fz-msg { background: var(--surface); box-shadow: none; border: 1px solid var(--border); overflow: hidden; }
.layout-fusion.fz-msg-outline .fz-msg-head { background: transparent; }
.layout-fusion.fz-msg-outline .fz-msg.draft { box-shadow: none; border: 1.5px solid color-mix(in oklch, var(--ai) 45%, var(--border)); }
.layout-fusion.fz-msg-outline .fz-msg.draft .fz-msg-head { background: transparent; border-bottom-color: color-mix(in oklch, var(--ai) 22%, var(--border)); }
.layout-fusion.fz-msg-outline .fz-draft-foot { background: transparent; border-top-color: color-mix(in oklch, var(--ai) 14%, var(--border)); }
.layout-fusion.fz-msg-outline .fz-ai-banner { background: transparent; border: 1px solid color-mix(in oklch, var(--ai) 30%, var(--border)); box-shadow: none; }

/* message cards (floating) */
.layout-fusion .fz-msg {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--msg-shadow);
}
.layout-fusion .fz-msg-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-bottom: 1px solid var(--hairline);
  background: var(--surface); flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.layout-fusion .fz-msg-head .from { font-weight: 600; color: var(--fg-strong); font-size: 12.5px; }
.layout-fusion .fz-msg-head .ch {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: var(--r-xs); background: var(--sunken);
  font-size: 10.5px; color: var(--fg); font-weight: 500;
}
.layout-fusion .fz-msg-head .time { margin-left: auto; font-family: var(--mono); font-size: 11px; }
.layout-fusion .fz-msg-body { padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--fg); }
.layout-fusion .fz-msg-body p { margin: 0 0 10px; }
.layout-fusion .fz-msg-body p:last-child { margin-bottom: 0; }
.layout-fusion .fz-msg-foot {
  padding: 8px 16px; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--muted);
}

/* draft — glowing floating card */
.layout-fusion .fz-msg.draft {
  border: 1.5px solid color-mix(in oklch, var(--ai) 45%, white);
  box-shadow: 0 1px 2px rgba(40,28,110,0.05), 0 14px 36px color-mix(in oklch, var(--ai) 16%, transparent);
}
.layout-fusion .fz-msg.draft .fz-msg-head {
  background: color-mix(in oklch, var(--ai) 7%, white);
  border-bottom-color: color-mix(in oklch, var(--ai) 18%, white);
}
.layout-fusion .fz-msg.draft .lbl {
  font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ai); display: inline-flex; align-items: center; gap: 5px;
}
.layout-fusion .fz-draft-ch {
  display: inline-flex; gap: 2px; margin-left: 8px;
  background: rgba(255,255,255,0.6); border-radius: var(--r-sm); padding: 2px;
}
.layout-fusion .fz-draft-ch span { padding: 2px 8px; border-radius: var(--r-xs); font-size: 10.5px; font-weight: 600; color: var(--muted); }
.layout-fusion .fz-draft-ch span.is-active { background: var(--surface); color: var(--fg-strong); box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
.layout-fusion .fz-draft-foot {
  padding: 10px 16px; border-top: 1px solid color-mix(in oklch, var(--ai) 14%, white);
  background: color-mix(in oklch, var(--ai) 4%, white);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.layout-fusion .fz-draft-foot .notes { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.layout-fusion .fz-draft-foot .acts { display: flex; gap: 6px; }

/* ============ CONTEXT (right) ============ */
.layout-fusion .fz-ctx { overflow-y: auto; }
.layout-fusion .fz-ctx-head {
  padding: 20px 18px 16px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--hairline);
  background: var(--gradient-veil);
}
.layout-fusion .fz-ctx-head .av { margin: 0 auto 10px; box-shadow: 0 8px 20px rgba(40,28,110,0.12); }
.layout-fusion .fz-ctx-head .name { font-size: 17px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.01em; }
.layout-fusion .fz-ctx-head .role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.layout-fusion .fz-ctx-head .co { font-size: 12.5px; color: var(--brand); margin-top: 1px; }
.layout-fusion .fz-ctx-actions { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }

.layout-fusion .fz-ctx-section { padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.layout-fusion .fz-ctx-section h4 {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.layout-fusion .fz-ctx-section h4 .act { color: var(--brand); font-weight: 600; }

/* tabbed context */
.layout-fusion .fz-ctx-tabbar {
  display: flex; gap: 2px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
}
.layout-fusion .fz-ctx-tab {
  padding: 8px 6px;
  font-size: 11px; font-weight: 500; color: var(--muted);
  position: relative; cursor: pointer;
  flex: 1; text-align: center;
}
.layout-fusion .fz-ctx-tab:hover { color: var(--fg); }
.layout-fusion .fz-ctx-tab.is-active { color: var(--fg-strong); font-weight: 600; }
.layout-fusion .fz-ctx-tab.is-active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--brand);
}
.layout-fusion .fz-ctx-tab .badge {
  font-size: 9px; font-weight: 700;
  padding: 0 4px; margin-left: 3px;
  border-radius: 999px;
  background: var(--sunken); color: var(--muted);
}

/* notes / tasks / files (tabbed) */
.layout-fusion .fz-note {
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--sunken); border: 1px solid var(--hairline);
  margin-bottom: 10px;
}
.layout-fusion .fz-note .top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.layout-fusion .fz-note .who { font-size: 12px; font-weight: 600; color: var(--fg-strong); }
.layout-fusion .fz-note .when { font-size: 10.5px; color: var(--muted); font-family: var(--mono); margin-left: auto; }
.layout-fusion .fz-note .body { font-size: 12.5px; color: var(--fg); line-height: 1.5; }

.layout-fusion .fz-task {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
}
.layout-fusion .fz-task:last-child { border-bottom: none; }
.layout-fusion .fz-task .box {
  width: 16px; height: 16px; border-radius: var(--r-xs);
  border: 1.5px solid var(--faint); margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.layout-fusion .fz-task .box.done { background: var(--brand); border-color: var(--brand); }
.layout-fusion .fz-task .t1 { font-size: 12.5px; color: var(--fg-strong); font-weight: 500; }
.layout-fusion .fz-task .t1.done { color: var(--muted); text-decoration: line-through; }

/* ── Deal-stage gate tasks (mini scroll panel, ≈4 visible) ── */
.layout-fusion .fz-stagetasks { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hairline); }
.layout-fusion .fz-stagetasks-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.layout-fusion .fz-stagetasks-head .st-stage { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.layout-fusion .fz-stagetasks-head .st-prog { font-size: 10px; font-weight: 700; font-family: var(--mono); color: var(--warn); background: var(--sunken); padding: 1px 7px; border-radius: 999px; }
.layout-fusion .fz-stagetasks-head .st-prog.ok { color: oklch(0.46 0.13 150); }
.layout-fusion .fz-stagetasks-scroll { max-height: 132px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.layout-fusion .fz-stagetasks-scroll::-webkit-scrollbar { width: 6px; }
.layout-fusion .fz-stagetasks-scroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 3px; }
.layout-fusion .fz-stagetask { display: flex; align-items: center; gap: 9px; padding: 6px 2px; cursor: pointer; border-radius: var(--r-xs); }
.layout-fusion .fz-stagetask:hover { background: var(--sunken); }
.layout-fusion .fz-stagetask .box { width: 16px; height: 16px; border-radius: var(--r-xs); border: 1.5px solid var(--faint); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.layout-fusion .fz-stagetask .box.done { background: var(--brand); border-color: var(--brand); }
.layout-fusion .fz-stagetask .box.ai-box.done { background: var(--ai); border-color: var(--ai); }
.layout-fusion .fz-stagetask .t1 { font-size: 12px; color: var(--fg-strong); line-height: 1.35; flex: 1; }
.layout-fusion .fz-stagetask .st-ai { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--ai); letter-spacing: 0.01em; }
.layout-fusion .fz-stagetask.done .st-ai { text-decoration: none; }
.layout-fusion .fz-stagetask.done .t1 { color: var(--muted); text-decoration: line-through; }
.layout-fusion .fz-stagetask.done .ai-auto-badge { text-decoration: none; }
.layout-fusion .fz-task .t2 { font-size: 11px; color: var(--muted); margin-top: 2px; }
.layout-fusion .fz-task .due { font-size: 10.5px; font-weight: 600; color: var(--warn); white-space: nowrap; }
.layout-fusion .fz-task .due.soon { color: var(--alert); }

.layout-fusion .fz-file {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.layout-fusion .fz-file:last-child { border-bottom: none; }
.layout-fusion .fz-file .ic {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; letter-spacing: 0.02em;
}
.layout-fusion .fz-file .ic.pdf { background: oklch(0.55 0.18 25); }
.layout-fusion .fz-file .ic.doc { background: oklch(0.50 0.16 250); }
.layout-fusion .fz-file .ic.xls { background: oklch(0.48 0.14 150); }
.layout-fusion .fz-file .n1 { font-size: 12.5px; color: var(--fg-strong); font-weight: 500; }
.layout-fusion .fz-file .n2 { font-size: 10.5px; color: var(--muted); font-family: var(--mono); margin-top: 1px; }
.layout-fusion .fz-file .dl { color: var(--brand); font-size: 11px; font-weight: 600; }

/* score donut-ish */
.layout-fusion .fz-score {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--brand-soft);
  border: 1px solid color-mix(in oklch, var(--brand) 16%, white);
}
.layout-fusion .fz-score .big { font-size: 30px; font-weight: 800; color: var(--fg-strong); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.layout-fusion .fz-score .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.layout-fusion .fz-score .delta { font-size: 12px; font-weight: 700; color: var(--ok); margin-top: 4px; }

/* AI risk card */
.layout-fusion .fz-risk {
  border-radius: var(--r-lg); padding: 14px;
  background: color-mix(in oklch, var(--ai) 6%, white);
  border: 1px solid color-mix(in oklch, var(--ai) 18%, white);
}
.layout-fusion .fz-risk .h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ai); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.layout-fusion .fz-risk .n { font-size: 24px; font-weight: 800; color: var(--fg-strong); letter-spacing: -0.02em; }
.layout-fusion .fz-risk .n small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.layout-fusion .fz-risk .d { font-size: 12px; color: var(--fg); line-height: 1.5; margin-top: 6px; }
.layout-fusion .fz-risk .moves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.layout-fusion .fz-risk .move {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.8); border: 1px solid color-mix(in oklch, var(--ai) 16%, white);
  font-size: 11.5px; font-weight: 500; color: var(--fg);
}
.layout-fusion .fz-risk .move .n2 { font-family: var(--mono); font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--ai-bg); color: var(--ai); }

/* kv grid */
.layout-fusion .fz-kv { display: grid; grid-template-columns: 92px 1fr; row-gap: 9px; column-gap: 10px; font-size: 12.5px; align-items: center; }
.layout-fusion .fz-kv .k { color: var(--muted); }
.layout-fusion .fz-kv .v { color: var(--fg); }
.layout-fusion .fz-kv .v.b { font-weight: 600; color: var(--fg-strong); }

/* pipeline mini */
.layout-fusion .fz-pipe { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin-top: 10px; }
.layout-fusion .fz-pipe i { height: 6px; border-radius: 3px; background: var(--sunken); }
.layout-fusion .fz-pipe i.done { background: var(--brand); }
.layout-fusion .fz-pipe i.cur { background: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.layout-fusion .fz-pipe-lbls { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin-top: 6px; font-size: 9.5px; color: var(--muted); font-weight: 500; }
.layout-fusion .fz-pipe-lbls .cur { color: var(--brand-strong); font-weight: 700; }

/* timeline */
.layout-fusion .fz-tl { display: flex; flex-direction: column; }
.layout-fusion .fz-tl-item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 7px 0; position: relative; }
.layout-fusion .fz-tl-item::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: -4px; width: 1.5px; background: var(--faint); }
.layout-fusion .fz-tl-item:last-child::before { display: none; }
.layout-fusion .fz-tl-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--faint); display: inline-flex; align-items: center; justify-content: center; font-size: 8px; color: var(--muted); z-index: 1; }
.layout-fusion .fz-tl-dot.ok { border-color: var(--ok); color: var(--ok); }
.layout-fusion .fz-tl-dot.alert { border-color: var(--alert); color: var(--alert); }
.layout-fusion .fz-tl-dot.ai { border-color: var(--ai); color: var(--ai); background: var(--ai-bg); }
.layout-fusion .fz-tl-l1 { font-size: 12px; color: var(--fg); }
.layout-fusion .fz-tl-l1 b { font-weight: 600; color: var(--fg-strong); }
.layout-fusion .fz-tl-t { font-size: 10.5px; color: var(--muted); font-family: var(--mono); margin-top: 1px; }

/* tags */
.layout-fusion .fz-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.layout-fusion .fz-tag { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--sunken); color: var(--fg); }
.layout-fusion .fz-tag.add { background: transparent; border: 1px dashed var(--border); color: var(--muted); }

/* avatars get the floating look */
.layout-fusion .av { box-shadow: none; }
.layout-host .av.xs { width: 18px; height: 18px; font-size: 8px; }

/* ===== Other contacts at account ===== */
.layout-fusion .fz-contacts { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.layout-fusion .fz-contacts-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-bottom: 9px;
}
.layout-fusion .fz-contacts-h .cnt {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  padding: 0 5px; border-radius: 999px; background: var(--sunken); color: var(--muted);
}
.layout-fusion .fz-contact {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0;
}
.layout-fusion .fz-contact + .fz-contact { border-top: 1px solid var(--hairline); }
.layout-fusion .fz-contact-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.layout-fusion .fz-contact-id .nm { font-size: 12px; font-weight: 600; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-fusion .fz-contact-owner { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.layout-fusion .fz-contact-owner::before {
  content: "Owner"; font-size: 8.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--dim);
}

/* ============ LIST FOOTER + VIEW TOGGLE ============ */
.layout-fusion .fz-list-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-top: 1px solid var(--hairline);
  flex: 0 0 auto;
}
.layout-fusion .fz-viewtoggle {
  display: inline-flex; background: var(--sunken);
  border-radius: var(--r-sm); padding: 2px; gap: 2px;
}
.layout-fusion .fz-viewtoggle button {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border: none; background: transparent; cursor: pointer;
  border-radius: max(3px, calc(var(--r-sm) - 2px));
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.layout-fusion .fz-viewtoggle button.is-active {
  background: var(--surface); color: var(--fg-strong);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.layout-fusion .fz-list-foot-meta { margin-left: auto; font-size: 11px; color: var(--muted); }
.layout-fusion .fz-empty-queue { padding: 32px 16px; text-align: center; font-size: 12.5px; color: var(--muted); }
.layout-fusion .fz-viewtoggle-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px;
  border: none; border-radius: var(--r-sm);
  background: var(--sunken); cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted);
  transition: background 0.12s, color 0.12s;
}
.layout-fusion .fz-viewtoggle-btn:hover { background: var(--surface); color: var(--fg-strong); }
.layout-fusion .fz-viewtoggle-btn.is-active { background: oklch(0.96 0.07 80); color: oklch(0.46 0.13 70); }

/* ============ GRID VIEW ============ */
.layout-fusion .fz-list.is-grid .fz-list-body {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; align-content: start; padding: 8px;
}
.layout-fusion .fz-gcard {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); padding: 11px; cursor: default;
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: var(--msg-shadow);
}
.layout-fusion .fz-gcard:hover { border-color: color-mix(in oklch, var(--brand) 40%, var(--border)); }
.layout-fusion .fz-gcard.is-active {
  border-color: color-mix(in oklch, var(--brand) 45%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand) 28%, transparent), var(--msg-shadow);
}
.layout-fusion .fz-gcard .g-top { display: flex; align-items: center; gap: 8px; }
.layout-fusion .fz-gcard .g-id { min-width: 0; flex: 1; }
.layout-fusion .fz-gcard .g-name { font-size: 12.5px; font-weight: 600; color: var(--fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-fusion .fz-gcard .g-co { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-fusion .fz-gcard .g-time { font-size: 10px; color: var(--dim); }
.layout-fusion .fz-gcard .g-subject { font-size: 12px; font-weight: 600; color: var(--fg-strong); line-height: 1.35; }
.layout-fusion .fz-gcard .g-preview { font-size: 11.5px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.layout-fusion .fz-gcard .g-meta { display: flex; align-items: center; gap: 6px; }
.layout-fusion .fz-gcard .g-val { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--fg-strong); }
.layout-fusion .fz-gcard .g-foot { display: flex; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px solid var(--hairline); }
.layout-fusion .fz-gcard .g-next { margin-left: auto; font-size: 10.5px; color: var(--ai); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

/* ===== Inbox queue tabs (Open/Later/Done) + qualification segments ===== */
.layout-fusion .fz-queue { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.layout-fusion .fz-qbtn { flex-shrink: 0; padding: 5px 9px; font-size: 11.5px; border-radius: 999px; }
.layout-fusion .fz-qbtn:hover { background: var(--sunken); }
.layout-fusion .fz-qbtn em { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--sunken); color: var(--muted); opacity: 1; }
.layout-fusion .fz-qbtn.is-active { background: var(--fg-strong); color: var(--surface); font-weight: 800; }
.layout-fusion .fz-qbtn.is-active em { background: color-mix(in oklch, var(--surface) 22%, transparent); color: var(--surface); }
.layout-fusion .fz-qsep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--border); }
.layout-fusion .fz-qbtn.review em { background: oklch(0.92 0.08 80); color: oklch(0.48 0.13 70); }
.layout-fusion .fz-qbtn.review.is-active { background: oklch(0.96 0.07 80); color: oklch(0.46 0.13 70); }
.layout-fusion .fz-qbtn.review.is-active em { background: oklch(0.90 0.09 80); color: oklch(0.44 0.14 70); }
.layout-fusion .fz-qbtn.disq.is-active { background: var(--sunken); color: var(--fg-strong); }

/* focus session + bulk approve + edit-rate dial */
.layout-fusion .fz-focusbar { display: flex; gap: 8px; align-items: center; }
.layout-fusion .fz-focus { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 36px; padding: 0 18px; border-radius: var(--r-sm); border: 1px solid var(--brand-border, transparent); cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--brand-fg); background: var(--brand); white-space: nowrap; }
.layout-fusion .fz-focus svg { flex-shrink: 0; }
.layout-fusion .fz-bulk { height: 34px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--fg); white-space: nowrap; }
.layout-fusion .fz-editrate { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.layout-fusion .fz-editrate b { color: var(--fg-strong); font-weight: 700; }
.layout-fusion .fz-dial { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--brand) 0% 18%, var(--sunken) 18% 100%); position: relative; flex-shrink: 0; }
.layout-fusion .fz-dial::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }

/* ===== Thread qualification panel ===== */
.layout-fusion .fz-qualbar { display: flex; align-items: center; gap: 14px; padding: 9px 0 0; border-top: 1px solid var(--hairline); margin-top: 4px; flex-wrap: wrap; }
.layout-fusion .fz-qualbar .qq { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--brand-strong); }
.layout-fusion .fz-qualbar .qf { font-size: 11.5px; color: var(--fg); }
.layout-fusion .fz-qualbar .qf b { font-family: var(--mono); font-weight: 700; color: var(--fg-strong); }
.layout-fusion .fz-qualbar .qf i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.layout-fusion .fz-qualbar .qcap { font-size: 10.5px; color: oklch(0.50 0.12 70); font-weight: 600; }
.layout-fusion .fz-qualbar .qdisq { margin-left: auto; height: 26px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* ===== Draft enrichments (sending-as, expires, variant chips, decline) ===== */
.layout-fusion .fz-draft-sub { display: flex; align-items: center; gap: 10px; padding: 8px 16px 0; flex-wrap: wrap; }
.layout-fusion .fz-sendas { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.layout-fusion .fz-sendas b { color: var(--fg); font-weight: 600; font-family: var(--mono); font-size: 10.5px; }
.layout-fusion .fz-expires { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; font-weight: 600; color: oklch(0.50 0.12 70); }
.layout-fusion .fz-draft-variants { display: flex; align-items: center; gap: 7px; padding: 10px 16px 0; }
.layout-fusion .fz-draft-variants .vlbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.layout-fusion .vchip { padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--sunken); cursor: pointer; }
.layout-fusion .vchip.is-active { background: var(--ai-bg); color: var(--ai); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ai) 35%, transparent); }
.layout-fusion .vchip:hover { color: var(--ai); }
.layout-fusion .fz-draft-ch span { cursor: pointer; }
.layout-fusion .fz-regen-note { font-size: 10.5px; color: var(--ai); font-weight: 600; margin-left: auto; }
.layout-fusion .fz-msg-body.is-editing { outline: 2px solid color-mix(in oklch, var(--brand) 45%, transparent); outline-offset: 2px; border-radius: var(--r-sm); background: color-mix(in oklch, var(--brand) 4%, white); }
.layout-fusion .fz-msg-body.is-editing p { cursor: text; }
.layout-fusion .fz-msg.draft.is-resolved { padding: 0; }
.layout-fusion .fz-draft-resolved { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.layout-fusion .fz-draft-resolved .ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: oklch(0.42 0.10 245); }
.layout-fusion .fz-draft-resolved .declined { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.layout-fusion .fz-draft-resolved .fz-btn { margin-left: auto; }
.layout-fusion .fz-toast { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); background: oklch(0.20 0.02 270); color: #fff; font-size: 12px; font-weight: 500; padding: 8px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(20,12,50,0.3); z-index: 30; animation: fzToastIn .18s ease; }
@keyframes fzToastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.layout-fusion .fz-thread { position: relative; }

/* ── Collapsible right context panel ── */
.layout-fusion.fz-ctx-hidden { grid-template-columns: var(--list-w, 320px) 1fr 36px; }
.fz-ctx-expand-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; border: none; background: var(--surface); cursor: pointer;
  color: var(--muted); border-left: 1px solid var(--hairline); border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.fz-ctx-expand-btn:hover { color: var(--brand); background: var(--sunken); }
.fz-ctx-collapse-btn {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--sunken);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0;
}
.fz-ctx-collapse-btn:hover { color: var(--brand); border-color: var(--brand); }
.layout-fusion .fz-leadmodel { display: flex; flex-direction: column; gap: 11px; }
.layout-fusion .fz-lm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.layout-fusion .fz-lm-k { font-size: 10.5px; font-weight: 600; color: var(--muted); width: 74px; flex-shrink: 0; }
/* clickable/editable pills */
.layout-fusion .fz-lm-edit { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 2px 4px; margin: -2px -4px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; }
.layout-fusion .fz-lm-edit .fz-pencil { opacity: 0; color: var(--muted); transition: opacity .12s; }
.layout-fusion .fz-lm-edit:hover { background: var(--sunken); }
.layout-fusion .fz-lm-edit:hover .fz-pencil { opacity: 1; }
/* intent colored by sentiment (teammate override: R/Y/G) */
.layout-fusion .intent .sdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.layout-fusion .intent.sent-pos { background: oklch(0.93 0.08 150); color: oklch(0.42 0.13 150); }
.layout-fusion .intent.sent-neu { background: oklch(0.94 0.09 85);  color: oklch(0.48 0.12 78); }
.layout-fusion .intent.sent-neg { background: oklch(0.93 0.06 25);  color: oklch(0.48 0.16 25); }
.layout-fusion .intent .arw { font-size: 9px; font-weight: 700; }
.layout-fusion .fz-lm-flagrow { align-items: flex-start; }
.layout-fusion .fz-lm-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.layout-fusion .fz-lm-chips .fz-x { margin-left: 4px; cursor: pointer; opacity: 0.5; font-weight: 700; }
.layout-fusion .fz-lm-chips .fz-x:hover { opacity: 1; }
.layout-fusion .fz-lm-add { font-size: 10.5px; font-weight: 600; color: var(--brand-strong); background: var(--brand-soft); border: 1px dashed color-mix(in oklch, var(--brand) 35%, var(--border)); border-radius: var(--r-xs); padding: 1px 8px; cursor: pointer; font-family: inherit; }
.layout-fusion .fz-lm-add:hover { background: color-mix(in oklch, var(--brand) 14%, white); }
.layout-fusion .fz-rt { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; padding-top: 4px; }
.layout-fusion .fz-rt .k { color: var(--muted); }
.layout-fusion .fz-rt .v { font-family: var(--mono); font-weight: 700; color: var(--fg-strong); }
.layout-fusion .fz-qual2 { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: var(--r-md); background: var(--brand-soft); border: 1px solid color-mix(in oklch, var(--brand) 16%, white); }
.layout-fusion .fz-qual2 .big { font-size: 26px; font-weight: 800; color: var(--fg-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.layout-fusion .fz-qual2 .bd { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.layout-fusion .fz-qual2 .lbl2 { font-size: 11px; font-weight: 700; color: var(--brand-strong); }
.layout-fusion .fz-qual2 .risk { font-size: 10.5px; color: oklch(0.50 0.12 70); font-weight: 600; margin-top: 3px; }

/* soft-disqualify (amber, sending still allowed) */
.layout-fusion .fz-qualbar.dq { background: oklch(0.96 0.07 80); border-color: oklch(0.86 0.09 78); }
.layout-fusion .fz-qualbar.dq .qq { color: oklch(0.48 0.13 70); }
.layout-fusion .fz-qualbar .qreroute { margin-left: auto; height: 26px; padding: 0 11px; border-radius: var(--r-sm); border: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--brand-fg); background: var(--brand); }
.layout-fusion .fz-softnote { font-size: 11px; color: oklch(0.48 0.10 72); }

/* bulk caption + high-stakes */
.layout-fusion .fz-bulk-note { font-size: 10px; color: var(--muted); padding: 2px 0 0; line-height: 1.4; }
.layout-fusion .fz-softbanner { display: flex; align-items: center; gap: 9px; margin: 0 8px 8px; padding: 9px 11px; border-radius: var(--r-md); background: oklch(0.96 0.07 80); border: 1px solid oklch(0.88 0.08 78); font-size: 11.5px; color: oklch(0.46 0.12 70); }
.layout-fusion .fz-softbanner b { font-weight: 700; }
.layout-fusion .fz-softbanner .rr { margin-left: auto; font-weight: 700; color: var(--brand-strong); cursor: pointer; white-space: nowrap; }
.layout-fusion .fz-conv .guardrail { font-size: 9.5px; padding: 1px 6px; }
.layout-fusion .lead-link { cursor: pointer; }
.layout-fusion .lead-link:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ===== REVIEW MODE ===== */
.fz-review {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--canvas);
  z-index: 5; overflow: hidden;
}
.fz-review-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  background: var(--surface); border-bottom: 1px solid var(--hairline); flex-shrink: 0;
}
.fz-review-head h2 { font-size: 15px; font-weight: 700; color: var(--fg-strong); margin: 0; }
.fz-review-seg { display: inline-flex; background: var(--sunken); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.fz-review-seg button { height: 26px; padding: 0 12px; border: none; background: transparent; cursor: pointer; border-radius: max(3px, calc(var(--r-sm) - 2px)); font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--muted); }
.fz-review-seg button.is-active { background: var(--surface); color: var(--fg-strong); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.fz-review-exit { margin-left: auto; height: 30px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.fz-review-exit:hover { color: var(--fg); }
.fz-review-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-content: start; }
.fz-review-card { background: var(--surface); border: var(--card-border); border-radius: var(--r-md); box-shadow: var(--card-shadow); display: flex; flex-direction: column; overflow: hidden; }
.fz-review-card.is-new { animation: reviewSlideIn .28s cubic-bezier(.2,0,.3,1); }
.fz-review-card.is-going { animation: reviewFadeOut .22s ease forwards; }
.fz-review-card.is-conveyor { animation: reviewConveyor .22s ease forwards; }
@keyframes reviewSlideIn { from { opacity:0; transform:translateY(12px) scale(0.97); } to { opacity:1; transform:none; } }
@keyframes reviewFadeOut { to { opacity:0; transform:scale(0.94); } }
@keyframes reviewConveyor { to { opacity:0; transform:translateX(-32px); } }
.fzr-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--hairline); }
.fzr-nm { font-size: 12.5px; font-weight: 700; color: var(--fg-strong); }
.fzr-co { font-size: 11px; color: var(--muted); }
.fzr-time { margin-left: auto; font-size: 10.5px; color: var(--dim); font-family: var(--mono); white-space: nowrap; }
.fzr-msgs { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fzr-msg { padding: 9px 13px; border-bottom: 1px solid var(--hairline); font-size: 11.5px; line-height: 1.45; }
.fzr-msg.incoming { flex: 1; }
.fzr-msg.draft { margin-top: auto; }
.fzr-from { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.fzr-msg.draft { background: color-mix(in oklch, var(--ai) 5%, white); }
.fzr-msg.draft .fzr-from { color: var(--ai); }
.fzr-msg .body { color: var(--fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.fzr-msg.draft .body { color: var(--fg-strong); font-weight: 500; }
.fzr-actions { display: flex; align-items: center; gap: 6px; padding: 9px 13px; flex-shrink: 0; border-top: 1px solid var(--hairline); }
.fzr-approve { height: 30px; padding: 0 14px; border-radius: var(--r-sm); border: none; cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--brand-fg); background: var(--brand); display: inline-flex; align-items: center; gap: 6px; }
.fzr-sm { height: 28px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; cursor: pointer; font-family: var(--font); font-size: 11.5px; font-weight: 500; color: var(--muted); }
.fzr-sm:hover { background: var(--sunken); color: var(--fg); }
.fzr-stat { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: auto; }
.fz-review-done { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--muted); }
.fz-review-done .big { font-size: 32px; font-weight: 800; color: var(--fg-strong); }