/* Conversations float above the actual gallery, keeping its place and colour. */
.detail.story-mode{background:rgba(235,239,230,.27);backdrop-filter:blur(24px) saturate(.8);-webkit-backdrop-filter:blur(24px) saturate(.8)}
.detail.story-mode::backdrop{background:transparent;backdrop-filter:none}
.story-mode .dialog-bg,.story-mode .dialog-shade{display:none}
.story-mode .conversation{max-width:600px;height:100dvh;padding:14px 16px 12px;gap:10px;grid-template-rows:auto minmax(0,1fr) auto}
.story-mode .chat-top{border-radius:25px;padding:10px 12px;background:#ffffffbf;border:1px solid #ffffffc9;box-shadow:0 10px 35px #23332612,inset 0 1px 0 #fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);gap:9px}
.story-mode .chat-top h2{font-size:16px;letter-spacing:-.3px}
.story-mode .chat-top p{font-size:12px;line-height:1.4;color:#586252;overflow-wrap:anywhere}
.story-mode .chat-top .avatar{width:36px;height:36px;border:2px solid white}
.story-mode .chat-top .avatar img{width:100%;height:100%}
.story-mode .chat-back{width:36px;height:40px;border-radius:50%}
.story-mode .chat-back:focus-visible{outline:2px solid #244631;outline-offset:2px}
.story-mode .chat-history{padding:0 8px 20px;scroll-behavior:smooth;scrollbar-color:#4c5b4333 transparent}
.story-mode .chat-date{font-size:12px;background:#ffffffad;color:#485342;margin:8px auto 20px;padding:7px 12px}
.story-mode .message{padding:0 36px 0 0;margin:14px 0;gap:7px;align-items:flex-end;animation:none}
.story-mode .message.user{padding:0 0 0 36px}
.story-mode .message>.avatar{width:24px;height:24px;font-size:9px;border:1px solid #fff9}
.story-mode .message>.avatar img{width:18px;height:18px}
.story-mode .bubble{width:fit-content;max-width:min(360px,calc(100% - 31px));padding:11px 14px;background:#e7f6a2;color:#244631;border-radius:18px 18px 18px 5px;box-shadow:0 5px 20px #253b2010}
.story-mode .user .bubble{background:#fffffff2;color:#232920;border-radius:18px 18px 5px 18px}
.story-mode .bubble p{font-size:14px;line-height:1.5}
.story-mode .message-meta{margin-bottom:5px;font-size:12px;gap:5px}
.story-mode .message-meta b{color:inherit;font-weight:550}
.story-mode .message-meta span{display:none}
.story-mode .stamp{display:none}
.story-mode .image-message .bubble{width:220px;max-width:calc(100% - 31px);background:white;padding:6px;border-radius:5px;box-shadow:0 9px 28px #23332625;transform:rotate(-1.2deg)}
.story-mode .user.image-message .bubble{transform:rotate(1.2deg)}
.story-mode .image-message .message-meta{margin:3px 5px 7px}
.story-mode .chat-image-button{border-radius:2px}
.story-mode .chat-image-button img{max-height:270px;width:100%;object-fit:contain}
.story-mode .image-caption{padding:8px 4px 4px!important;font-size:12px!important;color:#424b3c}
.story-mode .reference-bundle .chat-image-button img{aspect-ratio:3/4;object-fit:contain}
.story-mode .reply-bundle{border-left-color:#2349df;background:#2349df09;padding:6px;gap:7px}
.story-mode .reply-bundle span{font-size:12px}
.story-mode .waveform{color:#2349df;height:28px;gap:2px}
.story-mode .waveform i{min-width:2px;width:2px}
.story-mode .play-voice{background:#2349df;width:32px;height:32px}
.story-mode .voice-length,.story-mode .transcript{font-size:12px!important;color:#788071}
.story-mode .sample-end{color:#33462a;font-size:14px}
.story-footer{display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
.story-footer button{border:1px solid #ffffffc9;background:#ffffffc4;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:12px 18px;border-radius:24px;font-size:14px;color:#244631;display:flex;align-items:center;gap:12px;box-shadow:0 5px 25px #23332612}
.story-footer svg{width:18px;height:18px}
.story-mode .awaiting-reveal{opacity:0;transform:translateY(22px) scale(.97)}
.story-mode .revealed{animation:conversation-reveal .7s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms) both}
@keyframes conversation-reveal{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@media(min-width:761px){.detail.story-mode{left:50%;width:50vw;right:0;border-left:1px solid #ffffff80}}
@media(max-width:760px){
 .story-mode .conversation{padding:10px 10px 8px;gap:8px}
 .story-mode .chat-top{border-radius:23px;padding:8px;gap:7px}
 .story-mode .chat-top h2{font-size:15px}
 .story-mode .together{display:none}
 .story-mode .chat-history{padding:0 3px 14px}
 .story-mode .message{padding-right:22px;margin:12px 0;gap:5px}
 .story-mode .message.user{padding-left:22px}
 .story-mode .bubble{max-width:calc(100% - 29px);padding:10px 12px}
 .story-mode .image-message .bubble{width:185px;padding:5px}
 .story-mode .chat-image-button img{max-height:225px}
 .story-mode .chat-date{margin:5px auto 15px}
}
@media(prefers-reduced-motion:reduce){.story-mode .awaiting-reveal{opacity:1;transform:none}.story-mode .revealed{animation:none}.story-mode .chat-history{scroll-behavior:auto}}