/* === assets/css/app.css === */
/* /assets/css/app.css
   ✅ GLOBAL COMPLETO (dark/light)
   ✅ Base + shell + imports
*/

/* =========================
   Variables
   ========================= */
:root{
  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  /* Dark */
  --bg:#05070b;
  --bg2: rgba(11,16,32,.78);
  --bg3: rgba(11,16,32,.55);
  --line: rgba(26,37,80,.65);

  --text:#e7ecff;
  --muted:#93a4d9;

  --ok:#38d39f;
  --danger:#ff4a6b;

  --bubble-me: rgba(74,163,255,.16);
  --bubble-me-border: rgba(74,163,255,.30);
  --bubble-in: rgba(6,10,20,.42);
  --bubble-in-border: rgba(56,211,159,.22);

  --bubble-system: rgba(12,18,34,.55);
  --bubble-system-border: rgba(147,164,217,.22);

  --topbar-bg: linear-gradient(180deg, rgba(11,16,32,.94), rgba(11,16,32,.60));
  --composer-bg: rgba(8,12,24,.35);

  --orb-glow: rgba(74,163,255,.35);

  /* Composer */
  --composer-pill-bg: rgba(6,10,20,.62);
  --composer-pill-border: rgba(26,37,80,.60);
  --composer-btn-bg: rgba(74,163,255,.18);
  --composer-btn-border: rgba(74,163,255,.45);

  /* Mobile keyboard safe height */
  --app-h: 100dvh;

  /* Header buttons */
  --hdr-btn-bg: rgba(8,12,24,.38);
  --hdr-btn-border: rgba(26,37,80,.58);
  --hdr-btn-bg-hover: rgba(8,12,24,.55);

  /* word highlight */
  --hl-bg: rgba(255,255,255,.12);
  --hl-bg-light: rgba(43,108,255,.10);

  /* Credit-card sizing */
  --cc-aspect: 1.586;         /* 85.60mm / 53.98mm */
  --cc-radius: 28px;
  --cc-pad: 18px;
}

/* =========================
   Light theme variables
   ========================= */
html[data-theme="light"]{
  --bg:#f6f7fb;
  --bg2: rgba(255,255,255,.88);
  --bg3: rgba(255,255,255,.72);
  --line: rgba(18,24,38,.14);

  --text:#0b1020;
  --muted: rgba(11,16,32,.62);

  --bubble-me: rgba(43,108,255,.12);
  --bubble-me-border: rgba(43,108,255,.20);
  --bubble-in: rgba(255,255,255,.92);
  --bubble-in-border: rgba(18,24,38,.10);

  --bubble-system: rgba(255,255,255,.92);
  --bubble-system-border: rgba(18,24,38,.12);

  --topbar-bg: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  --composer-bg: rgba(255,255,255,.72);

  --orb-glow: rgba(43,108,255,.22);

  --composer-pill-bg: rgba(255,255,255,.92);
  --composer-pill-border: rgba(18,24,38,.12);
  --composer-btn-bg: rgba(43,108,255,.10);
  --composer-btn-border: rgba(43,108,255,.18);

  --hdr-btn-bg: rgba(255,255,255,.85);
  --hdr-btn-border: rgba(18,24,38,.12);
  --hdr-btn-bg-hover: rgba(255,255,255,.95);
}

/* =========================
   Base / Reset
   ========================= */
html, body { height:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
.container-fluid { max-width: 100vw; }

body{
  margin:0;
  color: var(--text);
  overflow: hidden;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(74,163,255,.18), transparent 55%),
    radial-gradient(700px 500px at 90% 20%, rgba(43,108,255,.14), transparent 55%),
    radial-gradient(900px 600px at 50% 90%, rgba(74,163,255,.10), transparent 55%),
    var(--bg);
}
html[data-theme="light"] body{
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(43,108,255,.10), transparent 60%),
    radial-gradient(700px 500px at 90% 20%, rgba(74,163,255,.08), transparent 60%),
    radial-gradient(900px 600px at 50% 90%, rgba(43,108,255,.06), transparent 60%),
    var(--bg);
}

