/* /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;}

/* === Level 1 Help Buttons === */
.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;
}

/* === Level 3.6 Unified Status Bar (Verification + Remember Device) === */
.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;
}

/* === Level 7 Sales CTA === */
.bt-cta{
  display:flex; gap:10px; margin:12px;
}
.bt-cta .bt-btn{ flex:1; }