/* ============================================================
   Desktop refinement layer
   只覆蓋桌機語意材質與狀態模型控制，不改 mobile，也不改右欄 DOM 架構。
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  [data-theme]{
    --dk-canvas:
      radial-gradient(ellipse at 72% 12%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%),
      radial-gradient(ellipse at 14% 86%,color-mix(in srgb,var(--surface2) 32%,transparent),transparent 48%),
      linear-gradient(128deg,var(--bg),color-mix(in srgb,var(--surface) 72%,var(--bg)) 55%,var(--bg));
    --dk-rail-material:color-mix(in srgb,var(--bg) 72%,transparent);
    --dk-side-material:color-mix(in srgb,var(--bg) 68%,transparent);
    --dk-stage-material:color-mix(in srgb,var(--bg) 24%,transparent);
    --dk-control-material:color-mix(in srgb,var(--surface2) 36%,transparent);
    --dk-soft-line:color-mix(in srgb,var(--line) 35%,transparent);
    --dk-strong-line:color-mix(in srgb,var(--line) 68%,transparent);
    --dk-luminous:color-mix(in srgb,var(--accent) 34%,transparent);
    --dk-field-shadow:0 28px 80px rgba(0,0,0,.12);
    --dk-title-ink:color-mix(in srgb,var(--accent) 16%,var(--text));
    --dk-shimmer-line:color-mix(in srgb,var(--accent) 65%,#fff);
  }
  [data-theme="sumi"]{
    --dk-canvas:
      radial-gradient(ellipse at 78% 12%,rgba(197,145,72,.15),transparent 36%),
      radial-gradient(ellipse at 16% 90%,rgba(88,57,32,.22),transparent 44%),
      linear-gradient(132deg,#100e10 0%,#171314 48%,#0c0b0d 100%);
    --dk-rail-material:rgba(15,12,13,.76);
    --dk-side-material:rgba(18,14,15,.71);
    --dk-stage-material:rgba(13,11,12,.22);
    --dk-control-material:rgba(214,174,110,.055);
    --dk-soft-line:rgba(214,174,110,.12);
    --dk-strong-line:rgba(214,174,110,.28);
    --dk-luminous:rgba(232,200,126,.28);
    --dk-field-shadow:0 32px 90px rgba(4,2,2,.34);
    --dk-shimmer-line:rgba(255,229,168,.92);
  }
  [data-theme="shiro"]{
    --dk-canvas:
      radial-gradient(ellipse at 82% 8%,rgba(255,255,255,.82),transparent 38%),
      radial-gradient(ellipse at 12% 88%,rgba(189,178,157,.18),transparent 45%),
      linear-gradient(128deg,#f1eee7 0%,#e8e4da 55%,#f5f2eb 100%);
    --dk-rail-material:rgba(246,243,236,.8);
    --dk-side-material:rgba(242,239,232,.72);
    --dk-stage-material:rgba(255,255,255,.22);
    --dk-control-material:rgba(72,67,59,.045);
    --dk-soft-line:rgba(64,59,52,.1);
    --dk-strong-line:rgba(64,59,52,.22);
    --dk-luminous:rgba(255,255,255,.72);
    --dk-field-shadow:0 30px 80px rgba(76,65,49,.11);
    --dk-shimmer-line:rgba(255,252,244,.95);
  }
  [data-theme="neon"]{
    --dk-canvas:
      radial-gradient(ellipse at 84% 14%,rgba(255,63,194,.15),transparent 34%),
      radial-gradient(ellipse at 14% 78%,rgba(45,218,255,.12),transparent 38%),
      linear-gradient(132deg,#06050d 0%,#0c0918 52%,#06050d 100%);
    --dk-rail-material:rgba(7,6,15,.79);
    --dk-side-material:rgba(9,7,19,.73);
    --dk-stage-material:rgba(5,4,12,.2);
    --dk-control-material:rgba(255,92,203,.05);
    --dk-soft-line:rgba(79,227,255,.13);
    --dk-strong-line:rgba(79,227,255,.3);
    --dk-luminous:rgba(255,92,203,.34);
    --dk-field-shadow:0 34px 96px rgba(1,0,8,.46);
    --dk-shimmer-line:rgba(200,240,255,.92);
  }
  [data-theme="hoshi"]{
    --dk-canvas:
      radial-gradient(ellipse at 74% 8%,rgba(174,191,242,.16),transparent 36%),
      radial-gradient(ellipse at 15% 85%,rgba(73,86,136,.18),transparent 42%),
      linear-gradient(135deg,#0d1018 0%,#141825 52%,#0c0e15 100%);
    --dk-rail-material:rgba(13,16,24,.78);
    --dk-side-material:rgba(16,19,29,.72);
    --dk-stage-material:rgba(10,12,19,.2);
    --dk-control-material:rgba(174,191,242,.05);
    --dk-soft-line:rgba(174,191,242,.12);
    --dk-strong-line:rgba(174,191,242,.26);
    --dk-luminous:rgba(174,191,242,.28);
    --dk-field-shadow:0 34px 92px rgba(3,5,12,.4);
    --dk-shimmer-line:rgba(225,232,255,.92);
  }
  /* 莓:淡抹茶底 + 奶油白/粉紅層次,亮色桌面,不要變暗、不要玻璃卡片感 */
  [data-theme="ichigo"]{
    --dk-canvas:
      radial-gradient(ellipse at 80% 8%,rgba(255,214,224,.55),transparent 40%),
      radial-gradient(ellipse at 14% 90%,rgba(156,230,196,.18),transparent 46%),
      linear-gradient(128deg,#FAFDF2 0%,#F7FAEF 55%,#FCEBF0 100%);
    --dk-rail-material:rgba(255,248,250,.82);
    --dk-side-material:rgba(252,235,240,.7);
    --dk-stage-material:rgba(255,255,255,.28);
    --dk-control-material:rgba(255,71,121,.06);
    --dk-soft-line:rgba(255,71,121,.12);
    --dk-strong-line:rgba(255,71,121,.24);
    --dk-luminous:rgba(255,120,160,.4);
    --dk-field-shadow:0 28px 76px rgba(122,36,60,.08);
    --dk-shimmer-line:rgba(255,255,255,.95);
  }

  #dk-workspace{background:var(--dk-canvas)}
  #dk-workspace::after{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;
    background:
      linear-gradient(90deg,transparent 0 49.92%,var(--dk-soft-line) 50%,transparent 50.08%),
      linear-gradient(180deg,var(--dk-luminous),transparent 18%);
    mix-blend-mode:soft-light;
  }
  .dk-ws-body{z-index:1}
  .dk-ws-nav{
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 58%,transparent),transparent);
  }
  .dk-ws-searchbtn{
    border-color:var(--dk-soft-line);
    background:linear-gradient(90deg,var(--dk-control-material),transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }

  /* 三欄看起來是同一張連續桌面，只以光線與細線分區。 */
  .dk-ws-railcol{
    background:linear-gradient(180deg,var(--dk-rail-material),color-mix(in srgb,var(--dk-rail-material) 78%,transparent));
    border-right-color:var(--dk-soft-line);
    backdrop-filter:blur(24px) saturate(.9);-webkit-backdrop-filter:blur(24px) saturate(.9);
    box-shadow:inset -1px 0 var(--dk-luminous);
  }
  .dk-ws-maincol,.dk-ws-thread{
    background:linear-gradient(180deg,var(--dk-stage-material),transparent 40%,var(--dk-stage-material));
  }
  .dk-ws-centertabs{background:linear-gradient(180deg,var(--dk-stage-material),transparent)}
  .dk-ws-rightcol{
    background:linear-gradient(180deg,var(--dk-side-material),color-mix(in srgb,var(--dk-side-material) 76%,transparent));
    border-left-color:var(--dk-soft-line);
    backdrop-filter:blur(26px) saturate(.88);-webkit-backdrop-filter:blur(26px) saturate(.88);
    box-shadow:inset 1px 0 var(--dk-luminous);
  }
  .dk-ws-righttabs{border-bottom-color:var(--dk-soft-line)}
  .dk-ws-rightpane{background:transparent}

  .dk-char-row{background:transparent;border-radius:0}
  .dk-char-row:hover{
    background:linear-gradient(90deg,var(--dk-control-material),transparent 86%);
  }
  .dk-char-avatar{
    border-radius:13px;background:linear-gradient(145deg,var(--dk-control-material),transparent);
  }
  .dk-char-row.on::before{
    content:'';position:absolute;left:0;top:12px;bottom:12px;width:1px;
    background:var(--dk-tab-active);box-shadow:0 0 14px var(--dk-luminous);
  }

  /* 右欄內容改用編輯式分隔，不堆疊半透明卡片。 */
  .dk-nest-status,.dk-nest-now,.dk-nest-actions,
  .dk-cal-strip,.dk-cal-agenda-wrap,.dk-cal-footer,
  .dk-feed-filters,.dk-feed-list{background:transparent}
  .dk-nest-status,.dk-nest-now,.dk-cal-footer{
    border-color:var(--dk-soft-line);
  }
  .dk-nest-avatar{
    border-color:var(--dk-strong-line);
    box-shadow:0 0 0 5px color-mix(in srgb,var(--dk-luminous) 28%,transparent);
  }
  .dk-nest-iconbtn,.dk-cal-navbtn{
    border-color:var(--dk-soft-line);background:transparent;
  }
  .dk-nest-actions .pill,.dk-cal-footer .pill{
    border-color:var(--dk-soft-line);
    background:linear-gradient(100deg,var(--dk-control-material),transparent);
    box-shadow:none;
  }
  .dk-nest-actions .pill.hot{
    color:var(--text);border-color:var(--dk-strong-line);
  }
  .dk-cal-day,.dk-cal-month-cell{border-radius:7px}
  .dk-cal-day.sel,.dk-cal-month-cell.sel{
    background:linear-gradient(180deg,var(--dk-control-material),transparent);
    border-color:var(--dk-strong-line);box-shadow:inset 0 -1px var(--dk-luminous);
  }
  .dk-feed-filter{border-color:transparent;border-bottom-color:var(--dk-soft-line);border-radius:0;padding-inline:7px}
  .dk-feed-filter.on{border-color:transparent;border-bottom-color:var(--dk-tab-active)}
  .comm-card.focus{box-shadow:0 0 0 1px var(--dk-glow-line),0 0 16px color-mix(in srgb,var(--accent) 16%,transparent)}
  .dk-agenda-row{border-bottom-color:var(--dk-soft-line)}
  .dk-stage-overlay{
    background:color-mix(in srgb,var(--dk-side-material) 92%,transparent);
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  }

  /* 對話仍保留氣泡，但移除「一張張玻璃卡」的厚框與陰影。 */
  .dk-ws-thread #msgs .bubble,.dk-ws-thread #msgs .lbubble{
    border-color:transparent;box-shadow:none;
  }
  .dk-ws-thread #msgs .msg.ai .bubble,
  .dk-ws-thread #msgs .lwrap:not(.lwrap-me) .lbubble{
    background:linear-gradient(115deg,color-mix(in srgb,var(--surface) 48%,transparent),transparent);
    border-left:1px solid var(--dk-soft-line);
  }
  .dk-ws-thread #msgs .msg.me .bubble,
  .dk-ws-thread #msgs .lwrap-me .lbubble{
    background:linear-gradient(115deg,var(--dk-message-user),color-mix(in srgb,var(--dk-message-user) 42%,transparent));
    border-right:1px solid var(--dk-strong-line);
  }

  /* 狀態候選、設定與歷史。 */
  .dk-nest-iconbtn.is-loading{animation:dk-status-pulse .9s ease-in-out infinite}
  @keyframes dk-status-pulse{50%{opacity:.35}}
  .dk-status-candidate{
    margin:2px 0 17px;padding:13px 0 14px;
    border-top:1px solid var(--dk-soft-line);border-bottom:1px solid var(--dk-soft-line);
  }
  .dk-status-candidate small{
    display:block;font-size:calc(10px * var(--dk-fs-mult,1));font-weight:700;letter-spacing:.16em;color:var(--dk-tab-active);
  }
  .dk-status-candidate p{
    margin:7px 0 11px;font-family:var(--serif);font-size:calc(13px * var(--dk-fs-mult,1));line-height:1.65;color:var(--text);
  }
  .dk-status-candidate>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .dk-status-candidate .pill{min-height:28px;padding:5px 11px;font-size:calc(10px * var(--dk-fs-mult,1))}
  .dk-status-candidate.is-error small{color:var(--faint)}
  .dk-status-candidate.is-error p{color:var(--muted)}
  .dk-status-textbtn{
    padding:4px 0;font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.06em;color:var(--dk-tab-active);
    border-bottom:1px solid transparent;
  }
  .dk-status-textbtn:hover{border-bottom-color:currentColor}
  .dk-status-model{
    margin-top:21px;border-top:1px solid var(--dk-soft-line);
  }
  .dk-status-model>summary{
    list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;
    padding:15px 0;cursor:pointer;
  }
  .dk-status-model>summary::-webkit-details-marker{display:none}
  .dk-status-model>summary span{display:flex;flex-direction:column;gap:3px}
  .dk-status-model>summary small{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.18em;color:var(--dk-tab-muted)}
  .dk-status-model>summary b{font-family:var(--serif);font-size:var(--dk-type-section);font-weight:550;color:var(--dk-title-ink)}
  .dk-status-model>summary em{font-style:normal;font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-status-model>summary i{font-style:normal;color:var(--faint);transition:transform .2s ease}
  .dk-status-model[open]>summary i{transform:rotate(180deg)}
  .dk-status-model-body{padding:0 0 18px}
  .dk-status-budget{display:flex;align-items:center;gap:10px;margin-bottom:13px}
  .dk-status-budget>span{
    position:relative;flex:1;height:2px;background:var(--dk-soft-line);overflow:hidden;
  }
  .dk-status-budget>span::after{
    content:'';position:absolute;inset:0 auto 0 0;width:var(--status-budget);
    background:var(--dk-tab-active);box-shadow:0 0 10px var(--dk-luminous);
  }
  .dk-status-budget small{font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-status-notice{
    margin:0 0 12px;padding:8px 0;border-bottom:1px solid var(--dk-soft-line);
    font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.5;color:var(--muted);
  }
  .dk-status-switch{
    display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;
    border-bottom:1px solid var(--dk-soft-line);
  }
  .dk-status-switch>span{display:flex;min-width:0;flex-direction:column;gap:2px}
  .dk-status-switch b{font-size:calc(10.5px * var(--dk-fs-mult,1));font-weight:550}
  .dk-status-switch small{font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.45;color:var(--faint)}
  .dk-status-switch input{width:30px;height:16px;accent-color:var(--dk-tab-active);flex-shrink:0}
  .dk-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}
  .dk-status-grid label{display:flex;min-width:0;flex-direction:column;gap:5px}
  .dk-status-grid label>span{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.06em;color:var(--faint)}
  .dk-status-grid select{
    width:100%;min-width:0;padding:7px 8px;border:0;border-bottom:1px solid var(--dk-soft-line);
    border-radius:0;background:var(--dk-control-material);color:var(--text);font-size:calc(10px * var(--dk-fs-mult,1));
  }
  .dk-status-history{margin-top:17px}
  .dk-status-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
  .dk-status-history-head b{font-family:var(--serif);font-size:calc(11px * var(--dk-fs-mult,1));font-weight:550}
  .dk-status-history-head small{font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-status-history-row{
    display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--dk-soft-line);
  }
  .dk-status-history-row>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .dk-status-history-row b{font-size:calc(10px * var(--dk-fs-mult,1));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dk-status-history-row small{font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-status-history-empty{margin:0;padding:10px 0;font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.6;color:var(--faint)}

  /* Player / settings 同一套材質，不再各自像浮起的玻璃卡。 */
  .dk-spotify{background:linear-gradient(90deg,var(--dk-control-material),transparent);border-top-color:var(--dk-soft-line)}
  .dk-spotify-cover,.dk-spotify-panel :is(input,select):not(.switch){
    background:var(--dk-control-material)!important;border-color:var(--dk-soft-line)!important;
  }
  /* 上面那條「輸入框材質」原本連 input.switch(啟用輪播等滑動開關)都一起
     蓋掉,開關打開時該有的主題重點色(.switch:checked 的 --accent)整個被
     壓成跟關閉時一樣的暗淡材質色,knob 雖然滑到右邊了但看起來像沒開——
     這裡排除 .switch,並把左關右開、開啟即亮的樣式明確拉回來。 */
  .dk-spotify-panel input.switch{
    background:var(--surface2)!important;border-color:var(--line)!important;
  }
  .dk-spotify-panel input.switch:checked{
    background:var(--accent)!important;border-color:var(--accent)!important;
  }
  .dk-spotify-panel,.dk-spotify-panel details{border-color:var(--dk-soft-line)}
  .dk-settings-portal,.dk-set-stage,.dk-set-aside{box-shadow:none}
  .dk-set-scene-actions button,.dk-set-workback{
    background:linear-gradient(100deg,var(--dk-control-material),transparent);
    border-color:var(--dk-soft-line);
  }
}


/* ============================================================
   Desktop right workspace v3
   右欄成為可調寬、可長頁閱讀的獨立工作區；Spotify 完整控制不再置於左欄。
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  #dk-workspace{--dk-right-width:clamp(420px,30vw,540px)}
  .dk-ws-maincol{min-width:520px}
  .dk-ws-rightcol{
    flex:0 0 var(--dk-right-width)!important;
    width:var(--dk-right-width)!important;
    min-width:440px!important;max-width:680px!important;
  }
  .dk-ws-right-resizer{
    position:relative;z-index:8;flex:0 0 9px;width:9px;margin-inline:-4px;
    cursor:col-resize;touch-action:none;outline:0;
  }
  .dk-ws-right-resizer::after{
    content:'';position:absolute;left:4px;top:18%;bottom:18%;width:1px;
    background:var(--dk-soft-line);opacity:.15;transition:opacity .18s ease,box-shadow .18s ease;
  }
  .dk-ws-right-resizer:hover::after,.dk-ws-right-resizer:focus-visible::after,.dk-ws-right-resizer.is-dragging::after{
    opacity:1;background:var(--dk-tab-active);box-shadow:0 0 14px var(--dk-luminous);
  }
  body.dk-resizing-right{cursor:col-resize!important;user-select:none!important}

  .dk-ws-righttabs{
    flex:0 0 auto;display:flex!important;
    gap:0;padding:17px 24px 0;overflow-x:auto;scrollbar-width:none;
    background:linear-gradient(180deg,var(--dk-side-material) 68%,transparent);
  }
  .dk-ws-righttabs::-webkit-scrollbar{display:none}
  .dk-ws-righttabs button{
    min-width:64px;flex:1 1 0;padding:0 8px 13px!important;font-size:calc(10px * var(--dk-fs-mult,1))!important;letter-spacing:.1em;
    text-align:center;white-space:nowrap;
  }
  .dk-ws-righttabs button[hidden]{display:none!important}
  .dk-ws-rightpane{
    min-height:0;overflow-y:auto!important;overflow-x:hidden;
    padding:28px 30px 72px!important;scrollbar-gutter:stable;
    scrollbar-width:thin;scrollbar-color:var(--dk-soft-line) transparent;
  }
  .dk-ws-rightpane[hidden]{display:none!important}
  .dk-ws-rightpane :is(.dk-nest-status,.dk-nest-now,.dk-nest-actions,.dk-cal-strip,.dk-cal-agenda-wrap,.dk-cal-footer,.dk-feed-filters,.dk-feed-list){
    width:100%;max-width:none;
  }
  .dk-nest-status{padding:20px 0 24px!important}
  .dk-nest-now{padding:24px 0!important}
  .dk-nest-actions{gap:10px!important;padding:22px 0 30px!important}
  .dk-cal-strip{padding:9px 0 24px!important}
  .dk-cal-agenda-wrap{padding-top:25px!important}
  .dk-agenda-row{padding:15px 0!important}
  .dk-cal-footer{padding:24px 0 8px!important}
  .dk-feed-filters{position:sticky;top:0;z-index:3;padding:10px 0 14px!important;background:var(--dk-side-material)!important;backdrop-filter:blur(20px)}

  /* 左欄只留下始終可用的迷你控制與「音樂工作區」入口。 */
  .dk-spotify-mini{
    flex:0 0 auto;padding:14px 16px 16px;border-top:1px solid var(--dk-soft-line);
    background:linear-gradient(100deg,var(--dk-control-material),transparent);
  }
  .dk-spotify-mini-open{
    width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;
    color:var(--faint);font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.15em;text-align:left;
  }
  .dk-spotify-mini-open:hover{color:var(--dk-tab-active)}
  .dk-spotify-mini-row{display:flex;align-items:center;gap:10px;min-width:0}
  .dk-spotify-mini-cover{
    width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;overflow:hidden;
    border-radius:11px;background:var(--dk-control-material);color:var(--faint);
  }
  .dk-spotify-mini-cover img{width:100%;height:100%;object-fit:cover}
  .dk-spotify-mini-meta{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}
  .dk-spotify-mini-track,.dk-spotify-mini-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dk-spotify-mini-track{font-family:var(--serif);font-size:calc(11px * var(--dk-fs-mult,1));font-weight:550;color:var(--text)}
  .dk-spotify-mini-artist{font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-spotify-mini-controls{display:grid;grid-template-columns:26px 30px 26px 1fr;align-items:center;gap:6px;margin-top:12px}
  .dk-spotify-mini-controls button{
    min-height:28px;border:1px solid var(--dk-soft-line);border-radius:999px;color:var(--muted);font-size:calc(10px * var(--dk-fs-mult,1));
  }
  .dk-spotify-mini-controls button:disabled{opacity:.35}
  .dk-spotify-mini-controls .dk-spotify-mini-workspace{padding:0 10px;color:var(--dk-tab-active)}
  .dk-rail-collapsed .dk-spotify-mini{padding:12px 8px}
  .dk-rail-collapsed .dk-spotify-mini-open,.dk-rail-collapsed .dk-spotify-mini-row{display:none}
  .dk-rail-collapsed .dk-spotify-mini-controls{grid-template-columns:1fr;gap:7px}
  .dk-rail-collapsed .dk-spotify-mini-controls [data-spotify-mini-action="prev"],
  .dk-rail-collapsed .dk-spotify-mini-controls [data-spotify-mini-action="next"]{display:none}
  .dk-rail-collapsed .dk-spotify-mini-workspace{font-size:0}
  .dk-rail-collapsed .dk-spotify-mini-workspace::after{content:'♪';font-size:12px}

  /* 音樂分頁是右欄內的完整長頁，不再形成會被中欄裁切的 fixed 浮層。
     .dk-spotify-workspace 這個 section 同時掛著 .dk-spotify(見 desktop.css
     「Spotify Connect：預設保持迷你」那顆舊版迷你卡規則,max-height:52vh +
     overflow-y:auto,只是給迷你卡用的),兩顆 class 特異度相同,單靠來源
     順序沒辦法穩定蓋掉——這裡明講 max-height:none 解開那層 52vh 限制,
     不然角色策展室內容一長,整個 section 會被壓扁、擠出下面這層自己
     的 overflow-y:auto,長歌單/長理由文字就會卡在裡面捲不到底。 */
  .dk-ws-rightpane[data-rightpane="music"]{padding:0!important}
  .dk-spotify-workspace{
    width:100%;min-height:100%;max-height:none!important;box-sizing:border-box;padding:0 30px 80px!important;
    gap:0!important;border:0!important;background:transparent!important;overflow:visible!important;
  }
  .dk-spotify-workspace .dk-spotify-pagehead{
    position:sticky;top:0;z-index:6;display:flex;align-items:flex-start;justify-content:space-between;gap:22px;
    margin:0 -30px;padding:25px 30px 20px;border-bottom:1px solid var(--dk-soft-line);
    background:color-mix(in srgb,var(--dk-side-material) 92%,transparent);
    backdrop-filter:blur(24px) saturate(.9);-webkit-backdrop-filter:blur(24px) saturate(.9);
  }
  .dk-spotify-pagehead>div{min-width:0}
  .dk-spotify-pagehead small{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.18em;color:var(--dk-tab-muted)}
  .dk-spotify-pagehead h2{margin:5px 0 6px;font-family:var(--serif);font-size:calc(22px * var(--dk-fs-mult,1));font-weight:550;letter-spacing:.04em}
  .dk-spotify-pagehead p{margin:0;max-width:350px;font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.55;color:var(--faint)}
  .dk-spotify-pagehead .dk-spotify-connect{flex:0 0 auto;min-height:34px;margin-top:2px;padding:7px 14px}
  .dk-spotify-pagehead-actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:2px}
  .dk-spotify-pagehead-actions .dk-spotify-connect{margin-top:0}
  .dk-spotify-device-switch{position:relative}
  .dk-spotify-device-switch-toggle{min-height:34px;padding:7px 14px}
  .dk-spotify-device-menu{
    position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:240px;max-height:280px;overflow-y:auto;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;
    box-shadow:0 14px 34px rgba(0,0,0,.4);
  }
  .dk-spotify-device-item{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
    padding:8px 10px;border-radius:9px;color:var(--text);text-align:left;transition:background .15s ease;
  }
  .dk-spotify-device-item:is(:hover,:focus-visible) .dk-spotify-device-name{
    color:var(--dk-tab-active);animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }
  .dk-spotify-device-item[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent)}
  .dk-spotify-device-item[disabled]{opacity:.4;pointer-events:none}
  .dk-spotify-device-name{font-size:calc(12px * var(--dk-fs-mult,1))}
  .dk-spotify-device-type{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.08em;color:var(--faint);text-transform:uppercase}
  .dk-spotify-device-empty{margin:0;padding:10px 6px;font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.6;color:var(--faint)}
  .dk-spotify-workspace .dk-spotify-now{padding:28px 0 27px;border-bottom:1px solid var(--dk-soft-line)}
  .dk-spotify-workspace .dk-spotify-kicker{display:flex;align-items:center;gap:9px;margin-bottom:15px;font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.17em;color:var(--faint)}
  .dk-spotify-workspace .dk-spotify-kicker i{width:5px;height:5px;border-radius:50%;background:var(--dk-tab-active);box-shadow:0 0 12px var(--dk-luminous)}
  .dk-spotify-workspace .dk-spotify-row{gap:15px}
  .dk-spotify-workspace .dk-spotify-cover{
    width:66px;height:66px;flex:0 0 66px;border-radius:16px;overflow:hidden;
    border:1px solid var(--dk-soft-line)!important;
  }
  .dk-spotify-workspace .dk-spotify-cover img{width:100%;height:100%;object-fit:cover}
  .dk-spotify-workspace .dk-spotify-track{font-family:var(--serif);font-size:calc(17px * var(--dk-fs-mult,1));color:var(--text)}
  .dk-spotify-workspace .dk-spotify-artist{margin-top:3px;font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-spotify-workspace .dk-spotify-rec{width:30px;height:30px;border-style:solid;overflow:hidden}
  .dk-spotify-workspace .dk-spotify-rec :is(img,span){width:100%;height:100%;display:flex;align-items:center;justify-content:center;object-fit:cover}
  .dk-spotify-workspace .dk-spotify-progressrow{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;gap:9px;margin-top:17px;font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-spotify-workspace .dk-spotify-progress{width:100%;accent-color:var(--dk-tab-active)}
  .dk-spotify-workspace .dk-spotify-playbackbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:15px}
  .dk-spotify-workspace .dk-spotify-ctrls{gap:8px}
  .dk-spotify-workspace .dk-spotify-btn{width:34px;height:34px;border:1px solid var(--dk-soft-line);opacity:1;cursor:pointer}
  .dk-spotify-workspace .dk-spotify-play{width:40px;height:40px;color:var(--text)}
  .dk-spotify-workspace .dk-spotify-device{display:flex;min-width:180px;flex-direction:column;gap:5px}
  .dk-spotify-workspace .dk-spotify-device>span{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.1em;color:var(--faint)}
  .dk-spotify-workspace .dk-spotify-devices{width:100%;padding:8px 10px;border:0;border-bottom:1px solid var(--dk-soft-line);border-radius:0;color:var(--text)}
  .dk-spotify-workspace .dk-spotify-sdk-state{display:block;margin-top:5px}
  .dk-spotify-workspace .dk-spotify-panel{display:block!important;padding:0!important;border:0!important}
  .dk-spotify-workspace .dk-spotify-character{padding:25px 0;border-bottom:1px solid var(--dk-soft-line)}
  .dk-spotify-character>small{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.16em;color:var(--faint)}
  .dk-spotify-character .dk-spotify-recommendation{margin:8px 0 12px;font-family:var(--serif);font-size:calc(13px * var(--dk-fs-mult,1));line-height:1.65;color:var(--text)}
  .dk-spotify-workspace .dk-spotify-config{margin:0!important;padding:20px 0!important;border:0!important;border-bottom:1px solid var(--dk-soft-line)!important}
  .dk-spotify-workspace .dk-spotify-config>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
  .dk-spotify-workspace .dk-spotify-config>summary span{font-family:var(--serif);font-size:calc(13px * var(--dk-fs-mult,1))}
  .dk-spotify-workspace .dk-spotify-config>summary:hover span{
    color:var(--dk-tab-active);animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }
  .dk-spotify-workspace .dk-spotify-config>summary small{font-size:calc(10px * var(--dk-fs-mult,1));color:var(--faint)}
  .dk-spotify-workspace .dk-spotify-config>label{display:flex;flex-direction:column;gap:6px;margin-top:15px}
  .dk-spotify-workspace .dk-spotify-config>label>span{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.1em;color:var(--faint)}
  .dk-spotify-workspace .dk-spotify-config :is(input,select){width:100%;box-sizing:border-box;padding:10px!important}
  /* 例外:開關列(char-status-auto-row,如「啟用輪播」)不吃上面兩條收合區塊
     通用規則——上面的 >label 特異度較高,會把開關列壓成直排;:is(input,select)
     的 width:100% 也會把 46px 的滑動開關拉成滿版長條、圓點位移看起來沒作用,
     跟 style.css 裡 .pfx-inner 那條 input.switch 例外是同一類問題,同樣用更高
     特異度的選擇器蓋回來:標題靠左、開關固定尺寸靠右。 */
  .dk-spotify-workspace .dk-spotify-config>label.char-status-auto-row{flex-direction:row;align-items:center;gap:18px;margin-top:12px}
  .dk-spotify-workspace .dk-spotify-config input.switch{width:46px;padding:0!important}
  .dk-spotify-workspace .dk-spotify-config>p{font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.6;color:var(--faint)}
  .dk-spotify-workspace .dk-curator{margin-top:26px!important;padding-top:26px!important}
  .dk-spotify-workspace .dk-curator>header b{font-size:calc(20px * var(--dk-fs-mult,1))}
  .dk-spotify-workspace .dk-curator-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dk-spotify-workspace .dk-curator-controls label:last-child{grid-column:1/-1}
  .dk-spotify-workspace .dk-curator-auto{margin:18px 0!important;padding:16px 0!important}
  .dk-spotify-workspace .dk-curator-actions{gap:9px}
  .dk-spotify-workspace .dk-curator-status{margin:10px 0;min-height:18px}
  .dk-spotify-workspace .dk-curator-preview{margin-top:22px}
  .dk-spotify-workspace .dk-curator-track{grid-template-columns:26px 48px minmax(0,1fr) auto;gap:11px;padding:14px 0}
  .dk-spotify-workspace .dk-curator-art{width:48px;height:48px}
  .dk-spotify-workspace .dk-curator-song b{font-size:calc(12px * var(--dk-fs-mult,1))}
  .dk-spotify-workspace .dk-curator-song p{font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.65}
  .dk-spotify-workspace .dk-curator-embed{margin-top:22px}
  .dk-spotify-workspace .dk-curator-embed iframe{width:100%;min-height:352px}
  .dk-spotify-workspace .dk-curator-history{margin-top:24px;padding-top:18px}

  /* 社群分頁:通知面板(#community-notif)仍搬進這一欄(見 desktop.js 的
     moveOut)、維持 position:absolute;inset:0 的滑入覆蓋層(style.css)——
     這裡把 rightpane 自己的內距歸零讓它貼齊欄位邊緣,原本的內距改交給
     .dk-feed-listwrap(貼文列表本體)自己扛,覆蓋層關閉、列表重新露出時
     視覺上不會有落差。
     貼文詳情(#community-post)改成行內展開,不再是覆蓋層:desktop-community.js
     的 placeInlinePost() 把它搬進 .dk-feed-list、緊接在被點開的那則貼文卡
     後面,這裡把 style.css 給它的 position:absolute;inset:0 滑入樣式整組
     蓋掉,改回一般文件流的區塊——面板撐開多高,底下的貼文卡就被推下去
     多少,不會疊在任何貼文上方;背景也從整頁底色(--bg)改用跟貼文卡一致的
     --surface,展開時讀起來像同一張卡片往下長出來,不是另一層覆蓋畫面。
     選擇器刻意不只鎖定 .dk-feed-list 底下(而是整個 rightpane):找不到對應
     貼文卡時(篩選條件切換掉了、分頁還沒載入到)placeInlinePost() 會讓面板
     暫留在 rightpane 最下面而不是塞回 .dk-feed-list——這裡兩種位置要套用
     同一組「行內卡片」樣式,不然那個 fallback 情境會打回滑入覆蓋層蓋住整欄。 */
  .dk-ws-rightpane[data-rightpane="community"]{padding:0!important}
  .dk-feed-listwrap{padding:28px 30px 72px;box-sizing:border-box}
  .dk-ws-rightpane[data-rightpane="community"] #community-post{
    position:static;inset:auto;transform:none;transition:none;
    display:none;flex-direction:column;flex:none;
    width:100%;height:auto;max-height:none;
    margin:0 0 12px;overflow:visible;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  }
  .dk-ws-rightpane[data-rightpane="community"] #community-post.open{display:flex}
  .dk-ws-rightpane[data-rightpane="community"] #community-post .chat-head{
    background:transparent;border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  .dk-ws-rightpane[data-rightpane="community"] #community-post .chat-msgs-wrap{flex:none;overflow:visible}
  .dk-ws-rightpane[data-rightpane="community"] #community-post #cpost-body{flex:none;overflow:visible;min-height:0}
  .dk-ws-rightpane[data-rightpane="community"] #community-post .reply-preview{background:transparent}
  .dk-ws-rightpane[data-rightpane="community"] #community-post .chat-input{
    background:transparent;border-radius:0 0 var(--r-lg) var(--r-lg);
  }
}

