.story-own-tile { position: relative; flex: 0 0 115px; width: 115px; height: var(--story-card-height); }
.story-own-tile > .story-card { width: 100%; height: 100%; }
.story-own-add { position: absolute; z-index: 3; right: 12px; bottom: 50px; display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 2px solid #fff; border-radius: 50%; color: #424b58; background: #f4f5f7; box-shadow: 0 2px 8px #0003; }
.story-own-add svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.story-tile-views { position: absolute; z-index: 2; bottom: 7px; left: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); padding: 3px 6px; border-radius: 12px; color: #fff; background: #15171999; font-size: 11px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.story-card:has(.story-tile-views) .story-card-name { bottom: 34px; }
.story-card:has(.story-tile-views) .story-card-avatar { bottom: 58px; }
.story-own-tile:has(.story-tile-views) .story-own-add { bottom: 72px; }
.story-tile-views svg, .story-viewers-button svg { flex-shrink: 0; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.story-icon-button[data-story-menu-toggle] svg { width: 20px; height: 20px; fill: currentColor; }
.story-viewers-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--story-ui-target,36px); min-height: var(--story-ui-target,36px); padding: 5px 8px; border: 0; border-radius: 18px; color: inherit; background: transparent; font-size: 13px !important; }
.story-viewers-button:hover { background: #ffffff15; }
.story-viewers-button .story-viewers-chevron { width: 13px; height: 13px; }
.story-viewers-label { font-size: 12px; }
.story-social-overlay.is-viewers { align-items: flex-end; padding-bottom: 0; }
.story-social-overlay.is-viewers .story-social-sheet { width: min(480px,100%); height: min(72dvh,640px); max-height: 100%; border-radius: 18px 18px 0 0; }
.story-viewers-grip { flex-shrink: 0; position: relative; height: 24px; touch-action: none; cursor: ns-resize; }
.story-viewers-grip::after { position: absolute; top: 10px; left: 50%; width: 36px; height: 4px; border-radius: 3px; background: #87909d; content: ""; transform: translateX(-50%); }
.story-social-overlay.is-viewers .story-social-body { flex: 1; }
.story-viewer-actions:has(.story-viewers-button:not([hidden])) { flex: 1; }
.story-viewer-actions > .story-viewers-button { margin-right: auto; }
.story-viewer-footer:has(.story-viewers-button:not([hidden])) .story-viewer-counter { display: none; }
.story-social-overlay { position: absolute; z-index: 30; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); background: #07090dbb; }
.story-social-sheet { display: flex; flex-direction: column; width: min(420px,100%); max-height: 100%; min-width: 0; border: 1px solid #50555e; border-radius: 16px; color: #eef0f4; background: #2c2f34; box-shadow: 0 20px 80px #0006; outline: none; }
.story-social-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px dashed #ffffff20; }
.story-social-header h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; }
.story-social-close { flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff30; border-radius: 50%; color: #fff; background: #181a1e; font-size: 24px !important; line-height: 1; }
.story-social-body { min-height: 0; padding: 12px 16px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.story-social-action { display: block; width: 100%; min-height: 44px; padding: 12px 4px; border: 0; border-bottom: 1px dashed #ffffff17; color: #edf0f5; background: transparent; font-size: 13px !important; line-height: 1.4; text-align: left; }
.story-social-action:hover { color: #fff; background: #ffffff09; }
.story-social-status { flex-shrink: 0; margin: 0; padding: 0 16px 14px; color: #c6cdd8; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.story-social-status:empty { padding-bottom: 0; }
.story-social-summary { margin: 0 0 12px; color: #bfc7d3; font-size: 12px; line-height: 1.6; }
.story-social-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; color: #c6cedb; font-size: 12px; }
.story-social-field select, .story-social-search { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #69717d; border-radius: 8px; color: #f3f5fa; background: #363b44; font-size: 16px !important; line-height: 1.3; }
.story-social-search { margin-bottom: 12px; }
.story-social-primary, .story-social-secondary, .story-social-send { min-height: 40px; padding: 9px 12px; border: 1px solid #d6dce5; border-radius: 8px; color: #2e3541; background: #e7eaf0; font-size: 12px !important; line-height: 1.3; }
.story-social-primary, .story-social-secondary { width: 100%; }
.story-social-list { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; }
.story-social-person { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.story-social-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-width: 0; min-height: 0; border-radius: 50%; object-fit: cover; color: #fff; background: #505a6a; font-size: 15px; }
.story-social-name { flex: 1; min-width: 0; color: #edf1f7 !important; text-decoration: none; overflow-wrap: anywhere; font-size: 13px; }
.story-social-send { flex-shrink: 0; }
.story-social-secondary { margin-top: 12px; }
.story-feed-undo { margin-left: 10px; padding: 5px 9px; border: 1px solid #c9ced8; border-radius: 6px; color: #505b6a; background: #fff; font-size: 12px !important; }
@media(max-width:600px) { .story-own-tile { flex-basis: 108px; width: 108px; } .story-social-overlay { align-items: flex-end; padding: 12px; } .story-social-sheet { width: 100%; max-height: 100%; } }
@media(pointer:coarse) { .story-own-add { width: 40px; height: 40px; right: 6px; bottom: 46px; } .story-social-close, .story-social-primary, .story-social-secondary, .story-social-send { min-height: 44px; } .story-social-close { width: 44px; } }