/* 睡前故事 card + 故事书 shelf + page-flip book (2026-10-16) */
#chat-list .bubble.ian.story-bubble{padding:0;border:0;background:none;background-image:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#chat-list .bubble.ian.story-bubble .msg{white-space:normal}
/* the chat card is a small closed book (same cloth + paper panel as the shelf and the reader) */
.smb{display:flex;align-items:flex-end;gap:16px;padding:14px 6px 8px 6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.smb-book{position:relative;flex:none;width:112px;aspect-ratio:880/1250;transform:rotate(-2deg);transform-origin:50% 100%}
.smb-shadow{position:absolute;left:4%;right:-8%;bottom:-9px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,42,30,.30),transparent);filter:blur(2px)}
.smb-edge{position:absolute;top:2.5%;bottom:1.5%;right:-3px;width:4px;border-radius:0 2px 2px 0;background:repeating-linear-gradient(90deg,#efe7d8 0 1px,#d9cfbd 1px 2px);box-shadow:1px 1px 2px rgba(60,42,30,.15)}
.smb-cover{position:absolute;inset:0;border-radius:3px 7px 7px 3px;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),var(--c,#4f5788);
  box-shadow:inset 3px 0 6px rgba(0,0,0,.22),0 8px 14px rgba(60,42,30,.16),0 1px 2px rgba(60,42,30,.22)}
.smb-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:9%;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(255,255,255,.08) 65%,transparent)}
.smb-panel{position:absolute;inset:7% 8% 7% 10%;border-radius:2px;overflow:hidden;
  background:linear-gradient(rgba(252,248,240,.35),rgba(252,248,240,.35)),url(/images/story/paper.jpg) center/cover #f6f0e4;box-shadow:0 1px 2px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06)}
.smb-panel img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply;filter:brightness(1.05)}
.smb-plain{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;font:400 15px/1.4 'Story Hand',var(--cjk-serif),serif;color:#4a3f38}
.smb-meta{padding-bottom:6px;min-width:0}
.smb-kick{font:600 9px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.19em;color:var(--textL)}
.smb-title{margin-top:6px;font:400 19px/1.35 'Story Hand',var(--cjk-serif),serif;color:var(--text)}
.smb-open{margin-top:5px;font:12px var(--ui-font);color:var(--textL)}
.smb-star{position:absolute;font-style:normal;color:#e9c768;opacity:0;pointer-events:none;text-shadow:0 0 6px rgba(233,199,104,.75)}
.smb-star.s1{top:-12px;right:-14px;font-size:13px}
.smb-star.s2{top:10px;right:-22px;font-size:9px}
.smb-star.s3{top:-4px;left:-10px;font-size:8px}
/* arriving: drops in, tips and settles; at night two little stars twinkle */
.smb.arrive .smb-book{animation:smbDrop 1s cubic-bezier(.3,.9,.3,1) both}
.smb.arrive .smb-shadow{animation:smbShadow 1s ease both}
.smb.arrive .smb-meta{animation:smbMeta .6s ease .45s both}
.smb.arrive.night .smb-star{animation:smbTwinkle 1.5s ease-in-out .85s 2 both}
.smb.arrive.night .smb-star.s2{animation-delay:1.15s}
.smb.arrive.night .smb-star.s3{animation-delay:1.35s}
@keyframes smbDrop{0%{opacity:0;transform:translateY(-46px) rotate(-11deg)}40%{opacity:1}62%{transform:translateY(2px) rotate(1.8deg)}80%{transform:translateY(-3px) rotate(-3.2deg)}100%{transform:translateY(0) rotate(-2deg)}}
@keyframes smbShadow{0%{opacity:0;transform:scale(.45) translateY(-6px)}62%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes smbMeta{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes smbTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}
.smb-fly{position:fixed;z-index:400;margin:0;transform-origin:50% 50%;pointer-events:none}
.smb-fly .smb-shadow,.smb-fly .smb-star{display:none}
@media (prefers-reduced-motion:reduce){.smb.arrive .smb-book,.smb.arrive .smb-shadow,.smb.arrive .smb-meta,.smb.arrive .smb-star{animation:none}}

/* ---- shelf: spines standing on a board; the chosen one turns to show its cover ---- */
#p-stories{position:relative;z-index:0}
.ssh-tint{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ssh-tint,transparent);transition:background-color .7s ease}
.ssh-now{margin-top:10px;min-height:46px}
.ssh-now b{display:block;font:400 21px/1.3 var(--cjk-serif),serif;color:var(--text)}
.ssh-now span{font:12px var(--ui-font);color:var(--textL)}
.ssh-shelf{position:relative;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;margin:0 -18px;padding:0 18px;
  height:calc(100dvh - var(--top,220px) - 60px - env(safe-area-inset-bottom,0px));min-height:190px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
body.hub-open .ssh-shelf{height:calc(100dvh - var(--top,220px) - 142px - env(safe-area-inset-bottom,0px))}
.ssh-shelf::-webkit-scrollbar{display:none}
.ssh-row{position:relative;display:flex;align-items:flex-end;gap:3px;height:var(--sh,300px);margin:0 auto 22px;padding:0 16px}
.ssh-board{position:absolute;left:0;right:0;bottom:-10px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--text) 18%,var(--ssh-tint,var(--bg)));box-shadow:0 6px 14px rgba(40,30,25,.12)}
.ssh-bk{position:relative;flex:0 0 auto;height:var(--h);width:var(--sw);perspective:900px;cursor:pointer;transition:width .7s cubic-bezier(.3,.9,.3,1);transform:rotate(var(--lean,0deg));transform-origin:bottom left}
.ssh-bk.open{width:calc(var(--sw) * .32 + var(--cw));transform:none}
.ssh-spine,.ssh-cover{position:absolute;top:0;bottom:0;transition:transform .7s cubic-bezier(.3,.9,.3,1)}
/* only the cover hides its back; on the spine this swallowed the title in Chrome */
.ssh-cover{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ssh-spine{left:0;width:var(--sw);background:var(--c);border-radius:2px 3px 3px 2px;transform-origin:left center;display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:inset 3px 0 4px rgba(255,255,255,.18),inset -4px 0 6px rgba(0,0,0,.18),0 2px 3px rgba(40,30,25,.15)}
/* vertical title: one character per line (writing-mode measured 9px tall inside the flex box) */
.ssh-spine i{display:flex;flex-direction:column;align-items:center;gap:.14em;padding:.2em 0;max-height:calc(var(--h) * .72);overflow:hidden;font:500 calc(min(var(--sw) * .42,15px))/1.05 var(--ui-font);font-style:normal;color:var(--ink)}
.ssh-spine i b{display:block;font-weight:inherit}
.ssh-spine::before,.ssh-spine::after{content:'';position:absolute;left:12%;right:12%;height:1.5px;background:var(--ink);opacity:.45}
.ssh-spine::before{top:9%}.ssh-spine::after{bottom:9%}
.ssh-bk.open .ssh-spine{transform:scaleX(.32)}
.ssh-row.still .ssh-bk,.ssh-row.still .ssh-spine,.ssh-row.still .ssh-cover{transition:none!important}
.ssh-cover{left:calc(var(--sw) * .32);width:var(--cw);transform-origin:left center;transform:rotateY(90deg);opacity:0;border-radius:2px 6px 6px 2px;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),var(--c);
  box-shadow:0 14px 26px rgba(40,30,25,.22),0 2px 4px rgba(40,30,25,.16);transition:transform .6s cubic-bezier(.3,.9,.3,1),opacity .2s ease .4s}
.ssh-bk.open .ssh-cover{transform:rotateY(0);opacity:1;transition:transform .7s cubic-bezier(.3,.9,.3,1),opacity .25s ease .05s}
.ssh-cover::after{content:'';position:absolute;left:0;top:0;bottom:0;width:10px;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent)}
/* cloth cover in the book's colour, the drawing a sheet of paper pasted on it */
.ssh-panel{position:absolute;inset:7% 8% 7% 10%;border-radius:2px;overflow:hidden;
  background:linear-gradient(rgba(252,248,240,.35),rgba(252,248,240,.35)),url(/images/story/paper.jpg) center/cover #f6f0e4;box-shadow:0 1px 2px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06)}
.ssh-panel img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply;filter:brightness(1.05)}
.ssh-plain{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;text-align:center;font:400 24px/1.4 'Story Hand',var(--cjk-serif),serif;color:#4a3f38}
.ssh-hint{margin-top:4px;text-align:center;font:600 9px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.19em;color:var(--textL)}
.stories-empty{text-align:center;margin-top:60px;font:13px/1.8 var(--ui-font);color:var(--textL)}
/* landscape: title column on the left, the shelf takes the rest of the height */
@media (orientation:landscape){
  /* the App is a 430px column (body max-width); the shelf steps out of it to use the whole width */
  #p-stories.active{position:fixed;inset:0;max-width:none;overflow:hidden;display:grid;grid-template-columns:minmax(200px,30%) 1fr;column-gap:10px;align-items:center;
    padding:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-right,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 10px) calc(env(safe-area-inset-left,0px) + 24px)}
  #p-stories .ssh-side{grid-column:1}
  #p-stories #stories-list{grid-column:2;min-width:0}
  .ssh-shelf{margin:0;padding:0 8px;height:calc(100dvh - var(--top,40px) - 40px - env(safe-area-inset-bottom,0px))}
  body.hub-open .ssh-shelf{height:calc(100dvh - var(--top,40px) - 122px - env(safe-area-inset-bottom,0px))}
}

