body { background:linear-gradient(135deg,var(--bg-page),var(--bg-fill)); }
.side-panel { background:transparent; box-shadow:none; border-radius:0; scrollbar-width:thin; }
.pa-panel-inner { padding:24px 20px; }
.pa-brand { display:flex; align-items:center; gap:9px; font-weight:700; font-size:var(--font-title); }
.pa-brand > span:last-child { font-size:10px; letter-spacing:1.6px; color:var(--text-weak); font-weight:500; margin-left:5px; }
.pa-brand-dot { width:15px; height:15px; border-radius:50%; background:var(--color-primary); box-shadow:0 0 0 5px var(--color-track); }
.pa-lab-title { font-size:30px; line-height:1.4; letter-spacing:-1px; margin:32px 0 12px; }
.pa-intro,.pa-insight { font-size:var(--font-body); color:var(--text-weak); line-height:1.85; margin:0 0 24px; }
.pa-scenarios { display:grid; gap:10px; }
.pa-scenario { display:flex; align-items:center; gap:12px; text-align:left; padding:15px 14px; border:1px solid transparent; border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-body); transition:background .2s,border-color .2s,transform .2s; }
.pa-scenario:hover { transform:translateX(2px); }
.pa-scenario.is-active { border-color:var(--color-primary-deep); background:var(--color-track); box-shadow:var(--shadow-btn); }
.pa-scenario > span:nth-child(2) { flex:1; min-width:0; }
.pa-scenario b { display:block; font-size:var(--font-emphasis); font-weight:600; }
.pa-scenario small { display:block; color:var(--text-weak); line-height:1.6; margin-top:4px; font-size:var(--font-aux); }
.pa-scenario-number { color:var(--text-weak); font-size:var(--font-aux); align-self:flex-start; padding-top:3px; font-family:var(--font-family-number); }
.pa-scenario.is-active .pa-scenario-number { color:var(--text-body); }
.pa-timeline-head { display:flex; justify-content:space-between; align-items:center; margin-top:28px; }
.pa-timeline-head h2 { font-size:var(--font-body); margin:0; font-weight:600; }
.pa-timeline-head > span { font-size:var(--font-caption); color:var(--text-weak); }
.pa-timeline { list-style:none; padding:0; margin:18px 0; }
.pa-timeline li { display:flex; gap:12px; position:relative; color:var(--text-weak); font-size:var(--font-aux); line-height:1.6; min-height:36px; padding:0 0 13px; }
.pa-timeline li > span { width:20px; height:20px; flex-shrink:0; border-radius:50%; font-size:10px; background:var(--bg-surface); text-align:center; line-height:20px; position:relative; z-index:1; }
.pa-timeline li:not(:last-child)::before { content:''; position:absolute; left:9px; top:15px; bottom:-3px; width:1px; background:var(--bg-surface); }
.pa-timeline li.is-current { color:var(--text-primary); font-weight:600; }
.pa-timeline li.is-current > span { background:var(--color-accent); }
.pa-timeline li.is-done > span { background:var(--color-accent-bg); }
.pa-btn { border:0; border-radius:var(--radius-card); padding:10px 15px; background:var(--bg-fill); color:var(--text-body); font-size:var(--font-body); font-weight:500; line-height:1.5; transition:filter .15s,transform .15s; }
.pa-btn:hover:not(:disabled),.pa-send:hover { filter:brightness(.97); }
.pa-btn:active:not(:disabled) { transform:scale(.98); }
.pa-btn:disabled { cursor:default; opacity:.45; }
.pa-primary { background:var(--color-accent); color:var(--text-primary); }
.pa-secondary { background:var(--bg-fill); }
.pa-next-event { display:block; width:100%; min-height:46px; }
.pa-demo-controls { display:flex; justify-content:space-between; margin-top:10px; }
.pa-link { background:transparent; font-size:var(--font-aux); padding:8px 0; color:var(--text-weak); }
.pa-lab-note { margin:22px 0 0; font-size:var(--font-caption); line-height:1.8; color:var(--text-weak); border-top:1px solid var(--bg-surface); padding-top:16px; }
.pa-eyebrow { font-size:var(--font-caption); letter-spacing:.7px; color:var(--text-weak); }
.pa-experience-title { font-size:24px; line-height:1.5; letter-spacing:-.5px; margin:12px 0; }
.pa-insight { margin-bottom:18px; }
.pa-status { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; background:var(--bg-surface); border-radius:var(--radius-sm); font-size:var(--font-aux); }
.pa-status > span { height:6px; width:6px; border-radius:50%; background:var(--color-primary-deep); }
.pa-status.is-completed > span { background:var(--text-secondary); }
.pa-panel-section { margin-top:27px; }
.pa-panel-section h3 { margin:0 0 12px; font-size:var(--font-body); font-weight:600; }
.pa-rows { margin:10px 0 0; }
.pa-rows > div { display:flex; gap:16px; padding:10px 0; border-bottom:1px solid var(--bg-fill); line-height:1.55; font-size:var(--font-aux); }
.pa-rows > div:last-child { border-bottom:0; }
.pa-rows dt { color:var(--text-weak); flex:0 0 76px; }
.pa-rows dd { margin:0; flex:1; text-align:right; overflow-wrap:anywhere; font-weight:500; }
.pa-rows dd small { display:block; color:var(--text-weak); font-weight:400; margin-top:4px; }
.pa-tasks { list-style:none; padding:0; margin:0; }
.pa-tasks li { display:flex; gap:8px; align-items:baseline; font-size:var(--font-aux); padding:9px 0; line-height:1.6; }
.pa-tasks li > span:nth-child(2) { flex:1; }
.pa-tasks small { color:var(--text-weak); font-size:var(--font-caption); text-align:right; max-width:100px; }
.pa-task-dot { width:5px; height:5px; background:var(--color-primary-deep); border-radius:50%; flex-shrink:0; }
.pa-conversation { position:absolute; inset:54px 0 0; display:flex; flex-direction:column; background:var(--bg-page); border-radius:var(--radius-card) var(--radius-card) 0 0; overflow:hidden; box-shadow:var(--shadow-sheet-up); animation:pa-rise .25s var(--ease-std); }
.pa-chat-header { display:flex; align-items:center; gap:9px; padding:14px 16px 12px; background:var(--bg-surface); border-bottom:1px solid var(--bg-fill); flex-shrink:0; }
.pa-avatar { width:34px; height:34px; background:var(--color-accent-bg); border-radius:14px; display:grid; place-items:center; color:var(--text-primary); font-size:24px; }
.pa-chat-title { flex:1; min-width:0; }
.pa-chat-title b { display:block; font-size:var(--font-emphasis); font-weight:600; }
.pa-phase { display:block; font-size:10px; line-height:1.5; color:var(--text-weak); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:145px; }
.pa-header-btn { padding:7px 9px; font-size:var(--font-aux); background:var(--bg-page); white-space:nowrap; }
.pa-conversation-body { flex:1; min-height:0; overflow:hidden; display:flex; }
.pa-message-list { flex:1; min-height:0; overflow:auto; padding:20px 16px 10px; scrollbar-width:thin; overscroll-behavior:contain; }
.pa-message { display:flex; align-items:flex-start; flex-direction:column; margin-bottom:20px; animation:pa-fade .2s ease; }
.pa-speaker { font-size:var(--font-caption); color:var(--text-weak); margin:0 0 6px 2px; }
.pa-bubble { font-size:var(--font-body); line-height:1.85; white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
.pa-message--user { align-items:flex-end; }
.pa-message--user .pa-bubble { background:var(--bg-fill); padding:10px 14px; border-radius:18px 5px 18px 18px; max-width:90%; }
.pa-message--event { align-items:center; }
.pa-message--event .pa-bubble { color:var(--text-weak); font-size:var(--font-caption); background:var(--bg-fill); padding:5px 12px; border-radius:20px; text-align:center; }
.pa-card { width:100%; background:var(--bg-surface); padding:16px; border-radius:var(--radius-lg); margin-top:12px; box-shadow:var(--shadow-btn); border:1px solid var(--bg-fill); }
.pa-card-eyebrow { display:inline-block; font-size:10px; color:var(--text-weak); background:var(--color-track); border-radius:6px; padding:4px 7px; margin-bottom:9px; }
.pa-card h3,.pa-current-plan h3 { margin:0; font-size:var(--font-emphasis); line-height:1.5; font-weight:600; }
.pa-card-subtitle { margin:5px 0 10px; font-size:var(--font-aux); line-height:1.65; color:var(--text-weak); }
.pa-card .pa-rows dt { flex-basis:65px; }
.pa-note { color:var(--text-weak); font-size:var(--font-caption); line-height:1.8; margin:10px 0 0; }
.pa-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pa-card-actions:empty { display:none; }
.pa-card-actions .pa-btn { flex:1; font-size:var(--font-aux); padding:10px 12px; }
.pa-options { display:grid; gap:8px; margin-top:12px; }
.pa-option { display:flex; align-items:center; gap:9px; text-align:left; width:100%; padding:12px; background:var(--bg-page); border:1px solid transparent; border-radius:var(--radius-sm); color:var(--text-body); }
.pa-option:disabled { cursor:default; opacity:.65; }
.pa-option.is-selected { background:var(--color-track); border-color:var(--color-accent-deep); opacity:1; }
.pa-option > span:nth-child(2) { flex:1; }
.pa-option b { display:block; font-size:var(--font-body); font-weight:600; line-height:1.5; }
.pa-option small { display:block; font-size:var(--font-caption); line-height:1.6; color:var(--text-weak); margin-top:3px; }
.pa-option strong { font-size:var(--font-aux); white-space:nowrap; }
.pa-option-mark { font-size:var(--font-title); }
.pa-fields { border-top:1px solid var(--bg-fill); margin-top:12px; }
.pa-field { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 0; font-size:var(--font-aux); border-bottom:1px solid var(--bg-fill); }
.pa-field select { max-width:165px; min-width:90px; padding:8px; border:1px solid var(--bg-fill); background:var(--bg-page); border-radius:8px; font:inherit; color:var(--text-body); }
.pa-field input[type=checkbox] { appearance:none; width:36px; height:22px; border-radius:20px; background:var(--bg-fill); position:relative; cursor:pointer; transition:background .2s; }
.pa-field input[type=checkbox]::after { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:var(--bg-surface); transition:transform .2s; }
.pa-field input[type=checkbox]:checked { background:var(--color-accent-deep); }
.pa-field input[type=checkbox]:checked::after { transform:translateX(14px); }
.pa-old-card { color:var(--text-weak); font-size:var(--font-caption); margin-top:8px; padding-left:10px; border-left:2px solid var(--bg-fill); }
.pa-composer { background:var(--bg-surface); border-top:1px solid var(--bg-fill); padding:10px 14px 18px; flex-shrink:0; }
.pa-choices { display:flex; gap:7px; overflow:auto; padding:0 0 10px; scrollbar-width:none; max-height:90px; }
.pa-choices:empty { display:none; }
.pa-suggestion { flex-shrink:0; background:var(--color-track); border:1px solid var(--color-accent-bg); font-size:var(--font-aux); padding:8px 11px; max-width:295px; text-align:left; }
.pa-input-row { display:flex; gap:8px; align-items:center; background:var(--bg-page); border:1px solid var(--bg-fill); padding:6px 6px 6px 14px; border-radius:var(--radius-card); }
.pa-input { border:0; background:transparent; font:inherit; font-size:var(--font-body); min-width:0; flex:1; color:var(--text-primary); outline:none; }
.pa-input-row:focus-within { border-color:var(--color-accent-deep); }
.pa-send { border:0; background:var(--color-accent); width:34px; height:34px; border-radius:50%; font-size:23px; color:var(--text-primary); }
.pa-input-foot { text-align:center; color:var(--text-weak); font-size:10px; margin-top:9px; }
.pa-chart { margin:14px 0; }
.pa-chart svg { display:block; width:100%; color:var(--text-weak); }
.pa-chart-labels { display:flex; justify-content:space-between; color:var(--text-weak); font-size:9px; text-align:center; line-height:1.5; }
.pa-current-plan { background:var(--bg-surface); border-radius:var(--radius-lg); padding:18px; }
.pa-current-plan h3 { margin-top:8px; }
.pa-section-title { font-size:var(--font-body); margin:24px 0 12px; }
.pa-classic-summary { background:var(--color-track); padding:18px; border-radius:var(--radius-lg); margin:14px 14px 0; border:1px solid var(--color-accent-bg); }
.pa-classic-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pa-mini-status { font-size:10px; color:var(--text-weak); }
.pa-classic-summary h2 { font-size:var(--font-title); line-height:1.5; margin:10px 0 6px; }
.pa-classic-summary > p { font-size:var(--font-aux); color:var(--text-weak); line-height:1.7; margin:0; }
.pa-classic-summary .pa-primary { width:100%; margin-top:14px; }
.pa-classic-summary .pa-rows > div { border-color:var(--color-accent-bg); }
.pa-history-label { padding:16px 20px 2px; font-size:10px; line-height:1.6; color:var(--text-weak); }
.pa-demo .hm-overview { margin-top:14px; }
@keyframes pa-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes pa-fade { from { opacity:.6; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .pa-conversation,.pa-message { animation:none; } .pa-btn,.pa-scenario { transition:none; } }
@media (max-width:899px) { .side-panel { background:var(--bg-page); border-radius:var(--radius-card); } .pa-panel-inner { padding:24px; } .pa-lab-title { margin-top:24px; } }
@media (min-width:900px) and (max-width:1279px) { #panel-right { background:var(--bg-page); border-radius:var(--radius-card); } }
.pa-panel-close { display:none; }
@media (max-width:1279px) { .pa-close-right { display:block; margin:0 0 20px auto; font-size:var(--font-aux); } }
@media (max-width:899px) { .pa-close-left { display:block; margin:0 0 20px auto; font-size:var(--font-aux); } }
@media (max-width:359px) { #panel-left,#panel-right { width:calc(100vw - 20px); } }
.pa-send:disabled { opacity:.4; cursor:default; }
.pa-input:disabled { color:var(--text-weak); }
.st-group .pa-rows { margin:0 16px 12px; }
.st-group .pa-rows dt { flex-basis:100px; }
.st-group > .pa-btn { margin:0 16px 16px; width:calc(100% - 32px); }
.pa-classic-actions { display:flex; align-items:stretch; gap:8px; margin-top:14px; }
.pa-classic-actions .pa-primary { width:auto; flex:1; margin-top:0; font-size:var(--font-aux); padding-left:10px; padding-right:10px; }
.pa-classic-actions .pa-secondary { flex:0 0 auto; font-size:var(--font-aux); padding-left:12px; padding-right:12px; }
 
.pa-card .pa-rows > div,.pa-current-plan .pa-rows > div,.pa-classic-summary .pa-rows > div { gap:12px; padding:8px 0; }
.pa-card .pa-rows dt,.pa-current-plan .pa-rows dt,.pa-classic-summary .pa-rows dt { flex:0 0 76px; font-size:var(--font-caption); line-height:1.65; }
.pa-card .pa-rows dd,.pa-current-plan .pa-rows dd,.pa-classic-summary .pa-rows dd { text-align:left; line-height:1.65; font-weight:400; }
.pa-card { padding:14px; margin-top:10px; }
.pa-card-subtitle { margin:4px 0 8px; line-height:1.55; }
.pa-card-eyebrow { margin-bottom:7px; padding:3px 6px; }
.pa-option { padding:10px; gap:8px; }
.pa-option small { margin-top:2px; line-height:1.5; }
.pa-card .pa-note { font-size:10px; line-height:1.65; margin-top:8px; }
.pa-field--select { display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:10px 0; }
.pa-field select { max-width:none; min-width:0; width:100%; padding:10px; text-overflow:ellipsis; }
.pa-history-card { width:100%; margin-top:10px; background:var(--bg-surface); border:1px solid var(--bg-fill); border-radius:var(--radius-sm); overflow:hidden; }
.pa-history-card > summary { cursor:pointer; padding:11px 12px; font-size:var(--font-aux); line-height:1.5; color:var(--text-weak); }
.pa-history-card > summary > span { font-weight:500; }
.pa-history-card > summary > small { display:block; margin:3px 0 0 14px; font-size:10px; color:var(--text-weak); font-weight:400; }
.pa-history-card .pa-card { margin:0; border:0; border-top:1px solid var(--bg-fill); border-radius:0; box-shadow:none; }
.pa-history-card .pa-card-eyebrow { display:none; }
.pa-history-card .pa-card h3 { font-size:var(--font-body); }
.pa-option--readonly { cursor:default; }
.pa-legacy-example { margin:16px 14px 110px; border:1px solid var(--bg-fill); border-radius:var(--radius-md); background:var(--bg-surface); }
.pa-legacy-example > summary { padding:15px; cursor:pointer; color:var(--text-weak); font-size:var(--font-aux); line-height:1.6; }
.pa-legacy-example[open] > summary { border-bottom:1px solid var(--bg-fill); }
.pa-message-list { overflow-anchor:none; }
.pa-timeline-head + .pa-next-event { margin-top:12px; }
.pa-timeline { margin:14px 0 10px; }
.pa-timeline li { min-height:31px; padding-bottom:8px; }

.pa-demo .fit-fab {
  width: auto;
  min-width: 44px;
  padding-inline: 14px;
  gap: 7px;
  border-radius: 99px;
  font: 600 12px/1.2 var(--font-family-base);
  color: #324b42;
  background: var(--bg-surface);
}