@media (min-width:1024px) and (max-width:1199px) and (hover:hover) and (pointer:fine){
  .dk-ws-maincol{min-width:0}
  .dk-ws-right-resizer{display:none}
  .dk-ws-rightcol{
    width:min(520px,92vw)!important;min-width:0!important;max-width:92vw!important;
    flex-basis:min(520px,92vw)!important;
  }
}


/* ============================================================
   Luminous editorial surfaces
   以連續背景、柔光分隔與低頻互動光取代桌機版的實黑面板。
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  [data-theme]{
    --dk-glow-line:color-mix(in srgb,var(--accent) 54%,transparent);
    --dk-glow-line-soft:color-mix(in srgb,var(--accent) 22%,transparent);
    --dk-glow-fill:color-mix(in srgb,var(--accent) 5%,transparent);
    --dk-glow-halo:0 0 0 1px var(--dk-glow-line-soft),0 0 16px color-mix(in srgb,var(--accent) 16%,transparent);
    --dk-glow-halo-strong:0 0 0 1px var(--dk-glow-line),0 0 24px color-mix(in srgb,var(--accent) 27%,transparent);
  }
  @keyframes dk-luminous-breathe{
    0%,100%{border-color:var(--dk-glow-line-soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent),0 0 9px color-mix(in srgb,var(--accent) 8%,transparent)}
    50%{border-color:var(--dk-glow-line);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 0 21px color-mix(in srgb,var(--accent) 25%,transparent)}
  }
  @keyframes dk-luminous-line{
    0%,100%{opacity:.42;box-shadow:0 0 7px color-mix(in srgb,var(--accent) 12%,transparent)}
    50%{opacity:1;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent)}
  }

  /* 三欄共享同一張背景；側欄只留下方向性光影與一條發光分界。 */
  .dk-ws-nav{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 15%,transparent),transparent)!important}
  .dk-ws-railcol{
    background:
      linear-gradient(90deg,color-mix(in srgb,var(--surface) 19%,transparent),transparent 88%)!important;
    border-right-color:var(--dk-glow-line-soft)!important;
    box-shadow:inset -1px 0 color-mix(in srgb,var(--accent) 12%,transparent)!important;
    backdrop-filter:blur(14px) saturate(.9)!important;-webkit-backdrop-filter:blur(14px) saturate(.9)!important;
  }
  .dk-ws-rightcol{
    background:
      linear-gradient(270deg,color-mix(in srgb,var(--surface) 17%,transparent),transparent 92%)!important;
    border-left-color:var(--dk-glow-line-soft)!important;
    box-shadow:inset 1px 0 color-mix(in srgb,var(--accent) 14%,transparent)!important;
    backdrop-filter:blur(14px) saturate(.9)!important;-webkit-backdrop-filter:blur(14px) saturate(.9)!important;
  }
  .dk-ws-maincol,.dk-ws-thread{
    background:
      radial-gradient(ellipse at 78% 18%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 42%),
      linear-gradient(180deg,color-mix(in srgb,var(--bg) 5%,transparent),transparent 44%)!important;
  }
  .dk-ws-centertabs,.dk-ws-righttabs{
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 9%,transparent),transparent)!important;
    border-bottom-color:var(--dk-glow-line-soft)!important;
  }

  /* 分頁不做黑色膠囊；作用中的分頁用會呼吸的底部光線。 */
  .dk-ws-centertabs [role="tab"],.dk-ws-righttabs [role="tab"],.dk-bc-tabbar [role="tab"]{
    background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  }
  .dk-ws-centertabs [role="tab"]::after,
  .dk-ws-righttabs [role="tab"]::after,
  .dk-bc-tabbar [role="tab"]::after{
    height:1px!important;background:var(--dk-glow-line)!important;
  }
  .dk-ws-centertabs [role="tab"].on::after,
  .dk-ws-righttabs [role="tab"].on::after,
  .dk-bc-tabbar [role="tab"][aria-selected="true"]::after{
    animation:dk-luminous-line 3.8s ease-in-out infinite;
  }

  /* 一般操作只有極薄光框；hover/focus 才亮起，主要動作才持續低頻呼吸。 */
  :is(
    .dk-ws-navbtn,.dk-ws-rail-toggle,.dk-nest-iconbtn,.dk-cal-navbtn,
    .dk-bc-switcher,.dk-bc-context-back,.dk-bc-sideitems>button,
    .bcp-add-action,.bcp-room-settings,.bcp-form-acts button,
    .dk-chat-close,.dk-chat-tools-toggle,.dk-spotify-mini-controls button,
    .dk-spotify-btn,.dk-curator-actions button,.dk-curator-track-actions button,
    .pill,.iconbtn
  ){
    border-color:var(--dk-glow-line-soft)!important;
    background:linear-gradient(115deg,var(--dk-glow-fill),transparent 72%)!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 4%,transparent)!important;
    transition:border-color .22s ease,box-shadow .22s ease,color .22s ease,background .22s ease,transform .22s ease!important;
  }
  :is(
    .dk-ws-navbtn,.dk-ws-rail-toggle,.dk-nest-iconbtn,.dk-cal-navbtn,
    .dk-bc-switcher,.dk-bc-context-back,.dk-bc-sideitems>button,
    .bcp-add-action,.bcp-room-settings,.bcp-form-acts button,
    .dk-chat-close,.dk-chat-tools-toggle,.dk-spotify-mini-controls button,
    .dk-spotify-btn,.dk-curator-actions button,.dk-curator-track-actions button,
    .pill,.iconbtn
  ):is(:hover,:focus-visible){
    color:var(--text)!important;border-color:var(--dk-glow-line)!important;
    background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 76%)!important;
    box-shadow:var(--dk-glow-halo-strong)!important;transform:translateY(-1px);
    outline:none!important;
  }
  :is(.pill.hot,.sendbtn,.bcp-add-action,.dk-spotify-mini-workspace,.dk-spotify-connect){
    animation:dk-luminous-breathe 4.6s ease-in-out infinite;
  }

  /* 讀書會首頁：管理欄不再是一整塊黑玻璃，書籍與房間改成編輯式光線列表。 */
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-page{
    background:
      radial-gradient(circle at 72% 24%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),
      transparent!important;
  }
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-page>.chat-head{
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 14%,transparent),transparent)!important;
    backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
    border-bottom-color:var(--dk-glow-line-soft)!important;
    box-shadow:0 1px 20px color-mix(in srgb,var(--accent) 5%,transparent)!important;
  }
  /* 角色書房(js/ui/char-study.js):疊在讀書會頁面之上的第三層,半透明底/
     文字效果沿用同一套「光線玻璃」語彙,不獨立另發一套視覺。 */
  .dk-ws-thread[data-primary-scene="bookclub"] #char-study-page{
    background:
      radial-gradient(circle at 72% 24%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),
      transparent!important;
  }
  .dk-ws-thread[data-primary-scene="bookclub"] #char-study-page>.chat-head{
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 14%,transparent),transparent)!important;
    backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
    border-bottom-color:var(--dk-glow-line-soft)!important;
    box-shadow:0 1px 20px color-mix(in srgb,var(--accent) 5%,transparent)!important;
  }
  /* 分頁按鈕(收藏/社群/筆記本):跟書房其餘按鍵(.mini/.mini.accent 本來就是
     邊框+透明底)統一語彙,「選中」狀態不再填滿色塊,改用邊框+文字變色+
     光暈,比照 .mini.accent 的用色。 */
  .dk-ws-thread[data-primary-scene="bookclub"] #char-study-page .bc-tabs button{
    background:transparent!important;
    border:1px solid color-mix(in srgb,var(--line) 60%,transparent);
    color:var(--muted);
  }
  .dk-ws-thread[data-primary-scene="bookclub"] #char-study-page .bc-tabs button.on{
    background:transparent!important;
    border-color:var(--accent)!important;
    color:var(--accent)!important;
    box-shadow:var(--dk-glow-halo)!important;
  }
  .dk-ws-thread[data-primary-scene="bookclub"] #char-study-page .bc-note{
    background:linear-gradient(120deg,color-mix(in srgb,var(--surface) 16%,transparent),transparent)!important;
    border-color:var(--dk-glow-line-soft)!important;
  }
  .bcp-manager{
    background:
      linear-gradient(100deg,color-mix(in srgb,var(--surface) 13%,transparent),transparent 92%)!important;
    backdrop-filter:blur(9px) saturate(.86)!important;-webkit-backdrop-filter:blur(9px) saturate(.86)!important;
    border-right-color:var(--dk-glow-line-soft)!important;
    box-shadow:inset -1px 0 color-mix(in srgb,var(--accent) 12%,transparent)!important;
  }
  .bcp-dashboard{
    background:
      radial-gradient(circle at 74% 22%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 44%),
      linear-gradient(125deg,color-mix(in srgb,var(--bg) 8%,transparent),transparent 72%)!important;
  }
  .bcp-dashboard::before{
    border-color:var(--dk-glow-line-soft)!important;
    box-shadow:inset 0 0 44px color-mix(in srgb,var(--accent) 4%,transparent),0 0 28px color-mix(in srgb,var(--accent) 4%,transparent)!important;
  }
  .bcp-accordion{
    border-top-color:var(--dk-glow-line-soft)!important;border-bottom-color:var(--dk-glow-line-soft)!important;
  }
  .bcp-manager .bcp-room-wrap,.bcp-dashboard-room{
    border:0!important;border-bottom:1px solid var(--dk-glow-line-soft)!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  .bcp-manager .bcp-room-wrap:hover,.bcp-dashboard-room:hover{
    background:none!important;
    border-bottom-color:var(--dk-glow-line)!important;
  }
  .bcp-manager .bcp-book-form,.bcp-manager .bcp-room-form{
    background:linear-gradient(120deg,color-mix(in srgb,var(--surface) 16%,transparent),transparent)!important;
    border-color:var(--dk-glow-line-soft)!important;box-shadow:var(--dk-glow-halo)!important;
  }
  .bcp-manager :is(input,select,textarea){
    background:color-mix(in srgb,var(--surface2) 16%,transparent)!important;
    border-color:var(--dk-glow-line-soft)!important;
  }

  /* 讀書會房間：脈絡、討論與工具列用光線分層，不再各鋪一層黑色。 */
  #bookclub-room.dk-bc-built{
    background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .dk-bc-context{
    background:
      linear-gradient(100deg,color-mix(in srgb,var(--surface) 14%,transparent),transparent 94%)!important;
    backdrop-filter:blur(8px) saturate(.88)!important;-webkit-backdrop-filter:blur(8px) saturate(.88)!important;
    border-right-color:var(--dk-glow-line-soft)!important;
    box-shadow:inset -1px 0 color-mix(in srgb,var(--accent) 10%,transparent)!important;
  }
  .dk-bc-main,.dk-bc-topbar,.dk-bc-tabbar{
    background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .dk-bc-topbar,.dk-bc-tabbar{border-bottom-color:var(--dk-glow-line-soft)!important}
  .dk-bc-ctx-sec,.dk-bc-sidegroup{border-color:var(--dk-glow-line-soft)!important}
  .dk-bc-sideitems>button{
    border:0!important;border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent)!important;
    border-radius:0!important;background:transparent!important;box-shadow:none!important;
  }
  .dk-bc-sideitems>button.on{
    border-bottom-color:var(--dk-glow-line)!important;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 86%)!important;
    box-shadow:inset 2px 0 var(--dk-glow-line)!important;
  }
  .dk-bc-switchpop{
    background:color-mix(in srgb,var(--bg) 72%,transparent)!important;
    border-color:var(--dk-glow-line)!important;box-shadow:0 0 32px color-mix(in srgb,var(--accent) 18%,transparent)!important;
  }
  .dk-bc-main>#bc-msgs{background:transparent!important}
  .dk-bc-main>#bc-msgs .bubble{
    background:linear-gradient(112deg,color-mix(in srgb,var(--surface) 22%,transparent),transparent 92%)!important;
    border:0!important;border-left:1px solid var(--dk-glow-line-soft)!important;box-shadow:none!important;
  }
  .dk-bc-main>#bc-msgs .msg.me .bubble{
    background:linear-gradient(112deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 94%)!important;
    border-left:0!important;border-right:1px solid var(--dk-glow-line)!important;
  }
  .dk-bc-main>#bc-inputrow{
    background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 10%,transparent),transparent)!important;
    border-color:var(--dk-glow-line-soft)!important;box-shadow:var(--dk-glow-halo)!important;
  }

  /* 右欄私聊／懸浮聊天室：透明閱讀層 + 輕量氣泡，不再是一塊黑色小視窗。 */
  .dk-ws-rightpane[data-rightpane="privatechat"]{
    background:
      radial-gradient(circle at 85% 8%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 38%),
      linear-gradient(180deg,color-mix(in srgb,var(--bg) 7%,transparent),transparent)!important;
  }
  .dk-ws-rightpane[data-rightpane="privatechat"] #chatroom,
  .dk-chat-floating #chatroom{
    background:transparent!important;box-shadow:none!important;
  }
  #chatroom[data-presentation="auxiliary"] .chat-head,
  #chatroom[data-presentation="floating"] .chat-head{
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 12%,transparent),transparent)!important;
    backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
    border-bottom:1px solid var(--dk-glow-line-soft)!important;
  }
  #chatroom[data-presentation="auxiliary"] #msgs,
  #chatroom[data-presentation="floating"] #msgs{
    background:transparent!important;
  }
  #chatroom[data-presentation="auxiliary"] #msgs .bubble,
  #chatroom[data-presentation="floating"] #msgs .bubble{
    background:linear-gradient(112deg,color-mix(in srgb,var(--surface) 23%,transparent),transparent 90%)!important;
    border:0!important;border-left:1px solid var(--dk-glow-line-soft)!important;
    box-shadow:none!important;
  }
  #chatroom[data-presentation="auxiliary"] #msgs .msg.me .bubble,
  #chatroom[data-presentation="floating"] #msgs .msg.me .bubble{
    background:linear-gradient(112deg,color-mix(in srgb,var(--accent) 13%,transparent),transparent 92%)!important;
    border-left:0!important;border-right:1px solid var(--dk-glow-line)!important;
  }
  #chatroom[data-presentation="auxiliary"]>.chat-input,
  #chatroom[data-presentation="floating"]>.chat-input,
  .dk-chat-floating .chat-input{
    background:linear-gradient(100deg,color-mix(in srgb,var(--surface) 15%,transparent),transparent)!important;
    border-color:var(--dk-glow-line-soft)!important;
    box-shadow:var(--dk-glow-halo)!important;
    backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
  }
  .dk-chat-floating{
    background:
      radial-gradient(circle at 80% 4%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 34%),
      color-mix(in srgb,var(--bg) 12%,transparent)!important;
    border-color:var(--dk-glow-line-soft)!important;box-shadow:0 0 34px color-mix(in srgb,var(--accent) 10%,transparent)!important;
    backdrop-filter:blur(9px) saturate(.88)!important;-webkit-backdrop-filter:blur(9px) saturate(.88)!important;
  }

  /* Spotify 與右欄工具沿用同一套光線語彙。 */
  .dk-spotify-mini,.dk-spotify-workspace .dk-spotify-pagehead{
    background:linear-gradient(110deg,color-mix(in srgb,var(--surface) 12%,transparent),transparent)!important;
    border-color:var(--dk-glow-line-soft)!important;
  }
  .dk-spotify-workspace :is(.dk-spotify-now,.dk-spotify-character,.dk-spotify-config,.dk-curator){
    border-color:var(--dk-glow-line-soft)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  :is(.pill.hot,.sendbtn,.bcp-add-action,.dk-spotify-mini-workspace,.dk-spotify-connect),
  .dk-ws-centertabs [role="tab"].on::after,
  .dk-ws-righttabs [role="tab"].on::after,
  .dk-bc-tabbar [role="tab"][aria-selected="true"]::after{
    animation:none!important;
  }
}


