/* ============================================================================
   Curative GI Assistant - design system
   Brand: Curative Digestive Disease Center (deep medical blue + calm teal)
   Used by index.html (landing demo) and embed.html (iframe widget body).
   ========================================================================== */
:root {
  --brand: #124a7e;        /* practice blue */
  --brand-600: #0f4070;
  --brand-700: #0c3a66;
  --brand-800: #082a4d;
  --brand-050: #eaf2fa;
  --brand-100: #d8e7f4;
  --accent: #11968f;       /* calm teal, vitality */
  --accent-soft: #5fd0c6;
  --ink: #11283f;
  --ink-soft: #33506e;
  --muted: #5d7088;
  --line: #e1eaf3;
  --line-soft: #eef3f9;
  --bg: #eef4fa;
  --bg-soft: #f6f9fc;
  --card: #ffffff;
  --bot-bubble: #f1f6fc;
  --danger: #b3322a;
  --danger-bg: #fdeceb;
  --danger-line: #f3c9c5;
  --ok: #1f9d6b;
  --shadow-sm: 0 1px 2px rgba(16,40,70,.06), 0 1px 3px rgba(16,40,70,.05);
  --shadow: 0 6px 20px rgba(16,40,70,.08), 0 2px 6px rgba(16,40,70,.05);
  --shadow-lg: 0 24px 60px rgba(12,58,102,.18), 0 8px 24px rgba(12,58,102,.10);
  --r-lg: 20px; --r-md: 14px; --r-sm: 10px;
  --font-display: "Titillium Web", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font: "Open Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.18; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--brand); }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons & chips ---------- */
.btn { -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; font-family: var(--font);
  font-weight: 600; font-size: 15px; border-radius: 999px; padding: 12px 22px; display: inline-flex;
  align-items: center; gap: 9px; text-decoration: none; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; box-shadow: 0 6px 16px rgba(18,74,126,.28); }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(18,74,126,.36); }
.btn-ghost { background: #fff; color: var(--brand-700); border: 1.5px solid var(--brand-100); }
.btn-ghost:hover { border-color: var(--brand); background: var(--brand-050); }
.btn svg { width: 18px; height: 18px; }

/* ---------- landing shell ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand .bn { font-family: var(--font-display); font-weight: 700; color: var(--brand-800); font-size: 18px; line-height: 1.1; letter-spacing: -.01em; }
.brand .bn small { display: block; font-family: var(--font); font-weight: 600; color: var(--accent); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hdr-phone { color: var(--brand-800); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; }
.hdr-phone:hover { background: var(--brand-050); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(120% 90% at 92% -10%, rgba(95,208,198,.20), transparent 55%),
    radial-gradient(90% 80% at 8% 0%, rgba(18,74,126,.10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%); }
.hero .wrap { display: block; max-width: 1280px; padding: 44px 22px 56px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--brand-100);
  color: var(--brand-700); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(17,150,143,.18); }
.hero h1 { font-size: clamp(30px, 4.2vw, 47px); margin-top: 18px; color: var(--brand-800); }
.hero h1 .hl { color: var(--brand); }
.hero p.lead { font-size: 18px; color: var(--ink-soft); max-width: 30em; margin: 14px 0 26px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px 26px; color: var(--muted); font-size: 14px; }
.hero-meta b { color: var(--ink); }
.hero-meta .mi { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta svg { width: 17px; height: 17px; color: var(--brand); }

/* ---------- chat card (shared look) ---------- */
.chat {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; min-height: 0;
}
/* the assistant is the centerpiece of the landing page: full hero width, tall enough that
   the inline scheduler shows in full without scrolling */
.hero .chat { width: 100%; height: 840px; max-height: 90vh; margin: 26px 0 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; color: #fff;
  background: linear-gradient(115deg, var(--brand) 0%, var(--brand-700) 70%, var(--brand-800) 100%); }
.chat-head .ava { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.16);
  display: grid; place-items: center; flex: none; }
