/* /assets/css/header.css
   ✅ Header pro tipo ChatGPT
   ✅ Siempre muestra menú (⋯)
   ✅ Oculta botones de acción del header (van al menú)
   ✅ Tokens chip premium (glass) sin fondo gris feo
*/

.bt-topbar{
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

.bt-hdr{
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 10px 12px;
}

.bt-hdr-row1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-width:0;
}

/* Orb */
.bt-orb-slot{
  width:44px;height:44px;border-radius:999px;overflow:hidden;
  box-shadow: 0 0 26px var(--orb-glow);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
  flex: 0 0 auto;
}
html[data-theme="light"] .bt-orb-slot{
  border: 1px solid rgba(18,24,38,.10);
  background: rgba(255,255,255,.70);
}
.bt-orb-slot > canvas{ width:100% !important; height:100% !important; display:block; }

/* Left brand */
.bt-hdr-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex: 1 1 auto;
}
.bt-brandtext{ min-width:0; display:flex; flex-direction:column; line-height:1.05; }
.bt-brand-title{
  font-weight:950;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: 14px;
}
.bt-brand-sub{
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
  opacity:.9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Right controls: Tokens + Status + Menu */
.bt-hdr-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* -------------------------
   Pills (base)
   ------------------------- */
.bt-pill{
  border-radius: 999px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;

  /* ✅ más premium: borde sutil + glass */
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.28);
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(2,6,23,.10),
    0 10px 26px rgba(0,0,0,.12);
}
html[data-theme="light"] .bt-pill{
  border: 1px solid rgba(18,24,38,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(11,16,32,.06);
}

.bt-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 12px rgba(147,164,217,.25);
}
.bt-dot.ok{ background: var(--ok); box-shadow: 0 0 12px rgba(56,211,159,.35); }
.bt-dot.bad{ background: var(--danger); box-shadow: 0 0 12px rgba(255,74,107,.35); }

.bt-pill-compact{ padding:7px 10px; }

/* -------------------------
   ✅ TOKENS CHIP PRO (floating)
   - sin “fondo gris”
   - barra limpia sin caja/borde
   ------------------------- */
.bt-tokenpill{
  padding: 8px 10px;
  gap: 6px;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 200px;
  max-width: 300px;

  /* glow pro */
  box-shadow:
    0 0 0 1px rgba(74,163,255,.10),
    0 12px 30px rgba(0,0,0,.14),
    0 0 22px rgba(74,163,255,.10);
}
html[data-theme="light"] .bt-tokenpill{
  box-shadow:
    0 0 0 1px rgba(43,108,255,.08),
    0 12px 26px rgba(11,16,32,.06);
}

.bt-tokenpill-top{
  display:flex;
  align-items:center;
  gap: 8px;
  line-height: 1;
  width:100%;
}

/* token label/value más “premium” */
.bt-tokenpill-top *{
  color: var(--text);
}
.bt-tokenpill-top .bt-tokenpill-mini{
  color: var(--muted);
}

.bt-tokenpill-mini{
  font-family: var(--mono);
  font-size: 11px;
  opacity: .65;
  margin-left: 2px;
}

/* Barra sin caja */
.bt-tokenbar{
  width: 100%;
  min-width: 150px;
  height: 4px;
  border-radius: 999px;
  overflow:hidden;

  /* ✅ sin fondo gris ni borde */
  border: none !important;
  background: rgba(148,163,184,.18);
}
html[data-theme="light"] .bt-tokenbar{
  background: rgba(18,24,38,.10);
}

.bt-tokenbar-fill{
  width: 0%;
  height: 100%;
  display:block;
  border-radius: 999px;
  transition: width .25s ease, background .25s ease;
  background: linear-gradient(90deg, rgba(56,211,159,.95), rgba(74,163,255,.95));
}
.bt-tokenbar.low .bt-tokenbar-fill{
  background: linear-gradient(90deg, rgba(250,204,21,.95), rgba(74,163,255,.90));
}
.bt-tokenbar.critical .bt-tokenbar-fill{
  background: linear-gradient(90deg, rgba(255,74,107,.95), rgba(250,204,21,.90));
}

/* -------------------------
   Header button base (⋯)
   ------------------------- */
.bt-hdr-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  border: 1px solid var(--hdr-btn-border);
  background: var(--hdr-btn-bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 12px;
  line-height: 1;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.bt-hdr-btn:hover{ background: var(--hdr-btn-bg-hover); filter: brightness(1.04); }
.bt-hdr-btn:active{ transform: translateY(1px); }
.bt-hdr-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.bt-hdr-btn i{ font-size: 16px; }

/* ✅ SIEMPRE mostrar menú */
.bt-hdr-btn-more{ display:inline-flex !important; }

/* ✅ Oculta acciones del header SIEMPRE (quedan en el menú btLightbox) */
.bt-hdr-btn-action{ display:none !important; }

/* ocultamos hint row para look más ChatGPT */
.bt-hdr-hintrow{ display:none; }

/* Mobile */
@media (max-width: 576px){
  .bt-brand-sub{ display:none; }

  .bt-tokenpill{
    min-width: 0;
    max-width: 46vw;
    padding: 7px 9px;
  }
  .bt-tokenpill-mini{ display:none; }
  .bt-tokenbar{ min-width: 120px; height: 4px; }

  #statusText{
    max-width: 30vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:block;
  }

  .bt-orb-slot{ width:40px; height:40px; }
}