/* ============================================================
   Persistent character playlist library + expanded left player
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* 左欄不再是一整片連續色塊：標題保持透明，角色與音樂各自淡入／淡出。 */
  .dk-ws-workarea .dk-ws-railcol,
  .dk-ws-workarea:has(.dk-ws-thread[data-primary-scene="bookclub"]) .dk-ws-railcol{
    flex-basis:clamp(264px,17vw,300px);min-width:264px;max-width:300px;
    background:transparent!important;
    border-right-color:var(--dk-glow-line-soft)!important;
    box-shadow:inset -1px 0 color-mix(in srgb,var(--accent) 11%,transparent)!important;
  }
  .dk-ws-railhead,.dk-ws-rail-title{
    background:transparent!important;border:0!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .dk-ws-railchar{
    padding:8px 0 16px;
    background:
      linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb,var(--surface) 8%,transparent) 13%,
        color-mix(in srgb,var(--surface) 18%,transparent) 52%,
        color-mix(in srgb,var(--surface) 7%,transparent) 86%,
        transparent 100%);
  }
  .dk-char-row:hover{
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 7%,transparent) 48%,transparent 96%)!important;
  }

  /* 左側音樂區加高，登入、歌單庫、角色摘要與逐曲理由皆可直接操作。 */
  .dk-spotify-mini{
    position:relative;flex:0 0 auto;min-height:286px;box-sizing:border-box;
    padding:20px 18px 22px!important;border:0!important;
    background:
      linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb,var(--surface) 8%,transparent) 10%,
        color-mix(in srgb,var(--surface) 22%,transparent) 48%,
        color-mix(in srgb,var(--surface) 8%,transparent) 90%,
        transparent 100%)!important;
  }
  .dk-spotify-mini::before{
    content:'';position:absolute;left:18px;right:18px;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--dk-glow-line-soft),transparent);
  }
  .dk-spotify-mini-head{display:flex;align-items:center;gap:10px}
  .dk-spotify-mini-open{width:auto!important;flex:1;min-width:0;padding:0!important}
  .dk-spotify-mini-login{
    min-width:54px;min-height:28px;padding:0 11px;border:1px solid var(--dk-glow-line-soft);border-radius:999px;
    color:var(--dk-tab-active);font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.08em;
  }
  .dk-spotify-mini-row{margin-top:13px}
  .dk-spotify-mini-reason{margin-top:10px}
  .dk-spotify-mini-reason>small,
  .dk-spotify-mini-active>small,
  .dk-spotify-mini-library>span{
    display:block;margin-bottom:5px;font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.16em;color:var(--faint);
  }
  .dk-spotify-mini-active{
    margin-top:11px;padding:10px 0;
    border-top:1px solid var(--dk-glow-line-soft);border-bottom:1px solid var(--dk-glow-line-soft);
  }
  .dk-spotify-mini-active>div{display:flex;align-items:center;gap:9px}
  .dk-spotify-mini-character-avatar,.dk-spotify-character-avatar{
    width:30px;height:30px;flex:0 0 30px;border-radius:50%;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--dk-glow-line-soft);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 12%,transparent);
  }
  .dk-spotify-mini-character-avatar :is(img,span),
  .dk-spotify-character-avatar :is(img,span){width:100%;height:100%;display:flex;align-items:center;justify-content:center;object-fit:cover}
  .dk-spotify-mini-summary{margin:0;min-width:0}
  .dk-spotify-mini-summary .dk-reason-track{font-family:var(--serif);font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.5;color:var(--muted)}
  .dk-spotify-mini-library{display:block;margin-top:11px}
  .dk-spotify-mini-library select,.dk-spotify-library select{
    width:100%;min-width:0;box-sizing:border-box;padding:8px 28px 8px 9px!important;
    border:0!important;border-bottom:1px solid var(--dk-glow-line-soft)!important;border-radius:0!important;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent)!important;
    color:var(--text);font-size:calc(10px * var(--dk-fs-mult,1))!important;
  }
  .dk-spotify-mini-start{
    width:100%;min-height:31px;margin-top:8px;border:1px solid var(--dk-glow-line-soft);border-radius:999px;
    color:var(--dk-tab-active);font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.06em;
  }
  .dk-spotify-mini-controls{margin-top:9px!important}
  .dk-spotify-mini-login,.dk-spotify-mini-start{animation:dk-luminous-breathe 4.6s ease-in-out infinite}

  /* 理由以符號分段；左欄持續流動，右欄只在 hover／鍵盤 focus 時流動。 */
  @keyframes dk-reason-marquee{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-50% - 24px))}
  }
  .dk-reason-marquee{
    width:100%;min-width:0;overflow:hidden;white-space:nowrap;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .dk-reason-track{display:flex;width:max-content;gap:48px;color:var(--muted);font-size:calc(10px * var(--dk-fs-mult,1));line-height:1.7}
  .dk-reason-track span{display:block;max-width:none}
  .dk-reason-marquee.always-scroll .dk-reason-track{animation:dk-reason-marquee 22s linear infinite}
  .dk-spotify-track-reason:is(:hover,:focus-within) .dk-reason-track{animation:dk-reason-marquee 25s linear infinite}
  .dk-reason-marquee.always-scroll:hover .dk-reason-track{animation-play-state:paused}

  /* NOW PLAYING 不再接裝飾線；播放置中，兩側是目前歌曲偏好。 */
  .dk-spotify-workspace .dk-spotify-kicker i{display:none!important}
  .dk-spotify-workspace .dk-spotify-playbackbar{
    display:grid;grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr);
    align-items:center;gap:16px;margin-top:18px;
  }
  .dk-spotify-workspace .dk-spotify-ctrls{justify-content:center}
  .dk-spotify-now-pref{
    min-height:34px;padding:0 11px;border:1px solid var(--dk-glow-line-soft);border-radius:999px;
    display:flex;align-items:center;justify-content:center;gap:6px;color:var(--faint);font-size:calc(12px * var(--dk-fs-mult,1));
  }
  .dk-spotify-now-pref:first-child{justify-self:start}
  .dk-spotify-now-pref:last-child{justify-self:end}
  .dk-spotify-now-pref span{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.04em}
  .dk-spotify-now-pref[aria-pressed="true"]{
    color:var(--dk-tab-active);border-color:var(--dk-glow-line)!important;box-shadow:var(--dk-glow-halo)!important;
  }
  .dk-spotify-now-pref:not(:disabled):hover{
    color:var(--dk-tab-active);animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }
  .dk-spotify-workspace .dk-spotify-device,.dk-spotify-workspace .dk-spotify-devices{display:none!important}

  .dk-spotify-library{
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:9px;
    margin-top:20px;padding:17px 0;border-top:1px solid var(--dk-glow-line-soft);
  }
  .dk-spotify-library label{display:flex;min-width:0;flex-direction:column;gap:5px}
  .dk-spotify-library label>span{font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.1em;color:var(--faint)}
  .dk-spotify-library .pill{min-height:34px;white-space:nowrap}
  .dk-spotify-track-reason{
    padding:16px 0 4px;border-top:1px solid var(--dk-glow-line-soft);
  }
  .dk-spotify-track-reason>small{display:block;margin-bottom:8px;font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.14em;color:var(--faint)}
  .dk-spotify-track-reason .dk-reason-track{font-family:var(--serif);font-size:calc(10px * var(--dk-fs-mult,1));color:var(--text)}

  /* ACTIVE CHARACTER PLAYLIST 只做摘要；播放／新增／刪除已集中到明確流程。 */
  .dk-spotify-workspace .dk-spotify-character{padding:22px 0!important}
  .dk-spotify-character-summary{display:flex;align-items:center;gap:12px;margin-top:10px}
  .dk-spotify-character-avatar{width:38px;height:38px;flex-basis:38px}
  .dk-spotify-character .dk-spotify-recommendation{margin:0!important;min-width:0}
  .dk-spotify-character:not(.has-playlist){opacity:.62}

  /* 策展操作採步驟式：先生成，再在 preview 明確新增到 Spotify。 */
  .dk-spotify-workspace .dk-curator-actions{display:grid!important;grid-template-columns:1fr!important;margin-top:16px}
  .dk-spotify-workspace .dk-curator-actions .dk-curator-action{
    min-height:42px;justify-content:center;font-size:calc(10px * var(--dk-fs-mult,1))!important;letter-spacing:.04em;
  }
  .dk-curator-action>span{
    width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;margin-right:7px;
    border:1px solid currentColor;border-radius:50%;font-size:calc(10px * var(--dk-fs-mult,1));
  }
  .dk-spotify-workspace .dk-curator-preview>header{
    align-items:center!important;padding-bottom:12px;border-bottom:1px solid var(--dk-glow-line-soft);
  }
  .dk-spotify-workspace .dk-curator-sync{min-height:38px;white-space:nowrap}
  .dk-spotify-workspace .dk-spotify-config{opacity:.72}
  /* 分頁標籤輪播不是「進階/開發者用」設定,不跟著上面那條收合區塊通用的
     .72 透明度變淡——不然開關打開時該有的主題重點色(input.switch:checked
     的 --accent)也會被這層透明度一起洗淡,看起來像沒開啟。 */
  .dk-spotify-workspace .dk-spotify-config.dk-spotify-tabcarousel-config{opacity:1}

  .dk-rail-collapsed .dk-ws-railcol{
    flex-basis:72px!important;min-width:72px!important;max-width:72px!important;
  }
  .dk-rail-collapsed .dk-spotify-mini{min-height:0;padding:12px 8px!important}
  .dk-rail-collapsed .dk-spotify-mini-head,
  .dk-rail-collapsed .dk-spotify-mini-reason,
  .dk-rail-collapsed .dk-spotify-mini-active,
  .dk-rail-collapsed .dk-spotify-mini-library,
  .dk-rail-collapsed .dk-spotify-mini-start{display:none!important}
}

