/* SehVarta mobile-first shell stabilization. Loaded last intentionally. */
:root {
    --sv-mobile-header: 58px;
    --sv-mobile-tabs: 52px;
    --sv-mobile-nav: 68px;
}

html, body { min-width: 0; max-width: 100%; }
body { min-height: 100dvh; overflow-x: clip; }
img, video, audio { max-width: 100%; }

.mini-avatar,
.ig-post-avatar,
.ig-reel-avatar,
.profile-avatar-xl,
.profile-dp-clean,
.profile-dp-clean img,
.drawer-profile-card > span,
.account-trigger > span {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background-size: cover !important;
    background-position: center !important;
}

.sv-video-buffering[hidden] { display: none !important; }
.sv-video-player.is-error .sv-video-buffering { display: none !important; }
.sv-video-player.is-error .sv-video-center-btn { display: grid !important; }
.sv-video-player.is-error .sv-video-center-btn::after {
    content: "Retry";
    position: absolute;
    top: calc(100% + 8px);
    color: #fff;
    font: 700 12px/1 system-ui, sans-serif;
}

/* A short landscape media box cannot contain a four-item vertical rail.
   It becomes a compact horizontal safe-area row inside the media. */
.ig-post-media-wrap { overflow: hidden; container-type: inline-size; }
.ig-post-media-wrap[data-action-layout="wide"] .ig-feed-actions-rail,
.ig-post-media-wrap[data-media-aspect="16:9"] .ig-feed-actions-rail,
.ig-post-media-wrap[data-media-aspect="16-9"] .ig-feed-actions-rail {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: 50px;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(44px, 1fr)) !important;
    align-items: end !important;
    gap: 0 !important;
    padding: 16px 8px 6px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .68), transparent) !important;
}
.ig-post-media-wrap[data-action-layout="wide"] .ig-feed-actions-rail > *,
.ig-post-media-wrap[data-media-aspect="16:9"] .ig-feed-actions-rail > *,
.ig-post-media-wrap[data-media-aspect="16-9"] .ig-feed-actions-rail > * {
    display: grid !important;
    place-items: center !important;
    min-width: 44px !important;
}
.ig-post-media-wrap[data-action-layout="wide"] .ig-feed-actions-rail button,
.ig-post-media-wrap[data-media-aspect="16:9"] .ig-feed-actions-rail button,
.ig-post-media-wrap[data-media-aspect="16-9"] .ig-feed-actions-rail button {
    min-width: 44px !important;
    min-height: 40px !important;
    padding: 4px !important;
}

@container (max-width: 440px) {
    .ig-feed-actions-rail:not([data-wide]) { gap: clamp(7px, 2.5cqw, 12px) !important; }
    .ig-feed-actions-rail svg { width: 22px !important; height: 22px !important; }
}

