/* ==========================================================================
   MedPark assistant widget.
   Brand colours only: turquoise #12C0C6, navy #0A2A4A, white.
   Sits above the existing floating WhatsApp button rather than replacing it,
   so nothing that already works is disturbed.
   Added 2026-09-02.
   ========================================================================== */
.mpc,
.mpc *{box-sizing:border-box}

.mpc{
  --t:#12C0C6; --t-d:#0E9AA0; --t-l:#E7FAFB;
  --n:#0A2A4A; --n-2:#3B546E; --n-3:#7A8FA4;
  --line:#E2EAF1; --wa:#128C7E; --urgent:#C0392B;
  font-family:'Helvetica Neue',Helvetica,Arial,'Segoe UI',system-ui,sans-serif;
}

/* ---------- launcher ------------------------------------------------------ */
.mpc-launch{
  position:fixed; right:20px; bottom:86px; z-index:9998;
  display:flex; align-items:center; gap:10px;
  background:var(--n); color:#fff; border:0;
  padding:13px 19px; border-radius:50px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700;
  box-shadow:0 8px 25px rgba(10,42,74,.28);
  transition:transform .18s ease, background .18s ease;
}
.mpc-launch:hover{background:#0F3A63; transform:translateY(-2px)}
.mpc-launch:focus-visible{outline:3px solid var(--t); outline-offset:3px}
.mpc-launch svg{width:21px; height:21px; flex:0 0 21px}
.mpc-launch.is-hidden{display:none}
.mpc-dot{
  position:absolute; top:-3px; right:-3px; width:11px; height:11px;
  background:var(--t); border:2px solid #fff; border-radius:50%;
}

/* ---------- panel --------------------------------------------------------- */
.mpc-panel{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  width:380px; max-width:calc(100vw - 32px);
  height:min(600px, calc(100vh - 40px));
  background:#fff; border-radius:18px; overflow:hidden;
  display:none; flex-direction:column;
  box-shadow:0 24px 60px rgba(10,42,74,.3);
}
.mpc-panel.is-open{display:flex}

.mpc-head{
  background:var(--n); color:#fff; padding:16px 18px;
  display:flex; align-items:center; gap:12px; flex:0 0 auto;
}
.mpc-head__b{flex:1; min-width:0}
.mpc-head strong{display:block; font-size:15.5px; letter-spacing:-.01em}
.mpc-head span{display:block; font-size:12px; color:#8FB3C9; margin-top:2px}
.mpc-avatar{
  width:38px; height:38px; border-radius:50%; flex:0 0 38px;
  background:var(--t); display:grid; place-items:center; color:#04282A; font-weight:800; font-size:15px;
}
.mpc-x{
  background:transparent; border:0; color:#8FB3C9; cursor:pointer;
  width:32px; height:32px; border-radius:8px; font-size:22px; line-height:1; padding:0;
}
.mpc-x:hover{background:rgba(255,255,255,.1); color:#fff}
.mpc-x:focus-visible{outline:2px solid var(--t); outline-offset:2px}

/* ---------- messages ------------------------------------------------------ */
.mpc-log{
  flex:1; overflow-y:auto; padding:18px; background:#F6F9FB;
  display:flex; flex-direction:column; gap:11px;
  overscroll-behavior:contain;
}
.mpc-msg{max-width:85%; padding:11px 14px; border-radius:15px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word}
.mpc-msg--bot{background:#fff; color:var(--n); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start}
.mpc-msg--me{background:var(--t); color:#04282A; border-bottom-right-radius:5px; align-self:flex-end; font-weight:500}

.mpc-urgent{
  background:#FDEEEC; border:1px solid #F3C6C0; border-left:4px solid var(--urgent);
  border-radius:4px 14px 14px 4px; padding:14px 16px; align-self:stretch; max-width:100%;
}
.mpc-urgent strong{display:block; color:var(--urgent); font-size:15px; margin-bottom:5px}
.mpc-urgent p{margin:0; font-size:14px; color:var(--n-2); line-height:1.5}

.mpc-typing{align-self:flex-start; display:flex; gap:4px; padding:13px 15px; background:#fff; border:1px solid var(--line); border-radius:15px; border-bottom-left-radius:5px}
.mpc-typing i{width:7px; height:7px; border-radius:50%; background:var(--n-3); animation:mpc-bounce 1.3s infinite}
.mpc-typing i:nth-child(2){animation-delay:.18s}
.mpc-typing i:nth-child(3){animation-delay:.36s}
@keyframes mpc-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------- choices and actions ------------------------------------------- */
.mpc-opts{display:flex; flex-direction:column; gap:7px; align-self:stretch}
.mpc-opt{
  text-align:left; background:#fff; border:1px solid var(--line); color:var(--n);
  padding:11px 14px; border-radius:11px; font:inherit; font-size:14px; font-weight:600;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.mpc-opt:hover{border-color:var(--t); background:var(--t-l)}
.mpc-opt:focus-visible{outline:2px solid var(--t); outline-offset:2px}
.mpc-opt--primary{background:var(--t); border-color:var(--t); color:#04282A}
.mpc-opt--primary:hover{background:var(--t-d); border-color:var(--t-d); color:#fff}
.mpc-opt--urgent{border-color:#F3C6C0; color:var(--urgent); background:#FDEEEC}
.mpc-opt--urgent:hover{background:var(--urgent); border-color:var(--urgent); color:#fff}
.mpc-opt--wa{border-color:#B7E2D9; color:var(--wa); background:#EAF7F4}
.mpc-opt--wa:hover{background:var(--wa); border-color:var(--wa); color:#fff}

.mpc-act{
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; padding:12px 15px; border-radius:11px;
  font-size:14.5px; font-weight:700; border:1px solid var(--line); color:var(--n); background:#fff;
}
.mpc-act--urgent{background:var(--urgent); border-color:var(--urgent); color:#fff}
.mpc-act--wa{background:var(--wa); border-color:var(--wa); color:#fff}
.mpc-act:hover{filter:brightness(1.06)}

/* ---------- composer ------------------------------------------------------ */
.mpc-foot{flex:0 0 auto; border-top:1px solid var(--line); background:#fff}
.mpc-form{display:flex; gap:8px; padding:12px}
.mpc-form input{
  flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line);
  border-radius:11px; font:inherit; font-size:15px; color:var(--n); background:#F6F9FB;
}
.mpc-form input:focus{outline:0; border-color:var(--t); background:#fff; box-shadow:0 0 0 3px rgba(18,192,198,.15)}
.mpc-form button{
  flex:0 0 auto; background:var(--t); border:0; color:#04282A; width:44px; height:44px;
  border-radius:11px; cursor:pointer; display:grid; place-items:center;
}
.mpc-form button:hover{background:var(--t-d); color:#fff}
.mpc-form button:focus-visible{outline:2px solid var(--n); outline-offset:2px}
.mpc-form button svg{width:19px; height:19px}
.mpc-form.is-hidden{display:none}
.mpc-note{padding:0 14px 11px; margin:0; font-size:11.5px; color:var(--n-3); line-height:1.45}

/* ---------- mobile -------------------------------------------------------- */
@media (max-width:560px){
  .mpc-panel{
    right:0; bottom:0; width:100%; max-width:100%;
    height:100dvh; border-radius:0;
  }
  .mpc-launch{right:16px; bottom:80px; padding:12px 17px; font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .mpc-launch,.mpc-opt,.mpc-typing i{transition:none; animation:none}
}