/* Vamo' al Mambo · widget de Compai con el sistema BTCdesign de Bitcoin Dominicana
   Editorial callejero: papel, tinta y un solo acento naranja. Sin esquinas redondeadas ni sombras suaves. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Anton&family=Instrument+Serif:ital@0;1&family=Permanent+Marker&display=swap');

.tiab {
  --naranja: #F7931A;
  --azul: #002E65;
  --papel: #ECE8DF;
  --papel-2: #DAD5CA;
  --tinta: #141414;
  --gris: #6E6C67;
  --f-cartel: 'Anton', 'Montserrat', sans-serif;
  --f-serif: 'Instrument Serif', serif;
  --f-mano: 'Permanent Marker', cursive;
  --f-marca: 'Montserrat', system-ui, sans-serif;

  position: relative;
  isolation: isolate;
  font-family: var(--f-marca);
  color: var(--tinta);
  background: var(--papel);
  border: 3px solid var(--tinta);
  box-shadow: 10px 10px 0 var(--tinta);
  width: 100%;
  max-width: 440px;
  height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.tiab *, .tiab *::before, .tiab *::after { box-sizing: border-box; margin: 0; }

/* Grano analógico encima de todo, sin bloquear clics */
.tiab::after {
  content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: multiply;
}

/* ---------- Cabecera ---------- */
.tiab-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--tinta); color: var(--papel); }
.tiab-avatar { width: 44px; height: 44px; flex: none; background: var(--papel); display: grid; place-items: center; padding: 5px; }
.tiab-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tiab-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 3px; }
.tiab-title { font-family: var(--f-cartel); font-weight: 400; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: .9; text-transform: uppercase; letter-spacing: .01em; }
.tiab-by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #A9A69F; }
.tiab-lang { width: 58px; flex: none; background: transparent; color: var(--papel); border: 2px solid var(--papel); border-radius: 0; padding: 5px 6px; font: 700 11px var(--f-marca); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.tiab-lang option { color: var(--tinta); }

.tiab-body { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* ---------- Pantalla de pago ---------- */
.tiab-paywall, .tiab-invoice { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 26px 26px 22px; }
.tiab-paywall { align-items: flex-start; text-align: left; }
.tiab-invoice { align-items: center; text-align: center; }
.tiab-pitch { font-family: var(--f-serif); font-style: italic; font-size: 25px; line-height: 1.12; }
.tiab-price { font-family: var(--f-cartel); font-size: 46px; line-height: .9; text-transform: uppercase; }
.tiab-price mark { background: var(--naranja); color: var(--tinta); padding: .04em .16em 0; display: inline-block; transform: rotate(-1.5deg); }
.tiab-price small { display: block; font-family: var(--f-mano); font-size: 20px; text-transform: none; margin-top: 10px; }
.tiab-note { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.tiab-wait { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); animation: tiab-pulso 1.6s infinite; }
.tiab-error { font-weight: 700; color: var(--tinta); border-left: 5px solid var(--naranja); padding-left: 10px; }
.tiab-scan { font-family: var(--f-serif); font-style: italic; font-size: 22px; }
.tiab-qr { width: 236px; height: 236px; background: #fff; padding: 8px; border: 3px solid var(--tinta); }
.tiab-amount { font-family: var(--f-cartel); font-size: 34px; line-height: 1; text-transform: uppercase; }
.tiab-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Botones ---------- */
.tiab-btn {
  appearance: none; border: 3px solid var(--tinta); border-radius: 0; background: var(--naranja); color: var(--tinta);
  font: 400 19px var(--f-cartel); text-transform: uppercase; letter-spacing: .03em; padding: 11px 18px 9px;
  cursor: pointer; text-decoration: none; box-shadow: 4px 4px 0 var(--tinta); transition: transform .08s, box-shadow .08s;
}
.tiab-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.tiab-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.tiab-btn:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.tiab-btn:disabled { opacity: .45; cursor: wait; }
.tiab-ghost { background: var(--papel); }
.tiab-demo { background: var(--papel-2); font-size: 15px; }

/* ---------- Chat ---------- */
.tiab-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tiab-msgs { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.tiab-msg { max-width: 88%; padding: 11px 14px; line-height: 1.45; font-size: 15px; overflow-wrap: anywhere; }
.tiab-assistant { align-self: flex-start; background: #F6F3EC; border: 2px solid var(--tinta); border-left-width: 6px; }
.tiab-user { align-self: flex-end; background: var(--tinta); color: var(--papel); font-weight: 500; }
.tiab-li { display: block; padding-left: 16px; position: relative; }
.tiab-li::before { content: "—"; position: absolute; left: 0; color: var(--naranja); font-weight: 800; }
.tiab-typing span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; background: var(--tinta); animation: tiab-pulso 1s infinite; }
.tiab-typing span:nth-child(2) { animation-delay: .2s; }
.tiab-typing span:nth-child(3) { animation-delay: .4s; }

/* Tarjetas de inicio rápido (desaparecen al empezar la conversación) */
.tiab-cards { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 2px solid var(--tinta); background: var(--papel); }
.tiab-cards[hidden] { display: none; }
.tiab-card { appearance: none; border: 2px solid var(--tinta); border-radius: 0; background: #F6F3EC; color: var(--tinta); font: 700 11px var(--f-marca); letter-spacing: .06em; text-transform: uppercase; padding: 7px 9px 6px; cursor: pointer; }
.tiab-card:hover { background: var(--tinta); color: var(--papel); }
.tiab-card:focus-visible { outline: 3px solid var(--naranja); outline-offset: 1px; }
.tiab-card-main { flex-basis: 100%; background: var(--naranja); font: 400 18px var(--f-cartel); letter-spacing: .02em; padding: 9px 12px 7px; text-align: left; box-shadow: 3px 3px 0 var(--tinta); }
.tiab-card-main:hover { background: var(--naranja); color: var(--tinta); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinta); }

.tiab-form { display: flex; gap: 8px; padding: 12px; border-top: 3px solid var(--tinta); background: var(--papel); }
.tiab-input { flex: 1; min-width: 0; border: 2px solid var(--tinta); border-radius: 0; padding: 11px 12px; font: 500 15px var(--f-marca); background: #F6F3EC; color: var(--tinta); }
.tiab-input:focus { outline: 3px solid var(--naranja); outline-offset: 0; }
.tiab-send { padding: 9px 14px 7px; font-size: 17px; }
.tiab-left { padding: 0 12px 10px; background: var(--papel); }

@keyframes tiab-pulso { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .tiab-wait, .tiab-typing span { animation: none; } }
@media (max-width: 480px) {
  .tiab { height: 82vh; min-height: 520px; box-shadow: 6px 6px 0 var(--tinta); }
  .tiab-price { font-size: 40px; }
}

/* ---------- Burbuja flotante (modo por defecto) ---------- */
.tiab-flot {
  --naranja: #F7931A; --papel: #ECE8DF; --tinta: #141414;
  position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.tiab-flot .tiab { width: 400px; max-width: calc(100vw - 32px); height: min(640px, calc(100vh - 48px)); height: min(640px, calc(100dvh - 48px)); box-shadow: 8px 8px 0 var(--tinta); }
.tiab-flot .tiab[hidden], .tiab-launcher[hidden] { display: none; }
.tiab-launcher {
  appearance: none; cursor: pointer; display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--tinta); color: var(--papel); border: 3px solid var(--tinta); border-radius: 0;
  padding: 10px 18px 10px 10px; box-shadow: 6px 6px 0 var(--naranja);
  transition: transform .08s, box-shadow .08s; font-family: 'Montserrat', system-ui, sans-serif;
}
.tiab-launcher:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--naranja); }
.tiab-launcher:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--naranja); }
.tiab-launcher:focus-visible { outline: 3px solid var(--naranja); outline-offset: 4px; }
.tiab-launcher-ico { width: 46px; height: 46px; flex: none; background: var(--papel); display: grid; place-items: center; padding: 5px; position: relative; }
.tiab-launcher-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tiab-launcher-ico::after { content: ""; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; background: var(--naranja); border: 2px solid var(--tinta); }
.tiab-launcher-txt { display: flex; flex-direction: column; gap: 4px; }
.tiab-launcher-txt b { font-family: 'Anton', 'Montserrat', sans-serif; font-weight: 400; font-size: 22px; line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.tiab-launcher-txt small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #BDB9B0; }
.tiab-close { appearance: none; flex: none; width: 34px; height: 34px; border: 2px solid var(--papel); border-radius: 0; background: transparent; color: var(--papel); font: 400 24px/1 'Montserrat', sans-serif; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; }
.tiab-close:hover { background: var(--papel); color: var(--tinta); }
.tiab-close:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

@media (max-width: 600px) {
  .tiab-flot { right: 16px; bottom: 16px; }
  .tiab-launcher { padding: 8px 14px 8px 8px; }
  .tiab-launcher-txt b { font-size: 19px; }
  /* En celular el chat abierto ocupa toda la pantalla */
  .tiab-flot .tiab:not([hidden]) { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; min-height: 0; border: 0; box-shadow: none; }
  html.tiab-abierto, html.tiab-abierto body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .tiab-launcher { transition: none; } }

/* Enlaces en las respuestas de Compai */
.tiab-link { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tiab-link:hover { background: var(--naranja); }
.tiab-wa::before { content: "💬 "; }

/* ---------- Emergencias (🆘, siempre gratis) ---------- */
.tiab-sos-btn { appearance: none; flex: none; width: 34px; height: 34px; border: 2px solid var(--papel); border-radius: 0; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.tiab-sos-btn:hover, .tiab-sos-btn[aria-expanded="true"] { background: var(--papel); }
.tiab-sos-btn:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.tiab-chat[hidden], .tiab-sos[hidden] { display: none; }
.tiab-sos { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.tiab-sos-title { font-family: var(--f-cartel); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; }
.tiab-sos-intro { font-weight: 700; font-size: 15px; line-height: 1.4; border-left: 6px solid var(--naranja); padding-left: 10px; }
.tiab-sos-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tiab-sos-list li { border: 2px solid var(--tinta); background: #F6F3EC; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.tiab-sos-list b { font-size: 15px; }
.tiab-sos-list span { font-size: 13px; line-height: 1.4; }
.tiab-sos-list .tiab-btn { align-self: flex-start; font-size: 15px; padding: 7px 12px 5px; box-shadow: 3px 3px 0 var(--tinta); }
.tiab-sos-back { align-self: flex-start; font-size: 15px; }

/* ---------- Planes y pago dentro del chat ---------- */
.tiab-pago { display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.tiab-pago p { margin: 0; }
.tiab-pago small { font-size: 12px; color: var(--gris); }
.tiab-planes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tiab-plan { appearance: none; cursor: pointer; border: 2px solid var(--tinta); border-radius: 0; background: var(--naranja); color: var(--tinta); font: 400 16px var(--f-cartel); text-transform: uppercase; letter-spacing: .02em; padding: 10px 8px 8px; box-shadow: 3px 3px 0 var(--tinta); }
.tiab-plan:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--tinta); }
.tiab-plan:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.tiab-factura { align-items: center; text-align: center; }
.tiab-factura .tiab-qr { width: 220px; height: 220px; }
.tiab-factura .tiab-btn { font-size: 15px; padding: 8px 12px 6px; }
.tiab-linkbtn { appearance: none; border: 0; background: none; padding: 0; font: 600 12px var(--f-marca); color: var(--tinta); text-decoration: underline; cursor: pointer; }

/* =========================================================
   ESTILO WHATSAPP (con la paleta de Bitcoin Dominicana)
   ========================================================= */
.tiab { border-radius: 14px; }
.tiab-flot .tiab { box-shadow: 0 0 0 3px var(--tinta), 8px 10px 0 var(--tinta); border: 0; }

/* Cabecera: avatar redondo, nombre y estado */
.tiab-head { padding: 10px 10px 10px 12px; gap: 10px; }
.tiab-avatar { border-radius: 50%; width: 42px; height: 42px; }
.tiab-title { font-size: 21px; }
.tiab-by { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #CFCBC3; }
.tiab-by.tiab-escribiendo { color: var(--naranja); font-style: italic; }
.tiab-ico { appearance: none; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.tiab-ico:hover, .tiab-ico[aria-expanded="true"] { background: rgba(236, 232, 223, .18); }
.tiab-ico:focus-visible { outline: 3px solid var(--naranja); outline-offset: 1px; }
.tiab-sos-btn { border: 0; }
.tiab-lang { border-radius: 8px; border-width: 1px; width: 52px; }
.tiab-close { border-radius: 50%; border: 0; width: 32px; height: 32px; }
.tiab-close:hover { background: rgba(236, 232, 223, .18); color: var(--papel); }

/* Fondo de conversación con textura (como el papel tapiz de WhatsApp) */
.tiab-msgs {
  gap: 4px; padding: 12px 12px 16px;
  background-color: #E9E3D7;
  background-image: radial-gradient(rgba(20, 20, 20, .07) 1.2px, transparent 1.4px);
  background-size: 14px 14px;
}
.tiab-dia { align-self: center; margin: 2px 0 8px; padding: 4px 10px; border-radius: 8px; background: #F6F3EC; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); box-shadow: 0 1px 0 rgba(20, 20, 20, .12); }

/* Burbujas con colita, hora y ✓✓ */
.tiab-msg { position: relative; max-width: 84%; padding: 7px 10px 6px; border: 0; border-radius: 10px; box-shadow: 0 1px 0 rgba(20, 20, 20, .14); font-size: 15px; margin-top: 6px; }
.tiab-assistant { background: #FFFFFF; color: var(--tinta); border-top-left-radius: 0; border-left: 0; }
.tiab-user { background: #FFE2B8; color: var(--tinta); font-weight: 400; border-top-right-radius: 0; }
.tiab-assistant::before, .tiab-user::before { content: ""; position: absolute; top: 0; width: 10px; height: 12px; }
.tiab-assistant::before { left: -8px; background: #FFFFFF; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.tiab-user::before { right: -8px; background: #FFE2B8; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tiab-msg + .tiab-msg.tiab-assistant, .tiab-msg + .tiab-msg.tiab-user { margin-top: 3px; }
.tiab-txt { display: inline; }
.tiab-meta { float: right; margin: 6px 0 -2px 10px; font-size: 11px; line-height: 1; color: #8A857C; white-space: nowrap; }
.tiab-ticks { font-style: normal; margin-left: 3px; letter-spacing: -3px; color: #A9A49B; }
.tiab-ticks.tiab-leido { color: var(--naranja); }
.tiab-typing { padding: 10px 12px; }
.tiab-typing span { border-radius: 50%; background: #A9A49B; }
.tiab-pago { background: #FFFFFF; }
.tiab-pago .tiab-meta { display: none; }

/* Respuestas rápidas */
.tiab-cards { background: #E9E3D7; border-top: 0; padding: 4px 12px 10px; }
.tiab-card { border-radius: 16px; border: 1.5px solid var(--tinta); background: #FFFFFF; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; padding: 6px 11px; }
.tiab-card-main { border-radius: 16px; font-size: 17px; text-transform: uppercase; }

/* Barra de escribir: caja redondeada + botón circular */
.tiab-form { background: #E9E3D7; border-top: 0; padding: 8px 10px; align-items: center; }
.tiab-input { border-radius: 22px; border: 0; background: #FFFFFF; padding: 11px 16px; box-shadow: 0 1px 0 rgba(20, 20, 20, .14); }
.tiab-input:focus { outline: 2px solid var(--naranja); }
.tiab-send { appearance: none; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--naranja); color: var(--tinta); display: grid; place-items: center; cursor: pointer; padding: 0 0 0 3px; box-shadow: 2px 2px 0 var(--tinta); }
.tiab-send:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--tinta); }
.tiab-send:disabled { opacity: .5; cursor: wait; }
.tiab-send:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.tiab-left { background: #E9E3D7; padding: 0 12px 8px; }

/* Botón flotante: etiqueta + círculo con globito */
.tiab-launcher { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 10px; align-items: center; }
.tiab-launcher:hover, .tiab-launcher:active { transform: none; box-shadow: none; }
.tiab-launcher-txt { background: var(--tinta); color: var(--papel); padding: 8px 14px; border-radius: 10px; box-shadow: 3px 3px 0 var(--naranja); }
.tiab-launcher-txt b { font-size: 18px; }
.tiab-fab { position: relative; width: 62px; height: 62px; border-radius: 50%; background: var(--naranja); color: var(--tinta); border: 3px solid var(--tinta); display: grid; place-items: center; box-shadow: 4px 4px 0 var(--tinta); transition: transform .12s; }
.tiab-launcher:hover .tiab-fab { transform: scale(1.06) rotate(-4deg); }
.tiab-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: #E10019; color: #fff; font: 800 12px/22px 'Montserrat', sans-serif; text-align: center; border: 2px solid var(--papel); }
.tiab-badge[hidden] { display: none; }

/* Saludo emergente */
.tiab-greet { position: relative; max-width: 240px; background: #FFFFFF; color: var(--tinta); border-radius: 12px 12px 0 12px; padding: 12px 30px 12px 14px; box-shadow: 0 0 0 2px var(--tinta), 4px 4px 0 var(--tinta); animation: tiab-entra .3s ease-out; }
.tiab-greet[hidden] { display: none; }
.tiab-greet p { margin: 0; font: 600 14px/1.35 'Montserrat', sans-serif; cursor: pointer; }
.tiab-greet-x { position: absolute; top: 4px; right: 6px; appearance: none; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--gris); }
@keyframes tiab-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .tiab-launcher-txt { display: none; }
  .tiab-flot .tiab:not([hidden]) { border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .tiab-greet { animation: none; } .tiab-fab { transition: none; } }