/* =========================
   App shell
   ========================= */
.bt-app{
  height: var(--app-h);
  display:flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  max-width: 100vw;
  transform: translateY(0);
  will-change: transform;
}


/* Unified Boris UI Theme */
:root{--bt-radius:12px;}
.bt-btn,.bt-toast,.bt-lightbox{border-radius:var(--bt-radius);}
html[data-theme="light"]{--bt-bg:#fff;--bt-fg:#111;}
html[data-theme="dark"]{--bt-bg:#0f0f0f;--bt-fg:#eee;}


.bt-helpbar{
  display:flex; gap:8px; justify-content:center; align-items:center;
  padding:8px 10px; margin:8px 0;
}
.bt-helpbtn{
  border-radius:12px; padding:6px 10px; font-size:12px; font-weight:600;
  background: var(--bt-bg); color: var(--bt-fg);
  border:1px solid rgba(0,0,0,.12); cursor:pointer;
}
html[data-theme="dark"] .bt-helpbtn{ border-color: rgba(255,255,255,.18); }
.bt-helpbtn:hover{ opacity:.9; }

/* === Level 3.5 Header polish (Desktop-first) === */
@media (min-width: 900px){
  .bt-header-actions{
    display:flex; gap:10px; align-items:center;
  }
  .bt-header-actions .bt-btn{
    padding:6px 10px;
    border-radius:12px;
  }
}

/* === Level 3.5 Remember Device (always visible) === */
.bt-remember-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  font-size:12px;
  opacity:.9;
}
.bt-remember-row input[type="checkbox"]{
  width:14px; height:14px;
}


.bt-status-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  margin-top:6px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.6);
}
html[data-theme="dark"] .bt-status-bar{
  border-color: rgba(255,255,255,.18);
  background: rgba(20,20,20,.6);
}
.bt-status-left{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
}
.bt-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:11px;
  background: rgba(0,0,0,.06);
}
html[data-theme="dark"] .bt-status-pill{
  background: rgba(255,255,255,.08);
}
.bt-status-pill.ok{ color:#0a7a3b; }
.bt-status-pill.bad{ color:#a33; }

.bt-remember{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
}

/* === Level 5.5 Tone Presets === */
.bt-tone{
  display:flex;
  gap:6px;
  margin-left:10px;
}
.bt-tone-btn{
  padding:4px 10px;
  font-size:11px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:transparent;
  cursor:pointer;
  font-weight:700;
}
html[data-theme="dark"] .bt-tone-btn{ border-color: rgba(255,255,255,.18); }
.bt-tone-btn.active{
  background: rgba(0,0,0,.08);
}
html[data-theme="dark"] .bt-tone-btn.active{
  background: rgba(255,255,255,.12);
}

/* === Level 6 Trust Card === */
.bt-trust-card{
  border-radius:16px;
  padding:12px;
  margin:10px;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.12);
  font-size:12px;
}
html[data-theme="dark"] .bt-trust-card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.bt-trust-card ul{
  padding-left:18px;
}

.bt-cta .bt-btn{ flex:1; }


/* === Floating-only UI === */
.bt-header-actions, .bt-helpbar, .bt-cta { display:none !important; }
.bt-auth-footer, .bt-footer, .bt-footer-controls, .bt-bottom-bar, .bt-remember-row, .bt-status-bar { display:none !important; }

.bt-float-panel{
  position:fixed; right:14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:999999;
}
.bt-float-btn{
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
html[data-theme="dark"] .bt-float-btn{
  border-color:rgba(255,255,255,.18);
  background:rgba(20,20,20,.78);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.bt-float-btn svg{width:20px;height:20px}
.bt-float-btn.ok{outline:2px solid rgba(14,160,90,.35)}
.bt-float-btn.bad{outline:2px solid rgba(200,60,60,.30)}

.bt-float-panel, .bt-float-btn{pointer-events:auto;touch-action:manipulation;}


/* Master menu (lightbox content) */
.bt-mm{display:flex;flex-direction:column;gap:12px}
.bt-mm-title{font-weight:1000;font-size:14px;margin-bottom:2px}
.bt-mm-section{border:1px solid rgba(0,0,0,.10);border-radius:16px;padding:12px;background:rgba(0,0,0,.02)}
html[data-theme="dark"] .bt-mm-section{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.bt-mm-h{font-weight:900;font-size:12px;opacity:.8;margin-bottom:8px}
.bt-mm-row{display:flex;flex-wrap:wrap;gap:8px}
.bt-mm-btn{border-radius:12px;padding:10px 12px;border:1px solid rgba(0,0,0,.12);background:transparent;font-weight:900;font-size:12px;cursor:pointer}
html[data-theme="dark"] .bt-mm-btn{border-color:rgba(255,255,255,.18)}

/* === assets/css/header.css === */
/* /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; }
}

/* === assets/css/chat.css === */
/* /assets/css/chat.css
   ✅ Chat + composer con textarea tipo ChatGPT
*/

.bt-chat{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg2), var(--bg3));
  overflow: hidden;
}

.bt-messages{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  overflow-x:hidden;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

/* Bubbles */
.bt-msg{
  max-width: min(860px, 92%);
  position: relative;
  padding: 12px 12px 10px 12px;
  line-height: 1.45;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.bt-msg .bt-body{ white-space: pre-wrap; }

.bt-msg.user{
  align-self:flex-end;
  background: var(--bubble-me);
  border:1px solid var(--bubble-me-border);
  border-top-right-radius: 8px;
}
.bt-msg.assistant{
  align-self:flex-start;
  background: var(--bubble-in);
  border:1px solid var(--bubble-in-border);
  border-top-left-radius: 8px;
}
.bt-msg.system{
  align-self:flex-start;
  background: var(--bubble-system);
  border:1px solid var(--bubble-system-border);
  border-top-left-radius: 8px;
}

.bt-msg.user::after{
  content:"";position:absolute;right:-6px;bottom:10px;width:12px;height:12px;
  background: var(--bubble-me);
  border-right:1px solid var(--bubble-me-border);
  border-bottom:1px solid var(--bubble-me-border);
  transform: rotate(45deg);
  border-bottom-right-radius:3px;
}
.bt-msg.assistant::before,
.bt-msg.system::before{
  content:"";position:absolute;left:-6px;bottom:10px;width:12px;height:12px;
  transform: rotate(-45deg);
  border-bottom-left-radius:3px;
}
.bt-msg.assistant::before{
  background: var(--bubble-in);
  border-left:1px solid var(--bubble-in-border);
  border-bottom:1px solid var(--bubble-in-border);
}
.bt-msg.system::before{
  background: var(--bubble-system);
  border-left:1px solid var(--bubble-system-border);
  border-bottom:1px solid var(--bubble-system-border);
}

.bt-meta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  opacity: .92;
  align-items:center;
}

.bt-word{ padding: 0 1px; border-radius: 6px; }
.bt-word.on{ background: var(--hl-bg); }
html[data-theme="light"] .bt-word.on{ background: var(--hl-bg-light); }

/* Composer */
.bt-composer{
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--composer-bg);
  padding: 12px;
  backdrop-filter: blur(12px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Barra estilo ChatGPT */
.bt-composerbar{
  display:flex;
  align-items:flex-end; /* textarea crece hacia arriba */
  gap:10px;
  border:1px solid var(--composer-pill-border);
  background:var(--composer-pill-bg);
  border-radius: 18px;
  padding: 10px 10px;
  max-width:100%;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* =========================
   Recording UI (ChatGPT-like)
   ========================= */
.bt-rec{
  display:none;
  flex:1 1 auto;
  min-width:0;
  align-items:center;
  gap:10px;
  padding: 8px 6px;
}
.bt-rec-track{
  position:relative;
  flex:1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: rgba(147,164,217,.18);
  overflow:hidden;
}
.bt-rec-track::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(147,164,217,.10), rgba(147,164,217,.24), rgba(147,164,217,.10));
  transform: translateX(-40%);
  animation: btRecSweep 1.1s linear infinite;
  opacity: .9;
}.bt-rec-track::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: calc(var(--bt-rec-level, 0) * 100%);
  background: rgba(147,164,217,.45);
  border-radius: 999px;
  transition: width 120ms linear, opacity 120ms linear;
  opacity: calc(.25 + (var(--bt-rec-level, 0) * .75));
  pointer-events:none;
}
.bt-rec-head{
  position:absolute;
  top:50%;
  left:0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(calc(1 + (var(--bt-rec-level, 0) * 0.7)));
  background: rgba(147,164,217,.95);
  box-shadow: 0 0 calc(10px + (var(--bt-rec-level, 0) * 28px)) rgba(147,164,217,.55);
}
.bt-rec-time{
  flex:0 0 auto;
  font-size: 12px;
  opacity: .75;
  font-family: var(--mono);
}

@keyframes btRecSweep{
  0%{ transform: translateX(-55%); }
  100%{ transform: translateX(55%); }
}

/* Recording mode layout */
.bt-composerbar.is-recording .bt-input{ display:none; }
.bt-composerbar.is-recording #btRec{ display:flex; }
.bt-composerbar.is-recording #btnMic{ order:0; }
.bt-composerbar.is-recording #btRec{ order:1; }
.bt-composerbar.is-recording #btnSend{ order:2; }

/* ✅ textarea tipo ChatGPT */
.bt-composerbar .bt-input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-family: var(--mono);
  font-size: 15px;

  resize: none;
  width: 100%;
  min-height: 22px;
  max-height: 140px;
  overflow-y: auto;

  padding: 8px 6px;
  line-height: 1.35;
}

/* scrollbar discreta */
.bt-composerbar .bt-input::-webkit-scrollbar{ width: 8px; }
.bt-composerbar .bt-input::-webkit-scrollbar-thumb{
  background: rgba(147,164,217,.28);
  border-radius: 999px;
}
html[data-theme="light"] .bt-composerbar .bt-input::-webkit-scrollbar-thumb{
  background: rgba(11,16,32,.20);
}

/* Botones */
.bt-iconbtn{
  flex:0 0 auto;
  width:42px;height:42px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--composer-btn-border);
  background:var(--composer-btn-bg);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
}
.bt-iconbtn:hover{filter:brightness(1.08);}
.bt-iconbtn:disabled{opacity:.55;cursor:not-allowed;}

