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

/* =====================================================
 * Susurro — Action Cards (Welcome / Help shortcuts)
 * ===================================================== */
.bt-action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
@media (max-width: 560px){
  .bt-action-grid{ grid-template-columns:1fr; }
}

.bt-action-card{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:inherit;
  border-radius:16px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.bt-action-card:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.18);
}
.bt-action-card:active{ transform:translateY(0px); }

.bt-action-ic{
  width:40px;height:40px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  flex:0 0 auto;
}
.bt-action-ic i{ font-size:18px; opacity:.95; }

.bt-action-body{ flex:1 1 auto; min-width:0; }
.bt-action-title{ font-weight:700; font-size:14px; line-height:1.15; }
.bt-action-sub{ font-size:12px; opacity:.78; margin-top:4px; line-height:1.2; }
.bt-action-go{ opacity:.72; flex:0 0 auto; }

/* Variants (subtle, dark/light friendly) */
.bt-action-card[data-variant="primary"] .bt-action-ic{ background:rgba(13,110,253,.16); }
.bt-action-card[data-variant="info"] .bt-action-ic{ background:rgba(13,202,240,.14); }
.bt-action-card[data-variant="success"] .bt-action-ic{ background:rgba(25,135,84,.16); }
.bt-action-card[data-variant="secondary"] .bt-action-ic{ background:rgba(108,117,125,.16); }
.bt-action-card[data-variant="warning"] .bt-action-ic{ background:rgba(255,193,7,.14); }
.bt-action-card[data-variant="danger"] .bt-action-ic{ background:rgba(220,53,69,.14); }


/* Welcome block above action cards (inside chat) */
.bt-welcome-block{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px 12px;
  margin-bottom: 12px;
}
html[data-theme="light"] .bt-welcome-block{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.bt-welcome-title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.bt-welcome-text{
  font-size: 12px;
  line-height: 1.35;
  opacity: .82;
  margin-top: 4px;
}

/* Pro SaaS chips */
.bt-welcome-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.bt-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  opacity:.9;
}
html[data-theme="light"] .bt-chip{
  border-color: rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}
.bt-chip i{ opacity:.9; }




.bt-infocard-navbtn[data-variant="info"]{
  background: rgba(13,202,240,.10);
  border-color: rgba(13,202,240,.22);
}
.bt-infocard-navbtn[data-variant="success"]{
  background: rgba(25,135,84,.10);
  border-color: rgba(25,135,84,.22);
}
.bt-infocard-navbtn[data-variant="secondary"]{
  background: rgba(108,117,125,.10);
  border-color: rgba(108,117,125,.22);
}
.bt-infocard-navbtn[data-variant="warning"]{
  background: rgba(255,193,7,.10);
  border-color: rgba(255,193,7,.22);
}
.bt-infocard-navbtn[data-variant="danger"]{
  background: rgba(220,53,69,.10);
  border-color: rgba(220,53,69,.22);
}
.bt-infocard-navbtn:hover{
  filter: saturate(1.05);
}


/* =====================================================
   PRO FOOTER NAV (Info Cards)
   ===================================================== */

.bt-infocard-foot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

html[data-theme="light"] .bt-infocard-foot{
  border-top-color: rgba(15,23,42,.12);
}

.bt-infocard-nav{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling: touch;
}

.bt-infocard-navbtn{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  backdrop-filter: blur(8px);
}

html[data-theme="light"] .bt-infocard-navbtn{
  border-color: rgba(15,23,42,.14);
  background: rgba(15,23,42,.06);
}

.bt-infocard-navbtn i{
  font-size: 17px;
  opacity: .95;
}

/* Hover + elevation */
.bt-infocard-navbtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Variant Colors (stronger SaaS style) */

.bt-infocard-navbtn[data-variant="primary"]{
  background: linear-gradient(135deg, rgba(13,110,253,.25), rgba(99,102,241,.25));
  border-color: rgba(13,110,253,.45);
}

.bt-infocard-navbtn[data-variant="info"]{
  background: linear-gradient(135deg, rgba(13,202,240,.25), rgba(34,211,238,.25));
  border-color: rgba(13,202,240,.45);
}

