:root{
  --mc-primary:#338CDD;
  --mc-bg:#ffffff;
  --mc-fg:#111111;
  --mc-bot:#f6f7fb;
  --mc-user:#338CDD;
  --mc-shadow:0 10px 30px rgba(0,0,0,.18);
  --mc-radius:18px;
  --vh:1vh;
}

*{ box-sizing:border-box; }
body{ font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; }

/* Botón flotante */
.mc-launcher{
  position:fixed; top:auto; right:24px; bottom:24px; left:auto; z-index:2147483647;
  width:64px; height:64px; border-radius:999px; border:0;
  background:var(--mc-primary); color:#fff; box-shadow:var(--mc-shadow);
  display:grid; place-items:center; cursor:pointer; transition:transform .15s ease;
}
.mc-launcher:hover{ transform: translateY(-2px); }

/* Badge */
.mc-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:#f56c73; color:#fff; font-size:12px; font-weight:700;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.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} }

/* Icono (SVG) ocupa todo el botón */
.mc-launcher svg{ width:28px; height:28px; }

/* Panel con animación */
.mc-panel{
  position:fixed; right:24px; bottom:calc(90px + env(safe-area-inset-bottom)); left:auto; top:auto; z-index:2147483647;
  width:min(380px, 92vw); height:70vh; background:var(--mc-bg); color:var(--mc-fg);
  border-radius:var(--mc-radius); box-shadow:var(--mc-shadow);
  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;
}
.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 #eee; background:#fff; }
.mc-header img{ width:28px; height:28px; object-fit:contain; }
.mc-header strong{ font-weight:700; font-size:15px; }
.mc-close{ margin-left:auto; background:transparent; border:0; font-size:20px; cursor:pointer; color:#888; }

.mc-list{ flex:1; overflow:auto; padding:14px; background:linear-gradient(180deg,#fafbff,#fff); -webkit-overflow-scrolling:touch; }
.mc-bubble{ max-width:85%; margin:6px 0; padding:10px 12px; border-radius:14px; line-height:1.3; font-size:14px; box-shadow:0 1px 0 rgba(0,0,0,.04); word-wrap:break-word; white-space:pre-wrap; }
.mc-bot{ background:var(--mc-bot); color:#0f172a; border-top-left-radius:4px; }
.mc-user{ background:var(--mc-user); color:#fff; border-top-right-radius:4px; margin-left:auto; }

.mc-footer{ border-top:1px solid #eee; padding:10px; background:#fff; display:grid; grid-template-columns:1fr auto; gap:8px; }
.mc-input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #e5e7eb; outline:none; font-size:16px; }
.mc-send{ background:var(--mc-primary); color:#fff; border:0; border-radius:12px; padding:10px 14px; cursor:pointer; }

.mc-typing{ display:inline-block; margin-left:4px; }
.mc-typing .dot{ width:6px; height:6px; display:inline-block; border-radius:999px; background:#98a2b3; 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} }

.mc-suggestions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.mc-suggestions button{ background:#fff; border:1px solid #e5e7eb; color:#111; padding:6px 10px; border-radius:999px; cursor:pointer; font-size:12px; }

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

/* Mobile tipo “sheet” */
@media (max-width:640px){
  html.mc-lock, html.mc-lock body{ height:100%; overflow:hidden; }
  .mc-launcher{
    right:max(16px, env(safe-area-inset-right));
    bottom:max(16px, env(safe-area-inset-bottom));
  }
  .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;
  }
}