/* ============================================================
   Bloomrise Dental — Clinical Blue/Teal Theme
   ============================================================ */
:root {
  color-scheme: light;
  --teal-50:#ecfbfa; --teal-100:#d2f4f2; --teal-200:#a6e9e6;
  --teal-400:#3fc6c0; --teal-500:#17a8a2; --teal-600:#0c8a85; --teal-700:#0a6f6b;
  --blue-50:#eef5ff; --blue-100:#dbeafe; --blue-500:#2f7be0; --blue-600:#2563c4; --blue-700:#1d4f9e;
  --ink-900:#0c2a35; --ink-700:#234049; --ink-500:#5a727b; --ink-400:#7c919a;
  --bg:#f5fafb; --surface:#ffffff; --line:#e3edf0;
  --radius:18px; --radius-sm:12px;
  --shadow-sm:0 2px 8px rgba(12,42,53,.06);
  --shadow:0 14px 40px rgba(12,90,90,.12);
  --shadow-lg:0 24px 60px rgba(12,90,90,.20);
  --grad:linear-gradient(135deg,var(--teal-500),var(--blue-500));
  --grad-soft:linear-gradient(135deg,var(--teal-50),var(--blue-50));
  --font-head:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
/* The hidden attribute must always win over class-level display rules
   (e.g. .frontdesk-overlay/.chat-window use display:grid/flex). */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body); color:var(--ink-700);
  background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;
}
.container { width:min(1140px,92vw); margin-inline:auto; }
h1,h2,h3,h4 { font-family:var(--font-head); color:var(--ink-900); line-height:1.15; }
img { max-width:100%; }
section { scroll-margin-top:80px; }

