/* Active semantic roles. Layout stays with its component stylesheet. */
:root{--font-ui:var(--balu-font);--font-editorial:var(--balu-font);--ink:var(--balu-ink);--green:var(--balu-primary);--cream:var(--balu-paper);--muted:var(--balu-muted);--line:var(--balu-border);--peach:var(--balu-peach);--sage:var(--balu-sage);--lilac:var(--balu-lilac);color:var(--balu-ink);background:var(--balu-sage)}
.phone.reference-design{background:var(--balu-paper);color:var(--balu-ink)}
.reference-design :is(button,input,textarea,select,h1,h2,h3,.float-title,.companion-name,.header-title strong){font-family:var(--font-ui)}
.reference-design :is(.primary,.hello-button,.send){background:var(--balu-primary);color:var(--balu-on-primary);border-color:var(--balu-primary);box-shadow:var(--balu-shadow)}
.reference-design :is(.primary,.hello-button,.send):active{background:var(--balu-primary-pressed)}
.reference-design :is(.secondary,.outline,.choice){background:var(--balu-surface);color:var(--balu-primary);border-color:var(--balu-control-border)}
.reference-design :is(.sheet,.inline-login,.language-popover,.attachment-popover,.plan,.permission,.receipt){background:var(--balu-surface);color:var(--balu-ink);border-color:var(--balu-border)}
.reference-design :is(.sheet p,.permission p,.permission dl,.receipt p,.preview,.bubble){font-size:1rem;line-height:1.6;color:var(--balu-ink)}
.reference-design :is(.sheet h2,.inline-login h2,.plan h3,.permission h3){font-size:1.375rem;font-weight:500;line-height:1.4}
.reference-design .greeting-identity h1{font-size:1.75rem;font-weight:500;letter-spacing:0}
.reference-design :is(.conversation-screen,.chat-content,.composer-wrap,.home-content,.greeting-screen){background:var(--balu-paper)}
.reference-design :is(.reply-card,.hello-bubble){background:var(--balu-surface);color:var(--balu-ink);border-color:var(--balu-border);box-shadow:none}
.reference-design .user-message .bubble{background:var(--balu-sage);color:var(--balu-ink);border-color:var(--balu-border)}
.reference-design :is(.reply-tools button,.reply-listen,.hint-button,.text-button){color:var(--balu-primary)}
.reference-design :is(.phone-input,.text-field,.composer){background:var(--balu-surface);border-color:var(--balu-control-border)}
.reference-design :is(input,textarea){font-size:1rem;color:var(--balu-ink)}
.reference-design :is(input,textarea)::placeholder{color:var(--balu-muted);opacity:1}
.reference-design :is(.login-trust,.otp-number,.feature-note,.intro-input-note,.composer-hint,.voice-meta,.receipt-id){color:var(--balu-muted)}
.reference-design .trust-made .icon{color:var(--balu-error);fill:var(--balu-error)}
.reference-design .trust-permission .icon{color:var(--balu-success)}
.reference-design .error{color:var(--balu-error);font-size:.875rem}
.reference-design :is(.receipt-top,.interest-saved){color:var(--balu-success)}
.reference-design .status.success{color:var(--balu-success);background:var(--balu-success-surface)}
.reference-design :is(.notice,.demo-notice){background:var(--balu-info-surface);color:var(--balu-info)}
.reference-design .trending{background:var(--balu-paper);border-color:var(--balu-border);box-shadow:var(--balu-shadow)}
.reference-design .trending-toggle{background:var(--balu-sage);color:var(--balu-primary)}
.reference-design .trending.is-collapsed:before{background:var(--balu-sage);border-color:var(--balu-border)}
.reference-design .trending.is-collapsed .trending-toggle{background:transparent}
.reference-design .float-business,.reference-design .quote-business{background:var(--balu-honey)}
.reference-design .float-household,.reference-design .quote-household{background:var(--balu-sage)}
.reference-design .float-creator,.reference-design .quote-creator{background:var(--balu-peach)}
.reference-design .float-astro{background:var(--balu-lilac)}
.reference-design .float-stocks{background:var(--balu-blue)}
.reference-design .trending-carousel .float-title{font-size:1rem;line-height:1.45;font-weight:400;letter-spacing:0;color:var(--balu-ink)}
.reference-design .ask-pill{font-size:.875rem;color:var(--balu-primary);background:var(--balu-surface);border:1px solid var(--balu-border)}
.reference-design .intro-voice{background:var(--balu-sage);border-color:var(--balu-border)}
.reference-design .story-header .companion-identity.story-ring{background:conic-gradient(from 20deg,var(--balu-primary),var(--balu-secondary) 45%,var(--balu-primary));box-shadow:var(--balu-shadow)}
.reference-design .story-inner{background:var(--balu-paper);border-color:var(--balu-surface)}
.reference-design .story-header .header-title strong{font-family:var(--font-ui);font-size:1rem;font-weight:500;letter-spacing:0}
.reference-design .story-header .header-title .working-label{font-size:.6875rem}
.reference-design .header-menu,.reference-design .header-actions .round{background:var(--balu-surface);color:var(--balu-primary);border-color:var(--balu-border)}
.reference-design .hint-button{border-color:var(--balu-control-border);background:var(--balu-paper)}
.reference-design .language-choice[aria-checked=true]{background:var(--balu-sage);color:var(--balu-primary)}
.reference-design :is(button,a,input,textarea,summary):focus-visible{outline:2px solid var(--balu-focus);outline-offset:3px}
html[lang=hi] .reference-design{font-family:var(--balu-font-hi)}
html[lang=hi] .reference-design :is(h1,h2,h3,p,button,strong,input,textarea){letter-spacing:0}
.reference-design .capability-balu{object-fit:contain;background:none;background-image:none}
.reference-design .trending-carousel .floating-card>.capability-balu{width:108px;height:96px;top:-54px;filter:drop-shadow(0 3px 2px color-mix(in srgb,var(--balu-ink) 10%,transparent))}
.reference-design .quoted-capability>.capability-balu{width:56px;height:56px;object-fit:contain}
/* Header alternatives are opt-in review parameters, never the default. */
.header-compact.reference-design .conversation-header.story-header,
.header-adaptive.reference-design .conversation-header.story-header.has-conversation{height:100px;min-height:100px;padding-top:6px}
.header-compact.reference-design .story-header .companion-identity.story-ring,
.header-adaptive.reference-design .story-header.has-conversation .companion-identity.story-ring{width:84px;height:84px;padding:2px}
.header-compact.reference-design .story-header .story-inner,
.header-adaptive.reference-design .story-header.has-conversation .story-inner{border-width:2px}
.header-compact.reference-design .story-header .mascot-stage,
.header-adaptive.reference-design .story-header.has-conversation .mascot-stage{width:54px;height:49px}
.header-compact.reference-design .story-header .header-portrait,
.header-adaptive.reference-design .story-header.has-conversation .header-portrait{width:54px;height:49px;margin:0}
.header-compact.reference-design .story-header .header-title strong,
.header-adaptive.reference-design .story-header.has-conversation .header-title strong{font-size:14px;line-height:19px}
.header-compact.reference-design .story-header .header-title .working-label,
.header-adaptive.reference-design .story-header.has-conversation .header-title .working-label{font-size:12px;line-height:14px}
.header-compact.reference-design .story-header .header-menu,
.header-adaptive.reference-design .story-header.has-conversation .header-menu{top:23px}
.header-compact.reference-design .conversation-header.story-header .header-actions,
.header-adaptive.reference-design .conversation-header.story-header.has-conversation .header-actions{top:23px}
@media(prefers-reduced-motion:reduce){.reference-design *{scroll-behavior:auto!important}}
/* Working text wraps inside a compact ring instead of becoming tiny. */
.header-compact.reference-design .story-header.is-working .mascot-stage,
.header-adaptive.reference-design .story-header.has-conversation.is-working .mascot-stage{height:42px}
.header-compact.reference-design .story-header.is-working .header-portrait,
.header-adaptive.reference-design .story-header.has-conversation.is-working .header-portrait{height:42px}
.header-compact.reference-design .story-header .header-title .working-label,
.header-adaptive.reference-design .story-header.has-conversation .header-title .working-label{font-size:12px;line-height:14px;white-space:normal;max-width:64px;margin:auto}