.bt-infocard-navbtn[data-variant="success"]{
  background: linear-gradient(135deg, rgba(25,135,84,.25), rgba(34,197,94,.25));
  border-color: rgba(25,135,84,.45);
}

.bt-infocard-navbtn[data-variant="secondary"]{
  background: linear-gradient(135deg, rgba(108,117,125,.25), rgba(148,163,184,.25));
  border-color: rgba(108,117,125,.45);
}

.bt-infocard-navbtn[data-variant="warning"]{
  background: linear-gradient(135deg, rgba(255,193,7,.25), rgba(250,204,21,.25));
  border-color: rgba(255,193,7,.45);
}

.bt-infocard-navbtn[data-variant="danger"]{
  background: linear-gradient(135deg, rgba(220,53,69,.25), rgba(244,63,94,.25));
  border-color: rgba(220,53,69,.45);
}


/* =====================================================
   ENTERPRISE SaaS polish
   ===================================================== */

/* Stronger typography */
.bt-action-title{ font-weight: 800; letter-spacing: -0.01em; }
.bt-welcome-title{ font-weight: 900; }
.bt-infocard-title{ font-weight: 900; letter-spacing: -0.01em; }
.bt-infocard-secTitle{ font-weight: 900; letter-spacing: -0.01em; }

/* Footer nav: active state + glow ring */
.bt-infocard-navbtn{
  position: relative;
  outline: none;
}
.bt-infocard-navbtn:active{
  transform: translateY(0px) scale(.98);
}
.bt-infocard-navbtn.bt-active{
  box-shadow:
    0 10px 26px rgba(0,0,0,.32),
    0 0 0 2px rgba(255,255,255,.10) inset;
  border-color: rgba(255,255,255,.45);
}
html[data-theme="light"] .bt-infocard-navbtn.bt-active{
  box-shadow:
    0 10px 26px rgba(2,6,23,.16),
    0 0 0 2px rgba(15,23,42,.10) inset;
  border-color: rgba(15,23,42,.28);
}

/* Tooltip (desktop): uses data-label */
.bt-infocard-navbtn::after{
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translate(-50%, 100%);
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .bt-infocard-navbtn::after{
  background: rgba(255,255,255,.75);
  border-color: rgba(15,23,42,.12);
}
@media (hover:hover){
  .bt-infocard-navbtn:hover::after{
    opacity: 1;
    transform: translate(-50%, 90%);
  }
}


/* =====================================================
   AI Response Card (Enterprise)
   ===================================================== */
.bt-aicard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 12px 12px;
}
html[data-theme="light"] .bt-aicard{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
}
.bt-aicard-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom: 10px;
}
.bt-aicard-ic{
  width:38px;height:38px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(34,211,238,.18));
  flex:0 0 auto;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}
html[data-theme="light"] .bt-aicard-ic{
  border-color: rgba(15,23,42,.12);
  box-shadow: 0 10px 25px rgba(2,6,23,.12);
}
.bt-aicard-ic i{ font-size: 17px; opacity:.95; }
.bt-aicard-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 14px;
  line-height: 1.2;
}
.bt-aicard-sub{
  font-size: 12px;
  opacity: .78;
  margin-top: 3px;
  line-height: 1.25;
}
.bt-aicard-body{
  font-size: 13px;
  line-height: 1.55;
  opacity: .95;
}
.bt-aicard-body p{ margin: 0 0 10px 0; }
.bt-aicard-body p:last-child{ margin-bottom: 0; }


/* =====================================================
   USER Message Card (Enterprise)
   ===================================================== */
.bt-usercard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 12px 12px;
}
html[data-theme="light"] .bt-usercard{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}
.bt-usercard-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom: 10px;
}
.bt-usercard-ic{
  width:38px;height:38px;
  border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(13,110,253,.14));
  flex:0 0 auto;
}
html[data-theme="light"] .bt-usercard-ic{
  border-color: rgba(15,23,42,.12);
}
.bt-usercard-ic i{ font-size: 17px; opacity:.95; }
.bt-usercard-title{
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 14px;
  line-height: 1.2;
}
.bt-usercard-sub{
  font-size: 12px;
  opacity: .75;
  margin-top: 3px;
  line-height: 1.25;
}
.bt-usercard-body{
  font-size: 13px;
  line-height: 1.55;
  opacity: .95;
}


