/* LOOPS - the Sequenced Loops client skin. Deep space navy, electric cyan primary,
   violet secondary, real glass panels over a gradient mesh. Layout: full rail (like
   Linen) but frosted dark. Loaded on top of base.css for EDITION=loops. */

body[data-edition="loops"] {
  --bg: #0A0E1A;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .085);
  --ink: #E6EAF2;
  --dim: #8C96AD;
  --line: rgba(230, 234, 242, .1);
  --accent: #22D3EE;
  --accent-2: #7C6CF6;
  --ok: #34D399;
  --warn: #FBBF24;
  --bad: #F87171;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 44px rgba(2, 8, 22, .4);
  --g-edge: rgba(34, 211, 238, .22);
  --g-folder: #5C6680;
  --g-label: #C6CDDC;
  color-scheme: dark;

  background:
    radial-gradient(900px 600px at 88% -8%, rgba(124, 108, 246, .15), transparent 62%),
    radial-gradient(820px 560px at -10% 24%, rgba(34, 211, 238, .09), transparent 58%),
    radial-gradient(900px 620px at 50% 114%, rgba(124, 108, 246, .1), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- rail: frosted glass over the mesh ---- */
body[data-edition="loops"] .rail {
  background: rgba(13, 19, 33, .72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
body[data-edition="loops"] .brand-mark {
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--accent), var(--accent-2) 55%, var(--accent));
  box-shadow: 0 0 18px rgba(34, 211, 238, .4);
}
body[data-edition="loops"] .brand-edition { color: var(--accent); }
body[data-edition="loops"] .nav-link:hover { background: var(--surface-2); }
body[data-edition="loops"] .nav-link.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, .14), rgba(124, 108, 246, .1));
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ---- glass with intent: cards, panels, overlays ---- */
body[data-edition="loops"] .glass,
body[data-edition="loops"] .card {
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
body[data-edition="loops"] .card:hover {
  border-color: rgba(34, 211, 238, .28);
  box-shadow: 0 14px 44px rgba(2, 8, 22, .5), inset 0 0 36px rgba(34, 211, 238, .03);
}
body[data-edition="loops"] .card .big-num {
  background: linear-gradient(120deg, var(--ink), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
body[data-edition="loops"] .modal,
body[data-edition="loops"] .hd-panel {
  background: rgba(16, 23, 41, .88);
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
body[data-edition="loops"] .modal-wrap { background: rgba(4, 7, 14, .6); }
body[data-edition="loops"] .graph-wrap,
body[data-edition="loops"] .chat-layout,
body[data-edition="loops"] .brain-tree,
body[data-edition="loops"] .brain-view {
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body[data-edition="loops"] .graph-side {
  background: rgba(16, 23, 41, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ---- actions: cyan-to-violet primaries, quiet ghosts ---- */
body[data-edition="loops"] .primary {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #06121E;
  box-shadow: 0 4px 20px rgba(34, 211, 238, .25);
}
body[data-edition="loops"] .primary:hover { opacity: 1; box-shadow: 0 6px 28px rgba(34, 211, 238, .42); }
body[data-edition="loops"] .ghost { background: transparent; }
body[data-edition="loops"] .ghost:hover { background: var(--surface-2); border-color: rgba(34, 211, 238, .35); }
body[data-edition="loops"] input,
body[data-edition="loops"] textarea,
body[data-edition="loops"] select { background: rgba(10, 14, 26, .6); }
body[data-edition="loops"] input:focus,
body[data-edition="loops"] textarea:focus { box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
body[data-edition="loops"] .toast { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #06121E; }
body[data-edition="loops"] .toast.err { background: var(--bad); color: #1C0808; }
body[data-edition="loops"] .hd-fab {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06121E;
  box-shadow: 0 0 26px rgba(34, 211, 238, .4);
}

/* ---- login ---- */
body[data-edition="loops"] .login-card {
  background: rgba(16, 23, 41, .72);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-color: rgba(230, 234, 242, .14);
}
body[data-edition="loops"] .login-card .brand-name { letter-spacing: .04em; }

/* ---- chrome details ---- */
body[data-edition="loops"] .north-star {
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body[data-edition="loops"] .north-star .ns-dot { box-shadow: 0 0 10px rgba(34, 211, 238, .8); }
body[data-edition="loops"] .tab.active { border-bottom-color: var(--accent); }
body[data-edition="loops"] .pill { background: rgba(255, 255, 255, .04); }
body[data-edition="loops"] .health-chip { background: var(--surface); }
body[data-edition="loops"] ::selection { background: rgba(34, 211, 238, .32); }
body[data-edition="loops"] .wikilink { color: var(--accent); }
body[data-edition="loops"] .ob-progress { background: var(--surface-2); }
body[data-edition="loops"] .ob-progress i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---- kanban ---- */
body[data-edition="loops"] .kcol { background: rgba(255, 255, 255, .03); }
body[data-edition="loops"] .kcard {
  background: rgba(255, 255, 255, .055);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-edition="loops"] .kcard:hover { border-color: rgba(34, 211, 238, .3); }
body[data-edition="loops"] .kcards.over { background: rgba(34, 211, 238, .07); }

/* ---- chat ---- */
body[data-edition="loops"] .chat-side { background: rgba(10, 14, 26, .45); }
body[data-edition="loops"] .chat-sess.active,
body[data-edition="loops"] .chat-sess:hover { background: var(--surface-2); }
body[data-edition="loops"] .cmsg.user { background: var(--surface-2); }
body[data-edition="loops"] .composer .send {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #06121E;
}
body[data-edition="loops"] .at-pop,
body[data-edition="loops"] .bs-results {
  background: rgba(16, 23, 41, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---- charts: cyan glow ---- */
body[data-edition="loops"] .chart-line { stroke-width: 1.5; filter: drop-shadow(0 0 4px rgba(34, 211, 238, .45)); }
body[data-edition="loops"] .chart-dot { filter: drop-shadow(0 0 5px rgba(34, 211, 238, .7)); }
body[data-edition="loops"] .hm-cell { background: rgba(255, 255, 255, .05); }
body[data-edition="loops"] .bar-track { background: rgba(255, 255, 255, .07); }

/* ---- brain / misc surfaces ---- */
body[data-edition="loops"] .bt-row.active { background: rgba(34, 211, 238, .12); color: var(--accent); }
body[data-edition="loops"] .brain-view.dropzone-over { outline-color: var(--accent); }
body[data-edition="loops"] .hd-hit:hover,
body[data-edition="loops"] .at-item:hover,
body[data-edition="loops"] .at-item.sel { background: var(--surface-2); }
body[data-edition="loops"] .avatar,
body[data-edition="loops"] .agent-ic { box-shadow: 0 0 0 1px rgba(230, 234, 242, .12); }

/* ---- scrollbars ---- */
body[data-edition="loops"] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-edition="loops"] ::-webkit-scrollbar-thumb { background: rgba(140, 150, 173, .25); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
body[data-edition="loops"] ::-webkit-scrollbar-thumb:hover { background: rgba(140, 150, 173, .4); background-clip: padding-box; }
body[data-edition="loops"] ::-webkit-scrollbar-track { background: transparent; }