:root{
  --abq-bg:#ffffff; --abq-fg:#0b0b0c; --abq-muted:rgba(0,0,0,.62);
  --abq-border:rgba(0,0,0,.14); --abq-gold:#f2c14e; --abq-radius:14px;
  --abq-btn-bg:rgba(242,193,78,.18); --abq-btn-fg:#0b0b0c; --abq-shadow:0 10px 24px rgba(0,0,0,.08);
}
html[data-theme="dark"]{
  --abq-bg:#070707; --abq-fg:#f6f1e6; --abq-muted:rgba(246,241,230,.70);
  --abq-border:rgba(242,193,78,.22); --abq-btn-bg:rgba(242,193,78,.12); --abq-btn-fg:#f6f1e6; --abq-shadow:0 10px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--abq-bg);color:var(--abq-fg)}
a{color:inherit}
.abq-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:999px;border:1px solid var(--abq-border);background:var(--abq-btn-bg);color:var(--abq-btn-fg);text-decoration:none;cursor:pointer;user-select:none}
.abq-btn:hover{filter:brightness(1.03)}
.abq-btn.abq-primary{background:rgba(242,193,78,.34);border-color:rgba(242,193,78,.55)}
.small{font-size:13px;color:var(--abq-muted);line-height:1.6}
.card{border:1px solid var(--abq-border);border-radius:var(--abq-radius);background:rgba(0,0,0,.03);box-shadow:var(--abq-shadow)}
html[data-theme="dark"] .card{background:rgba(255,255,255,.03)}


/* --- Horizon-driven navigation --- */
.abq-nav { position: sticky; top: 54px; z-index: 9; padding: 8px 12px 12px; }
.abq-nav-inner{
  display:flex; gap:10px; overflow:auto; -webkit-overflow-scrolling: touch;
  padding:10px; border-radius:16px;
  border:1px solid rgba(242,193,78,0.18);
  background: rgba(255,255,255,0.55);
}
html[data-theme="dark"] .abq-nav-inner{
  background: rgba(0,0,0,0.35);
  border-color: rgba(242,193,78,0.22);
}
.abq-node{
  min-width: 148px;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(128,128,128,0.18);
  background: linear-gradient(180deg, rgba(242,193,78,0.09), rgba(242,193,78,0.03));
  text-decoration:none;
  color: inherit;
  display:flex; flex-direction:column; gap:6px;
  transform: translateZ(0);
  transition: transform 140ms ease, border-color 140ms ease;
}
.abq-node:hover{ transform: translateY(-2px) scale(1.01); border-color: rgba(242,193,78,0.45); }
.abq-node .k{ font-size: 11px; opacity:0.75; letter-spacing:0.22px; text-transform: uppercase; }
.abq-node .t{ font-size: 14px; font-weight: 650; }
.abq-node .d{ font-size: 12px; opacity:0.78; line-height:1.25; }
.abq-node .q{ font-size: 11px; opacity:0.70; margin-top:2px; }
.abq-node[data-live="1"]{ box-shadow: 0 0 0 1px rgba(242,193,78,0.18) inset, 0 0 22px rgba(242,193,78, calc(0.12 + var(--qphi,0.28)*0.18)); }
.abq-node[data-live="1"] .q::after{
  content:"";
  display:inline-block; width:7px; height:7px; border-radius:99px;
  margin-left:6px;
  background: rgba(242,193,78,0.9);
  box-shadow: 0 0 0 2px rgba(242,193,78,0.18), 0 0 18px rgba(242,193,78, calc(0.25 + var(--qphi,0.28)*0.35));
  vertical-align: middle;
}
.abq-nav-meta{ display:flex; gap:8px; align-items:center; margin-top:8px; font-size:12px; opacity:0.82; flex-wrap:wrap; }
.abq-pill{
  padding:5px 10px; border-radius:999px; border:1px solid rgba(242,193,78,0.22);
  background: rgba(242,193,78,0.07);
}
.abq-link{ text-decoration:none; border-bottom:1px dotted rgba(242,193,78,0.45); color:inherit; }