/* Thinking indicator inside AI card */
.bt-thinking{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 2px 2px;
}
.bt-thinking .bt-orb-thinking{width:1rem;height:1rem;display:inline-block;border-radius:999px;overflow:hidden;}
.bt-thinking .spinner-border{
  width: 1rem;
  height: 1rem;
  border-width: .18rem;
  opacity: .9;
}
.bt-thinking-txt{
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
  opacity: .88;
}


/* =====================================================
   FOOTER ICON CONTRAST (Dark theme)
   ===================================================== */
html[data-theme="dark"] .bt-infocard-navbtn{
  color: rgba(255,255,255,.96);
}
html[data-theme="dark"] .bt-infocard-navbtn i{
  opacity: 1;
}
html[data-theme="dark"] .bt-infocard-navbtn.bt-active{
  color: rgba(255,255,255,1);
}

/* Fallback when data-theme isn't set */
html:not([data-theme="light"]) .bt-infocard-navbtn{
  color: rgba(255,255,255,.96);
}


/* =====================================================
   MARKDOWN TYPOGRAPHY (AI responses)
   ===================================================== */
.bt-aicard-body .md{
  font-size: 13px;
  line-height: 1.65;
}
.bt-aicard-body .md h1,
.bt-aicard-body .md h2,
.bt-aicard-body .md h3{
  margin: 12px 0 8px 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.bt-aicard-body .md h1{ font-size: 20px; font-weight: 900; }
.bt-aicard-body .md h2{ font-size: 17px; font-weight: 900; }
.bt-aicard-body .md h3{ font-size: 15px; font-weight: 850; }

.bt-aicard-body .md p{ margin: 0 0 10px 0; }

.bt-aicard-body .md ol,
.bt-aicard-body .md ul{
  margin: 8px 0 12px 0;
  padding-left: 20px;
}
.bt-aicard-body .md li{
  margin: 6px 0;
}
.bt-aicard-body .md ol{ list-style-position: outside; }
.bt-aicard-body .md li::marker{
  font-weight: 800;
}
.bt-aicard-body .md strong{ font-weight: 850; }
.bt-aicard-body .md blockquote{
  margin: 10px 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
}
html[data-theme="light"] .bt-aicard-body .md blockquote{
  border-left-color: rgba(15,23,42,.18);
  background: rgba(15,23,42,.04);
}

.bt-infocard-body .md h1,.bt-infocard-body .md h2,.bt-infocard-body .md h3{ margin:10px 0 6px 0; line-height:1.15; }
.bt-infocard-body .md ol,.bt-infocard-body .md ul{ padding-left:20px; margin:8px 0 12px 0; }
.bt-infocard-body .md li{ margin:6px 0; }


/* Thinking 3 dots loader */
.bt-thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.bt-thinking-dots span {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
  animation: bt-bounce 1.4s infinite ease-in-out both;
}

.bt-thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.bt-thinking-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bt-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}


/* Thinking text + dots layout */
.bt-thinking-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bt-thinking-text {
  font-weight: 500;
  opacity: 0.85;
}


/* Integrated Pensando... animation */
.bt-thinking-wrapper {
  display: inline-flex;
  align-items: center;
}

.bt-thinking-text {
  font-weight: 500;
  opacity: 0.9;
}

.bt-thinking-ellipsis {
  display: inline-flex;
  margin-left: 4px;
}

.bt-thinking-ellipsis span {
  width: 4px;
  height: 4px;
  margin-left: 2px;
  background: currentColor;
  border-radius: 50%;
  animation: bt-ellipsis 1.4s infinite ease-in-out both;
}

.bt-thinking-ellipsis span:nth-child(1) { animation-delay: -0.32s; }
.bt-thinking-ellipsis span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bt-ellipsis {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}