/* ---------------------------------------------------------------
   All styles are scoped under .dental-chatbot to avoid clashing
   with the host website theme.
   --------------------------------------------------------------- */

.dental-chatbot {
  --dc-primary: #0077B6;
  --dc-deep: #023E8A;
  --dc-cyan: #48CAE4;
  --dc-white: #FFFFFF;
  --dc-pale: #F0F9FF;
  --dc-text: #1F2937;
  --dc-muted: #5A6B7B;
  --dc-line: #D9EAF6;
  --dc-danger: #D92D20;
  --dc-success: #067647;

  position: fixed !important;
  inset: 0 auto auto 0 !important;
  width: 0 !important;
  height: 0 !important;

  z-index: 2147483647 !important;
  isolation: isolate !important;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dc-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.dental-chatbot *,
.dental-chatbot *::before,
.dental-chatbot *::after{ box-sizing:border-box; }

.dental-chatbot button,
.dental-chatbot input,
.dental-chatbot select,
.dental-chatbot textarea{ font-family:inherit; font-size:inherit; }

/* Visible focus ring everywhere inside the widget */
.dental-chatbot a:focus-visible,
.dental-chatbot button:focus-visible,
.dental-chatbot input:focus-visible,
.dental-chatbot select:focus-visible,
.dental-chatbot textarea:focus-visible{
  outline:3px solid var(--dc-cyan);
  outline-offset:2px;
  border-radius:8px;
}

/* ============================ LAUNCHER ============================ */
.dc-launcher{
  position:fixed;
  right: 0;
  bottom: 200px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 12px 0 0 12px;
  background:linear-gradient(145deg, var(--dc-primary), var(--dc-deep));
  color:#fff;
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 2147483646 !important;
  box-shadow:0 10px 26px rgba(2,62,138,.35);
  transition:transform .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.dc-launcher:hover{ transform:translateX(-3px); box-shadow:0 14px 30px rgba(2,62,138,.45); }
.dc-launcher:active{ transform:translateX(-1px) scale(.96); }

.dc-badge{
  position:absolute;
  top:-2px;
  left:2px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:#EF4444;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:19px;
  text-align:center;
  box-shadow:0 0 0 2px #fff;
  transition:opacity .2s ease, transform .2s ease;
}
.dental-chatbot.dc-has-opened .dc-badge{ opacity:0; transform:scale(.6); pointer-events:none; }

.dc-tooltip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--dc-deep);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
  padding:7px 11px;
  border-radius:9px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  box-shadow:0 6px 18px rgba(2,62,138,.3);
}
.dc-tooltip::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:var(--dc-deep);
}
@media (hover:hover) and (pointer:fine){
  .dc-launcher:hover .dc-tooltip,
  .dc-launcher:focus-visible .dc-tooltip{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}

/* ============================ CHAT WINDOW ============================ */
.dc-window{
  position:fixed;
  right:14px;
  bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  width:380px;
  height:min(580px, calc(100vh - 150px));
  max-height:calc(100vh - 150px);
  display:flex;
  flex-direction:column;
  background:var(--dc-white);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(2,62,138,.28), 0 2px 8px rgba(2,62,138,.10);
  overflow:hidden;
  z-index:999999;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.dc-window.dc-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* Modern viewport units where supported (mobile browser chrome) */
@supports (height: 100dvh){
  .dc-window{
    height:min(580px, calc(100dvh - 150px));
    max-height:calc(100dvh - 150px);
  }
}

/* ============================== HEADER ============================== */
.dc-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 14px 14px 16px;
  background:linear-gradient(135deg, #0077B6 0%, #023E8A 100%);
  color:#fff;
}
.dc-header-icon{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
}
.dc-header-text{ flex:1 1 auto; min-width:0; }
.dc-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.1px;
  line-height:1.25;
  color:#fff;
}
.dc-subtitle{
  margin:2px 0 0;
  font-size:12.5px;
  line-height:1.35;
  color:rgba(255,255,255,.9);
}
.dc-status{
  margin:4px 0 0;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:rgba(255,255,255,.85);
}
.dc-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5EE6A8;
  box-shadow:0 0 0 3px rgba(94,230,168,.25);
  animation:dc-pulse 2.2s ease-in-out infinite;
}
@keyframes dc-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}