/* ---------- Buttons ---------- */
.btn {
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  border:none; border-radius:999px; padding:.72rem 1.4rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; transition:.2s ease;
  white-space:nowrap;
}
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(23,168,162,.32); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(23,168,162,.42); }
.btn-ghost { background:var(--surface); color:var(--teal-700); border:1.5px solid var(--teal-200); }
.btn-ghost:hover { background:var(--teal-50); border-color:var(--teal-400); }
.btn-lg { padding:.95rem 1.7rem; font-size:1.02rem; }
.btn-sm { padding:.5rem 1rem; font-size:.85rem; }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner { display:flex; align-items:center; gap:1.5rem; padding:.85rem 0; }
.brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--grad); color:#fff; box-shadow:var(--shadow-sm); }
.brand-text { font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:var(--ink-900); letter-spacing:-.02em; }
.brand-text-sub { color:var(--teal-500); }
.site-nav { display:flex; gap:1.6rem; margin-left:auto; }
.site-nav a { text-decoration:none; color:var(--ink-700); font-weight:500; font-size:.95rem; transition:.2s; }
.site-nav a:hover { color:var(--teal-600); }
.header-cta { margin-left:.5rem; }

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; background:var(--grad-soft); padding:4.5rem 0 5rem; }
.hero::before { content:""; position:absolute; top:-120px; right:-120px; width:420px; height:420px; background:radial-gradient(circle,rgba(63,198,192,.28),transparent 70%); border-radius:50%; }
.hero::after { content:""; position:absolute; bottom:-140px; left:-100px; width:360px; height:360px; background:radial-gradient(circle,rgba(47,123,224,.18),transparent 70%); border-radius:50%; }
.hero-inner { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:.4rem; background:#fff; color:var(--teal-700); font-weight:600; font-size:.82rem; padding:.4rem .9rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.hero h1 { font-size:clamp(2.3rem,4.6vw,3.5rem); font-weight:800; letter-spacing:-.03em; margin:1.1rem 0 1rem; }
.hero-sub { font-size:1.1rem; color:var(--ink-700); max-width:30rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.8rem 0 2rem; }
.hero-trust { display:flex; align-items:center; gap:1.3rem; }
.trust-item { display:flex; flex-direction:column; }
.trust-item strong { font-family:var(--font-head); font-size:1.15rem; color:var(--ink-900); }
.trust-item span { font-size:.82rem; color:var(--ink-500); }
.trust-divider { width:1px; height:34px; background:var(--line); }

/* Hero visual card */
.hero-visual { display:flex; justify-content:center; }
.hero-card { width:100%; max-width:360px; background:#fff; border-radius:24px; padding:1.3rem; box-shadow:var(--shadow-lg); border:1px solid var(--line); transform:rotate(1.5deg); }
.hero-card-head { display:flex; align-items:center; gap:.7rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); margin-bottom:1rem; }
.hero-card-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--grad-soft); font-size:1.4rem; }
.hero-card-head strong { display:block; font-family:var(--font-head); font-size:.95rem; color:var(--ink-900); }
.status-dot { font-size:.78rem; color:var(--teal-600); display:inline-flex; align-items:center; gap:.35rem; }
.status-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--teal-400); box-shadow:0 0 0 3px rgba(63,198,192,.25); }
.hero-bubble { font-size:.88rem; padding:.6rem .85rem; border-radius:14px; margin-bottom:.55rem; max-width:80%; }
.hero-bubble.bot { background:var(--teal-50); color:var(--ink-700); border-bottom-left-radius:4px; }
.hero-bubble.user { background:var(--grad); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.hero-quick { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.hero-quick span { font-size:.76rem; background:#fff; border:1px solid var(--teal-200); color:var(--teal-700); padding:.3rem .6rem; border-radius:999px; }

/* ---------- Sections ---------- */
.section { padding:4.5rem 0; }
.section-alt { background:var(--grad-soft); }
.section-head { text-align:center; max-width:38rem; margin:0 auto 2.8rem; }
.eyebrow { font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-500); }
.section-head h2 { font-size:clamp(1.8rem,3.2vw,2.4rem); margin:.5rem 0 .7rem; letter-spacing:-.02em; }
.section-head p { color:var(--ink-500); }

/* ---------- Service cards ---------- */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.service-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); transition:.25s; position:relative; }
.service-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--teal-200); }
.service-icon { width:54px; height:54px; display:grid; place-items:center; font-size:1.7rem; background:var(--grad-soft); border-radius:14px; margin-bottom:1rem; }
.service-card h3 { font-size:1.15rem; margin-bottom:.4rem; }
.service-card p { font-size:.92rem; color:var(--ink-500); margin-bottom:1rem; }
.price-tag { font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--teal-700); background:var(--teal-50); padding:.32rem .7rem; border-radius:999px; }

