:root{
  /* Paleta 128bit */
  --mc-primary:#FFBB00;
  --mc-bg:#0D0E10;
  --mc-fg:#F3F4F6;
  --mc-bot:#17181B;
  --mc-user:#FFBB00;
  --mc-user-fg:#111111;
  --mc-shadow:0 18px 50px rgba(0,0,0,.45);
  --mc-border:rgba(255,255,255,.08);
  --mc-radius:18px;
  --vh:1vh;

  /* Teaser (globito) */
  --mc-attn:#FFBB00;
  --mc-attn-bg:rgba(255,187,0,.10);
}
*{ box-sizing:border-box; }

/* ---------- Botón flotante (launcher) ---------- */
.mc-launcher{
  position:fixed; inset:auto 24px 24px auto; z-index:2147483647;
  width:66px; height:66px; border-radius:999px; border:1px solid rgba(255,255,255,.06);
  background:#101113; color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--mc-primary) 18%, transparent);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  backdrop-filter: blur(6px);
  animation:none!important;
}
.mc-launcher:hover{ transform:translateY(-2px); filter: brightness(1.06); }
.mc-launcher svg{ width:30px; height:30px; stroke:#fff; }
.mc-launcher::before{
  content:""; position:absolute; inset:-10px; border-radius:999px; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--mc-primary) 24%, transparent), transparent 70%);
  filter:blur(8px);
}

/* Badge del launcher (amarillo) */
.mc-badge{
  position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--mc-primary); color:#111; border:1px solid rgba(0,0,0,.25);
  font:700 12px/22px system-ui, -apple-system, Segoe UI, Roboto;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.mc-launcher.has-badge .mc-badge{ display:inline-flex; animation:mc-pop .25s ease-out; }
@keyframes mc-pop{ 0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1} }

/* ---------- Panel ---------- */
.mc-panel{
  position:fixed; inset:auto 24px calc(90px + env(safe-area-inset-bottom)) auto; z-index:2147483647;
  width:min(380px, 92vw); height:70vh; color:var(--mc-fg);
  border-radius:var(--mc-radius);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  background: linear-gradient(180deg, rgba(255,187,0,.04), rgba(255,187,0,.02) 35%, rgba(0,0,0,.0)), var(--mc-bg);
  border:1px solid var(--mc-border);
  box-shadow: var(--mc-shadow);
  backdrop-filter: blur(8px);
}
.mc-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.mc-header{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--mc-border);
  background: linear-gradient(180deg, rgba(255,187,0,.07), rgba(255,187,0,.02));
}
.mc-header img{ width:28px; height:28px; object-fit:contain; border-radius:8px; }
.mc-header strong{ font-weight:800; font-size:15px; letter-spacing:.2px; }
.mc-close{ margin-left:auto; background:transparent; border:0; font-size:20px; cursor:pointer; color:#b9b9b9; }

.mc-list{
  flex:1; overflow:auto; padding:14px;
  background:linear-gradient(180deg, rgba(255,187,0,.02), rgba(255,187,0,.00));
  -webkit-overflow-scrolling:touch;
}

.mc-bubble{
  max-width:85%; margin:6px 0; padding:10px 12px; border-radius:14px; line-height:1.35; font-size:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.14); word-wrap:break-word; white-space:pre-wrap; border:1px solid var(--mc-border);
}
.mc-bot{ background:var(--mc-bot); color:#E6E8EB; border-top-left-radius:4px; }
.mc-user{ background:var(--mc-user); color:var(--mc-user-fg); border-top-right-radius:4px; margin-left:auto; text-shadow: none; }

.mc-footer{
  border-top:1px solid var(--mc-border); padding:10px; background:rgba(0,0,0,.25);
  display:grid; grid-template-columns:1fr auto; gap:8px;
}
.mc-input{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--mc-border); outline:none; font-size:16px;
  background:#141518; color:var(--mc-fg);
}
.mc-input:focus{ box-shadow:0 0 0 2px rgba(255,187,0,.35); border-color:rgba(255,187,0,.45); }
.mc-send{
  background:var(--mc-primary); color:#111; border:0; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:800;
  box-shadow:0 10px 18px rgba(255,187,0,.15);
}
.mc-send:hover{ filter:brightness(1.05); }

