#aidoc-root{
  --aidoc-teal-dark:color-mix(in srgb, var(--aidoc-teal) 80%, black);
  --aidoc-teal-tint:color-mix(in srgb, var(--aidoc-teal) 7%, #fff);
  --aidoc-cream:#f7f4ee;
  --aidoc-ink:#1c2422;
  --aidoc-line:#e1e8e5;
  --aidoc-muted:#5c6b68;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

#aidoc-launcher{
  position:fixed;bottom:20px;
  width:60px;height:60px;border-radius:50%;
  background:var(--aidoc-teal);color:#fff;border:none;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;z-index:99999;transition:transform .2s ease;
}
#aidoc-launcher:hover{transform:scale(1.06);}
#aidoc-launcher:focus-visible{outline:2px solid var(--aidoc-teal-dark);outline-offset:3px;}

#aidoc-chat{
  position:fixed;bottom:92px;
  width:340px;max-width:92vw;height:520px;max-height:78vh;
  background:var(--aidoc-cream);border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  display:none;flex-direction:column;overflow:hidden;
  z-index:99999;border:1px solid var(--aidoc-line);
}
#aidoc-chat.open{display:flex;}

/* right (default) */
.aidoc-pos-right #aidoc-launcher{right:20px;}
.aidoc-pos-right #aidoc-chat{right:20px;}
/* left */
.aidoc-pos-left #aidoc-launcher{left:20px;}
.aidoc-pos-left #aidoc-chat{left:20px;}

/* Header: subtle gradient derived from the configured primary color — no
   hardcoded hue, no excessive animation. */
#aidoc-head{
  background:linear-gradient(135deg, var(--aidoc-teal), var(--aidoc-teal-dark));
  color:#fff;padding:14px 16px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
#aidoc-head .avatar{
  width:34px;height:34px;border-radius:50%;background:#fff;color:var(--aidoc-teal);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;
}
#aidoc-head .titles{line-height:1.25;flex:1;min-width:0;}
#aidoc-head .titles .t1{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#aidoc-head .titles .t2{font-size:11.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#aidoc-head button{
  background:none;border:none;color:#fff;font-size:18px;cursor:pointer;flex-shrink:0;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;
}
#aidoc-head button:hover{background:rgba(255,255,255,.12);}
#aidoc-head button:focus-visible{outline:2px solid #fff;outline-offset:-2px;}