/* Why panel */
#abqWhyPanel{
  border:1px solid rgba(242,193,78,0.22);
  border-radius:16px;
  padding:10px 12px;
  background: rgba(255,255,255,0.62);
}
html[data-theme="dark"] #abqWhyPanel{ background: rgba(0,0,0,0.38); }
.abq-why-title{ font-weight:700; margin-bottom:6px; }
.abq-why-item{ font-size:12px; opacity:0.86; margin:6px 0; line-height:1.25; }
.abq-why-item b{ opacity:0.92; }


/* Horizon canvas layer (behind content) */
#abqHorizonLayer{
  opacity: 1;
}

/* ===== Abqeri Assistant UI (Horizon) ===== */
#abqAssistOrb{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--abq-border);
  background: rgba(242,193,78,.16);
  box-shadow: var(--abq-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99991;
  cursor: pointer;
  user-select: none;
}
html[data-theme="dark"] #abqAssistOrb{ background: rgba(242,193,78,.12); }

#abqAssistOrb .dot{
  width: 12px; height: 12px; border-radius: 999px;
  background: rgba(0,0,0,.45);
}
html[data-theme="dark"] #abqAssistOrb .dot{ background: rgba(255,255,255,.55); }

#abqAssistOrb[data-badge="1"]::after{
  content:"";
  position:absolute;
  right:8px; top:8px;
  width:8px; height:8px; border-radius:999px;
  background: rgba(242,193,78,.95);
  box-shadow: 0 0 0 2px rgba(0,0,0,.08);
}

#abqAssistBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.30);
  z-index: 99990;
  display: none;
}
#abqAssistBackdrop[data-open="1"]{ display:block; }

#abqAssistPanel{
  position: fixed;
  right: 18px;
  bottom: 74px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--abq-border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--abq-shadow);
  z-index: 99992;
  display: none;
}
html[data-theme="dark"] #abqAssistPanel{ background: rgba(10,10,10,.88); }

#abqAssistPanel[data-open="1"]{ display:block; }

.abqAssistHead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--abq-border);
}
.abqAssistTitle{ font-weight: 950; letter-spacing:.2px; font-size: 14px; }
.abqAssistSub{ opacity:.8; font-size: 12px; margin-top: 2px; }
.abqAssistHeadRight{ display:flex; gap:8px; align-items:center; }

.abqAssistTabs{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--abq-border);
}
.abqAssistTab{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--abq-border);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  background: rgba(0,0,0,.04);
}
html[data-theme="dark"] .abqAssistTab{ background: rgba(255,255,255,.06); }
.abqAssistTab[data-on="1"]{
  background: rgba(242,193,78,.22);
  border-color: rgba(242,193,78,.55);
}

.abqAssistBody{
  padding: 12px;
  overflow: auto;
  max-height: calc(min(560px, calc(100vh - 120px)) - 148px);
}

.abqAssistCard{
  border: 1px solid var(--abq-border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(0,0,0,.03);
}
html[data-theme="dark"] .abqAssistCard{ background: rgba(255,255,255,.05); }

.abqAssistKey{ font-weight: 900; font-size: 12px; opacity: .85; }
.abqAssistText{ font-size: 13px; line-height: 1.35; }
.abqAssistSmall{ font-size: 12px; opacity: .75; }
.abqAssistList{ margin-top: 10px; display:flex; flex-direction: column; gap: 8px; }

.abqAssistItem{
  border: 1px solid var(--abq-border);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content: space-between;
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .abqAssistItem{ background: rgba(0,0,0,.22); }
.abqAssistItem .t{ font-size: 12px; font-weight: 800; }
.abqAssistItem .r{ font-size: 12px; opacity:.75; margin-top: 3px; }

.abqAssistInput{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--abq-border);
  background: rgba(255,255,255,.72);
  outline: none;
}
html[data-theme="dark"] .abqAssistInput{ background: rgba(0,0,0,.28); color: inherit; }

.abqAssistFoot{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--abq-border);
}

@media (max-width: 520px){
  #abqAssistPanel{ right: 12px; bottom: 70px; width: calc(100vw - 24px); }
  #abqAssistOrb{ right: 12px; bottom: 12px; }
}