/* ---------- Why us ---------- */
.why-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.feature-list { list-style:none; margin-top:1.6rem; display:grid; gap:1.1rem; }
.feature-list li { display:flex; gap:1rem; align-items:flex-start; }
.feature-list li span { flex:none; width:44px; height:44px; display:grid; place-items:center; font-size:1.3rem; background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); }
.feature-list strong { font-family:var(--font-head); color:var(--ink-900); }
.feature-list p { font-size:.9rem; color:var(--ink-500); }
.why-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.3rem; text-align:center; box-shadow:var(--shadow-sm); }
.stat-card strong { display:block; font-family:var(--font-head); font-size:2.1rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-card span { font-size:.85rem; color:var(--ink-500); }

/* ---------- FAQ ---------- */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.faq-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:0 1.3rem; box-shadow:var(--shadow-sm); transition:.2s; }
.faq-item summary { font-family:var(--font-head); font-weight:600; color:var(--ink-900); padding:1.1rem 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:.98rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:1.4rem; color:var(--teal-500); transition:.2s; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { padding:0 0 1.1rem; color:var(--ink-500); font-size:.92rem; }
.faq-item[open] { border-color:var(--teal-200); }

/* ---------- CTA band ---------- */
.cta-band { background:var(--grad); }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band h2 { color:#fff; font-size:1.9rem; }
.cta-band p { color:rgba(255,255,255,.9); margin-top:.4rem; }
.cta-band .btn-primary { background:#fff; color:var(--teal-700); box-shadow:0 10px 30px rgba(0,0,0,.18); }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink-900); color:#cfe6e6; padding:1.6rem 0; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.9rem; }
.footer-note { color:#8fb3b3; }
.footer-note strong { color:#fff; }

/* ============================================================
   CHAT WIDGET
   ============================================================ */
.chat-launcher {
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad); color:#fff; font-size:1.7rem;
  box-shadow:0 12px 30px rgba(23,168,162,.45);
  display:grid; place-items:center; transition:.25s;
}
.chat-launcher:hover { transform:scale(1.07) translateY(-2px); }
.chat-launcher-icon { line-height:1; }
.chat-launcher-badge {
  position:absolute; top:-2px; right:-2px; background:#ff5a6e; color:#fff;
  font-size:.72rem; font-weight:700; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; display:grid; place-items:center; border:2px solid #fff;
}

.chat-window {
  position:fixed; bottom:24px; right:24px; z-index:61;
  width:min(394px,calc(100vw - 32px)); height:min(640px,calc(100vh - 48px));
  background:#fff; border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  animation:chatIn .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes chatIn { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }

.chat-header { background:var(--grad); color:#fff; padding:.9rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.chat-header-id { display:flex; align-items:center; gap:.6rem; }
.chat-avatar { width:40px; height:40px; display:grid; place-items:center; font-size:1.35rem; background:rgba(255,255,255,.2); border-radius:12px; }
.chat-header-id strong { font-family:var(--font-head); font-size:1rem; display:block; line-height:1.2; }
.chat-status { font-size:.78rem; opacity:.92; display:inline-flex; align-items:center; gap:.35rem; }
.chat-status .dot { width:7px; height:7px; border-radius:50%; background:#7dffd6; box-shadow:0 0 0 3px rgba(125,255,214,.3); }
.chat-header-actions { display:flex; gap:.2rem; }
.icon-btn { background:rgba(255,255,255,.14); border:none; color:#fff; width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:.95rem; display:grid; place-items:center; transition:.2s; }
.icon-btn:hover { background:rgba(255,255,255,.28); }

.chat-body { flex:1; overflow-y:auto; padding:1.1rem; background:linear-gradient(180deg,#f7fcfc,#fff); display:flex; flex-direction:column; gap:.2rem; }
.chat-body::-webkit-scrollbar { width:7px; }
.chat-body::-webkit-scrollbar-thumb { background:var(--teal-200); border-radius:999px; }

.msg { display:flex; gap:.55rem; margin-bottom:.7rem; align-items:flex-end; max-width:92%; }
.msg-avatar { flex:none; width:30px; height:30px; border-radius:9px; background:var(--grad-soft); display:grid; place-items:center; font-size:1rem; }
.msg-bubble { padding:.65rem .9rem; border-radius:16px; font-size:.92rem; line-height:1.5; }
.msg.bot { align-self:flex-start; }
.msg.bot .msg-bubble { background:#fff; border:1px solid var(--line); color:var(--ink-700); border-bottom-left-radius:5px; box-shadow:var(--shadow-sm); }
.msg.user { align-self:flex-end; flex-direction:row-reverse; }
.msg.user .msg-bubble { background:var(--grad); color:#fff; border-bottom-right-radius:5px; }
.msg.user .msg-avatar { background:var(--blue-100); }
.msg-bubble strong { font-weight:600; color:inherit; }
.msg-bubble a { color:var(--teal-600); }
.msg-bubble ul { margin:.3rem 0 .1rem; padding-left:1.1rem; }
.msg-bubble li { margin:.15rem 0; }
.msg-card { margin-top:.5rem; background:var(--teal-50); border:1px solid var(--teal-200); border-radius:12px; padding:.7rem .85rem; font-size:.86rem; }
.msg-card div { display:flex; justify-content:space-between; gap:1rem; padding:.15rem 0; }
.msg-card div span:first-child { color:var(--ink-500); }
.msg-card div span:last-child { font-weight:600; color:var(--ink-900); }

/* typing indicator */
.typing { display:inline-flex; gap:4px; padding:.2rem 0; }
.typing span { width:7px; height:7px; border-radius:50%; background:var(--teal-400); animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

/* quick replies */
.chat-quick { display:flex; flex-wrap:wrap; gap:.45rem; padding:0 1.1rem .6rem; }
.chat-quick:empty { padding:0; }
.quick-btn { font-family:var(--font-head); font-weight:600; font-size:.82rem; background:#fff; border:1.5px solid var(--teal-200); color:var(--teal-700); padding:.45rem .85rem; border-radius:999px; cursor:pointer; transition:.18s; }
.quick-btn:hover { background:var(--teal-500); color:#fff; border-color:var(--teal-500); }

.chat-input { display:flex; gap:.5rem; padding:.7rem .8rem; border-top:1px solid var(--line); background:#fff; align-items:center; }
.chat-input input { flex:1; border:1.5px solid var(--line); border-radius:999px; padding:.65rem 1rem; font-family:var(--font-body); font-size:.92rem; outline:none; transition:.2s; }
.chat-input input:focus { border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(63,198,192,.18); }
.chat-send { flex:none; width:42px; height:42px; border-radius:50%; border:none; background:var(--grad); color:#fff; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.chat-send:hover { transform:scale(1.06); }
.chat-footer { text-align:center; font-size:.72rem; color:var(--ink-400); padding:.45rem; background:#fff; }
.chat-footer strong { color:var(--teal-600); }

/* ---------- Front desk panel ---------- */
.frontdesk-overlay { position:fixed; inset:0; z-index:80; background:rgba(12,42,53,.5); backdrop-filter:blur(3px); display:grid; place-items:center; padding:1rem; }
.frontdesk { background:#fff; border-radius:var(--radius); width:min(720px,96vw); max-height:88vh; overflow:auto; padding:1.5rem; box-shadow:var(--shadow-lg); }
.frontdesk-head { display:flex; justify-content:space-between; align-items:center; }
.frontdesk-head h3 { font-size:1.2rem; }
.frontdesk-head .icon-btn { background:var(--teal-50); color:var(--teal-700); }
.frontdesk-sub { color:var(--ink-500); font-size:.88rem; margin:.4rem 0 1.3rem; }
.frontdesk-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.frontdesk-cols h4 { font-size:1rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem; }
.count { background:var(--teal-100); color:var(--teal-700); font-size:.78rem; min-width:22px; height:22px; padding:0 6px; border-radius:999px; display:grid; place-items:center; font-family:var(--font-body); }
.frontdesk-list { display:grid; gap:.6rem; }
.record { border:1px solid var(--line); border-radius:12px; padding:.7rem .85rem; font-size:.85rem; background:#fafdfd; }
.record strong { font-family:var(--font-head); color:var(--ink-900); }
.record .meta { color:var(--ink-500); font-size:.8rem; margin-top:.2rem; }
.record .tag { display:inline-block; background:var(--teal-50); color:var(--teal-700); font-size:.72rem; font-weight:600; padding:.15rem .5rem; border-radius:999px; margin-top:.35rem; }
.empty-note { color:var(--ink-400); font-size:.85rem; font-style:italic; padding:.8rem 0; }
#clearData { margin-top:1.3rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { order:-1; }
  .hero-card { transform:none; max-width:340px; }
  .card-grid { grid-template-columns:1fr 1fr; }
  .why-inner { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }
  .site-nav { display:none; }
  .frontdesk-cols { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .card-grid { grid-template-columns:1fr; }
  .header-cta { display:none; }
  .hero-trust { gap:.9rem; }
  .chat-window { bottom:0; right:0; width:100vw; height:100vh; border-radius:0; }
  .chat-launcher { bottom:18px; right:18px; }
}