@media (max-width: 760px) {
    body { padding: 0 !important; }
    .social-app-frame { min-height: 100dvh; overflow-x: clip; }

    nav.topbar.auth-topbar {
        top: 0 !important;
        min-height: calc(var(--sv-mobile-header) + env(safe-area-inset-top)) !important;
        height: auto !important;
        padding: max(8px, env(safe-area-inset-top)) 10px 7px !important;
        display: flex !important;
        align-items: flex-end !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }
    nav.topbar.auth-topbar .topbar-left,
    nav.topbar.auth-topbar .topbar-right { min-width: 0 !important; align-items: center !important; }
    nav.topbar.auth-topbar .topbar-left { display: flex !important; flex: 1 1 auto !important; gap: 8px !important; }
    nav.topbar.auth-topbar .topbar-right { display: flex !important; flex: 0 0 auto !important; gap: 5px !important; }
    nav.topbar.auth-topbar .sidebar-toggle-btn,
    nav.topbar.auth-topbar .quick-create-action,
    nav.topbar.auth-topbar .chat-action,
    nav.topbar.auth-topbar .bell-action { display: none !important; }
    nav.topbar.auth-topbar .app-logo { margin: 0 !important; width: 38px !important; min-width: 38px !important; }
    nav.topbar.auth-topbar .brand-logo-img { width: 36px !important; height: 36px !important; object-fit: contain !important; }
    nav.topbar.auth-topbar .brand-name { display: none !important; }
    nav.topbar.auth-topbar .mobile-header-search { display: flex !important; width: auto !important; max-width: none !important; min-width: 132px !important; flex: 1 1 auto !important; margin: 0 !important; }
    nav.topbar.auth-topbar .mobile-header-search input { width: 100% !important; min-width: 0 !important; height: 42px !important; padding: 0 15px !important; font-size: 14px !important; text-align: left !important; }
    nav.topbar.auth-topbar .topbar-right .round-action,
    nav.topbar.auth-topbar .mobile-header-bell-direct,
    nav.topbar.auth-topbar .menu-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; margin: 0 !important; }

    .mobile-feed-tabs {
        top: calc(var(--sv-mobile-header) + env(safe-area-inset-top)) !important;
        min-height: var(--sv-mobile-tabs) !important;
    }
    main.shell.app-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: calc(var(--sv-mobile-nav) + env(safe-area-inset-bottom) + 22px) !important;
        box-sizing: border-box !important;
    }

    nav.mobile-icon-nav.instagram-mobile-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        min-height: calc(var(--sv-mobile-nav) + env(safe-area-inset-bottom)) !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 7px 6px max(7px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(48px, 1fr)) !important;
        align-items: start !important;
    }
    nav.mobile-icon-nav.instagram-mobile-nav a,
    nav.mobile-icon-nav.instagram-mobile-nav label.nav-create {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 3px 2px !important;
        touch-action: manipulation;
    }

    .mobile-side-menu {
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        right: 0 !important;
        z-index: 2001 !important;
        width: min(92vw, 390px) !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;
        border-radius: 22px 0 0 22px !important;
        box-sizing: border-box !important;
    }
    .drawer-fixed-header {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
        padding: max(16px, env(safe-area-inset-top)) 16px 0 !important;
        background: linear-gradient(180deg,#f7f9ff 0%,#fff 100%) !important;
        border-bottom: 1px solid #e8ecf4 !important;
    }
    .drawer-close {
        position: absolute !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        right: 10px !important;
        z-index: 2 !important;
        width: 40px !important;
        height: 40px !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #eef2ff !important;
        color: #344054 !important;
        font-size: 26px !important;
        line-height: 1 !important;
    }
    .drawer-profile-card { flex: 0 0 auto !important; min-height: 76px !important; padding: 8px 48px 12px 4px !important; }
    .drawer-profile-card > span { width: 58px !important; height: 58px !important; }
    .drawer-section-title { flex: 0 0 auto !important; margin: 0 !important; padding: 12px 4px 10px !important; }
    .drawer-menu-list { position:relative !important; z-index:1 !important; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px 12px !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; contain:layout paint; }
    .drawer-menu-list details { flex: 0 0 auto !important; margin: 4px 0 !important; }
    .drawer-menu-list summary { min-height: 58px !important; padding: 8px 10px !important; }
    .drawer-menu-list details > a { min-height: 44px !important; padding: 9px 14px 9px 62px !important; }
    .drawer-fixed-footer { position:relative !important; z-index:2 !important; flex: 0 0 auto !important; padding: 8px 12px max(10px,env(safe-area-inset-bottom)) !important; background:#fff !important; border-top:1px solid #e8ecf4 !important; }
    .drawer-logout { position: static !important; min-height: 56px !important; margin: 0 !important; border-radius:16px !important; }
    body.drawer-open { overflow: hidden !important; }
    .drawer-overlay.is-open { z-index:2000 !important; }

    .social-page-shell,
    .social-page-main,
    .friends-page,
    .connections-page,
    .profile-clean-page {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    .social-page-shell > .social-left-rail,
    .social-page-shell > .social-right-rail { display: none !important; }
    .social-section-card,
    .profile-media-panel,
    .public-profile-card,
    .profile-section-clean { margin: 8px 6px !important; padding: 14px !important; }
    .people-row { width: 100% !important; min-width: 0 !important; grid-template-columns: 48px minmax(0, 1fr) auto !important; gap: 10px !important; padding: 12px 8px !important; }

    .public-profile-cover { min-height: 170px !important; height: 30vw !important; max-height: 220px !important; }
    .public-profile-head { margin: -34px 12px 0 !important; padding: 0 0 12px !important; display: grid !important; grid-template-columns: 78px minmax(0, 1fr) !important; gap: 12px !important; align-items: end !important; }
    .public-profile-head .profile-avatar-xl { width: 78px !important; height: 78px !important; }
    .public-profile-copy { min-width: 0 !important; padding-top: 38px !important; }
    .public-profile-copy h1 { margin: 0 !important; font-size: clamp(22px, 7vw, 30px) !important; overflow-wrap: anywhere; }
    .public-profile-copy p { margin: 3px 0 6px !important; }
    .public-profile-head .profile-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .profile-tabs { overflow-x: auto !important; grid-template-columns: repeat(4, minmax(86px, 1fr)) !important; }
    .profile-media-panel { min-height: 0 !important; }
    .profile-media-panel > .profile-media-grid > p,
    .profile-timeline .empty-state-card { min-height: 0 !important; margin: 0 !important; padding: 18px 4px !important; }

    .ig-post-media-wrap[data-action-layout="wide"] .ig-feed-actions-rail svg,
    .ig-post-media-wrap[data-media-aspect="16:9"] .ig-feed-actions-rail svg { width: 21px !important; height: 21px !important; }

    .share-options.sv-share-sheet:not([hidden]) {
        position: fixed !important;
        z-index: 1901 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: min(82dvh, 620px) !important;
        overflow-y: auto !important;
        padding: 10px 14px max(18px,env(safe-area-inset-bottom)) !important;
        border-radius: 26px 26px 0 0 !important;
        background: #fff !important;
        box-shadow: 0 20px 60px rgba(15, 23, 42, .3) !important;
    }
    .share-options:not([hidden]) > * { min-height: 44px; }
    .share-options:not([hidden]) + .share-earn-cta,
    .share-popover:has(.share-options:not([hidden])) ~ .share-earn-cta { visibility: hidden !important; }

    .guest-topbar { min-height: calc(58px + env(safe-area-inset-top)); padding-top: max(8px, env(safe-area-inset-top)) !important; }
    .guest-topbar .navlinks { position: fixed; z-index: 1500; inset: 0 0 0 auto; width: min(84vw, 340px); padding: calc(70px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; background: #fff; box-shadow: -18px 0 50px rgba(15,23,42,.22); transform: translateX(105%); transition: transform .22s ease; }
    .guest-topbar .navlinks.is-open { transform: translateX(0); }
    .public-menu-toggle { display: grid !important; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #eef4fb; font-size: 24px; }
}

.sv-share-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1900;
    border: 0;
    background: rgba(15,23,42,.48);
    backdrop-filter: blur(2px);
}
.sv-share-handle { width: 42px; height: 5px; min-height: 5px !important; margin: 0 auto 10px; border-radius: 99px; background:#cbd5e1; }
.sv-share-preview { display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; align-items:center; padding:8px; border-radius:16px; background:#f7f8fc; }
.sv-share-preview-media { width:58px; height:58px; border-radius:12px; object-fit:cover; background:linear-gradient(135deg,#dbeafe,#ede9fe); }
.sv-share-preview strong,.sv-share-preview small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-share-preview small{color:#667085;margin-top:3px}
.sv-share-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sv-share-actions a,.sv-share-actions button { min-height:52px; display:flex; align-items:center; justify-content:center; padding:8px; border:0; border-radius:14px; background:#f4f6fb; color:#263244; font:700 12px/1.2 system-ui,sans-serif; text-align:center; text-decoration:none; }
.sv-share-sheet > :not([data-sv-share-ui]) { display:none !important; }

.sv-video-player { background:linear-gradient(135deg,#e8edf6,#cfd8e8) !important; }
.sv-video-player video { background:transparent !important; }
.sv-video-center-btn { width:64px !important; height:64px !important; border-radius:50% !important; background:rgba(17,24,39,.76) !important; box-shadow:0 10px 30px rgba(15,23,42,.28) !important; }
.sv-video-center-btn svg { width:30px !important; height:30px !important; }
.sv-video-player.sv-has-frame { background:#000 !important; }

@media (max-width: 768px) {
    body.chat-active-body .sv-chat-header {
        min-height: calc(62px + env(safe-area-inset-top)) !important;
        height: auto !important;
        padding: max(7px, env(safe-area-inset-top)) 8px 7px !important;
        align-items: end !important;
        box-sizing: border-box !important;
    }
    body.chat-active-body .sv-chat-header .chat-avatar-lg { align-self:end !important; flex:none !important; }
    body.chat-active-body .sv-chat-header .chat-title-block { align-self:end !important; min-width:0 !important; }
    body.chat-active-body .sv-chat-header .chat-head-actions { align-self:end !important; }
    body.chat-active-body .wa-record-row { min-width:0 !important; overflow:hidden !important; }
    body.chat-active-body .wa-record-wave i { transition:height .08s linear !important; animation:none !important; }
}

@media (min-width: 761px) {
    .public-menu-toggle { display: none !important; }
    nav.topbar.auth-topbar .mobile-header-search { display:none !important; }
    .share-options:not([hidden]) { max-width: min(360px, calc(100vw - 32px)) !important; max-height: min(520px, calc(100vh - 32px)) !important; overflow: auto !important; }
    .profile-clean-page, .social-page-main { min-width: 0 !important; }
}