@media (min-width:1024px) and (max-height:760px) and (hover:hover) and (pointer:fine){
  .dk-spotify-mini{min-height:238px;padding-top:15px!important;padding-bottom:16px!important}
  .dk-spotify-mini-active{display:none}
  .dk-spotify-mini-row{margin-top:9px}
}

@media (prefers-reduced-motion:reduce){
  .dk-spotify-mini-login,.dk-spotify-mini-start,.dk-reason-track{animation:none!important}
  .dk-reason-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}


/* Desktop translucent chat, single bookclub surface, and avatar-first rail */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* The character rail has no material layer. Idle rows expose only their avatar;
     hover, keyboard focus and an active reply reveal the related text in place. */
  .dk-ws-railcol,
  .dk-ws-railchar{
    background:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  .dk-char-row{
    position:relative;
    min-height:68px;
    padding:9px 18px!important;
    background:none!important;
    transform:none!important;
  }
  .dk-char-row:hover,
  .dk-char-row:focus-visible,
  .dk-char-row.replying{
    background:none!important;
    opacity:1;
  }
  .dk-char-row .dk-char-meta{
    position:absolute;
    z-index:2;
    left:78px;
    right:14px;
    top:50%;
    min-width:0;
    opacity:0;
    visibility:hidden;
    transform:translate(-8px,-50%);
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  }
  .dk-char-row:is(:hover,:focus-visible,.replying) .dk-char-meta{
    opacity:1;
    visibility:visible;
    transform:translate(0,-50%);
    transition-delay:0s;
  }
  .dk-char-row .dk-char-status,
  .dk-char-row .dk-char-status-origin{
    color:var(--dk-tab-active)!important;
    text-shadow:0 0 14px color-mix(in srgb,var(--accent) 34%,transparent);
  }
  /* 名字平時是 --faint(選中中的角色才是 --text),滑鼠移過去(或鍵盤 focus)
     再疊一層「已選取」色+呼吸光暈,跟其餘分頁/清單項目同一套語彙,不用
     整排反白色塊。聊天室跟私聊共用同一顆 .dk-char-row,這裡改一次兩邊都到。 */
  .dk-char-row:is(:hover,:focus-visible) .dk-char-name{
    color:var(--dk-tab-active)!important;
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }

  /* The left ticker begins on its first marker and briefly rests there on every
     loop. The right workspace is prose, not a ticker, so it wraps in full. */
  @keyframes dk-reason-marquee{
    0%,10%{transform:translateX(0)}
    100%{transform:translateX(calc(-50% - 24px))}
  }
  .dk-reason-marquee{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 92%,transparent 100%);
  }
  .dk-reason-marquee.always-scroll .dk-reason-track{animation:none}
  .dk-reason-marquee.always-scroll .dk-reason-track.is-running{
    animation:dk-reason-marquee 42s linear infinite;
  }
  .dk-spotify-track-reason .dk-reason-marquee{
    overflow:visible;
    white-space:normal;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .dk-spotify-track-reason .dk-reason-track{
    display:block;
    width:auto;
    white-space:normal;
    font-family:var(--serif);
    font-size:calc(10.5px * var(--dk-fs-mult,1));
    line-height:1.8;
    color:var(--text);
    transform:none!important;
    animation:none!important;
  }
  .dk-spotify-track-reason .dk-reason-track span{display:block;white-space:normal}
  .dk-spotify-track-reason .dk-reason-track span[aria-hidden="true"]{display:none}
  .dk-spotify-character-summary{align-items:flex-start!important}
  .dk-spotify-character .dk-spotify-recommendation{
    display:block!important;
    flex:1 1 auto;
    width:auto;
    max-width:none!important;
    max-height:none!important;
    overflow:visible!important;
    white-space:normal!important;
    text-overflow:clip!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:initial!important;
  }

  /* Low-density gradient glass. The outer 4% material is almost clear and all
     backdrop blur stays at 5px, so imagery remains visible through the chat. */
  .dk-ws-thread #msgs .bubble,
  .dk-ws-thread #msgs .lbubble,
  #chatroom[data-presentation="auxiliary"] #msgs .bubble,
  #chatroom[data-presentation="floating"] #msgs .bubble{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--surface) 4%,transparent) 0%,
      color-mix(in srgb,var(--surface) 16%,transparent) 48%,
      color-mix(in srgb,var(--surface) 4%,transparent) 100%)!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:blur(5px) saturate(.9)!important;
    -webkit-backdrop-filter:blur(5px) saturate(.9)!important;
  }
  .dk-ws-thread #msgs .msg.me .bubble,
  .dk-ws-thread #msgs .lwrap-me .lbubble,
  #chatroom[data-presentation="auxiliary"] #msgs .msg.me .bubble,
  #chatroom[data-presentation="floating"] #msgs .msg.me .bubble{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--accent) 3%,transparent) 0%,
      color-mix(in srgb,var(--accent) 13%,transparent) 50%,
      color-mix(in srgb,var(--accent) 3%,transparent) 100%)!important;
  }
  .dk-ws-thread #chatroom>.chat-input,
  #chatroom[data-presentation="auxiliary"]>.chat-input,
  #chatroom[data-presentation="floating"]>.chat-input,
  .dk-chat-floating .chat-input{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--surface) 3%,transparent),
      color-mix(in srgb,var(--surface) 15%,transparent) 50%,
      color-mix(in srgb,var(--surface) 3%,transparent))!important;
    border-color:color-mix(in srgb,var(--accent) 18%,transparent)!important;
    box-shadow:0 0 20px color-mix(in srgb,var(--accent) 5%,transparent)!important;
    backdrop-filter:blur(5px) saturate(.9)!important;
    -webkit-backdrop-filter:blur(5px) saturate(.9)!important;
  }
  .dk-chat-floating,
  .dk-ws-rightpane[data-rightpane="privatechat"]{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 3%,transparent),
      color-mix(in srgb,var(--bg) 13%,transparent) 50%,
      color-mix(in srgb,var(--bg) 3%,transparent))!important;
    backdrop-filter:blur(5px) saturate(.9)!important;
    -webkit-backdrop-filter:blur(5px) saturate(.9)!important;
  }
  #chatroom[data-presentation="auxiliary"] .chat-head,
  #chatroom[data-presentation="floating"] .chat-head,
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-page>.chat-head,
  .dk-ws-thread[data-primary-scene="bookclub"] #char-study-page>.chat-head{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 2%,transparent),
      color-mix(in srgb,var(--bg) 11%,transparent) 50%,
      color-mix(in srgb,var(--bg) 2%,transparent))!important;
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
  }
  #bookclub-room.dk-bc-built,
  .dk-bc-context,
  .bcp-manager{
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--bg) 3%,transparent),
      color-mix(in srgb,var(--bg) 14%,transparent) 50%,
      color-mix(in srgb,var(--bg) 3%,transparent))!important;
    backdrop-filter:blur(5px) saturate(.9)!important;
    -webkit-backdrop-filter:blur(5px) saturate(.9)!important;
  }

  /* Exactly one desktop bookclub surface can participate in layout. This
     overrides the older .dk-bc-built display rule that exposed both layers.
     #char-study-page(角色書房,js/ui/char-study.js)不在這組互斥規則裡——
     它桌機下改成內嵌進「書頁之間」欄位(.bcp-dashboard,見 bookclub.js 的
     pageUI.studyCharId/mountCharStudyDashboard),不再是疊在 #bookclub-page
     之上搶同一塊版位的第三層,可見度單純由「有沒有被搬進畫面上的容器」
     決定,不用 .open/hidden 這套。 */
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-page[hidden],
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-room[hidden],
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-page:not(.open),
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-room.dk-bc-built:not(.open){
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-page.open{
    display:flex!important;
    flex-direction:column;
    visibility:visible!important;
  }
  .dk-ws-thread[data-primary-scene="bookclub"] #bookclub-room.dk-bc-built.open{
    display:flex!important;
    visibility:visible!important;
  }
  /* 內嵌進「書頁之間」欄位時,.bcp-dashboard 本身是 position:relative,
     inset:0(手機版基礎值)會自然對齊沒錯,但 .bcp-dashboard::before 那圈
     裝飾框線是 inset:24px、border-radius:24px(見 desktop.css)——inset:0
     的話書房內容會撐到 .bcp-dashboard 的最外緣,超出那圈框線範圍,看起來
     像是溢出邊界。改成跟裝飾框線同樣的 inset:24px,並自己接手畫一圈同款
     圓角框線(裝飾框線本身會被蓋在下面看不到,乾脆兩者共用同一個視覺框)。
     高度/寬度用 inset 撐開即可,不用另外設 height:100%。 */
  .bcp-dashboard #char-study-page{
    inset:24px!important;
    height:auto!important;
    width:auto!important;
    transform:none!important;
    transition:none!important;
    z-index:auto;
    border-radius:24px;
    border:1px solid color-mix(in srgb,var(--line) 22%,transparent);
  }
}