.chat-head .ava svg { width: 26px; height: 26px; }
.chat-head .who { line-height: 1.25; min-width: 0; }
.chat-head .who b { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.chat-head .who span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; opacity: .92; }
.chat-head .who .live { width: 7px; height: 7px; border-radius: 50%; background: #66e6a1; box-shadow: 0 0 0 3px rgba(102,230,161,.28); }
.chat-head .head-act { margin-left: auto; display: flex; gap: 6px; }
.icon-btn { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 9px;
  cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.icon-btn:hover { background: rgba(255,255,255,.28); }
.icon-btn svg { width: 18px; height: 18px; }

.msgs { flex: 1 1 auto; overflow-y: auto; padding: 20px 18px 8px; background:
    linear-gradient(180deg, var(--bg-soft), #fff 120px); scroll-behavior: smooth; }
.msgs::-webkit-scrollbar { width: 9px; }
.msgs::-webkit-scrollbar-thumb { background: #cfe; background: var(--brand-100); border-radius: 9px; border: 2px solid #fff; }

.row { display: flex; gap: 10px; margin: 0 0 16px; align-items: flex-end; }
.row .av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--brand), var(--brand-700)); color: #fff; }
.row .av svg { width: 18px; height: 18px; }
.bubble { max-width: 80%; padding: 12px 15px; border-radius: 15px; font-size: 15px; line-height: 1.58;
  animation: pop .22s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.row.bot .bubble { background: var(--bot-bubble); color: var(--ink); border-top-left-radius: 5px; border: 1px solid #e6eef7; }
.row.user { flex-direction: row-reverse; }
.row.user .bubble { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%); color: #fff; border-top-right-radius: 5px; }
.bubble p { margin: 0 0 9px; } .bubble p:last-child { margin-bottom: 0; }
.bubble ul { margin: 6px 0; padding-left: 18px; } .bubble li { margin: 3px 0; }
.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.row.bot .bubble a { color: var(--brand); }
.bubble strong { font-weight: 700; }
.bubble.alert { background: var(--danger-bg); border: 1px solid var(--danger-line); color: #7a241d; }

/* sources / learn-more chips under a bot message */
.sources { display: flex; flex-wrap: wrap; gap: 7px; margin: -6px 0 16px 40px; }
.src-chip { font-size: 12.5px; color: var(--brand-700); background: #fff; border: 1px solid var(--brand-100);
  padding: 5px 11px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: .15s; }
.src-chip:hover { border-color: var(--brand); background: var(--brand-050); }
.src-chip svg { width: 13px; height: 13px; opacity: .7; }

/* typing */
.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-300, #8fb4d6); opacity: .5; animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }

/* quick actions + suggestions */
.quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 10px; }
.chip { cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--brand-700);
  background: #fff; border: 1.5px solid var(--brand-100); padding: 9px 14px; border-radius: 999px; transition: .15s;
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.chip:hover { border-color: var(--brand); background: var(--brand-050); transform: translateY(-1px); }
.chip svg { width: 15px; height: 15px; color: var(--accent); }
.chip.solid { background: var(--brand-050); }

.suggest { padding: 2px 18px 12px; }
.suggest .sg-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 4px 2px 8px; }
.suggest .sg { display: grid; gap: 8px; }
.sg button { text-align: left; cursor: pointer; font-family: var(--font); font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; transition: .15s; display: flex; gap: 10px; align-items: center; }
.sg button:hover { border-color: var(--brand); background: var(--brand-050); transform: translateX(2px); }
.sg button svg { width: 17px; height: 17px; color: var(--brand); flex: none; }

/* composer */
.composer { border-top: 1px solid var(--line); padding: 12px 14px; background: #fff; }
.composer form { display: flex; gap: 10px; align-items: flex-end; background: var(--bg-soft); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 7px 7px 7px 15px; transition: border-color .15s, box-shadow .15s; }
.composer form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(18,74,126,.10); background: #fff; }
.composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; font-family: var(--font);
  font-size: 15px; color: var(--ink); line-height: 1.5; max-height: 120px; padding: 7px 0; }
.composer textarea::placeholder { color: #97a6b8; }
.send { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--brand), var(--brand-700)); display: grid; place-items: center; transition: .15s; }
.send:hover { box-shadow: 0 6px 16px rgba(18,74,126,.35); }
.send:disabled { opacity: .45; cursor: default; box-shadow: none; }
.send svg { width: 19px; height: 19px; }
/* Voice: mic-to-speak button in the composer, read-aloud toggle in the header */
.mic { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 0; cursor: pointer; color: var(--brand);
  background: transparent; display: grid; place-items: center; transition: .15s; }
.mic:hover { background: rgba(18,74,126,.09); }
.mic svg { width: 21px; height: 21px; }
.mic.listening { color: #fff; background: linear-gradient(180deg, #e0464b, #c5363b);
  box-shadow: 0 0 0 0 rgba(224,70,75,.5); animation: micPulse 1.3s infinite; }
@keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(224,70,75,.5); }
  70% { box-shadow: 0 0 0 10px rgba(224,70,75,0); } 100% { box-shadow: 0 0 0 0 rgba(224,70,75,0); } }
.icon-btn.voice-tg[aria-pressed="true"] { background: rgba(255,255,255,.32); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.icon-btn.voice-tg.speaking svg { animation: spkPulse 1s ease-in-out infinite; }
@keyframes spkPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.composer .disc { margin: 9px 6px 2px; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.45; }

/* ---------- landing sections ---------- */
section.block { padding: 60px 0; }
.sec-head { text-align: center; max-width: 40em; margin: 0 auto 38px; }
.sec-head h2 { font-size: clamp(24px, 3vw, 34px); color: var(--brand-800); }
.sec-head p { color: var(--ink-soft); font-size: 17px; }
.kicker { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.grid { display: grid; gap: 18px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; box-shadow: var(--shadow-sm); }
.card.feat { transition: transform .15s, box-shadow .2s; }
.card.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  background: var(--brand-050); color: var(--brand); }
.card .ic svg { width: 24px; height: 24px; }
.card h3 { font-size: 18px; } .card p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.prov .name { font-family: var(--font-display); font-weight: 700; color: var(--brand-800); font-size: 17px; }
.prov .role { color: var(--ink-soft); font-size: 14px; margin-top: 5px; }
.prov .more { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--brand); font-weight: 700; font-size: 14px; text-decoration: none; }
.prov .more:hover { text-decoration: underline; }
.band { background: linear-gradient(120deg, var(--brand-800), var(--brand-700)); color: #fff; border-radius: 22px; padding: 40px; text-align: center; }
.band h2 { color: #fff; } .band p { color: #cfe0f0; max-width: 34em; margin: 8px auto 22px; }

.loc { display: flex; gap: 14px; align-items: flex-start; }
.loc .pin { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-050); color: var(--brand); display: grid; place-items: center; flex: none; }
.loc .pin svg { width: 21px; height: 21px; }
.loc b { color: var(--brand-800); font-family: var(--font-display); }
.loc a { font-size: 14px; }

.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--brand-800); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--brand); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { color: var(--ink-soft); margin: 0 0 14px; font-size: 15px; }

