@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#04060e; --bg-sidebar:#070b14;
  --text:#e2e8f0; --text-dim:#64748b;
  --dim:#94a3b8;
  --border:#1a2236;
  --cyan:#00f0ff; --cyan-dim:#00f0ff30;
  --purple:#a855f7; --purple-dim:#a855f730;
  --green:#22c55e; --green-dim:#22c55e30;
}
body{
  font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);
  overflow:hidden;height:100vh;width:100vw;user-select:none;touch-action:none;
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── UI CHROME ── */
#canvas{position:fixed;top:47px;left:0;z-index:1;cursor:default}
.in-iframe #canvas{top:0}
.in-iframe .search-bar{top:14px}
#canvas.grabbing{cursor:grabbing}

.ui{position:fixed;z-index:100}

/* ── TOPBAR ── */
.topbar{
  position:fixed;top:0;left:0;right:0;height:46px;z-index:200;
  display:flex;align-items:center;
  background:var(--bg-sidebar);border-bottom:1px solid var(--border);
}
.topbar-scroll{display:flex;flex:1;height:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
.topbar-scroll::-webkit-scrollbar{display:none}
.topbar-tabs{display:flex;flex:1;height:100%}
.topbar-tab{
  display:flex;align-items:center;gap:8px;
  padding:0 20px;height:100%;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  color:var(--text-dim);cursor:pointer;
  border:none;border-right:1px solid var(--border);
  background:transparent;white-space:nowrap;
  transition:all .2s;position:relative;
}
.topbar-tab:hover{color:var(--text)}
.topbar-tab.active{color:var(--text)}
.topbar-tab.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
}
.topbar-tab .dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.topbar-actions{
  display:flex;align-items:center;gap:8px;
  padding:0 16px;height:100%;border-left:1px solid var(--border);flex-shrink:0;
}
.topbar-btn{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:4px;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;
  cursor:pointer;transition:all .2s;color:inherit;
}
.topbar-btn.hf-link{
  background:#a855f715;color:var(--purple);
  border:1px solid var(--purple-dim);text-decoration:none;
}
.topbar-btn.hf-link:hover{background:#a855f725}
.topbar-btn.rag-link{
  background:#22c55e12;color:var(--green);
  border:1px solid var(--green-dim);text-decoration:none;
}
.topbar-btn.rag-link:hover{background:#22c55e22}

.search-bar{
  top:62px;left:50%;transform:translateX(-50%);  /* push below topbar */
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;
  background:#0a0e1aee;border:1px solid #ffffff12;border-radius:12px;
  backdrop-filter:blur(16px);min-width:320px;
}
.search-bar svg{width:16px;height:16px;color:var(--dim);flex-shrink:0}
.search-bar input{
  background:none;border:none;outline:none;color:var(--text);
  font-size:.88rem;font-family:'Inter',sans-serif;width:100%;
}
.search-bar input::placeholder{color:#334155}
#search-count{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;
  color:var(--dim);white-space:nowrap;
}

.legend{
  bottom:16px;left:16px;
  top:auto;
  font-size:.68rem;color:var(--dim);font-family:'JetBrains Mono',monospace;
  background:#0a0e1acc;border:1px solid #ffffff08;
  border-radius:10px;padding:10px 14px;backdrop-filter:blur(8px);
  max-height:58vh;overflow:hidden;transition:max-height .3s;
}
.legend.collapsed{max-height:36px;cursor:pointer}
.legend-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;font-weight:600;color:var(--text);margin-bottom:6px;font-size:.7rem;
}
.legend-toggle svg{width:11px;height:11px;transition:transform .3s}
.legend.collapsed .legend-toggle svg{transform:rotate(180deg)}
.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.legend-grid div{display:flex;align-items:center;gap:5px;padding:2px 0}
.legend .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

.help{
  bottom:16px;left:16px;
  font-size:.68rem;color:#475569;text-align:left;
  font-family:'JetBrains Mono',monospace;line-height:1.9;
}

/* ── TOOLTIP ── */
#tooltip{
  position:fixed;z-index:300;
  padding:12px 16px;border-radius:10px;
  background:#0f172aee;border:1px solid #ffffff15;
  backdrop-filter:blur(16px);max-width:300px;
  pointer-events:none;opacity:0;transition:opacity .15s;
  font-size:.76rem;line-height:1.65;color:var(--text);
}
#tooltip.show{opacity:1}
#tooltip h4{font-size:.82rem;margin-bottom:5px;font-weight:700}
#tooltip .kws{margin-top:6px;display:flex;flex-wrap:wrap;gap:3px}
#tooltip .kw{
  padding:2px 7px;border-radius:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;background:#ffffff08;color:var(--dim);
}