@media (max-width: 576px){
  .bt-composer{ padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bt-messages{ padding: 12px; }
  .bt-msg{ max-width: 94%; }
  .bt-iconbtn{ width: 40px; height: 40px; }
}

/* ✅ Quitar la puntita / cola de burbuja */
.bt-msg.user::after,
.bt-msg.assistant::before,
.bt-msg.system::before{
  display: none !important;
  content: none !important;
}

.md .md-ol, .md .md-ul { margin: 6px 0 8px; padding-left: 20px; }
.md .md-ol li, .md .md-ul li { margin: 4px 0; }
.md .md-ol{ list-style-type: decimal; }
.md .md-ul{ list-style-type: disc; }

/* === assets/css/cards.css === */
/* =====================================================
   card.css — Tarjeta de acceso (QR / código)
   - Estilo credit card premium
   - QR glass / secure
   - Footer de acciones
   - 100% responsive
   - ✅ Watermark + ✅ Badge SECURE
   ===================================================== */

.sa-card-wrap{
  max-width: 860px;
  width: 100%;
  display:flex;
  justify-content:center;
}

/* =========================
   Card shell
   ========================= */
.sa-card{
  position: relative;
  width: min(560px, 96%);
  aspect-ratio: var(--cc-aspect, 1.586);
  border-radius: var(--cc-radius, 28px);
  padding: var(--cc-pad, 18px);
  overflow:hidden;

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(74,163,255,.08);

  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(800px 520px at 85% 30%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.74));

  color: rgba(255,255,255,.90);
  transform: translateZ(0);
}

