.canvas-listen{position:absolute;inset:0;z-index:37;pointer-events:none;}
.canvas-listen button,.canvas-listen input,.canvas-listen summary{pointer-events:auto;}
.canvas-sheet .canvas-listen-trigger[hidden]{display:none;}
.canvas-listen-trigger:disabled{cursor:progress;opacity:.75;}
.canvas-listen-scan{position:absolute;inset:92px 0 60px;overflow:hidden;pointer-events:none;}
.canvas-scan-beam{position:absolute;left:0;right:0;top:-15%;height:15%;background:linear-gradient(transparent,#cba9ed12 70%,#dfc5f440);border-bottom:1px solid #e7cff685;box-shadow:0 7px 22px #b991df15;animation:canvas-scan-pass 750ms ease-in-out forwards;}
.canvas-scan-card{position:absolute;left:6px;right:6px;bottom:3px;display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid #d7baf342;border-radius:20px;background:#2b2135ee;backdrop-filter:blur(22px);box-shadow:0 12px 35px #09041135;color:#eee2f6;}
.canvas-scan-card>div{flex:1;min-width:0;}.canvas-scan-card strong,.canvas-scan-card span{display:block;}
.canvas-scan-title{font-size:13px;font-weight:550;}.canvas-scan-detail{font-size:9px;line-height:1.5;color:#b8a2c8;margin-top:5px;}
.canvas-scan-card button{padding:6px 3px;min-height:32px;color:#d2b7e4;font-size:10px;}
.canvas-listen[data-listen-state=generating] .canvas-scan-beam{animation:none;opacity:0;}
.floating-card.is-canvas-scanning{outline:1px solid #ceb0e560;outline-offset:4px;}
@keyframes canvas-scan-pass{from{top:-15%;opacity:0;}15%{opacity:1;}85%{opacity:1;}to{top:100%;opacity:0;}}
.canvas-listen-panel{position:absolute;left:6px;right:6px;bottom:63px;max-height:calc(100% - 160px);overflow:auto;scrollbar-width:thin;padding:15px 16px 12px;border:1px solid #d7baf342;border-radius:22px;background:#2b2135f2;backdrop-filter:blur(22px);box-shadow:0 12px 35px #09041160,inset 0 1px #ffffff08;color:#efe6f6;pointer-events:auto;}
.canvas-listen-panel>header{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.canvas-listen-panel>header>div{display:flex;align-items:center;gap:9px;}
.canvas-listen-panel strong{font-size:14px;font-weight:650;letter-spacing:.1px;}
.canvas-listen-panel>header span{font-size:9px;padding:3px 6px;border-radius:7px;background:#d0a9f117;color:#c4aed6;white-space:nowrap;}
.canvas-listen-close{width:30px;height:30px;margin:-7px -6px -7px 0;border-radius:50%;color:#c4b4d0;font-size:20px;}
.canvas-listen-meta{font-size:10px;color:#afa0bd;margin:9px 0 10px;}
.canvas-listen-story-toggle{display:block;margin-top:7px;padding:0;color:#cdb3e0;font-size:10px;min-height:24px;}
.canvas-listen-panel.has-audio:not(.show-story) :is(.canvas-listen-brief,.canvas-listen-story,.canvas-listen-moods,.canvas-listen-about){display:none;}
.canvas-listen-order{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:2px 0 5px;}
.canvas-listen-order>span{flex:none;display:flex;align-items:center;gap:5px;padding:4px 7px 4px 4px;border-radius:12px;background:#ffffff08;color:#bfaecb;font-size:9px;transition:background 150ms,color 150ms;}
.canvas-listen-order b{display:grid;place-items:center;min-width:17px;height:17px;font-size:8px;border-radius:50%;background:#d8b8ee16;}
.canvas-listen-order .is-current{background:#d4b0ed;color:#291d34;}
.canvas-listen-brief{display:block;color:#d4c4e1;font-size:10px;margin:10px 0;}
.canvas-listen-brief textarea{display:block;box-sizing:border-box;width:100%;resize:vertical;min-height:58px;max-height:120px;margin-top:6px;padding:9px 10px;border:1px solid #d8b9ee30;border-radius:10px;background:#1b142573;color:#e8dced;font-size:11px;line-height:1.5;pointer-events:auto;}
.canvas-listen-brief textarea::placeholder{color:#a18eaf;}
.canvas-listen-story{padding:11px 12px;border-radius:14px;background:#e1c4f209;color:#cfbddb;}
.canvas-listen-story>div{display:flex;align-items:center;gap:8px;justify-content:space-between;}
.canvas-listen-story>div strong{font-size:12px;}.canvas-listen-story>div>span{font-size:8px;color:#a591b7;}
.canvas-listen-story>p{font-size:10px;margin:6px 0 10px;}
.canvas-listen-story ol{list-style:none;padding:0;margin:0;display:grid;gap:9px;counter-reset:story;}
.canvas-listen-story li{position:relative;padding-left:22px;font-size:9px;line-height:1.5;}
.canvas-listen-story li::before{counter-increment:story;content:counter(story);position:absolute;left:0;top:0;display:grid;place-items:center;width:16px;height:16px;border:1px solid #c6a8dd40;border-radius:50%;font-size:8px;color:#dbc1ea;}
.canvas-listen-story li>b,.canvas-listen-story li>span{display:block;}.canvas-listen-story li>b{font-size:10px;color:#e2d0ef;font-weight:550;}
.canvas-listen-story li>small{display:block;max-height:29px;overflow:hidden;font-size:8px;color:#9e8dab;margin-top:3px;}
.canvas-listen-moods{display:flex;gap:4px;margin-top:8px;}
.canvas-listen-moods button{flex:1;min-height:28px;padding:3px 5px;font-size:10px;border:1px solid transparent;border-radius:14px;color:#bbaaC7;white-space:nowrap;}
.canvas-listen-moods button[aria-pressed=true]{background:#cfaee51c;border-color:#d8b9ee35;color:#eee1f5;}
.canvas-listen-wave{height:34px;display:flex;align-items:center;gap:3px;margin-top:10px;}
.canvas-listen-wave i{display:block;flex:1;min-width:1px;height:var(--bar);border-radius:3px;background:#6d587e;transition:background 100ms;}
.canvas-listen-wave i.is-played{background:#dfb9f4;}
.canvas-listen-seek{display:block;width:100%;height:14px;margin:0 0 8px;accent-color:#d5b0ed;}
.canvas-listen-controls{display:flex;align-items:center;gap:10px;}
.canvas-listen-play{min-height:36px;padding:0 16px;border-radius:20px;background:#d5b2ec;color:#2c1e37;font-size:11px;font-weight:600;}
.canvas-listen-retry{min-height:32px;padding:0;font-size:10px;color:#d3bbdf;}
.canvas-listen-time{margin-left:auto;font-size:9px;font-variant-numeric:tabular-nums;color:#baabc6;white-space:nowrap;}
.canvas-listen-originals{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:10px;color:#bdaaC7;}
.canvas-listen-originals input{margin:0;accent-color:#c5a0df;}
.canvas-listen-status{font-size:9px;line-height:1.55;color:#baabc6;margin:9px 0 0;}
.canvas-listen-about{font-size:9px;line-height:1.6;color:#9f8fb0;margin-top:6px;}
.canvas-listen-about summary{cursor:pointer;display:list-item;}
.canvas-listen-about p{margin:6px 0 0;}
.floating-card.is-sounding{outline:2px solid #d4b0ef;outline-offset:5px;filter:drop-shadow(0 0 9px #c99ce859);}
@media(prefers-reduced-motion:reduce){.canvas-listen-order>span,.canvas-listen-wave i{transition:none;}}
@media(prefers-reduced-motion:reduce){.canvas-scan-beam{animation:none;top:0;height:100%;opacity:.5;border-bottom:0;background:#ceb0e508;}}