.mc-typing{ display:inline-block; margin-left:4px; }
.mc-typing .dot{ width:6px; height:6px; display:inline-block; border-radius:999px; background:#c9d0da; margin:0 2px; animation:blink 1s infinite cubic-bezier(.2,.68,.18,1); }
.mc-typing .dot:nth-child(2){ animation-delay:.15s; }
.mc-typing .dot:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{opacity:.2} 40%{opacity:1} }

/* Chips */
.mc-suggestions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.mc-suggestions button{
  background:rgba(255,187,0,.12);
  border:1px solid rgba(255,187,0,.35);
  color:#FFD559;
  padding:8px 12px; border-radius:12px; cursor:pointer; font-size:13px; font-weight:700;
  opacity:0; transform:translateY(6px) scale(.98);
}
.mc-suggestions button.chip-in{ animation:chipIn .32s cubic-bezier(.22,.61,.36,1) forwards; }
.mc-suggestions button:hover{ filter:brightness(1.06); }
@keyframes chipIn{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:translateY(0)  scale(1); } }

/* Botón dentro del chat */
.mc-btn{ display:inline-block; padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none; border:0; cursor:pointer; }
.mc-btn-wa{ background:#25D366; color:#fff; }
.mc-btn-wa:hover{ filter:brightness(0.95); }

/* ===== TEASER (globito animado) ===== */
.mc-teaser{
  position:fixed; right:24px; bottom:110px; z-index:2147483647;
  max-width:260px; background:#fff; color:#111; /* BLANCO + texto oscuro */
  border:1px solid #e5e7eb; border-radius:14px; padding:10px 12px;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  display:none; gap:8px; align-items:center; cursor:pointer; user-select:none;
  backdrop-filter: blur(6px);
}
.mc-teaser.show{ display:flex; animation:popIn .5s cubic-bezier(.22,.61,.36,1), float 3.6s ease-in-out .5s infinite; }
.mc-teaser::after{
  content:""; position:absolute; right:18px; bottom:-10px; width:0; height:0;
  border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #fff; /* piquito blanco */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.22));
}
.mc-teaser .ico{
  width:22px; height:22px; display:inline-grid; place-items:center; border-radius:6px;
  background:var(--mc-attn); color:#111; font-size:13px; font-weight:900;
}
.mc-teaser strong{ color:#111; }
.mc-teaser .hl{ color:var(--mc-primary); font-weight:800; }
.mc-teaser span{ font-size:14px; line-height:1.25 }

@keyframes popIn{ from{opacity:0;transform:translateY(8px)scale(.96)} to{opacity:1;transform:translateY(0)scale(1)} }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Créditos */
.mc-credit{
  text-align:center; padding:8px 10px; font-size:12px; color:#9aa3af; background:transparent;
  border-top:1px solid var(--mc-border);
}
.mc-credit a{ color:#FFD559; font-weight:800; text-decoration:none; }
.mc-credit a:hover{ text-decoration:underline; }

/* Tablet */
@media (max-width:1024px){
  .mc-panel{ height:min(75vh, calc(var(--vh) * 100 - 32px)); }
}

/* Mobile */
@media (max-width:640px){
  html.mc-lock, html.mc-lock body{ height:100%; overflow:hidden; }
  .mc-launcher{ inset:auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto; }
  .mc-panel{
    left:0; right:0; bottom:0; top:auto; width:100vw; max-width:100%;
    height:calc(var(--vh) * 100 - env(safe-area-inset-bottom));
    border-radius:12px 12px 0 0; inset:auto 0 0 0;
  }
  .mc-teaser{
    right:max(16px, env(safe-area-inset-right));
    bottom:calc(max(16px, env(safe-area-inset-bottom)) + 86px);
  }
  .mc-credit{ padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}