.dc-close{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .18s ease;
}
.dc-close:hover{ background:rgba(255,255,255,.28); }

/* ============================ MESSAGE AREA ============================ */
.dc-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 14px 10px;
  background:var(--dc-pale);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#B9D9EE transparent;
}
.dc-body::-webkit-scrollbar{ width:7px; }
.dc-body::-webkit-scrollbar-thumb{ background:#B9D9EE; border-radius:8px; }
.dc-body::-webkit-scrollbar-track{ background:transparent; }

.dc-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-bottom:12px;
}
.dc-row.dc-me{ flex-direction:row-reverse; }

.dc-avatar{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(145deg, var(--dc-cyan), var(--dc-primary));
  color:#fff;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dc-bubble{
  max-width:78%;
  padding:10px 13px;
  border-radius:15px;
  background:#fff;
  border:1px solid var(--dc-line);
  box-shadow:0 2px 7px rgba(2,62,138,.06);
  color:var(--dc-text);
  font-size:14px;
  line-height:1.5;
  white-space:pre-line;
  overflow-wrap:break-word;
  word-wrap:break-word;
}
.dc-me .dc-bubble{
  background:linear-gradient(145deg, var(--dc-primary), var(--dc-deep));
  border-color:transparent;
  color:#fff;
  border-bottom-right-radius:5px;
}
.dc-row:not(.dc-me) .dc-bubble{ border-bottom-left-radius:5px; }

/* Typing indicator */
.dc-typing{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:13px 14px;
}
.dc-typing span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--dc-primary);
  opacity:.35;
  animation:dc-bounce 1.25s infinite ease-in-out;
}
.dc-typing span:nth-child(2){ animation-delay:.16s; }
.dc-typing span:nth-child(3){ animation-delay:.32s; }
@keyframes dc-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.35; }
  40%{ transform:translateY(-4px); opacity:.9; }
}

/* ============================ QUICK REPLIES ============================ */
.dc-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px 36px;
}
.dc-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  border:1.5px solid var(--dc-primary);
  background:#fff;
  color:var(--dc-deep);
  font-size:13.5px;
  font-weight:600;
  line-height:1.2;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.dc-chip i{ font-size:12.5px; }
.dc-chip:hover{
  background:var(--dc-primary);
  border-color:var(--dc-primary);
  color:#fff;
  transform:translateY(-1px);
}
.dc-chip:active{ transform:translateY(0); }

/* ============================ APPOINTMENT FORM ============================ */
.dc-form{
  background:#fff;
  border:1px solid var(--dc-line);
  border-radius:16px;
  padding:15px;
  margin:0 0 14px;
  box-shadow:0 4px 16px rgba(2,62,138,.08);
}
.dc-form-head{ margin-bottom:13px; }
.dc-form-head h3{
  margin:0;
  font-size:15.5px;
  font-weight:700;
  color:var(--dc-deep);
}
.dc-form-head p{
  margin:5px 0 0;
  font-size:12.5px;
  line-height:1.45;
  color:var(--dc-muted);
}

.dc-field{ display:block; margin-bottom:12px; }
.dc-field label,
.dc-label-static{
  display:block;
  margin-bottom:5px;
  font-size:12.5px;
  font-weight:600;
  color:var(--dc-deep);
}
.dc-req{ color:var(--dc-danger); }

.dc-field input,
.dc-field select,
.dc-field textarea{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--dc-line);
  border-radius:10px;
  background:#fff;
  color:var(--dc-text);
  font-size:14px;
  line-height:1.4;
  transition:border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
.dc-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230077B6'%3E%3Cpath d='M4.2 6.2 8 10l3.8-3.8'  stroke='%230077B6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:16px 16px;
  padding-right:34px;
}
.dc-field textarea{ min-height:84px; resize:vertical; }

.dc-field input:focus,
.dc-field select:focus,
.dc-field textarea:focus{
  outline:none;
  border-color:var(--dc-primary);
  box-shadow:0 0 0 3px rgba(72,202,228,.32);
}

.dc-field.dc-invalid input,
.dc-field.dc-invalid select,
.dc-field.dc-invalid textarea{
  border-color:var(--dc-danger);
  box-shadow:0 0 0 3px rgba(217,45,32,.12);
}

.dc-err{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color:var(--dc-danger);
}
.dc-err:empty{ display:none; }

/* Honeypot — hidden from humans, visible to bots */
.dc-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Turnstile area */
.dc-turnstile{ min-height:0; margin-top:2px; }
.dc-turnstile-note{
  display:block;
  margin-top:6px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--dc-muted);
}

.dc-submit{
  width:100%;
  min-height:46px;
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg, var(--dc-primary), var(--dc-deep));
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,119,182,.28);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.dc-submit:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,119,182,.34); }
.dc-submit:disabled{ opacity:.68; cursor:not-allowed; transform:none; }

.dc-form-status{
  margin-top:10px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
}
.dc-form-status:empty{ display:none; }
.dc-form-status.dc-pending{ color:var(--dc-muted); }
.dc-form-status.dc-ok{ color:var(--dc-success); }
.dc-form-status.dc-fail{ color:var(--dc-danger); }

/* ============================== FOOTER ============================== */
.dc-footer{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background:#fff;
  border-top:1px solid var(--dc-line);
}
.dc-fbtn{
  flex:1 1 0;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1.5px solid var(--dc-line);
  border-radius:11px;
  background:var(--dc-pale);
  color:var(--dc-deep);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.dc-fbtn i{ font-size:14px; color:var(--dc-primary); transition:color .18s ease; }
.dc-fbtn:hover{ background:#fff; border-color:var(--dc-primary); }
.dc-fbtn:hover i{ color:var(--dc-deep); }

/* ============================ RESPONSIVE ============================ */
@media (max-width:768px){
  .dc-window{
    width:352px;
    height:min(540px, calc(100vh - 150px));
    max-height:calc(100vh - 150px);
  }
  @supports (height: 100dvh){
    .dc-window{
      height:min(540px, calc(100dvh - 150px));
      max-height:calc(100dvh - 150px);
    }
  }
}

@media (max-width:480px){
  .dc-launcher{
    width: 50px;
    height: 50px;
    font-size: 22px;
    bottom: 220px;
  }
  .dc-window{
    left:10px;
    right:10px;
    width:auto;
    height:calc(100vh - 148px);
    max-height:calc(100vh - 148px);
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    border-radius:18px;
  }
  @supports (height: 100dvh){
    .dc-window{
      height:calc(100dvh - 148px);
      max-height:calc(100dvh - 148px);
    }
  }
  .dc-bubble{ max-width:84%; }
  .dc-quick{ margin-left:0; }
  .dc-quick .dc-chip{ flex:1 1 auto; justify-content:center; }
  .dc-fbtn span{ display:none; }
  .dc-fbtn i{ font-size:17px; }
  .dc-fbtn{ min-height:46px; }
}

@media (max-width:360px){
  .dc-window{ left:8px; right:8px; }
  .dc-header{ padding:12px; gap:9px; }
  .dc-title{ font-size:15px; }
  .dc-subtitle{ font-size:12px; }
}

/* Landscape phones — keep window usable */
@media (max-height:520px){
  .dc-window{
    height:calc(100vh - 120px);
    max-height:calc(100vh - 120px);
    bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .dc-launcher{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  .dental-chatbot *,
  .dental-chatbot *::before,
  .dental-chatbot *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .dc-dot{ opacity:1; }
}




/* =====================================================
   CHATBOT LAYER PRIORITY
   ===================================================== */

/* Open chat window */
.dental-chatbot .dc-window,
.dental-chatbot #dcWindow {
  position: fixed !important;
  z-index: 2147483647 !important;
}

/* Floating chatbot launcher */
.dental-chatbot .dc-launcher {
  position: fixed !important;
  z-index: 2147483646 !important;
}

/* Keep the open state visible */
.dental-chatbot .dc-window.dc-open {
  opacity: 1;
  visibility: visible;
  z-index: 2147483647 !important;
}