/* This page's local palette is now just an ALIAS onto the canonical --nd-* tokens
   (theme.css, loaded first). Do NOT hardcode hex here — that froze the page in dark
   mode and ignored the site light/dark toggle. Every selector below paints from these
   locals, so aliasing them is all it takes to inherit light/dark for free. */
:root{
  --bg:var(--nd-bg); --panel:var(--nd-surface); --panel2:var(--nd-surface-2); --line:var(--nd-border);
  --text:var(--nd-text); --muted:var(--nd-muted); --gold:var(--nd-accent); --accent:var(--nd-manage);
  --good:var(--nd-ok); --ok:var(--nd-ok); --warn:var(--nd-warn); --err:var(--nd-error); --crit:var(--nd-error);
  --tx:var(--nd-manage); --rx:var(--nd-ok);
  --rowh:22px; --mono:var(--nd-font-mono);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;
}

/* ---------- top bar ---------- */
#topbar{
  display:flex;align-items:center;gap:16px;padding:10px 16px;flex:0 0 auto;
  border-bottom:1px solid var(--line);background:var(--panel);
}
.brand{font-size:15px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.brand span{color:var(--gold)}              /* "NDEVR" — brand gold/orange */
.brand .brand-sub{color:var(--text)}        /* "Log Viewer" — white, matching the standard title theme */
.tabs{display:flex;gap:4px}
.tab{
  background:transparent;color:var(--muted);border:1px solid transparent;border-radius:7px;
  padding:6px 14px;font-size:13px;cursor:pointer;
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--panel2);color:var(--text);border-color:var(--line)}
.meta{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.spacer{flex:1}
.btn{
  background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:7px;padding:7px 12px;font-size:13px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{border-color:var(--gold)}
.btn:disabled{opacity:.45;cursor:default}
.btn-ico{width:15px;height:15px;display:block;flex:0 0 auto}
/* Shared site + account/user menu cluster (built into [data-ndevr-nav] by site-chrome.js), set off
   from the action buttons by a thin divider. Styling of the buttons themselves comes from forms.css. */
#topbar .topbar-nav{padding-left:14px;border-left:1px solid var(--line)}
/* Always show the small user icon here (forms.css's .ndevr-nav-cluster default is a larger 28px squircle;
   page-scoped override so chat/library/admin keep theirs). */
#topbar .ndevr-auth-avatar{width:22px;height:22px;border-radius:5px}

/* ---------- views ---------- */
.view{flex:1;min-height:0;display:none;flex-direction:column}
.view.active{display:flex}

/* ---------- log toolbar ---------- */
.toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 auto;
}
.search-wrap{display:flex;align-items:center;gap:6px;flex:1 1 320px;min-width:240px}
.search-wrap input[type=search]{
  flex:1;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:7px 10px;border-radius:7px;font-size:13px;font-family:var(--mono);
}
.search-wrap input[type=search]:focus{outline:none;border-color:var(--gold)}
.match-count{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:60px;text-align:right}
.icon-btn{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:11px;line-height:1;
}
.icon-btn:hover:not(:disabled){border-color:var(--gold)}
.icon-btn:disabled{opacity:.4;cursor:default}
.ctl{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;cursor:pointer;white-space:nowrap}
.ctl input[type=checkbox]{accent-color:var(--gold)}
.ctl input[type=number]{
  width:46px;background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:5px;padding:3px 5px;font-size:12px;
}
.ctl select{
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  border-radius:5px;padding:4px 6px;font-size:12px;
}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{
  font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);cursor:pointer;font-variant-numeric:tabular-nums;
}
.chip.on{border-color:var(--gold);color:var(--text);background:rgba(255,182,59,.12)}

/* ---------- virtual log table ---------- */
.log-scroller{
  position:relative;flex:1;overflow:auto;background:var(--bg);
  font-family:var(--mono);font-size:12.5px;
}
.log-sizer{position:relative;width:1px}
.log-rows{position:absolute;top:0;left:0;right:0}
.log-row{
  position:absolute;left:0;right:0;height:var(--rowh);line-height:var(--rowh);
  display:flex;align-items:flex-start;padding:0 12px;white-space:pre;
  border-bottom:1px solid transparent;
}
.log-row:hover{background:var(--panel)}
.log-row.match{background:rgba(255,182,59,.06)}
.log-row.current{background:rgba(90,169,255,.16)}
.log-row .ln{color:var(--muted);text-align:right;flex:0 0 auto;
  user-select:none;padding-right:12px;font-variant-numeric:tabular-nums}
.log-row .tm{color:var(--muted);flex:0 0 auto;padding-right:12px;font-variant-numeric:tabular-nums}
.log-row .badge{
  flex:0 0 auto;margin-right:10px;padding:0 6px;border-radius:4px;font-size:10.5px;
  line-height:16px;margin-top:3px;height:16px;text-align:center;min-width:40px;
  background:var(--panel2);color:var(--muted);
}
.log-row .badge.dir-tx{color:var(--tx);background:rgba(90,169,255,.12)}
.log-row .badge.dir-rx{color:var(--rx);background:rgba(82,210,115,.12)}
.log-row .msg{flex:1;overflow:hidden;text-overflow:ellipsis}
.log-row.lvl-0 .msg{color:var(--muted)}
.log-row.lvl-1 .msg{color:var(--text)}
.log-row.lvl-2 .msg{color:var(--warn)}
.log-row.lvl-3 .msg{color:var(--err)}
.log-row.lvl-4 .msg{color:var(--crit);font-weight:600}
.log-row mark{background:var(--gold);color:var(--nd-accent-contrast);border-radius:2px;padding:0 1px}

