:root {
  --ink: #12333b;
  --muted: #587078;
  --brand: #0b6e69;
  --brand-dark: #07534f;
  --brand-pale: #e6f4f2;
  --surface: #ffffff;
  --canvas: #f4f8f8;
  --line: #d7e4e3;
  --danger: #b42331;
  --danger-dark: #861c27;
  --danger-pale: #fff0f1;
  --warn: #a86400;
  --warn-pale: #fff7e9;
  --success: #27734a;
  --shadow: 0 12px 36px rgb(10 55 58 / 9%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; line-height: 1.55; background: var(--canvas); }
button, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid #f3b34a; outline-offset: 3px; }
.shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: .5rem; left: .5rem; transform: translateY(-180%); z-index: 10; padding: .65rem .85rem; border-radius: .5rem; background: #fff; color: var(--ink); font-weight: 800; box-shadow: var(--shadow); }
.skip-link:focus { transform: translateY(0); }

.site-header { min-height: 76px; display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .75rem max(1rem, calc((100% - 1120px) / 2)); border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 92%); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 4; }
.brand { display: inline-flex; align-items: center; gap: .72rem; color: var(--ink); text-decoration: none; line-height: 1.15; }
.brand strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); margin-top: .17rem; font-weight: 600; }
.logo { display: inline-flex; gap: 3px; align-items: flex-end; width: 40px; height: 40px; padding: 8px 7px; background: var(--brand); border-radius: 12px; box-shadow: 0 6px 14px rgb(11 110 105 / 25%); }
.logo i { display: block; width: 7px; background: white; border-radius: 4px; }
.logo i:nth-child(1), .logo i:nth-child(3) { height: 12px; }.logo i:nth-child(2) { height: 24px; }
.header-actions { display: flex; gap: .5rem; align-items: center; }
.header-emergency { min-height: 38px; padding: .42rem .65rem; color: #fff; background: var(--danger); border: 1px solid var(--danger); border-radius: .55rem; font-weight: 900; }.header-emergency:hover { background: var(--danger-dark); }
.language-select, .modal select { padding: .55rem .65rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .55rem; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .55rem; background: white; font-size: 1.1rem; }
.icon-button:hover { background: var(--brand-pale); }

.hero { padding-block: 4.5rem 3.5rem; text-align: center; }
.offline-status { display: inline-block; padding: .34rem .72rem; border: 1px solid #bfe1dc; border-radius: 100px; color: var(--brand-dark); background: var(--brand-pale); font-size: .86rem; font-weight: 800; }
.offline-status.offline { color: #1d6749; background: #e9f8ee; border-color: #bee4c9; }
.voice-status:not(:empty) { display: inline-block; margin-left: .3rem; padding: .2rem .6rem; border-radius: 100px; background: var(--brand-pale); color: var(--brand-dark); font-size: .8rem; font-weight: 700; }

.voice-conversation { padding-top: 2.25rem; text-align: center; }
.voice-conversation-controls { display: flex; align-items: center; justify-content: center; gap: .85rem; flex-wrap: wrap; margin-top: .35rem; }
.primary-talk-button { display: inline-flex; align-items: center; gap: .65rem; min-width: 280px; justify-content: center; padding: 1.1rem 2.1rem; border: none; border-radius: 100px; color: #fff; background: var(--brand); box-shadow: var(--shadow); font-size: 1.15rem; font-weight: 900; letter-spacing: .01em; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.primary-talk-button:hover { background: var(--brand-dark); }
.primary-talk-button:active { transform: scale(.98); }
.primary-talk-button .mic-icon { font-size: 1.4rem; }
.primary-talk-button.is-listening { background: var(--danger); animation: talkPulse 1.1s ease-in-out infinite; }
.primary-talk-button.is-thinking { background: var(--warn); }
.primary-talk-button.is-speaking { background: var(--brand-dark); animation: talkPulse 1.6s ease-in-out infinite; }
.primary-talk-button.is-ready { background: var(--brand); animation: talkPulse 1.8s ease-in-out infinite; }
.primary-stop-button { padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: 100px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); font-size: 1rem; font-weight: 800; cursor: pointer; }
.primary-stop-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.voice-conversation-hint { max-width: 520px; margin: .85rem auto 0; color: var(--muted); font-size: .92rem; }
@keyframes talkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(11 110 105 / 35%); } 50% { box-shadow: 0 0 0 14px rgb(11 110 105 / 0%); } }
.primary-talk-button.is-listening { animation-name: talkPulseDanger; }
@keyframes talkPulseDanger { 0%, 100% { box-shadow: 0 0 0 0 rgb(180 35 49 / 40%); } 50% { box-shadow: 0 0 0 14px rgb(180 35 49 / 0%); } }
.eyebrow { margin: 0 0 .5rem; color: var(--brand); letter-spacing: .1em; font-size: .75rem; font-weight: 900; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 850px; margin: 1.25rem auto .9rem; font-size: clamp(2.15rem, 5vw, 4rem); letter-spacing: -.055em; line-height: 1.07; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.035em; line-height: 1.15; margin-bottom: .7rem; }
.hero-copy { max-width: 720px; margin: auto; color: var(--muted); font-size: 1.08rem; }
.situation-form { max-width: 770px; margin: 2rem auto 0; padding: 1.25rem; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 1.15rem; box-shadow: var(--shadow); }
.situation-form label { display: block; margin-bottom: .5rem; font-weight: 800; }
textarea { width: 100%; padding: .8rem; color: var(--ink); border: 1px solid #aebfbe; border-radius: .7rem; resize: vertical; min-height: 86px; }
textarea::placeholder { color: #718688; }
.input-hint { margin: .45rem 0 1rem; color: var(--muted); font-size: .87rem; }
.action-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.button { min-height: 48px; padding: .65rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid transparent; border-radius: .65rem; font-weight: 850; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.button-primary { color: #fff; background: var(--brand); }.button-primary:hover { background: var(--brand-dark); }
.button-secondary { color: var(--brand-dark); background: var(--brand-pale); border-color: #bbe0da; }.button-secondary:hover { background: #d3ede8; }
.button-emergency { color: #fff; background: var(--danger); margin-left: auto; }.button-emergency:hover { background: var(--danger-dark); }
.button-help { color: var(--danger-dark); background: var(--danger-pale); border-color: #e9a7ad; }.button-help:hover { color: #fff; background: var(--danger); border-color: var(--danger); }

.quick-action-panel { max-width: 1030px; margin: 2.25rem auto 0; padding: 1.25rem; text-align: left; background: rgb(255 255 255 / 82%); border: 1px solid var(--line); border-radius: 1.15rem; box-shadow: var(--shadow); }.quick-action-heading { display: flex; gap: 1.5rem; align-items: end; justify-content: space-between; margin-bottom: 1rem; }.quick-action-heading h2 { margin-bottom: 0; }.quick-action-heading > p { max-width: 410px; margin-bottom: 0; color: var(--muted); font-size: .92rem; }.quick-action-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }.quick-action-card { min-height: 118px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .2rem; padding: .78rem; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .75rem; font-size: .86rem; }.quick-action-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 8px 18px rgb(10 55 58 / 10%); }.quick-action-card > span { font-size: 1.3rem; }.quick-action-card small { color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .035em; }.quick-action-card.urgency-critical { border-top: 3px solid var(--danger); }.quick-action-card.urgency-red { border-top: 3px solid #d7683d; }.quick-action-card.urgency-yellow { border-top: 3px solid #d19b28; }

.guidance-section { margin-bottom: 2rem; padding: clamp(1rem, 3vw, 1.7rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 92px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin-bottom: 0; }.voice-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
.text-button { padding: .45rem .55rem; border: 0; border-radius: .5rem; color: var(--brand-dark); background: transparent; font-weight: 800; }.text-button:hover:not(:disabled) { background: var(--brand-pale); }.text-button:disabled { cursor: not-allowed; opacity: .48; }
.read-aloud-button { width: 100%; min-height: 55px; margin-top: 1rem; color: #fff; background: linear-gradient(90deg, var(--brand), #167f77); border: 0; border-radius: .75rem; font-size: 1.03rem; font-weight: 900; }.read-aloud-button:hover:not(:disabled) { background: linear-gradient(90deg, var(--brand-dark), var(--brand)); }.read-aloud-button:disabled { opacity: .5; cursor: not-allowed; }
.conversation { display: grid; gap: .9rem; margin-top: 1.15rem; }
.message { display: flex; gap: .7rem; max-width: 860px; padding: 1rem; border-radius: .9rem; }.assistant-message { background: #f0f7f7; border: 1px solid #d6e8e6; }.user-message { justify-self: end; color: white; background: var(--brand); }.message p:last-child { margin-bottom: 0; }.message-icon { flex: 0 0 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-weight: 900; }
.message-heading { font-weight: 900; margin-bottom: .35rem !important; }.user-message .message-icon { display: none; }
.urgency { display: inline-block; padding: .25rem .5rem; margin-bottom: .65rem; border-radius: .4rem; font-size: .78rem; letter-spacing: .045em; font-weight: 900; }.urgency.green { color: #175f3c; background: #dff5e7; }.urgency.yellow { color: #8b5300; background: #fff0cf; }.urgency.red { color: #a32332; background: #ffe3e6; }.urgency.critical { color: #fff; background: var(--danger); }
.question-card, .step-card, .choice-card { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; }.question-card h3, .step-card h3, .choice-card h3 { font-size: .95rem; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; }.question-options, .choice-options { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }.urgency-card { border-color: #e6b1b7; background: linear-gradient(130deg, #fff, #fff5f6); }.urgency-card h3 { color: var(--danger-dark); }.call-when { margin: .75rem 0; padding: .65rem .75rem; border-radius: .5rem; background: #fff; }.safety-guardrail { margin: .75rem 0; color: #5b3640; font-size: .87rem; font-weight: 750; }
.answer-button, .choice-button { min-height: 45px; padding: .55rem .75rem; color: var(--brand-dark); background: #fff; border: 1px solid #9ec9c4; border-radius: .55rem; font-weight: 850; }.answer-button:hover, .choice-button:hover { color: #fff; background: var(--brand); border-color: var(--brand); }.answer-button.danger-answer { color: var(--danger); border-color: #e9a7ad; }.answer-button.danger-answer:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.progress { display: flex; gap: .34rem; margin-bottom: .85rem; }.progress span { width: 9px; height: 9px; border-radius: 50%; background: #c9d9d7; }.progress span.active { background: var(--brand); }.step-number { color: var(--muted); font-size: .83rem; font-weight: 800; }.step-copy { font-size: 1.12rem; font-weight: 750; }.step-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; }.step-actions .button { min-width: 0; }.avoid-list { margin: .9rem 0 0; padding: .8rem 1rem .8rem 2rem; border-left: 3px solid #e5a53b; background: var(--warn-pale); }.avoid-list p { font-weight: 850; margin-bottom: .25rem; }
.restart-row { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .6rem; }

.utility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 4rem; }.info-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: 1rem; background: #fff; }.card-icon { font-size: 1.5rem; }.info-card h2 { margin: .45rem 0; font-size: 1.25rem; }.info-card p { color: var(--muted); }.demo-samples { display: grid; gap: .5rem; margin-top: .85rem; }.demo-samples button { text-align: left; }
.content-section { margin-bottom: 4rem; }.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }.how-grid li { display: flex; align-items: center; gap: .65rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .85rem; font-weight: 750; }.how-grid span { display: grid; flex: 0 0 29px; height: 29px; place-items: center; color: white; background: var(--brand); border-radius: 50%; font-size: .85rem; font-weight: 900; }.how-grid p { margin: 0; }
.scenario-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }.scenario-card { min-height: 128px; padding: 1rem; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .85rem; font-weight: 850; }.scenario-card:hover { border-color: var(--brand); box-shadow: 0 8px 18px rgb(10 55 58 / 8%); }.scenario-card span { display: block; margin-bottom: .35rem; font-size: 1.35rem; }.scenario-card small { color: var(--muted); font-weight: 650; }
.impact-section { display: grid; grid-template-columns: 74px 1fr; gap: 1rem; margin-bottom: 4rem; padding: clamp(1.4rem, 4vw, 2.5rem); color: #f7ffff; background: linear-gradient(115deg, #0d5c5a, #123f52); border-radius: 1.15rem; }.impact-section .eyebrow { color: #a5dfd9; }.impact-section h2 { max-width: 740px; }.impact-section p { max-width: 820px; color: #d8eeee; }.impact-mark { display: grid; width: 60px; height: 60px; place-items: center; color: var(--brand-dark); background: #d7f1ed; border-radius: 1rem; font-size: 2rem; font-weight: 900; }.why-points { display: flex; flex-wrap: wrap; gap: .55rem; max-width: 900px; margin: 1rem 0 0; padding: 0; list-style: none; }.why-points li { padding: .35rem .55rem; color: #f4ffff; border: 1px solid rgb(201 239 234 / 50%); border-radius: 100px; font-size: .82rem; font-weight: 800; }
.site-footer { padding-block: 1.25rem 2rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .87rem; }.site-footer p:first-child { max-width: 900px; }.site-footer p:last-child { margin-bottom: 0; }

.modal { width: min(540px, calc(100% - 1.5rem)); padding: 1.25rem; color: var(--ink); border: 0; border-radius: 1rem; box-shadow: 0 25px 65px rgb(0 0 0 / 22%); }.modal::backdrop { background: rgb(7 26 31 / 60%); }.modal-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; }.modal-top h2 { margin: 0; }.modal label:not(.toggle-row) { display: block; margin: 1rem 0 .35rem; font-weight: 800; }.modal select { width: 100%; }.modal ul { padding-left: 1.25rem; }.emergency-number { margin: .75rem 0; padding: .75rem; color: var(--danger-dark); background: var(--danger-pale); border-radius: .55rem; font-weight: 900; }.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-weight: 800; }.toggle-row input { width: 2.7rem; height: 1.45rem; accent-color: var(--brand); }

body.large-text { font-size: 118%; } body.high-contrast { --ink: #000; --muted: #263238; --brand: #005f5a; --brand-dark: #003f3b; --line: #57716f; --canvas: #fff; } body.high-contrast .assistant-message { border-color: #0a3533; background: #e5f7f5; }
body[dir="rtl"] .situation-form, body[dir="rtl"] .scenario-card, body[dir="rtl"] .quick-action-card, body[dir="rtl"] .demo-samples button { text-align: right; } body[dir="rtl"] .avoid-list { padding: .8rem 2rem .8rem 1rem; border-left: 0; border-right: 3px solid #e5a53b; }

@media (max-width: 980px) { .quick-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px) { .hero { padding-block: 3rem 2.5rem; }.quick-action-heading { align-items: start; flex-direction: column; gap: .3rem; }.quick-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.how-grid { grid-template-columns: repeat(2, 1fr); }.scenario-grid { grid-template-columns: repeat(2, 1fr); }.button-emergency { margin-left: 0; }.action-row .button { flex: 1 1 200px; }.step-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }.utility-grid { margin-bottom: 3rem; }.content-section { margin-bottom: 3rem; } }
@media (max-width: 520px) { .site-header { min-height: 65px; padding-inline: .75rem; }.brand small, .header-emergency span { display: none; }.header-emergency { width: 38px; padding: 0; }.logo { width: 35px; height: 35px; border-radius: 10px; }.header-actions { gap: .25rem; }.language-select { max-width: 96px; }.shell { width: min(100% - 1rem, 1120px); }.hero { padding-top: 2.25rem; } h1 { font-size: 2.15rem; }.situation-form, .quick-action-panel { padding: 1rem; }.quick-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }.quick-action-card { min-height: 100px; }.guidance-section { padding: 1rem; }.section-heading { display: block; }.voice-tools { justify-content: flex-start; margin-top: .55rem; }.how-grid, .utility-grid { grid-template-columns: 1fr; }.scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.scenario-card { min-width: 0; min-height: 110px; padding: .75rem; overflow-wrap: anywhere; }.impact-section { grid-template-columns: 1fr; }.impact-mark { width: 48px; height: 48px; }.message { padding: .8rem; }.answer-button, .choice-button { width: 100%; }.question-options, .choice-options { display: grid; grid-template-columns: 1fr; }.step-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

[hidden] { display: none !important; }
.app-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.welcome-screen { min-height: min(760px, calc(100svh - 80px)); display: grid; align-content: center; justify-items: center; padding: 4rem 1.5rem; text-align: center; }
.welcome-mark { margin-bottom: 1.2rem; }
.welcome-mark .logo { width: 64px; height: 64px; gap: 5px; padding: 13px 12px; border-radius: 19px; }
.welcome-mark .logo i { width: 10px; }.welcome-mark .logo i:nth-child(1), .welcome-mark .logo i:nth-child(3) { height: 18px; }.welcome-mark .logo i:nth-child(2) { height: 36px; }
.welcome-screen .eyebrow { margin-bottom: .25rem; }
.welcome-screen h1 { max-width: 760px; margin: .8rem auto 1rem; }
.welcome-screen .hero-copy { max-width: 660px; }
.welcome-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.welcome-primary, .welcome-secondary { min-width: 172px; min-height: 56px; font-size: 1.05rem; }
.welcome-consent { max-width: 590px; margin: 1rem auto; color: var(--muted); font-size: .86rem; }
.welcome-emergency { min-height: 46px; padding: .6rem 1rem; color: var(--danger-dark); background: var(--danger-pale); border: 1px solid #e9a7ad; border-radius: .7rem; font-weight: 850; }
#mainExperience { padding-top: 1.2rem; }
.safety-banner { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; padding: .8rem 1rem; background: var(--danger-pale); border: 1px solid #e9a7ad; border-radius: .85rem; }
.safety-banner p { flex: 1; margin: 0; color: var(--danger-dark); font-size: .9rem; }
.safety-mark { display: grid; flex: 0 0 28px; height: 28px; place-items: center; color: #fff; background: var(--danger); border-radius: 50%; font-weight: 900; }
.banner-emergency { color: var(--danger-dark); background: #fff; border: 1px solid #e9a7ad; border-radius: .55rem; padding: .5rem .65rem; font-weight: 850; }
.voice-strip { margin: 1rem 0; padding: 1.4rem 1rem; text-align: center; background: linear-gradient(180deg, #fff, #edf7f6); border: 1px solid var(--line); border-radius: 1.15rem; }
.voice-intro h1 { margin: .4rem auto .5rem; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.voice-intro > p:last-child { margin: 0; color: var(--muted); }
.end-call-button { color: #fff; background: var(--danger); border-color: var(--danger); }
.end-call-button:hover:not(:disabled) { background: var(--danger-dark); }
.chat-panel { margin: 1rem 0 1.4rem; padding: clamp(1rem, 3vw, 1.5rem); background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow); }
.chat-panel { display: flex; flex-direction: column; min-height: min(78vh, 900px); }
.chat-heading, .assistant-identity, .composer-footer, .composer-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.assistant-identity { justify-content: flex-start; }
.assistant-identity h2 { margin: 0; }
.assistant-identity .eyebrow { margin-bottom: .2rem; }
.assistant-avatar { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: var(--brand); border-radius: 14px; font-size: 1.3rem; }
.conversation { flex: 1; max-height: min(52vh, 520px); overflow: auto; padding: .2rem .1rem; }
.quick-start { margin-top: 1.5rem; }
.quick-start > .eyebrow { margin-bottom: .7rem; }
.composer-footer { align-items: flex-end; }
.composer-footer .input-hint { margin-bottom: .2rem; }
.composer-actions { justify-content: flex-end; flex-wrap: wrap; }
.situation-form { position: sticky; bottom: 0; z-index: 3; width: 100%; max-width: none; margin: auto 0 0; padding: .9rem; background: rgb(255 255 255 / 97%); border-color: var(--line); box-shadow: 0 -8px 24px rgb(10 55 58 / 8%); backdrop-filter: blur(10px); }
.situation-form textarea { min-height: 58px; max-height: 160px; }
.chat-mic-button { width: 48px; height: 48px; color: var(--brand-dark); background: var(--brand-pale); border: 1px solid #bbe0da; border-radius: 50%; font-size: 1.25rem; }
.chat-mic-button.is-listening { color: #fff; background: var(--danger); border-color: var(--danger); animation: talkPulseDanger 1.1s ease-in-out infinite; }
.chat-mic-button:focus-visible { outline: 3px solid #f3b34a; outline-offset: 3px; }
.welcome-voice-status { min-height: 1.5rem; margin: .75rem 0 0; color: var(--brand-dark); font-weight: 800; }
.utility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.4rem 0 2.5rem; }
.content-section { margin-bottom: 3rem; }
.content-section > .eyebrow { margin-bottom: .3rem; }
.site-footer { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.app-page { min-height: calc(100svh - 160px); padding: 1.4rem 0 3rem; }
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-heading { padding: 2.5rem 1rem 2rem; text-align: center; }
.page-heading h1 { margin: .55rem auto .8rem; }
.demo-mode-badge, .guide-label { padding: .35rem .65rem; color: var(--brand-dark); background: var(--brand-pale); border-radius: 100px; font-size: .76rem; font-weight: 900; letter-spacing: .08em; }
.demo-layout, .guide-layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr); gap: 1rem; align-items: start; }
.demo-scenario-picker, .demo-conversation-panel, .guide-picker, .guide-viewer { padding: 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); }
.demo-scenario-picker h2 { font-size: 1.2rem; }
.demo-scenario-list { display: grid; gap: .55rem; }
.demo-scenario-button { min-height: 48px; padding: .65rem .75rem; color: var(--ink); text-align: left; background: #fff; border: 1px solid var(--line); border-radius: .65rem; font-weight: 800; }
.demo-scenario-button:hover { border-color: var(--brand); background: var(--brand-pale); }
.demo-conversation { display: grid; gap: .6rem; max-height: 420px; overflow: auto; margin-bottom: .85rem; }
.demo-message { max-width: 92%; margin: 0; padding: .7rem .85rem; border-radius: .8rem; background: #eff7f6; border: 1px solid #d6e8e6; }
.demo-message.user { justify-self: end; color: #fff; background: var(--brand); border-color: var(--brand); }
.demo-controls { display: flex; flex-wrap: wrap; gap: .55rem; margin: .75rem 0; }
.demo-controls:empty { margin: 0; }
.demo-placeholder { color: var(--muted); }
.guide-picker label { display: block; margin-bottom: .4rem; font-weight: 850; }
.guide-picker select { width: 100%; padding: .7rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: .6rem; }
.guide-viewer { text-align: center; }
.guide-illustration { min-height: 170px; display: grid; place-items: center; margin-bottom: 1rem; overflow: hidden; color: var(--brand); background: radial-gradient(circle at center, #fff 0 21%, #e6f4f2 22% 23%, #f4f8f8 24% 100%); border-radius: .8rem; }
.guide-illustration span { display: grid; width: 76px; height: 76px; place-items: center; color: #fff; background: var(--brand); border-radius: 24px; font-size: 2.3rem; animation: guidePulse 2.3s ease-in-out infinite; }
.guide-illustration[data-topic="burn"] span { background: #ae5627; }
.guide-illustration[data-topic="severe_bleeding"] span { background: var(--danger); }
@keyframes guidePulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgb(11 110 105 / 10%); } }
.guide-step-count { color: var(--muted); font-weight: 800; }
.guide-caption { min-height: 3.5em; max-width: 650px; margin-inline: auto; font-size: 1.12rem; font-weight: 750; }
.guide-progress { display: flex; justify-content: center; gap: .35rem; margin: 1rem; }
.guide-progress span { width: 9px; height: 9px; background: #c9d9d7; border-radius: 50%; }.guide-progress span.active { background: var(--brand); }
.guide-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem; }
.guide-warning { margin: 1rem 0 0; padding: .7rem; color: var(--danger-dark); background: var(--danger-pale); border-radius: .6rem; font-size: .85rem; font-weight: 700; }
button:disabled { cursor: not-allowed; }
@media (max-width: 700px) {
  .app-shell, .site-footer { width: min(100% - 1rem, 1120px); }
  .safety-banner { align-items: flex-start; flex-wrap: wrap; }
  .safety-banner p { flex: 1 1 calc(100% - 45px); }
  .banner-emergency { margin-left: 36px; }
  .chat-heading, .composer-footer { align-items: flex-start; flex-direction: column; }
  .composer-actions { justify-content: flex-start; width: 100%; }
  .demo-layout, .guide-layout { grid-template-columns: 1fr; }
  .demo-scenario-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-scenario-button { font-size: .88rem; }
}
@media (max-width: 430px) {
  .welcome-screen { padding-inline: .4rem; }
  .welcome-actions { width: 100%; }
  .welcome-actions .button { width: 100%; }
  .primary-talk-button { min-width: 0; width: 100%; padding-inline: 1rem; }
  .voice-conversation-controls { gap: .5rem; }
  .primary-stop-button { padding: .8rem 1rem; }
  .demo-scenario-list { grid-template-columns: 1fr; }
  .header-actions #connectionStatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 360px) {
  .site-header { gap: .35rem; padding-inline: .4rem; }
  .brand { gap: .35rem; }
  .brand strong { font-size: 1rem; }
  .logo { width: 32px; height: 32px; padding: 6px; }
  .header-actions { gap: .15rem; }
  .language-select { width: 72px; padding-inline: .2rem; }
  .header-emergency, .icon-button { width: 38px; height: 38px; }
}