/* ============================================================================
   Health Expert — full-screen conversation UI.
   Mobile-first: paid ads land here, so the page is the chat and nothing else.
   ========================================================================= */

/* Several elements below (.hx-gate, .hx-form, .hx-chips) set `display` on the
   class itself. That's author CSS, so at tied specificity it beats the
   browser's own `[hidden]{display:none}` rule — toggling el.hidden=true in JS
   silently did nothing, which is why the intake gate never actually hid
   itself and stayed stacked on top of the chat underneath it. This one rule
   restores the native behaviour for every element in this file. */
[hidden] { display: none !important; }

:root {
    --ink: #211D17;
    --ink-soft: #4C463C;
    --muted: #7C7466;
    --leaf: #5C7A34;
    --leaf-deep: #49622A;
    --forest: #2E4423;
    --forest-deep: #22331B;
    --sage-soft: #DCE5CC;
    --cream: #FAF6EC;
    --cream-2: #F3EEE1;
    --line: #E4DDCB;
    --white: #fff;
    --gold: #C5A24B;
    --red: #C0392B;
    --bar-h: 60px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.hx {
    margin: 0;
    font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ---------- slim identity bar ---------- */
.hx-bar {
    flex: 0 0 auto;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    padding-top: env(safe-area-inset-top);
    background: var(--forest);
    color: #fff;
    box-shadow: 0 2px 12px rgba(34, 51, 27, .18);
    z-index: 5;
}
.hx-back, .hx-call {
    color: #fff; opacity: .9; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; text-decoration: none; flex: 0 0 auto;
}
.hx-back:active, .hx-call:active { background: rgba(255,255,255,.14); }
.hx-call { margin-left: auto; background: rgba(255,255,255,.12); }
.hx-ava {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: var(--sage-soft); color: var(--forest-deep);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px;
}
.hx-ava img { width: 100%; height: 100%; object-fit: cover; }
.hx-who { min-width: 0; line-height: 1.25; }
.hx-who b { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-tag { font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,.16); padding: 2px 7px; border-radius: 99px; margin-left: 4px; vertical-align: 1px; }
.hx-who small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .85; }
.hx-dot { width: 7px; height: 7px; border-radius: 50%; background: #6EE7A8; box-shadow: 0 0 0 0 rgba(110,231,168,.7); animation: hxPulse 2s infinite; }
.hx-dot.off { background: #C9C2B2; animation: none; }
@keyframes hxPulse { 70% { box-shadow: 0 0 0 7px rgba(110,231,168,0); } 100% { box-shadow: 0 0 0 0 rgba(110,231,168,0); } }

/* ---------- conversation area ---------- */
.hx-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.hx-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background:
        radial-gradient(circle at 18% 12%, rgba(169,190,140,.16) 0 38%, transparent 39%),
        radial-gradient(circle at 82% 78%, rgba(197,162,75,.10) 0 32%, transparent 33%),
        var(--cream);
}

.hx-note {
    align-self: center; text-align: center; max-width: 90%;
    font-size: 11.5px; color: var(--muted);
    background: var(--cream-2); border: 1px solid var(--line);
    padding: 7px 12px; border-radius: 99px; margin-bottom: 4px;
}

.hx-msg {
    max-width: 82%;
    padding: 9px 13px 7px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    animation: hxIn .18s ease-out both;
    box-shadow: 0 1px 2px rgba(33,29,23,.07);
}
@keyframes hxIn { from { opacity: 0; transform: translateY(6px); } }
.hx-msg.bot  { align-self: flex-start; background: var(--white); border-bottom-left-radius: 5px; }
.hx-msg.user { align-self: flex-end; background: #DDF2C9; border-bottom-right-radius: 5px; }
.hx-msg.urgent { background: #FDECEA; border: 1px solid #F3C4BE; }
.hx-msg b, .hx-msg strong { font-weight: 800; }
.hx-msg a { color: var(--leaf-deep); font-weight: 700; }
.hx-msg img.hx-photo { display: block; max-width: 100%; border-radius: 11px; margin-bottom: 5px; }
.hx-time { display: block; text-align: right; font-size: 10px; color: var(--muted); margin-top: 2px; }
.hx-msg.user .hx-time::after { content: ' ✓✓'; color: #4C9BD8; letter-spacing: -1px; }

/* typing indicator — deliberately paced so a reply feels written, not printed */
.hx-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 13px 16px; background: var(--white); border-radius: 16px; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(33,29,23,.07); }
.hx-typing i { width: 7px; height: 7px; border-radius: 50%; background: #B9B2A2; animation: hxBlink 1.3s infinite; }
.hx-typing i:nth-child(2) { animation-delay: .18s; }
.hx-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes hxBlink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- quick replies ---------- */
.hx-chips { flex: 0 0 auto; display: flex; gap: 7px; overflow-x: auto; padding: 8px 12px 2px; scrollbar-width: none; }
.hx-chips::-webkit-scrollbar { display: none; }
.hx-chips button {
    flex: 0 0 auto; background: var(--white); border: 1.5px solid var(--sage-soft);
    color: var(--leaf-deep); border-radius: 99px; padding: 8px 15px;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: transform .12s, background .12s;
}
.hx-chips button:active { transform: scale(.96); background: var(--sage-soft); }

/* ---------- composer ---------- */
.hx-form {
    flex: 0 0 auto;
    display: flex; align-items: flex-end; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--cream-2);
    border-top: 1px solid var(--line);
}
.hx-attach, .hx-send {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hx-attach { background: var(--white); color: var(--leaf-deep); border: 1.5px solid var(--line); }
.hx-send { background: var(--leaf); color: #fff; }
.hx-send:disabled { opacity: .45; }
.hx-attach:active, .hx-send:active { transform: scale(.94); }
.hx-form textarea {
    flex: 1 1 auto; resize: none; border: 1.5px solid var(--line); background: var(--white);
    border-radius: 22px; padding: 12px 16px; font: inherit; font-size: 16px; /* 16px stops iOS zoom */
    line-height: 1.35; max-height: 120px; color: var(--ink);
}
.hx-form textarea:focus { outline: none; border-color: var(--sage-soft); box-shadow: 0 0 0 3px rgba(169,190,140,.25); }

.hx-consent { flex: 0 0 auto; text-align: center; font-size: 10.5px; color: var(--muted); padding: 0 14px 6px; background: var(--cream-2); }
.hx-consent a { color: var(--leaf-deep); }

.hx-err { align-self: center; background: #FDECEA; color: var(--red); border: 1px solid #F3C4BE; font-size: 12px; padding: 7px 12px; border-radius: 10px; }

/* ---------- desktop: centre it, keep the phone feel ---------- */
@media (min-width: 760px) {
    body.hx { background: #E9E3D4; align-items: center; }
    .hx-bar, .hx-main { width: 100%; max-width: 560px; margin: 0 auto; }
    .hx-bar { border-radius: 0; }
    .hx-main { border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--cream); }
    .hx-msg { max-width: 76%; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-msg, .hx-typing i, .hx-dot { animation: none !important; }
}

/* ---------- upfront intake gate ---------- */
.hx-gate {
    flex: 1; overflow-y: auto; display: flex; align-items: center; justify-content: center;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.hx-gate-card { width: 100%; max-width: 440px; }
.hx-gate-title { font-size: 19px; line-height: 1.25; margin: 0 0 4px; font-weight: 800; }
.hx-gate-sub { font-size: 13.5px; line-height: 1.45; opacity: .78; margin: 0 0 12px; }
.hx-lbl { display: block; font-size: 13px; font-weight: 700; margin: 10px 0 5px; }
.hx-lbl span { color: #d14343; }
.hx-in {
    width: 100%; box-sizing: border-box; font-size: 16px;   /* 16px stops iOS zooming on focus */
    padding: 11px 14px; border: 1.5px solid rgba(0,0,0,.14); border-radius: 12px;
    background: #fff; color: inherit; outline: none;
}
.hx-in:focus { border-color: var(--hx-accent, #5C7A34); }
.hx-hint { font-size: 12px; opacity: .65; margin-top: 6px; }
.hx-lbl-opt { font-weight: 500; opacity: .6; font-size: 12px; }
.hx-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.hx-seg label { flex: 1 1 auto; min-width: 92px; position: relative; cursor: pointer; }
.hx-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hx-seg span {
    display: block; text-align: center; padding: 9px 10px; font-size: 14px; font-weight: 600;
    border: 1.5px solid rgba(0,0,0,.14); border-radius: 12px; background: #fff; transition: .15s;
}
.hx-seg input:checked + span {
    background: var(--hx-accent, #5C7A34); border-color: var(--hx-accent, #5C7A34); color: #fff;
}
.hx-seg input:focus-visible + span { outline: 2px solid var(--hx-accent, #5C7A34); outline-offset: 2px; }
.hx-err {
    margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
    background: rgba(209,67,67,.1); color: #b32d2d; border: 1px solid rgba(209,67,67,.25);
}
.hx-gate-btn {
    width: 100%; margin-top: 14px; padding: 14px; border: none; border-radius: 13px;
    background: var(--hx-accent, #5C7A34); color: #fff; font-size: 16px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hx-gate-btn:disabled { opacity: .6; cursor: default; }
.hx-gate-foot { text-align: center; font-size: 11.5px; opacity: .6; margin-top: 10px; }