:root {
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* default = dark */
  --bg: #0b0f19;
  --panel: #111827;
  --panel2: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: rgba(255,255,255,0.08);
  --accent: #60a5fa;
  --danger: #f87171;
  --ok: #34d399;
  --warn: #fbbf24;
  --topbar-h: 64px;
}

html[data-theme="light"] {
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel2: #f1f5f9;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(2,6,23,0.12);
  --accent: #2563eb;
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #ca8a04;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,24,39,0.85), rgba(17,24,39,0.65));
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 260px; }
/* .logo { width: 80px; height: auto; } */
.logo { width: 40px; height: auto; }
.brandText h1 { margin: 0; font-size: 16px; line-height: 1.1; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 12px; max-width: 520px; }
.titleRow { display: flex; align-items: center; gap: 8px; }

.pill {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
}

.topControls {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tokenWrap, .envWrap { display: flex; flex-direction: column; gap: 4px; }
label { font-size: 11px; color: var(--muted); }
input {
  background: rgba(15,23,42,0.8);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  outline: none;
  min-width: 260px;
}
input:focus { border-color: rgba(96,165,250,0.6); }

.layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  min-height: calc(100vh - 64px);
  align-items: start;
}

.sideTop {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.sidebar{
  border-right: 1px solid var(--border);
  background: rgba(15,23,42,0.55);
  padding: 12px;

  scrollbar-width: thin;                         
  scrollbar-color: rgba(148,163,184,.35) transparent;
  position: sticky;
  top: 64px;                      
  height: calc(100vh - 64px);       
  overflow: auto;                    
  min-width: 0;
}

.treeItem {
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}

.treeItem:hover {
  background: rgba(255, 255, 255, 0.04);
}

.treeItem.active {
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.45);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}