/* wrap mode — rows flow in normal document order (no virtualization), so they must
   drop the absolute positioning the virtual scroller relies on, else every row stacks
   at the same spot and overlaps. The message cell must also allow wrapping/breaking. */
.log-scroller.wrap .log-row{position:static;white-space:pre-wrap;height:auto}
.log-scroller.wrap .log-row .msg{overflow:visible;text-overflow:clip;white-space:pre-wrap;overflow-wrap:anywhere}
.log-scroller.wrap .log-rows{position:static}
.log-scroller.wrap .log-sizer{display:none}

/* dropzone / empty state */
.dropzone{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;text-align:center;color:var(--muted);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;pointer-events:none;
}
.dropzone .big{font-size:18px;color:var(--text)}
.dropzone .hint{font-size:13px;max-width:520px;line-height:1.6}
.log-scroller.dragging{outline:2px dashed var(--gold);outline-offset:-14px;background:rgba(255,182,59,.05)}
.hidden{display:none!important}

/* ---------- charts view ---------- */
#chartsView{flex-direction:row}
.sidebar{width:300px;flex:0 0 300px;border-right:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;min-height:0}
.sidebar .head{padding:10px 14px;border-bottom:1px solid var(--line)}
.sidebar .head input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:7px 9px;border-radius:6px;font-size:13px}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.mini{font-size:11px;padding:4px 8px;background:var(--panel2);color:var(--text);
  border:1px solid var(--line);border-radius:6px;cursor:pointer}
.mini:hover{border-color:var(--gold)}
.series-list{overflow:auto;flex:1;padding:6px 8px}
.group-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  margin:12px 6px 4px;font-weight:600}
.series{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer}
.series:hover{background:var(--panel2)}
.series input{accent-color:var(--gold);cursor:pointer}
.series .swatch{width:11px;height:11px;border-radius:3px;flex:0 0 auto;background:#555}
.series .name{flex:1;font-variant-numeric:tabular-nums}
.series .name small{color:var(--muted);font-weight:400}
.series .count{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.chart-wrap{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.chart-toolbar{padding:8px 14px;border-bottom:1px solid var(--line);display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;background:var(--panel)}
.canvas-box{flex:1;position:relative;padding:12px 14px;min-height:0}
#chart{width:100%;height:100%}
.stats{padding:8px 14px;border-top:1px solid var(--line);background:var(--panel);max-height:170px;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
th,td{text-align:right;padding:4px 10px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel)}
td .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* ---------- QUAIL insights drawer ---------- */
.btn-accent{border-color:var(--gold);color:var(--gold);display:inline-flex;align-items:center;gap:7px}
.btn-accent:hover{background:rgba(255,182,59,.12)}
.btn-accent img{width:18px;height:18px;display:block}
.quail-drawer{
  position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;z-index:50;
  background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(0,0,0,.35);
}
.quail-drawer[hidden]{display:none}   /* override the .quail-drawer display so Close actually hides it */
.qd-head{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line)}
.qd-logo{width:24px;height:24px;display:block;flex:0 0 auto}
.qd-title{font-weight:600;color:var(--gold);white-space:nowrap;letter-spacing:.3px}
.qd-type{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qd-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 12px;gap:8px}
.qd-gate{overflow:auto}
.qd-gate-hero{text-align:center;padding:6px 6px 14px}
.qd-gate-logo{width:54px;height:54px;display:block;margin:6px auto 10px}
.qd-gate-hero h3{margin:0 0 8px;font-size:16px;color:var(--text)}
.qd-gate-note{color:var(--muted);font-size:12.5px;line-height:1.5;margin:0 2px 6px;text-align:left}
.qd-suggest{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto}
.qd-chip{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  border-radius:16px;padding:5px 11px;font-size:12px;cursor:pointer;text-align:left;
}
.qd-chip:hover{border-color:var(--gold);background:rgba(255,182,59,.1)}
.qd-host{flex:1;min-height:0;display:flex;flex-direction:column}
.qd-host .ndevr-qa{flex:1;min-height:0}
/* clickable #line-number citations inside QUAIL replies */
.qd-lineref{
  color:var(--gold);text-decoration:none;cursor:pointer;font-variant-numeric:tabular-nums;
  border-bottom:1px dotted var(--gold);
}
.qd-lineref:hover{background:rgba(255,182,59,.16);border-radius:3px}
.qd-empty{color:var(--muted);font-size:13px;padding:20px 6px;text-align:center}

/* Mobile: dock QUAIL to the BOTTOM as a sheet instead of covering the screen,
   so the log stays visible above it (and QUAIL can scroll it to events). */
@media (max-width:640px){
  .quail-drawer{
    top:auto; left:0; right:0; bottom:0; width:100vw; max-width:100vw;
    height:58vh; max-height:58vh;
    border-left:none; border-top:1px solid var(--line);
    border-radius:16px 16px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.45);
  }
  body.qd-open{ overflow:hidden; }
  /* trim the toolbar so the log stays visible above the sheet (QUAIL can scroll to events) */
  .toolbar{ gap:7px 12px; padding:7px 10px; }
  #channelChips{ display:none; }          /* type shows in the status bar + QUAIL header */
}

/* ---------- navigation flash (QUAIL "show me line N") ---------- */
.log-row.flash{ animation:rowFlash 1.6s ease-out; }
@keyframes rowFlash{
  0%   { background:rgba(255,182,59,.55); box-shadow:inset 3px 0 0 var(--gold); }
  100% { background:transparent; box-shadow:inset 3px 0 0 transparent; }
}

/* ---------- responsive header ---------- */
@media (max-width:640px){
  #topbar{ gap:7px; padding:7px 9px; flex-wrap:wrap; }
  #topbar .spacer{ display:none; }
  .brand{ font-size:13px; }
  .brand-sub{ display:none; }                 /* keep just "NDEVR" */
  #topbar .meta{ display:none; }              /* file name shows in the status bar instead */
  #topbar .btn{ padding:7px 9px; font-size:12px; }
  #topbar .btn-label{ display:none; }         /* icon-only buttons so the header fits one line */
  #topbar .btn .btn-ico, .btn-accent img{ width:17px; height:17px; }
  .tab{ padding:5px 11px; }
}

/* ---------- status bar ---------- */
#statusbar{
  display:flex;align-items:center;gap:12px;padding:5px 16px;flex:0 0 auto;
  border-top:1px solid var(--line);background:var(--panel);color:var(--text);font-size:12px;
}
.muted{color:var(--muted)}