/* Real, locally hosted sky photography. UI colour roles stay on opaque surfaces. */
.reference-design .conversation-screen{--sky-photo:url('/assets/sky-day.webp');--sky-position:50% 48%}
.reference-design .time-dawn{--sky-photo:url('/assets/sky-dawn.webp');--sky-position:50% 45%}
.reference-design .time-morning{--sky-photo:url('/assets/sky-morning.webp');--sky-position:50% 40%}
.reference-design .time-day{--sky-photo:url('/assets/sky-day.webp');--sky-position:50% 40%}
.reference-design .time-afternoon{--sky-photo:url('/assets/sky-day.webp');--sky-position:50% 70%}
.reference-design .time-dusk{--sky-photo:url('/assets/sky-dusk.webp');--sky-position:50% 45%}
.reference-design .time-night{--sky-photo:url('/assets/sky-night.webp');--sky-position:50% 38%}
.reference-design .conversation-header.story-header{background:var(--balu-paper)}
.reference-design .conversation-screen .header-atmosphere{background-image:linear-gradient(to bottom,transparent 45%,color-mix(in srgb,var(--balu-paper) 25%,transparent) 65%,var(--balu-paper) 100%),var(--sky-photo);background-color:var(--balu-paper);background-size:100% 100%,cover;background-position:center,var(--sky-position);background-repeat:no-repeat;opacity:1;filter:none}
.reference-design .story-header :is(.header-menu,.header-actions .round){background:var(--balu-surface);color:var(--balu-primary);box-shadow:0 2px 8px color-mix(in srgb,var(--balu-ink) 12%,transparent)}