/* Native product demos. Every rule is scoped to the inline component so the
   product page keeps its own navigation, typography and document layout.
   Shared form, conversation and result patterns mirror the standalone demos. */
.agent-demo-native {
  --ink:#152033; --paper:#fff; --muted:#59677c; --line:#e1e7ef; --amber:#1677f8;
  --vd-ink:#152033; --vd-paper:#fff; --vd-paper-2:#f4f7fb;
  --vd-editorial-accent:#0966d5; --vd-editorial-body:#59677c;
  --vd-editorial-rule:#e1e7ef; --vd-editorial-surface-raised:#fff;
  --vd-body:var(--vd-brand-font,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  --vd-display:var(--vd-body);
  min-width:0; color:var(--ink); font-family:inherit; overflow-wrap:anywhere;
}
.agent-demo-native :is(h2,h3,h4,p,figure,ol,ul,dl) { max-width:100%; }
.agent-demo-native :is(h2,h3,h4) { color:inherit; }
.agent-demo-native img { max-width:100%; }

.agent-demo-native * { box-sizing:border-box; }
.agent-demo-native [hidden] { display:none !important; }
.agent-demo-native .shell { margin-inline:auto; }
.agent-demo-native .eyebrow { margin:0 0 12px; line-height:1.4; text-transform:uppercase; font-weight:600; }
.agent-demo-native .small { font-size:.79rem; line-height:1.6; color:var(--muted); }
.agent-demo-native a { color:inherit; }
.agent-demo-native button,.agent-demo-native input,.agent-demo-native select,.agent-demo-native textarea { font:inherit; }
.agent-demo-native button { cursor:pointer; }
.agent-demo-native button:disabled { cursor:default; }
.agent-demo-native button:focus-visible,.agent-demo-native a:focus-visible,.agent-demo-native input:focus-visible,.agent-demo-native select:focus-visible,.agent-demo-native textarea:focus-visible,.agent-demo-native summary:focus-visible { outline:3px solid var(--vd-editorial-accent); outline-offset:3px; }
.agent-demo-native .primary,.agent-demo-native .secondary { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:46px; padding:12px 18px; border:1px solid var(--vd-amber-2); border-radius:2px; background:var(--amber); color:var(--ink); font-size:.86rem; font-weight:600; text-decoration:none; line-height:1.4; }
.agent-demo-native .primary:hover:not(:disabled) { color:var(--vd-warm); }
.agent-demo-native .text-button { min-height:44px; padding:8px 0; border:0; background:none; text-align:left; text-underline-offset:5px; }
.agent-demo-native .workspace-section { border-block:1px solid var(--line); scroll-margin-top:86px; }
.agent-demo-native .workspace-grid { display:grid; align-items:start; }
.agent-demo-native .conversation { overflow-y:auto; scrollbar-width:thin; border:1px solid var(--line); background:var(--paper); min-width:0; }
.agent-demo-native .conversation-person { display:flex; }
.agent-demo-native .conversation-person img { object-fit:cover; }
.agent-demo-native .conversation-person .eyebrow { margin-bottom:5px; }
.agent-demo-native .conversation-person h2 { margin:0; font:600 1.42rem/1.12 var(--vd-display); }
.agent-demo-native #conversation-title { scroll-margin-top:100px; }
.agent-demo-native .voice-controls .primary { width:100%; }
.agent-demo-native .voice-controls .small { margin:12px 0 0; }
.agent-demo-native .demo-response { padding-top:20px; border-top:1px solid var(--line); }
.agent-demo-native .demo-response p { margin:0; }
.agent-demo-native .sample-note { display:flex; align-items:start; color:var(--muted); }
.agent-demo-native .sample-note p { margin:0; }
.agent-demo-native .sample-note > span { font-size:1.3rem; line-height:1; color:var(--vd-editorial-accent); }
.agent-demo-native .activity-block { border-top:1px solid var(--line); }
.agent-demo-native .activity-block h3 { margin:0 0 14px; text-transform:uppercase; font-weight:600; }
.agent-demo-native .activity-block ol { list-style:none; padding:0; margin:0; }
.agent-demo-native .activity-block li { border-left:1px solid var(--vd-editorial-rule); padding:0 0 16px 12px; color:var(--muted); }
.agent-demo-native .activity-block li strong { display:block; margin-bottom:4px; color:var(--ink); font-weight:600; }
.agent-demo-native .voice-mount { position:relative; isolation:isolate; overflow:hidden; width:100%; margin-top:15px; }
.agent-demo-native .voice-mount elevenlabs-convai { position:absolute!important; inset:0!important; display:block!important; width:100%!important; height:100%!important; }
.agent-demo-native .workbench { min-width:0; }
.agent-demo-native .workbench-header { display:flex; justify-content:space-between; }
.agent-demo-native .workbench h2 { margin:0; font:600 clamp(1.9rem,2.8vw,2.8rem)/1.13 var(--vd-display); }
.agent-demo-native .sample-badge { flex-shrink:0; }
.agent-demo-native .error { margin:16px 0; padding:14px 16px; border-left:3px solid #a83e29; background:#f7e8e1; color:#672916; font-size:.88rem; line-height:1.55; }
.agent-demo-native .service-tabs { display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--vd-editorial-rule); margin-bottom:24px; }
.agent-demo-native .service-tabs button { min-height:48px; padding:12px 17px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-size:.87rem; }
.agent-demo-native .service-tabs button[aria-pressed=true] { border-bottom-color:var(--vd-editorial-accent); color:var(--ink); font-weight:600; }
.agent-demo-native label { display:grid; line-height:1.45; }
.agent-demo-native input,.agent-demo-native select,.agent-demo-native textarea { min-width:0; width:100%; min-height:44px; padding:10px 11px; border:1px solid var(--vd-editorial-rule); border-radius:2px; color:var(--ink); background:var(--vd-editorial-surface-raised); font-size:.87rem; }
.agent-demo-native textarea { resize:vertical; min-height:76px; }
.agent-demo-native .fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.agent-demo-native .fields .wide { grid-column:1/-1; }
.agent-demo-native .search-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:end; margin-bottom:26px; }
.agent-demo-native .search-form .primary { align-self:end; }
.agent-demo-native .section-heading { display:flex; justify-content:space-between; gap:15px; }
.agent-demo-native .section-heading h3 { margin:0; font:600 1.5rem/1.15 var(--vd-display); }
.agent-demo-native .section-heading p { margin:0; }
.agent-demo-native .option-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.agent-demo-native .option-card { display:flex; flex-direction:column; min-width:0; background:var(--paper); border:1px solid var(--line); }
.agent-demo-native .option-card .option-number { color:var(--vd-editorial-accent); font-size:.67rem; margin-bottom:22px; }
.agent-demo-native .option-card h4 { margin:0 0 10px; font:600 1.55rem/1.1 var(--vd-display); letter-spacing:-.035em; }
.agent-demo-native .option-card p { margin:0 0 15px; color:var(--muted); line-height:1.65; }
.agent-demo-native .option-card .tags { display:flex; flex-wrap:wrap; gap:6px 12px; padding:0; list-style:none; margin:0 0 17px; font-size:.65rem; color:var(--muted); }
.agent-demo-native .option-card .price { margin-top:auto; color:var(--ink); font-size:1.16rem; font-weight:600; }
.agent-demo-native .option-card .price small { display:block; margin-top:4px; color:var(--muted); font-size:.69rem; font-weight:400; }
.agent-demo-native .option-card .secondary { width:100%; margin-top:4px; }
.agent-demo-native .empty { border:1px dashed var(--vd-editorial-rule); color:var(--muted); line-height:1.7; }
.agent-demo-native .empty h3 { margin:0 0 9px; font:600 1.5rem var(--vd-display); color:var(--ink); }
.agent-demo-native .guide { display:flex; flex-wrap:wrap; gap:12px 24px; margin:20px 0; padding:18px 0; border-block:1px solid var(--line); font-size:.75rem; color:var(--muted); }
.agent-demo-native .guide strong { color:var(--ink); font-weight:500; }
.agent-demo-native .itinerary { margin-top:36px; scroll-margin-top:94px; }
.agent-demo-native .itinerary ol { list-style:none; padding:0; margin:0; }
.agent-demo-native .itinerary li { display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:18px; align-items:start; padding:20px 0; border-bottom:1px solid var(--line); }
.agent-demo-native .itinerary li strong { display:block; font-weight:500; font-size:.95rem; }
.agent-demo-native .itinerary li p { margin:7px 0 0; color:var(--muted); font-size:.75rem; line-height:1.6; }
.agent-demo-native .itinerary time { font-size:.76rem; line-height:1.6; }
.agent-demo-native .cancelled { opacity:.65; }
.agent-demo-native .cancelled strong { text-decoration:line-through; }
.agent-demo-native .status-tag { display:inline-block; line-height:1.3; }
.agent-demo-native .status-tag.declined,.agent-demo-native .status-tag.review,.agent-demo-native .status-tag.cancelled { background:#f0dcd3; color:#7e3622; }
.agent-demo-native .invoice-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.agent-demo-native .invoice-selector button { text-align:left; background:var(--paper); border:1px solid var(--line); }
.agent-demo-native .invoice-selector button[aria-pressed=true] { outline-offset:-2px; }
.agent-demo-native .invoice-selector strong { display:block; margin-bottom:6px; }
.agent-demo-native .invoice-selector span { display:block; color:var(--muted); line-height:1.5; }
.agent-demo-native .invoice-selector .scenario { margin-top:10px; }
.agent-demo-native .reference-form { display:flex; align-items:end; gap:12px; margin-bottom:26px; }
.agent-demo-native .reference-form label { flex:1; }
.agent-demo-native .document { background:var(--vd-editorial-surface-raised); border:1px solid var(--line); box-shadow:0 6px 15px color-mix(in srgb,var(--vd-deep) 3%,transparent); scroll-margin-top:94px; }
.agent-demo-native .document-head { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.agent-demo-native .document-head h3 { font:600 2rem/1.1 var(--vd-display); margin:0 0 8px; letter-spacing:-.04em; }
.agent-demo-native .document-head p { margin:4px 0; font-size:.77rem; color:var(--muted); line-height:1.5; }
.agent-demo-native .document table { border-collapse:collapse; width:100%; font-size:.82rem; }
.agent-demo-native .document th { text-align:left; font-size:.64rem; text-transform:uppercase; color:var(--muted); letter-spacing:.03em; font-weight:500; }
.agent-demo-native .document td,.agent-demo-native .document th { padding:14px 0; border-bottom:1px solid var(--line); }
.agent-demo-native .document td:last-child,.agent-demo-native .document th:last-child { text-align:right; white-space:nowrap; padding-left:16px; }
.agent-demo-native .document-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.agent-demo-native .document-total span { font-size:.8rem; color:var(--muted); }
.agent-demo-native .document-total strong { font:600 2.4rem/1 var(--vd-display); letter-spacing:-.045em; }
.agent-demo-native .amount-form { display:flex; align-items:end; gap:12px; margin-top:26px; }
.agent-demo-native .amount-form label { flex:1; }
.agent-demo-native .amount-form:has(.payment-confirmation) { flex-wrap:wrap; }
.agent-demo-native .amount-form .payment-confirmation { display:flex; align-items:flex-start; gap:10px; flex-basis:100%; order:2; line-height:1.5; }
.agent-demo-native .payment-confirmation input { width:20px; min-height:20px; height:20px; flex:0 0 20px; margin-top:2px; }
.agent-demo-native .payment-panel,.agent-demo-native .receipt-panel,.agent-demo-native .brief-panel,.agent-demo-native .proposal-panel { margin-top:24px; padding:26px; background:var(--paper); border:1px solid var(--line); scroll-margin-top:94px; }
.agent-demo-native .payment-panel h3,.agent-demo-native .receipt-panel h3,.agent-demo-native .brief-panel h3,.agent-demo-native .proposal-panel h3 { margin:0 0 12px; font:600 1.65rem/1.15 var(--vd-display); letter-spacing:-.03em; }
.agent-demo-native .payment-panel p,.agent-demo-native .receipt-panel p,.agent-demo-native .brief-panel p,.agent-demo-native .proposal-panel p { font-size:.85rem; line-height:1.65; color:var(--muted); }
.agent-demo-native .payment-amount { font:600 2.7rem/1 var(--vd-display); margin:22px 0; }
.agent-demo-native .receipt-form { margin-top:20px; }
.agent-demo-native .receipt-form .primary { margin-top:16px; }
.agent-demo-native .ledger { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); margin-top:26px; padding-top:20px; gap:14px; }
.agent-demo-native .ledger p { font-size:.67rem; color:var(--muted); margin:0 0 6px; }
.agent-demo-native .ledger strong { font-size:.76rem; font-weight:500; }
.agent-demo-native .week-strip { margin:0 0 20px; }
.agent-demo-native .week-strip button { flex:1 0 76px; display:grid; color:var(--muted); }
.agent-demo-native .week-strip button strong { font:600 1.5rem var(--vd-display); color:var(--ink); }
.agent-demo-native .agenda { list-style:none; padding:0; margin:0; }
.agent-demo-native .agenda li { display:grid; align-items:start; border-bottom:1px solid var(--line); }
.agent-demo-native .agenda time { font-weight:500; }
.agent-demo-native .agenda h3 { font:500 .98rem/1.4 var(--vd-body); margin:0 0 6px; }
.agent-demo-native .agenda p { color:var(--muted); margin:5px 0; }
.agent-demo-native .agenda-actions { display:grid; }
.agent-demo-native .brief-panel { border-color:var(--vd-deep); }
.agent-demo-native .brief-panel .eyebrow { color:var(--vd-amber); }
.agent-demo-native .brief-panel h4 { margin:24px 0 10px; text-transform:uppercase; letter-spacing:.04em; color:var(--vd-amber); font-weight:500; }
.agent-demo-native .brief-panel p,.agent-demo-native .brief-panel li { color:color-mix(in srgb,var(--vd-warm) 82%,var(--vd-deep)); font-size:.84rem; line-height:1.7; }
.agent-demo-native .brief-panel ul { margin:12px 0 0; padding-left:18px; }
.agent-demo-native .brief-panel .change-date { display:block; font-size:.67rem; color:var(--vd-amber); margin:14px 0 3px; }
.agent-demo-native .booking-form-section { margin-top:24px; border:1px solid var(--line); background:var(--paper); padding:0 24px 24px; }
.agent-demo-native .booking-form-section summary { min-height:60px; padding-block:20px; font-weight:500; cursor:pointer; }
.agent-demo-native .booking-form-section:not([open]) { padding-bottom:0; }
.agent-demo-native .booking-form-section .primary { margin-top:18px; }
.agent-demo-native .proposal-panel dl,.agent-demo-native #review-body dl { margin:18px 0; display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; font-size:.86rem; line-height:1.5; }
.agent-demo-native .proposal-panel dt,.agent-demo-native #review-body dt { color:var(--muted); }
.agent-demo-native .proposal-panel dd,.agent-demo-native #review-body dd { margin:0; }
.agent-demo-native dialog { width:min(540px,calc(100% - 32px)); max-height:calc(100svh - 40px); overflow:auto; padding:30px; border:1px solid var(--line); color:var(--ink); background:var(--paper); }
.agent-demo-native dialog::backdrop { background:color-mix(in srgb,var(--vd-deep) 60%,transparent); }
.agent-demo-native dialog h2 { margin:0 0 22px; font:600 2rem/1.1 var(--vd-display); letter-spacing:-.04em; }
.agent-demo-native .dialog-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
.agent-demo-native #review-body label { margin-top:16px; }
@media(min-width:1500px) { .agent-demo-native .workspace-grid { grid-template-columns:minmax(460px,.8fr) minmax(0,1.2fr); gap:40px; } .agent-demo-native .option-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1100px) { .agent-demo-native .shell { width:calc(100% - 56px); } .agent-demo-native .workspace-grid { grid-template-columns:minmax(360px,.85fr) minmax(0,1.15fr); gap:24px; } .agent-demo-native .conversation { padding:18px; } .agent-demo-native .option-list { grid-template-columns:1fr; } .agent-demo-native .search-form { grid-template-columns:repeat(2,minmax(0,1fr)); } .agent-demo-native .document { padding:24px; } }
@media(max-width:1000px) { .agent-demo-native .shell { width:calc(100% - 40px); } .agent-demo-native .workspace-section { padding-block:28px 40px; } .agent-demo-native .workspace-grid { grid-template-columns:1fr; gap:32px; } .agent-demo-native .conversation { position:static; max-height:none; overflow:visible; } .agent-demo-native .conversation-intro { margin:18px 0; } .agent-demo-native .conversation-person h2 { font-size:1.6rem; } .agent-demo-native .activity-block { display:none; } .agent-demo-native .conversation-person .eyebrow { font-size:.63rem; } .agent-demo-native .option-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .agent-demo-native .option-list { grid-template-columns:1fr; } .agent-demo-native .option-card { padding:21px; } .agent-demo-native .option-card .option-number { margin-bottom:15px; } .agent-demo-native .service-tabs button { flex:1 1 auto; padding-inline:10px; font-size:.77rem; } .agent-demo-native .workbench-header { align-items:start; } .agent-demo-native .sample-badge { font-size:.55rem; } .agent-demo-native .invoice-selector { grid-template-columns:1fr; } .agent-demo-native .invoice-selector button { min-height:78px; } .agent-demo-native .document { padding:22px 18px; } .agent-demo-native .document-head { gap:12px; } .agent-demo-native .document-head h3 { font-size:1.7rem; } .agent-demo-native .document-total strong { font-size:2rem; } .agent-demo-native .reference-form,.agent-demo-native .amount-form { flex-direction:column; align-items:stretch; } .agent-demo-native .ledger { grid-template-columns:1fr; gap:12px; } .agent-demo-native .ledger > div { display:flex; justify-content:space-between; gap:12px; } .agent-demo-native .ledger p { margin:0; } .agent-demo-native .payment-panel,.agent-demo-native .receipt-panel,.agent-demo-native .brief-panel,.agent-demo-native .proposal-panel { padding:22px 18px; } .agent-demo-native .agenda li { grid-template-columns:46px minmax(0,1fr); gap:12px; } .agent-demo-native .agenda-actions { grid-column:2; display:flex; gap:24px; } .agent-demo-native .itinerary li { grid-template-columns:1fr auto; gap:10px; } .agent-demo-native .itinerary time { grid-column:1/-1; } .agent-demo-native .fields { grid-template-columns:1fr; } .agent-demo-native .dialog-actions { flex-direction:column-reverse; } .agent-demo-native dialog { padding:24px 20px; } .agent-demo-native .booking-form-section { padding-inline:18px; } }
@media(prefers-reduced-motion:reduce) { .agent-demo-native * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.agent-demo-native .stay-progress { list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-bottom:1px solid var(--line); }
.agent-demo-native .stay-progress li { min-width:0; display:grid; gap:9px; color:var(--muted); font-size:.67rem; line-height:1.4; padding:0 8px 14px 0; }
.agent-demo-native .stay-progress li span { display:flex; width:25px; height:25px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; font-size:.7rem; }
.agent-demo-native .stay-progress [aria-current] { color:var(--ink); border-bottom:3px solid var(--vd-editorial-accent); font-weight:600; }
.agent-demo-native .stay-progress [aria-current] span { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.agent-demo-native .stay-progress .visited span { border-color:var(--vd-editorial-accent); color:var(--vd-editorial-accent); }
.agent-demo-native .journey-question,.agent-demo-native .caller-context { margin:0 0 26px; padding:26px; background:var(--paper); border:1px solid var(--line); scroll-margin-top:94px; }
.agent-demo-native .journey-question h3,.agent-demo-native .caller-context h3 { margin:0 0 12px; font:600 1.8rem/1.14 var(--vd-display); letter-spacing:-.035em; }
.agent-demo-native .journey-question > p:not(.eyebrow),.agent-demo-native .caller-context > p:not(.eyebrow) { margin:0; max-width:650px; font-size:.9rem; color:var(--muted); line-height:1.7; }
.agent-demo-native .stay-running-total { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; border-top:1px solid var(--line); margin-top:22px; padding-top:17px; font-size:.74rem; color:var(--muted); }
.agent-demo-native .stay-running-total strong { color:var(--ink); font-size:.95rem; font-weight:500; }
.agent-demo-native .stay-running-total small { font-weight:400; font-size:.65rem; color:var(--muted); }
.agent-demo-native .journey-next { margin:24px 0; padding-top:18px; border-top:1px solid var(--line); }
.agent-demo-native .journey-next p { margin:10px 0 0; }
.agent-demo-native .stay-bill { background:var(--vd-editorial-surface-raised); border:1px solid var(--line); padding:0 26px 20px; }
.agent-demo-native .caller-scenarios { margin-bottom:22px; }
.agent-demo-native .caller-scenarios summary { cursor:pointer; padding:12px 0; }
.agent-demo-native .company-updates { padding-top:28px; }
.agent-demo-native .company-updates .ledger { margin-top:14px; }
@media(max-width:520px) { .agent-demo-native .journey-question,.agent-demo-native .caller-context { padding:22px 18px; } .agent-demo-native .journey-question h3 { font-size:1.65rem; } .agent-demo-native .stay-progress li { font-size:.59rem; padding-right:6px; } .agent-demo-native .stay-bill { padding-inline:18px; } .agent-demo-native .stay-bill .section-heading { display:block; } .agent-demo-native .stay-bill .section-heading p { margin-top:10px; } }
@media(min-width:801px) and (max-height:600px) {
  .agent-demo-native .conversation { position:static; max-height:none; overflow:visible; }
}
@media(min-width:801px) and (min-height:601px) {
  .agent-demo-native .conversation { max-height:calc(100dvh - 120px); overflow-y:auto; scrollbar-gutter:stable; }
}
.agent-demo-native .stay-checkout-form{display:grid;gap:20px;margin:28px 0;max-width:100%;}
.agent-demo-native .stay-checkout-form fieldset{border:1px solid var(--line,#d7d1c7);padding:18px;min-width:0;}
.agent-demo-native .stay-checkout-form legend{padding:0 8px;font-weight:600;}
.agent-demo-native .stay-payment-choice{align-items:flex-start;gap:12px;padding:14px 0;cursor:pointer;}
.agent-demo-native .stay-payment-choice input{width:20px;min-width:20px;height:20px;margin:3px 0;}
.agent-demo-native .stay-payment-choice small{display:block;margin-top:6px;line-height:1.5;}
.agent-demo-native .stay-confirmation{padding:24px 0;border-bottom:1px solid var(--line,#d7d1c7);overflow-wrap:anywhere;}
.agent-demo-native .stay-confirmation dl{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2fr);gap:10px 18px;line-height:1.5;}
.agent-demo-native .stay-confirmation dd{margin:0;}
.agent-demo-native .stay-confirmation dt{font-weight:600;}
.agent-demo-native .stay-checkout-form .small{overflow-wrap:anywhere;}

@media(max-width:520px){.agent-demo-native .stay-progress{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px;}.agent-demo-native .stay-confirmation dl{grid-template-columns:1fr;gap:4px;}.agent-demo-native .stay-confirmation dd{margin-bottom:12px;}}
.agent-demo-native .conversation:has(.voice-mount:not([hidden])) #voice-start,
.agent-demo-native .conversation:has(.voice-mount:not([hidden])) .voice-controls .small,
.agent-demo-native .conversation:has(.voice-mount:not([hidden])) .demo-response,
.agent-demo-native .conversation:has(.voice-mount:not([hidden])) .conversation-intro,
.agent-demo-native .conversation:has(.voice-mount:not([hidden])) .sample-note,
.agent-demo-native .conversation:has(.voice-mount:not([hidden])) .activity-block,
.agent-demo-native .conversation:has(.voice-mount:not([hidden])) #reset-demo { display:none; }
@media(max-width:1000px) {
  .agent-demo-native .voice-mount { height:min(500px,65svh); min-height:360px; }
}

/* Maya conversation and results. */
.agent-demo-native .maya-conversation{background:var(--vd-editorial-surface-raised);border:1px solid var(--line);min-width:0;scroll-margin-top:96px;}
.agent-demo-native .maya-portrait{margin:0;overflow:hidden;}
.agent-demo-native .maya-portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.agent-demo-native .maya-conversation h2{font:400 clamp(1.65rem,2.1vw,2.2rem)/1.15 var(--vd-display);}
.agent-demo-native .maya-example{margin:0 0 22px;}
.agent-demo-native .maya-result-hint{border-top:1px solid var(--line);}
.agent-demo-native .maya-sample-details{color:var(--muted);line-height:1.7;overflow-wrap:anywhere;}
.agent-demo-native .maya-sample-details summary{cursor:pointer;color:var(--ink);}
.agent-demo-native .maya-sample-details p{margin:10px 0;}
.agent-demo-native .maya-results-section{border-block:1px solid var(--line);}
.agent-demo-native .maya-results-heading{display:flex;align-items:end;justify-content:space-between;}
.agent-demo-native .maya-results-heading h2{font:400 clamp(1.8rem,3vw,2.8rem)/1.15 var(--vd-display);letter-spacing:-.035em;margin:0;}
.agent-demo-native .maya-results-heading .small{max-width:260px;margin:0;}
.agent-demo-native .maya-results-section .stay-bill{background:var(--paper);}
.agent-demo-native .maya-results-section #outcome:first-child{margin-top:0;}
.agent-demo-native .maya-results-section #options,.agent-demo-native .maya-results-section #outcome,.agent-demo-native .maya-results-section #results-title{scroll-margin-top:96px;}
.agent-demo-native .maya-no-results{padding:24px;border:1px solid var(--line);line-height:1.7;}
.agent-demo-native .maya-guest-result{border-top:1px solid var(--line);padding-top:16px;overflow-wrap:anywhere;}
.agent-demo-native .maya-guest-result h4{margin:0;}.agent-demo-native .maya-guest-result p{font-size:.88rem;line-height:1.7;}
.agent-demo-native.maya-demo-page .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;}
@media(max-width:1000px){.agent-demo-native .maya-conversation-body{padding:22px;}.agent-demo-native .maya-results-section .option-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:760px){.agent-demo-native .maya-conversation{width:100%;}.agent-demo-native .maya-portrait{aspect-ratio:2.1;}.agent-demo-native .maya-results-heading{display:block;}.agent-demo-native .maya-results-heading .small{margin-top:14px;}.agent-demo-native .maya-results-section .option-list{grid-template-columns:1fr;}.agent-demo-native .maya-results-section .stay-bill{padding:18px;}.agent-demo-native .maya-results-section .itinerary li{grid-template-columns:80px minmax(0,1fr);gap:12px;}.agent-demo-native .maya-results-section .status-tag{grid-column:2;justify-self:start;}}
.agent-demo-native .maya-conversation:has(.voice-mount:not([hidden])) :is(.maya-portrait,.maya-example,.maya-result-hint,.maya-sample-details,#voice-start,#voice-note){display:none;}
.agent-demo-native .maya-results-section{grid-column:1;grid-row:1;}
.agent-demo-native .maya-conversation{grid-column:2;grid-row:1;}
.agent-demo-native .maya-results-section{min-width:0;}
.agent-demo-native .maya-results-section>.shell{width:100%;}
.agent-demo-native.maya-has-results .maya-conversation{top:96px;}
.agent-demo-native.maya-has-results .maya-portrait,.agent-demo-native.maya-has-results .maya-example,.agent-demo-native.maya-has-results .maya-result-hint{display:none;}
@media(max-width:760px){.agent-demo-native.maya-has-results .maya-conversation{position:static;order:0;}.agent-demo-native .maya-results-section{order:1;width:100%;}.agent-demo-native .maya-results-section .option-list{grid-template-columns:1fr;}}

/* Soft surfaces and blue controls match the supplied component reference. */
.agent-demo-native .workspace-section { padding:26px; border:0; background:linear-gradient(135deg,#f4f8ff 0%,#f8fafc 60%,#f2f6fb 100%); }
.agent-demo-native :is(.conversation,.workbench,.maya-conversation) { position:static; top:auto; max-height:none; overflow:visible; background:#fff; border:1px solid #e2e8f0; border-radius:20px; box-shadow:0 6px 20px rgba(26,55,93,.045),0 1px 2px rgba(26,55,93,.02); }
.agent-demo-native .conversation { padding:24px; }
.agent-demo-native .conversation-person { align-items:center; gap:12px; }
.agent-demo-native .conversation-person img { width:50px; height:58px; border-radius:13px; object-position:76% center; background:#f1f6fc; }
.agent-demo-native .conversation-person h2 { font-size:19px; font-weight:600; line-height:1.2; letter-spacing:-.045em; }
.agent-demo-native .conversation-person .eyebrow { font-size:9px; line-height:1.4; text-transform:none; letter-spacing:.01em; color:#5b6c82; }
.agent-demo-native .conversation-intro { margin:20px 0; color:#59677c; font-size:13px; line-height:1.7; }
.agent-demo-native .eyebrow { color:#0966d5; font-size:10px; letter-spacing:.04em; }
.agent-demo-native :is(.primary,.secondary) { min-height:44px; padding:11px 16px; border-radius:12px; font-size:12px; font-weight:600; gap:9px; transition:background-color .16s,box-shadow .16s; }
.agent-demo-native .primary { color:#fff; background:linear-gradient(180deg,#2387ff,#0870f2); border:1px solid #1479f4; box-shadow:0 3px 7px rgba(18,112,243,.14); }
.agent-demo-native .primary:hover:not(:disabled) { background:#0966d5; box-shadow:0 5px 12px rgba(18,112,243,.2); }
.agent-demo-native .secondary { border-color:#dde5ef; background:#f7f9fc; color:#24354c; box-shadow:0 1px 2px rgba(24,47,80,.03); }
.agent-demo-native .secondary:hover:not(:disabled) { background:#eaf3ff; border-color:#bcd9ff; }
.agent-demo-native button:disabled { opacity:.65; }
.agent-demo-native .text-button { font-size:12px; color:#0966d5; text-decoration:none; }
.agent-demo-native .text-button:hover { text-decoration:underline; }
.agent-demo-native .voice-controls .small { font-size:11px; line-height:1.6; color:#637187; }
.agent-demo-native .voice-mount { height:460px; min-height:0; max-height:none; border-radius:14px; }
.agent-demo-native .demo-response { margin-top:21px; padding:16px; border:1px solid #e1edff; background:#f1f7ff; border-radius:12px; }
.agent-demo-native .demo-response p { font-size:12px; line-height:1.7; color:#344c6d; }
.agent-demo-native .sample-note { margin-top:18px; gap:8px; }
.agent-demo-native .sample-note p { font-size:11px; line-height:1.7; }
.agent-demo-native .activity-block { margin-top:12px; padding-top:18px; }
.agent-demo-native .activity-block h3 { color:#68768b; font-size:9px; letter-spacing:.06em; }
.agent-demo-native .activity-block li { font-size:11px; line-height:1.65; padding-bottom:12px; }
.agent-demo-native .activity-block li strong { font-size:11px; }
.agent-demo-native .workbench-header { gap:14px; align-items:flex-start; }
.agent-demo-native .workbench h2 { font-size:clamp(22px,2.6vw,30px); letter-spacing:-.045em; line-height:1.15; }
.agent-demo-native .workbench-header .eyebrow { font-size:9px; margin-bottom:9px; }
.agent-demo-native .sample-badge { padding:6px 9px; border:0; border-radius:20px; background:#eaf6ee; color:#267044; font-size:9px; line-height:1.4; }
.agent-demo-native .workspace-date { font-size:10px; line-height:1.6; margin:12px 0 24px; }
.agent-demo-native :is(input,select,textarea) { min-height:44px; border-color:#dce4ed; border-radius:10px; background:#f9fbfd; font-size:13px; box-shadow:inset 0 1px 3px rgba(31,58,89,.025); accent-color:#1677f8; }
.agent-demo-native label { font-size:11px; color:#4f5e74; gap:8px; }
.agent-demo-native .caller-context { margin:0 0 20px; padding:20px; background:#f3f7fc; border:1px solid #e3ebf6; border-radius:14px; }
.agent-demo-native .caller-context h3 { font-size:20px; line-height:1.2; letter-spacing:-.04em; }
.agent-demo-native .caller-context p:not(.eyebrow) { font-size:12px; line-height:1.7; margin:10px 0 0; }
.agent-demo-native .caller-scenarios summary { font-size:12px; font-weight:600; min-height:44px; }
.agent-demo-native .invoice-selector { gap:10px; margin-bottom:12px; }
.agent-demo-native .invoice-selector button { padding:16px; border-radius:12px; min-height:110px; transition:border-color .15s,background-color .15s; }
.agent-demo-native .invoice-selector button:hover { background:#f4f8ff; border-color:#aecfff; }
.agent-demo-native .invoice-selector button[aria-pressed=true] { outline:none; border-color:#1677f8; background:#edf5ff; box-shadow:0 0 0 1px #1677f8; }
.agent-demo-native .invoice-selector strong { font-size:12px; }
.agent-demo-native .invoice-selector span { font-size:11px; }
.agent-demo-native .invoice-selector .scenario { font-size:10px; color:#0966d5; }
.agent-demo-native :is(.document,.option-card,.payment-panel,.receipt-panel,.proposal-panel,.booking-form-section,.stay-bill) { border:1px solid #e1e7ef; background:#fff; border-radius:14px; box-shadow:0 5px 15px rgba(27,57,94,.035); }
.agent-demo-native .document { padding:24px; }
.agent-demo-native .document-head { padding-bottom:18px; margin-bottom:16px; }
.agent-demo-native .document-head h3 { font-size:26px; }
.agent-demo-native .document :is(table,p),.agent-demo-native .document-head p { font-size:12px; }
.agent-demo-native .document-total { margin:24px 0; }
.agent-demo-native .document-total strong { font-size:32px; }
.agent-demo-native :is(.payment-panel,.receipt-panel,.proposal-panel) { padding:22px; }
.agent-demo-native :is(.payment-panel,.receipt-panel,.brief-panel,.proposal-panel) h3 { font-size:23px; }
.agent-demo-native :is(.payment-panel,.receipt-panel,.brief-panel,.proposal-panel) p { font-size:12px; line-height:1.7; }
.agent-demo-native .status-tag { border-radius:20px; padding:5px 9px; text-transform:none; font-size:10px; background:#e9f6ee; color:#236740; }
.agent-demo-native .status-tag.due,.agent-demo-native .status-tag.ready { background:#fff5df; color:#856122; }
.agent-demo-native :is(.status-tag.declined,.status-tag.review,.status-tag.cancelled) { background:#fff0ed; color:#964330; }
.agent-demo-native .week-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; padding:5px; overflow:visible; background:#f0f3f7; border:1px solid #e5eaf1; border-radius:14px; }
.agent-demo-native .week-strip button { min-width:0; min-height:81px; padding:10px 3px; border:1px solid transparent; border-radius:10px; background:transparent; font-size:9px; gap:5px; }
.agent-demo-native .week-strip button strong { font-size:19px; letter-spacing:-.04em; }
.agent-demo-native .week-strip button[aria-pressed=true] { background:#fff; color:#0966d5; border-color:#e4e9f0; box-shadow:0 2px 5px rgba(32,53,83,.08); }
.agent-demo-native .week-strip button[aria-pressed=true] strong { color:#0966d5; }
.agent-demo-native .section-heading { margin:24px 0 12px; align-items:center; }
.agent-demo-native .section-heading h3 { font-size:21px; letter-spacing:-.04em; }
.agent-demo-native .agenda li { grid-template-columns:46px minmax(0,1fr) auto; gap:12px; padding:18px 0; }
.agent-demo-native .agenda time { font-size:12px; padding-top:3px; }
.agent-demo-native .agenda h3 { font-size:13px; font-weight:600; line-height:1.5; }
.agent-demo-native .agenda p { font-size:11px; line-height:1.6; }
.agent-demo-native .agenda .text-button { font-size:10px; min-height:34px; padding:5px 0; }
.agent-demo-native .brief-panel { background:linear-gradient(135deg,#f2f7ff,#f9fbff); border:1px solid #dce9fb; border-radius:15px; padding:24px; color:#152033; }
.agent-demo-native .brief-panel :is(p,li,.small) { color:#4b617e; }
.agent-demo-native .brief-panel :is(.eyebrow,h4,.change-date) { color:#0966d5; }
.agent-demo-native .brief-panel h4 { font-size:10px; }
.agent-demo-native .brief-panel li { font-size:12px; line-height:1.7; }
.agent-demo-native .booking-form-section { padding-inline:20px; }
.agent-demo-native .booking-form-section summary { font-size:12px; }
.agent-demo-native .empty { padding:22px; border-style:solid; border-color:#e2e9f2; background:#f7f9fc; border-radius:12px; font-size:12px; }
.agent-demo-native .empty h3 { font-size:19px; }
.agent-demo-native [data-discussing] { outline:2px solid #70afff; outline-offset:5px; }
.agent-demo-native .maya-demo-workspace { padding:26px; background:linear-gradient(135deg,#f0f6ff,#f8fafc); }
.agent-demo-native .maya-conversation { display:grid; width:100%; overflow:hidden; }
.agent-demo-native .maya-portrait { aspect-ratio:auto; height:100%; background:#f1f5fa; }
.agent-demo-native .maya-portrait img { object-position:70% center; }
.agent-demo-native .maya-conversation-body { min-width:0; }
.agent-demo-native .maya-conversation h2 { line-height:1.12; font-weight:600; letter-spacing:-.045em; margin:12px 0 20px; }
.agent-demo-native .maya-example { color:#586b84; padding:16px 18px; border:1px solid #e4edf9; border-radius:12px; background:#f4f8fe; }
.agent-demo-native .maya-conversation .voice-controls .primary { min-height:47px; }
.agent-demo-native .maya-result-hint { font-size:11px; line-height:1.7; margin-top:22px; padding-top:18px; }
.agent-demo-native .maya-sample-details { font-size:11px; margin-top:16px; }
.agent-demo-native .maya-sample-details summary { padding:10px 0; }
.agent-demo-native .maya-results-section { order:1; width:100%; }
.agent-demo-native .maya-results-heading { margin-bottom:22px; gap:20px; }
.agent-demo-native .maya-results-heading h2 { font-size:27px; font-weight:600; }
.agent-demo-native .maya-results-heading .small { font-size:11px; }
.agent-demo-native .maya-conversation:has(.voice-mount:not([hidden])),.agent-demo-native.maya-has-results .maya-conversation { display:block; position:static; }
.agent-demo-native .maya-conversation:has(.voice-mount:not([hidden])) .maya-conversation-body { margin:auto; }
.agent-demo-native.maya-has-results .maya-conversation-body { padding:24px; }
.agent-demo-native .option-card { padding:22px; }
.agent-demo-native .option-card h4 { font-size:24px; }
.agent-demo-native .option-card p { font-size:12px; }
@media(max-width:900px) {
  .agent-demo-native .workspace-grid { grid-template-columns:1fr; }
  .agent-demo-native .conversation { padding:22px; }
  .agent-demo-native .conversation-intro { margin:16px 0; }
  .agent-demo-native .conversation .voice-controls { max-width:420px; }
  .agent-demo-native .conversation .sample-note { margin-top:15px; }
  .agent-demo-native .activity-block { display:none; }
  .agent-demo-native .maya-conversation { grid-template-columns:minmax(150px,.55fr) minmax(0,1.45fr); }
  .agent-demo-native .maya-conversation-body { padding:26px; }
}
@media(max-width:560px) {
  .agent-demo-native :is(.workspace-section,.maya-demo-workspace) { padding:12px; gap:14px; }
  .agent-demo-native .workspace-grid { gap:14px; }
  .agent-demo-native :is(.conversation,.workbench) { padding:20px 17px; border-radius:15px; }
  .agent-demo-native .workbench-header { flex-wrap:wrap; gap:10px; }
  .agent-demo-native .workbench h2 { font-size:25px; }
  .agent-demo-native .workbench-header .sample-badge { margin-left:0; }
  .agent-demo-native .workspace-date { margin-bottom:20px; }
  .agent-demo-native .invoice-selector { grid-template-columns:1fr; }
  .agent-demo-native .invoice-selector button { min-height:0; }
  .agent-demo-native :is(.reference-form,.amount-form) { flex-direction:column; align-items:stretch; gap:12px; }
  .agent-demo-native :is(.document,.caller-context,.brief-panel,.payment-panel,.receipt-panel,.proposal-panel,.maya-results-section) { padding:18px; }
  .agent-demo-native .document-head { flex-wrap:wrap; }
  .agent-demo-native .document-total strong { font-size:28px; }
  .agent-demo-native .agenda li { grid-template-columns:42px minmax(0,1fr); gap:8px 10px; }
  .agent-demo-native .agenda-actions { grid-column:2; display:flex; flex-wrap:wrap; gap:6px 18px; }
  .agent-demo-native .agenda .text-button { min-height:44px; font-size:11px; }
  .agent-demo-native .week-strip { gap:3px; padding:4px; }
  .agent-demo-native .week-strip button { padding:9px 2px; font-size:8px; }
  .agent-demo-native .week-strip button strong { font-size:14px; }
  .agent-demo-native .fields { grid-template-columns:1fr; }
  .agent-demo-native .ledger { grid-template-columns:1fr; }
  .agent-demo-native .maya-conversation { display:block; }
  .agent-demo-native .maya-portrait { height:170px; min-height:0; aspect-ratio:auto; }
  .agent-demo-native .maya-portrait img { object-position:center 34%; }
  .agent-demo-native .maya-conversation-body { padding:24px 20px; }
  .agent-demo-native .maya-conversation h2 { font-size:29px; }
  .agent-demo-native .maya-example { padding:14px; font-size:12px; }
  .agent-demo-native .maya-results-section .option-list { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .agent-demo-native * { scroll-behavior:auto!important; transition:none!important; } }

/* The controls belong to the page itself: no browser chrome, extra canvas or
   nested scroll area. Only conversations and the records they create are cards. */
.agent-demo-native .shell { width:100%; max-width:none; margin:0; }
.agent-demo-native :is(.workspace-section,.maya-demo-workspace) { padding:0; border:0; background:transparent; }
.agent-demo-native .workspace-grid { grid-template-columns:minmax(260px,.8fr) minmax(0,1.5fr); gap:28px; }
.agent-demo-native :is(.conversation,.maya-conversation) { box-shadow:0 10px 30px -18px #233d642b,inset 0 1px 0 #fff; }
.agent-demo-native .workbench { padding:28px; box-shadow:0 10px 30px -18px #233d642b,inset 0 1px 0 #fff; }
.agent-demo-native .conversation { position:static; top:auto; max-height:none; overflow:visible; scrollbar-gutter:auto; }
.agent-demo-native .maya-demo-workspace { display:flex; flex-direction:column; gap:28px; }
.agent-demo-native .maya-conversation { grid-template-columns:minmax(250px,.75fr) minmax(0,1.25fr); border-radius:24px; }
.agent-demo-native .maya-portrait { min-height:360px; }
.agent-demo-native .maya-conversation-body { padding:clamp(28px,4vw,48px); }
.agent-demo-native .maya-conversation h2 { max-width:520px; font-size:clamp(28px,3.2vw,40px); }
.agent-demo-native .maya-example { max-width:540px; font-size:14px; line-height:1.75; }
.agent-demo-native .maya-conversation .voice-controls { max-width:440px; }
.agent-demo-native .maya-results-section { padding:0; border:0; border-radius:0; background:transparent; }
.agent-demo-native .maya-results-heading { padding-top:12px; }
.agent-demo-native .maya-results-section .option-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.agent-demo-native .maya-results-section .stay-bill { padding:24px 28px; }
.agent-demo-native.maya-has-results .maya-conversation { position:static; }
.agent-demo-native .maya-conversation:has(.voice-mount:not([hidden])) .maya-conversation-body { width:100%; max-width:800px; }
.agent-demo-native :is(.primary,.secondary) { font-family:inherit; }
.agent-demo-native .brief-panel .small { color:#4b617e; }
.agent-demo-native :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid #0769e8; outline-offset:4px; }
.agent-demo-native .payment-confirmation input { accent-color:#1677f8; }
.agent-demo-native .stay-checkout-form fieldset { border-radius:14px; }
.agent-demo-native .stay-payment-choice { display:flex; }
.agent-demo-native .stay-payment-choice input { min-height:20px; accent-color:#1677f8; }
.agent-demo-native #review-dialog { position:fixed; inset:0; transform:none; margin:auto; width:min(560px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 40px); padding:30px; border:1px solid #e2e8f0; border-radius:20px; background:#fff; color:var(--ink); box-shadow:0 24px 100px #172b4a38; }
.agent-demo-native #review-dialog::backdrop { background:#18294440; backdrop-filter:blur(4px); }
.agent-demo-native #review-dialog h2 { font-family:inherit; font-size:26px; font-weight:600; letter-spacing:-.04em; }
.agent-demo-native #review-dialog :is(p,dl) { font-size:13px; line-height:1.7; }
.agent-demo-native #review-dialog:not([open]),.agent-demo-native [hidden] { display:none!important; }
@media(max-width:900px) {
  .agent-demo-native .workspace-grid { grid-template-columns:1fr; gap:24px; }
  .agent-demo-native .maya-conversation { grid-template-columns:minmax(190px,.6fr) minmax(0,1.4fr); }
  .agent-demo-native .maya-conversation-body { padding:28px; }
}
@media(max-width:600px) {
  .agent-demo-native :is(.workspace-section,.maya-demo-workspace) { padding:0; gap:22px; }
  .agent-demo-native .workspace-grid { gap:22px; }
  .agent-demo-native :is(.conversation,.workbench) { padding:24px 20px; border-radius:20px; }
  .agent-demo-native .maya-conversation { display:block; border-radius:20px; }
  .agent-demo-native .maya-portrait { height:210px; min-height:0; }
  .agent-demo-native .maya-portrait img { object-position:center 34%; }
  .agent-demo-native .maya-conversation-body { padding:28px 22px; }
  .agent-demo-native .maya-conversation h2 { font-size:29px; }
  .agent-demo-native .maya-example { padding:14px 16px; font-size:13px; }
  .agent-demo-native .maya-results-section { padding:0; }
  .agent-demo-native .maya-results-section .option-list { grid-template-columns:1fr; }
  .agent-demo-native .maya-results-section .stay-bill { padding:22px 18px; }
  .agent-demo-native #review-dialog { padding:26px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .agent-demo-native * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}