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

: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; }
}