/* 聊天侧边栏「柳绿更带朝烟」：斜角晕染底、两条晨雾竖框、缠框花藤、月牙流苏、停在框线上的蝴蝶；
   菜单分左右两列，细线指向中间。所有颜色取皮肤变量，花藤/框/蝴蝶由 chat-sidebar.js 按皮肤调色。 */
@font-face { font-family: "CS WenKai Title"; font-weight: 300; font-display: swap; src: url("assets/sidebar/title-wenkai.woff2") format("woff2"); }
@font-face { font-family: "CS Serif Title"; font-weight: 300; font-display: swap; src: url("assets/sidebar/title-serif.woff2") format("woff2"); }

.chat-sidebar.cs {
  --cs-bg: var(--nc-bg, var(--bg, #fbf3f5));
  --cs-soft: var(--nc-accent-soft, #f6dde4);
  --cs-accent: var(--nc-accent, #d88aa1);
  --cs-ink: var(--nc-text, var(--text, #2f2a2d));
  --cs-ink-2: var(--nc-muted, color-mix(in srgb, var(--cs-ink) 60%, transparent));
  --cs-ink-3: var(--nc-faint, color-mix(in srgb, var(--cs-ink) 40%, transparent));
  --cs-seal: color-mix(in srgb, var(--cs-accent) 40%, #b03a3f);
  padding: 0;
  background: var(--cs-bg);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-left: 1px solid color-mix(in srgb, var(--cs-ink) 14%, transparent);
  overflow-x: hidden;
}
html[data-global-skin] .chat-sidebar.cs { background: var(--cs-bg); border-color: color-mix(in srgb, var(--cs-ink) 14%, transparent); }

.cs-canvas { position: relative; min-height: max(100%, 820px); isolation: isolate; overflow: hidden; }
.cs-canvas > span { position: absolute; pointer-events: none; }

.cs-wash { z-index: 0; inset: 0;
  background:
    radial-gradient(ellipse 80% 45% at 100% 0%, color-mix(in srgb, var(--cs-accent) 50%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 45% at 0% 100%, color-mix(in srgb, var(--cs-accent) 45%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--cs-soft) 60%, var(--cs-bg)) 0%, var(--cs-bg) 50%, color-mix(in srgb, var(--cs-soft) 70%, var(--cs-bg)) 100%); }

.cs-strip { z-index: 0; width: 36px; overflow: hidden; background: var(--cs-mist, color-mix(in srgb, var(--cs-soft) 70%, #fff)) center / cover no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); }
.cs-strip::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.6); outline: 1px solid rgba(255,255,255,.25); outline-offset: -4px; }
.cs-s1 { left: calc(50% - 40px); top: 79px; height: 430px; background-position: center top; transform: scaleY(-1); filter: contrast(.8) brightness(1.08) saturate(1.2); }
.cs-s2 { left: calc(50% + 4px); top: 187px; height: 470px; filter: contrast(.82) brightness(1.14) saturate(1.2); }

.cs-moon { z-index: 1; left: calc(50% - 76px); top: 37px; width: 100px; height: 260px; background: url("assets/sidebar/moon.webp") center / contain no-repeat; }

.cs-vine { left: calc(50% - 22px); top: 137px; width: 88px; height: 560px; background: var(--cs-vine) center / contain no-repeat; }
.cs-vine.back { z-index: 0; opacity: .55; }
.cs-vine.front { z-index: 1; -webkit-mask: repeating-linear-gradient(180deg, #000 0 70px, transparent 86px 150px, #000 166px 236px); mask: repeating-linear-gradient(180deg, #000 0 70px, transparent 86px 150px, #000 166px 236px); }

.cs-bf { z-index: 2; left: calc(50% - 86px); top: 423px; width: 76px; aspect-ratio: var(--cs-bf-ratio, 320 / 221); transform: rotate(-18deg); background: var(--cs-bf) center / contain no-repeat; animation: cs-bf-float 5.5s ease-in-out infinite; }
@keyframes cs-bf-float { 0%, 100% { translate: 0 0; } 50% { translate: -3px -6px; } }

.cs-head { position: absolute; z-index: 1; right: 24px; top: max(74px, calc(env(safe-area-inset-top) + 30px)); display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 12px; margin: 0; }
.cs-head p { margin: 0; writing-mode: vertical-rl; }
.cs-head .cs-big { font: 300 34px/1 "CS WenKai Title", var(--font-cn, serif); letter-spacing: .16em; color: var(--cs-ink); padding-top: 64px; }
.cs-head .cs-small { font: 300 13px/1 "CS Serif Title", var(--font-cn, serif); letter-spacing: .5em; color: var(--cs-ink-2); padding: 2px 0 0 8px; border-left: 1px solid color-mix(in srgb, var(--cs-accent) 55%, transparent); }
.cs-head .cs-en { font: italic 400 10px/1 var(--font-en, Georgia, serif); letter-spacing: .14em; color: var(--cs-ink-3); padding-top: 150px; }

.cs-col { position: absolute; z-index: 3; display: grid; gap: 26px; width: calc(50% - 62px); }
.cs-left { left: 18px; top: 101px; }
.cs-right { right: 16px; top: 373px; }
.cs-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: flex-end; gap: 8px; -webkit-tap-highlight-color: transparent; }
.cs-right .cs-item { flex-direction: row-reverse; }
.cs-left .cs-item:nth-child(even) { margin-left: 8px; }
.cs-right .cs-item:nth-child(even) { margin-right: 8px; }
.cs-t { display: grid; gap: 6px; flex: none; }
.cs-right .cs-t { text-align: right; }
.cs-t small { font: 500 8px/1 var(--font-en, Georgia, serif); letter-spacing: .1em; text-transform: uppercase; color: var(--cs-ink-3); }
.cs-t b { font: 400 16px/1 var(--font-cn, serif); letter-spacing: .26em; color: var(--cs-ink); transition: color .16s ease; }
.cs-right .cs-t b { letter-spacing: .3em; margin-right: -.3em; }
.cs-ld { flex: 1; height: 1px; margin-bottom: 7px; }
.cs-left .cs-ld { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cs-ink-3) 80%, transparent)); }
.cs-right .cs-ld { background: linear-gradient(90deg, color-mix(in srgb, var(--cs-ink-3) 80%, transparent), transparent); }
.cs-item:active .cs-t b, .cs-item:focus-visible .cs-t b { color: var(--cs-seal); }
.cs-left .cs-item:active .cs-ld, .cs-left .cs-item:focus-visible .cs-ld { background: linear-gradient(90deg, transparent, var(--cs-seal)); }
.cs-right .cs-item:active .cs-ld, .cs-right .cs-item:focus-visible .cs-ld { background: linear-gradient(90deg, var(--cs-seal), transparent); }
.cs-item:focus-visible { outline: 1px solid var(--cs-seal); outline-offset: 3px; }
@media (hover: hover) { .cs-item:hover .cs-t b { color: var(--cs-seal); } }
@media (prefers-reduced-motion: reduce) { .cs-bf { animation: none; } }