/* Messages area is the only main scrollable region in the widget. */
#aidoc-msgs{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;display:flex;flex-direction:column;gap:10px;}
.aidoc-bubble{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
.aidoc-bubble.user{background:var(--aidoc-teal);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;}

/* ---------------------------------------------------------------------
 * Bot message cards — compact medical-assistant card presentation.
 * All content inside is inserted via textContent/createElement only (see
 * widget.js); this stylesheet controls appearance only, never content.
 * ------------------------------------------------------------------- */
.aidoc-card{
  align-self:flex-start;
  background:#fff;
  border:1px solid var(--aidoc-line);
  border-left:3px solid var(--aidoc-teal);
  border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:12px 14px;
  max-width:88%;
  color:var(--aidoc-ink);
}
.aidoc-bubble.bot:not(.aidoc-card){
  background:#fff;color:var(--aidoc-ink);border:1px solid var(--aidoc-line);border-bottom-left-radius:4px;align-self:flex-start;
}
.aidoc-card-general{border-left-color:var(--aidoc-line);}
.aidoc-card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.aidoc-card-icon{font-size:16px;line-height:1;flex-shrink:0;}
.aidoc-card-title{font-weight:700;font-size:13.5px;color:var(--aidoc-ink);}
.aidoc-card-body{display:flex;flex-direction:column;gap:6px;max-width:44ch;}
.aidoc-card-para{margin:0;font-size:13.5px;line-height:1.55;}
.aidoc-card-bullet{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.55;}
.aidoc-bullet-dot{width:6px;height:6px;border-radius:50%;background:var(--aidoc-teal);margin-top:7px;flex-shrink:0;}
.aidoc-card-actions{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;}
.aidoc-card-action-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:6px 14px;border-radius:18px;border:1px solid var(--aidoc-teal);
  color:var(--aidoc-teal);background:#fff;text-decoration:none;font-size:12.5px;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.aidoc-card-action-btn:hover{background:var(--aidoc-teal);color:#fff;}
.aidoc-card-action-btn:focus-visible{outline:2px solid var(--aidoc-teal-dark);outline-offset:2px;}

/* Semantic type accents — a subtle color cue, never the only signal (every
   card also has a distinct icon + title, so information is never conveyed
   by color alone). */
.aidoc-card-fees, .aidoc-card-timings, .aidoc-card-location,
.aidoc-card-services, .aidoc-card-booking, .aidoc-card-summary{
  border-left-color:var(--aidoc-teal);
  background:var(--aidoc-teal-tint);
}
.aidoc-card-booking_status{
  border-left-color:#c98a1f;
  background:color-mix(in srgb, #f5a623 8%, #fff);
}
.aidoc-card-booking_status .aidoc-card-title{color:#8a5c10;}
.aidoc-card-medical_safety{
  border-left-color:#5b7fb5;
  background:color-mix(in srgb, #5b7fb5 6%, #fff);
}
.aidoc-card-success{
  border-left-color:#1f9d55;
  background:color-mix(in srgb, #1f9d55 7%, #fff);
}
.aidoc-card-success .aidoc-card-title{color:#166a3a;}
.aidoc-card-error{
  border-left-color:#d33;
  background:#fdf4f4;
}
.aidoc-card-error .aidoc-card-title{color:#a3231f;}

/* Emergency: visually prominent but calm — soft red, accessible contrast,
   NO flashing/blinking animation of any kind. */
.aidoc-card-emergency{
  border:1px solid #f3b8b8;
  border-left:4px solid #c62828;
  background:#fdecec;
  box-shadow:0 2px 10px rgba(198,40,40,.12);
}
.aidoc-card-emergency .aidoc-card-title{color:#8f1f1f;font-weight:800;}
.aidoc-card-emergency .aidoc-card-para,
.aidoc-card-emergency .aidoc-card-bullet{color:#7a1f1c;}

.aidoc-step-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--aidoc-teal-dark);margin-bottom:2px;
}

.aidoc-review-row{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5;padding:3px 0;}
.aidoc-review-icon{font-size:14px;flex-shrink:0;margin-top:1px;}
.aidoc-review-label{font-weight:600;color:var(--aidoc-muted);min-width:96px;flex-shrink:0;}
.aidoc-review-value{color:var(--aidoc-ink);word-break:break-word;}

/* Inline validation warning — replaces itself (never stacks) within a
   booking step; role="alert" is set in JS. */
.aidoc-inline-warning{
  align-self:flex-start;max-width:88%;
  background:#fdf4f4;border:1px solid #f3c9c9;color:#a3231f;
  padding:8px 12px;border-radius:12px;font-size:12.5px;line-height:1.45;
}

/* Quick replies: hidden entirely (not just visually) during an active
   booking — the [hidden] rule below is required because the
   .aidoc-quick-row{display:flex} declaration would otherwise beat the
   browser's default UA style for the hidden attribute. */
.aidoc-quick-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;flex-shrink:0;}
.aidoc-quick-row[hidden]{display:none !important;}
.aidoc-quick-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  background:#fff;border:1px solid var(--aidoc-teal);color:var(--aidoc-teal);
  font-size:12px;padding:6px 12px;border-radius:20px;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .1s ease;
}
.aidoc-quick-btn:hover{background:var(--aidoc-teal);color:#fff;transform:translateY(-1px);}
.aidoc-quick-btn:focus-visible{outline:2px solid var(--aidoc-teal-dark);outline-offset:2px;}
.aidoc-quick-icon{font-size:13px;line-height:1;}

#aidoc-input-row{
  display:flex;gap:8px;padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--aidoc-line);background:#fff;flex-shrink:0;
}
#aidoc-input{flex:1;border:1px solid var(--aidoc-line);border-radius:20px;padding:11px 14px;font-size:13.5px;outline:none;min-width:0;min-height:44px;}
#aidoc-input:focus{border-color:var(--aidoc-teal);}
#aidoc-input:disabled{background:#f2f2f2;opacity:.7;}
#aidoc-send{background:var(--aidoc-teal-dark);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:15px;flex-shrink:0;}
#aidoc-send:disabled{opacity:.6;cursor:default;}
#aidoc-send:focus-visible,#aidoc-input:focus-visible{outline:2px solid var(--aidoc-teal-dark);outline-offset:1px;}

/* Typing / status indicator — animated three-dot pulse, respects
   prefers-reduced-motion (see the query at the bottom of this file). */
#aidoc-typing{
  display:none;align-items:center;gap:7px;padding:0 14px 8px;
  font-size:12px;color:#888;
}
.aidoc-typing-dots{display:inline-flex;gap:3px;}
.aidoc-typing-dots span{
  width:5px;height:5px;border-radius:50%;background:#aab3b1;
  animation:aidoc-typing-bounce 1.2s infinite ease-in-out;
}
.aidoc-typing-dots span:nth-child(2){animation-delay:.15s;}
.aidoc-typing-dots span:nth-child(3){animation-delay:.3s;}
@keyframes aidoc-typing-bounce{
  0%,80%,100%{transform:translateY(0);opacity:.5;}
  40%{transform:translateY(-3px);opacity:1;}
}

/* Booking-flow action controls: Submit Request / Cancel / Start Again /
   Retry. Only ever one active row at a time — enforced in JS (setActionRow). */
.aidoc-action-row{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:92%;}
.aidoc-action-btn{
  min-height:44px;
  background:#fff;border:1px solid var(--aidoc-teal);color:var(--aidoc-teal);
  font-size:12.5px;padding:7px 14px;border-radius:20px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.aidoc-action-btn:hover{background:var(--aidoc-teal);color:#fff;}
.aidoc-action-btn:focus-visible{outline:2px solid var(--aidoc-teal-dark);outline-offset:1px;}
.aidoc-action-btn:disabled{opacity:.55;cursor:default;}
.aidoc-action-primary{background:var(--aidoc-teal);color:#fff;}
.aidoc-action-primary:hover{background:var(--aidoc-teal-dark);}

/* ---------------------------------------------------------------------
 * WhatsApp CTA — strongly scoped to survive global theme link-color CSS
 * (the v1.1.1 live audit found a site theme overriding this to ~1.9:1
 * contrast). #aidoc-root + class + !important beats essentially any generic
 * `a`/`a:link`/`a:visited` theme rule, !important or not, on specificity.
 * ------------------------------------------------------------------- */
#aidoc-root .aidoc-whatsapp-cta,
#aidoc-root .aidoc-whatsapp-cta:link,
#aidoc-root .aidoc-whatsapp-cta:visited{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  color:#fff !important;
  background:#25D366;
  padding:8px 16px;
  border-radius:22px;
  font-size:13px;
  text-decoration:none;
  font-weight:600;
  border:1px solid transparent;
}
#aidoc-root .aidoc-whatsapp-cta:hover,
#aidoc-root .aidoc-whatsapp-cta:active{
  color:#fff !important;
  background:#1ebe5b;
}
#aidoc-root .aidoc-whatsapp-cta:focus-visible{
  color:#fff !important;
  outline:2px solid #0a7d3d;
  outline-offset:2px;
}
#aidoc-root .aidoc-whatsapp-cta.aidoc-disabled{
  color:#fff !important;
  background:#8fd9ae;
  cursor:default;
  pointer-events:none;
}

/* Honeypot — off-screen and unreachable by keyboard/AT for real visitors */
.aidoc-hp{
  position:absolute !important;left:-9999px !important;top:-9999px;
  width:1px;height:1px;opacity:0;overflow:hidden;
}

@media (max-width:480px){
  #aidoc-chat{
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    width:92vw;
  }
  .aidoc-pos-right #aidoc-chat{right:12px;}
  .aidoc-pos-left #aidoc-chat{left:12px;}
  #aidoc-launcher{bottom:calc(16px + env(safe-area-inset-bottom, 0px));}
  .aidoc-pos-right #aidoc-launcher{right:14px;}
  .aidoc-pos-left #aidoc-launcher{left:14px;}

  /* Keep the header compact and single-line at narrow widths instead of
     wrapping the subtitle to 2-3 crowded lines. */
  #aidoc-head{padding:10px 12px;gap:8px;}
  #aidoc-head .avatar{width:30px;height:30px;font-size:13px;}
  #aidoc-head .titles .t1{font-size:13.5px;}
  #aidoc-head .titles .t2{font-size:11px;}
  .aidoc-card{max-width:92%;}
  .aidoc-card-body{max-width:100%;}
}

@media (max-width:340px){
  #aidoc-head .titles .t2{font-size:10px;}
  .aidoc-bubble{font-size:13px;}
}

/* Respect the visitor's OS-level motion preference — disable non-essential
   animation/transition everywhere in the widget. */
@media (prefers-reduced-motion: reduce){
  .aidoc-typing-dots span{animation:none;opacity:.85;}
  #aidoc-launcher{transition:none;}
  #aidoc-launcher:hover{transform:none;}
  .aidoc-quick-btn{transition:none;}
  .aidoc-quick-btn:hover{transform:none;}
  .aidoc-action-btn,.aidoc-card-action-btn{transition:none;}
}