/* Chat de MC digital systems LLC — ventana propia con los estándares visuales del sitio */
.mcx{
  --mcx-navy:#0a2540;
  --mcx-navy-2:#0e3a5e;
  --mcx-blue:#1565c0;
  --mcx-blue-2:#1e9be0;
  --mcx-cyan:#1fc0e8;
  --mcx-green:#8cc63f;
  --mcx-ink:#0b2340;
  --mcx-muted:#66788c;
  --mcx-bg:#f3f8fc;
  --mcx-line:#dfe8f1;
  --mcx-ease:cubic-bezier(.22,.8,.24,1);
  position:fixed;
  right:max(20px,env(safe-area-inset-right,0px));
  bottom:max(20px,env(safe-area-inset-bottom,0px));
  z-index:90;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.mcx *,.mcx *::before,.mcx *::after{box-sizing:border-box}
.mcx button{font:inherit}
.mcx button:focus-visible,.mcx textarea:focus-visible{outline:2px solid var(--mcx-cyan);outline-offset:2px}

/* Botón flotante */
.mcx-launch{position:relative;width:64px;height:64px;padding:0;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#14507e 0%,#0a2540 72%);box-shadow:0 16px 32px -12px rgba(6,22,41,.65),inset 0 0 0 1px rgba(95,214,243,.35);transition:transform .35s var(--mcx-ease),opacity .2s}
.mcx-launch:hover{transform:scale(1.06)}
.mcx-launch img{width:40px;height:40px;transition:opacity .2s,transform .35s var(--mcx-ease)}
.mcx-launch .mcx-ico-x{position:absolute;width:26px;height:26px;color:#fff;opacity:0;transform:rotate(-90deg);transition:opacity .2s,transform .35s var(--mcx-ease)}
.mcx-launch::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(31,192,232,.55);animation:mcx-ring 2.8s ease-out infinite}
.mcx-dot{position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:var(--mcx-green);border:3px solid #fff}
.mcx.open .mcx-launch img{opacity:0;transform:rotate(90deg) scale(.6)}
.mcx.open .mcx-launch .mcx-ico-x{opacity:1;transform:none}
.mcx.open .mcx-launch::after,.mcx.open .mcx-dot{display:none}
@keyframes mcx-ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}

/* Globo de invitación */
.mcx-teaser{position:absolute;right:0;bottom:80px;width:max-content;max-width:250px;padding:12px 36px 12px 15px;border-radius:16px 16px 4px 16px;background:#fff;color:var(--mcx-ink);font-size:14px;font-weight:500;line-height:1.4;box-shadow:0 18px 40px -16px rgba(6,22,41,.45);cursor:pointer;animation:mcx-in .45s var(--mcx-ease) both}
.mcx-teaser-x{position:absolute;top:7px;right:7px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#eef4f9;color:var(--mcx-ink);cursor:pointer;display:grid;place-items:center}
.mcx-teaser-x svg{width:12px;height:12px}
.mcx.open .mcx-teaser{display:none}

/* Ventana */
.mcx-panel{position:absolute;right:0;bottom:82px;width:390px;height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(6,22,41,.55),0 0 0 1px rgba(11,35,64,.06);transform-origin:bottom right;opacity:0;transform:translateY(16px) scale(.97);visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .35s var(--mcx-ease),visibility 0s linear .35s}
.mcx.open .mcx-panel{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}

.mcx-head{display:flex;align-items:center;gap:12px;padding:16px 14px 16px 18px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,rgba(31,192,232,.35) 0%,rgba(31,192,232,0) 55%),linear-gradient(135deg,var(--mcx-navy-2),var(--mcx-navy))}
.mcx-av{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(95,214,243,.35)}
.mcx-av img{width:36px;height:36px}
.mcx-title{display:block;font-family:'Lexend',system-ui,sans-serif;font-weight:600;font-size:15.5px;line-height:1.25}
.mcx-status{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:12px;color:rgba(255,255,255,.78)}
.mcx-status i{width:8px;height:8px;border-radius:50%;background:var(--mcx-green);box-shadow:0 0 0 3px rgba(140,198,63,.25)}
.mcx-x{margin-left:auto;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s}
.mcx-x:hover{background:rgba(255,255,255,.24)}
.mcx-x svg{width:18px;height:18px}

.mcx-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:18px 16px 10px;background:var(--mcx-bg);overscroll-behavior:contain}
.mcx-msg{max-width:85%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;color:var(--mcx-ink);overflow-wrap:anywhere;animation:mcx-in .3s ease both}
.mcx-msg.bot{align-self:flex-start;background:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 10px -5px rgba(11,35,64,.25)}
.mcx-msg.user{align-self:flex-end;color:#fff;background:linear-gradient(120deg,var(--mcx-blue),var(--mcx-blue-2));border-bottom-right-radius:6px}
.mcx-msg a{color:inherit;text-decoration:underline}
.mcx-msg.note{align-self:center;max-width:92%;padding:9px 14px;border-radius:12px;background:#e6f6fc;color:#0e5876;font-size:13px;text-align:center}
.mcx-msg.err{align-self:center;max-width:92%;padding:10px 14px;border:1px solid #f3c7c9;border-radius:12px;background:#fff4f4;color:#8a2a2e;font-size:13px;text-align:center}
.mcx-msg.err button{display:block;margin:6px auto 0;padding:0;border:0;background:none;color:var(--mcx-blue);font-weight:600;text-decoration:underline;cursor:pointer}
@keyframes mcx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.mcx-typing{align-self:flex-start;display:flex;gap:5px;padding:15px 16px;border-radius:16px;border-bottom-left-radius:6px;background:#fff;box-shadow:0 2px 10px -5px rgba(11,35,64,.25)}
.mcx-typing i{width:8px;height:8px;border-radius:50%;background:#9db0c3;animation:mcx-bounce 1.2s infinite}
.mcx-typing i:nth-child(2){animation-delay:.15s}
.mcx-typing i:nth-child(3){animation-delay:.3s}
@keyframes mcx-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.mcx-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 12px;background:var(--mcx-bg)}
.mcx-chips:empty{display:none}
.mcx-chips button{padding:8px 13px;border:1px solid #bfe3f3;border-radius:999px;background:#fff;color:var(--mcx-blue);font-size:13px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s}
.mcx-chips button:hover{background:#eaf7fd;border-color:var(--mcx-cyan)}

.mcx-form{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--mcx-line);background:#fff}
.mcx-form textarea{flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;overflow-y:hidden;padding:11px 14px;border:1px solid var(--mcx-line);border-radius:14px;background:#f8fbfd;font:15px/1.4 'Inter',system-ui,sans-serif;color:var(--mcx-ink);outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.mcx-form textarea:focus{border-color:var(--mcx-cyan);background:#fff;box-shadow:0 0 0 3px rgba(31,192,232,.18)}
.mcx-send{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:pointer;background:linear-gradient(120deg,var(--mcx-blue),var(--mcx-blue-2));box-shadow:0 8px 16px -8px rgba(21,101,192,.7);transition:transform .2s,opacity .2s}
.mcx-send:hover:not(:disabled){transform:scale(1.06)}
.mcx-send:disabled{opacity:.45;cursor:default}
.mcx-mic{flex:none;width:44px;height:44px;padding:0;border:1px solid var(--mcx-line);border-radius:50%;display:grid;place-items:center;color:var(--mcx-blue);background:#fff;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.mcx-mic[hidden]{display:none}
.mcx-mic:hover{border-color:var(--mcx-cyan);background:#eaf7fd}
.mcx-mic svg{width:20px;height:20px}
.mcx-mic.on{color:#fff;background:#e5484d;border-color:#e5484d;animation:mcx-rec 1.4s ease-out infinite}
@keyframes mcx-rec{0%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}100%{box-shadow:0 0 0 12px rgba(229,72,77,0)}}
.mcx-send svg{width:20px;height:20px}
.mcx-note{margin:0;padding:0 12px 10px;background:#fff;font-size:11.5px;color:var(--mcx-muted);text-align:center}

/* Calendario de reservas (agenda.js de chatbot.mcds.ai) con los colores de la marca */
.mcx-agenda{align-self:stretch}
.mcx .agn{border-color:var(--mcx-line);border-radius:16px;font-family:'Inter',system-ui,sans-serif;color:var(--mcx-ink)}
.mcx .agn-day.sel,.mcx .agn-slot.sel{background:var(--mcx-blue);border-color:var(--mcx-blue);color:#fff}
.mcx .agn-nav button,.mcx .agn-slot{color:var(--mcx-blue)}
.mcx .agn-slot:hover,.mcx .agn-nav button:hover{border-color:var(--mcx-cyan)}

/* Celular: el chat ocupa toda la pantalla */
@media (max-width:600px){
  .mcx-panel{position:fixed;inset:0;width:auto;height:auto;border-radius:0;transform:translateY(24px)}
  .mcx-head{padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .mcx-note{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .mcx.open .mcx-launch{opacity:0;pointer-events:none}
  .mcx-form textarea{font-size:16px}
  .mcx-teaser{display:none}
  html.mcx-lock,html.mcx-lock body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .mcx *,.mcx *::before,.mcx *::after{animation:none!important;transition:none!important}
}
