/* Generated by scripts/export-app-demo.cjs; regenerate from APP source. */
/* Source: family-ai-app/src/styles.css */
.demo-app{--bg:#fff;--surface:#fff;--soft:#f5f5f6;--line:#ebebee;--ink:#25272d;--sub:#6d6f77;--accent:#50535c;--blue-soft:#f1f2f4;--danger:#bf3654;--avatar-bg:#f4f4f6;--mask:#20212738;--user-bg:#f3f3f5;--white:#fff;--radius:calc(32 * var(--app-rpx));--small-radius:calc(20 * var(--app-rpx));--pad:calc(40 * var(--app-rpx));--text:calc(28 * var(--app-rpx));--tiny:calc(22 * var(--app-rpx));--hero:calc(48 * var(--app-rpx));--touch:calc(88 * var(--app-rpx));background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;font-size:var(--text);line-height:1.6}
.demo-app div,.demo-app span,.demo-app button,.demo-app input,.demo-app textarea,.demo-app div{box-sizing:border-box}.demo-app button{padding:0;margin:0;font:inherit;line-height:inherit;background:none;border:0;color:inherit;border-radius:var(--small-radius)}.demo-app button::after{border:0;border-radius:inherit}.demo-app button[disabled]{color:var(--sub);opacity:.45;background:none}.demo-app button:active{opacity:.75}.demo-app .row{display:flex;align-items:center;gap:calc(20 * var(--app-rpx))}.demo-app .between{justify-content:space-between}.demo-app .grow{flex:1;min-width:0}.demo-app .block{display:block}

/* Chat layout tokens shared by the home, composer and history drawer. */
.demo-app{--app-width:600px;--space-1:calc(8 * var(--app-rpx));--space-2:calc(12 * var(--app-rpx));--space-3:calc(16 * var(--app-rpx));--space-4:calc(20 * var(--app-rpx));--space-5:calc(24 * var(--app-rpx));--space-6:calc(32 * var(--app-rpx));--space-7:calc(40 * var(--app-rpx));--space-8:calc(48 * var(--app-rpx));--space-9:calc(64 * var(--app-rpx));--font-note:calc(18 * var(--app-rpx));--font-caption:calc(22 * var(--app-rpx));--font-small:calc(24 * var(--app-rpx));--font-body:calc(28 * var(--app-rpx));--font-title:calc(30 * var(--app-rpx));--font-greeting:calc(40 * var(--app-rpx));--weight-medium:500;--weight-strong:600;--line-normal:1.6;--hairline:calc(1 * var(--app-rpx));--radius-pill:calc(60 * var(--app-rpx));--radius-card:calc(32 * var(--app-rpx));--radius-input:calc(40 * var(--app-rpx));--header-height:calc(108 * var(--app-rpx));--icon-button:calc(76 * var(--app-rpx));--composer-action:calc(68 * var(--app-rpx));--composer-line:calc(56 * var(--app-rpx));--composer-lines:calc(168 * var(--app-rpx));--tool-card-height:calc(160 * var(--app-rpx));--attachment-size:calc(88 * var(--app-rpx));--stop-size:calc(24 * var(--app-rpx));--stop-radius:calc(4 * var(--app-rpx));--drawer-section-height:calc(80 * var(--app-rpx));--drawer-layer:80;--drawer-fraction:76%;--drawer-duration:300ms;--drawer-easing:cubic-bezier(.22,.68,0,1);--capsule-space:calc(190 * var(--app-rpx));--status-fallback:18px;--home-top:calc(48 * var(--app-rpx))}

/* Reference layout for an empty new conversation. */
.demo-app{--home-welcome-top:calc(30 * var(--app-rpx));--home-mascot:calc(180 * var(--app-rpx));--home-companion-size:calc(280 * var(--app-rpx));--home-principal-companion-scale:1.1;--companion-cycle-duration:3.2s;--companion-row-duration:.8s;--home-greeting:calc(44 * var(--app-rpx));--home-role-font:calc(19 * var(--app-rpx));--home-agent-min-width:calc(200 * var(--app-rpx));--home-prompt-font:calc(25 * var(--app-rpx));--home-prompt-height:calc(100 * var(--app-rpx));--home-input-radius:calc(44 * var(--app-rpx));--home-input-height:calc(78 * var(--app-rpx));--home-action:calc(72 * var(--app-rpx));--answer-actions-width:calc(480 * var(--app-rpx));--mascot-stage-extra:calc(12 * var(--app-rpx));--mascot-float-duration:4.8s;--mascot-blink-duration:5.6s;--mascot-float-distance:calc(-5 * var(--app-rpx));--mascot-float-peak:calc(-9 * var(--app-rpx));--mascot-tilt:4deg;--mascot-tilt-reverse:-4deg;--mascot-roll:1.5deg;--mascot-roll-reverse:-1.5deg;--mascot-eye-top:45.5%;--mascot-eye-width:calc(15 * var(--app-rpx));--mascot-eye-height:calc(23 * var(--app-rpx));--mascot-eye-left:34.8%;--mascot-eye-right:33.7%;--mascot-line-width:calc(11 * var(--app-rpx));--mascot-line-height:calc(3 * var(--app-rpx));--mascot-face:#dce7ff;--mascot-eye:#29497f;--mascot-shadow-width:calc(78 * var(--app-rpx));--mascot-shadow-height:calc(10 * var(--app-rpx));--mascot-shadow-blur:calc(7 * var(--app-rpx));--mascot-shadow:#7e9bd0;--mascot-shadow-opacity:.24;--mascot-shadow-scale:.76}

/* Account screens follow the supplied white/black login and gray grouped settings references. */
.demo-app{--auth-pad:calc(56 * var(--app-rpx));--auth-button-height:calc(98 * var(--app-rpx));--auth-button-radius:calc(30 * var(--app-rpx));--auth-avatar:calc(260 * var(--app-rpx));--auth-hero-gap:calc(44 * var(--app-rpx));--auth-hero-bottom:calc(64 * var(--app-rpx));--auth-phone-top:calc(80 * var(--app-rpx));--auth-phone-gap:calc(80 * var(--app-rpx));--auth-close:calc(52 * var(--app-rpx));--auth-heading:calc(36 * var(--app-rpx));--auth-title-gap:calc(48 * var(--app-rpx));--auth-sheet-radius:calc(48 * var(--app-rpx));--auth-sheet-top:calc(64 * var(--app-rpx));--auth-check:calc(28 * var(--app-rpx));--code-caret-width:calc(4 * var(--app-rpx));--code-caret-duration:1s;--auth-black:var(--ink);--auth-mask:rgba(25,26,30,.25);--auth-blue:var(--accent);--auth-disabled:#eeeef0;--settings-bg:#f6f6f7;--settings-muted:var(--sub);--settings-line:#f0f0f2;--settings-pad:calc(36 * var(--app-rpx));--settings-row-pad:calc(28 * var(--app-rpx));--settings-radius:calc(36 * var(--app-rpx));--settings-group-gap:calc(24 * var(--app-rpx));--settings-row-gap:calc(28 * var(--app-rpx));--settings-row-height:calc(98 * var(--app-rpx));--settings-icon:calc(54 * var(--app-rpx));--settings-icon-radius:calc(17 * var(--app-rpx));--settings-avatar:calc(160 * var(--app-rpx));--settings-name:calc(36 * var(--app-rpx));--settings-switch-width:calc(88 * var(--app-rpx));--settings-switch-height:calc(52 * var(--app-rpx));--settings-header-layer:10;--icon-blue:linear-gradient(145deg,#e6eff4,#d6e4ec);--icon-purple:linear-gradient(145deg,#afa7ff,#8679e8);--icon-green:linear-gradient(145deg,#61d9bd,#21ad95);--icon-gray:linear-gradient(145deg,#a4b7cc,#7e96af);--icon-red:linear-gradient(145deg,#ffacba,#ec7690);--warm-surface:#faf6ef;--default-chat-bg:#fff;--chat-large:calc(34 * var(--app-rpx))}


/* UX review: preview sizing and local action menu. */
.demo-app{--appearance-preview-height:calc(420 * var(--app-rpx));--directory-height:65vh;--popover-layer:95;--popover-width:calc(340 * var(--app-rpx));--popover-shadow:0 calc(8 * var(--app-rpx)) calc(36 * var(--app-rpx)) #202b451a}

/* Neutral surfaces keep color in illustrations and small functional accents. */
.demo-app{
 --home-canvas:#fff;
 --account-canvas:var(--settings-bg);
 --login-canvas:#fff;
 --profile-canvas:linear-gradient(145deg,#f0f0f5,#fbfbfd);
 --mint-soft:#eafaf5;--blue-edge:#dedfe4;--action-fill:#303239;--on-action:#fff;--control-edge:#94969e;
 --card-shadow:0 calc(4 * var(--app-rpx)) calc(20 * var(--app-rpx)) rgba(30,32,40,.025);
 --floating-shadow:0 calc(6 * var(--app-rpx)) calc(24 * var(--app-rpx)) rgba(30,32,40,.055),0 calc(1 * var(--app-rpx)) calc(3 * var(--app-rpx)) rgba(30,32,40,.03);
 --action-shadow:0 calc(4 * var(--app-rpx)) calc(16 * var(--app-rpx)) rgba(30,32,40,.08);
 --surface-edge:rgba(40,42,52,.07);
 --nav-glass:rgba(250,250,251,.9);--glass-blur:20px;
 --touch-tint:#f1f2f4;--touch-duration:160ms;
 --neutral-icon-filter:brightness(0) opacity(.62);
 --blue-icon-filter:var(--neutral-icon-filter);
 --action-icon-filter:brightness(0) invert(1);
 --mint-icon-filter:brightness(0) saturate(100%) invert(45%) sepia(34%) saturate(880%) hue-rotate(116deg) brightness(89%) contrast(87%);
 --hint-opacity:.6;--profile-ring:calc(6 * var(--app-rpx));--settings-name-gap:calc(20 * var(--app-rpx));
 --suggestion-symbol:calc(58 * var(--app-rpx));--suggestion-symbol-radius:calc(18 * var(--app-rpx));--tag-inset:calc(4 * var(--app-rpx)) calc(12 * var(--app-rpx));
 --drawer-search-height:calc(88 * var(--app-rpx));--drawer-new-height:calc(82 * var(--app-rpx));--drawer-link-gap:calc(4 * var(--app-rpx));
 --directory-title:calc(46 * var(--app-rpx));--directory-title-line:1.4;
}
@media (prefers-reduced-motion:reduce){}

.demo-app{--notice-surface:#fff;--notice-ink:#25272d;--notice-layer:220;--notice-radius:calc(16 * var(--app-rpx));--dialog-layer:210;--dialog-width:calc(560 * var(--app-rpx));--dialog-action-width:calc(156 * var(--app-rpx))}

/* Markdown table columns retain readable width on narrow screens. */
.demo-app{--md-cell-min-width:calc(180 * var(--app-rpx));--attachment-card-width:calc(360 * var(--app-rpx))}

/* Independent video stage uses the whole available viewport. */
.demo-app{--video-stage-bg:#0b1220;--video-overlay:rgba(38,45,53,.64);--video-success:#38964b;--video-cover-height:56.25%;--video-portrait-width:72%;--video-play-symbol:calc(108 * var(--chat-rpx,calc(1 * var(--app-rpx))));--video-play-overlay:rgba(64,64,60,.72);--video-check-size:calc(30 * var(--app-rpx));--video-action-icon-filter:brightness(0) invert(1);--video-player-radius:calc(20 * var(--app-rpx));--video-player-max-width:600px;--focus-width:2px;--focus-offset:2px}


/* Source: family-ai-app/src/styles-reference.css */
/* Measurements translated from the six 1080 x 2336 references to 750rpx. */
.demo-app{--ref-paper:#fff;--composer-ink:#16181b;--composer-muted:#999999;--composer-border:#f5f5f5;--composer-focus-border:var(--composer-border);--ref-black:var(--ink);--ref-gray:#f5f5f6;--ref-muted:var(--sub);--ref-label:#65676f;--ref-line:var(--line);--ref-dim:rgba(0,0,0,.32);--ref-inset:calc(22 * var(--app-rpx));--ref-gap:calc(14 * var(--app-rpx));--ref-card-radius:calc(26 * var(--app-rpx));--ref-input-radius:calc(28 * var(--app-rpx));--ref-input-height:calc(98 * var(--app-rpx));--ref-input-shadow:0 calc(8 * var(--app-rpx)) calc(22 * var(--app-rpx)) rgba(0,0,0,.09);--ref-chip-height:calc(66 * var(--app-rpx));--ref-chip-radius:calc(14 * var(--app-rpx));--ref-chip-font:calc(24 * var(--app-rpx));--ref-input-font:calc(30 * var(--app-rpx));--ref-body-font:calc(28 * var(--app-rpx));--ref-tile-size:calc(166 * var(--app-rpx));--ref-tile-icon:calc(44 * var(--app-rpx));--ref-panel-height:calc(566 * var(--app-rpx));--ref-panel-top:calc(28 * var(--app-rpx));--ref-panel-bottom:calc(24 * var(--app-rpx));--ref-panel-sheet-top:calc(84 * var(--app-rpx));--ref-panel-header:calc(94 * var(--app-rpx));--ref-panel-radius:calc(28 * var(--app-rpx));--ref-status-space:calc(72 * var(--app-rpx));--ref-header-height:calc(86 * var(--app-rpx));--ref-header-action:calc(76 * var(--app-rpx));--ref-title-width:calc(320 * var(--app-rpx));--ref-thumb-radius:calc(22 * var(--app-rpx));--ref-selection-size:calc(38 * var(--app-rpx));--ref-selection-inset:calc(14 * var(--app-rpx));--ref-border:calc(2 * var(--app-rpx));--ref-photo-gap:calc(2 * var(--app-rpx));--ref-file-height:calc(146 * var(--app-rpx));--ref-file-inset:calc(28 * var(--app-rpx));--ref-empty-icon:calc(78 * var(--app-rpx));--ref-empty-gap:calc(24 * var(--app-rpx));--ref-layer:100;--ref-camera-layer:110;--ref-camera-yellow:#ffd22b;--ref-camera-control:rgba(20,20,20,.38);--ref-camera-gradient:linear-gradient(100deg,#efd2b3,#f096c8);--ref-camera-ratio:3/4;--ref-camera-height:62%;--ref-frame-top:19%;--ref-frame-left:9.25%;--ref-camera-header:calc(164 * var(--app-rpx));--ref-camera-bottom:calc(368 * var(--app-rpx));--ref-camera-frame:81.5%;--ref-frame-corner:calc(86 * var(--app-rpx));--ref-frame-radius:calc(44 * var(--app-rpx));--ref-frame-border:calc(3 * var(--app-rpx));--ref-shutter:calc(134 * var(--app-rpx));--ref-shutter-border:calc(6 * var(--app-rpx));--ref-shutter-inner:calc(112 * var(--app-rpx));--ref-camera-side:calc(88 * var(--app-rpx));--ref-camera-zoom:calc(56 * var(--app-rpx));--ref-camera-white-filter:brightness(0) invert(1);--ref-recommend-gap:calc(18 * var(--app-rpx));--ref-recommend-top:calc(24 * var(--app-rpx));--ref-recommend-bottom:calc(20 * var(--app-rpx));--ref-answer-inset:calc(28 * var(--app-rpx));--ref-answer-radius:calc(28 * var(--app-rpx));--ref-answer-line:1.65;--ref-tiny:calc(20 * var(--app-rpx));--ref-toolbar-bottom:calc(20 * var(--app-rpx));--ref-bottom-inset:var(--space-3);--ref-control-size:calc(64 * var(--app-rpx));--ref-file-caption:calc(26 * var(--app-rpx));--ref-top-title:calc(34 * var(--app-rpx))}
.demo-app .ref-white-icon{filter:var(--ref-camera-white-filter)}
.demo-app{--recording-solid-end:12%;--recording-solid-fade:55%;--recording-overlay-height:36vh;--recording-layer:120;--recording-content-bottom:calc(86 * var(--app-rpx));--recording-content-gap:calc(66 * var(--app-rpx));--recording-wave-height:calc(64 * var(--app-rpx));--recording-wave-width:66%;--recording-bar-width:calc(6 * var(--app-rpx));--recording-bar-height:calc(8 * var(--app-rpx));--recording-bar-gap:calc(4 * var(--app-rpx));--recording-wave-duration:100ms;--recording-blue-duration:140ms;--recording-cancel-color:#f20d32;--recording-blue-gradient:radial-gradient(ellipse 90% 100% at 50% 100%,#096cf6 0%,rgba(17,132,250,.94) 35%,rgba(52,176,253,.62) 58%,rgba(126,210,255,.15) 76%,rgba(126,210,255,.025) 90%,rgba(126,210,255,0) 100%);--recording-red-gradient:linear-gradient(to top,#ffdbd9 0%,rgba(255,219,217,.96) 48%,rgba(255,228,228,.6) 70%,rgba(255,255,255,0) 100%)}

/* Composer controls measured from the supplied 722 x 122 crop. */
.demo-app{--composer-symbol-size:calc(48 * var(--app-rpx));--composer-control-gap:calc(14 * var(--app-rpx));--composer-text-inset:calc(4 * var(--app-rpx));--composer-caret:#009bff;--composer-keyboard-gap:calc(18 * var(--app-rpx))}


/* Source: family-ai-app/src/theme.css */
.demo-app{
 color-scheme:light;
 color:var(--ink);background:var(--bg);
 --chat-user-bg:#12a8f4;--chat-ai-bg:#f5f5f6;--thinking-pill-bg:#ececee;--thinking-dot:#1a1a1a;--answer-action-bg:#e8f2ff;--answer-action-divider:#e3e4e7;--answer-action-icon-filter:brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(2705%) hue-rotate(199deg) brightness(102%) contrast(104%);--navigation-icon-filter:brightness(0);--app-icon-filter:none;
}


/* Source: family-ai-app/src/pages/chat/index.vue */

.demo-app .chat-page{position:relative;height:100%;display:flex;flex-direction:column;max-width:var(--app-width);margin:auto;background:var(--bg)}
.demo-app .status-space{flex-shrink:0}.demo-app .chat-header{height:var(--ref-header-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--ref-inset);flex-shrink:0;position:relative}
.demo-app .header-side{display:flex;align-items:center;gap:var(--space-1)}.demo-app .nav-button{width:var(--ref-header-action);height:var(--ref-header-action);display:flex;align-items:center;justify-content:center}.demo-app .role-title{position:absolute;left:50%;transform:translateX(-50%);width:var(--ref-title-width);color:var(--ref-black)}.demo-app .title-row{justify-content:center;gap:var(--space-1);font-size:var(--font-title);font-weight:var(--weight-strong)}.demo-app .header-note{display:block;font-size:var(--ref-tiny);color:var(--ref-muted)}
.demo-app .chat-scroll{flex:1;min-height:0;height:0}.demo-app .home-content{padding:var(--space-4) var(--pad) var(--space-5);min-height:100%;display:flex;flex-direction:column;box-sizing:border-box}.demo-app .home-content .welcome{flex:1;justify-content:center}
.demo-app .jump-latest-anchor{position:relative;height:0;flex-shrink:0;z-index:5}
.demo-app .jump-latest{position:absolute;bottom:var(--space-2);left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;padding:calc(12 * var(--app-rpx)) calc(28 * var(--app-rpx));border-radius:calc(999 * var(--app-rpx));background:var(--surface);border:var(--hairline) solid var(--line);box-shadow:var(--card-shadow);font-size:var(--font-caption);color:var(--accent);font-weight:var(--weight-strong)}

.demo-app .welcome{display:flex;flex-direction:column;align-items:center;padding:var(--home-welcome-top) 0 var(--space-4);text-align:center}.demo-app .hello{font-size:var(--home-greeting);font-weight:var(--weight-strong);line-height:var(--line-normal)}.demo-app .welcome-note{font-size:var(--font-small);color:var(--sub);margin-top:var(--space-5)}
.demo-app .home-section{font-size:var(--font-small);font-weight:var(--weight-medium);color:var(--sub);margin:var(--space-6) 0 var(--space-4)}.demo-app .rotate-prompts{color:var(--accent);font-size:var(--font-caption);min-height:var(--space-9);display:flex;align-items:center}
.demo-app .home-agents-scroll{width:100%;min-width:0;flex-shrink:0}.demo-app .home-agents{display:flex;gap:var(--space-2)}.demo-app .home-agent{flex:0 0 auto;min-width:var(--home-agent-min-width);display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:var(--hairline) solid var(--line);background:var(--surface);border-radius:var(--radius-pill);font-size:var(--font-caption);line-height:var(--line-normal)}
.demo-app .suggestions{display:flex;flex-direction:column;gap:var(--space-2)}.demo-app .suggestion{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:var(--home-prompt-height);padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--surface);border:var(--hairline) solid var(--surface-edge);box-shadow:var(--card-shadow);font-size:var(--home-prompt-font);line-height:var(--line-normal);text-align:left;white-space:normal}
.demo-app .role-row{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;text-align:left;border-bottom:var(--hairline) solid var(--line)}.demo-app .role-selected{color:var(--accent);font-size:var(--font-caption);flex-shrink:0}.demo-app .role-row.selected .role-name{color:var(--accent)}.demo-app .role-name{display:block;font-size:var(--font-body);margin-bottom:var(--space-1)}.demo-app .chat-bottom{height:var(--space-1)}
.demo-app .home-agent>span{white-space:nowrap}
.demo-app .home-agent.selected{border-color:var(--blue-edge);background:var(--blue-soft);color:var(--accent)}
.demo-app .suggestion-symbol{width:var(--suggestion-symbol);height:var(--suggestion-symbol);flex-shrink:0;border-radius:var(--suggestion-symbol-radius);background:var(--blue-soft);display:flex;align-items:center;justify-content:center}.demo-app .suggestion-symbol img{filter:var(--blue-icon-filter)}.demo-app .suggestion:nth-child(2) .suggestion-symbol{background:var(--mint-soft)}.demo-app .suggestion:nth-child(2) .suggestion-symbol img{filter:var(--mint-icon-filter)}
.demo-app .suggestion>img{opacity:var(--hint-opacity)}.demo-app .nav-button{border-radius:50%}.demo-app .nav-button:active{background:var(--touch-tint)}.demo-app .suggestion:active,.demo-app .home-agent:active{background:var(--blue-soft)}






/* Source: family-ai-app/src/components/chat-messages.vue */

.demo-app .speech-status{display:block;color:var(--accent);font-size:var(--font-caption);margin-top:var(--space-3)}.demo-app .speech-active{background:var(--blue-soft);color:var(--accent)}.demo-app .speech-stop{width:var(--stop-size);height:var(--stop-size);border-radius:var(--stop-radius);background:currentColor}

.demo-app .messages{padding:var(--space-3) var(--ref-inset) var(--space-3);color:var(--ref-black)}
.demo-app .date{display:block;text-align:center;color:var(--ref-muted);font-size:var(--ref-tiny);margin:var(--space-1) 0 var(--space-5)}
.demo-app .message{margin-bottom:var(--space-5)}.demo-app .assistant-row{display:flex;align-items:flex-start;gap:var(--space-3);width:100%}.demo-app .assistant-content{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.demo-app .user-profile-entry{display:flex;flex-shrink:0;padding:0;margin:0;border:0;border-radius:50%;background:transparent;line-height:normal}.demo-app .user-profile-entry::after{border:0}
.demo-app .user-row{display:flex;align-items:flex-start;justify-content:flex-end;gap:var(--space-3);width:100%}.demo-app .user-wrap{display:flex;flex-direction:column;align-items:flex-end;min-width:0;margin-left:var(--space-7)}
.demo-app .bubble{background:var(--chat-user-bg);color:var(--white);padding:var(--space-3) var(--space-5);border-radius:var(--ref-answer-radius);line-height:var(--ref-answer-line);white-space:pre-wrap;overflow-wrap:anywhere}
.demo-app .user-media{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-3);max-width:100%}.demo-app .user-media+.bubble{margin-top:var(--space-3)}
.demo-app .user-media-item{display:block;width:min(62vw,var(--attachment-card-width));padding:0;margin:0;border:0;background:transparent;line-height:normal;text-align:left}
.demo-app .user-media-item::after{border:0}
.demo-app .user-media-image{display:block;width:100%;height:calc(var(--attachment-card-width) * 1.35);border-radius:var(--small-radius);background:var(--soft)}
.demo-app .user-media-file{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(var(--attachment-size) * 1.7);padding:var(--space-4);border:var(--hairline) solid var(--line);border-radius:var(--small-radius);background:var(--surface)}
.demo-app .user-media-name{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;color:var(--ink);font-size:var(--font-body);font-weight:var(--weight-strong);line-height:1.4}
.demo-app .user-media-type{display:flex;align-items:center;gap:var(--space-1);color:var(--sub);font-size:var(--font-caption)}
.demo-app .bubble.voice-transcript{cursor:pointer}.demo-app .voice-transcript .bubble-text{text-decoration-line:underline;text-decoration-thickness:var(--hairline);text-underline-offset:var(--space-1)}
.demo-app .answer-card{max-width:100%;box-sizing:border-box;background:var(--chat-ai-bg);border-radius:var(--ref-answer-radius);padding:var(--ref-answer-inset);width:100%}
.demo-app .storyboard-stream-plan{width:100%;box-sizing:border-box;margin-top:var(--space-4);padding:var(--space-4);border:var(--hairline) solid var(--ref-line);border-radius:var(--ref-answer-radius);background:var(--surface)}
.demo-app .storyboard-plan-title{display:block;font-weight:var(--weight-strong)}.demo-app .storyboard-plan-text{display:block;white-space:pre-wrap;overflow-wrap:anywhere;line-height:var(--line-normal);margin-top:var(--space-3)}.demo-app .storyboard-plan-hint{display:block;font-size:var(--font-small);line-height:var(--line-normal);color:var(--sub);margin-top:var(--space-2)}
.demo-app .storyboard-sync-retry{margin:var(--space-3) 0 0;padding:0 var(--space-4);height:calc(64 * var(--app-rpx));border:var(--hairline) solid var(--ref-line);border-radius:calc(999 * var(--app-rpx));background:var(--surface);color:var(--accent);font-size:var(--font-small);line-height:calc(64 * var(--app-rpx))}
.demo-app .answer-card.is-thinking{padding:0;background:transparent}
.demo-app .answer{display:block;line-height:var(--ref-answer-line);font-size:var(--ref-body-font);overflow-wrap:anywhere}
.demo-app .answer:not(.chat-md){white-space:pre-wrap}
.demo-app .answer-disclaimer{display:block;width:var(--answer-actions-width);max-width:100%;margin-top:var(--space-6);font-size:var(--ref-chip-font);color:var(--ref-muted)}
.demo-app .thinking{display:flex;align-items:center;gap:var(--space-3)}
.demo-app .building-copy{display:flex;flex-direction:column;gap:calc(4 * var(--app-rpx));min-width:0}
.demo-app .building-label{font-size:var(--ref-chip-font);color:var(--sub);font-weight:var(--weight-strong)}
.demo-app .building-sub{font-size:var(--ref-tiny);color:var(--ref-muted);line-height:1.4}
.demo-app .thinking-pill{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--app-rpx));height:calc(56 * var(--app-rpx));padding:0 calc(28 * var(--app-rpx));border-radius:calc(999 * var(--app-rpx));background:var(--thinking-pill-bg);flex-shrink:0}
.demo-app .thinking-dot{width:calc(12 * var(--app-rpx));height:calc(12 * var(--app-rpx));border-radius:50%;background:var(--thinking-dot);animation:thinking-wave 1.05s ease-in-out infinite}
.demo-app .thinking-dot:nth-child(1){animation-delay:0s}
.demo-app .thinking-dot:nth-child(2){animation-delay:.15s}
.demo-app .thinking-dot:nth-child(3){animation-delay:.3s}
.demo-app .thinking-fallback{color:var(--sub)}
@keyframes thinking-wave{
 0%,100%{opacity:.22}
 35%{opacity:1}
 70%{opacity:.45}
}
.demo-app .message-game-card{margin-top:var(--space-5)}.demo-app .message-game-card.without-copy{margin-top:0}
.demo-app .game-miss{margin-top:var(--space-5);padding:var(--space-5);border-radius:var(--ref-answer-radius);background:var(--surface);border:var(--hairline) dashed var(--ref-line);width:100%;box-sizing:border-box}
.demo-app .game-miss-title{display:block;font-weight:var(--weight-strong);margin-bottom:calc(8 * var(--app-rpx))}
.demo-app .game-miss-hint{display:block;font-size:var(--ref-chip-font);color:var(--ref-muted);line-height:1.5;margin-bottom:var(--space-4)}
.demo-app .game-miss-btn{height:calc(64 * var(--app-rpx));border-radius:calc(999 * var(--app-rpx));border:var(--hairline) solid var(--ref-line);font-size:var(--ref-chip-font);background:transparent}
.demo-app .answer-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%;max-width:100%;margin-top:var(--space-5);padding-top:var(--space-4);border-top:var(--hairline) solid var(--answer-action-divider)}.demo-app .answer-actions-main{display:flex;align-items:center;gap:var(--space-2)}.demo-app .answer-action{width:var(--ref-control-size);height:var(--ref-control-size);flex-shrink:0;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--small-radius);background:var(--answer-action-bg)}.demo-app .answer-action img{filter:var(--answer-action-icon-filter)}.demo-app .retry-answer{margin:0;border-radius:var(--small-radius)}
.demo-app .stopped{margin-top:var(--space-3);color:var(--sub)}
.demo-app .recommendations{padding-top:var(--ref-recommend-top);padding-bottom:var(--ref-recommend-bottom);display:flex;flex-direction:column;align-items:flex-start;gap:var(--ref-recommend-gap)}
.demo-app .recommend-label{width:100%;text-align:center;color:var(--ref-muted);font-size:var(--ref-tiny);margin-bottom:var(--space-2)}
.demo-app .recommend-question{max-width:100%;padding:var(--space-3) var(--space-4);border:var(--ref-border) solid var(--ref-line);border-radius:var(--ref-chip-radius);font-size:var(--ref-chip-font);font-weight:var(--weight-strong);text-align:left;line-height:var(--line-normal)}


/* Source: family-ai-app/src/components/chat-composer.vue */

.demo-app .send.access-restricted{width:auto;padding:0 var(--space-3);border-radius:var(--small-radius);font-size:var(--font-caption)}
.demo-app .attachment-strip{width:100%;margin-bottom:var(--space-3)}.demo-app .attachment-cards{display:flex;gap:var(--space-3);padding:var(--space-2)}
.demo-app .attachment-card,.demo-app .attachment-add{position:relative;flex-shrink:0;width:calc(var(--attachment-size) * 2);height:calc(var(--attachment-size) * 2);border-radius:var(--small-radius);overflow:hidden}
.demo-app .attachment-document{width:var(--attachment-card-width)}
.demo-app .attachment-card{background:var(--soft);border:var(--hairline) solid var(--line)}.demo-app .attachment-preview{display:block;width:100%;height:100%}
.demo-app .attachment-file{height:100%;padding:var(--space-3);display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.demo-app .attachment-name{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;font-size:var(--font-small);font-weight:var(--weight-strong);line-height:1.35;padding-right:var(--space-4)}
.demo-app .attachment-type{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-caption);color:var(--sub)}
.demo-app .attachment-add{display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--sub)}
.demo-app .attachment-remove{position:absolute;top:var(--space-1);right:var(--space-1);display:flex;align-items:center;justify-content:center;width:var(--space-6);height:var(--space-6);border-radius:50%;background:var(--surface);color:var(--ink)}



.demo-app .composer-box:focus-within{border-color:var(--composer-focus-border)}.demo-app .tool-option:active{background:var(--blue-soft)}
.demo-app .composer-wrap.is-keyboard-focused{padding-bottom:calc(var(--composer-keyboard-gap) + var(--app-safe-area-bottom,env(safe-area-inset-bottom)))}
.demo-app .composer-wrap{background:transparent;padding:var(--space-3) var(--ref-inset) 0;flex-shrink:0;color:var(--composer-ink)}.demo-app .composer-box{border-radius:var(--ref-input-radius);background:var(--ref-paper);box-shadow:var(--ref-input-shadow);border:var(--hairline) solid var(--composer-border);padding:var(--space-2) var(--space-3)}.demo-app .composer-line{display:flex;align-items:center;min-height:calc(var(--ref-input-height) - var(--space-2) * 2);gap:var(--composer-control-gap)}.demo-app .chat-input{flex:1;min-width:0;width:0;min-height:var(--composer-line);max-height:var(--composer-lines);line-height:var(--composer-line);font-size:var(--ref-input-font);padding:0 var(--composer-text-inset);caret-color:var(--composer-caret);overflow:hidden}.demo-app .input-placeholder{color:var(--composer-muted)}.demo-app .composer-symbol{width:var(--composer-symbol-size);height:var(--composer-symbol-size);flex-shrink:0;filter:var(--navigation-icon-filter)}.demo-app .tool{width:var(--ref-control-size);height:var(--ref-control-size);flex-shrink:0;display:flex;align-items:center;justify-content:center}.demo-app .hold-to-talk{flex:1;font-size:var(--ref-input-font);font-weight:var(--weight-strong);min-height:var(--composer-line)}.demo-app .send{border-radius:50%;background:var(--chat-user-bg);color:var(--white);width:var(--home-input-radius);height:var(--home-input-radius);margin:0 var(--space-2)}.demo-app .send img{filter:brightness(0) invert(1)}.demo-app button.send[disabled]{background:var(--chat-user-bg);color:var(--white);opacity:.55}.demo-app .tools-expanded{padding-bottom:var(--app-safe-area-bottom,env(safe-area-inset-bottom))}.demo-app .tools-panel{height:var(--ref-panel-height);padding-top:var(--ref-panel-top)}.demo-app .tool-options,.demo-app .recent-photos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ref-gap)}.demo-app .tool-options{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-app .tool-option{aspect-ratio:1;background:var(--ref-gray);border-radius:var(--ref-card-radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);font-size:var(--ref-chip-font);color:var(--ref-label)}.demo-app .recent-photos{margin-top:var(--ref-gap)}.demo-app .recent-photo{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--ref-thumb-radius)}.demo-app .recent-photo img{width:100%;height:100%;display:block}.demo-app .recent-check{position:absolute;right:var(--space-1);top:var(--space-1);border-radius:50%;background:var(--auth-blue);color:var(--white);width:var(--ref-selection-size);height:var(--ref-selection-size)}
.demo-app .hold-to-talk::after{border:0}.demo-app .hold-to-talk{background:transparent;border:0;box-shadow:none;padding:0;margin:calc(var(--space-2) * -1) 0;align-self:stretch;min-height:var(--ref-input-height);display:flex;align-items:center;justify-content:center;border-radius:var(--small-radius);line-height:inherit;color:inherit;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.demo-app .hold-to-talk:active{opacity:1}.demo-app .hold-to-talk.is-pressed{background:var(--soft)}.demo-app .hold-to-talk.recording{color:var(--composer-ink)}.demo-app .hold-to-talk.cancelling{color:var(--danger)}.demo-app button.hold-to-talk[disabled]{background:transparent;color:var(--composer-muted);opacity:1}.demo-app .composer-footer{height:calc(var(--ref-bottom-inset) + var(--app-safe-area-bottom,env(safe-area-inset-bottom)))}.demo-app .voice-hint{display:block;text-align:center;font-size:var(--font-caption);padding:var(--space-2);color:var(--sub)}.demo-app .voice-preview{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);margin-top:var(--space-2);border-radius:var(--radius-card);background:var(--ref-gray);font-size:var(--font-small)}.demo-app .voice-preview button{display:flex;align-items:center;min-height:var(--space-9)}


/* Source: family-ai-app/src/components/agent-avatar.vue */

.demo-app .agent-avatar{position:relative;overflow:hidden;background:var(--avatar-bg);flex-shrink:0}
.demo-app .agent-avatar-image{position:absolute;inset:0;width:100%;height:100%;display:block}


/* Source: family-ai-app/src/components/user-avatar.vue */

.demo-app .user-avatar{position:relative;box-sizing:border-box;border-radius:50%;background:var(--avatar-bg);flex-shrink:0;overflow:hidden}
.demo-app .user-avatar-image{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo-app .user-avatar-remote{opacity:0;transition:opacity 160ms ease}
.demo-app .user-avatar-remote.ready{opacity:1}
@media (prefers-reduced-motion:reduce){.demo-app .user-avatar-remote{transition:none}}


/* Source: family-ai-app/src/components/welcome-companion.vue */

.demo-app .welcome-companion{position:relative;width:calc(var(--home-companion-size) * var(--home-principal-companion-scale) * .75);height:calc(var(--home-companion-size) * var(--home-principal-companion-scale));flex-shrink:0;margin-bottom:var(--space-5)}
.demo-app .companion-poster{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}


/* Source: family-ai-app/src/styles/chat-markdown.css */
/* rich-text 的节点样式在所属组件内声明，三端使用同一组类名。 */
.demo-app .chat-md{--md-heading-main:1.18em;--md-heading-section:1.08em;display:block;max-width:100%;line-height:var(--ref-answer-line);overflow-wrap:anywhere;word-break:break-word}
.demo-app .md-p{margin:0 0 var(--space-4)}
.demo-app .md-p:last-child,.demo-app .md-ul:last-child,.demo-app .md-ol:last-child{margin-bottom:0}
.demo-app .md-h1,.demo-app .md-h2,.demo-app .md-h3,.demo-app .md-h4,.demo-app .md-h5,.demo-app .md-h6{margin:var(--space-5) 0 var(--space-2);font-size:inherit;font-weight:var(--weight-strong);line-height:var(--line-normal)}
.demo-app .md-h1{font-size:var(--md-heading-main)}.demo-app .md-h2{font-size:var(--md-heading-section)}.demo-app .md-h3{font-size:inherit}
.demo-app .chat-md>.md-h1:first-child,.demo-app .chat-md>.md-h2:first-child,.demo-app .chat-md>.md-h3:first-child,.demo-app .chat-md>.md-h4:first-child,.demo-app .chat-md>.md-h5:first-child,.demo-app .chat-md>.md-h6:first-child,.demo-app .chat-md>.md-ul:first-child,.demo-app .chat-md>.md-ol:first-child,.demo-app .chat-md>.md-blockquote:first-child,.demo-app .chat-md>.md-pre:first-child,.demo-app .chat-md>.md-code-card:first-child,.demo-app .chat-md>.md-table-scroll:first-child,.demo-app .chat-md>.md-hr:first-child,.demo-app .chat-md>.md-math-block:first-child{margin-top:0}
.demo-app .md-ul,.demo-app .md-ol{margin:var(--space-2) 0 var(--space-4);padding-left:var(--space-7)}
.demo-app .md-ul{list-style-type:disc}.demo-app .md-ol{list-style-type:decimal}
.demo-app .md-li{margin:var(--space-2) 0}.demo-app .md-li>.md-p{margin-bottom:var(--space-2)}
.demo-app .md-strong{font-weight:var(--weight-strong)}.demo-app .md-em{font-style:italic}.demo-app .md-s{text-decoration:line-through}
.demo-app .md-blockquote{margin:var(--space-3) 0;padding-left:var(--space-4);border-left:var(--space-1) solid var(--line);color:var(--sub)}
.demo-app .md-code{font-family:monospace;font-size:inherit;background:var(--soft);padding:0 var(--space-1);border-radius:var(--space-1)}
.demo-app .md-pre{box-sizing:border-box;max-width:100%;white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal;background:var(--soft);padding:var(--space-3);border-radius:var(--small-radius);margin:var(--space-3) 0}
.demo-app .md-pre .md-code{padding:0;background:transparent;border-radius:0;white-space:inherit}
.demo-app .md-code-card{max-width:100%;margin:var(--space-3) 0;border:var(--hairline) solid var(--line);border-radius:var(--small-radius);overflow:hidden;background:var(--bg)}.demo-app .md-code-label{padding:var(--space-2) var(--space-3);color:var(--sub);border-bottom:var(--hairline) solid var(--line);font-size:inherit}.demo-app .md-code-card .md-pre{margin:0;background:transparent;border-radius:0}
.demo-app .md-table{color:inherit;width:100%;table-layout:auto;border-collapse:collapse;margin:var(--space-3) 0;font-size:inherit}
.demo-app .md-table-scroll{display:block;max-width:100%;overflow-x:auto;margin:var(--space-3) 0}.demo-app .md-table-scroll .md-table{margin:0}
.demo-app .md-th,.demo-app .md-td{min-width:var(--md-cell-min-width);border:var(--hairline) solid var(--line);padding:var(--space-2);vertical-align:top;overflow-wrap:anywhere;word-break:break-all}
.demo-app .md-th{font-weight:var(--weight-strong);background:var(--soft)}
.demo-app .md-a{color:var(--accent);text-decoration:underline;word-break:break-all}
.demo-app .md-hr{border:0;border-top:var(--hairline) solid var(--line);margin:var(--space-4) 0}

.demo-app .md-math-block{display:block;max-width:100%;overflow-x:auto;margin:var(--space-4) 0}.demo-app .md-math-block .katex-display{margin:0;text-align:left}.demo-app .md-math-inline{display:inline-block;max-width:100%;vertical-align:middle;overflow-x:auto}.demo-app .md-math-fallback{color:inherit;font-family:monospace;overflow-wrap:anywhere}.demo-app .chat-md .katex{font-size:1.1em}