/* ================= My Logs repo ================= */
.repo-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel);flex:0 0 auto;
}
.repo-toolbar input[type=search]{
  flex:1 1 320px;min-width:220px;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:7px 10px;border-radius:7px;font-size:13px;
}
.repo-toolbar input[type=search]:focus{outline:none;border-color:var(--gold)}
.repo-status{color:var(--muted);font-size:12px;white-space:nowrap}
.repo-list{flex:1;min-height:0;overflow:auto;padding:12px 16px}
.repo-empty,.repo-gate{color:var(--muted);padding:28px 8px;text-align:center;max-width:520px;margin:0 auto}
.repo-gate p{margin:0 0 16px}

.repo-group{margin-bottom:18px}
.repo-group-head{
  display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gold);
  padding:6px 2px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.repo-group-count{color:var(--muted);font-weight:400;font-size:12px}

.repo-row{
  display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);margin-bottom:6px;
}
.repo-row:hover{border-color:var(--gold)}
.repo-pick{padding-top:2px;cursor:pointer}
.repo-pick input{accent-color:var(--gold)}
.repo-main{flex:1;min-width:0;cursor:pointer}
.repo-rowacts{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.repo-iconbtn{
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:13px;line-height:1;
}
.repo-iconbtn:hover{border-color:var(--gold);color:var(--text)}
.repo-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.repo-headline{color:var(--muted);font-size:12px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.repo-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.repo-chip{
  font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);white-space:nowrap;
}
.repo-chip.err{color:var(--err);border-color:rgba(255,107,107,.4)}
.repo-chip.warn{color:var(--warn);border-color:rgba(255,182,59,.4)}
.repo-chip.ok{color:var(--ok,#52d273);border-color:rgba(82,210,115,.4)}

/* ---- Live logs (just-dropped working set) ---- */
.live-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.repo-row.current{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.live-row{align-items:center}
.live-source{color:var(--muted);font-size:11px;margin:1px 0}
.live-remove{
  flex:0 0 auto;align-self:flex-start;background:transparent;border:none;color:var(--muted);
  font-size:14px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px;
}
.live-remove:hover{color:var(--err);background:rgba(255,107,107,.12)}

.repo-actions{
  display:flex;align-items:center;gap:10px;padding:10px 16px;flex:0 0 auto;
  border-top:1px solid var(--line);background:var(--panel);
}
#repoSelCount,#liveSelCount{color:var(--muted);font-size:12px}

/* serial-fallback modal */
.repo-modal-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.repo-modal{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:20px;max-width:440px;width:100%;
}
.repo-modal h3{margin:0 0 8px;font-size:15px}
.repo-modal p{margin:0 0 14px;color:var(--muted);font-size:13px}
.repo-modal-input{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:7px;font-size:13px;margin-bottom:12px;
}
.repo-modal-input:focus{outline:none;border-color:var(--gold)}
.repo-modal-quail{color:var(--accent);font-size:12px;margin-bottom:12px}
.repo-modal-row{display:flex;align-items:center;gap:8px}
.repo-modal-row .btn img{width:15px;height:15px}

@media (max-width:640px){
  .repo-list{padding:10px}
  .repo-toolbar{gap:8px;padding:7px 9px}
}