@import url("./model-picker.css");

.chat-screen {
  background: radial-gradient(ellipse 290px 200px at 50% 99%, #6440b5bd, #29144d45 65%, transparent 95%), #000;
}
.assistant-chat-label { font-size:11px; color:#c5a8ed; margin:0 0 12px; letter-spacing:.5px; }
.chat-screen [hidden] { display:none!important; }
.chat-screen .content { overscroll-behavior:contain; }
.chat-screen button:focus-visible,.chat-screen a:focus-visible { outline:2px solid #bd9cff; outline-offset:3px; }
.chat-screen .grow { min-width:0; }
.chat-screen .task-panel h2,.chat-screen .task-panel h3 { overflow-wrap:anywhere; }
.chat-screen .header { display:grid; grid-template-columns:28px minmax(0,1fr) auto; min-height:50px; padding:0 16px 8px; gap:10px; }
.chat-screen .content { padding:10px 16px 18px; }
.chat-screen .header h1 { font-size:16px; }
.chat-model { display:flex; align-items:center; justify-content:center; gap:8px; min-height:34px; padding:5px 12px; border:1px solid #ffffff25; border-radius:30px; font-weight:650; font-size:16px; }
.chat-model img { width:20px; height:20px; object-fit:contain; }
.chat-screen .header .back { width:28px; min-width:28px; }
.chat-model { min-width:0; justify-self:center; max-width:100%; }
.chat-model > span:first-of-type { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-model img, .chat-model > .small { flex-shrink:0; }
.chat-screen .header .chat-credit-balance { width:auto; min-width:48px; max-width:90px; text-align:right; font-variant-numeric:tabular-nums; }
.chat-credit-balance small { display:block; color:#9d8faf; font-size:9px; font-weight:400; }
.chat-credit-balance strong { display:block; color:#ddc7f7; font-size:13px; font-weight:600; margin-top:3px; overflow-wrap:anywhere; }
.chat-initial { min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 0 10px; }
.chat-welcome-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px; }
.chat-welcome-heading h2 { font-size:21px; font-weight:650; letter-spacing:.2px; }
.chat-welcome-heading p { font-size:12px; color:#8f889b; margin:7px 0 0; }
.refresh-prompts { display:flex; align-items:center; gap:4px; flex-shrink:0; min-height:44px; color:#b8a2dc; font-size:11px; }
.refresh-prompts span { font-size:19px; }
.chat-prompt-list { display:grid; gap:9px; }
.chat-initial .prompt-card { position:relative; padding:12px 32px 12px 14px; margin:0; border:1px solid #ffffff0d; border-radius:16px; background:linear-gradient(115deg,#211a2e,#18171c); text-align:left; }
.chat-initial .prompt-card small { color:#b6a1d8; font-size:10px; }
.chat-initial .prompt-card p { font-size:13px; line-height:1.55; margin:6px 0 0; color:#eeebf2; }
.prompt-chevron { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#8d7da6; font-size:21px; }
.chat-initial .prompt-card:active { background:#30213f; border-color:#ad86e04a; }
.chat-dock-new { flex-shrink:0; padding:0 16px max(42px,env(safe-area-inset-bottom)); }
.chat-shortcuts { display:flex; overflow-x:auto; gap:7px; padding:0 0 14px; scrollbar-width:none; }
.chat-shortcuts > * { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid #ffffff4a; border-radius:40px; background:#09070c60; font-size:11px; font-weight:600; white-space:nowrap; }
.chat-shortcuts img { width:16px; height:16px; object-fit:contain; }
.chat-dock-new .composer { margin:0; border-color:#ffffff48; background:#100e184a; padding:0 12px 10px; }
.chat-dock-new textarea { min-height:56px; max-height:110px; font-size:14px; padding:14px 1px; }
.chat-dock-new .send { width:28px; height:28px; font-size:19px; }
.chat-dock-new .composer-actions { justify-content:flex-end; }
.chat-entry { display:block; color:#8e879d; font-size:14px; text-align:left; }
.chat-entry .entry-placeholder { display:block; min-height:60px; padding:14px 3px; }
.chat-entry .row { color:#ccc6dd; }
.chat-entry .send { opacity:.5; display:grid; place-items:center; }
.chat-screen .message { background:#151515; padding:16px; margin:0 0 14px; border-radius:0 17px 17px; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-screen .message.user { background:#5631a5; margin-left:auto; width:fit-content; max-width:88%; border-radius:18px 0 18px 18px; }
.chat-screen .message .actions { display:flex; gap:16px; margin-top:12px; }
.chat-screen .message .actions button { font-size:16px; color:#b9b4c1; }
.chat-screen .message .actions [aria-pressed=true] { color:#b7a1ff; }
.chat-intro { padding:15px 16px; background:#141414; border-radius:0 16px 16px; margin:0 0 16px; font-size:14px; line-height:1.6; }
.contribution-menu { border:1px solid #ffffff44; border-radius:14px; padding:16px 12px 6px; background:linear-gradient(105deg,#ffffff13,#ffffff03); }
.contribution-menu h2 { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:8px; }
.contribution-menu h2 img { width:19px; height:19px; }
.center-item { width:100%; display:flex; text-align:left; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #ffffff1c; }
.center-item:last-child { border:0; }
.center-item > img { width:36px; height:36px; object-fit:contain; }
.center-item h3 { font-size:14px; }
.center-item p { color:#8c8795; font-size:12px; margin:3px 0 0; line-height:1.4; }
.center-item:first-of-type h3 { color:#86f3a8; }
.center-item .arrow { margin-left:auto; padding-left:5px; }
.task-panel { position:relative; padding:16px 12px; border:1px solid #ffffff40; border-radius:17px; background:linear-gradient(145deg,#ffffff0e,#ffffff05); margin-bottom:16px; }
.task-panel.purple-panel { background:linear-gradient(155deg,#3a2e60e0,#171024d9 65%,#0c0815e0); box-shadow:inset 0 2px 12px #c2a7ff25; }
.task-panel-head { display:flex; align-items:center; gap:10px; padding-bottom:15px; border-bottom:1px solid #ffffff17; margin-bottom:20px; }
.task-panel-head .task-icon { width:44px; height:44px; display:grid; place-items:center; background:linear-gradient(#ffffff1d,#ffffff05); border-radius:12px; flex-shrink:0; }
.task-icon img { width:25px; height:25px; object-fit:contain; }
.task-panel-head h2 { font-size:16px; }
.task-panel-head small { display:block; color:#827c8d; margin-top:3px; }
.task-panel-head .chip { margin-top:5px; font-size:11px; padding:1px 7px; background:#ffffff0c; color:#9991ab; }
.task-stars { margin-left:auto; text-align:right; align-self:flex-start; white-space:nowrap; letter-spacing:1px; color:#f7cf81; }
.task-stars small { letter-spacing:0; max-width:75px; overflow:hidden; text-overflow:ellipsis; font-size:9px; }
.task-stars .off { color:#38323f; }
.task-panel > .btn + .btn { margin-top:8px; }
.task-back { display:block; width:100%; color:#a39baa; text-decoration:underline; text-align:center; margin-top:18px; padding:7px 0; font-size:12px; }
.level-option { width:100%; display:flex; justify-content:space-between; padding:21px 13px; border:1px solid #ffffff40; border-radius:14px; margin-bottom:8px; background:linear-gradient(#ffffff0b,#0002); }
.theme-option { min-height:50px; border:1px solid #ffffff35; border-radius:14px; background:#08051144; padding:12px 8px; font-size:13px; }
.selection-summary { display:flex; justify-content:space-between; gap:12px; padding:13px 12px; border-radius:8px; background:#ffffff0a; margin:6px 0; font-size:12px; }
.selection-summary span:first-child { color:#aaa2b8; }
.task-resume { width:100%; text-align:left; border:1px solid #6c548d; border-radius:12px; background:#21172e; padding:13px; margin-bottom:12px; font-size:12px; }
.task-resume small { display:block; margin-top:5px; color:#aaa1b7; }
.permission-symbol { font-size:34px; width:70px; height:70px; display:grid; place-items:center; margin:5px auto 20px; border-radius:50%; background:#463463; }
.sheet-note { font-size:13px; line-height:1.7; color:#b3abbf; margin:12px 0 22px; }
.chat-tools-hint { color:#9e95ab; font-size:11px; line-height:1.6; }
.ongoing-list { display:grid; gap:10px; }
.ongoing-item { display:flex; align-items:center; text-align:left; width:100%; padding:12px 9px; gap:8px; border:1px solid #ffffff15; background:#120e2080; border-radius:10px; }
.ongoing-item .task-icon { width:26px; flex-shrink:0; }
.ongoing-item .grow { flex:1; }
.ongoing-item strong,.ongoing-item small { display:block; }
.ongoing-item strong { font-size:12px; margin:4px 0; }
.ongoing-item small { font-size:10px; color:#a397b1; }
.ongoing-item.selected { border-color:#b592ff; background:#7753b344; }
.ongoing-item.dimmed { opacity:.55; }
.task-badge { display:inline-block; flex-shrink:0; font-size:10px; border-radius:5px; padding:3px 7px; background:#433155; color:#ceafea; }
.task-badge.pass { background:#224b3d; color:#80dfaa; }
.task-badge.fail { background:#4d2c3a; color:#f1a5ab; }
.task-badge.pending { background:#474023; color:#e6cc7a; }
.exclusive-card { display:block; background-size:cover; background-position:center; width:100%; min-height:116px; margin-bottom:12px; border-radius:12px; text-align:left; padding:16px; border:1px solid #ffffff20; }
.exclusive-card strong { display:block; font-size:16px; max-width:85%; }
.exclusive-card p { font-size:12px; color:#c2bdc9; line-height:1.7; margin:10px 0 0; max-width:90%; }
.task-requirement { font-size:14px; line-height:1.8; color:#e3ddec; margin:12px 0; }
.task-rules { font-size:12px; color:#b0a4bf; line-height:1.8; padding-left:18px; margin:18px 0; }
.task-runner { padding-bottom:12px; }
.question-title { font-size:15px; font-weight:600; line-height:1.6; margin:8px 0 16px; }
.question-text { background:#100b1b8a; border:1px solid #ffffff15; border-radius:12px; font-size:15px; line-height:1.9; padding:24px 16px; margin:16px 0; }
.question-media { margin:16px 0; }
.question-media.image-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.question-image { position:relative; min-width:0; }
.image-answer { display:block; width:100%; overflow:hidden; border:2px solid transparent; border-radius:11px; position:relative; background:#0d0912; }
.image-answer img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.image-answer img.single-question-image { aspect-ratio:1.12; max-height:300px; object-position:50% 85%; }
.image-answer.selected { border-color:#b68bf9; }
.image-check { display:none; position:absolute; bottom:7px; right:7px; background:#9b68eb; border-radius:50%; width:20px; height:20px; font-size:12px; line-height:20px; }
.selected .image-check { display:block; }
.zoom-image { position:absolute; top:8px; right:8px; background:#0008; width:27px; height:27px; border-radius:50%; font-size:19px; }
.answer-options { display:flex; gap:10px; margin-top:18px; }
.answer-option { flex:1; padding:13px 10px; border:1px solid #ffffff48; border-radius:11px; font-size:14px; background:#ffffff04; }
.answer-option.selected { background:#8052b85e; border-color:#c59bff; }
.image-error { display:flex; flex-direction:column; justify-content:center; min-height:225px; padding:20px; text-align:center; border:1px dashed #9d86b76b; border-radius:12px; margin:16px 0; }
.image-error p { font-size:12px; color:#a698b6; margin:12px 0 20px; }
.media-preview { display:block; max-width:100%; width:100%; max-height:65dvh; object-fit:contain; border-radius:12px; background:#0e0c13; }
audio.media-preview { height:54px; }
.image-viewer { position:fixed; inset:auto; max-width:none; max-height:none; margin:0; padding:64px 0 max(24px,env(safe-area-inset-bottom)); border:0; color:white; background:#000; overflow:hidden; }
.image-viewer[open] { display:flex; align-items:center; justify-content:center; }
.image-viewer::backdrop { background:#000a; }
.image-viewer > img { display:block; width:100%; height:100%; object-fit:contain; }
.image-viewer-back { position:absolute; top:max(12px,env(safe-area-inset-top)); left:12px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:white; background:#0009; font-size:36px; line-height:1; }
@media(max-width:600px) { .image-viewer { padding-top:max(64px,calc(env(safe-area-inset-top) + 56px)); } }
.topic-label { display:block; font-size:12px; color:#c7bed3; margin:24px 0 8px; }
.topic-input { width:100%; padding:14px 12px; border:1px solid #80718f; background:#100b1b; color:white; border-radius:11px; font-size:14px; }
.topic-input:focus { outline:1px solid #af86ec; }
.field-error { color:#ffa5b6; font-size:12px; line-height:1.6; margin:10px 0; overflow-wrap:anywhere; }
.field-error:empty { display:none; }
.completed-topics { background:#140f20; padding:10px; border-radius:9px; margin-top:16px; color:#c4b0db; font-size:11px; }
.completed-topics p { margin:6px 0; }
.collection-heading { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.collection-heading span { font-size:11px; color:#b698d1; flex-shrink:0; }
.collection-heading h3 { font-size:15px; }
.upload-count { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:24px 0 12px; }
.upload-count strong { font-size:12px; }
.upload-count strong span { color:#8c7ba3; }
.upload-count small { font-size:10px; color:#b1a1c4; }
.upload-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.upload-thumb { position:relative; aspect-ratio:1; background:#150e24; border:1px solid #ffffff15; border-radius:10px; }
.upload-thumb > button:first-child { width:100%; height:100%; display:block; overflow:hidden; border-radius:10px; }
.upload-thumb img,.upload-thumb video { width:100%; height:100%; display:block; object-fit:cover; }
.remove-file { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; background:#110a20b8; font-size:17px; line-height:20px; }
.sample-tag { position:absolute; left:4px; bottom:4px; font-size:8px; padding:1px 3px; background:#100a20aa; border-radius:3px; pointer-events:none; }
.add-media { display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1; border:1px dashed #8d76aa; background:#ffffff06; border-radius:10px; }
.add-media strong { font-size:25px; color:#c6b1e5; font-weight:400; }
.add-media span { font-size:10px; margin-top:5px; color:#b8a6ca; }
.video-play { position:absolute; inset:0; display:grid; place-items:center; font-size:22px; color:#fffc; pointer-events:none; }
.video-duration { position:absolute; bottom:4px; right:4px; padding:1px 3px; border-radius:3px; background:#0009; font-size:9px; }
.reading-text { padding:24px 18px; font-size:18px; font-weight:500; min-height:130px; }
.audio-state { display:flex; align-items:center; flex-direction:column; padding:28px 0 15px; min-height:215px; }
.audio-state > p { font-size:12px; color:#b9aac9; margin:15px 0; }
.record-control { display:grid; place-items:center; width:70px; height:70px; margin:10px; background:linear-gradient(#b18ae8,#8655d2); box-shadow:0 0 0 9px #9772bb22; border:1px solid #cab6ff70; border-radius:50%; font-size:30px; color:white; }
.record-control.stop { background:#bb739d; width:58px; height:58px; font-size:23px; }
.record-ready { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#7553a140; color:#d0b2ff; font-size:26px; margin-bottom:15px; }
.audio-state > strong { font-size:13px; }
.record-preview { width:100%; height:42px; margin-top:18px; }
.record-time { font-size:20px; margin:16px 0; font-variant-numeric:tabular-nums; }
.record-time small { font-size:11px; color:#9d8aac; }
.waveform { display:flex; gap:4px; height:60px; align-items:center; }
.waveform i { display:block; width:4px; height:var(--h); border-radius:10px; background:#b383e8; }
.waveform.recording i { animation:wave 0.7s ease-in-out infinite alternate; animation-delay:var(--delay); }
@keyframes wave { to { transform:scaleY(.25); } }
.report-screen .content { padding:12px 16px 45px; }
.report-profile { display:flex; align-items:center; gap:12px; margin:12px 0 25px; }
.report-profile img { width:52px; height:52px; border-radius:50%; }
.report-profile h2 { font-size:18px; }
.report-profile small { display:block; color:#8d809e; font-size:10px; margin-top:7px; }
.report-stats { display:flex; padding:20px 0; background:linear-gradient(135deg,#4c356a70,#34244330); border:1px solid #a488bb50; border-radius:14px; margin-bottom:16px; }
.report-stats > div { flex:1; display:flex; align-items:center; flex-direction:column; gap:8px; }
.report-stats > div+div { border-left:1px solid #ffffff20; }
.report-stats strong { font-size:28px; }
.report-stats span { font-size:12px; color:#b4a4c5; }
.report-filters { display:flex; gap:6px; margin:24px 0 16px; }
.report-filters button { flex:1; font-size:12px; color:#9c8fab; padding:8px 5px; border-radius:8px; }
.report-filters [aria-selected=true] { color:#e4d5f9; background:#9772bb36; }
.report-card { padding:14px; margin-bottom:12px; border:1px solid #ffffff30; border-radius:13px; background:linear-gradient(140deg,#ffffff10,#ffffff03); }
.report-card h3 { font-size:14px; }
.report-task-icon img { width:24px; height:24px; display:block; }
.report-title { margin:16px 0 4px; font-size:13px; }
.report-id { color:#867793; font-size:10px; overflow-wrap:anywhere; }
.report-card dl { margin:15px 0 0; border-top:1px solid #ffffff12; padding-top:10px; }
.report-card dl > div { display:flex; justify-content:space-between; gap:15px; padding:5px 0; font-size:11px; }
.report-card dt { color:#9b8da9; flex-shrink:0; }
.report-card dd { text-align:right; margin:0; color:#c7bdd4; overflow-wrap:anywhere; }
.report-reason { font-size:11px; line-height:1.6; color:#c595a2; margin:12px 0 0; border-top:1px solid #ffffff12; padding-top:12px; }
@media(prefers-reduced-motion:reduce) { .waveform.recording i { animation:none; } }
@media(max-width:600px) {
  .chat-screen { height:var(--chat-height,100dvh); }
}

/* Figma 选择卡片：前级卡片露出标题，当前卡片压在前级之上。 */
.chat-screen { background:radial-gradient(ellipse 340px 245px at 50% 99%,#7852d3d9,#351b6150 70%,transparent 100%),#000; }
.chat-screen .content { padding-top:16px; }
.chat-dock-new { position:relative; z-index:3; }
.chat-dock-new.is-locked { padding-top:12px; background:linear-gradient(0deg,#1a0c36b8,transparent); }
.chat-dock-new .composer.is-disabled { border-color:#ffffff25; background:#120b2040; }
.chat-dock-new .composer.is-disabled textarea { cursor:default; color:#7f748d; -webkit-text-fill-color:#7f748d; opacity:1; }
.chat-dock-new .composer.is-disabled textarea::placeholder { color:#7f748d; }
.contribution-popover { position:absolute; left:14px; right:14px; z-index:5; padding:16px 12px 10px; overflow:auto; border-color:#ffffff45; border-radius:12px; background:linear-gradient(130deg,#121212,#09050f); box-shadow:0 10px 28px #0006; }
.contribution-popover h2 { font-size:12px; margin:0 0 7px; }
.contribution-popover .center-item { min-height:62px; padding:10px 2px; }
.contribution-popover .center-item:last-child { min-height:60px; }
.contribution-popover .center-item > img:not(.center-chevron) { width:32px; height:32px; }
.contribution-popover .center-item .center-chevron { width:16px; height:16px; margin-left:auto; }
.contribution-popover .center-item p { font-size:12px; color:#838383; }
.contribution-popover .center-item:first-of-type p { color:#39865b; }
.selection-request { min-height:51px; display:flex; align-items:center; padding:16px!important; margin-bottom:16px!important; font-size:14px!important; line-height:19px!important; }
.chat-screen .chat-intro { min-height:51px; padding:16px; line-height:19px; font-weight:400; margin-bottom:16px; background:#141414; }
.selection-stack { margin-bottom:16px; }
.selection-card { position:relative; border:1px solid #4f436d; border-radius:16px; background:linear-gradient(180deg,#120f22,#100623 41%,#070112); padding:15px 11px; }
.selection-stack > .selection-card+.selection-card { margin-top:-28px; }
.selection-card.collapsed { height:80px; padding:0; }
.selection-card.collapsed > .selection-heading { min-height:78px; padding:15px 11px; }
.selection-card.active { background:linear-gradient(180deg,#292152,#100623 41%,#070112); box-shadow:inset 0 0 20px #7268ad; }
.selection-heading { position:relative; display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; min-height:48px; }
.selection-icon { flex-shrink:0; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#ffffff08,#ffffff00); border:1px solid #ffffff15; }
.selection-icon > img { width:38px; height:38px; object-fit:contain; }
.selection-icon.type-icon { width:44px; height:44px; border-radius:8px; border:0; background:linear-gradient(129deg,#ffffff33,#ffffff00); }
.selection-icon.type-icon > img { width:24px; height:24px; }
.selection-heading-copy { flex:1; min-width:0; padding-top:2px; }
.selection-heading-line { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:20px; }
.selection-heading-line > strong { font-size:16px; line-height:20px; white-space:nowrap; font-weight:600; }
.selection-chosen { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.selection-chosen > small { color:#838383; font-size:11px; }
.selection-chosen > span { border:1px solid #ffffff4d; border-radius:10px; padding:1px 9px; font-size:11px; line-height:16px; max-width:110px; text-overflow:ellipsis; overflow:hidden; }
.selection-tags { display:flex; gap:4px; margin-top:6px; }
.selection-tags > span { color:#838383; background:#ffffff1a; border-radius:8px; font-size:12px; line-height:16px; padding:1px 6px; }
.selection-chevron { flex-shrink:0; width:24px; height:24px; transform:rotate(90deg); }
.selection-chevron.expanded { transform:rotate(-90deg); filter:brightness(2); }
.selection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
.selection-option { border:1px solid #ffffff33; border-radius:12px; padding:12px; text-align:left; background:linear-gradient(105deg,#ffffff12,#ffffff02); box-shadow:0 4px 4px #0008; }
.selection-option strong { display:block; font-size:16px; line-height:20px; margin-top:8px; }
.selection-option small { display:block; font-size:14px; line-height:18px; color:#838383; margin-top:6px; }
.selection-option-top,.selection-option-bottom { display:flex; align-items:center; justify-content:space-between; }
.selection-option-top > img { width:24px; height:24px; }
.selection-option-top > img:last-child,.selection-option-bottom > img { width:18px; height:18px; }
.selection-option.kind-option { min-height:115px; padding:20px 11px 16px; }
.selection-option-bottom { margin-top:10px; }
.selection-option-bottom strong { margin-top:0; }
.selection-levels { display:grid; gap:8px; margin-top:16px; }
.selection-card .level-option { display:flex; justify-content:space-between; align-items:center; min-height:65px; margin:0; padding:20px 12px; border-color:#ffffff66; border-radius:12px; background:linear-gradient(103deg,#ffffff1a,#99999907); font-size:16px; }
.selection-card .level-option > img { width:20px; height:20px; }
.selection-option.selected,.selection-card .level-option.selected,.selection-card .theme-option.selected { background:#ffffff40; border-color:#ffffffe6; }
.difficulty-stars { display:inline-flex; gap:0; line-height:0; }
.difficulty-stars > img { width:16px; height:16px; }
.selection-stack.is-confirmed .selection-card { background:#1b1b1b99; border-color:#ffffff4d; backdrop-filter:blur(3px); }
.selection-stack.is-confirmed .selection-heading-line > strong { color:#838383; }
.confirmation-card { margin:16px 0 0; }
.confirmation-rows { margin-top:16px; }
.confirmation-card .selection-summary { margin:6px 0; min-height:40px; padding:12px; border-radius:6px; font-size:12px; line-height:16px; }
.confirmation-card .selection-summary span:first-child { color:#babcbf; }
.selection-note { display:flex; gap:6px; font-size:11px; line-height:16px; color:#71697d; margin:14px 0 16px; }
.selection-note img { flex-shrink:0; width:16px; height:16px; }
.confirmation-card > .btn { min-height:56px; margin-top:8px; border-radius:18px; border:1px solid #bfaaff; font-size:16px; }
.confirmation-card > .selection-back { background:linear-gradient(145deg,#100b22,#080314); border-color:#ffffff55; box-shadow:inset 0 1px 12px #b8a5da15; }
.task-runner { padding:13px; border-color:#ffffff66; background:linear-gradient(180deg,#0009,#100d193b 58%,#b9a7df24); box-shadow:none; }
.task-runner .task-panel-head { gap:10px; margin-bottom:22px; padding-bottom:16px; }
.task-runner .task-icon { border-radius:8px; }
.task-runner .task-panel-head .chip { font-size:12px; padding:2px 6px; color:#838383; background:#ffffff1a; }
.task-runner .task-stars small { font-size:11px; color:#ffffff4d; }
.quick-runner .question-title { text-align:center; font-size:18px; line-height:24px; font-weight:500; margin:0 0 20px; }
.quick-runner .question-media { margin:0 0 16px; }
.quick-runner .image-answer { border:1px solid #ffffff22; border-radius:16px; }
.quick-runner .image-answer.selected { border-color:#caa6ff; border-width:2px; }
.quick-runner .single-question-image { height:207px; aspect-ratio:auto!important; max-height:207px!important; object-position:center 85%; }
.quick-runner .zoom-image { top:auto; bottom:10px; right:10px; width:22px; height:22px; font-size:16px; }
.quick-runner .answer-options { flex-direction:column; gap:8px; margin:0; }
.quick-runner .answer-option { width:100%; min-height:56px; font-size:16px; font-weight:600; padding:16px 12px; border-radius:18px; background:#7a7a7a1a; border-color:#ffffff4d; }
.quick-runner .answer-option.selected { background:#ffffff33; border-color:#b9a7e8; opacity:1; }
.completion-message { display:flex; flex-direction:column; gap:12px; margin-bottom:14px; }
.chat-screen .completion-message > .message { margin:0; padding:16px; border-radius:0 16px 16px; background:#ffffff14; font-size:14px; line-height:22px; font-weight:400; }
.completion-message > .actions { display:flex; gap:16px; align-items:center; }
.completion-message .actions button { display:grid; place-items:center; width:20px; height:20px; padding:0; border-radius:4px; }
.completion-message .actions img { display:block; width:15px; height:15px; object-fit:contain; }
.completion-message .reply-dislike { transform:rotate(180deg); }
.completion-message .actions [aria-pressed=true] { background:#b7a1ff33; outline:1px solid #b7a1ff; }
.completion-message .actions [aria-pressed=true] img { filter:brightness(1.4); }
.completion-disclaimer { display:flex; align-items:flex-start; gap:6px; margin:0; color:#ffffff4d; font-size:11px; line-height:15px; }
.completion-disclaimer > img { display:block; flex-shrink:0; width:16px; height:16px; }
.completion-disclaimer > span { min-width:0; overflow-wrap:anywhere; }
@media(max-width:360px) {
  .chat-initial { padding-bottom:6px; }
  .chat-welcome-heading { margin-bottom:12px; }
  .chat-welcome-heading h2 { font-size:18px; line-height:1.35; }
  .chat-welcome-heading p { margin-top:5px; font-size:11px; }
  .chat-prompt-list { gap:7px; }
  .chat-initial .prompt-card { padding:8px 29px 8px 12px; }
  .chat-initial .prompt-card p { font-size:12px; line-height:1.5; margin-top:4px; }
  .selection-heading { gap:7px; }
  .selection-heading-line > strong { font-size:14px; }
  .selection-chosen > small { display:none; }
  .selection-chosen > span { padding-inline:6px; max-width:90px; }
  .selection-icon { width:42px; height:44px; }
  .selection-chevron { width:20px; height:20px; }
  .selection-option strong { font-size:14px; }
}

.selection-card .level-option strong { font-weight:600; }

.chat-demo-scenes { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid #45404e; }
.chat-demo-panel { max-height: calc(100dvh - 90px); overflow-y: auto; }
.chat-demo-scenes label { font-weight: 600; }
.chat-demo-scenes select { width: 100%; min-width: 0; padding: 8px 5px; color: #eee; background: #241c31; border: 1px solid #655078; border-radius: 7px; font: inherit; }
.chat-demo-scenes button { background: #3d2b54; border: 1px solid #655078; border-radius: 7px; }
.chat-demo-scenes small { color: #b3a5c3; line-height: 1.5; }

/* 入口未满足登录和同意条件时，聊天外壳不展示。 */
.phone[hidden] { display:none; }
.has-task-exit > .task-panel-head, .has-task-exit > .selection-heading { padding-right:30px; }
.has-task-exit > h2 { padding-right:30px; }
.task-close { position:absolute; z-index:2; right:7px; top:7px; width:30px; height:30px; display:grid; place-items:center; padding:0; border-radius:50%; color:#ccc6d5; background:#ffffff0c; font-size:25px; line-height:1; }
.task-close:hover { background:#ffffff22; color:white; }
.task-submit-feedback { position:absolute; z-index:3; inset:3px; display:grid; place-items:center; border-radius:14px; background:#0000009e; backdrop-filter:blur(9.9px); -webkit-backdrop-filter:blur(9.9px); }
.task-submit-feedback > div { display:grid; justify-items:center; gap:12px; }
.task-submit-feedback img { width:60px; height:60px; display:block; }
.task-submit-feedback p { margin:0; color:#86f3a8; font-size:18px; font-weight:500; line-height:20px; }
.message.is-typing .actions, .completion-message.is-typing > .actions, .completion-message.is-typing > .completion-disclaimer { visibility:hidden; }
[data-ai-text] { white-space:pre-wrap; }
.message.is-typing [data-ai-text]::after, .completion-message.is-typing [data-ai-text]::after, .chat-intro.is-typing::after { content:'▍'; color:#cdbbff; margin-left:2px; }
/* 以实际卡片内容宽度计算正方形缩略图，两行之后只滚动列表内部。 */
.task-runner { container-type:inline-size; }
.upload-grid:not(.video-grid) { --thumb-size:calc((100cqw - 16px) / 3); grid-auto-rows:var(--thumb-size); max-height:calc(var(--thumb-size) * 2 + 8px); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#745992 #21182e; }
.upload-grid:not(.video-grid) > * { min-height:0; height:100%; aspect-ratio:auto; }