.demo-bar,.demo-panel,.demo-panel * { box-sizing:border-box; }
.demo-bar { width:402px; min-height:56px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 12px; background:var(--dc-color-surface); border:1px solid var(--dc-color-border); border-radius:var(--dc-radius-card); color:var(--dc-color-ink); }
.demo-bar>div { display:flex; align-items:center; gap:10px; min-width:0; }
.demo-bar strong { font-size:12px; font-weight:600; padding:5px 7px; background:var(--dc-color-brand-soft); color:var(--dc-color-brand-strong); border-radius:6px; white-space:nowrap; }
.demo-bar span { font-size:12px; line-height:1.4; }
.demo-bar small { display:block; font-size:11px; color:var(--dc-color-text-secondary); }
.demo-bar .dc-button { min-height:40px; font-size:13px; padding:8px 12px; flex-shrink:0; }
.demo-overlay { position:fixed; inset:0; z-index:10000; background:var(--dc-color-scrim); display:flex; justify-content:center; align-items:center; padding:16px; overscroll-behavior:contain; }
.demo-panel { width:460px; max-width:100%; max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; background:var(--dc-color-surface); color:var(--dc-color-ink); border-radius:24px; padding:22px; box-shadow:var(--dc-shadow-feature); font:14px/1.65 var(--dc-font-family); }
.demo-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.demo-heading small { font-size:12px; color:var(--dc-color-brand-strong); }
.demo-heading h2 { margin:3px 0 0; font-size:24px; line-height:1.4; }
.demo-close { min-height:44px; padding:8px 12px; border:0; border-radius:10px; color:var(--dc-color-text-secondary); background:var(--dc-color-subtle); font:inherit; cursor:pointer; }
.demo-panel p { margin:12px 0; color:var(--dc-color-text-secondary); }
.demo-identities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.demo-identities button { min-height:88px; text-align:left; padding:12px; border:1px solid var(--dc-color-border); border-radius:14px; background:var(--dc-color-surface); color:var(--dc-color-ink); cursor:pointer; }
.demo-identities strong { display:block; font-size:16px; line-height:1.6; }
.demo-identities small { display:block; font-size:12px; line-height:1.6; color:var(--dc-color-text-secondary); }
.demo-panel button[aria-pressed=true] { border-color:var(--dc-color-brand); background:var(--dc-color-brand-soft); color:var(--dc-color-brand-strong); box-shadow:inset 0 0 0 1px var(--dc-color-brand); }
.demo-data-label { font-size:14px; font-weight:600; margin:20px 0 8px; }
.demo-segment { display:flex; gap:4px; background:var(--dc-color-subtle); border-radius:12px; padding:4px; }
.demo-segment button { flex:1; min-height:44px; font:inherit; border:0; border-radius:9px; background:transparent; color:var(--dc-color-text-secondary); cursor:pointer; }
.demo-helper { font-size:12px; }
.demo-start { width:100%; font-size:16px; min-height:48px; }
.demo-more { border-bottom:1px solid var(--dc-color-divider); margin-top:10px; padding:4px 0 10px; }
.demo-more summary { min-height:44px; padding:12px 0; cursor:pointer; color:var(--dc-color-text-secondary); }
.demo-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; }
.demo-shortcuts button,.demo-footer-actions button { min-height:44px; border:1px solid var(--dc-color-border); border-radius:10px; padding:8px; font:inherit; font-size:13px; color:var(--dc-color-ink); background:var(--dc-color-surface); cursor:pointer; }
.demo-footer-actions { display:flex; gap:10px; margin:14px 0; }
.demo-footer-actions button { flex:1; border:0; background:var(--dc-color-subtle); }
.demo-boundary { background:var(--dc-color-page); padding:14px; border-radius:12px; font-size:12px; line-height:1.7; }
.demo-boundary p { margin:6px 0 0; }
.demo-reset { background:var(--dc-color-warning-soft); border-radius:12px; padding:14px; }
.demo-reset button+button { margin-left:10px; }
.demo-message { overflow-wrap:anywhere; padding:10px; background:var(--dc-color-brand-soft); border-radius:10px; }
.demo-message textarea { width:100%; height:85px; font:inherit; }
.demo-panel button:focus-visible,.demo-more summary:focus-visible { outline:2px solid var(--dc-color-brand); outline-offset:3px; }
@media(max-width:600px) {
  html,body.dc-launch-app { height:100%; overflow:hidden; }
  body.dc-launch-app .dc-demo-stage { height:100vh!important; height:100dvh!important; min-height:0!important; padding:0!important; gap:0!important; justify-content:flex-start!important; }
  body.dc-launch-app:has(.coach-chat) .dc-demo-stage { height:var(--cc-viewport-height,100dvh)!important; }
  body.dc-launch-app .demo-bar { flex-shrink:0; width:100%; height:56px; border:0; border-bottom:1px solid var(--dc-color-divider); border-radius:0; padding:6px 12px; }
  body.dc-launch-app .dc-demo-stage [data-om-starter="ios-frame"] { flex:1!important; min-height:0!important; width:100%!important; height:auto!important; border-radius:0!important; box-shadow:none!important; }
  body.dc-launch-app [data-om-starter="ios-frame"]>[data-ios-status-bar],body.dc-launch-app [data-om-starter="ios-frame"]>div:first-child,body.dc-launch-app [data-om-starter="ios-frame"]>div:last-child { display:none!important; }
  body.dc-launch-app .dc-app-shell { padding-top:8px!important; }
  body.dc-launch-app { --dc-safe-bottom:max(12px,env(safe-area-inset-bottom,0px)); }
  .demo-overlay { padding:0; align-items:flex-end; }
  .demo-panel { width:100%; max-height:calc(100dvh - 12px); border-radius:22px 22px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px)); }
  .demo-identities { margin-top:14px; }
  .demo-identities button { min-height:82px; }
  .demo-panel input,.demo-panel select,.demo-panel textarea,body.dc-launch-app input,body.dc-launch-app textarea,body.dc-launch-app select { font-size:16px; }
}