@media (prefers-reduced-motion:reduce){
  .dk-reason-marquee.always-scroll .dk-reason-track.is-running{animation:none!important}
}


/* ============================================================
   Desktop context rail: persistent today agenda + active character nest
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* 把場景名稱與角色資料拉向左右兩端，避免所有控制集中在寬畫面中央。 */
  .dk-ws-centertabs{
    gap:34px!important;
    padding:17px 34px 2px!important;
    justify-content:flex-start;
  }
  .dk-ws-centertabs [role="tab"]{
    padding:8px 1px 10px!important;
    font-family:var(--serif);
    font-size:calc(15px * var(--dk-fs-mult,1))!important;
    font-weight:600;
    letter-spacing:.1em!important;
  }
  .dk-ws-thread #chatroom .chat-head{
    padding-left:34px!important;
    padding-right:34px!important;
  }
  .dk-ws-thread #chatroom .chat-head::before{left:34px!important}
  .dk-ws-thread #chatroom .mode-seg{margin-left:auto}
  .dk-ws-thread #chatroom .chat-head>div[style*="flex:1"]{max-width:min(520px,56%)}

  /* 右欄成為聊天旁的固定情境欄；寬度仍可由既有拖曳控制調整。 */
  .dk-ws-rightcol{
    min-width:440px!important;
    max-width:680px!important;
  }
  .dk-ws-rightpane.dk-ws-contextpane{
    display:block;
    padding:0 30px 72px!important;
  }
  .dk-ws-rightpane.dk-ws-contextpane[hidden]{display:none!important}
  .dk-context-today{
    position:relative;
    padding:24px 0 26px;
    border-bottom:1px solid transparent;
    border-image:linear-gradient(90deg,var(--dk-glow-line-soft),color-mix(in srgb,var(--accent) 22%,transparent),transparent) 1;
  }
  .dk-context-nest{padding-top:6px}
  .dk-ws-workarea:has(.dk-ws-thread[data-primary-scene="chat"]) .dk-context-nest [data-a="chat"]{display:none}

  .dk-today-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .dk-today-meta{
    grid-column:1/-1;
    display:flex;align-items:center;min-width:0;gap:6px;
    padding:0 0 11px;text-align:left;
    color:var(--dk-tab-muted);
    font-size:calc(10px * var(--dk-fs-mult,1));
    font-weight:650;letter-spacing:.1em;line-height:1.5;
  }
  .dk-today-meta span,.dk-today-meta time{white-space:nowrap}
  .dk-today-meta i{font-style:normal;opacity:.52}
  .dk-today-meta:hover{color:var(--dk-tab-active)}
  .dk-today-date{
    grid-column:1/-1;
    width:100%;display:grid;
    grid-template-columns:minmax(0,1fr) auto;align-items:end;
    padding:0 0 17px;text-align:left;color:var(--text);
  }
  .dk-today-date strong{
    font-family:var(--serif);
    font-size:calc(58px * var(--dk-fs-mult,1));
    font-weight:440;line-height:.92;letter-spacing:.02em;
    color:var(--text);text-shadow:0 0 22px color-mix(in srgb,var(--accent) 17%,transparent);
  }
  .dk-today-date span{
    align-self:end;padding-bottom:6px;
    font-size:calc(10px * var(--dk-fs-mult,1));
    letter-spacing:.13em;color:var(--faint);
  }
  .dk-today-date:hover strong{color:var(--dk-tab-active)}
  .dk-today-add{
    grid-column:1/-1;
    width:100%;min-height:38px;padding:9px 12px;margin-bottom:10px;
    border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
    border-radius:999px;text-align:left;
    color:var(--dk-tab-active);
    font-size:calc(10px * var(--dk-fs-mult,1));letter-spacing:.04em;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent);
  }
  .dk-today-add:hover{
    border-color:color-mix(in srgb,var(--accent) 48%,transparent);
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent);
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }
  .dk-today-todos{grid-column:1/-1;display:flex;flex-direction:column}
  /* 跟日曆分頁的 .dk-agenda-todo 共用同一套勾選/編輯/刪除元件(見
     desktop-calendar.js 的 bindAgendaActions/.dk-agenda-check/
     .dk-agenda-todo-acts,定義在 desktop.css)——這裡只調整跟這張卡片
     其餘元素搭配的間距/字級,互動元件本體不重複定義。 */
  .dk-today-todo{
    display:flex;align-items:center;gap:8px;
    min-height:32px;padding:7px 0;
    border-bottom:1px solid color-mix(in srgb,var(--line) 20%,transparent);
  }
  .dk-today-todo:last-of-type{border-bottom:0}
  .dk-today-todo b{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:calc(11px * var(--dk-fs-mult,1));font-weight:450;color:var(--text);
  }
  .dk-today-todo time{
    flex-shrink:0;
    font-size:calc(10px * var(--dk-fs-mult,1));
    font-variant-numeric:tabular-nums;color:var(--faint);
  }
  .dk-today-empty{
    margin:0;padding:6px 0 2px;
    font-family:var(--serif);font-size:calc(11px * var(--dk-fs-mult,1));
    line-height:1.7;color:var(--faint);
  }
  .dk-today-more{
    align-self:flex-start;padding:7px 0 0;
    font-size:calc(10px * var(--dk-fs-mult,1));color:var(--dk-tab-active);
  }

  .dk-ws-righttabs [role="tab"]{
    font-size:calc(11px * var(--dk-fs-mult,1))!important;
    font-weight:600;
  }
}

@media (min-width:1024px) and (max-width:1199px) and (hover:hover) and (pointer:fine){
  .dk-ws-rightcol{
    width:min(560px,92vw)!important;
    min-width:0!important;max-width:92vw!important;
    flex-basis:min(560px,92vw)!important;
  }
  .dk-ws-centertabs{padding-left:26px!important;padding-right:26px!important}
  .dk-ws-thread #chatroom .chat-head{padding-left:26px!important;padding-right:26px!important}
  .dk-ws-thread #chatroom .chat-head::before{left:26px!important}
}