/* Light theme */
html[data-theme="light"] .sa-card{
  border: 1px solid rgba(18,24,38,.12);
  box-shadow:
    0 18px 55px rgba(11,16,32,.10),
    0 0 0 1px rgba(43,108,255,.06);

  background:
    radial-gradient(900px 520px at 18% 12%, rgba(43,108,255,.10), transparent 62%),
    radial-gradient(800px 520px at 85% 30%, rgba(74,163,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));

  color: rgba(11,16,32,.88);
}

/* =========================
   Animated highlight
   ========================= */
.sa-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(74,163,255,.14), transparent 55%),
    radial-gradient(700px 460px at 100% 30%, rgba(56,211,159,.08), transparent 60%),
    linear-gradient(120deg,
      transparent 35%,
      rgba(255,255,255,.06) 45%,
      rgba(255,255,255,.10) 50%,
      rgba(255,255,255,.06) 55%,
      transparent 65%
    );
  opacity:.65;
  mix-blend-mode: screen;
  pointer-events:none;
  transform: translateX(-35%);
  animation: saCardSweep 7.5s linear infinite;
}
@keyframes saCardSweep{
  0%   { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}
html[data-theme="light"] .sa-card::before{
  opacity:.35;
  mix-blend-mode: normal;
}

/* =========================
   Glow overlay
   ========================= */
.sa-card__glow{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 18% 0%, rgba(74,163,255,.22), transparent 60%),
    radial-gradient(520px 260px at 92% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 380px at 50% 120%, rgba(56,211,159,.10), transparent 65%);
  pointer-events:none;
  opacity:.95;
  mix-blend-mode: screen;
}
html[data-theme="light"] .sa-card__glow{
  opacity:.55;
  mix-blend-mode: normal;
}

