/* Patient intake — the chat panel that slides up on landing CTA tap
   plus the form fields that orchestrator.js renders into it.

   Loaded only by landing.html (the only page that opens the intake).
   Brand tokens from brand.css; resets from base.css.
*/

/* ═══════════════════════════════════════════
   CHAT PANEL — overlay + sheet
   ═══════════════════════════════════════════ */
.chat-overlay{position:fixed;inset:0;background:rgba(42,47,43,0.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999;opacity:0;pointer-events:none;transition:opacity 0.35s ease}
.chat-overlay.open{opacity:1;pointer-events:auto}
/* On mobile we pin to the visual viewport (top:var(--vvo);
   height:var(--vvh)) so the panel follows the visible area when
   the iOS keyboard pops up — NOT to bottom:0, which anchors to the
   layout viewport and leaves inputs trapped behind the keyboard.
   Desktop keeps the classic bottom-sheet centred 440px sheet. */
.chat-panel{position:fixed;left:0;right:0;bottom:var(--vvb,0);z-index:1000;height:min(680px, var(--vvh, 78vh));max-height:var(--vvh, 680px);background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -8px 48px rgba(42,47,43,0.15);display:flex;flex-direction:column;overflow:hidden;transform:translateY(100%);transition:transform 0.45s cubic-bezier(0.16, 1, 0.3, 1)}
.chat-panel.open{transform:translateY(0)}
/* Desktop: vertically center the sheet so it doesn't hug the bottom of
   the viewport. We pin top:50% and translate the panel up half its
   own height; closed state keeps the slide-up entrance. Border radius
   becomes a full card (not just top corners) since it's floating. */
@media (min-width:640px){
  .chat-panel{left:50%;right:auto;top:50%;bottom:auto;width:440px;border-radius:var(--radius-lg);transform:translate(-50%, calc(-50% + 100vh))}
  .chat-panel.open{transform:translate(-50%, -50%)}
}
@media (max-width:480px){
  .chat-panel{top:var(--vvo,0);bottom:auto;height:var(--vvh, 100dvh);max-height:var(--vvh, 100dvh);border-radius:0}
}
/* Body scroll lock while chat is open — prevents iOS from scrolling
   the whole document to "reveal" a focused input, which was the
   root cause of the "page jumps to random part" complaint on iPhone. */
body.chat-open{position:fixed;width:100%;overflow:hidden}
/* Keep focused inputs off the keyboard edge inside .msgs scroll. */
.msgs input,.msgs select,.msgs textarea{scroll-margin-top:24px;scroll-margin-bottom:24px}

/* ═══════════════════════════════════════════
   CHAT PANEL HEADER
   ═══════════════════════════════════════════ */
.chat-handle{padding:12px 0 4px;text-align:center;flex-shrink:0;cursor:pointer}
.chat-handle-bar{width:36px;height:4px;border-radius:2px;background:rgba(0,0,0,0.12);margin:0 auto}
.chat-hdr{padding:8px 18px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);flex-shrink:0}
.chat-hdr-av{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg, var(--sage-light) 0%, var(--bg-2) 100%);display:flex;align-items:center;justify-content:center;color:var(--sage-deep);box-shadow:0 1px 3px rgba(42,47,43,0.06) inset}
.chat-hdr-av svg{width:22px;height:22px;display:block}
.chat-hdr-info{flex:1}
.chat-hdr-name{font-weight:600;font-size:0.9rem;color:var(--ink);font-family:var(--serif)}
.chat-hdr-sub{font-size:0.68rem;color:var(--accent);font-weight:500;display:flex;align-items:center;gap:4px}
.chat-hdr-sub::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.chat-hdr-close{background:none;border:none;font-size:20px;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;transition:background 0.2s,color 0.2s;line-height:1}
.chat-hdr-close:hover{background:rgba(0,0,0,0.05);color:var(--ink)}