/* ============================================================
   Desktop chat context rail + fixed date header, revision 2
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* 須彌桌機工作區的單一文字階層；所有尺寸繼續跟隨使用者文字倍率。 */
  .dk-ws-workarea{
    --dk-type-display:calc(56px * var(--dk-fs-mult,1));
    --dk-type-page-title:calc(22px * var(--dk-fs-mult,1));
    --dk-type-scene:calc(17px * var(--dk-fs-mult,1));
    --dk-type-section:calc(17px * var(--dk-fs-mult,1));
    --dk-type-body:calc(14px * var(--dk-fs-mult,1));
    --dk-type-body-small:calc(12px * var(--dk-fs-mult,1));
    --dk-type-label:calc(10.5px * var(--dk-fs-mult,1));
    --dk-type-eyebrow:calc(10px * var(--dk-fs-mult,1));
  }

  /* 場景名稱比照左側「角色」標題，使用白色有襯線字體。 */
  .dk-ws-centertabs [role="tab"]{
    font-family:var(--serif)!important;
    font-size:var(--dk-type-scene)!important;
    font-weight:520!important;
    letter-spacing:.08em!important;
  }

  /* 中央場景拆成「棲隙情境欄 + 對話」，讓對話整體向右移。 */
  .dk-ws-mainbody{
    position:relative;flex:1;min-height:0;min-width:0;
    display:flex;overflow:hidden;
  }
  .dk-ws-chatcontext{
    flex:0 0 clamp(232px,16vw,292px);
    min-width:232px;max-width:292px;
    box-sizing:border-box;overflow-y:auto;overflow-x:hidden;
    padding:18px 18px 48px;
    border-right:1px solid color-mix(in srgb,var(--line) 26%,transparent);
    background:transparent;
    scrollbar-width:thin;scrollbar-color:var(--dk-soft-line) transparent;
  }
  .dk-ws-chatcontext .dk-context-nest{padding:0}
  .dk-ws-mainbody>.dk-ws-thread{flex:1;min-width:0}
  .dk-ws-mainbody>.dk-chat-floating{z-index:40}

  /* 標題「閃動」改成純文字效果:預設就是一般墨色文字,不掛任何底色塊;
     滑鼠移到標題所在的那一列(或鍵盤 focus 進去)才觸發一次文字漸層掃光,
     掃完就停,不是持續閃爍。亮線顏色走 --dk-shimmer-line(各主題自己的
     高光色),靠 -webkit-background-clip:text 把漸層畫在文字本身上。 */
  @keyframes dk-text-glint{
    from{background-position:180% 0}
    to{background-position:-60% 0}
  }
  .dk-nest-statehead{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:4px 0 13px;border-bottom:1px solid var(--dk-soft-line);
  }
  .dk-nest-statehead>b{
    font-family:var(--serif);font-size:var(--dk-type-section);
    font-weight:550;color:var(--dk-title-ink);
  }
  .dk-nest-statehead:hover>b,
  .dk-nest-statehead:focus-within>b{
    background-image:linear-gradient(100deg,var(--dk-title-ink) 30%,var(--dk-shimmer-line) 50%,var(--dk-title-ink) 70%);
    background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:dk-text-glint .9s ease;
  }
  .dk-nest-toolbar>span{display:flex;min-width:0;flex-direction:column;gap:3px}
  .dk-nest-toolbar small{
    font-size:calc(10px * var(--dk-fs-mult,1));
    letter-spacing:.15em;color:var(--dk-tab-muted);
  }
  .dk-nest-toolbar b{
    font-family:var(--serif);font-size:calc(14px * var(--dk-fs-mult,1));
    font-weight:550;color:var(--text);
  }
  .dk-ws-chatcontext .dk-status-candidate{margin-top:14px}
  .dk-ws-chatcontext .dk-nest-voice{margin-top:16px}
  .dk-ws-chatcontext .dk-nest-now{padding:18px 0!important;border-top:0!important}
  .dk-ws-chatcontext .dk-nest-now-title{
    display:flex;align-items:flex-end;justify-content:space-between;gap:9px;
    margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--dk-soft-line);
  }
  .dk-ws-chatcontext .dk-nest-now-title small{
    font-size:calc(10px * var(--dk-fs-mult,1));
    letter-spacing:.14em;color:var(--dk-tab-muted);
  }
  .dk-ws-chatcontext .dk-nest-now-title b{
    font-family:var(--serif);font-size:var(--dk-type-section);
    font-weight:550;color:var(--dk-title-ink);
  }
  .dk-ws-chatcontext .dk-nest-now-title:hover b,
  .dk-ws-chatcontext .dk-nest-now-title:focus-within b{
    background-image:linear-gradient(100deg,var(--dk-title-ink) 30%,var(--dk-shimmer-line) 50%,var(--dk-title-ink) 70%);
    background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:dk-text-glint .9s ease;
  }
  .dk-ws-chatcontext .dk-nest-metrics{
    display:grid;grid-template-columns:1fr;gap:0;
  }
  .dk-ws-chatcontext .dk-nest-metrics>button{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    min-width:0;padding:10px 0;text-align:left;
    border-bottom:1px solid color-mix(in srgb,var(--line) 20%,transparent);
  }
  .dk-ws-chatcontext .dk-nest-metrics>button:hover small{color:var(--dk-tab-active)}
  .dk-ws-chatcontext .dk-nest-metrics b{
    order:2;font-family:var(--serif);
    font-size:calc(15px * var(--dk-fs-mult,1));font-weight:500;color:var(--text);
  }
  .dk-ws-chatcontext .dk-nest-metrics small{
    order:1;font-size:calc(10px * var(--dk-fs-mult,1));color:var(--muted);
  }
  .dk-ws-chatcontext .dk-nest-metrics>button[aria-expanded="true"] small{color:var(--dk-tab-active)}
  .dk-ws-chatcontext .dk-nest-summary-panel{
    margin:7px 0 4px;padding:12px 13px 11px;
    border:1px solid var(--dk-soft-line);border-radius:12px;
    background:color-mix(in srgb,var(--bg) 26%,transparent);
  }
  .dk-ws-chatcontext .dk-nest-summary-panel>header{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding-bottom:9px;border-bottom:1px solid color-mix(in srgb,var(--line) 20%,transparent);
  }
  .dk-ws-chatcontext .dk-nest-summary-panel>header b{
    font-family:var(--serif);font-size:var(--dk-type-body);
    font-weight:550;color:var(--text);
  }
  .dk-ws-chatcontext .dk-nest-summary-panel>header button{
    width:24px;height:24px;color:var(--muted);font-size:16px;
  }

  /* 日曆「今日待辦事項」標題比照棲隙區塊標題,吃同一階層 token,
     不再用寫死的 14px 跟內文打平。 */
  .dk-cal-agenda-head b{font-size:var(--dk-type-section);color:var(--dk-title-ink)}
  .dk-cal-agenda-head:hover b,
  .dk-cal-agenda-head:focus-within b{
    background-image:linear-gradient(100deg,var(--dk-title-ink) 30%,var(--dk-shimmer-line) 50%,var(--dk-title-ink) 70%);
    background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:dk-text-glint .9s ease;
  }

  .dk-ws-chatcontext .dk-nest-summary-list{display:flex;flex-direction:column}
  .dk-ws-chatcontext .dk-nest-summary-list article{
    min-width:0;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 17%,transparent);
  }
  .dk-ws-chatcontext .dk-nest-summary-list article:last-child{border-bottom:0}
  .dk-ws-chatcontext .dk-nest-summary-list small{
    display:block;margin-bottom:3px;font-size:calc(10px * var(--dk-fs-mult,1));
    letter-spacing:.08em;color:var(--dk-tab-muted);
  }
  .dk-ws-chatcontext .dk-nest-summary-list p{
    margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-family:var(--serif);font-size:calc(10px * var(--dk-fs-mult,1));
    line-height:1.6;color:var(--text);
  }
  .dk-ws-chatcontext .dk-nest-summary-empty{padding:12px 0!important;color:var(--faint)!important}
  .dk-ws-chatcontext .dk-nest-summary-open{
    display:block;margin:10px 0 0;padding:0;font-size:calc(10px * var(--dk-fs-mult,1));
  }
  .dk-ws-chatcontext .dk-nest-actions{padding:14px 0 18px!important;margin:0}
  .dk-ws-chatcontext .dk-nest-actions .pill{width:100%;min-width:0}
  .dk-ws-chatcontext .dk-status-model{
    margin-top:6px;border-top:1px solid var(--dk-soft-line);
  }
  .dk-ws-chatcontext .dk-status-model>summary{padding-top:15px}
  .dk-ws-chatcontext .dk-status-model>summary small{
    font-size:calc(10px * var(--dk-fs-mult,1));
  }

  /* 角色公開狀態取代 online，顯示在名字下方。 */
  .dk-ws-thread #chat-state{
    max-width:48ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--serif);font-size:calc(11px * var(--dk-fs-mult,1))!important;
    line-height:1.5;color:var(--muted);
  }

  /* 右欄縮回日期／社群／音樂所需寬度；日期固定在捲動區上方。 */
  .dk-ws-rightcol{
    min-width:360px!important;max-width:580px!important;
  }
  .dk-ws-rightcol>.dk-context-today{
    position:relative;z-index:8;flex:0 0 auto;
    padding:20px 26px 16px!important;
    border:0!important;border-bottom:1px solid var(--dk-soft-line)!important;
    background:transparent!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .dk-ws-rightcol>.dk-ws-righttabs{
    flex:0 0 auto;padding-top:13px!important;
  }
  .dk-ws-rightcol>.dk-ws-rightpane{flex:1;min-height:0}

  .dk-today-card{display:block!important}
  .dk-today-overview{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:18px;
  }
  .dk-today-date{
    grid-column:auto!important;width:auto!important;display:block!important;
    padding:0!important;text-align:left!important;
  }
  .dk-today-date strong{
    display:block;font-size:var(--dk-type-display)!important;
    line-height:.88!important;text-align:left!important;
  }
  .dk-today-copy{
    min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;
    text-align:left;
  }
  .dk-today-meta{
    grid-column:auto!important;display:flex!important;flex-wrap:wrap;
    justify-content:flex-start!important;gap:4px!important;
    padding:0!important;text-align:left!important;
    font-size:calc(10px * var(--dk-fs-mult,1))!important;
  }
  .dk-today-copy>p{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px;
    margin:0;text-align:left;
    font-family:var(--serif);font-size:calc(10.5px * var(--dk-fs-mult,1));
    color:var(--muted);
  }
  .dk-today-copy>p i{font-style:normal;opacity:.52}
  .dk-today-add{
    margin:15px 0 8px!important;min-height:34px!important;
    background:transparent!important;border-color:var(--dk-soft-line)!important;
  }
  .dk-today-todo{min-height:26px!important;padding:5px 0!important}
  .dk-today-todo b{font-size:calc(10px * var(--dk-fs-mult,1))!important}
  .dk-today-empty{font-size:calc(10px * var(--dk-fs-mult,1))!important}

  /* 社群篩選列不再用黑色 sticky 材質。 */
  .dk-ws-rightpane[data-rightpane="community"] .dk-feed-filters{
    position:relative!important;top:auto!important;z-index:auto!important;
    background:transparent!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }

  /* Spotify 置頂標題使用不透明遮罩，捲動內容不會從文字後方穿出。 */
  .dk-ws-rightpane[data-rightpane="music"]{isolation:isolate}
  .dk-spotify-workspace .dk-spotify-pagehead{
    isolation:isolate;overflow:hidden;
    background:var(--bg)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:0 10px 22px color-mix(in srgb,var(--bg) 82%,transparent);
  }
  .dk-spotify-workspace .dk-spotify-pagehead::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:var(--bg);
  }

  /* 左右欄極小灰色標題統一提升一級，並繼續跟隨須彌文字倍率。 */
  .dk-ws-rail-title small,
  .dk-spotify-mini-open,
  .dk-spotify-mini-reason>small,
  .dk-spotify-mini-active>small,
  .dk-spotify-mini-library>span,
  .dk-spotify-pagehead small,
  .dk-spotify-workspace .dk-spotify-kicker,
  .dk-spotify-character>small,
  .dk-spotify-track-reason>small,
  .dk-curator>header small,
  .dk-feed-item-head small{
    font-size:calc(10px * var(--dk-fs-mult,1))!important;
  }
  .dk-ws-righttabs [role="tab"]{
    font-family:var(--serif);
    font-size:var(--dk-type-body-small)!important;
  }

  /* 主標、正文、標籤與眉標統一映射到上述階層。 */
  .dk-ws-rail-title span,
  .dk-spotify-pagehead h2{font-size:var(--dk-type-page-title)!important}
  .dk-ws-thread #msgs :is(.bubble,.lbubble){font-size:var(--dk-type-body)!important}
  .dk-feed-item :is(p,.dk-feed-excerpt){font-size:var(--dk-type-body-small)!important}
  .dk-today-meta,.dk-today-copy>p,
  .dk-today-todo b,.dk-curator :is(select,input){font-size:var(--dk-type-label)!important}
  .dk-ws-rail-title small,
  .dk-char-status-origin,.char-status-source,
  .dk-nest-now-title small,.dk-status-model>summary small,
  .dk-status-model>summary em,.dk-status-budget small,
  .dk-status-switch small,.dk-status-grid label>span,
  .dk-status-history-head small,.dk-status-history-row small,
  .dk-spotify-mini-open,.dk-spotify-mini-reason>small,
  .dk-spotify-mini-active>small,.dk-spotify-mini-library>span,
  .dk-spotify-pagehead small,.dk-spotify-pagehead p,
  .dk-spotify-workspace .dk-spotify-kicker,
  .dk-spotify-character>small,.dk-spotify-track-reason>small,
  .dk-curator>header small,.dk-curator-account,
  .dk-curator label>span,.dk-curator-history summary,
  .dk-curator-auto small,.dk-curator-status,
  .dk-curator-preview header small,.dk-curator-preview header p,
  .dk-curator-song small,.dk-curator-song p,
  .dk-curator-policy,.dk-feed-item-head small,.dk-feed-meta{
    font-size:var(--dk-type-eyebrow)!important;
  }

  /* 移除聊天英文眉標並收斂角色名稱尺寸。 */
  .dk-ws-thread #chatroom .chat-head{padding-top:20px!important}
  .dk-ws-thread #chatroom .chat-head::before{content:none!important;display:none!important}
  .dk-ws-thread #chat-name{font-size:calc(20px * var(--dk-fs-mult,1))!important}

  /* Spotify 標題保留完整高度，以欄位材質取代實黑遮罩。 */
  .dk-spotify-workspace .dk-spotify-pagehead{
    min-height:112px;box-sizing:border-box;overflow:visible!important;
    padding-top:24px!important;padding-bottom:24px!important;
    background:linear-gradient(180deg,var(--dk-side-material),color-mix(in srgb,var(--dk-side-material) 92%,transparent))!important;
    backdrop-filter:blur(28px) saturate(.88)!important;
    -webkit-backdrop-filter:blur(28px) saturate(.88)!important;
    box-shadow:0 1px var(--dk-soft-line)!important;
  }
  .dk-spotify-workspace .dk-spotify-pagehead::before{content:none!important}
  .dk-spotify-workspace .dk-spotify-pagehead>div{overflow:visible}
  .dk-spotify-workspace .dk-spotify-pagehead p{max-width:none}

  .dk-curator-actions{flex-direction:column!important;align-items:stretch!important}
  .dk-curator-actions .dk-curator-action{width:100%}
  .dk-curator-art{cursor:pointer;transition:border-color .18s ease,transform .18s ease}
  .dk-curator-art:hover,.dk-curator-art:focus-visible{
    border-color:var(--dk-tab-active)!important;transform:translateY(-1px);
  }
}

@media (min-width:1024px) and (max-width:1399px) and (hover:hover) and (pointer:fine){
  .dk-ws-chatcontext{
    flex-basis:220px;min-width:220px;max-width:220px;
    padding-left:14px;padding-right:14px;
  }
}
@media (min-width:1024px) and (max-width:1199px) and (hover:hover) and (pointer:fine){
  .dk-ws-rightcol{
    width:min(460px,92vw)!important;min-width:0!important;max-width:92vw!important;
    flex-basis:min(460px,92vw)!important;
  }
}