/* =========================
   Main panel
   ========================= */
.sa-number{
  --qr-size: clamp(96px, 22vw, 140px);
  --qr-pad: 12px;
  --footer-safe: 64px;

  position: relative;
  margin-top: 4px;
  padding: 14px;
  height: 100%;

  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);

  display:flex;
  flex-direction: column;
  gap: 10px;

  padding-right: calc(var(--qr-size) + (var(--qr-pad) * 2) + 6px);
  padding-bottom: var(--footer-safe);
}
html[data-theme="light"] .sa-number{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

/* =========================
   ✅ Watermark susurro.ai
   ========================= */
.sa-number::after{
  content:"susurro.ai";
  position:absolute;
  left: 14px;
  top: 14px;

  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: 1.6px;
  font-size: 11px;

  opacity: .22;
  text-transform: lowercase;
  pointer-events:none;
  user-select:none;

  background: linear-gradient(90deg, rgba(74,163,255,.95), rgba(56,211,159,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .sa-number::after{
  opacity: .18;
  background: linear-gradient(90deg, rgba(43,108,255,.95), rgba(74,163,255,.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   Secure chip
   ========================= */
.sa-secchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .6px;
  opacity: .94;
}
.sa-secchip i{ font-size: 16px; }
.sa-secchip__dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.30);
}

/* =========================
   Code row
   ========================= */
.sa-number__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.sa-number__left{
  min-width:0;
  flex: 1 1 auto;
}
.sa-number__label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  opacity:.78;
  text-transform: uppercase;
}
.sa-number__value{
  margin-top: 6px;
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: 2.4px;
  font-size: clamp(14px, 2.2vw, 16px);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* =========================
   Footer actions
   ========================= */
.sa-actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.sa-actions--inline{
  position:absolute;
  left: 14px;
  bottom: 14px;
  right: calc(var(--qr-size) + (var(--qr-pad) * 2) + 6px);

  height: 48px;
  display:flex;
  align-items:center;
  padding: 8px 10px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .sa-actions--inline{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

.sa-iconbtn{
  width: 40px;
  height: 40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: inherit;
  text-decoration:none;

  transition: transform .08s ease, filter .12s ease;
}
.sa-iconbtn:hover{ filter: brightness(1.06); }
.sa-iconbtn:active{ transform: translateY(1px); }
.sa-iconbtn i{ font-size:18px; }
html[data-theme="light"] .sa-iconbtn{
  border: 1px solid rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
}

/* =========================
   QR PREMIUM (glass / secure)
   ========================= */
.sa-qr-in{
  position:absolute;
  right: var(--qr-pad);
  bottom: var(--qr-pad);

  width: var(--qr-size);
  aspect-ratio: 1 / 1;

  border-radius: 18px;
  padding: 10px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.02)
    );
  backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 42px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.08);

  z-index: 2;
}
html[data-theme="light"] .sa-qr-in{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.90),
      rgba(255,255,255,.78)
    );
  border: 1px solid rgba(18,24,38,.12);
  box-shadow:
    0 14px 32px rgba(11,16,32,.12),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

.sa-qr-in .sa-qr-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* ✅ Badge SECURE sobre el QR */
.sa-qr-in::after{
  content:"SECURE";
  position:absolute;
  top: 8px;
  right: 8px;

  font-family: var(--mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;

  padding: 4px 7px;
  border-radius: 999px;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);

  backdrop-filter: blur(10px);
  opacity: .92;
}
html[data-theme="light"] .sa-qr-in::after{
  background: rgba(18,24,38,.08);
  border: 1px solid rgba(18,24,38,.12);
  color: rgba(11,16,32,.78);
}

/* Labels ocultos para look pro */
.sa-qr-in__label{ display:none; }

/* =========================
   Motion reduce
   ========================= */
@media (prefers-reduced-motion: reduce){
  .sa-card::before{ animation:none; }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 768px){
  .sa-number{
    --qr-size: clamp(92px, 26vw, 128px);
  }
}
@media (max-width: 576px){
  .sa-number{
    --qr-size: clamp(88px, 28vw, 120px);
    --qr-pad: 10px;
  }
}
@media (max-width: 420px){
  .sa-number{
    --qr-size: clamp(84px, 32vw, 112px);
  }
}
/* =====================================================
   POLISH PRO — spacing + warn padding + code higher
   (pegar al final de card.css)
   ===================================================== */

/* 1) Código un poco más arriba / más aire visual */
.sa-number__row{
  margin-top: 2px;
  margin-bottom: 18px;   /* 👈 separa del área del QR */
  align-items: flex-start;
}

/* 2) Evita que el texto del código “toque” el QR en pantallas pequeñas */
.sa-number__left{
  padding-right: 6px;
}

/* 3) Texto final (warn) con padding arriba/abajo + estilo pro */
.sa-qr-in__warn{
  margin-top: 12px;
  padding: 10px 14px;        /* ✅ padding top/bottom */
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);

  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.35;
  opacity: .80;
  text-align: center;

  /* ✅ si el warn está cerca del QR, que no quede “debajo” visualmente */
  max-width: 100%;
  box-sizing: border-box;
}

html[data-theme="light"] .sa-qr-in__warn{
  border: 1px solid rgba(18,24,38,.10);
  background: rgba(18,24,38,.03);
}

/* 4) En móviles: aún más separación (por si el código se hace grande) */
@media (max-width: 576px){
  .sa-number__row{
    margin-bottom: 22px;
  }
  .sa-qr-in__warn{
    padding: 10px 12px;
    margin-top: 10px;
  }
}
/* === Level 2 FAQ Cards (Premium) === */
.bt-faq-card{
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  padding:12px;
}
html[data-theme="dark"] .bt-faq-card{
  border-color: rgba(255,255,255,.14);
  background: rgba(20,20,20,.6);
}
.bt-faq-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:10px;
}
.bt-faq-title{
  font-weight:800;
  font-size:13px;
  opacity:.95;
}
.bt-faq-nav{
  display:flex; flex-wrap:wrap; gap:6px;
}
.bt-faq-pill{
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(0,0,0,.12);
  background: transparent;
  color: inherit;
  cursor:pointer;
}
html[data-theme="dark"] .bt-faq-pill{ border-color: rgba(255,255,255,.18); }
.bt-faq-pill[aria-selected="true"]{
  background: rgba(0,0,0,.06);
}
html[data-theme="dark"] .bt-faq-pill[aria-selected="true"]{
  background: rgba(255,255,255,.08);
}
.bt-faq-body{
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:10px;
}
html[data-theme="dark"] .bt-faq-body{ border-top-color: rgba(255,255,255,.10); }
.bt-faq-section{ display:none; }
.bt-faq-section.active{ display:block; }

/* === Level 2.5 FAQ Enhancements === */
.bt-faq-actions{ display:flex; gap:8px; margin-left:auto; }
.bt-faq-action{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid rgba(0,0,0,.12); background: transparent;
  cursor:pointer; font-size:14px;
}
html[data-theme="dark"] .bt-faq-action{ border-color: rgba(255,255,255,.18); }
.bt-faq-action:hover{ opacity:.9; }
.bt-faq-pill{ display:inline-flex; align-items:center; gap:6px; }
.bt-faq-ico{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
.bt-faq-section{ animation: btFaqFade .14s ease-out; }
@keyframes btFaqFade { from{opacity:.0; transform: translateY(2px);} to{opacity:1; transform:none;} }

/* === Level 2.8 FAQ Pro Enhancements === */
.bt-faq-top{ display:flex; align-items:center; gap:10px; }
.bt-faq-search{
  flex:1;
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:8px 10px;
  background: rgba(255,255,255,.55);
}
html[data-theme="dark"] .bt-faq-search{
  border-color: rgba(255,255,255,.18);
  background: rgba(20,20,20,.55);
}
.bt-faq-search input{
  width:100%;
  background: transparent;
  border:0;
  outline:none;
  color: inherit;
  font-size:12px;
}
.bt-faq-pill{
  transition: transform .12s ease-out, background-color .12s ease-out, opacity .12s ease-out;
}
.bt-faq-pill[aria-selected="true"]{ transform: translateY(-1px); }
.bt-faq-pill:hover{ opacity:.92; }
.bt-faq-ico svg{ width:16px; height:16px; display:block; }
.bt-faq-card[data-collapsed="1"] .bt-faq-nav,
.bt-faq-card[data-collapsed="1"] .bt-faq-body{ display:none; }

/* === assets/css/footer.css === */
/* /assets/css/footer.css
   ✅ Remember + status pill footer
   ✅ Lightbox inputs (Topup) dark/light
*/

/* Remember row */
.bt-remember{
  margin-top: 8px;
  display:flex;
  justify-content:flex-start;
}
.bt-remember-label{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  user-select:none;
}
.bt-remember-label input{
  width: 18px;
  height: 18px;
  accent-color: rgba(74,163,255,.9);
}

/* Footer row: status a la derecha */
.bt-remember-row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bt-status-footer{
  margin-left: auto;
  flex: 0 0 auto;
}
#statusText{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
@media (max-width: 420px){
  #statusText{ max-width: 38vw; }
}

/* Lightbox inputs */
.bt-lb-input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(56,189,248,0.35);
  background: rgba(6,10,20,0.55);
  color: var(--text);
  font-family: var(--mono);
  outline:none;
  appearance: none;
  -webkit-appearance: none;
}
.bt-lb-input::placeholder{
  color: rgba(147,164,217,.85);
}
.bt-lb-input:focus{
  border-color: rgba(74,163,255,.65);
  box-shadow: 0 0 0 3px rgba(74,163,255,.14);
}
.bt-lb-input--muted{
  border-color: rgba(56,189,248,0.20);
  background: rgba(6,10,20,0.35);
  color: var(--muted);
}

