/* ================= bottom-pill.css ================= */

/* Main floating bar */
.topbar{
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);

  z-index: 9999;

  background: rgba(20,26,36,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;

  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);

  padding: 6px 10px;
}

/* Inner row */
.topbar-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
}

/* Brand (small mode) */
.brand{
  display:flex;
  align-items:center;
  gap: 8px;
  padding-right: 8px;
  border-right: 1px solid rgba(255,255,255,0.12);
}

.brand-logo{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

.brand-title,
.brand-sub{
  display:none; /* hide text in pill mode */
}

/* Toolbar row */
.toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tool groups become inline */
.toolgroup{
  display:flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;

  padding: 4px 6px;

  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
}

.toolgroup-label{
  display:none; /* hide labels */
}

/* Buttons */
.toolbtn{
  height: 28px;
  padding: 0 10px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);

  color: rgba(255,255,255,0.92);

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;
}

.toolbtn:hover{
  background: rgba(255,255,255,0.12);
}

.toolbtn-primary{
  background: rgba(59,130,246,0.28);
  border-color: rgba(96,165,250,0.45);
}

.toolbtn-primary:hover{
  background: rgba(59,130,246,0.36);
}

/* Inputs */
.toolgroup .toolinput{
  height: 26px;
  width: 70px;

  border-radius: 999px;
  padding: 0 8px;

  font-size: 12px;
}

/* Checkbox row */
.toolgroup .checkrow{
  gap: 6px;
}

.toolgroup .checkrow span{
  display:none; /* icon-only feel */
}

/* Pills */
.pill{
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
}

.pill-pages{
  font-size: 11px;
  font-weight: 500;
  opacity: 0.75;
  line-height: 1;
  display: flex;
  align-items: center; /* vertical centering */
}


/* Mobile fallback */
@media (max-width: 700px){
  .topbar{
    bottom: 10px;
    width: calc(100% - 20px);
  }

  .topbar-inner{
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Page nav buttons spacing */
.row{
  gap: 8px;
}

.row .toolbtn{
  padding: 0 14px;
  min-width: 64px;
}

/* ================= bottom-pill.css — Obsidian/Figma polish overrides ================= */

/* Make the whole bar feel like one calm glass surface */
.topbar{
  background: rgba(16,18,22,0.78);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.05);

  padding: 8px 10px;            /* a little more breathable */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Slightly more spacing + reduce “busy” feel */
.topbar-inner{
  gap: 8px;
  padding: 6px 8px;
}

/* Brand separator: softer */
.brand{
  padding-right: 10px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

/* Logo: calmer border */
.brand-logo{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

/* Tool groups: stop looking like their own boxed pills */
.toolgroup{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 5px 6px;
  gap: 6px;
}

/* Buttons: reduce outline contrast, remove “Steam button” vibe */
.toolbtn{
  height: 26px;                 /* slightly smaller = more modern */
  padding: 0 10px;

  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);

  font-size: 12px;
  font-weight: 750;             /* 800 reads a bit “game UI” */
  letter-spacing: -0.01em;

  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease;
}

.toolbtn:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  transform: none;              /* no “poppy” hover */
}

.toolbtn:active{
  background: rgba(255,255,255,0.08);
}

/* Primary: keep it subtle (more Figma, less neon) */
.toolbtn-primary{
  background: rgba(59,130,246,0.18);
  border-color: rgba(96,165,250,0.22);
}

.toolbtn-primary:hover{
  background: rgba(59,130,246,0.24);
  border-color: rgba(96,165,250,0.30);
}

/* Inputs: flatter + more native */
.toolgroup .toolinput{
  height: 26px;
  width: 78px;

  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);

  padding: 0 10px;
  border-radius: 999px;
  transition: box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.toolgroup .toolinput:focus{
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
}

/* Page pill: soften and align better */
.pill{
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.pill-pages{
  opacity: 0.65;
  font-weight: 600;
}

/* Page nav buttons spacing (keep your bigger hit area but match style) */
.row{
  gap: 8px;
}

.row .toolbtn{
  padding: 0 14px;
  min-width: 64px;
}

/* Optional: reduce toolbar “segmentation” by blending groups together */
.toolbar{
  gap: 6px;
}

/* Mobile: keep bar calm */
@media (max-width: 700px){
  .topbar{
    background: rgba(16,18,22,0.86);
    border-color: rgba(255,255,255,0.10);
  }
}

/* ===== Auto-hide bottom bar ===== */
.topbar{
  transition: transform 260ms ease, opacity 220ms ease;
  will-change: transform, opacity;
}

.topbar.bar-hidden{
  transform: translate(-50%, 120%); /* keep translateX(-50%) behavior */
  opacity: 0;
  pointer-events: none;
}