/* Chromium (Chrome/Edge) */
.sidebar::-webkit-scrollbar{
  width: 8px;
}
.sidebar::-webkit-scrollbar-track{
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Fade effect: hide until hover/scroll */
.sidebar::-webkit-scrollbar-thumb{
  opacity: 0;
  transition: opacity .18s ease;
}
.sidebar:hover::-webkit-scrollbar-thumb{
  opacity: 1;
}

.search { width: 100%; min-width: 0; }

.btn {
  background: rgba(96,165,250,0.15);
  border: 1px solid rgba(96,165,250,0.35);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
}
.btn.small { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.btn:hover { border-color: rgba(96,165,250,0.65); }

.tree { display: flex; flex-direction: column; gap: 8px; }
.treeGroup { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.treeGroupHeader {
  padding: 10px 12px;
  background: rgba(17,24,39,0.7);
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
}
.treeGroupHeader strong { font-size: 13px; }

.treeGroupBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease, padding 240ms ease;
  padding: 0 8px;
}
.treeGroupBody.open {
  max-height: 1400px;
  padding: 8px 8px 10px;
}
.treeSection { margin-top: 8px; }
.treeSectionTitle {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 8px;
}
.treeItem {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.treeItem:hover { background: rgba(96,165,250,0.10); }
.method {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.path { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.content{
  padding: 18px;
  min-width: 0;
}
.card {
  background: rgba(17,24,39,0.55);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

.h2 { margin: 0 0 8px; font-size: 16px; }
.muted { color: var(--muted); font-size: 13px; line-height: 1.4; }

.endpointHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.endpointTitle { display: flex; flex-direction: column; gap: 4px; }
.endpointTitleRow { display: flex; align-items: center; gap: 10px; }
.bigMethod {
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.bigPath { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.authTag {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 999px;
}
select {
  background: rgba(15,23,42,0.8);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  outline: none;
  min-width: 160px;
}
html[data-theme="light"] select {
  background: rgba(241,245,249,0.85);
}
select:focus { border-color: rgba(96,165,250,0.6); }

/* ====== COPY ENDPOINT ======= */
.copyEndpointBtn {
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  margin-left: 10px;
}

/* ===== Toast ===== */
.toastRoot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 360px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(17,24,39,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  transform: translateY(10px);
  opacity: 0;
  animation: toastIn 180ms ease forwards;
}

@keyframes toastIn {
  to { transform: translateY(0); opacity: 1; }
}

.toast.hide {
  animation: toastOut 160ms ease forwards;
}

@keyframes toastOut {
  to { transform: translateY(10px); opacity: 0; }
}

.toastTitle {
  font-size: 13px;
  color: var(--text);
  margin: 0;
}
.toastMsg {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

/* Animated success checkmark */
.checkWrap {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(52,211,153,0.45);
  background: rgba(52,211,153,0.16);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.checkIcon {
  width: 14px;
  height: 14px;
  stroke: rgba(52,211,153,0.95);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: drawCheck 360ms ease forwards;
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* ===== Copy button as icon ===== */
.codeWrap { position: relative; }

.copyIconBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(96,165,250,0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.copyIconBtn:hover {
  border-color: rgba(96,165,250,0.65);
  transform: translateY(-1px);
}

.copyIconBtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.8;
  opacity: 0.92;
}

/* ====== SELCT FILE BUTTON */
.tryHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.tryHeadRight{
  display:flex;
  align-items:center;
  gap:10px;
}

.iconBtn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(96,165,250,0.12);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.iconBtn:hover{ border-color: rgba(96,165,250,0.65); }

.iconBtn svg{
  width:18px;
  height:18px;
  stroke: var(--text);
  fill:none;
  stroke-width:2;
  opacity:0.92;
}

.resBox{
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 10px;
  background: rgba(2,6,23,0.55);

  width: 100%;
  max-width: 100%;
  overflow: hidden;     
  min-width: 0;
}

.resBox.ok {
  border-color: rgba(52,211,153,0.55);
  background: rgba(52,211,153,0.10);
}

.resBox.err {
  border-color: rgba(248,113,113,0.55);
  background: rgba(248,113,113,0.10);
}

.resBox pre{
  margin: 0;
  max-height: 320px;
  overflow: auto;      
  max-width: 100%;
  min-width: 0;         
  white-space: pre;     
  word-break: normal;

  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}


.resBox code{
  display: block;
  width: 100%;
  max-width: 100%;
}

.resBox pre.dragging { cursor: grabbing; }
.resBox pre { cursor: grab; }

pre {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(2,6,23,0.8);
  border: 1px solid var(--border);
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
}

/* TOGGLE SWITCH */

.sumRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}


.collapsibleBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease;
}
.collapsibleBody.open {
  max-height: 1200px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }


/* mobile side bar */

/* Default: desktop */
.mobileOnly { display: none; }




/* Mobile layout */
 
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.55);
  z-index: 90;
}

/* Mobile layout: sidebar becomes overlay drawer */
@media (max-width: 980px){

  :root { --topbar-h: 64px; }

  .layout{
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 0;
  }
  
  #pageContent {
    scroll-margin-top: 90px; 
  }
  .mobileOnly{ display: inline-flex !important; }

  .topbar{
    flex-wrap: wrap;        
    align-items: flex-start;
    gap: 10px;
  }

  .brand{
    min-width: 0;
    flex: 1 1 100%;     
  }

  .topControls{
    min-width: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;        
    gap: 10px;
  }

  /* inputs/selects should shrink */
  .tokenWrap, .envWrap{
    flex: 1 1 180px;       
    min-width: 0;
  }

  #mobileMenuBtn{
    flex: 0 0 auto;
    order: -1;            
  }

  input, select{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* IMPORTANT: stop sticky on mobile */
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 86vw;
    max-width: 340px;
    transform: translateX(-110%);
    transition: transform 220ms ease;
    z-index: 100;                   
    overflow: auto;
    padding-top: 64px;               
    border-right: 1px solid var(--border);
    background: rgba(2,6,23,0.55);
  }

  .sidebar.open{
    transform: translateX(0);
  }

  input { min-width: 0; width: 100%; }

  .grid2 {grid-template-columns: 1fr; gap: 0;}
}


/* lock page scroll when drawer is open */
body.lockScroll{
  overflow: hidden;
}


/* toggle switch button */

.sumToggle{
  width:44px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(96,165,250,0.12);
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
}

.sumToggle::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:999px;
  background: var(--text);
  opacity:0.85;
  transition: transform 160ms ease;
}

.sumToggle.isOn::after{
  transform: translateX(20px);
}


.sumToggle{
  width:44px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(96,165,250,0.12);
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
}

.sumToggle::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:999px;
  background: var(--text);
  opacity:0.85;
  transition: transform 160ms ease;
}

.copyBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(96,165,250,0.12);
  color: var(--text);
  cursor: pointer;
}
.copyBtn:hover { border-color: rgba(96,165,250,0.65); }
details {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(17,24,39,0.55);
  margin-bottom: 12px;
}


html[data-theme="light"] details { background: rgba(241,245,249,0.85); }

summary {
  cursor: pointer;
  list-style: none;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
summary::-webkit-details-marker { display: none; }

.detailsBody { padding: 0 14px 14px; }
.chev { opacity: 0.7; font-family: var(--mono); font-size: 12px; }

.grid2 {
  min-width: 0;
}

.grid2 > * {
  min-width: 0;
}

.card, .tryCard {
  min-width: 0;
  max-width: 100%;
}

.codeWrap {
  min-width: 0;
  max-width: 100%;
  overflow: hidden; 
}

.resBox, .resBox * {
  max-width: 100%;
  min-width: 0;
}

.resBox pre {
  overflow: auto;
  max-height: 320px;
  max-width: 100%;
  white-space: pre;
}

.resBox code {
  display: block;
  white-space: pre;
  max-width: 100%;
}


/* dark scrollbar for code blocks */
.codeWrap pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(100,116,139,0.6) rgba(15,23,42,0.6);
}

.codeWrap pre::-webkit-scrollbar {
  height: 8px;
}

.codeWrap pre::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 10px;
}

.codeWrap pre::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.6);
  border-radius: 10px;
}

.codeWrap pre::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8);
}

.tryRow { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.smallInput { min-width: 0; width: 220px; }
.resultOk { color: var(--ok); font-family: var(--mono); font-size: 12px; }
.resultErr { color: var(--danger); font-family: var(--mono); font-size: 12px; }