html[data-theme="light"] .bt-lb-input{
  border-color: rgba(18,24,38,.14);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(11,16,32,.06);
}
html[data-theme="light"] .bt-lb-input::placeholder{
  color: rgba(11,16,32,.45);
}
html[data-theme="light"] .bt-lb-input:focus{
  border-color: rgba(43,108,255,.45);
  box-shadow: 0 0 0 3px rgba(43,108,255,.12);
}
html[data-theme="light"] .bt-lb-input--muted{
  border-color: rgba(18,24,38,.12);
  background: rgba(18,24,38,.04);
  color: rgba(11,16,32,.55);
}


/* Version stamp (debug only) */
.bt-version-stamp{
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 999999;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  display: none;
}
html[data-theme="dark"] .bt-version-stamp{
  border-color: rgba(255,255,255,.18);
  background: rgba(20,20,20,.78);
  color: #eee;
}


/* TTS listen button */
.bt-tts-btn{
  margin-left: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1;
  font-size: 12px;
  cursor: pointer;
}
.bt-tts-btn:hover{ background: rgba(255,255,255,.10); }




/* === BT_BASEC_LAYOUT (body no scroll, chat scroll, keyboard-safe) === */
:root{
  --bt-header-h: 64px;
  --bt-composer-h: 72px;
  --bt-keyboard-offset: 0px; /* JS sets */
}