/* ============================================================
   Desktop transparent utility headers, revision 3
   日期／待辦與 Spotify 標題不使用霧面底；Spotify 內容改由獨立區域捲動。
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  /* 日期區必須透出場景背景，因此把原本施加在整個右欄的材質下移到分頁內容。 */
  .dk-ws-rightcol{
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:inset 1px 0 var(--dk-luminous)!important;
  }
  .dk-ws-rightcol>.dk-context-today,
  .dk-ws-rightcol>.dk-context-today .dk-today-card{
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  .dk-ws-rightcol>.dk-ws-righttabs{
    background:linear-gradient(180deg,var(--dk-side-material),color-mix(in srgb,var(--dk-side-material) 82%,transparent))!important;
    backdrop-filter:blur(18px) saturate(.88);
    -webkit-backdrop-filter:blur(18px) saturate(.88);
  }
  .dk-ws-rightcol>.dk-ws-rightpane:not([data-rightpane="music"]){
    background:linear-gradient(180deg,var(--dk-side-material),color-mix(in srgb,var(--dk-side-material) 78%,transparent))!important;
    backdrop-filter:blur(18px) saturate(.88);
    -webkit-backdrop-filter:blur(18px) saturate(.88);
  }

  /* 標題列與內容成為相鄰區域；只讓內容區捲動，文字不會再穿過標題。 */
  .dk-ws-rightpane[data-rightpane="music"]{
    overflow:hidden!important;
    padding:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .dk-spotify-workspace{
    width:100%;height:100%;min-height:0!important;
    display:flex!important;flex-direction:column;
    padding:0!important;overflow:hidden!important;
    background:transparent!important;
  }
  .dk-spotify-workspace .dk-spotify-pagehead{
    position:relative!important;top:auto!important;z-index:2;
    flex:0 0 auto;min-height:0!important;
    margin:0!important;padding:24px 30px 22px!important;
    overflow:visible!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
    border-bottom:1px solid var(--dk-soft-line);
  }
  .dk-spotify-workspace .dk-spotify-pagehead::before{content:none!important}
  .dk-spotify-workspace .dk-spotify-pagehead>div{
    min-width:0;overflow:visible!important;
  }
  .dk-spotify-workspace .dk-spotify-pagehead p{
    max-width:none!important;margin-top:7px!important;
    white-space:normal;overflow:visible;
  }
  .dk-spotify-scrollbody{
    flex:1;min-height:0;
    overflow-y:auto;overflow-x:hidden;
    box-sizing:border-box;padding:0 30px 80px;
    background:linear-gradient(180deg,var(--dk-side-material),color-mix(in srgb,var(--dk-side-material) 76%,transparent));
    backdrop-filter:blur(18px) saturate(.88);
    -webkit-backdrop-filter:blur(18px) saturate(.88);
    scrollbar-width:thin;scrollbar-color:var(--dk-soft-line) transparent;
  }

  /* 次要操作與既有 ghost 按鈕相同：靜止時低彩度，互動時才提高對比。 */
  .dk-spotify-connect,
  .dk-spotify-device-switch-toggle,
  [data-spotify-action="library-play"],
  [data-curator-action="generate"],
  [data-curator-action="sync"]{
    color:var(--faint)!important;
    background:transparent!important;
    border-color:var(--dk-strong-line)!important;
  }
  .dk-spotify-connect:hover,
  .dk-spotify-connect:focus-visible,
  .dk-spotify-device-switch-toggle:hover,
  .dk-spotify-device-switch-toggle:focus-visible,
  [data-spotify-action="library-play"]:hover,
  [data-spotify-action="library-play"]:focus-visible{
    color:var(--text)!important;
    border-color:var(--dk-tab-active)!important;
  }
  /* 「請{{char}}安排歌單」「將歌單新增至 Spotify」:上面的共用 hover/focus
     光框系統(:is(...,.pill,...):is(:hover,:focus-visible))會疊一層 9%
     強調色的漸層底,這兩顆刻意蓋掉那層底,改成文字直接染「已選取」色+
     呼吸光暈,跟其餘清單/分頁項目同一套語彙。 */
  [data-curator-action="generate"]:hover,
  [data-curator-action="generate"]:focus-visible,
  [data-curator-action="sync"]:hover,
  [data-curator-action="sync"]:focus-visible{
    color:var(--dk-tab-active)!important;
    border-color:var(--dk-tab-active)!important;
    background:transparent!important;
    box-shadow:none!important;
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }
}

/* ============================================================
   Desktop frosted side panes and expanded mini player, revision 4
   右欄回復輕量霧面材質，且讓 Spotify 內容與左欄理由完整可見。
   ============================================================ */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .dk-ws-rightcol{
    --dk-right-frost:color-mix(in srgb,var(--surface2) 24%,transparent);
    --dk-right-frost-strong:color-mix(in srgb,var(--surface2) 31%,transparent);
  }

  /* 社群／音樂分頁列共用同一層純霧面，不再使用接近黑色的 side material。 */
  .dk-ws-rightcol>.dk-ws-righttabs{
    background:var(--dk-right-frost-strong)!important;
    backdrop-filter:blur(22px) saturate(.76)!important;
    -webkit-backdrop-filter:blur(22px) saturate(.76)!important;
    box-shadow:0 1px var(--dk-soft-line)!important;
  }

  /* 社群等右欄內文保持整段霧面，內容較短時也會鋪滿剩餘高度。 */
  .dk-ws-rightcol>.dk-ws-rightpane:not([data-rightpane="music"]){
    min-height:0;
    background:var(--dk-right-frost)!important;
    backdrop-filter:blur(22px) saturate(.76)!important;
    -webkit-backdrop-filter:blur(22px) saturate(.76)!important;
  }

  /* 音樂內容由自身捲動，但背景必須是一整片，不再在漸層末端消失。 */
  .dk-ws-rightpane[data-rightpane="music"]{
    background:var(--dk-right-frost)!important;
    backdrop-filter:blur(22px) saturate(.76)!important;
    -webkit-backdrop-filter:blur(22px) saturate(.76)!important;
  }
  .dk-spotify-workspace .dk-spotify-pagehead{
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .dk-spotify-scrollbody{
    min-height:0;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* 左欄播放器增加可用高度；逐曲理由改為正常換行，不再被跑馬燈裁掉。 */
  .dk-spotify-mini{
    flex:0 0 clamp(360px,38vh,420px)!important;
    min-height:360px!important;
    max-height:46vh;
    overflow-y:auto;overflow-x:hidden;
    scrollbar-width:thin;scrollbar-color:var(--dk-soft-line) transparent;
  }
  .dk-spotify-mini-reason{
    min-height:52px;
    overflow:visible;
  }
  .dk-spotify-mini-reason .dk-reason-marquee{
    min-height:1.7em;
    overflow:visible!important;
    white-space:normal!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
  }
  .dk-spotify-mini-reason .dk-reason-track{
    display:block!important;width:auto!important;
    white-space:normal!important;
    transform:none!important;animation:none!important;
    line-height:1.65;
  }
  .dk-spotify-mini-reason .dk-reason-track span{
    display:block;white-space:normal!important;
  }
  .dk-spotify-mini-reason .dk-reason-track span[aria-hidden="true"]{display:none}

  /* ============================================================
     月金琉璃(Moonlit Gold Glaze)第一階段:三層材質、鑲嵌感操作物件、
     對話墨霧與雙色引線、聊天輸入「金屬印」、頭像雙環。
     全部走 var(--accent)/var(--text) 的 color-mix,不寫死金色 hex——
     sumi(墨金)主題下自然讀成香檳金,其他主題(shiro/neon/hoshi)則各自
     用自己的主題色呈現同一套材質語彙,不破壞既有四主題系統。放在檔案
     最後,靠來源順序蓋過前面幾輪的材質/氣泡規則。
     ============================================================ */

  /* ---- 三層材質:中央近乎全透明,只留文字頂端一小片光暈;側欄維持穩定
     煙燻霧面,頂緣加一道珍珠高光線,像玻璃罐口反光。 ---- */
  .dk-ws-maincol,.dk-ws-thread{
    background:
      radial-gradient(ellipse 60% 40% at 50% 4%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 70%),
      color-mix(in srgb,var(--bg) 2%,transparent)!important;
  }
  .dk-ws-railcol,.dk-ws-rightcol{position:relative}
  .dk-ws-railcol::before,.dk-ws-rightcol::before{
    content:'';position:absolute;top:0;left:14%;right:14%;height:1px;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 45%,transparent) 45%,color-mix(in srgb,var(--accent) 55%,transparent) 55%,transparent);
    opacity:.55;
  }

  /* ---- 分界光縫:欄與欄之間不只是一條硬邊線,邊界內側疊一圈約 28px 寬、
     由主題色暈開又迅速消失的柔光,近看讀得出分區,遠看融進材質,不新增
     任何 DOM 或整片遮罩。左欄前面幾輪已把 box-shadow 收成 none(見「avatar
     -first rail」段),這裡只補邊界光,不重新引入整欄材質背景。暈開的那圈
     刻意比邊緣那條 1px 線更淡,避免整條邊界看起來像一根實心色棒。 ---- */
  .dk-ws-railcol{
    box-shadow:
      inset -1px 0 var(--dk-luminous),
      inset -28px 0 40px -34px color-mix(in srgb,var(--dk-luminous) 62%,transparent)!important;
  }
  .dk-ws-rightcol{
    box-shadow:
      inset 1px 0 var(--dk-luminous),
      inset 28px 0 40px -34px color-mix(in srgb,var(--dk-luminous) 62%,transparent)!important;
  }
  /* 邊界的「閃動」層:平時不存在,滑鼠移進該欄才觸發一小段高光沿邊界
     掃過一次,不是常駐閃爍的霓虹燈條。 */
  @keyframes dk-seam-glint{
    from{background-position:0 -90%}
    to{background-position:0 190%}
  }
  .dk-ws-railcol::after,.dk-ws-rightcol::after{
    content:'';position:absolute;top:0;bottom:0;width:2px;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,transparent,var(--dk-shimmer-line) 46%,transparent 64%);
    background-size:100% 260%;
    background-position:0 -90%;
    opacity:0;
  }
  .dk-ws-railcol:hover::after,.dk-ws-rightcol:hover::after{
    opacity:.5;
    animation:dk-seam-glint 1.3s ease;
  }
  .dk-ws-railcol::after{right:-1px}
  .dk-ws-rightcol::after{left:-1px}

  /* 左欄「PERSONA／角色」標題同樣是 hover 才閃一次的純文字效果,不掛底色塊。 */
  .dk-ws-rail-title:hover span,
  .dk-ws-rail-title:focus-within span{
    background-image:linear-gradient(100deg,var(--dk-title-ink) 30%,var(--dk-shimmer-line) 50%,var(--dk-title-ink) 70%);
    background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:dk-text-glint .9s ease;
  }

  /* ---- 鑲嵌感:主要動作(pill.hot/sendbtn)疊一層獨立的內側高光 pseudo,
     不動原本 box-shadow(避免跟既有的 dk-luminous-breathe 動畫互相蓋掉)。 ---- */
  :is(.pill.hot,.sendbtn){position:relative}
  :is(.pill.hot,.sendbtn)::before{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb,#fff 32%,transparent),
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);
    opacity:.85;
  }

  /* ---- 角色頭像雙環:外圈金屬色、內圈角色專屬色,選中時外圈緩慢流轉
     亮度,不整列反白。 ---- */
  .dk-char-avatar{
    box-shadow:
      0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),
      0 0 0 3px color-mix(in srgb,var(--bg) 60%,transparent),
      0 0 0 4px color-mix(in srgb,var(--dk-avatar-ring) 26%,transparent)!important;
  }
  .dk-char-row.on .dk-char-avatar{
    box-shadow:
      0 0 0 1px color-mix(in srgb,var(--accent) 70%,transparent),
      0 0 0 3px color-mix(in srgb,var(--bg) 60%,transparent),
      0 0 0 4px var(--dk-avatar-ring),
      0 0 18px color-mix(in srgb,var(--dk-avatar-ring) 55%,transparent)!important;
    animation:dk-avatar-shimmer 5.5s ease-in-out infinite;
  }
  @keyframes dk-avatar-shimmer{
    0%,100%{filter:brightness(1)}
    50%{filter:brightness(1.16)}
  }

  /* ---- 對話「墨霧」:拿掉硬邊框與方塊陰影,改成柔和放射狀暈染,暈染中心
     置中(不再偏向單側);左右兩側都留一條細引線分辨說話者——角色金線、
     使用者珍珠線(霜白主題反轉成深色,避免亮線疊在亮背景上看不見)——
     取代整塊底色當唯一的身分線索。閱讀寬度收窄,長段文字不橫向拉太寬。 ---- */
  .dk-ws-thread #msgs .bubble,
  .dk-ws-thread #msgs .lbubble{
    max-width:min(600px,68%);
    border-radius:18px;
    box-shadow:none!important;
  }
  .dk-ws-thread #msgs .msg.ai .bubble,
  .dk-ws-thread #msgs .lwrap:not(.lwrap-me) .lbubble{
    background:radial-gradient(ellipse 140% 130% at 50% 50%,color-mix(in srgb,var(--surface) 26%,transparent),transparent 72%)!important;
    border-left:1.5px solid color-mix(in srgb,var(--accent) 38%,transparent)!important;
    border-right:1.5px solid color-mix(in srgb,var(--accent) 38%,transparent)!important;
  }
  .dk-ws-thread #msgs .msg.me .bubble,
  .dk-ws-thread #msgs .lwrap-me .lbubble{
    background:radial-gradient(ellipse 140% 130% at 50% 50%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 72%)!important;
    border-left:1.5px solid color-mix(in srgb,#fff 45%,transparent)!important;
    border-right:1.5px solid color-mix(in srgb,#fff 45%,transparent)!important;
  }
  [data-theme="shiro"] .dk-ws-thread #msgs .msg.me .bubble,
  [data-theme="shiro"] .dk-ws-thread #msgs .lwrap-me .lbubble{
    border-left-color:color-mix(in srgb,#000 20%,transparent)!important;
    border-right-color:color-mix(in srgb,#000 20%,transparent)!important;
  }

  /* ---- 聊天輸入「金屬印」:內縮雙層細框,focus 時邊框浮出一圈流動金光;
     送出鍵疊一圈鑲金印章感,按下時像蓋章下壓。 ---- */
  .dk-ws-thread #chatroom>.chat-input{
    position:relative;
    box-shadow:
      inset 0 0 0 3px color-mix(in srgb,var(--bg) 45%,transparent),
      inset 0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),
      0 16px 42px rgba(0,0,0,.2)!important;
  }
  .dk-ws-thread #chatroom>.chat-input::after{
    content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
    padding:1px;
    background:linear-gradient(120deg,transparent,color-mix(in srgb,var(--accent) 65%,transparent),transparent);
    background-size:220% 220%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .25s ease;
  }
  .dk-ws-thread #chatroom>.chat-input:focus-within::after{
    opacity:1;animation:dk-input-flow 2.6s linear infinite;
  }
  @keyframes dk-input-flow{
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
  }
  .dk-ws-thread #chatroom>.chat-input .sendbtn{
    box-shadow:
      inset 0 0 0 1.5px color-mix(in srgb,var(--accent-ink) 26%,transparent),
      0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),
      0 7px 18px color-mix(in srgb,var(--accent) 24%,transparent)!important;
    transition:transform .12s ease,box-shadow .12s ease!important;
  }
  .dk-ws-thread #chatroom>.chat-input .sendbtn:active{
    transform:scale(.88)!important;
    box-shadow:
      inset 0 2px 4px color-mix(in srgb,#000 30%,transparent),
      0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)!important;
  }

  /* ============================================================
     月金琉璃(Moonlit Gold Glaze)第二階段:分頁選中標記、讀書會「高級刊物」
     質感、以及最後一層珠光/動態收尾。同樣全走 var(--accent)/var(--text)
     的 color-mix,放在檔案最後蓋過前面規則。
     ============================================================ */

  /* ---- 分頁選中標記:選中文字染上香檳金,前面補一顆呼吸的小圓點,
     取代純粹靠底線判斷選中的作法。 ---- */
  .dk-ws-centertabs [role="tab"],.dk-ws-righttabs [role="tab"],.dk-bc-tabbar [role="tab"]{
    position:relative;transition:color .22s ease,padding-left .22s ease;
  }
  .dk-ws-centertabs [role="tab"].on,
  .dk-ws-righttabs [role="tab"].on,
  .dk-bc-tabbar [role="tab"][aria-selected="true"]{
    color:color-mix(in srgb,var(--accent) 62%,var(--text))!important;
  }
  .dk-ws-centertabs [role="tab"].on::before,
  .dk-ws-righttabs [role="tab"].on::before,
  .dk-bc-tabbar [role="tab"][aria-selected="true"]::before{
    content:'';position:absolute;left:-11px;top:50%;width:4px;height:4px;border-radius:50%;
    transform:translateY(-50%);
    background:var(--accent);
    box-shadow:0 0 7px color-mix(in srgb,var(--accent) 70%,transparent);
    animation:dk-avatar-shimmer 5.5s ease-in-out infinite;
  }

  /* ---- 讀書會「高級刊物」質感 ---- */
  .bcp-dashboard::before{
    border-radius:24px;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),
      inset 0 0 44px color-mix(in srgb,var(--accent) 4%,transparent)!important;
  }
  .bcp-manager-intro>small,.bcp-dashboard-copy>small,.bcp-dashboard-recent>small,
  .bcp-sec-sub,.bcp-form-heading small{
    position:relative;padding-left:18px;color:color-mix(in srgb,var(--accent) 55%,var(--dk-tab-muted))!important;
  }
  .bcp-manager-intro>small::before,.bcp-dashboard-copy>small::before,.bcp-dashboard-recent>small::before,
  .bcp-sec-sub::before,.bcp-form-heading small::before{
    content:'';position:absolute;left:0;top:50%;width:12px;height:1px;transform:translateY(-50%);
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,transparent),transparent);
  }
  .bcp-dashboard-copy h2{
    background:linear-gradient(100deg,var(--text) 40%,color-mix(in srgb,var(--accent) 65%,var(--text)) 52%,var(--text) 64%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    background-size:240% 100%;background-position:0% 0%;
  }
  .bcp-book-spine{
    background:linear-gradient(180deg,
      color-mix(in srgb,#fff 30%,var(--accent)),
      var(--accent) 40%,
      color-mix(in srgb,#000 22%,var(--accent)) 100%)!important;
    box-shadow:inset -1px 0 0 color-mix(in srgb,#fff 25%,transparent)!important;
  }
  .bcp-book-spine.ebook{
    background:linear-gradient(180deg,color-mix(in srgb,#fff 18%,var(--faint)),var(--faint))!important;
    box-shadow:none!important;
  }
  .bcp-room-cover{
    position:relative;overflow:hidden;
    background:
      radial-gradient(circle at 30% 22%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),
      var(--surface)!important;
    border-left-width:3px!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent)!important;
  }
  .bcp-room-cover::after{
    content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;
    border-top:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
    border-right:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  }
  .bcp-chip{
    color:color-mix(in srgb,var(--accent) 78%,var(--text))!important;
    border-color:color-mix(in srgb,var(--accent) 45%,transparent)!important;
    background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 80%)!important;
  }
  :is(.bcp-book,.bcp-room,.bcp-manager .bcp-book,.bcp-manager .bcp-room-wrap){
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
  }
  :is(.bcp-book,.bcp-room,.bcp-manager .bcp-book,.bcp-manager .bcp-room-wrap):hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--accent) 30%,transparent)!important;
    box-shadow:0 10px 26px color-mix(in srgb,#000 18%,transparent)!important;
  }
  :is(.bcp-book,.bcp-room,.bcp-manager .bcp-book,.bcp-manager .bcp-room-wrap):hover .bcp-book-title,
  :is(.bcp-book,.bcp-room,.bcp-manager .bcp-book,.bcp-manager .bcp-room-wrap):hover .bcp-room-title{
    color:var(--dk-tab-active);
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }

  /* ---- 珠光/動態收尾:最克制的一層,只在既有金線上偶爾掃過一道極淡珠光。 ---- */
  @keyframes dk-pearl-sweep{
    0%,88%{background-position:-140% 0}
    100%{background-position:240% 0}
  }
  .dk-context-today,.dk-ws-thread #chatroom .chat-head{
    position:relative;overflow:hidden;
  }
  .dk-context-today::after,.dk-ws-thread #chatroom .chat-head::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 55%,transparent) 45%,color-mix(in srgb,var(--accent) 60%,transparent) 55%,transparent);
    background-size:60% 100%;background-repeat:no-repeat;
    animation:dk-pearl-sweep 13s ease-in-out infinite;
    opacity:.5;
  }

  /* ---- 任務邀請卡的「接受」鍵跟著整體桌機語彙變成金色實心填色,跟「下次吧」
     反而不一致(視覺上像是被強制推薦接受);改成跟 .qi-decline 同一種 ghost
     質感,只留 hover 時的細微高光分辨得出可互動。只動這顆按鈕,不影響其他
     .pill.hot(例如聊天送出鍵)。 ---- */
  .qi-accept.pill.hot{
    background:linear-gradient(115deg,var(--dk-glow-fill),transparent 72%)!important;
    color:var(--muted)!important;
    animation:none!important;
  }
  .qi-accept.pill.hot::before{display:none}
  .qi-accept.pill.hot:is(:hover,:focus-visible){color:var(--text)!important}

  /* ---- 長按訊息跳出的表情/引用面板(.reaction-picker)是唯一會被 JS 直接
     appendChild 進 #chatroom 的動態節點;desktop.css 的
     `#chatroom>*{position:relative;z-index:1}`(用來把一般聊天內容墊在
     背景圖層之上)specificity 比 style.css 裡 .reaction-picker 原本的
     position:absolute 高,結果把它從「相對 #chatroom 定位」擠成「佔一般
     文件流位置」,面板整個被推到看不到的地方——長按看起來就像完全沒反應。
     這裡把它跳回 absolute 定位並拉高 z-index,不動原本那條規則(其他直接
     子節點仍需要墊在背景之上)。 ---- */
  .dk-ws-thread #chatroom>.reaction-picker{
    position:absolute!important;
    z-index:30!important;
  }

  /* ---- 貼圇面板(手機/桌機共用,版面樣式在 style.css):桌機另外套一層
     「文字大小」設定的縮放係數(--dk-fs-mult,見 Sumeru 文字縮放),手機沒有
     這個桌機專屬變數,吃 style.css 原本的固定字級即可。 ---- */
  .sticker-picker-tabs button{font-size:calc(11px * var(--dk-fs-mult,1))}
  .sticker-picker-empty{font-size:calc(11px * var(--dk-fs-mult,1))}

  /* ---- 章節導覽 rail 章節過多時撐爆邊界(pre-existing bug,非本輪引入):
     desktop.css 把 .cr-dot 的 min-height 訂在 25px,是給「一般長度」對話
     抓的底線。#chat-rail 用 position:absolute;top:6px;bottom:6px 定位在
     .chat-msgs-wrap 內、justify-content:space-evenly 排開,但 flex 項目
     不會縮到比 min-height 更小——聊很久、章節一多(常見於長期關係),
     25px * 章節數很容易超過 .chat-msgs-wrap 實際高度,整條 rail 就會
     溢出到聊天輸入框甚至畫面外,看起來像「rail 疊到最下面」。這裡用
     :has() 偵測「至少有第 25 個章節」,超過門檻就整體收窄,並把預設
     常駐淡出的標籤改成 hover/focus 才顯示,避免章節多時十幾個標籤同時
     擠在一起互相蓋住。門檻以下(一般長度對話)完全不受影響。 ---- */
  .dk-ws-thread #chatroom:has(#chat-rail .cr-dot:nth-child(25)) #chat-rail .cr-dot{
    min-height:11px;
  }
  .dk-ws-thread #chatroom:has(#chat-rail .cr-dot:nth-child(25)) #chat-rail .cr-dot-mark{
    width:4px;height:4px;
  }
  @media (min-width:1280px){
    .dk-ws-thread #chatroom:has(#chat-rail .cr-dot:nth-child(25)) #chat-rail .cr-dot-label{
      opacity:0;
    }
    .dk-ws-thread #chatroom:has(#chat-rail .cr-dot:nth-child(25)) #chat-rail .cr-dot:hover .cr-dot-label,
    .dk-ws-thread #chatroom:has(#chat-rail .cr-dot:nth-child(25)) #chat-rail .cr-dot:focus-visible .cr-dot-label,
    .dk-ws-thread #chatroom:has(#chat-rail .cr-dot:nth-child(25)) #chat-rail .cr-dot.focus .cr-dot-label{
      opacity:1;
    }
  }

  /* ---- 「角色音樂工作區」「角色策展室」頁標,比照其他區塊標題套用同一套
     hover 文字閃光——平時維持原本顏色,滑鼠移過去(或鍵盤 focus 進去)才
     觸發一次漸層掃光,不改變原本的字級/字重/選中狀態邏輯,只在 hover 疊加
     文字色效果。 ---- */
  .dk-spotify-pagehead:hover h2,
  .dk-spotify-pagehead:focus-within h2,
  .dk-curator>header:hover b,
  .dk-curator>header:focus-within b{
    background-image:linear-gradient(100deg,var(--dk-title-ink) 30%,var(--dk-shimmer-line) 50%,var(--dk-title-ink) 70%)!important;
    background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;
    animation:dk-text-glint .9s ease;
  }

  /* ---- 「聊天室／圓桌讀書會」(中央分頁)「社群／音樂／私聊」(右欄分頁)——
     滑鼠移過去不要一大塊反白/反色底,改成文字直接染成「已選取」的那個顏色
     (--dk-tab-active,各主題自己的重點色,已經照「暗底配亮字、亮底配暗字」
     調過),再疊一層持續的呼吸光暈(text-shadow 強弱來回),移開滑鼠動畫
     隨 :hover 消失結束,不強行播完一輪。 ---- */
  @keyframes dk-tab-breathe{
    0%,100%{text-shadow:0 0 5px color-mix(in srgb,var(--dk-tab-active) 30%,transparent)}
    50%{text-shadow:0 0 13px color-mix(in srgb,var(--dk-tab-active) 70%,transparent)}
  }
  .dk-ws-centertabs [role="tab"]:hover,
  .dk-ws-centertabs [role="tab"]:focus-visible,
  .dk-ws-righttabs [role="tab"]:hover,
  .dk-ws-righttabs [role="tab"]:focus-visible{
    color:var(--dk-tab-active)!important;
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }

  /* ---- 各處「儲存／新增」按鍵改為強調色文字,不再是實心填色的一大塊
     (mobile 維持原本 .pill.hot 實心樣式不動,這裡只在桌機斷點內覆寫)。
     平時 color:var(--accent),滑鼠移過去/鍵盤 focus 換另一個輔色
     (--dk-tab-active,跟其餘清單/分頁項目同一套「已選取」色)+呼吸光暈,
     用顏色變化取代原本的實心底塊當作互動回饋。
     #cs-av-save(角色頭像/姓名卡)、#cs-bg-save(角色背景圖卡)、
     #as-voice-key-save(API 語音專用金鑰卡)先前漏加進這份清單——沒被這裡
     覆寫,就還停在 .pill.hot 原本的「實心底 + accent-ink 深色字」樣式,
     但桌機底下這幾張卡的底早就是透明的,深色字疊在暗色主題背景上幾乎看
     不見,誤以為按鍵「壞了」。三顆都跟其餘同一份清單的按鍵一樣是同一張
     設定卡片裡的普通「儲存」鍵,補進來才會一致。 ---- */
  #cs-av-save,#cs-bg-save,#as-voice-key-save,
  #cs-status-save,#cs-spotify-save,#cs-basic-save,#cs-voice-save,#cs-between-save,
  #mem-add-btn,#cs-save,#as-save,#bond-new-save,.bce-save,.pf-editor .pfe-save{
    background:transparent!important;
    border-color:color-mix(in srgb,var(--accent) 42%,transparent)!important;
    color:var(--accent)!important;
  }
  #cs-av-save:hover,#cs-av-save:focus-visible,
  #cs-bg-save:hover,#cs-bg-save:focus-visible,
  #as-voice-key-save:hover,#as-voice-key-save:focus-visible,
  #cs-status-save:hover,#cs-status-save:focus-visible,
  #cs-spotify-save:hover,#cs-spotify-save:focus-visible,
  #cs-basic-save:hover,#cs-basic-save:focus-visible,
  #cs-voice-save:hover,#cs-voice-save:focus-visible,
  #cs-between-save:hover,#cs-between-save:focus-visible,
  #mem-add-btn:hover,#mem-add-btn:focus-visible,
  #cs-save:hover,#cs-save:focus-visible,
  #as-save:hover,#as-save:focus-visible,
  #bond-new-save:hover,#bond-new-save:focus-visible,
  .bce-save:hover,.bce-save:focus-visible,
  .pf-editor .pfe-save:hover,.pf-editor .pfe-save:focus-visible{
    color:var(--dk-tab-active)!important;
    border-color:var(--dk-tab-active)!important;
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }

  /* ---- PREVIEW 歌單名稱、歌曲列表的歌曲名稱、右欄「私聊」使用者自己的
     對話文字:比照上面,平常就是強調色(不用等 hover),互動時(歌曲名稱
     本身可點,私聊泡泡跟著滑到訊息列時)才疊呼吸光暈當作輔色反色效果。 ---- */
  .dk-curator-preview>header h3,
  .dk-curator-song b,
  #chatroom[data-presentation="auxiliary"] #msgs .msg.me .bubble,
  #chatroom[data-presentation="auxiliary"] #msgs .lwrap-me .lbubble{
    color:var(--accent)!important;
  }
  .dk-curator-song:hover b,
  .dk-curator-preview>header:hover h3{
    color:var(--dk-tab-active)!important;
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }
  #chatroom[data-presentation="auxiliary"] #msgs .msg.me:hover .bubble,
  #chatroom[data-presentation="auxiliary"] #msgs .lwrap-me:hover .lbubble{
    color:var(--dk-tab-active)!important;
    animation:dk-tab-breathe 1.7s ease-in-out infinite;
  }

  /* ============================================================
     墨金／霜白 桌機標題:比照手機版既有簽名效果,不是通用 hover 閃光。
     手機版 sumi 品牌字／聊天室名稱早就是「深銅→金→亮米白→金→深銅」五段
     漸層 + drop-shadow 暈光、7s 持續流動(見 style.css 的 sumi-shine、
     sumi-head-flow),桌機這裡直接沿用同一套語彙與 keyframes,不重新發明
     一套更淡的版本。霜白則反過來——手機版是靜態柔霧,這裡按需求做成
     持續、緩慢、平穩的「呼吸光」:文字色在原本墨色跟珍珠白之間緩緩來回,
     搭配柔白光暈一起呼吸,比單純疊一層半透明白色鬼影更清楚、也更貼合
     「霜白＝溫柔」的主題性格,同時解決「要 ghost 還是要變色」的取捨——
     兩者都要,用同一個 keyframes 一起做。
     這兩個主題都是「隨時在動」,不需要 hover 才觸發;neon/hoshi 維持前面
     那組通用的 hover-only 文字閃光不變(還沒特別要求要換掉)。 ============ */
  [data-theme="sumi"] .dk-nest-statehead>b,
  [data-theme="sumi"] .dk-ws-chatcontext .dk-nest-now-title b,
  [data-theme="sumi"] .dk-status-model>summary b,
  [data-theme="sumi"] .dk-cal-agenda-head b,
  [data-theme="sumi"] .dk-ws-rail-title span,
  [data-theme="sumi"] .dk-ws-centertabs [role="tab"],
  [data-theme="sumi"] .dk-ws-righttabs [role="tab"],
  [data-theme="sumi"] .dk-spotify-pagehead h2,
  [data-theme="sumi"] .dk-curator>header b{
    background-image:linear-gradient(105deg,#8A6B3F 0%,#E8C87E 30%,#FFF3D6 50%,#E8C87E 70%,#8A6B3F 100%)!important;
    background-size:220% 100%!important;
    -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
    filter:drop-shadow(0 0 8px rgba(200,164,110,.3));
    animation:sumi-shine 7s ease-in-out infinite!important;
  }
  [data-theme="sumi"] .dk-ws-railcol::after,
  [data-theme="sumi"] .dk-ws-rightcol::after{
    opacity:1!important;
    background:linear-gradient(180deg,rgba(201,168,106,.15) 0%,rgba(255,243,214,.95) 15%,rgba(201,168,106,.15) 30%,rgba(201,168,106,.15) 100%);
    background-size:100% 260%;
    animation:sumi-seam-flow 6s linear infinite!important;
  }
  @keyframes sumi-seam-flow{
    from{background-position:0 0}
    to{background-position:0 -160%}
  }

  /* 一開始想直接對 color 做 keyframes,但這個元素的 color 在別處會被其他
     規則用 !important 設定(例如分頁 .on 選中態),而 CSS 的 cascade 順序
     是「!important 一般宣告」蓋過「animation」,直接動畫 color 會被凍結、
     完全不會動。改成跟墨金同一招:漸層文字 + 動畫只動 background-position
     (這個屬性沒有人跟你搶!important),兩段式來回(ease-in-out alternate)
     就是「呼吸」——亮點緩緩掃進文字、停一下、再緩緩退出,同時搭配
     drop-shadow 暈光跟著一起亮暗,等於同時做到「類似 ghost 的柔光穿透」
     跟「色彩隨呼吸變化」兩件事,不用二選一。 */
  @keyframes shiro-title-breathe{
    from{background-position:-45% 0;filter:drop-shadow(0 0 0 rgba(255,251,240,0))}
    to{background-position:45% 0;filter:drop-shadow(0 0 11px rgba(255,251,240,.7))}
  }
  [data-theme="shiro"] .dk-nest-statehead>b,
  [data-theme="shiro"] .dk-ws-chatcontext .dk-nest-now-title b,
  [data-theme="shiro"] .dk-status-model>summary b,
  [data-theme="shiro"] .dk-cal-agenda-head b,
  [data-theme="shiro"] .dk-ws-rail-title span,
  [data-theme="shiro"] .dk-ws-centertabs [role="tab"],
  [data-theme="shiro"] .dk-ws-righttabs [role="tab"],
  [data-theme="shiro"] .dk-spotify-pagehead h2,
  [data-theme="shiro"] .dk-curator>header b{
    background-image:linear-gradient(105deg,var(--dk-title-ink) 0%,var(--dk-title-ink) 33%,#FFFDF7 50%,var(--dk-title-ink) 67%,var(--dk-title-ink) 100%)!important;
    background-size:220% 100%!important;
    -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
    animation:shiro-title-breathe 4.6s ease-in-out infinite alternate!important;
  }
  [data-theme="shiro"] .dk-ws-railcol::after,
  [data-theme="shiro"] .dk-ws-rightcol::after{
    opacity:1!important;
    background:none!important;
    box-shadow:0 0 0 rgba(255,251,240,0);
    animation:shiro-seam-breathe 4.6s ease-in-out infinite alternate!important;
  }
  @keyframes shiro-seam-breathe{
    from{box-shadow:inset 0 0 0 rgba(255,251,240,0)}
    to{box-shadow:0 0 14px 1px rgba(255,251,240,.55)}
  }
}