/* layan.ai — agent graph: radial force graph, drill-down, cards, kpis, command bar.
   Also styles the agents.html view switcher (Hierarchy | Radial) and its radial host. */

.lg-root {
  --lg-h: 214;
  position: relative; isolation: isolate; height: 100%; min-height: 480px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--abyss, #02091F); color: var(--paper, #E4F1FF);
  font-family: var(--font-ui, "Onest", system-ui, sans-serif); font-size: 14px;
  border-radius: var(--r-lg, 16px); overflow: hidden;
}
.lg-root * { box-sizing: border-box; }
.lg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- toolbar ---------- */
.lg-toolbar {
  position: relative; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line, rgba(170,206,253,0.12));
  background: rgba(7, 20, 51, 0.55); backdrop-filter: blur(10px);
}
.lg-tgroup { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md, 10px); background: rgba(2, 9, 31, 0.5); border: 1px solid var(--line, rgba(170,206,253,0.12)); }
.lg-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 7px; font: inherit; font-size: 0.78rem; font-weight: 500; color: var(--frost, #AACEFD);
  background: none; border: 0; cursor: pointer; transition: background 120ms, color 120ms;
}
.lg-btn:hover { background: rgba(170, 206, 253, 0.1); color: var(--paper, #E4F1FF); }
.lg-btn.is-on { background: rgba(96, 157, 252, 0.2); color: var(--paper, #E4F1FF); }
.lg-btn.lg-icon { width: 30px; padding: 0; justify-content: center; }
.lg-tgroup-selects { background: none; border: 0; padding: 0; gap: 8px; margin-inline-start: auto; }
.lg-select-wrap { display: inline-flex; }
.lg-select {
  height: 30px; padding: 0 8px; border-radius: var(--r-md, 10px); font: inherit; font-size: 0.78rem;
  color: var(--paper, #E4F1FF); background: rgba(2, 9, 31, 0.5); border: 1px solid var(--line, rgba(170,206,253,0.12));
}

/* ---------- stage ---------- */
.lg-stage { position: relative; flex: 1; min-height: 320px; overflow: hidden; }
.lg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.lg-canvas.is-panning { cursor: grabbing; }
.lg-canvas.is-hoverable { cursor: pointer; }
.lg-labels, .lg-tooltip { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lg-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted, #7F94BD); font-size: 0.9rem; z-index: 2; }
.lg-empty[hidden] { display: none; }

.lg-label {
  position: absolute; left: 0; top: 0; transform-origin: left center;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 8px 3px 7px; border-radius: 4px 10px 10px 10px; font-size: 0.68rem; font-weight: 500;
  color: var(--paper, #E4F1FF); background: rgba(7, 20, 51, 0.72); border: 1px solid hsl(var(--h, 214) 90% 65% / 0.4);
  margin-top: 10px; margin-left: 10px;
}
.lg-label.is-root { font-size: 0.82rem; font-weight: 600; padding: 5px 12px 5px 10px; }
.lg-label.is-hub { font-weight: 600; }
.lg-label.is-selected { box-shadow: 0 0 0 1px hsl(var(--h, 214) 95% 70% / 0.8), 0 0 16px hsl(var(--h, 214) 95% 65% / 0.6); }
.lg-label-role { color: var(--muted, #7F94BD); font-weight: 400; }
.lg-badge { font-family: var(--font-mono, monospace); font-size: 0.62rem; color: hsl(var(--h, 214) 90% 75%); }

.lg-tooltip {
  padding: 6px 10px; border-radius: 8px; font-size: 0.72rem; background: rgba(7, 20, 51, 0.9);
  border: 1px solid var(--line-strong, rgba(170,206,253,0.24)); opacity: 0; transition: opacity 120ms;
  display: inline-flex; flex-direction: column; gap: 2px; left: 0; top: 0; width: max-content; max-width: 220px;
}
.lg-tooltip b { color: var(--paper, #E4F1FF); }
.lg-tooltip span { color: var(--muted, #7F94BD); }
.lg-tooltip.is-on { opacity: 1; }

/* ---------- floating analysis cards ---------- */
.lg-cards { position: absolute; z-index: 3; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 10px; width: min(300px, calc(100% - 28px)); pointer-events: none; }
.lg-card {
  pointer-events: auto; border-radius: var(--r-lg, 16px); padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(9, 22, 58, 0.92), rgba(4, 12, 34, 0.96));
  border: 1px solid var(--line-strong, rgba(170,206,253,0.24)); backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.85); animation: lg-rise 220ms ease-out both;
}
.lg-card-critical { border-left: 3px solid var(--bad, #FF6B7A); }
.lg-card-suggestion { border-left: 3px solid var(--signal, #609DFC); }
.lg-card-info { border-left: 3px solid var(--muted, #7F94BD); }
.lg-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lg-card-tone { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #7F94BD); }
.lg-card-head h4 { flex: 1; margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--paper, #E4F1FF); }
.lg-card-close { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--frost, #AACEFD); background: none; border: 0; cursor: pointer; }
.lg-card-close:hover { background: rgba(170, 206, 253, 0.1); }
.lg-card-rows { display: flex; flex-direction: column; gap: 6px; }
.lg-card-row { display: flex; flex-direction: column; gap: 1px; font-size: 0.76rem; }
.lg-card-row b { color: var(--paper, #E4F1FF); }
.lg-card-row span { color: var(--paper-2, #C9DCF7); }
.lg-card-row em { font-style: normal; color: var(--muted, #7F94BD); font-size: 0.68rem; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- KPI strip ---------- */
.lg-kpis { display: flex; flex-wrap: wrap; gap: 1px; padding: 0 1px; background: var(--line, rgba(170,206,253,0.12)); }
.lg-kpis[hidden] { display: none; }
.lg-kpi { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: rgba(7, 20, 51, 0.6); }
.lg-kpi-label { font-size: 0.68rem; color: var(--muted, #7F94BD); }
.lg-kpi-value { font-size: 1.15rem; font-weight: 600; color: var(--paper, #E4F1FF); }
.lg-kpi-value small { font-size: 0.65rem; font-weight: 500; color: var(--frost, #AACEFD); margin-left: 3px; }
.lg-kpi-trend { align-self: flex-start; font-family: var(--font-mono, monospace); font-size: 0.68rem; color: var(--muted, #7F94BD); }
.lg-kpi-trend.is-up { color: var(--ok, #3DDC97); }
.lg-kpi-trend.is-down { color: var(--bad, #FF6B7A); }

/* ---------- command bar ---------- */
.lg-command { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line, rgba(170,206,253,0.12)); background: rgba(7, 20, 51, 0.55); }
.lg-agentpicker { min-width: 120px; max-width: 160px; }
.lg-ask { flex: 1; display: flex; gap: 6px; align-items: center; height: 40px; padding: 0 6px 0 14px; border-radius: var(--r-pill, 999px); background: rgba(2, 9, 31, 0.55); border: 1px solid var(--line, rgba(170,206,253,0.12)); }
.lg-ask-input { flex: 1; background: none; border: 0; color: var(--paper, #E4F1FF); font: inherit; font-size: 0.85rem; outline: none; }
.lg-ask-input::placeholder { color: var(--muted, #7F94BD); }
.lg-ask-send { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt, #254EC1); color: #fff; border: 0; cursor: pointer; flex-shrink: 0; }
.lg-ask-send:hover { background: #2F5CD8; }

/* ---------- drill-down ---------- */
.lg-drill { position: absolute; inset: 0; z-index: 5; background: rgba(2, 9, 31, 0.88); backdrop-filter: blur(6px); opacity: 0; transition: opacity 320ms ease-out; overflow: auto; }
.lg-drill[hidden] { display: none; }
.lg-drill.is-in { opacity: 1; }
.lg-drill-back { position: sticky; top: 12px; left: 12px; margin: 12px 0 0 12px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 10px; border-radius: var(--r-pill, 999px); background: rgba(9, 22, 58, 0.85); border: 1px solid var(--line-strong, rgba(170,206,253,0.24)); color: var(--paper, #E4F1FF); font: inherit; font-size: 0.8rem; font-weight: 500; cursor: pointer; }
.lg-drill-back:hover { background: rgba(9, 22, 58, 1); }
.lg-drill-body { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(160px, 1fr) minmax(220px, 1.3fr); gap: 24px; padding: 24px clamp(16px, 4vw, 48px) 40px; align-items: start; min-height: calc(100% - 60px); }
.lg-drill-orb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; }
.lg-drill-canvas { width: 100%; max-width: 220px; aspect-ratio: 1; }
.lg-drill-id { text-align: center; }
.lg-drill-id b { display: block; font-size: 1rem; font-weight: 600; color: var(--paper, #E4F1FF); }
.lg-drill-id span { font-size: 0.78rem; color: var(--muted, #7F94BD); }
.lg-drill-categories { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.lg-cat-card { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: var(--r-md, 10px); background: rgba(9, 22, 58, 0.7); border: 1px solid var(--line, rgba(170,206,253,0.12)); }
.lg-cat-count { font-size: 1.1rem; font-weight: 700; color: var(--signal, #609DFC); font-family: var(--font-mono, monospace); }
.lg-cat-label { font-size: 0.8rem; color: var(--paper-2, #C9DCF7); }
.lg-drill-items { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.lg-item-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md, 10px);
  background: rgba(9, 22, 58, 0.55); border: 1px solid var(--line, rgba(170,206,253,0.12));
  transform: translateX(calc(min(var(--i, 0), 6) * 3px)); animation: lg-rise 240ms ease-out both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.lg-item-card b { flex: 1; font-size: 0.82rem; font-weight: 500; color: var(--paper, #E4F1FF); }
.lg-item-card span { font-size: 0.7rem; color: var(--muted, #7F94BD); }
.lg-item-chip { flex-shrink: 0; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: var(--r-pill, 999px); }
.lg-chip-ok { color: var(--ok, #3DDC97); background: rgba(61, 220, 151, 0.12); border: 1px solid rgba(61, 220, 151, 0.32); }
.lg-chip-warn { color: var(--warn, #F2B84B); background: rgba(242, 184, 75, 0.12); border: 1px solid rgba(242, 184, 75, 0.32); }
.lg-chip-bad { color: var(--bad, #FF6B7A); background: rgba(255, 107, 122, 0.12); border: 1px solid rgba(255, 107, 122, 0.32); }
.lg-chip-info { color: var(--frost, #AACEFD); background: rgba(170, 206, 253, 0.1); border: 1px solid rgba(170, 206, 253, 0.28); }
.lg-drill-empty { color: var(--muted, #7F94BD); font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .lg-card, .lg-item-card { animation: none; }
  .lg-drill { transition: none; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .lg-toolbar { padding: 8px; gap: 6px; }
  .lg-tgroup-selects { margin-inline-start: 0; flex-basis: 100%; }
  .lg-select { flex: 1; min-width: 0; }
  .lg-btn span { display: none; }
  .lg-btn { padding: 0 8px; }
  .lg-tgroup .lg-btn:first-child span { display: inline; } /* keep one readable label per group hint */
  .lg-cards { top: auto; bottom: 0; right: 0; left: 0; width: 100%; padding: 0 10px 10px; gap: 8px; }
  .lg-card { border-radius: 16px 16px 0 0; animation: lg-sheet-up 220ms ease-out both; }
  @keyframes lg-sheet-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .lg-drill-body { grid-template-columns: 1fr; gap: 20px; padding: 16px 16px 32px; }
  .lg-drill-orb { min-height: 160px; }
  .lg-command { flex-wrap: wrap; }
  .lg-agentpicker { order: 2; max-width: 100%; flex: 1; }
  .lg-ask { order: 1; flex-basis: 100%; }
}

/* ==========================================================================
   agents.html integration: the Hierarchy | Radial view switcher and host.
   ========================================================================== */
.agents-view-switch {
  position: absolute; z-index: 4; top: clamp(88px, 9vw, 112px);
  right: max(var(--gutter, 24px), calc((100% - var(--container, 1200px)) / 2));
  display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill, 999px);
  background: rgba(7, 20, 51, 0.75); border: 1px solid var(--line, rgba(170,206,253,0.12)); backdrop-filter: blur(10px);
}
.agents-view-switch button {
  height: 30px; padding: 0 14px; border-radius: var(--r-pill, 999px); font: inherit; font-size: 0.78rem; font-weight: 500;
  color: var(--frost, #AACEFD); background: none; border: 0; cursor: pointer; transition: background 120ms, color 120ms;
}
.agents-view-switch button:hover { color: var(--paper, #E4F1FF); }
.agents-view-switch button.is-on { background: rgba(96, 157, 252, 0.2); color: var(--paper, #E4F1FF); }

.agents-radial { position: absolute; inset: 0; z-index: 1; padding-top: calc(clamp(88px, 9vw, 112px) + 46px); box-sizing: border-box; }
.agents-radial[hidden] { display: none; }

#field.view-radial #wisps, #field.view-radial .field-grid, #field.view-radial #wisp-label, #field.view-radial #field-dock, #field.view-radial #field-copy { display: none; }

.dock-chip.is-pulsing { animation: lg-chip-pulse 900ms ease-out; }
@keyframes lg-chip-pulse { 0% { box-shadow: 0 0 0 0 hsl(var(--h, 214) 95% 70% / 0.7); } 100% { box-shadow: 0 0 0 14px hsl(var(--h, 214) 95% 70% / 0); } }

@media (max-width: 640px) {
  .agents-view-switch { top: 14px; right: 14px; }
}

/* ---------- embedded in the dashboard (agents.html?embed=1 inside home.html's Agents section) ----------
   No nav bar to clear in here (the shell hides it), so the top clearance the standalone marketing page
   reserves for its fixed header would otherwise sit as an empty band above the view switcher. Also, the
   shell has its own "Ask Layan to route or check on something…" bar wired to /api/layan/ask, so the
   graph's own command bar ("Ask, instruct, or delegate…") would be a second, redundant ask bar. */
html.layan-embedded .field { padding-top: 14px; }
html.layan-embedded .agents-view-switch { top: 14px; }
html.layan-embedded .agents-radial { padding-top: 60px; }
html.layan-embedded .lg-command { display: none; }

/* inside the dashboard the public marketing headline is not needed; the tree gets the whole field */
html.layan-embedded #field-copy { display: none; }