/* ── ONBOARDING ── */
#onboarding{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,14,.88);backdrop-filter:blur(10px);
  transition:opacity .4s;
}
#onboarding.hide{opacity:0;pointer-events:none}
.ob-card{
  text-align:center;max-width:380px;padding:38px 30px;
  background:#0f172a;border:1px solid #ffffff12;border-radius:16px;
  box-shadow:0 0 80px #00f0ff0d;
}
.ob-card h2{font-size:1.35rem;font-weight:800;letter-spacing:.06em;margin-bottom:8px}
.ob-card p{font-size:.82rem;color:var(--dim);line-height:1.7;margin-bottom:18px}
.ob-card .hints{
  display:flex;flex-direction:column;gap:9px;text-align:left;
  margin-bottom:22px;font-size:.76rem;color:var(--dim);
}
.ob-card .hints span{color:#00f0ff;font-weight:600;margin-right:5px}
.ob-card button{
  padding:9px 28px;border-radius:8px;border:1.5px solid #00f0ff44;
  background:#00f0ff11;color:#00f0ff;font-weight:700;font-size:.84rem;
  cursor:pointer;transition:all .25s;font-family:'Inter',sans-serif;
}
.ob-card button:hover{background:#00f0ff22;border-color:#00f0ff88}

/* ── COUNCIL FAB GROUP ── */
.km-fab-group{
  position:fixed;bottom:20px;right:20px;z-index:180;
  display:flex;align-items:center;gap:8px;
}
.km-council-fab{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:8px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:600;
  background:#0a0e1a;color:#64748b;
  border:1px solid #1a2236;cursor:pointer;
  transition:all .25s;
  box-shadow:0 4px 24px #00000066;
}
.km-council-fab:hover{color:#e2e8f0;border-color:#ffffff22;background:#0d1220}
.km-council-fab.active{
  background:#00f0ff0f;color:#00f0ff;
  border-color:#00f0ff44;
  box-shadow:0 4px 24px #00f0ff22;
}
.km-fab-label{letter-spacing:.06em}
.km-council-count{
  background:#00f0ff;color:#04060e;
  border-radius:10px;padding:1px 6px;
  font-size:.58rem;font-weight:700;
}
/* Mobile label swap */
.km-fab-mobile-label{display:none}
/* Panel button hidden on desktop — drawer opens via select toggle */
.km-council-panel-btn{display:none}

/* ── COUNCIL DRAWER ── */
#council-drawer{
  position:fixed;top:47px;right:0;bottom:0;
  width:340px;z-index:200;
  background:#070b14;
  border-left:1px solid #1a2236;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  font-family:'Inter',sans-serif;
}
#council-drawer.open{transform:translateX(0)}
.in-iframe #council-drawer{top:0}

.cd-header{
  padding:14px 16px;
  border-bottom:1px solid #1a2236;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.cd-title{
  display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;font-weight:700;color:#e2e8f0;
}
.cd-agent-count{
  font-size:.58rem;color:#64748b;font-weight:400;
}
.cd-header-actions{display:flex;align-items:center;gap:4px}
.cd-btn-ghost{
  background:none;border:none;cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;color:#475569;
  padding:4px 8px;border-radius:3px;
  transition:all .15s;
}
.cd-btn-ghost:hover{color:#e2e8f0;background:#ffffff08}
.cd-close{font-size:.8rem}

.cd-body{
  flex:1;overflow-y:auto;padding:12px;
  scrollbar-width:thin;scrollbar-color:#1e293b transparent;
}
.cd-body::-webkit-scrollbar{width:3px}
.cd-body::-webkit-scrollbar-thumb{background:#1e293b;border-radius:2px}

.cd-hint{
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;color:#334155;
  text-align:center;padding:24px 12px;
  line-height:1.7;
}

/* Agent card */
.cd-agent{
  border:1px solid #1a2236;border-radius:8px;
  margin-bottom:10px;overflow:hidden;
}
.cd-agent-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  background:#0a0e1a;cursor:pointer;
  transition:background .15s;
}
.cd-agent-header:hover{background:#0d1220}
.cd-agent-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.cd-agent-name{
  font-size:.75rem;font-weight:700;flex:1;line-height:1.3;
}
.cd-agent-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:.55rem;color:#475569;
}
.cd-agent-remove{
  background:none;border:none;cursor:pointer;
  color:#334155;font-size:.9rem;padding:2px 4px;
  transition:color .15s;line-height:1;
}
.cd-agent-remove:hover{color:#ef4444}

.cd-agent-body{
  padding:8px 12px 10px;
  border-top:1px solid #1a2236;
}

/* Sub row inside agent */
.cd-sub-row{
  display:flex;align-items:flex-start;gap:8px;
  padding:5px 0;
  border-bottom:1px solid #ffffff04;
  cursor:pointer;
}
.cd-sub-row:last-child{border-bottom:none}
.cd-sub-check{
  width:13px;height:13px;border-radius:3px;
  border:1px solid #334155;flex-shrink:0;
  margin-top:2px;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.cd-sub-row.on .cd-sub-check{
  background:#00f0ff22;border-color:#00f0ff66;
}
.cd-sub-row.on .cd-sub-check::after{
  content:'✓';font-size:.5rem;color:#00f0ff;
}
.cd-sub-name{
  font-size:.72rem;color:#94a3b8;line-height:1.4;flex:1;
  transition:color .15s;
}
.cd-sub-row.on .cd-sub-name{color:#e2e8f0}
.cd-sub-row.off .cd-sub-name{color:#334155;text-decoration:line-through}

/* Concept chips inside sub */
.cd-concepts{
  padding-left:21px;padding-bottom:4px;
  display:flex;flex-wrap:wrap;gap:4px;
}
.cd-chip{
  font-family:'JetBrains Mono',monospace;
  font-size:.52rem;padding:2px 7px;border-radius:3px;
  cursor:pointer;transition:all .15s;border:1px solid transparent;
  user-select:none;
}
.cd-chip.on{
  background:#ffffff08;color:#64748b;border-color:#ffffff10;
}
.cd-chip.on:hover{border-color:#ffffff22;color:#94a3b8}
.cd-chip.off{
  background:transparent;color:#1e293b;
  border-color:#1a2236;text-decoration:line-through;
}

/* Footer */
.cd-footer{
  padding:12px;border-top:1px solid #1a2236;
  flex-shrink:0;background:#050810;
}
.cd-prompt-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;color:#334155;
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase;
}
#cd-prompt{
  width:100%;height:130px;
  background:#0a0e1a;border:1px solid #1a2236;
  color:#64748b;font-family:'JetBrains Mono',monospace;
  font-size:.58rem;line-height:1.6;padding:8px 10px;
  border-radius:5px;resize:none;outline:none;
}
#cd-prompt:not(:placeholder-shown){color:#94a3b8}
.cd-copy-btn{
  width:100%;margin-top:8px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px;border-radius:5px;
  background:#00f0ff12;color:#00f0ff;
  border:1px solid #00f0ff33;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;
  cursor:pointer;transition:all .2s;letter-spacing:.04em;
}
.cd-copy-btn:hover{background:#00f0ff22;box-shadow:0 0 16px #00f0ff22}
.cd-copy-btn.copied{background:#22c55e18;color:#22c55e;border-color:#22c55e33}

@media(max-width:768px){
  .help{display:none}
  .topbar-tab{padding:0 12px;font-size:.62rem}

  /* Row 1: search bar just below topbar */
  .search-bar{min-width:auto;left:8px;right:8px;transform:none;top:58px}
  .in-iframe .search-bar{top:8px}

  /* Row 2: FAB group below the search bar (~42px tall + 6px gap) */
  .km-fab-group{
    bottom:auto;
    top:108px;
    right:12px;
    flex-direction:row;
    gap:6px;
  }
  .in-iframe .km-fab-group{top:58px}

  /* Full-page panel on mobile */
  #council-drawer{
    width:100%;
    top:47px;
    bottom:0;
    height:auto;
    transform:translateY(100%);
    border-left:none;
    border-top:none;
    border-radius:0;
  }
  .in-iframe #council-drawer{top:0}
  #council-drawer.open{transform:translateY(0)}
  #council-drawer::before{display:none}

  /* Show panel button on mobile */
  .km-council-panel-btn{display:flex}
  /* Swap label: show "Select" instead of "Council" on mobile */
  .km-fab-desktop-label{display:none}
  .km-fab-mobile-label{display:inline}
}