/* Atelier: shared craft layer, loaded after night-theme.css and before theme-soft-anime.css.
   Structure and motion are shared; colours for the moonlit theme are scoped to it.
   Presentation only: no audio, session or layout logic depends on anything here. */

/* ---------- Type ---------- */
:root{
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
  --serif-jp:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif SC","Songti SC",serif;
  --sans:"Noto Sans SC","Noto Sans JP","Microsoft YaHei UI","PingFang SC","Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}
body{font-family:var(--sans);text-rendering:optimizeLegibility;font-kerning:normal;isolation:isolate}
h1,.brand>span:last-child,.art-caption h2,.companion-mini h2,.outline-intro>p:first-child,.chapter-card .number,.theme-info strong{font-family:var(--serif)}
.transcript-row:not(.user) p,.subtitle-area>p{font-family:var(--serif-jp);letter-spacing:.015em}
.page-heading h1{font-size:clamp(27px,2.2vw,36px);font-weight:600;letter-spacing:.08em;line-height:1.38}
.brand{letter-spacing:.3em}
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';flex:0 0 26px;height:1px;background:currentColor;opacity:.55}

/* ---------- Sky (body::before, from the theme) and atmosphere (body::after) ---------- */
body::before{z-index:-2}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1}
[data-theme="refined-moonlit"] body::after{
  background:
    radial-gradient(ellipse 80% 60% at 72% -8%,#c9b8e021,transparent 62%),
    radial-gradient(ellipse 70% 55% at 0% 100%,#8fb3c41c,transparent 60%),
    radial-gradient(ellipse 120% 95% at 50% 45%,transparent 58%,#060d1c99 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Page entrance: one visible view, eased in. Only opacity/transform, no filters. ---------- */
@keyframes atelier-page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes atelier-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
body[data-motion=gentle] .page:not([hidden]){animation:atelier-page-in .55s var(--ease-out) both}
body[data-motion=gentle] .page:not([hidden]) :is(.home-grid,.settings-grid,.persona-layout,.connection-layout,.chapter-list)>*{animation:atelier-rise .8s var(--ease-out) both}
body[data-motion=gentle] .page:not([hidden]) :is(.home-grid,.settings-grid,.persona-layout,.connection-layout,.chapter-list)>:nth-child(2){animation-delay:.08s}
body[data-motion=gentle] .page:not([hidden]) :is(.home-grid,.settings-grid,.persona-layout,.connection-layout,.chapter-list)>:nth-child(n+3){animation-delay:.14s}

/* Theme switch: colours cross-fade instead of snapping. */
html.theme-transitioning body,html.theme-transitioning body *{transition:background-color .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease!important}

/* ---------- Shared structure (both themes) ---------- */
.sidebar,.topbar,#mini-call,#toast{backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)}
.topbar{background:transparent}
nav a{position:relative;transition:background .3s ease,color .3s ease}
nav a::before{content:'';position:absolute;left:-1px;top:50%;width:2px;height:0;border-radius:2px;transform:translateY(-50%);transition:height .35s var(--ease-out);background:var(--accent)}
nav a.active::before{height:22px;box-shadow:0 0 12px var(--accent)}
.soft-card,.chapter-card,.reading-paper,.call-list-panel,.raw-panel{backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}
.soft-card{border-radius:20px}
.hero-art{border-radius:24px}
.hero-art::after{content:'';position:absolute;inset:10px;border-radius:17px;border:1px solid #ffffff2b;pointer-events:none;z-index:2}
.primary{position:relative;overflow:hidden;transition:transform .25s var(--ease-out),box-shadow .3s ease,background .3s ease}
.primary::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff70 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s var(--ease-out);pointer-events:none}
.primary:hover:not(:disabled)::before{transform:translateX(120%)}
.primary:hover:not(:disabled){transform:translateY(-1px)}
.start-button{padding:18px 24px;border-radius:16px;font-size:15px;letter-spacing:.32em}
.call-actions b{transition:transform .3s var(--ease-out),background .3s ease,border-color .3s ease,box-shadow .3s ease}
.call-actions button:hover:not(:disabled) b,.call-actions .button:hover b{transform:translateY(-2px)}
:is(button,a,summary,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Moonlit motes 5–8 (night-theme positions the first four). */
.night-sparks i:nth-child(5){left:34%;top:18%;animation-delay:-11s;width:2px;height:2px}
.night-sparks i:nth-child(6){left:66%;top:72%;animation-delay:-6s}
.night-sparks i:nth-child(7){left:48%;top:44%;animation-delay:-21s;width:2px;height:2px}
.night-sparks i:nth-child(8){left:7%;top:80%;animation-delay:-14s}
.anime-petals,.anime-sparkles{display:none}

/* Both themes use the shared presence heading, without a duplicate subtitle name. */
.adv-name{display:none}

/* Theme swatches in Settings: miniature scenes, no images. */
.theme-swatch{position:relative;height:132px;border-radius:12px 12px 0 0;overflow:hidden}
.theme-swatch i,.theme-swatch b{position:absolute;display:block}
.theme-swatch[data-swatch="refined-moonlit"]{background:radial-gradient(ellipse 70% 60% at 78% 18%,#c9b8e044,transparent 60%),linear-gradient(180deg,#0f1a2e,#1f3150 62%,#2a3c5b)}
.theme-swatch[data-swatch="refined-moonlit"] i{right:22%;top:22%;width:30px;height:30px;border-radius:50%;box-shadow:-7px 4px 0 0 #efe4d2;filter:drop-shadow(0 0 10px #efe4d299)}
.theme-swatch[data-swatch="refined-moonlit"] b{width:2px;height:2px;border-radius:50%;background:#e8eefc;box-shadow:0 0 6px #e8eefc}
.theme-swatch[data-swatch="refined-moonlit"] b:nth-of-type(1){left:18%;top:30%}
.theme-swatch[data-swatch="refined-moonlit"] b:nth-of-type(2){left:42%;top:16%}
.theme-swatch[data-swatch="refined-moonlit"] b:nth-of-type(3){left:30%;top:58%}
.theme-swatch[data-swatch="refined-moonlit"]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#3b4f73,#1b2a44);opacity:.85}
.theme-swatch[data-swatch="soft-anime"]{background:radial-gradient(ellipse 55% 45% at 70% 78%,#ffe2c9,transparent 70%),linear-gradient(180deg,#b9b6e6 0%,#e7c3dc 48%,#ffd9cf 78%,#fde9df)}
.theme-swatch[data-swatch="soft-anime"] i{left:62%;bottom:20%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#fff8ef,#ffd7c2 70%);box-shadow:0 0 30px 10px #ffe1ccaa}
.theme-swatch[data-swatch="soft-anime"] b{width:9px;height:6px;border-radius:150% 0 150% 0;background:linear-gradient(135deg,#ffd1e2,#f3a5c3)}
.theme-swatch[data-swatch="soft-anime"] b:nth-of-type(1){left:20%;top:26%;transform:rotate(25deg)}
.theme-swatch[data-swatch="soft-anime"] b:nth-of-type(2){left:38%;top:52%;transform:rotate(-30deg)}
.theme-swatch[data-swatch="soft-anime"] b:nth-of-type(3){left:82%;top:30%;transform:rotate(60deg)}
.theme-preview{background:var(--panel)}
.theme-info strong{font-size:16px;letter-spacing:.12em}

/* ---------- Moonlit: refinements over night-theme.css ---------- */
[data-theme="refined-moonlit"] body{background:linear-gradient(180deg,#0a0e14 0%,#0d1218 35%,#10151d 70%,#131823)}
[data-theme="refined-moonlit"] body::after{background:radial-gradient(ellipse 65% 40% at 50% -15%,#4a7b9c18,transparent 72%),radial-gradient(ellipse 80% 70% at 50% 50%,transparent 55%,#0a0e1488 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="refined-moonlit"] .sidebar{background:linear-gradient(170deg,#1a2230e6,#141d2bd9);border-right-color:#4a7b9c44;box-shadow:4px 0 50px #0a0e1488}
[data-theme="refined-moonlit"] .brand-mark{color:#7ba8c8;text-shadow:0 0 24px #4a7b9caa,0 0 48px #4a7b9c44}
[data-theme="refined-moonlit"] nav a{color:#8b9bad}
[data-theme="refined-moonlit"] nav a::before{background:linear-gradient(180deg,#7ba8c8,#5a88b8)}
[data-theme="refined-moonlit"] nav a.active{background:linear-gradient(105deg,#4a7b9c33,#4a7b9c18);color:#d4e2f0;border-color:#4a7b9c55}
[data-theme="refined-moonlit"] nav a:hover{background:#4a7b9c22}
[data-theme="refined-moonlit"] .soft-card,
[data-theme="refined-moonlit"] .chapter-card,
[data-theme="refined-moonlit"] .reading-paper{
  background:linear-gradient(160deg,#1e2836dd,#1a2431cc);
  border-color:#4a7b9c44;
  box-shadow:0 20px 60px #0a0e1466,inset 0 1px 0 #4a7b9c33,inset 0 0 0 1px #4a7b9c1a;
}
[data-theme="refined-moonlit"] .primary{background:linear-gradient(110deg,#4a7b9c,#5a88b8);color:#0a0e14;box-shadow:0 10px 35px #4a7b9c66,0 2px 15px #5a88b844}
[data-theme="refined-moonlit"] .primary:hover:not(:disabled){box-shadow:0 14px 45px #4a7b9c88,0 4px 20px #5a88b855}
[data-theme="refined-moonlit"] .call-room{background:radial-gradient(ellipse 80% 50% at 50% 18%,#2a4a5c33,transparent 70%),linear-gradient(180deg,#151d28,#131a25);box-shadow:0 35px 90px #0a0e1488,inset 0 0 0 1px #4a7b9c33}
[data-theme="refined-moonlit"] .record-halo{background:radial-gradient(circle,#4a7b9c26 18%,#5a88b81a 50%,transparent 71%)}
.call-presence h1{letter-spacing:.42em}
[data-theme="refined-moonlit"] .call-presence h1{text-shadow:0 0 28px #7ba8c866,0 2px 14px #4a7b9c55}
[data-theme="refined-moonlit"] .subtitle-area>p{text-shadow:0 0 24px #4a7b9c66,0 2px 12px #0a0e1444;color:#d4e2f0}
[data-theme="refined-moonlit"] .theme-option input:checked+.theme-preview{border-color:#7ba8c8;box-shadow:0 0 0 4px #4a7b9c3b,0 20px 50px #0a0e1466}

/* ---------- Twilight: visual-novel presentation over soft-anime theme ---------- */
[data-theme="soft-anime"] body{background:linear-gradient(180deg,#f4e8e3 0%,#eeddd8 38%,#e4cdc6 72%,#d8bdb5)}
[data-theme="soft-anime"] body::after{background:radial-gradient(ellipse 70% 45% at 50% -8%,#d9a8b822,transparent 65%),radial-gradient(ellipse 85% 75% at 50% 48%,transparent 58%,#3d323566 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="soft-anime"] .sidebar{background:linear-gradient(165deg,#ffffffd9,#fef8f6e6);border-right-color:#d9a8b855;box-shadow:4px 0 40px #d9a8b828}
[data-theme="soft-anime"] .topbar{box-shadow:0 1px 0 #d9a8b824,0 12px 36px #d9a8b81a}
[data-theme="soft-anime"] .brand-mark{color:#c78a9c;text-shadow:0 0 18px #d9a8b866}
[data-theme="soft-anime"] nav a{color:#897179}
[data-theme="soft-anime"] nav a::before{background:linear-gradient(180deg,#d9a8b8,#c9b5d8)}
[data-theme="soft-anime"] nav a.active{background:linear-gradient(105deg,#d9a8b828,#d9a8b80f);color:#3d3548;border-color:#d9a8b842}
[data-theme="soft-anime"] nav a:hover{background:#d9a8b818}
[data-theme="soft-anime"] .soft-card,
[data-theme="soft-anime"] .chapter-card,
[data-theme="soft-anime"] .reading-paper{
  background:linear-gradient(135deg,#ffffffcc,#fefbf9bf);
  border-color:#d9a8b842;
  box-shadow:0 18px 50px #5d4a4f33,inset 0 1px 0 #ffffffbb,inset 0 0 0 1px #d9a8b81a;
}
[data-theme="soft-anime"] .primary{
  background:linear-gradient(115deg,#d9a8b8,#c9b5d8);
  color:#3d3548;
  box-shadow:0 8px 30px #d9a8b855,0 2px 12px #c9b5d833;
}
[data-theme="soft-anime"] .primary:hover:not(:disabled){box-shadow:0 12px 40px #d9a8b877,0 4px 18px #c9b5d844}
[data-theme="soft-anime"] .call-room{
  background:
    radial-gradient(ellipse 90% 60% at 50% 12%, #f4d8e0aa, transparent 65%),
    radial-gradient(ellipse 75% 45% at 20% 80%, #e8c8d844, transparent 60%),
    linear-gradient(165deg, #e8d2dc 0%, #d9c4d0 35%, #c9b5c8 100%);
  box-shadow:0 35px 90px #5d4a4f66,inset 0 0 0 1px #d9a8b855,inset 0 -120px 200px #f4e8ec22;
  border-color:#d9a8b833;
}
[data-theme="soft-anime"] .call-presence h1{text-shadow:0 0 22px #d9a8b855,0 1px 12px #5d4a4f44}
[data-theme="soft-anime"] .subtitle-area>p{text-shadow:0 0 20px #d9a8b844,0 1px 10px #5d4a4f33;color:#3d3548}

[data-theme="soft-anime"] .theme-option input:checked+.theme-preview{border-color:#d9a8b8;box-shadow:0 0 0 4px #d9a8b82b,0 18px 46px #5d4a4f44}

@media (prefers-reduced-motion: reduce){
  .page:not([hidden]),.page:not([hidden]) *{animation:none!important}
  .primary::before{display:none}
}

/* ---------- Readability and compact laptop layouts ---------- */
.hint,.muted{font-size:14px;line-height:1.75}
small{font-size:12px;line-height:1.7}
.fineprint{font-size:12px;line-height:1.65;margin-top:9px}
.subtitle-area>small,.call-presence #statusdetail,.voice-transcript{font-size:12px;line-height:1.65}
.call-top,.call-presence,.subtitle-area,.call-bottom{position:relative;z-index:1}
.call-room{isolation:isolate}
#raw-output{font-size:13px;line-height:1.75;max-height:min(65dvh,650px)}

@media (min-width:851px) and (max-height:820px){
  .page[data-view="tonight"]{padding-top:16px;padding-bottom:18px}
  .page[data-view="tonight"] .page-heading{margin-bottom:15px}
  .page[data-view="tonight"] .page-heading h1{font-size:clamp(26px,2.1vw,33px)}
  .page[data-view="tonight"] .home-grid{grid-template-columns:minmax(250px,.92fr) minmax(350px,1.08fr);gap:clamp(18px,2.2vw,30px)}
  .page[data-view="tonight"] .hero-art{min-height:0}
  .page[data-view="tonight"] .evening-setup{padding-top:0}
  .page[data-view="tonight"] .companion-mini{gap:12px;margin-bottom:12px}
  .page[data-view="tonight"] .soft-card{padding:16px 18px;margin-bottom:11px}
  .page[data-view="tonight"] #theme{min-height:76px;max-height:120px}
  .page[data-view="tonight"] .setup-details{margin:11px 0;padding-top:10px}
  .page[data-view="tonight"] .form-grid{gap:9px;margin:11px 0}
  .page[data-view="tonight"] .session-options{gap:8px;margin:11px 0}
  .page[data-view="tonight"] .session-options select{padding:9px 11px}
  .page[data-view="tonight"] .start-button{padding:14px 20px}
  .page[data-view="tonight"] .small-note{padding:9px 10px;gap:12px}
}

@media (max-width:850px){
  .page-heading h1{font-size:clamp(25px,5.8vw,32px);letter-spacing:.06em}
  .page[data-view="tonight"] .home-grid{gap:20px}
  .page[data-view="tonight"] .evening-setup{padding-top:0}
  .call-room{min-height:0}
  .call-page{padding-bottom:22px}
}