/* ---- the book (StPageFlip): hard cloth cover, paper pages, edges, gutter ---- */
.sbk{position:fixed;inset:0;z-index:300;background:var(--bg);opacity:0;transition:opacity .35s ease;overscroll-behavior:none;touch-action:none}
.sbk.show{opacity:1}
.sbk-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;z-index:5;width:36px;height:36px;border:0;border-radius:50%;background:color-mix(in srgb,var(--card) 70%,transparent);font-size:20px;color:var(--text)}
.sbk-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 46px) 18px calc(env(safe-area-inset-bottom,0px) + 74px);box-sizing:border-box}
.sbk.land .sbk-wrap{padding:calc(env(safe-area-inset-top,0px) + 40px) 24px calc(env(safe-area-inset-bottom,0px) + 42px)}
.sbk-book{margin:0 auto;position:relative;z-index:2}
.sbk-body{position:relative;filter:drop-shadow(0 18px 22px rgba(60,42,30,.22)) drop-shadow(0 3px 4px rgba(60,42,30,.18));transition:transform .5s cubic-bezier(.3,.9,.3,1)}
.sbk-board{position:absolute;left:-3px;top:-4px;right:calc(-1 * (var(--edge,6px) + 7px));bottom:calc(-1 * (var(--edge,6px) * .6 + 8px));border-radius:4px 12px 12px 4px;background:var(--board,#6f6a8f);z-index:0;
  box-shadow:inset -2px -2px 0 rgba(255,255,255,.12),inset 3px 0 6px rgba(0,0,0,.25)}
.sbk-edges{position:absolute;top:2px;bottom:calc(-1 * var(--edge,6px) * .6);right:calc(-1 * var(--edge,6px));width:var(--edge,6px);z-index:1;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(90deg,#efe7d8 0 1px,#d9cfbd 1px 2px);box-shadow:inset -1px 0 1px rgba(0,0,0,.08)}
.sbk-edges::after{content:'';position:absolute;left:calc(-1 * var(--wpx,0px));right:0;bottom:-1px;height:calc(var(--edge,6px) * .6);background:repeating-linear-gradient(180deg,#efe7d8 0 1px,#d9cfbd 1px 2px)}
/* portrait, book open: a strip of the left page shows, pages already read get thicker */
.sbk-left{display:none;position:absolute;top:0;bottom:0;right:100%;width:24px;z-index:1;border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,transparent,rgba(70,50,30,.06) 55%,rgba(70,50,30,.22)),linear-gradient(rgba(252,248,240,.45),rgba(252,248,240,.45)),url(/images/story/paper.jpg) left center/cover #fbf8f2}
.sbk-left::before{content:'';position:absolute;top:2px;bottom:calc(-1 * var(--ledge,2px) * .6);right:100%;width:var(--ledge,2px);border-radius:3px 0 0 3px;background:repeating-linear-gradient(90deg,#d9cfbd 0 1px,#efe7d8 1px 2px)}
.sbk-body.opened{transform:translateX(16px)}
.sbk-body.opened .sbk-left{display:block}
.sbk-body.opened .sbk-board{left:calc(-1 * (24px + var(--ledge,2px) + 7px));border-radius:12px}
.sbk-body.spread .sbk-left{display:none!important}
.sbk-body.spread .sbk-board{left:-7px!important}
/* landscape, closed: only the right half is a book — centre it; it slides into the spread when opened */
.sbk-body.spread.shut{transform:translateX(calc(var(--pw,0px) / -2))}
.sbk-body.spread.shut .sbk-board{left:calc(50% - 3px)!important}
.sbk-body.spread.shut .sbk-edges::after{left:calc(-1 * var(--pw,0px))}
.sbk-body.spread.shutb{transform:translateX(calc(var(--pw,0px) / 2))}
.sbk-body.spread.shutb .sbk-board{right:calc(50% - 3px)!important}
.sbk-body.spread.shutb .sbk-edges{display:none}
.sbk-pg{position:relative;overflow:hidden;color:var(--text);box-shadow:inset -10px 0 18px -14px rgba(80,60,40,.25);
  background:linear-gradient(rgba(252,248,240,.45),rgba(252,248,240,.45)),url(/images/story/paper.jpg) center/cover #fbf8f2}
/* the gutter fades out (not a hard line); on left pages of a spread it is on the right */
.sbk-pg:not(.hard)::before{content:'';position:absolute;left:0;top:0;bottom:0;width:13%;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(70,50,30,.2),rgba(70,50,30,.09) 18%,rgba(70,50,30,.035) 45%,rgba(70,50,30,.01) 75%,transparent)}
.sbk-pg.l:not(.hard)::before{left:auto;right:0;transform:scaleX(-1)}
.sbk-pg.l{box-shadow:inset 10px 0 18px -14px rgba(80,60,40,.25)}
.sbk-pg .in{height:100%;box-sizing:border-box;padding:var(--padt,34px) var(--padx,26px) calc(var(--padt,34px) * .88);display:flex;flex-direction:column}
.sbk-pg .kick{font:600 9px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.19em;color:var(--textL)}
.sbk-pg h2{margin:8px 0 calc(var(--fs,15.5px) * 1.15);font:400 calc(var(--fs,15.5px) * 1.9)/1.25 'Story Hand',var(--cjk-serif),serif;color:var(--text)}
.sbk-pg p{margin:0 0 .9em;font:calc(var(--fs,14px) * 1.32)/1.6 'Story Hand',var(--cjk-serif),serif;letter-spacing:.03em;color:color-mix(in srgb,var(--text) 80%,#9a8a7a);text-indent:2em}
.sbk-pg p.cont{text-indent:0}
.sbk-pg .no{margin-top:auto;text-align:center;font:italic 11px 'Cormorant Garamond',serif;color:var(--textL);opacity:.65}
.sbk-pg figure{margin:auto 0;min-height:0;display:flex;flex-direction:column}
.sbk-pg figure img{width:100%;min-height:0;object-fit:contain;border-radius:8px;display:block;mix-blend-mode:multiply;filter:brightness(1.05)}
.sbk-pg figcaption{margin-top:10px;text-align:center;font:14px/1.6 'Story Hand',var(--ui-font);color:var(--textL)}
.sbk-pg .end{margin:auto 0;text-align:center}
.sbk-pg .end .sig{font:italic 24px 'Cormorant Garamond',serif;color:var(--textL)}
.sbk-pg .end .gn{margin-top:10px;font:17px 'Story Hand',var(--cjk-serif),serif;color:var(--text)}
/* cover and back = the same cloth as the board; the drawing is a paper panel on it */
.sbk-pg.cover,.sbk-pg.back{box-shadow:inset 3px 0 6px rgba(0,0,0,.22);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),var(--board)}
.sbk-pg.cover .in{position:absolute;inset:7% 8% 7% 10%;height:auto;padding:0;border-radius:2px;overflow:hidden;
  background:linear-gradient(rgba(252,248,240,.35),rgba(252,248,240,.35)),url(/images/story/paper.jpg) center/cover #f6f0e4;box-shadow:0 1px 2px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06)}
.sbk-pg.cover img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply;filter:brightness(1.05)}
.sbk-plain{margin:auto;padding:16px;text-align:center;font:400 26px/1.4 'Story Hand',var(--cjk-serif),serif;color:#4a3f38}
.sbk-pg.back .in{align-items:center;justify-content:center;color:rgba(255,255,255,.55);font:italic 15px 'Cormorant Garamond',serif;letter-spacing:.08em}
.sbk-nav{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;align-items:center;justify-content:center;gap:22px;font:400 15px 'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;color:var(--textL)}
.sbk-nav button{width:40px;height:40px;border:0;border-radius:50%;background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--text);font:22px/1 'Cormorant Garamond',serif;box-shadow:0 2px 10px rgba(60,45,40,.08)}
/* landscape is short: small arrows next to the count, under the book */
.sbk.land .sbk-nav{bottom:calc(env(safe-area-inset-bottom,0px) + 6px);gap:12px;font-size:13px}
.sbk.land .sbk-nav button{width:30px;height:30px;background:none;box-shadow:none;color:var(--textL);font-size:20px}