/* ENISHI Stories: fleeting notes, framed in blush and champagne. */
.stories-section {
  min-width: 0;
  margin: 0 0 28px;
  padding: 22px 24px 19px;
  border: 1px solid var(--line, #ecdce2);
  border-radius: 18px;
  background: var(--surface, #fffdfc);
  box-shadow: 0 4px 22px #7b3e5103;
}
.stories-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.stories-heading > div { min-width: 0; }
.stories-heading > .stories-page-actions { width: auto; max-width: none; flex-shrink: 0; flex-wrap: nowrap; gap: 12px; }
.stories-heading .stories-status { margin: 0; font-size: 10px; white-space: nowrap; }
.stories-kicker { display: block; color: var(--gold-ink, #7e5d2e); font-family: Arial, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .17em; margin-bottom: 4px; }
.stories-title { color: var(--ink, #382a30); font-size: 17px; font-weight: 600; line-height: 1.6; letter-spacing: .025em; }
.stories-subtitle { color: var(--muted, #78636c); font-size: 11px; line-height: 1.85; margin-top: 4px; }
.stories-more { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; color: var(--green, #8b3d56); font-size: 11px; border: 0; padding: 5px 0 5px 7px; background: transparent; white-space: nowrap; }
.stories-more .icon { width: 14px; height: 14px; }
.stories-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.stories-rail { display: flex; align-items: flex-start; gap: 17px; min-width: 0; max-width: 100%; overflow-x: auto; padding: 4px 2px 9px; scrollbar-width: thin; scrollbar-color: #dfc8d2 transparent; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.stories-rail::-webkit-scrollbar { height: 3px; }
.stories-rail::-webkit-scrollbar-thumb { border-radius: 4px; background: #dfc8d2; }
.story-bubble { position: relative; display: flex; flex: 0 0 84px; min-width: 0; width: 84px; padding: 0; border: 0; border-radius: 10px; background: transparent; text-align: center; flex-direction: column; align-items: center; scroll-snap-align: start; }
.story-ring { position: relative; display: grid; place-items: center; width: 76px; height: 76px; padding: 4px; border: 1px solid #fff9fb; border-radius: 50%; background: linear-gradient(145deg, #e4c591 3%, #c38b9f 36%, #8b3d56 73%, #b5915a); box-shadow: 0 0 0 1px #c59aa969; transition: transform .2s, box-shadow .2s; }
.story-ring .avatar { width: 100%; height: 100%; border: 3px solid #fffdfc; font-size: 20px; background: #f5e6ec; color: #8b3d56; }
.story-ring > img, .story-ring .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.story-ring > img { border: 3px solid #fffdfc; }
.story-bubble:hover .story-ring { transform: translateY(-2px); box-shadow: 0 0 0 1px #b98296, 0 6px 15px #8b3d5617; }
.story-bubble:focus-visible { outline-offset: 5px; }
.story-bubble-add .story-ring { border: 1px dashed #d5aebe; background: linear-gradient(140deg, #fdf3f6, #fbf6ed); box-shadow: none; color: var(--green, #8b3d56); }
.story-bubble-add .story-ring .avatar { border-color: #fff8fa; opacity: .85; }
.story-plus { display: grid; place-items: center; width: 25px; height: 25px; border: 3px solid #fffdfc; border-radius: 50%; background: var(--green, #8b3d56); color: #fff9fa; font-size: 18px; line-height: 1; position: absolute; right: -2px; bottom: -1px; }
.story-plus .icon { width: 14px; height: 14px; }
.story-ring > .story-plus:only-child { position: static; width: 34px; height: 34px; border: 0; background: transparent; color: var(--green, #8b3d56); font-size: 28px; }
.story-ring > .story-plus:only-child .icon { width: 26px; height: 26px; }
.story-author-name { display: block; width: 100%; margin-top: 9px; color: var(--ink, #382a30); font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-author-note { display: block; max-width: 100%; margin-top: 1px; color: var(--muted, #78636c); font-size: 9px; line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stories-empty, .stories-error, .stories-loading, .stories-status { color: var(--muted, #78636c); font-size: 11px; line-height: 1.95; overflow-wrap: anywhere; }
.stories-empty { padding: 21px 20px; border: 1px dashed #e1c7d1; border-radius: 12px; background: #fff9fb; text-align: center; }
.stories-empty strong { display: block; margin-bottom: 5px; color: #76515f; font-size: 13px; font-weight: 500; }
.stories-error { padding: 13px 15px; border: 1px solid #e4b9c7; border-radius: 10px; background: #fff0f4; color: #853c53; }
.stories-loading { display: flex; align-items: center; gap: 9px; padding: 16px 0; }
.stories-loading::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid #efdae2; border-top-color: #9c6178; border-radius: 50%; animation: story-spin .9s linear infinite; }
.stories-status { margin-top: 10px; }
.stories-status:empty { display: none; }
.stories-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 0 0 28px; }
.stories-page-header > div { min-width: 0; }
.stories-page-header .stories-title { font-family: 'Noto Serif JP', serif; font-size: 28px; font-weight: 500; }
.stories-page-header .stories-subtitle { margin-top: 8px; font-size: 12px; }
.stories-page-actions { display: flex; flex-shrink: 0; gap: 9px; align-items: center; flex-wrap: wrap; }
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr)); gap: 20px; min-width: 0; }
.story-preview-card { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 300px; aspect-ratio: 9 / 13; padding: 23px 22px 18px; overflow: hidden; border: 1px solid #fff1f32b; border-radius: 18px; background: var(--story-bg, linear-gradient(145deg, #9d5270, #60263e)); color: var(--story-fg, #fff8fa); text-align: left; box-shadow: 0 7px 24px #7541540d; transition: transform .2s, box-shadow .2s; }
.story-preview-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #75415424; }
.story-preview-card::after, .story-preview-canvas::after { content: ''; position: absolute; z-index: -1; width: 230px; height: 230px; right: -140px; bottom: -105px; border: 1px solid #f2d7a72e; border-radius: 50%; box-shadow: 0 0 0 24px #f2d7a709, 0 0 0 50px #f2d7a705; pointer-events: none; }
.story-preview-content { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; padding: 20px 0; z-index: 1; }
.story-preview-category { align-self: flex-start; display: inline-flex; gap: 5px; align-items: center; margin-bottom: 16px; padding: 3px 9px; border: 1px solid #fff5f03d; border-radius: 20px; color: var(--story-accent, #f3d4a4); background: #1e101c12; font-size: 9px; font-weight: 500; line-height: 1.8; }
.story-preview-author { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: var(--story-fg, #fff8fa); font-size: 11px; min-width: 0; }
.story-preview-author .avatar { width: 30px; height: 30px; border: 1px solid #fff7ed66; background: #fff7ee24; color: #fff8fa; font-size: 10px; }
.story-preview-author > span, .story-preview-author > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.story-preview-author small { display: block; margin-top: 2px; color: var(--story-subtle, #f1dbe3); font-size: 9px; font-weight: 400; line-height: 1.65; }
.story-preview-text { color: inherit; font-size: 17px; font-weight: 500; line-height: 1.95; letter-spacing: .035em; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.story-preview-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--story-subtle, #f1dbe3); font-size: 9px; line-height: 1.8; margin-top: auto; }
.story-preview-footer .icon { width: 13px; height: 13px; }
.story-preview-footer > span { display: inline-flex; align-items: center; gap: 5px; }
.story-sample-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 20px; color: var(--muted, #78636c); font-size: 10px; line-height: 1.9; }
.story-sample-note .icon { width: 14px; height: 14px; margin-top: 3px; color: var(--gold-ink, #7e5d2e); }
.story-theme-rose { --story-bg: linear-gradient(145deg, #a25371 0%, #813650 54%, #552136 100%); --story-fg: #fff9fa; --story-subtle: #f4dce5; --story-accent: #f6d9a8; }
.story-theme-gold { --story-bg: linear-gradient(145deg, #89663b 0%, #70502f 51%, #443020 100%); --story-fg: #fffaf1; --story-subtle: #f1e3c9; --story-accent: #ffdfaa; }
.story-theme-ink { --story-bg: linear-gradient(145deg, #52404f 0%, #372b38 55%, #241d2b 100%); --story-fg: #fff8fc; --story-subtle: #e7d5e3; --story-accent: #f0d1a1; }

/* Native dialogs keep focus and backdrop behavior with the browser. */
dialog.stories-dialog { position: fixed; inset: 0; width: fit-content; max-width: none; height: fit-content; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 22px; overflow: visible; background: transparent; color: var(--ink, #382a30); box-shadow: none; }
dialog.stories-dialog::backdrop { background: #291c26c9; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
dialog.stories-dialog[open] { display: block; }
.stories-dialog [hidden], .stories-section [hidden] { display: none !important; }
.story-viewer { position: relative; width: min(420px, calc((100dvh - 40px) * .5625), calc(100vw - 120px)); aspect-ratio: 9 / 16; max-height: calc(100dvh - 40px); border-radius: 21px; box-shadow: 0 24px 100px #100b1652; }
.story-viewer-surface { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; width: 100%; height: 100%; padding: 24px 23px 20px; border: 1px solid #fff8f022; border-radius: inherit; overflow: hidden; background: var(--story-bg, linear-gradient(145deg, #a25371, #552136)); color: var(--story-fg, #fff9fa); }
.story-viewer-surface::after { content: ''; position: absolute; z-index: -1; width: 380px; height: 380px; right: -260px; bottom: -130px; border: 1px solid #f6d8a624; border-radius: 50%; box-shadow: 0 0 0 34px #f6d8a608, 0 0 0 68px #f6d8a604; pointer-events: none; }
.story-background { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.story-background img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-viewer-shade { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, #29132166 0%, #2913210a 28%, #29132114 54%, #2913217a 100%); }
.story-viewer-surface:has(.story-background img) .story-viewer-shade, .story-preview-card:has(.story-background img) .story-viewer-shade, .story-preview-canvas:has(.story-background img) .story-viewer-shade { background: linear-gradient(180deg, #22121e8f 0%, #22121e55 25%, #22121e69 68%, #22121eb5 100%); }
.story-viewer-surface:has(.story-background img) .story-viewer-text, .story-preview-card:has(.story-background img) .story-preview-text, .story-preview-canvas:has(.story-background img) .story-preview-sample { text-shadow: 0 1px 8px #1d101d66; }
.story-progress { display: flex; gap: 5px; position: absolute; inset: 11px 12px auto; z-index: 5; height: 3px; }
.story-progress-track { display: block; height: 3px; min-width: 0; flex: 1; overflow: hidden; border-radius: 4px; background: #fff8f740; }
.story-progress-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: #fff8f1; transform-origin: left center; will-change: transform; }
.story-viewer-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.story-viewer-author { display: flex; align-items: center; gap: 9px; min-width: 0; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; }
.story-viewer-author .avatar { width: 34px; height: 34px; border: 1px solid #fff8ed77; background: #fff6f12b; color: #fff8fa; font-size: 11px; }
.story-viewer-author > div { min-width: 0; }
.story-viewer-author > div > strong { display: block; max-width: 180px; color: #fffaf9; font-size: 11px; font-weight: 500; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-viewer-meta { display: block; min-width: 0; max-width: 190px; color: var(--story-subtle, #f4dce5); font-size: 9px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-viewer-meta strong { display: block; max-width: 180px; color: #fffaf9; font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-viewer-meta span, .story-viewer-meta small { display: block; color: var(--story-subtle, #f4dce5); font-size: 9px; }
.story-viewer-controls { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.story-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 34px; padding: 0; border: 0; border-radius: 50%; color: #fffaf9; background: transparent; transition: background .18s; }
.story-icon-button .icon { width: 18px; height: 18px; }
.story-icon-button:hover { background: #fff8f01c; }
.story-icon-button:focus-visible, .story-like-button:focus-visible, .story-step-button:focus-visible { outline-color: #f7deb4; outline-offset: 3px; }
.story-viewer-body { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 25px 2px; scrollbar-width: thin; scrollbar-color: #ffffff54 transparent; }
.story-viewer-body::-webkit-scrollbar { width: 3px; }
.story-viewer-body::-webkit-scrollbar-thumb { background: #ffffff54; border-radius: 3px; }
.story-category { display: inline-flex; align-items: center; align-self: flex-start; flex-shrink: 0; gap: 6px; margin-top: auto; padding: 4px 11px; border: 1px solid #fff1dc45; border-radius: 20px; background: #24101a13; color: var(--story-accent, #f6d9a8); font-size: 10px; font-weight: 500; line-height: 1.8; letter-spacing: .04em; }
.story-category .icon { width: 13px; height: 13px; }
.story-viewer-text { flex-shrink: 0; margin: 17px 0 auto; color: var(--story-fg, #fff9fa); font-size: clamp(18px, 2.8dvh, 25px); font-weight: 500; line-height: 1.95; letter-spacing: .035em; white-space: pre-wrap; overflow-wrap: anywhere; }
.story-viewer-bottom { position: relative; z-index: 3; display: flex; align-items: center; gap: 9px; flex-shrink: 0; flex-wrap: wrap; padding-top: 13px; border-top: 1px solid #fff4f126; }
.story-like-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid #fff3ed45; border-radius: 22px; background: #fff8f00d; color: #fff9f7; font-size: 11px; line-height: 1.5; transition: background .18s, color .18s; }
.story-like-button .icon { width: 17px; height: 17px; }
.story-like-button:hover { background: #fff8f026; }
.story-like-button[aria-pressed="true"] { border-color: #fff0ea; background: #fff4ef; color: #8b3d56; }
.story-like-button[aria-pressed="true"] .icon { fill: #8b3d561c; }
.story-expiry { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; color: var(--story-subtle, #f4dce5); font-size: 9px; white-space: nowrap; }
.story-demo-label { display: inline-flex; align-items: center; gap: 4px; color: var(--story-accent, #f6d9a8); font-size: 8px; line-height: 1.7; padding: 2px 6px; border: 1px solid #f6d9a84d; border-radius: 4px; }
.story-step-button { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #fff7f526; border-radius: 50%; background: #fff7f514; color: #fff8f5; transform: translateY(-50%); transition: background .18s; }
.story-step-button.prev { left: -57px; }
.story-step-button.next { right: -57px; }
.story-step-button .icon { width: 20px; height: 20px; }
.story-step-button:hover { background: #fff7f52e; }
.story-step-button:disabled { opacity: .24; }
.story-viewer-hint { position: absolute; width: max-content; max-width: calc(100vw - 24px); left: 50%; top: calc(100% + 8px); transform: translateX(-50%); color: #f5e7ecad; text-align: center; font-size: 9px; line-height: 1.8; letter-spacing: .035em; }
.story-viewer-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; min-width: 0; height: 100%; padding: 35px 28px; color: #fff7f9; text-align: center; font-size: 12px; line-height: 1.95; }
.story-viewer-empty > .icon { width: 38px; height: 38px; color: #f0d1a1; }
.story-viewer-empty strong { font-size: 19px; font-weight: 500; }
.story-viewer-empty .story-button.secondary { color: #fff8f5; border-color: #fff8f566; background: #fff8f518; }

/* The composer puts the writing surface first and keeps a real-size preview. */
dialog.stories-dialog.is-composer { width: min(940px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); border-radius: 22px; overflow: hidden; background: #fffafc; box-shadow: 0 24px 100px #1d0e2245; }
dialog.stories-dialog.is-confirm { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); border: 1px solid #e8ced8; border-radius: 18px; overflow: hidden; background: #fffafc; box-shadow: 0 24px 100px #1d0e2245; }
dialog.stories-dialog.is-confirm .story-demo-confirm { max-height: calc(100dvh - 40px); padding: 28px; }
.story-demo-confirm h2 { color: #5b3546; font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 500; line-height: 1.75; letter-spacing: .025em; }
.story-demo-confirm p { margin-top: 14px; color: #826773; font-size: 12px; line-height: 1.95; }
.story-demo-confirm .story-confirm-actions { gap: 9px; margin-top: 24px; }
.story-demo-confirm .story-confirm-actions .story-button { min-height: 41px; padding: 9px 14px; font-size: 11px; }
.story-composer { max-height: calc(100dvh - 48px); min-width: 0; padding: 28px 30px 30px; overflow-y: auto; overscroll-behavior: contain; }
.story-composer-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
.story-composer-heading > div { min-width: 0; }
.story-composer-heading h2 { color: #4f303e; font-family: 'Noto Serif JP', serif; font-size: 25px; font-weight: 500; line-height: 1.65; letter-spacing: .035em; }
.story-composer-heading p { margin-top: 6px; color: var(--muted, #78636c); font-size: 11px; line-height: 1.9; }
.story-composer-close { display: inline-grid; place-items: center; flex-shrink: 0; width: 35px; height: 35px; padding: 0; margin: -4px -7px 0 0; border: 0; border-radius: 50%; color: #826471; background: transparent; }
.story-composer-close:hover { background: #f6e6ed; }
.story-composer-close .icon { width: 19px; height: 19px; }
.story-composer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 285px); align-items: start; gap: 31px; min-width: 0; }
.story-composer-grid > * { min-width: 0; }
.story-composer-form { min-width: 0; }
.story-composer-fields { display: grid; gap: 20px; min-width: 0; }
.story-composer-label { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 0; color: #6b4656; font-size: 12px; font-weight: 500; line-height: 1.8; }
.story-composer-label small, .story-composer-label > span:last-child:not(:first-child) { color: #947a86; font-size: 10px; font-weight: 400; }
.story-composer-textarea { display: block; width: 100%; min-width: 0; min-height: 172px; max-height: 340px; padding: 13px 14px; border: 1px solid #e2c7d2; border-radius: 11px; outline: none; background: #fffdfc; color: var(--ink, #382a30); font-size: 13px; line-height: 1.95; resize: vertical; transition: border-color .18s, box-shadow .18s; }
.story-composer-textarea::placeholder { color: #a18b95; }
.story-composer-textarea:focus, .story-select:focus, .story-category-select:focus { border-color: #b2778f; box-shadow: 0 0 0 3px #b2778f16; }
.story-composer-textarea[aria-invalid="true"] { border-color: #b56b82; }
.story-counter { display: block; margin-top: 6px; color: #8d727f; font-size: 10px; line-height: 1.8; text-align: right; }
.story-composer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; flex-wrap: wrap; }
.story-composer-row > * { min-width: 0; }
.story-composer-row > label, .story-composer-row > div { flex: 1 1 145px; }
.story-select, .story-category-select { width: 100%; min-width: 0; min-height: 42px; padding: 9px 34px 9px 12px; border: 1px solid #e2c7d2; border-radius: 9px; outline: none; background-color: #fffdfc; color: #624a55; font-size: 12px; line-height: 1.8; transition: border-color .18s, box-shadow .18s; }
.stories-page-actions .story-select { width: auto; max-width: 220px; }
.story-theme-picker { display: flex; gap: 8px; width: 145px; max-width: 100%; min-width: 0; }
.story-theme-option { display: flex; flex: 0 1 43px; align-items: center; justify-content: center; gap: 5px; width: 43px; min-width: 0; height: 43px; min-height: 43px; padding: 9px 8px; border: 2px solid #fffafc; border-radius: 9px; background: var(--story-bg, #8b3d56); box-shadow: 0 0 0 1px #e5d1d9; color: var(--story-fg, #fff9fa); font-size: 11px; line-height: 1.6; transition: box-shadow .18s, transform .18s; }
.story-theme-option[aria-pressed="true"] { box-shadow: 0 0 0 2px #b08a50; }
.story-theme-option:hover { transform: translateY(-1px); }
.story-theme-option .icon { width: 14px; height: 14px; }
.story-photo-picker { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; padding: 12px; border: 1px dashed #dbc0cb; border-radius: 10px; background: #fff7fa; }
.story-photo-picker > .icon { width: 18px; height: 18px; color: #a27b50; }
.story-photo-picker > .story-composer-label { width: 100%; }
.story-photo-input { display: block; width: 100%; min-width: 0; max-width: 100%; color: #826773; font-size: 10px; }
.story-photo-input::file-selector-button { padding: 7px 11px; border: 1px solid #ddbfcc; border-radius: 7px; margin-right: 9px; background: #fffdfc; color: #8b3d56; font: inherit; cursor: pointer; }
.story-photo-name { display: flex; flex: 1; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; color: #826773; font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.story-photo-remove { flex-shrink: 0; padding: 3px 0; border: 0; border-radius: 0; background: transparent; color: #8b3d56; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.story-composer-error { margin: 17px 0 0; padding: 11px 13px; border: 1px solid #e4b9c7; border-radius: 9px; background: #fff0f4; color: #853c53; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.story-composer-error:empty { display: none; }
.story-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 23px; padding-top: 20px; border-top: 1px solid #ecdce2; }
.story-composer-actions > span { flex: 1; color: #8e727f; font-size: 10px; line-height: 1.9; }
.story-composer-actions > .story-button { flex-shrink: 0; }
.story-composer-preview { position: sticky; top: 0; min-width: 0; }
.story-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #8a6c7a; font-size: 10px; line-height: 1.8; }
.story-preview-label > span { color: #a08a95; font-size: 9px; }
.story-preview-canvas { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; aspect-ratio: 9 / 16; padding: 25px 23px; border: 1px solid #fff5ef3b; border-radius: 18px; overflow: hidden; background: var(--story-bg, linear-gradient(145deg, #a25371, #552136)); color: var(--story-fg, #fff9fa); box-shadow: 0 8px 26px #733b4f13; }
.story-preview-canvas > :not(.story-background, .story-viewer-shade) { position: relative; z-index: 1; }
.story-preview-canvas .story-category { margin-top: 0; font-size: 8px; padding: 3px 8px; }
.story-preview-canvas .story-preview-author { margin-top: 22px; }
.story-preview-sample { min-height: 0; max-height: 72%; margin-top: 15px; overflow-y: auto; overscroll-behavior: contain; color: inherit; font-size: 17px; font-weight: 500; line-height: 1.95; letter-spacing: .025em; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: #ffffff54 transparent; }
.story-composer-preview > p { margin-top: 11px; color: #947c87; font-size: 9px; text-align: center; line-height: 1.9; }
.story-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 41px; padding: 10px 17px; border: 1px solid var(--green, #8b3d56); border-radius: 8px; background: var(--green, #8b3d56); color: #fff9fb; font-size: 11px; font-weight: 500; line-height: 1.65; text-align: center; transition: background .18s, border-color .18s; }
.story-button .icon { width: 15px; height: 15px; }
.story-button.primary:hover, .story-button:not(.secondary):hover { border-color: var(--dark, #6f2d43); background: var(--dark, #6f2d43); }
.story-button.secondary { border-color: #dec1cd; background: transparent; color: var(--green, #8b3d56); }
.story-button.secondary:hover { background: #faedf2; }
.story-button:disabled { opacity: .55; }
.story-confirm-delete { position: absolute; z-index: 15; inset: auto 15px 18px; padding: 18px; border: 1px solid #e8ced8; border-radius: 13px; background: #fffafc; color: var(--ink, #382a30); box-shadow: 0 12px 38px #24101e42; }
.story-confirm-delete h3, .story-confirm-delete strong { display: block; color: #6a3c4e; font-size: 13px; font-weight: 500; line-height: 1.8; }
.story-confirm-delete p { margin-top: 6px; color: #856c78; font-size: 11px; line-height: 1.9; }
.story-confirm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
.story-confirm-actions .story-button { min-height: 37px; padding: 8px 12px; font-size: 10px; }
@keyframes story-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .stories-section { padding: 21px 21px 18px; }
  .stories-rail { gap: 13px; }
  .stories-page-header { gap: 18px; }
  .stories-page-actions { max-width: 245px; justify-content: flex-end; }
  .stories-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); gap: 17px; }
  .story-composer-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
  .story-composer { padding: 26px; }
  .story-preview-canvas { padding: 22px 20px; }
  .story-preview-sample { font-size: 15px; }
}
@media (max-width: 760px) {
  .stories-heading { gap: 12px; }
  .stories-page-header { flex-direction: column; gap: 18px; }
  .stories-page-actions { width: 100%; max-width: none; justify-content: flex-start; }
  .stories-page-actions .story-select { flex: 1; width: 100%; max-width: none; }
  .story-composer-grid { grid-template-columns: minmax(0, 1fr) 210px; gap: 21px; }
  .story-composer-heading h2 { font-size: 22px; }
  .story-composer-textarea { min-height: 150px; }
  .story-preview-sample { font-size: 14px; }
  .story-theme-option { font-size: 10px; }
}
@media (max-width: 620px) {
  .stories-section { padding: 20px 17px 16px; margin-bottom: 25px; border-radius: 15px; }
  .stories-heading { align-items: flex-start; margin-bottom: 16px; }
  .stories-heading > .stories-page-actions { width: auto; max-width: none; gap: 0; }
  .stories-heading .stories-status { display: none; }
  .stories-kicker { font-size: 8px; margin-bottom: 5px; }
  .stories-title { font-size: 16px; }
  .stories-subtitle { font-size: 10px; line-height: 1.9; }
  .stories-more { font-size: 10px; padding-top: 22px; gap: 3px; }
  .stories-more .icon { width: 12px; height: 12px; }
  .stories-rail { gap: 11px; margin: 0 -4px; max-width: calc(100% + 8px); padding: 3px 4px 8px; }
  .story-bubble { flex-basis: 75px; width: 75px; }
  .story-ring { width: 67px; height: 67px; padding: 3px; }
  .story-ring .avatar, .story-ring > img { border-width: 3px; }
  .story-author-name { font-size: 10px; margin-top: 8px; }
  .story-author-note { font-size: 8px; }
  .story-plus { width: 23px; height: 23px; font-size: 16px; right: -2px; }
  .stories-empty, .stories-error, .stories-loading, .stories-status { font-size: 11px; }
  .stories-page-header { margin-bottom: 23px; }
  .stories-page-header .stories-title { font-size: 25px; }
  .stories-page-header .stories-subtitle { font-size: 11px; }
  .stories-page-actions { gap: 8px; }
  .stories-page-actions .story-button { padding: 10px 12px; font-size: 11px; }
  .stories-page-actions .story-select { font-size: 12px; min-height: 41px; }
  .stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .story-preview-card { min-height: 240px; aspect-ratio: 9 / 15; padding: 16px 13px 13px; border-radius: 13px; }
  .story-preview-author { font-size: 9px; gap: 6px; }
  .story-preview-author small { font-size: 8px; }
  .story-preview-author .avatar { width: 25px; height: 25px; font-size: 8px; }
  .story-preview-content { padding: 15px 0; }
  .story-preview-category { font-size: 8px; padding: 2px 7px; margin-bottom: 12px; }
  .story-preview-text { font-size: 13px; line-height: 1.9; letter-spacing: .015em; -webkit-line-clamp: 6; }
  .story-preview-footer { font-size: 8px; gap: 5px; flex-wrap: wrap; }
  .story-preview-footer .icon { width: 11px; height: 11px; }
  .story-sample-note { font-size: 9px; margin-top: 16px; }
  dialog.stories-dialog.is-viewer { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; }
  .story-viewer { width: 100%; height: 100dvh; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .story-viewer-surface { border: 0; padding: calc(25px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .story-progress { inset: calc(12px + env(safe-area-inset-top, 0px)) 10px auto; gap: 4px; }
  .story-viewer-top { gap: 9px; }
  .story-viewer-author > div > strong, .story-viewer-meta strong { max-width: 190px; font-size: 12px; }
  .story-viewer-meta { font-size: 10px; }
  .story-viewer-meta span, .story-viewer-meta small { font-size: 10px; }
  .story-viewer-author { gap: 9px; }
  .story-viewer-author .avatar { width: 37px; height: 37px; }
  .story-viewer-controls { gap: 3px; }
  .story-icon-button { width: 33px; height: 36px; }
  .story-icon-button .icon { width: 20px; height: 20px; }
  .story-viewer-body { padding: 28px 17px; }
  .story-viewer-text { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.95; }
  .story-category { font-size: 11px; padding: 4px 11px; }
  .story-viewer-bottom { padding-top: 16px; gap: 8px; }
  .story-like-button { min-height: 42px; font-size: 12px; padding: 9px 14px; }
  .story-expiry { font-size: 10px; }
  .story-demo-label { font-size: 8px; }
  .story-step-button { top: 50%; width: 29px; height: 44px; border: 0; border-radius: 6px; background: #1c10251a; }
  .story-step-button.prev { left: 3px; }
  .story-step-button.next { right: 3px; }
  .story-step-button .icon { width: 18px; height: 18px; }
  .story-step-button:disabled { opacity: .12; }
  .story-viewer-hint { display: none; }
  .story-confirm-delete { inset: auto 18px calc(20px + env(safe-area-inset-bottom, 0px)); padding: 20px; border-radius: 14px; }
  .story-confirm-delete h3, .story-confirm-delete strong { font-size: 14px; }
  .story-confirm-delete p { font-size: 12px; }
  .story-confirm-actions .story-button { min-height: 41px; font-size: 11px; padding: 9px 15px; }
  dialog.stories-dialog.is-composer { width: calc(100vw - 24px); max-height: calc(100dvh - 28px); border-radius: 18px; }
  .story-composer { max-height: calc(100dvh - 28px); padding: 23px 20px 22px; }
  .story-composer-heading { gap: 13px; margin-bottom: 23px; }
  .story-composer-heading h2 { font-size: 22px; }
  .story-composer-heading p { font-size: 11px; }
  .story-composer-close { width: 33px; height: 33px; margin-right: -6px; }
  .story-composer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .story-composer-fields { gap: 20px; }
  .story-composer-label { font-size: 12px; }
  .story-composer-label small, .story-composer-label > span:last-child:not(:first-child) { font-size: 10px; }
  .story-composer-textarea { min-height: 165px; padding: 12px; font-size: 16px; line-height: 1.85; }
  .story-category-select, .story-select { min-height: 45px; font-size: 16px; }
  .story-theme-picker { gap: 9px; }
  .story-theme-option { min-height: 46px; font-size: 11px; }
  .story-photo-picker { padding: 12px; }
  .story-photo-input { font-size: 11px; }
  .story-composer-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; padding-top: 20px; }
  .story-composer-actions .story-button { min-height: 44px; padding: 10px 15px; font-size: 12px; }
  .story-composer-preview { position: static; width: min(100%, 260px); justify-self: center; }
  .story-preview-label { font-size: 10px; }
  .story-preview-canvas { padding: 24px 22px; border-radius: 16px; }
  .story-preview-sample { font-size: 16px; }
  dialog.stories-dialog.is-confirm .story-demo-confirm { padding: 25px 22px; }
  .story-demo-confirm h2 { font-size: 20px; }
}
@media (max-width: 360px) {
  .stories-heading { gap: 9px; }
  .stories-title { font-size: 15px; }
  .stories-more { font-size: 9px; }
  .story-viewer-surface { padding-left: 16px; padding-right: 16px; }
  .story-viewer-author > div > strong, .story-viewer-meta strong, .story-viewer-meta { max-width: 155px; }
  .story-viewer-text { font-size: 20px; }
  .story-expiry { font-size: 9px; }
  .story-preview-card { min-height: 215px; padding: 14px 10px 11px; }
  .story-preview-text { font-size: 12px; }
  .story-preview-author { font-size: 8px; }
  .story-preview-author .avatar { width: 22px; height: 22px; }
  .story-composer { padding: 21px 17px; }
  .story-composer-heading h2 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-ring, .story-preview-card, .story-icon-button, .story-like-button, .story-step-button, .story-composer-textarea, .story-select, .story-category-select, .story-theme-option, .story-button { transition: none; }
  .stories-loading::before { animation: none; }
}

/* Keep identity on two distinct lines, including when own-post controls add width. */
.story-viewer .story-viewer-author {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.story-viewer .story-viewer-author > div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  gap: 1px;
}
.story-viewer .story-viewer-author > div > strong,
.story-viewer .story-viewer-meta {
  display: block;
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-viewer .story-viewer-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
}
.story-viewer .story-viewer-text {
  flex-shrink: 0;
  max-height: none;
}