:root{--ink:#173832;--muted:#60746f;--pine:#123f3a;--aqua:#75b9ab;--cream:#f5f1e8;--paper:#fffdf8;--line:#d6ded8;--options-panel:clamp(340px,27vw,420px)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{color:var(--ink);background:var(--cream);font:14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif}
button,textarea,select{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.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}

/* Shell: the assistant rail and the care workspace share one viewport-high row. */
.shell{display:grid;grid-template-columns:328px minmax(0,1fr);height:100vh;min-height:560px;overflow:hidden}

/* Assistant rail: one viewport-high column. --rail-squeeze grows from 0 at 800px of height to
   80px at 720px and trims the portrait and vertical spacing, so every conversation control and
   status line stays visible on short screens. The transcript alone absorbs the remaining height
   and scrolls; the conversation scrolls only when the open tools panel takes its room. */
.assistant-rail{--rail-squeeze:clamp(0px,calc(800px - 100vh),80px);min-width:0;overflow-x:hidden;overflow-y:auto;background:var(--pine);color:#f4fbf8;padding:calc(18px - var(--rail-squeeze)/13) 18px;display:flex;flex-direction:column;gap:calc(12px - var(--rail-squeeze)/20)}
.brand{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.brand p{margin:0;font:700 19px/1 Georgia,serif}
.brand span{color:#b8d7d0;font-size:11px}
/* Portrait frame, as in cruisedemo's rail: the square source keeps a band of empty backdrop above
   her hair as Ditto's working room, and the still, video, and render frame must stay identical.
   So the frame shows only the bottom 86% of the square and the media is pinned to its bottom edge;
   the band comes off the top, unscaled. Its height keeps the rail budget; its width follows. */
.portrait{--portrait-shown:.86;position:relative;flex:none;align-self:center;height:calc(152px - var(--rail-squeeze)*.7);max-width:100%;aspect-ratio:1/var(--portrait-shown);overflow:hidden;border-radius:12px;background:#0c302d;border:1px solid #3d716a}
.portrait img,.portrait video{position:absolute;inset:auto 0 0 0;width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 100%}
.portrait-state{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:999px;color:#123f3a;background:rgba(238,250,246,.92);font-size:11px;font-weight:700}
.portrait.speaking{box-shadow:0 0 0 3px var(--aqua)}
.agent-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.agent-heading-copy{min-width:0}
.agent-heading p,.agent-heading h2{margin:0}
.agent-heading-copy>p:first-child{color:#acd2c9;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.agent-heading h2{font:600 20px Georgia,serif}
#agent-description{color:#c5ded8;font-size:12px}
.capability-list{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;padding:0;margin:0;list-style:none;font-size:10px;color:#c6ded8}
.cap-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:#91a7a2}
.cap-dot.ready{background:#8fe0bd}
.conversation{display:flex;flex-direction:column;min-height:0;gap:calc(8px - var(--rail-squeeze)/26);flex:1;overflow-y:auto;overflow-x:hidden}
.conversation-heading{display:flex;align-items:center;justify-content:space-between}
.conversation-heading h2{margin:0;font:600 16px Georgia,serif}
.quiet-button,.sample-questions button,.mic-button,.send-button,.stop-button{border:1px solid #5d8d84;border-radius:8px;background:#194b46;color:#f6fbf9;padding:7px 9px}
.quiet-button{padding:3px 8px;font-size:11px}
.transcript{flex:1 1 0;min-height:clamp(96px,calc(100vh - 740px),165px);overflow:auto;padding:8px;border:1px solid #396962;border-radius:10px;background:#0c312e}
.transcript::after{content:'';display:block;height:var(--transcript-tail,0px)}
.empty-state p{margin:0;color:#bed7d1}
.message{display:grid;grid-template-columns:27px 1fr;gap:7px;margin:0 0 8px}
.message-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#2a625b;font-size:8px;font-weight:700}
.message.user .message-icon{background:#d9bd66;color:#243d37}
.message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.message.streaming .message-body::after{content:'▌';color:var(--aqua)}
.sample-questions{display:flex;gap:5px}
.sample-questions button{flex:1;padding:4px 6px;font-size:10px;color:#d6e9e4}
.turn-controls{display:flex;align-items:center;gap:12px;color:#bed7d1;font-size:10px}
.turn-controls select{max-width:110px}
.composer{display:grid;grid-template-columns:1fr auto;gap:6px}
.composer textarea{min-width:0;max-height:90px;resize:none;border:0;border-radius:9px;padding:8px 9px;color:#173832;background:#f9f8f3}
.composer-actions{display:flex;flex-direction:column;gap:4px}
.send-button{color:#123c36;background:#c7e8dc;font-weight:700}
.stop-button{background:#8f3a35;border-color:#c67b74}
/* The two capture modes are a setting, not a pair of buttons: a captioned row
   of plain radio controls above the one talk button they configure. */
.microphone-voice{display:flex;flex-direction:column;gap:6px}
.microphone-modes{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:0;padding:0;border:0;min-width:0}
.microphone-modes legend{padding:0;margin-bottom:4px;color:#bdd7d1;font-size:11px}
.microphone-modes label{display:inline-flex;align-items:center;gap:7px;color:#bdd7d1;font-size:12px;cursor:pointer}
.microphone-modes input{width:15px;height:15px;margin:0;accent-color:var(--aqua);cursor:pointer}
.microphone-modes label:has(:checked){color:#f6fbf9}
.microphone-modes input:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.mic-button{--mic-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='11' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;border-color:#d9bd66;background:#d9bd66;color:#243d37;font-size:15px;font-weight:700;user-select:none;touch-action:none}
.mic-button::before{content:'';width:20px;height:20px;flex-shrink:0;background:currentColor;-webkit-mask:var(--mic-glyph) center/contain no-repeat;mask:var(--mic-glyph) center/contain no-repeat}
.mic-button[aria-pressed="true"]{background:#8f3a35;border-color:#c67b74;color:#fff}
.mic-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.5}
.mic-button:disabled{opacity:.6;cursor:wait}
.microphone-status,.chat-footer p{margin:0;color:#bdd7d1;font-size:10px}
.microphone-status{min-height:2.5em;font-size:12px;line-height:1.4}
.microphone-status.error,#status.error{color:#ffd2cc}
/* Status takes its own full-width line above the session detail, so a longer status never
   wraps into a narrow column and pushes the rail into scrolling. */
.chat-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1px 8px}
#status{flex:1 1 100%}
#session-detail{white-space:nowrap}
.mute-button{flex:none;padding:4px 10px;border:1px solid #5d8d84;border-radius:999px;background:transparent;color:#bdd7d1;font-size:12px}
.mute-button:hover{color:#f6fbf9;border-color:var(--aqua)}
.mute-button[aria-pressed="true"]{border-color:var(--aqua);color:var(--aqua)}
.facility-call-active #microphone,.facility-call-active #microphone-modes{pointer-events:none;opacity:.45}

/* Collapsed travel, benefit and contact tools inside the rail */
.care-tools-panel{flex:0 0 auto;margin-top:7px;border:1px solid #5d8d84;border-radius:8px;background:#fffdf8;color:var(--ink)}
.care-tools-panel>summary{cursor:pointer;padding:6px 9px;color:#174f47;font-size:11px;font-weight:700}
.care-tools-panel[open]{max-height:min(38vh,310px);overflow:auto;box-shadow:0 5px 16px rgba(8,39,35,.24)}
.care-tools-content{display:grid;gap:8px;padding:0 9px 9px}
.travel-anchor{display:flex;align-items:end;gap:7px;flex-wrap:wrap;margin:0 0 8px;font-size:10px}
.travel-anchor label{display:grid;gap:2px;color:#42645e}
.travel-anchor select,.travel-anchor button{border:1px solid #a9c5bd;border-radius:6px;padding:5px;background:#fff;color:#173832}
.travel-anchor output{font-size:11px;color:#365a53}
.facility-call{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid #b6cfc7;border-radius:10px;background:#eff6f2}
.facility-call p{margin:0;flex:1;min-width:240px;font-size:11px;color:#315750}
.facility-call button{border:1px solid #39766c;border-radius:7px;background:#fff;color:#17433d;padding:6px 8px}
.human-handoff{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid #d3d8d4;border-radius:10px;background:#fffdf8}
.human-handoff p{margin:0;flex:1;font-size:11px;color:#48615c}
.human-handoff button{border:1px solid #39766c;border-radius:7px;background:#fff;color:#17433d;padding:6px 8px}
.human-handoff-chat{width:100%;display:grid;gap:6px}
.human-handoff-chat [role="log"]{max-height:120px;overflow:auto;padding:6px;border:1px solid #d3d8d4;border-radius:6px;background:#fff;font-size:11px}
.human-handoff-chat [role="log"] p{margin:0 0 4px}
.human-handoff-chat form{display:flex;gap:5px}
.human-handoff-chat textarea{flex:1;min-height:34px}
.human-handoff-chat button{padding:5px 7px}
.print-summary{display:inline-block;justify-self:start;color:#174f47;font-size:11px}
.benefit-estimate{display:flex;align-items:end;gap:7px;flex-wrap:wrap;padding:8px 10px;border:1px solid #d3d8d4;border-radius:10px;background:#fffdf8;font-size:11px}
.benefit-estimate label{display:grid;gap:2px}
.benefit-estimate input,.benefit-estimate button{max-width:112px;border:1px solid #a9c5bd;border-radius:6px;padding:5px;background:#fff;color:#173832}
.benefit-estimate button{font-weight:700}
.benefit-estimate output{color:#365a53}

/* Care workspace: context bar across the top; the map fills the left column and the
   right column holds the search preferences above one independently scrolling options
   panel. The SDUI results zone and CareMap section are transparent to this grid so the
   map and options panel CareMap renders become its direct tracks. */
.care-workspace{position:relative;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--options-panel);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"context context" "map criteria" "map options";gap:10px 14px;padding:14px 18px;overflow:hidden}
.results-zone,.care-map-component{display:contents}
.context-bar{grid-area:context;display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0}
.eyebrow{margin:0 0 2px;color:#508078;font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.context-bar h1{margin:0;font:600 22px Georgia,serif}
.context-bar h1 span{color:#89a099;padding:0 3px}
.demo-label{flex:0 0 auto;max-width:265px;margin:0;padding:6px 10px;border:1px solid #d9bc5e;border-radius:999px;background:#fff5ce;font-size:11px}
.care-criteria{grid-area:criteria;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;margin:0;padding:6px 9px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.care-criteria label{display:grid;gap:1px;min-width:0;font-size:10px;line-height:1.2;color:#42645e}
.care-criteria select,.care-criteria button{min-width:0;border:1px solid #a9c5bd;border-radius:6px;padding:2px 5px;background:#fff;color:#173832;font-size:11px}
.care-criteria button{grid-column:1/-1;background:#e4f1eb;font-weight:700}

/* Map hero */
.map-wrap{grid-area:map;position:relative;isolation:isolate;min-width:0;min-height:0;overflow:hidden;border:1px solid #c4d3cd;border-radius:16px;background:#d9e7e2;box-shadow:0 9px 28px rgba(24,61,54,.09)}
#map{width:100%;height:100%}
.map-welcome{position:absolute;z-index:500;top:10px;right:10px;width:105px;aspect-ratio:3/2;object-fit:cover;border:2px solid rgba(255,255,255,.9);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.tile-state{position:absolute;z-index:500;left:9px;bottom:9px;margin:0;padding:4px 8px;border-radius:6px;background:rgba(255,253,248,.92);color:#294c46;font-size:10px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tile-state[data-state="error"]{color:#7b322c;background:#fff0ed}
.care-pin-shell{background:transparent;border:0}
.care-pin-shell span{display:grid;place-items:center;width:34px;height:34px;border:3px solid white;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);color:white;background:#28766b;box-shadow:0 2px 8px rgba(0,0,0,.28);font-weight:800}
.care-pin-shell.selected-care-marker span,.selected-care-marker .care-pin-shell span{background:#b9692f;transform:rotate(-45deg) scale(1.15)}
.care-pin-shell.compared-care-marker span{background:#475aa0}
.care-pin-shell.highlighted-care-marker span{box-shadow:0 0 0 4px #f2c14e,0 2px 10px rgba(0,0,0,.35)}
.compared-location-option{font-weight:700;color:#314781}
.retained-care-pin,.compared-saved-care-pin{background:transparent;border:0}
.retained-care-pin span,.compared-saved-care-pin span{display:grid;place-items:center;width:34px;height:34px;border:3px solid white;border-radius:50%;color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.retained-care-pin span{background:#a3502f}
.compared-saved-care-pin span{background:#475aa0}
.travel-anchor-pin{background:transparent;border:0}
.travel-anchor-pin span{display:grid;place-items:center;width:24px;height:24px;border:2px solid #fff;border-radius:50%;background:#354f92;color:#fff;font:700 12px/1 system-ui;box-shadow:0 1px 5px rgba(0,0,0,.35)}

/* SDUI notices float over the top centre of the map, clear of zoom, inset and attribution. */
.overlay-zone{grid-area:map;align-self:start;justify-self:center;z-index:1000;display:grid;gap:6px;width:min(380px,calc(100% - 260px));margin-top:12px;pointer-events:none}
.overlay-zone [data-sdui-notice]{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #b6cfc7;border-radius:10px;background:rgba(255,253,248,.97);color:var(--ink);font-size:12px;box-shadow:0 4px 14px rgba(24,61,54,.18);pointer-events:auto}
.overlay-zone [data-sdui-part="text"]{flex:1}
.overlay-zone [data-sdui-part="dismiss"]{border:1px solid #a9c5bd;border-radius:6px;background:#fff;color:#17433d;padding:3px 7px;font-size:11px}
.overlay-zone [data-sdui-tone="warn"]{border-color:#d9bc5e;background:#fff8dc}
.overlay-zone [data-sdui-tone="error"]{border-color:#d49a92;background:#fff0ed;color:#7b322c}

/* Options panel: the summary stays at its top; #cards is the one scroller. The presenter
   orders its children doctor cards first, then shortlist, saved detail, comparison, call,
   travel and support items. */
.care-options-panel{grid-area:options;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
.care-summary{flex:0 0 auto;margin:0;color:var(--muted);font-size:11px;line-height:1.3}
.cards{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px}
.cards>*{margin:0 0 9px}
.cards>:last-child{margin-bottom:0}

/* Doctor cards: a whole-face portrait, name and specialty above one row per location.
   Each row is its own select and save target; a selected row opens its details with the
   facility exterior and arrival photos beneath itself. */
.practitioner-card{min-width:0;padding:9px 10px 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 3px 12px rgba(32,65,59,.06)}
.practitioner-head{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;margin:0 0 8px}
.practitioner-portrait,.practitioner-initials{width:72px;height:72px;border-radius:10px;background:#dbe8e2}
.practitioner-portrait{display:block;object-fit:cover;object-position:50% 30%}
.practitioner-initials{display:grid;place-items:center;color:#2e5f57;font:700 22px Georgia,serif}
.practitioner-text{min-width:0}
.practitioner-text h3{margin:0 0 2px;font:600 16px Georgia,serif}
.practitioner-text p{margin:0;color:#566d68;font-size:11px}
.practitioner-text .practitioner-summary{margin-top:2px;font-size:10px;color:#6b7f7a}
.practitioner-locations{display:grid;gap:6px}
.care-option{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"select save" "detail detail";column-gap:6px;align-items:start;min-width:0;padding:5px;border:1px solid #e1e7e2;border-radius:9px;background:#fff}
.care-option[data-selected="true"]{border-color:#2e746a;box-shadow:0 0 0 2px rgba(46,116,106,.3)}
.care-option[data-compared="true"]{border-color:#475aa0;box-shadow:0 0 0 2px rgba(71,90,160,.28)}
.care-option[data-highlighted="true"]{background:#fff7df;outline:2px solid #d9a441;outline-offset:1px;animation:row-highlight 1.2s ease-out 1}
@keyframes row-highlight{from{background:#ffe6a3}to{background:#fff7df}}
.option-card{grid-area:select;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:8px;align-items:start;width:100%;min-width:0;text-align:left;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:7px;padding:3px}
.option-card.selected{grid-template-columns:minmax(0,1fr)}
.option-card:hover{border-color:#77a99f}
.option-card:focus-visible{outline:3px solid #69a99d;outline-offset:1px}
.option-thumb{display:block;width:56px;aspect-ratio:3/2;object-fit:cover;border-radius:5px;background:#dbe8e2}
.option-facts{min-width:0}
.option-facts p{margin:0;color:#566d68;font-size:10px}
.option-facts .option-facility{color:#173832;font-size:12px;font-weight:700}
.option-card .price{display:block;margin:1px 0 0;color:#173832;font-size:16px}
.option-facts .network-label{color:#237065;font-weight:700}
.save-option{grid-area:save;align-self:start;margin-top:3px;white-space:nowrap}
.save-option,.shortlist-tray button,.price-comparison button,.handoff-status button{border:1px solid #4d8278;border-radius:7px;background:#e6f2ee;color:#17433d;padding:5px 7px;font-size:11px}
.option-detail-panel{grid-area:detail;min-width:0;padding:6px 3px 2px}
.option-details{margin:0 0 6px;color:#234d46;font-size:10px}
.option-media{display:grid;gap:6px;margin:0}
.option-media img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;border-radius:6px;background:#dbe8e2}
.care-option .option-media{grid-template-columns:repeat(2,minmax(0,1fr))}
.saved-detail .option-media{grid-template-columns:repeat(15,minmax(0,1fr));align-items:start;margin-bottom:8px}
.saved-detail .option-media img{grid-column:span 5}
.saved-detail .option-media img:first-child{grid-column:span 6;aspect-ratio:1;object-position:50% 30%}
.saved-detail .option-media img:nth-child(2){grid-column:span 9}
@media (prefers-reduced-motion:reduce){.care-option[data-highlighted="true"]{animation:none}}

/* Panel items that are not result cards */
.shortlist-tray,.price-comparison,.travel-panel,.handoff-status{padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:#f5f7f3}
.shortlist-tray,.price-comparison,.handoff-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.shortlist-tray>p,.price-comparison>p,.handoff-status>p{flex:1 1 150px}
.shortlist-tray p,.price-comparison p,.travel-panel p,.handoff-status p{margin:0;color:#365a53;font-size:11px}
.shortlist-item{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.shortlist-item p{flex:1;margin:0;font-size:11px}
.shortlist-item button{border:1px solid #4d8278;border-radius:7px;background:#e6f2ee;color:#17433d;padding:5px 7px;font-size:11px}
.saved-detail{padding:9px 11px;border:2px solid #6f9e94;border-radius:10px;background:#edf6f2}
.saved-detail h3,.saved-detail p{margin:0 0 6px}
.saved-detail h3{font:600 14px Georgia,serif}
.saved-detail p{font-size:11px;color:#254c45}
.comparison-rows{flex:1 0 100%;display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.comparison-rows:empty{display:none}
.comparison-row{min-width:0;padding:6px;border:1px solid #c6d8d1;border-radius:7px;background:#fff}
.comparison-row p{margin:0;font-size:10px}
.comparison-row details{margin-top:6px;font-size:10px}
.comparison-row details summary{cursor:pointer;color:#21594f}
.comparison-row details p{margin-top:5px}
.comparison-compact{font-weight:700}
.comparison-bar{margin-top:5px;min-width:8%;padding:3px;color:#fff;background:#29786c;border-radius:4px;font-size:10px;white-space:nowrap}

/* Narrow screens: one column; the map keeps a fixed height above the options and the
   page itself scrolls, so no region is clipped or nested in a second scroller. */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);height:auto;min-height:0;overflow:visible}
  .assistant-rail{order:2}
  .care-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"context" "criteria" "map" "options";padding:14px 16px;overflow:visible}
  .context-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .map-wrap{height:clamp(300px,55vh,440px)}
  .overlay-zone{width:calc(100% - 150px)}
  .cards{flex:none;overflow:visible;scrollbar-gutter:auto;padding:0}
}