.story-wrap.bc-story-rich { margin-top: 14px; margin-bottom: 14px; padding: 12px 10px 10px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; background: linear-gradient(165deg, rgba(38, 42, 58, 0.5) 0%, rgba(14, 16, 26, 0.92) 55%, rgba(8, 9, 14, 0.96) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.2); } .story-wrap.bc-story-rich .story-row { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 6px 12px; margin: 0 -2px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(236, 176, 24, 0.75) rgba(255, 255, 255, 0.04); } .story-wrap.bc-story-rich .story-row::-webkit-scrollbar { height: 5px; } .story-wrap.bc-story-rich .story-row::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.45); border-radius: 999px; margin: 0 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .story-wrap.bc-story-rich .story-row::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient( 90deg, rgba(247, 177, 21, 0.95) 0%, rgba(255, 94, 168, 0.88) 50%, rgba(139, 92, 246, 0.92) 100% ); box-shadow: 0 0 10px rgba(247, 177, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); border: 1px solid rgba(0, 0, 0, 0.15); } .story-wrap.bc-story-rich .story-row::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #ffd54a 0%, #ff7eb8 50%, #a78bfa 100%); box-shadow: 0 0 14px rgba(247, 177, 21, 0.45); } .story-wrap.bc-story-rich .story-row::-webkit-scrollbar-corner { background: transparent; } .story-wrap.bc-story-rich .story-card { width: 80px; min-width: 80px; border: 0; background: transparent; color: inherit; text-align: center; padding: 0; cursor: pointer; scroll-snap-align: start; transition: transform 0.18s ease; } .story-wrap.bc-story-rich .story-card:hover .story-ring { transform: scale(1.04); } .story-wrap.bc-story-rich .story-card:active { transform: scale(0.97); } .story-wrap.bc-story-rich .story-card:focus-visible { outline: 2px solid rgba(247, 177, 21, 0.95); outline-offset: 5px; border-radius: 12px; } .story-wrap.bc-story-rich .story-ring { width: 68px; height: 68px; margin: 0 auto 7px; border-radius: 50%; padding: 2.5px; background: linear-gradient(145deg, #f7b115 0%, #ff4e95 52%, #8b5cf6 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 16px rgba(139, 92, 246, 0.22), 0 0 24px rgba(247, 177, 21, 0.12); transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.22s ease; } .story-wrap.bc-story-rich .story-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid rgba(10, 12, 22, 0.95); display: block; } .story-wrap.bc-story-rich .story-title { font-size: 10px; font-weight: 700; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .story-wrap.bc-story-rich .story-card.bc-story-card--enter { opacity: 0; transform: translateY(10px) scale(0.94); animation: bcStoryCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--bc-story-delay, 0s); } @keyframes bcStoryCardIn { to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .story-wrap.bc-story-rich .story-card.bc-story-card--enter { animation: none; opacity: 1; transform: none; } } .story-preview-image { width: 100%; max-width: 100%; max-height: 72vh; height: auto; object-fit: contain; border-radius: 12px; background: #050812; display: block; margin: 0 auto; } .story-preview-modal .modal-body { padding: 1rem; overflow: hidden; } .story-preview-modal .modal-content { overflow: hidden; } .story-preview-modal { z-index: 20000 !important; } body.story-no-blur-modal .modal-backdrop.show { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(0, 0, 0, 0.65) !important; z-index: 19990 !important; }