/* ═══════════════════════════════════════════
   MESSAGE STREAM (.msgs scroller + bubbles)
   ═══════════════════════════════════════════ */
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;min-height:0}
.m{max-width:82%;padding:11px 15px;border-radius:18px;font-size:0.88rem;line-height:1.5;word-wrap:break-word;animation:fi 0.25s ease both}
.m-ai{background:white;align-self:flex-start;border-bottom-left-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,0.04);color:var(--ink)}
.m-u{background:linear-gradient(135deg, var(--accent) 0%, var(--sage-deep) 100%);color:white;align-self:flex-end;border-bottom-right-radius:6px}
.typing{display:none;align-self:flex-start;padding:12px 18px;background:white;border-radius:18px;border-bottom-left-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.typing.show{display:flex;gap:5px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:0.4;animation:tb 1.4s infinite}
.typing span:nth-child(2){animation-delay:0.2s}
.typing span:nth-child(3){animation-delay:0.4s}

/* ═══════════════════════════════════════════
   OPTION CARDS (.opts > .oc — protocol picker)
   ═══════════════════════════════════════════ */
.opts{display:flex;flex-direction:column;gap:8px;align-self:flex-start;max-width:90%;animation:fadeUp 0.35s ease both}
.oc{background:white;border:2px solid rgba(0,0,0,0.06);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:all 0.25s ease}
.oc:hover{border-color:var(--accent);background:var(--sage-mist);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.oc:active{transform:scale(0.98)}
.oc-l{font-weight:600;font-size:0.88rem;color:var(--ink)}
.oc-p{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--sage-dark);margin:4px 0}
.oc-d{font-size:0.72rem;color:var(--text-soft);line-height:1.4}
.oc-b{display:inline-block;font-size:0.6rem;font-weight:600;padding:3px 8px;border-radius:6px;margin-bottom:4px;letter-spacing:0.3px}
.ba{background:var(--sage-light);color:var(--sage-dark)}
.bb{background:#fef3c7;color:#92400e}
.pbtn{display:inline-block;padding:14px 32px;background:linear-gradient(135deg, var(--accent) 0%, var(--sage-deep) 100%);color:white;font-weight:600;font-size:0.9rem;border-radius:12px;text-decoration:none;transition:all 0.25s ease;margin-top:6px;box-shadow:var(--shadow-glow)}
.pbtn:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(91,124,107,0.3)}

/* ═══════════════════════════════════════════
   CHAT INPUT (the bottom send-bar)
   ═══════════════════════════════════════════ */
.cinput{background:white;border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:10px;align-items:center;flex-shrink:0}
@media (max-width:480px){.cinput{padding-bottom:max(10px, env(safe-area-inset-bottom))}}
/* font-size 16px — anything smaller triggers iOS auto-zoom on focus,
   which the user perceives as "the page is suddenly zoomed in" with
   no automatic way back. 16px is Apple's documented threshold. */
.cinput input{flex:1;border:1.5px solid rgba(0,0,0,0.08);border-radius:22px;padding:10px 16px;font-size:16px;font-family:var(--sans);outline:none;background:var(--bg);color:var(--ink);transition:border-color 0.2s,box-shadow 0.2s}
/* Defense-in-depth: any input/textarea/select inside the chat panel
   gets ≥16px regardless of inline styles. Catches dynamically-
   rendered form fields from orchestrator.js. !important is
   intentional — inline styles otherwise win and re-trigger the
   iOS zoom bug. */
.chat-panel input,.chat-panel textarea,.chat-panel select,
.msgs input,.msgs textarea,.msgs select{font-size:16px !important}
.cinput input::placeholder{color:var(--muted)}
.cinput input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,124,107,0.1)}
.cbtn{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg, var(--accent) 0%, var(--sage-deep) 100%);border:none;color:white;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.2s,box-shadow 0.2s}
.cbtn:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}
.cbtn:disabled{background:#d0d5cf;box-shadow:none;transform:none}

/* ═══════════════════════════════════════════
   JS-RENDERED FORM FIELDS — orchestrator.js
   uses these classes instead of writing inline
   styles for every field. Add a class here
   when you want to add a new field shape;
   don't write style="..." in the JS templates.
   ═══════════════════════════════════════════ */

/* Standard text/email/phone/number input. Matches the .cinput input
   shape so the JS-rendered fields look like part of the same chat. */
.intake-input{width:100%;padding:12px;border:2px solid #e8e8e8;border-radius:10px;font-size:16px;margin-bottom:10px;font-family:inherit}

/* Compact variant used inside autocomplete rows where the field shares
   a row with a + button — slightly tighter padding and radius. */
.intake-input-sm{width:100%;padding:10px;border:2px solid #e8e8e8;border-radius:8px;font-size:16px;font-family:inherit}

/* Multi-line free-text canvas (situation textarea). */
.intake-textarea{width:100%;padding:14px;border:2px solid #e8e8e8;border-radius:12px;font-size:16px;margin-bottom:10px;font-family:inherit;resize:vertical;min-height:96px;line-height:1.5;background:#fff}

/* Horizontal row container for: input(s) + add button. Used by the
   medication / allergy / condition autocomplete chip-inputs. */
.intake-row{display:flex;gap:6px;margin-bottom:6px;position:relative}

/* The + button at the end of an autocomplete row. Adds the typed
   item as a chip in the running list. */
.intake-add-btn{padding:10px 14px;background:#7a9e7e;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}

/* Autocomplete suggestion dropdown — absolutely positioned under
   the input. JS toggles display:block when there are suggestions. */
.intake-suggest-list{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e8e8e8;border-radius:8px;max-height:160px;overflow-y:auto;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.08);margin-top:2px}

/* Each suggestion row inside the dropdown. */
.intake-suggest-item{padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid #f0f0f0}

/* Segmented pill option (yes/no/age-bracket pickers). */
.intake-seg{flex:1;text-align:center;padding:10px;font-size:13px;min-width:60px;cursor:pointer}

/* Container for chips already added (under an autocomplete row). */
.intake-chips{margin-bottom:10px}

/* ═══════════════════════════════════════════
   ANIMATIONS used by chat panel
   ═══════════════════════════════════════════ */
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes tb{0%,60%,100%{opacity:0.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}