/* =========================================================
   Fix: story card had absolutely-positioned img/video but no
   explicit width/height on the parent, so the parent collapsed
   to 0 height and only the black gradient backing showed.
   ========================================================= */

.instagram-story-strip,
.visible-story-strip,
.dashboard-story-strip,
.fb-stories {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 12px 2px !important;
    scrollbar-width: none;
}
.instagram-story-strip::-webkit-scrollbar,
.visible-story-strip::-webkit-scrollbar,
.dashboard-story-strip::-webkit-scrollbar,
.fb-stories::-webkit-scrollbar { display: none; }

.instagram-story-strip .story-card,
.instagram-story-strip .story-preview-card,
.instagram-story-strip .story-fallback-card,
.instagram-story-strip .add-story,
.visible-story-strip .story-card,
.dashboard-story-strip .story-card,
.fb-stories .story-card {
    position: relative !important;
    flex: 0 0 104px !important;
    width: 104px !important;
    height: 168px !important;
    border-radius: var(--r-md, 18px) !important;
    overflow: hidden !important;
    background:
        linear-gradient(#111, #111) padding-box,
        linear-gradient(135deg, var(--sv-purple, #7c3aed), var(--sv-blue, #2563eb), #ec4899) border-box !important;
    border: 3px solid transparent !important;
    display: block !important;
    text-decoration: none !important;
}

.instagram-story-strip .story-card img,
.instagram-story-strip .story-card video,
.instagram-story-strip .story-preview-card img,
.instagram-story-strip .story-preview-card video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    display: block !important;
    border-radius: 0 !important;
}

.instagram-story-strip .story-card strong,
.instagram-story-strip .story-preview-card strong,
.instagram-story-strip .story-fallback-card strong {
    position: absolute !important;
    z-index: 2 !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.7) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fallback avatar (no story yet) — background-image set inline via style attr */
.instagram-story-strip .story-fallback-card i {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-style: normal !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: rgba(124, 58, 237, .5) !important;
}

/* Add-story tile: show only + button and label, hide the raw form fields */
.instagram-story-strip .add-story {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background:
        linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.14)) padding-box,
        linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed)) border-box !important;
}
.instagram-story-strip .add-story input,
.instagram-story-strip .add-story select,
.instagram-story-strip .add-story small,
.instagram-story-strip .add-story button {
    display: none !important;
}
.instagram-story-strip .add-story .story-plus {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--sv-blue, #2563eb), var(--sv-purple, #7c3aed)) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
}
.instagram-story-strip .add-story strong {
    position: static !important;
    color: var(--ink, #14162b) !important;
    text-shadow: none !important;
    font-size: 12px !important;
}