footer.site { background: var(--brand-800); color: #cdddee; padding: 44px 0 30px; margin-top: 30px; }
footer.site .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
footer.site b { color: #fff; font-family: var(--font-display); display: block; margin-bottom: 10px; }
footer.site a { color: #cdddee; text-decoration: none; display: block; padding: 3px 0; font-size: 14.5px; }
footer.site a:hover { color: #fff; }
footer.site .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.13); margin-top: 18px; padding-top: 18px; font-size: 12.5px; color: #9fb6cd; line-height: 1.6; }

/* ---------- embed mode (iframe body) ---------- */
body.embed { background: transparent; }
body.embed .chat { height: 100vh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero .wrap { padding-top: 34px; }
  .hero .chat { height: 80vh; min-height: 600px; max-width: none; }
  .g3 { grid-template-columns: 1fr 1fr; }
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .g3, .g2 { grid-template-columns: 1fr; }
  .site-header .hide-sm { display: none; }
  .site-header .wrap { gap: 10px; height: 60px; }
  .brand .bn { display: none; }          /* logo image already carries the name */
  .brand img { height: 34px; }
  .btn { padding: 11px 17px; font-size: 14px; }
  .hero h1 { font-size: 29px; }
  .hero .wrap { padding-top: 26px; }
  .bubble { max-width: 88%; }
  footer.site .wrap { grid-template-columns: 1fr; }
  /* Phones: size the chat to the real visible viewport (dvh accounts for Safari's
     collapsing toolbars) instead of a 600px floor that overflowed short screens. */
  .hero .chat { height: calc(100dvh - 132px); min-height: 460px; max-height: none; }
  .chat-head { padding: 12px 14px; }
  .chat-head .ava { width: 36px; height: 36px; }
  .chat-head .ava svg { width: 22px; height: 22px; }
  .chat-head .who b { font-size: 15px; }
  .quick { padding-bottom: 4px; }
  .composer { padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); }
  .composer textarea { font-size: 16px; }   /* 16px stops iOS auto-zoom on focus */
  .composer .disc { font-size: 10.5px; margin: 7px 4px 0; }
}
/* The landing already has the assistant inline in the hero, so the floating
   launcher is redundant there and on phones it sat on top of the message box.
   Hidden while the inline chat is on screen, restored once scrolled past. */
html.chat-inview .cgw-root { opacity: 0; visibility: hidden; pointer-events: none; }
.cgw-root { transition: opacity .18s ease, visibility .18s ease; }
/* Full-screen booking sheet on phones (see BK_CSS in chat.js) */
body.bk-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }