/* ============================================================================
   Dental Practice Chatbot — premium UI
   All styles scoped under #hcp-root / .hcp-* so nothing leaks into the theme.
   Colours, radius and fonts are driven by CSS variables that the plugin sets
   inline from the admin settings (see hcp_inline_theme()).
   ========================================================================== */

#hcp-root {
  /* Theme tokens (overridable inline from admin). */
  --hcp-primary: #0E8F8A;
  --hcp-primary-dark: #0B726E;
  --hcp-primary-soft: #E6F4F3;
  --hcp-secondary: #1F3A5F;
  --hcp-emergency: #E5484D;
  --hcp-emergency-soft: #FDECEC;

  --hcp-ink: #14181F;
  --hcp-text: #3F4753;
  --hcp-muted: #6B7280;
  --hcp-faint: #9AA2AD;
  --hcp-border: #E6E9EE;
  --hcp-hairline: #F0F2F5;
  --hcp-bg: #FFFFFF;
  --hcp-surface: #F5F7F9;
  --hcp-bot-bubble: #F1F4F7;

  --hcp-radius: 20px;
  --hcp-radius-md: 14px;
  --hcp-radius-sm: 10px;

  --hcp-shadow-launcher: 0 10px 28px rgba(20,24,31,.28);
  --hcp-shadow-window: 0 24px 60px rgba(20,24,31,.22), 0 4px 12px rgba(20,24,31,.08);

  --hcp-font-head: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hcp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --hcp-z: 2147483000;
}

/* Reset within the widget only. */
#hcp-root, #hcp-root * , #hcp-root *::before, #hcp-root *::after { box-sizing: border-box; }
#hcp-root { font-family: var(--hcp-font-body); }
#hcp-root button { font-family: inherit; cursor: pointer; }
/* Bare (chrome-less) buttons — reset without out-ranking component styles. */
#hcp-root .hcp-head__btn, #hcp-root .hcp-footbar__btn { background: transparent; border: 0; }
#hcp-root p { margin: 0; }
#hcp-root .hcp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ LAUNCHER */
.hcp-launcher {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: var(--hcp-z);
  display: inline-flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 8px 0 22px;
  border: none;
  border-radius: 40px;
  color: #fff;
  background: var(--hcp-primary);
  background-image: linear-gradient(145deg, var(--hcp-primary) 0%, var(--hcp-primary-dark) 100%);
  box-shadow: var(--hcp-shadow-launcher);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hcp-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20,24,31,.3); }
.hcp-launcher:focus-visible { outline: 3px solid rgba(14,143,138,.45); outline-offset: 3px; }
.hcp-launcher__label { font-family: var(--hcp-font-head); font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; color: #fff; }
.hcp-launcher__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: #fff; color: var(--hcp-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 2px 6px rgba(20,24,31,.2);
}
.hcp-launcher__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hcp-launcher__dot {
  position: absolute; top: 2px; right: 8px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--hcp-emergency); border: 2px solid #fff;
}
.hcp-launcher[hidden] { display: none; }

/* Welcome teaser bubble (shows above the launcher) */
.hcp-teaser {
  position: fixed;
  right: 24px; bottom: 100px;
  z-index: var(--hcp-z);
  width: 306px; max-width: calc(100vw - 48px);
  background: var(--hcp-bg);
  border: 1px solid var(--hcp-border);
  border-radius: 16px;
  box-shadow: var(--hcp-shadow-window);
  padding: 15px 16px;
  animation: hcp-teaser-in .3s cubic-bezier(.16,.84,.44,1) both;
}
.hcp-teaser[hidden] { display: none; }
@keyframes hcp-teaser-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.hcp-teaser::after {
  content: ''; position: absolute; right: 26px; bottom: -7px;
  width: 14px; height: 14px; background: var(--hcp-bg);
  border-right: 1px solid var(--hcp-border); border-bottom: 1px solid var(--hcp-border);
  transform: rotate(45deg);
}
.hcp-teaser__inner { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.hcp-teaser__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--hcp-primary); color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.hcp-teaser__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hcp-teaser__msg { font-size: 13.5px; line-height: 1.5; color: var(--hcp-text); padding-right: 12px; }
.hcp-teaser__close {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: 0; color: var(--hcp-muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.hcp-teaser__close:hover { background: var(--hcp-surface); color: var(--hcp-ink); }

/* ------------------------------------------------------------------- WINDOW */
.hcp-window {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: var(--hcp-z);
  width: 404px; height: min(680px, calc(100vh - 44px));
  background: var(--hcp-bg);
  border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius);
  box-shadow: var(--hcp-shadow-window);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: hcp-window-in .26s cubic-bezier(.16,.84,.44,1) both;
}
.hcp-window[hidden] { display: none; }
@keyframes hcp-window-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Header */
.hcp-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  background: var(--hcp-primary);
  color: #fff;
  position: relative;
}
.hcp-head__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; overflow: hidden;
}
.hcp-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hcp-head__info { flex: 1; min-width: 0; }
.hcp-head__name { font-family: var(--hcp-font-head); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; line-height: 1.2; }
.hcp-head__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.82); margin-top: 2px; }
.hcp-head__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.3); flex-shrink: 0; }
.hcp-head__status.is-closed::before { background: #F5A623; box-shadow: 0 0 0 3px rgba(245,166,35,.3); }
.hcp-head__actions { display: flex; align-items: center; gap: 2px; }
.hcp-head__btn {
  width: 34px; height: 34px; border-radius: 9px;
  color: rgba(255,255,255,.9); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.hcp-head__btn:hover { background: rgba(255,255,255,.16); }
.hcp-head__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Body / scroll area */
.hcp-body {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 18px 16px 8px;
  background: var(--hcp-surface);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.hcp-body::-webkit-scrollbar { width: 8px; }
.hcp-body::-webkit-scrollbar-thumb { background: #D4DAE1; border-radius: 8px; border: 2px solid var(--hcp-surface); }

/* Welcome state */
.hcp-welcome { margin-bottom: 6px; }
.hcp-welcome__greet {
  font-family: var(--hcp-font-head); font-weight: 700; font-size: 21px;
  color: var(--hcp-ink); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 6px;
}
.hcp-welcome__sub { font-size: 14px; color: var(--hcp-muted); line-height: 1.55; margin-bottom: 18px; }

/* Quick-action cards (welcome) */
.hcp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hcp-action {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 13px;
  background: var(--hcp-bg);
  border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius-md);
  text-align: left; color: var(--hcp-ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hcp-action:hover { border-color: var(--hcp-primary); box-shadow: 0 6px 16px rgba(20,24,31,.07); transform: translateY(-1px); }
.hcp-action:focus-visible { outline: 2px solid var(--hcp-primary); outline-offset: 2px; }
.hcp-action__icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: var(--hcp-primary-soft); color: var(--hcp-primary);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.hcp-action__label { font-family: var(--hcp-font-head); font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.hcp-action--emergency { grid-column: 1 / -1; border-color: var(--hcp-emergency-soft); }
.hcp-action--emergency:hover { border-color: var(--hcp-emergency); }
.hcp-action--emergency .hcp-action__icon { background: var(--hcp-emergency-soft); color: var(--hcp-emergency); }

/* Messages */
.hcp-msg { display: flex; align-items: flex-end; gap: 8px; margin: 12px 0; animation: hcp-msg-in .28s ease both; }
@keyframes hcp-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hcp-msg__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--hcp-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; overflow: hidden;
}
.hcp-msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.hcp-msg__bubble {
  max-width: 78%; padding: 10px 13px;
  font-size: 14px; line-height: 1.55; color: var(--hcp-text);
  background: var(--hcp-bot-bubble);
  border-radius: 4px 14px 14px 14px;
}
.hcp-msg__bubble a { color: var(--hcp-primary-dark); font-weight: 600; text-decoration: underline; }
.hcp-msg--user { flex-direction: row-reverse; }
.hcp-msg--user .hcp-msg__bubble { background: var(--hcp-primary); color: #fff; border-radius: 14px 4px 14px 14px; }
.hcp-msg--user .hcp-msg__avatar { background: var(--hcp-secondary); }

/* Typing indicator */
.hcp-typing { display: inline-flex; gap: 4px; padding: 13px 14px; align-items: center; }
.hcp-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--hcp-faint); animation: hcp-blink 1.2s infinite ease-in-out; }
.hcp-typing span:nth-child(2) { animation-delay: .18s; }
.hcp-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes hcp-blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Quick replies (chips) */
.hcp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px 36px; }
.hcp-chips--full { margin-left: 0; }
.hcp-chip {
  font-family: var(--hcp-font-head); font-weight: 600; font-size: 13px;
  color: var(--hcp-primary-dark);
  background: var(--hcp-bg); border: 1px solid var(--hcp-border);
  padding: 8px 14px; border-radius: 40px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hcp-chip i { font-size: 12px; }
.hcp-chip:hover { border-color: var(--hcp-primary); background: var(--hcp-primary-soft); }
.hcp-chip:focus-visible { outline: 2px solid var(--hcp-primary); outline-offset: 2px; }
.hcp-chip--emergency { color: var(--hcp-emergency); border-color: var(--hcp-emergency-soft); }
.hcp-chip--emergency:hover { background: var(--hcp-emergency-soft); border-color: var(--hcp-emergency); }

/* Inline cards (contact, info, CTA, forms) inside a bot bubble */
.hcp-card {
  margin: 4px 0 12px 36px;
  background: var(--hcp-bg); border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius-md); padding: 15px; max-width: 88%;
}
.hcp-card__title { font-family: var(--hcp-font-head); font-weight: 700; font-size: 14px; color: var(--hcp-ink); margin-bottom: 10px; }
.hcp-crow { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-top: 1px solid var(--hcp-hairline); }
.hcp-crow:first-of-type { border-top: none; }
.hcp-crow__icon { width: 32px; height: 32px; border-radius: 8px; background: var(--hcp-primary-soft); color: var(--hcp-primary); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.hcp-crow__label { font-size: 11.5px; color: var(--hcp-muted); }
.hcp-crow__value { font-family: var(--hcp-font-head); font-size: 13.5px; font-weight: 600; color: var(--hcp-ink); }
.hcp-crow__value a { color: var(--hcp-ink); }

/* CTA buttons (stronger than chips) */
.hcp-ctas { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px 36px; max-width: 88%; }
.hcp-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--hcp-font-head); font-weight: 600; font-size: 14px;
  padding: 12px 16px; border-radius: var(--hcp-radius-sm);
  background: var(--hcp-primary); color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.hcp-cta:hover { background: var(--hcp-primary-dark); }
.hcp-cta:focus-visible { outline: 2px solid var(--hcp-primary); outline-offset: 2px; }
.hcp-cta--emergency { background: var(--hcp-emergency); }
.hcp-cta--emergency:hover { background: #C13B3F; }
.hcp-cta--ghost { background: var(--hcp-bg); color: var(--hcp-ink); border: 1px solid var(--hcp-border); }
.hcp-cta--ghost:hover { border-color: var(--hcp-ink); background: var(--hcp-bg); }

/* Progressive form field */
.hcp-field { margin: 4px 0 12px 36px; max-width: 88%; }
.hcp-field__input {
  width: 100%; padding: 12px 14px; font-family: var(--hcp-font-body); font-size: 14px;
  color: var(--hcp-ink); background: var(--hcp-bg);
  border: 1px solid var(--hcp-border); border-radius: var(--hcp-radius-sm); outline: none;
  transition: border-color .15s ease;
}
.hcp-field__input:focus { border-color: var(--hcp-primary); box-shadow: 0 0 0 3px rgba(14,143,138,.12); }
.hcp-field__error { color: var(--hcp-emergency); font-size: 12px; margin-top: 6px; display: none; }
.hcp-field__error.is-shown { display: block; }

/* GDPR consent block */
.hcp-consent { margin: 4px 0 12px 36px; max-width: 88%; background: var(--hcp-bg); border: 1px solid var(--hcp-border); border-radius: var(--hcp-radius-md); padding: 14px 15px; }
.hcp-consent__row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin-bottom: 12px; }
.hcp-consent__cb { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--hcp-primary); }
.hcp-consent__txt { font-size: 12.5px; line-height: 1.5; color: var(--hcp-text); }
.hcp-consent__txt a { color: var(--hcp-primary-dark); font-weight: 600; text-decoration: underline; }
.hcp-consent .hcp-cta { width: 100%; }
.hcp-consent .hcp-field__error { margin-top: 8px; }

/* Emergency banner */
.hcp-alert {
  margin: 4px 0 12px 36px; max-width: 88%;
  background: var(--hcp-emergency-soft); border: 1px solid #F6C9CB;
  border-radius: var(--hcp-radius-md); padding: 13px 15px;
  display: flex; gap: 11px;
}
.hcp-alert i { color: var(--hcp-emergency); font-size: 16px; margin-top: 1px; }
.hcp-alert p { font-size: 13px; color: #8A2C2F; line-height: 1.5; }

/* Success state */
.hcp-success { text-align: center; padding: 8px 0 4px; }
.hcp-success__badge { width: 54px; height: 54px; border-radius: 50%; background: var(--hcp-primary-soft); color: var(--hcp-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; }

/* Divider / meta */
.hcp-meta { text-align: center; font-size: 11px; color: var(--hcp-faint); margin: 10px 0; }

/* Composer */
.hcp-composer {
  flex-shrink: 0;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px; border-top: 1px solid var(--hcp-border); background: var(--hcp-bg);
}
.hcp-composer__input {
  flex: 1; resize: none; max-height: 108px; min-height: 24px;
  padding: 10px 12px; font-family: var(--hcp-font-body); font-size: 14px; line-height: 1.4;
  color: var(--hcp-ink); background: var(--hcp-surface);
  border: 1px solid var(--hcp-border); border-radius: 12px; outline: none;
  transition: border-color .15s ease;
}
.hcp-composer__input:focus { border-color: var(--hcp-primary); }
.hcp-composer__input::placeholder { color: var(--hcp-faint); }
.hcp-composer__send {
  width: 42px; height: 42px; border: none; border-radius: 11px; flex-shrink: 0;
  background: var(--hcp-primary); color: #fff; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, opacity .15s ease;
}
.hcp-composer__send:hover { background: var(--hcp-primary-dark); }
.hcp-composer__send:disabled { opacity: .45; cursor: default; }
.hcp-composer__send:focus-visible { outline: 2px solid var(--hcp-primary); outline-offset: 2px; }
.hcp-composer__send, .hcp-composer__send i { color: #fff; }

/* Footer meta bar (restart + privacy) */
.hcp-footbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; background: var(--hcp-bg); border-top: 1px solid var(--hcp-hairline); }
.hcp-footbar__btn { font-size: 11.5px; color: var(--hcp-muted); display: inline-flex; align-items: center; gap: 5px; }
.hcp-footbar__btn:hover { color: var(--hcp-primary-dark); }
.hcp-footbar__note { font-size: 10.5px; color: var(--hcp-faint); }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 560px) {
  .hcp-window {
    right: 0; bottom: 0; top: 0; left: 0;
    width: 100%; height: 100%;
    border: none; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hcp-launcher { right: 16px; bottom: 16px; }
  .hcp-teaser { right: 16px; bottom: 92px; }
  .hcp-head { padding-top: max(15px, env(safe-area-inset-top)); }
  .hcp-msg__bubble { max-width: 82%; }
}

/* ------------------------------------------------------------ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .hcp-window, .hcp-msg { animation: none; }
  .hcp-typing span { animation: none; opacity: .5; }
  #hcp-root .hcp-body { scroll-behavior: auto; }
  .hcp-launcher:hover, .hcp-action:hover { transform: none; }
}