html, body{
  height: 100%;
  overflow-x: hidden;
}

/* CLAVE: body no scrollea */
body{
  overflow: hidden;
}

/* Fixed header */
#btHeader, .bt-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1035;
}

/* Fixed composer/footer (we move it up with keyboard offset) */
#composerBar, #chatComposer, .bt-composer, .chat-composer{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  transform: translateY(calc(-1 * var(--bt-keyboard-offset)));
  z-index: 1035;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Chat container scrolls inside viewport and always leaves room for composer */
#chatWrap, #chatContainer, .bt-chat-wrap, .chat-wrap{
  position: absolute;
  top: var(--bt-header-h);
  left: 0; right: 0;
  bottom: calc(var(--bt-composer-h) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 18px 12px;
  scroll-padding-bottom: calc(var(--bt-composer-h) + env(safe-area-inset-bottom) + 24px);
}

/* Prevent bubbles from causing horizontal scroll */
.msg, .chat-msg, .bubble, .message{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* =================================================================== */


/* === BT_LAYOUT_V16 (bt-chat flex, no overlaps, keyboard-safe) ===== */
html, body { height: 100%; overflow-x: hidden; }
body { overflow: hidden; }

/* Fixed header */
#btHeader.bt-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1035;
}

/* Fixed composer with keyboard offset */
.bt-composer{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 1035;
  transform: translateY(calc(-1 * var(--bt-keyboard-offset, 0px)));
  padding-bottom: env(safe-area-inset-bottom);
}

/* Main chat frame occupies the rest */
.bt-chat{
  position: fixed;
  top: var(--bt-header-h, 64px);
  left: 0; right: 0;
  bottom: calc(var(--bt-composer-h, 72px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Messages list is the only scrollable area */
.bt-messages, #messages{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 18px 12px;
  scroll-padding-bottom: calc(var(--bt-composer-h,72px) + env(safe-area-inset-bottom) + 28px);
}

/* Prevent horizontal scroll */
.bt-messages *, #messages *{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* ================================================================== */