.app-dialog.is-reading-detail { width:min(700px,calc(100vw - 40px)); border-radius:16px; }
.app-dialog.is-reading-detail[open] { height:min(88dvh,900px); }
.is-reading-detail .dialog-heading { align-items:center; padding:22px 32px 20px; flex-shrink:0; }
.is-reading-detail .eyebrow { font-size:11px; letter-spacing:.22em; margin-bottom:6px; }
.is-reading-detail .dialog-heading h2 { font-size:25px; letter-spacing:.08em; line-height:1.45; }
.is-reading-detail .dialog-close { width:40px; height:40px; flex-basis:40px; padding:10px; }
.is-reading-detail .dialog-body { padding:24px 32px 28px; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; column-count:auto; column-width:auto; scrollbar-width:thin; scrollbar-color:#ab96816b transparent; }
.is-reading-detail .dialog-footer,.is-reading-detail .dialog-pagination { display:none; }
.reading-persona { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.reading-persona img { width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:center 25%; border:1px solid #92755b26; }
.reading-overline { display:block; color:#897362; font-size:11px; line-height:1.5; letter-spacing:.12em; }
.dialog-body .reading-persona p { font-size:16px; line-height:1.6; margin:3px 0 0; }
.reading-persona p span { display:inline-block; margin-left:12px; font-size:12px; color:#806f5f; }
.reading-question { padding:0 0 0 14px; border-left:2px solid #a9886c6b; }
.dialog-body .reading-question p { font-size:14px; line-height:1.95; margin:7px 0 0; color:#6e5f50; white-space:pre-line; overflow-wrap:anywhere; }
.reading-verse { display:flex; flex-direction:row-reverse; justify-content:center; gap:24px; padding:30px 0; margin-bottom:26px; border-bottom:1px solid #92755b26; }
.reading-verse-line { writing-mode:vertical-rl; font-size:27px; line-height:1.65; letter-spacing:.17em; }
.reading-section + .reading-section { margin-top:28px; }
.dialog-body .reading-section h3 { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; letter-spacing:.13em; color:#85563e; margin:0 0 12px; }
.reading-section h3::before { content:""; width:14px; height:1px; background:currentColor; opacity:.6; }
.dialog-body .reading-passage { margin:0; font-size:17px; line-height:2.1; white-space:pre-line; overflow-wrap:anywhere; }
.reading-character.is-speaking { color:#fff4e3; background:#493b30; border-radius:2px; }
.reading-actions { gap:8px 18px; border-top:1px solid #92755b26; padding-top:22px; margin-top:30px; }
.reading-actions .soft-btn { padding:6px 0; border:0; border-radius:0; background:transparent; font-size:13px; letter-spacing:.05em; min-height:36px!important; }
.reading-actions .soft-btn:hover { color:#943e31; text-decoration:underline; text-underline-offset:4px; }
.is-reading-detail .reading-feedback { font-size:12px; margin-top:18px; gap:6px; }
.is-reading-detail .reading-feedback .soft-btn { font-size:12px; padding:4px 10px; min-height:32px; border-radius:5px; background:transparent; }
.dialog-body .reading-disclosure { font-size:11px; line-height:1.8; color:#8c7a68; margin:22px 0 0; }
.reading-toolbar { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 28px; border-top:1px solid #92755b30; background:#f5eddfb8; }
.reading-audio-info { min-width:0; display:flex; flex-direction:column; gap:3px; }
.reading-toolbar .voice-status { font-size:12px; line-height:1.65; color:#7a6756; }
.reading-time { font-family:system-ui,sans-serif; font-size:11px; line-height:1.4; font-variant-numeric:tabular-nums; color:#927d69; }
.reading-time:empty { display:none; }
.reading-play { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:96px; min-height:44px; padding:10px 15px; border:1px solid #91705870; border-radius:6px; background:transparent; color:#76513b; font-size:14px; letter-spacing:.08em; touch-action:manipulation; }
.reading-play svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.reading-play:hover:not(:disabled) { background:#fff8ed; }
.reading-play:focus-visible { outline:2px solid #946f50; outline-offset:3px; }
.reading-play:disabled { opacity:.5; }
.reading-play.is-loading svg { animation:enso-turn 2.4s linear infinite; }
.pwa-mode .app-dialog.is-reading-detail[open] { height:calc(var(--visible-height,100dvh) - 24px); max-height:calc(var(--visible-height,100dvh) - 24px); top:calc(var(--visible-top,0px) + 12px); }
.pwa-mode .is-reading-detail .dialog-body { height:auto; column-count:auto; column-width:auto; overflow-y:auto; }
@media(max-width:600px) {
  .app-dialog.is-reading-detail { width:calc(100vw - 16px); border-radius:12px; }
  .app-dialog.is-reading-detail[open] { height:calc(var(--visible-height,100dvh) - 16px); max-height:calc(var(--visible-height,100dvh) - 16px); }
  .is-reading-detail .dialog-heading { padding:18px 20px 16px; }
  .is-reading-detail .dialog-heading h2 { font-size:22px; }
  .is-reading-detail .dialog-body { padding:20px 20px 24px; }
  .reading-persona { margin-bottom:22px; }
  .reading-persona p span { display:block; margin:0; }
  .reading-verse { gap:20px; padding:26px 0; }
  .reading-verse-line { font-size:25px; }
  .dialog-body .reading-passage { font-size:16px; line-height:2.05; }
  .reading-actions > * { flex-grow:0; }
  .reading-toolbar { padding:12px 16px max(12px,env(safe-area-inset-bottom)); gap:12px; }
  .reading-toolbar .voice-status { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .reading-play.is-loading svg { animation:none; } }