/* ── Shared mobile utilities ── */
@media (max-width: 900px) {
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .footer-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .footer-links {
        flex-wrap: wrap;
        overflow: visible;
    }

    .footer-right {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .site-footer {
        font-size: 0.68rem;
    }

    .footer-right a {
        font-size: 1rem;
    }
}

/* ── Landing pages (index, apply) ── */
@media (max-width: 520px) {
    .features-panel {
        padding: 1.5rem 0.75rem;
    }

    .features-brand {
        padding: 0 0.75rem;
    }

    .features-headline {
        font-size: 1rem;
    }

    .form-panel .form-inner {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .form-header h2 {
        font-size: 1.35rem;
    }

    .form-inner {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .feature-card {
        width: min(200px, 72vw);
    }
}

/* ── Feed app: fluid layouts on tablet ── */
@media (max-width: 1100px) {
    .main-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .content-grid,
    .page-view,
    #profile-view,
    #creator-application-view {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        max-width: 100%;
    }

    /* Hide feed + profile right sidebars; posts/feed only */
    #feed-view .sidebar-column,
    #profile-view .profile-sidebar {
        display: none !important;
    }

    #notifications-view {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem;
        height: auto;
        overflow: visible;
        grid-template-rows: none;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #notifications-view > * {
        min-width: 0;
        max-width: 100%;
    }

    #notifications-view .sidebar-column {
        display: none !important;
        width: 100%;
        max-width: none;
    }

    #notifications-view.is-notif-settings-open .sidebar-column {
        display: block !important;
    }

    .notifications-settings-btn {
        display: flex !important;
    }

    .notifications-settings-btn.is-active {
        background: var(--ink);
        color: #fff;
    }

    .notifications-toolbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
    }

    #wallet-view {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem;
        height: auto;
        overflow: visible;
        grid-template-rows: none;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #wallet-view > * {
        min-width: 0;
        max-width: 100%;
    }

    #wallet-view .sidebar-column {
        display: block !important;
        width: 100%;
        max-width: none;
        overflow: visible;
        max-height: none;
        height: auto;
        padding-bottom: 0;
        padding-right: 0;
    }

    #audience-view,
    #purchases-view {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem;
        height: auto;
        overflow: visible;
        grid-template-rows: none;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #audience-view > *,
    #purchases-view > * {
        min-width: 0;
        max-width: 100%;
    }

    #audience-view .sidebar-column,
    #purchases-view .sidebar-column {
        display: block !important;
        width: 100%;
        max-width: none;
    }

    #chats-view {
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(0, 1fr);
    }

    .chats-conversation-pane {
        display: none;
    }

    #chats-view.chat-open .chats-sidebar {
        display: none;
    }

    #chats-view.chat-open .chats-conversation-pane {
        display: flex;
    }

    .conversation-back-btn {
        display: flex;
    }
}

/* ── Feed app: mobile layout ── */
@media (max-width: 900px) {
    :root {
        --mobile-nav-h: 62px;
    }

    body {
        flex-direction: column;
    }

    /* Bottom navigation bar */
    .slim-sidebar {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        border-right: none;
        border-top: 1px solid var(--border-dark);
        padding: 0 10px env(safe-area-inset-bottom, 0px);
        z-index: 200;
        background:
            linear-gradient(0deg, rgba(0, 145, 255, 0.04) 0%, transparent 70%),
            #fafafa;
        gap: 0;
    }

    .sidebar-top {
        display: none;
    }

    .sidebar-nav-link[aria-label="Subscriptions"],
    .sidebar-nav-link[aria-label="Wallet"],
    .sidebar-nav-link[aria-label="Collection"],
    .sidebar-nav-link[aria-label="Become a Creator"],
    .sidebar-nav-link[aria-label="Creator Studio"],
    .sidebar-nav-link[aria-label="Admin"],
    .sidebar-nav-divider,
    .sidebar-promo {
        display: none !important;
    }

    /* Flatten so Home / Messages / Notifications / Search / Profile share one even row */
    .sidebar-nav,
    .sidebar-bottom {
        display: contents;
    }

    .sidebar-nav-link {
        flex: 1 1 0;
        max-width: 72px;
        width: auto;
        height: 44px;
        font-size: 1.15rem;
        margin: 0;
    }

    .sidebar-avatar-wrap {
        position: relative;
        flex: 1 1 0;
        max-width: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
    }

    .sidebar-bottom .sidebar-btn {
        width: 40px;
        height: 40px;
        font-size: 1.05rem;
    }

    .main-container {
        margin-left: 0;
        width: 100%;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding: 1rem 1rem calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .feed-top-bar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 1.25rem;
    }

    .feed-top-bar .logo-wordmark {
        font-size: 1.2rem;
    }

    .feed-top-bar .logo-mark {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        border-radius: 9px;
    }

    .feed-top-bar h1 {
        font-size: 1.25rem;
    }

    .top-bar-right {
        gap: 6px;
        margin-left: auto;
    }

    .wallet-pill {
        font-size: 0.78rem;
        padding: 5px 10px;
    }

    .top-bar-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .feed-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        margin: 0 -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .feed-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-pill,
    .filter-action-btn {
        flex-shrink: 0;
    }

    .stories-filter-tags {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .stories-section .story-card {
        width: 136px;
        height: calc(136px * 16 / 9);
        max-height: none;
        border-radius: 13px;
    }

    .stories-section .story-card-name {
        font-size: 0.78rem;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .stories-section .story-overlay i {
        font-size: 1.75rem;
    }

    .stories-scroll {
        gap: 12px;
    }

    /* ── Search: mobile stack ── */
    .search-hashtags-inline {
        display: block;
        margin: -0.35rem 0 0.35rem;
        padding: 0;
        background: none;
        border: none;
    }

    .search-hashtags-inline .hashtag-cloud {
        /* Chip is ~29px + 8px gap → hard-cap to two rows */
        max-height: calc(29px * 2 + 8px);
        overflow: hidden;
        gap: 8px;
    }

    .search-hashtags-inline .hashtag-chip {
        font-size: 0.78rem;
        padding: 6px 11px;
    }

    .search-hashtags-sidebar {
        display: none !important;
    }

    .search-suggestions-sidebar {
        display: none !important;
    }

    .search-accounts-follow {
        display: block;
    }

    .search-accounts-title-desktop {
        display: none;
    }

    .search-accounts-title-mobile {
        display: inline;
    }

    .search-made-for-you {
        order: 1;
        margin-top: 0.35rem;
    }

    #search-discover-pane #search-suggest {
        display: none !important;
    }

    .discover-spotlight-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .discover-spotlight {
        max-height: none;
        aspect-ratio: 4 / 5;
        border-radius: 14px;
    }

    #search-view .discover-spotlight {
        max-height: min(68vh, 560px);
    }

    .search-panel-tabs {
        padding-bottom: 0.65rem;
    }

    .search-accounts-follow {
        order: 2;
        margin-top: 1.35rem;
    }

    #search-view {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow: hidden;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        align-self: stretch;
    }

    #search-view > * {
        min-width: 0;
        max-width: 100%;
    }

    #search-view .search-panel {
        max-width: 100%;
        width: 100%;
        min-width: 0;
        height: 100%;
        max-height: none;
        overflow: hidden;
        gap: 1rem;
        min-height: 0;
        padding: 1rem;
        border-radius: 12px;
    }

    #search-view .search-panel-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        margin: 0;
        padding: 0 0.15rem 0.75rem;
    }

    #search-view .discover-spotlight {
        max-height: min(68vh, 560px);
    }

    #search-view .creator-result-item {
        padding: 10px 8px;
    }

    #search-view .creator-result-item .audience-avatar {
        width: 40px;
        height: 40px;
    }

    #search-view .search-sidebar {
        display: none;
    }

    #search-view .stories-scroll,
    #search-view .search-slider-container,
    #search-view .stories-filter-tags,
    #search-view .search-hashtags-inline,
    #search-view .search-input-wrap {
        max-width: 100%;
        min-width: 0;
    }

    #search-view .section-title-wrap {
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    #search-view .section-title-wrap h2 {
        min-width: 0;
    }

    #search-view .section-title-wrap .icon-btn {
        flex-shrink: 0;
    }

    #hashtag-view {
        max-width: 100%;
        padding-bottom: 0.5rem;
    }

    .hashtag-view-header {
        padding-bottom: 10px;
    }

    .hashtag-posts-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .page-view,
    #profile-view,
    #creator-application-view {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    #profile-view .profile-sidebar {
        display: none !important;
    }

    .shorts-player {
        height: min(100dvh, calc(100vw * 16 / 9));
        max-width: 100vw;
        gap: 0;
    }

    .shorts-frame {
        width: min(100vw, calc(100dvh * 9 / 16));
        border-radius: 0;
    }

    .profile-avatar-container {
        padding-right: 0;
    }

    .profile-header-actions {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .profile-header-actions .top-bar-btn,
    .profile-header-actions .post-menu-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 0.72rem;
    }

    .profile-header-actions #profile-action-btn {
        height: 30px;
        min-width: 68px;
        padding: 0 12px;
        font-size: 0.78rem;
    }

    .profile-tabs,
    .page-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .profile-tabs::-webkit-scrollbar,
    .page-tabs::-webkit-scrollbar {
        display: none;
    }

    .profile-tab,
    .page-tab {
        flex-shrink: 0;
        padding: 6px 14px;
        font-size: 0.82rem;
    }

    .profile-stats-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .form-row,
    .creator-form-card .form-row {
        grid-template-columns: 1fr;
    }

    .avatar-chooser-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .account-hero {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .account-stat-grid {
        grid-template-columns: 1fr;
    }

    .wallet-summary {
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 0.85rem;
        gap: 12px;
    }

    .wallet-summary-copy {
        width: 100%;
    }

    .wallet-summary-amount {
        font-size: 1.5rem;
    }

    .wallet-summary-actions {
        width: 100%;
    }

    .wallet-toolbar {
        gap: 8px;
        flex-wrap: wrap;
    }

    .wallet-filters {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wallet-filters::-webkit-scrollbar {
        display: none;
    }

    .wallet-add-funds-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 18px;
    }

    #wallet-view .sidebar-column {
        gap: 1rem;
    }

    #wallet-view .sidebar-section {
        padding: 1rem;
    }

    #wallet-view .sidebar-section .btn-secondary {
        min-height: 44px;
    }

    #wallet-view {
        overflow: visible;
        grid-template-rows: auto;
        height: auto;
        padding-bottom: 0.75rem;
        gap: 1rem;
    }

    .support-info-list {
        gap: 10px;
    }

    .support-info-list li {
        font-size: 0.8rem;
    }

    .payment-card-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .payment-card-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .creator-form-card {
        padding: 1.25rem;
    }

    .page-card {
        padding: 1rem;
    }

    .notifications-panel {
        padding: 1rem;
        height: auto;
        max-height: none;
        max-width: 100%;
        width: 100%;
        min-width: 0;
        overflow: visible;
        border-radius: 12px;
    }

    .wallet-panel {
        padding: 1rem;
        height: auto;
        max-height: none;
        max-width: 100%;
        width: 100%;
        min-width: 0;
        overflow: visible;
        border-radius: 12px;
    }

    .wallet-txn-list {
        overflow: visible;
        flex: none;
        margin: 0;
        padding: 0;
    }

    .wallet-empty {
        padding: 1.75rem 1rem;
    }

    .audience-panel,
    .collection-panel {
        padding: 1rem;
        height: auto;
        max-height: none;
        max-width: 100%;
        width: 100%;
        min-width: 0;
        overflow: visible;
        border-radius: 12px;
    }

    .audience-toolbar,
    .collection-toolbar {
        gap: 8px;
        flex-wrap: wrap;
    }

    .audience-filters,
    .collection-filters {
        flex: 1;
        min-width: 0;
    }

    .audience-list,
    #purchases-list,
    #bookmarks-list {
        overflow: visible;
        flex: none;
        margin: 0;
        padding: 0;
    }

    .audience-empty,
    .collection-empty {
        padding: 1.75rem 1rem;
    }

    #audience-view .sidebar-section,
    #purchases-view .sidebar-section {
        padding: 1rem;
    }

    #audience-view,
    #purchases-view {
        overflow: visible;
        grid-template-rows: auto;
        height: auto;
        padding-bottom: 0.5rem;
    }

    .notifications-toolbar {
        gap: 8px;
        flex-wrap: wrap;
    }

    .notifications-filters {
        flex: 1;
        min-width: 0;
    }

    .notifications-list {
        overflow: visible;
        flex: none;
        max-height: none;
        margin: 0;
        padding: 0;
        gap: 4px;
    }

    .notification-item {
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
        max-width: 100%;
    }

    .notification-top {
        align-items: flex-start;
        gap: 8px;
    }

    .notification-text {
        white-space: normal;
        text-overflow: unset;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        line-height: 1.35;
    }

    .notification-time {
        margin-top: 2px;
        font-size: 0.7rem;
    }

    .notification-avatar-wrap,
    .notification-avatar {
        width: 40px;
        height: 40px;
    }

    .notifications-empty {
        padding: 1.75rem 1rem;
    }

    #notifications-view .sidebar-section {
        padding: 1rem;
    }

    .notif-pref-row {
        gap: 12px;
        padding: 11px 0;
    }

    .notif-pref-label {
        font-size: 0.82rem;
    }

    .notif-pref-desc {
        font-size: 0.7rem;
    }

    #notifications-view {
        overflow: visible;
        grid-template-rows: auto;
        height: auto;
        padding-bottom: 0.5rem;
    }

    .user-menu {
        left: auto;
        right: 0;
        bottom: calc(100% + 8px);
        transform: translateY(6px) scale(0.98);
        transform-origin: bottom right;
    }

    .sidebar-avatar-wrap.is-open .user-menu {
        transform: translateY(0) scale(1);
    }

    .feed-toast {
        bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
    }

    .topup-modal-backdrop,
    .chat-limit-overlay {
        align-items: center;
        justify-content: center;
        padding: 12px;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .topup-modal,
    .chat-limit-card,
    #plus-modal-backdrop .chat-limit-card,
    #sub-modal-backdrop .chat-limit-card {
        max-width: calc(100vw - 24px);
        width: 100%;
        margin: 0 auto;
        max-height: min(90dvh, calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        border-radius: 20px;
    }

    .topup-modal-header {
        padding: 1.1rem 1.1rem 0;
        gap: 12px;
    }

    .topup-modal-header h2 {
        font-size: 1.15rem;
    }

    .topup-modal-header p {
        max-width: none;
        font-size: 0.8rem;
        margin-top: 4px;
    }

    .topup-modal-body {
        padding: 1rem 1.1rem 1.15rem;
        gap: 0.95rem;
    }

    #topup-modal-backdrop .topup-modal-header,
    #tip-modal-backdrop .topup-modal-header,
    #unlock-modal-backdrop .topup-modal-header {
        padding: 1.15rem 1.1rem 0.9rem;
    }

    #topup-modal-backdrop .topup-modal-body,
    #tip-modal-backdrop .topup-modal-body,
    #unlock-modal-backdrop .topup-modal-body {
        padding: 1rem 1.1rem 1.15rem;
        gap: 0.9rem;
    }

    .wallet-sheet-brand {
        gap: 10px;
        padding-right: 32px;
    }

    .wallet-sheet-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 1rem;
    }

    #topup-modal-backdrop .topup-modal-header h2,
    #tip-modal-backdrop .topup-modal-header h2,
    #unlock-modal-backdrop .topup-modal-header h2 {
        font-size: 1.2rem;
    }

    #topup-modal-backdrop .topup-modal-header > p,
    #tip-modal-backdrop .topup-modal-header > p,
    #unlock-modal-backdrop .topup-modal-header > p {
        font-size: 0.8rem;
        margin-top: 0.65rem;
    }

    .topup-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .plus-plan-card,
    .creator-package-card {
        padding: 0.9rem 0.95rem;
        gap: 0.75rem;
    }

    .creator-package-card--featured {
        padding: 1rem 1.05rem;
    }

    .plus-plan-head,
    .creator-package-head {
        flex-wrap: nowrap;
        gap: 8px 12px;
        align-items: center;
    }

    .plus-plan-price,
    .creator-package-price {
        text-align: right;
    }

    .creator-package-title {
        font-size: 0.98rem;
    }

    .creator-package-card--featured .creator-package-title {
        font-size: 1.08rem;
    }

    .plus-plan-usage {
        grid-template-columns: 1fr;
    }

    .plus-plan-benefits {
        max-height: min(28vh, 180px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 2px;
    }

    #plus-modal-backdrop .plus-modal-head {
        padding: 1.15rem 1.1rem 0.9rem;
    }

    #plus-modal-backdrop .plus-modal-brand {
        gap: 10px;
        padding-right: 32px;
    }

    #plus-modal-backdrop .plus-modal-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 1.05rem;
    }

    #plus-modal-backdrop .plus-modal-head h2 {
        font-size: 1.2rem;
    }

    #plus-modal-backdrop .plus-modal-price-row strong {
        font-size: 1.25rem;
    }

    #plus-modal-backdrop .chat-limit-body {
        padding: 0.9rem 1.1rem 1.15rem;
        gap: 0.75rem;
    }

    #plus-modal-backdrop .plus-modal-benefits {
        max-height: min(32vh, 220px);
    }

    #plus-modal-backdrop .chat-limit-actions .chat-limit-subscribe {
        width: 100%;
    }

    #sub-modal-backdrop .sub-modal-head {
        padding: 1.15rem 1.1rem 0.9rem;
    }

    #sub-modal-backdrop .sub-modal-brand {
        gap: 10px;
        padding-right: 32px;
    }

    #sub-modal-backdrop .sub-modal-mark {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    #sub-modal-backdrop .sub-modal-head h2 {
        font-size: 1.2rem;
    }

    #sub-modal-backdrop .sub-modal-price-row strong {
        font-size: 1.25rem;
    }

    #sub-modal-backdrop .chat-limit-body {
        padding: 0.9rem 1.1rem 1.15rem;
        gap: 0.75rem;
    }

    #sub-modal-backdrop .chat-limit-actions .chat-limit-subscribe {
        width: 100%;
    }

    .checkout-amount {
        font-size: 1.75rem;
        letter-spacing: -0.7px;
    }

    .checkout-card-panel {
        padding: 0;
        gap: 12px;
        border-radius: 0;
    }

    .checkout-methods {
        border-radius: 14px;
    }

    .checkout-method-option {
        padding: 12px;
        gap: 10px;
    }

    .checkout-method-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.88rem;
    }

    .checkout-card-fields,
    .checkout-crypto-panel {
        padding: 0 12px 12px;
        gap: 12px;
    }

    .checkout-card-grid input,
    .checkout-plain-input {
        font-size: 16px; /* prevent iOS zoom on focus */
        padding: 11px 12px;
    }

    .checkout-address-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .checkout-crypto-option {
        padding: 10px 6px;
        font-size: 0.74rem;
    }

    .checkout-brand-marks {
        gap: 3px;
        padding-right: 8px;
    }

    .checkout-brand-marks .payment-card-icon {
        width: 30px;
        height: 20px;
        font-size: 1.15rem;
    }

    .cancel-modal-actions {
        flex-direction: column;
    }

    .cancel-modal-actions .btn {
        width: 100%;
    }

    /* ── Chats: inbox list ── */
    body.is-chats {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    /* ── Search: scrollable discover / results panel ── */
    body.is-search {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    body.is-search .main-container {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-top: 0.75rem;
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    body.is-search .feed-top-bar {
        flex-shrink: 0;
        margin-bottom: 0.75rem;
    }

    body.is-chats .main-container {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-top: 0.75rem;
        padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    body.is-chats .feed-top-bar {
        flex-shrink: 0;
        margin-bottom: 0.75rem;
    }

    #chats-view {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: hidden;
        align-self: stretch;
    }

    .chats-sidebar {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 1rem 0.9rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .chats-conversation-pane {
        min-width: 0;
    }

    .conversation-header-handle {
        display: none;
    }

    .conversation-header {
        flex-shrink: 0;
        min-width: 0;
        padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px;
        gap: 8px;
    }

    .conversation-header-info {
        min-width: 0;
    }

    .conversation-header-status {
        flex-wrap: wrap;
        gap: 4px 6px;
    }

    .conversation-media-gallery-btn {
        margin-left: 4px;
    }

    .conversation-composer {
        gap: 4px;
        padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        flex-wrap: nowrap;
    }

    .conversation-composer-tools {
        gap: 2px;
        flex: 0 0 auto;
    }

    .conversation-composer input,
    .chats-search-input,
    .conversation-gif-search {
        font-size: 16px; /* prevent iOS zoom */
    }

    .conversation-composer-tip-btn,
    .conversation-composer-action-btn,
    .conversation-composer.has-text .conversation-composer-send-btn,
    .conversation-composer.has-attach .conversation-composer-send-btn {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .conversation-composer.has-text .conversation-composer-send-btn,
    .conversation-composer.has-attach .conversation-composer-send-btn {
        display: flex;
    }

    .conversation-composer.has-text .conversation-composer-action-btn,
    .conversation-composer.has-attach .conversation-composer-action-btn {
        display: none;
    }

    .conversation-composer-gif-btn {
        min-width: 32px;
        font-size: 0.62rem;
        padding: 0 6px;
    }

    .message-row {
        max-width: min(100%, calc(100vw - 24px));
    }

    .message-bubble {
        max-width: min(280px, calc(100vw - 72px));
    }

    .message-bubble-media {
        width: min(200px, calc(100vw - 88px));
        max-height: min(280px, 42vh);
    }

    .message-voice {
        min-width: min(180px, 68vw);
    }

    .conversation-messages {
        padding: 0.75rem 12px;
        gap: 8px;
    }

    .conversation-chat-notice {
        padding: 6px 10px;
        line-height: 1.35;
    }

    .conversation-chat-notice.is-limit {
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.72rem;
        padding: 8px 10px;
        text-align: center;
    }

    .conversation-attach-preview {
        padding: 8px 12px 4px;
        min-width: 0;
    }

    .conversation-attach-draft {
        max-width: min(120px, 42vw);
    }

    .conversation-attach-media {
        max-height: 120px;
    }

    .conversation-voice-bar {
        gap: 8px;
        padding: 8px 12px;
        min-width: 0;
    }

    .conversation-voice-hint {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .conversation-gif-picker {
        flex: 0 0 auto;
        height: min(280px, 38dvh);
        min-height: 0;
        max-height: min(280px, 38dvh);
        overflow: hidden;
        z-index: 2;
    }

    .conversation-gif-picker-top {
        padding: 8px 10px;
    }

    .conversation-gif-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 8px 10px;
    }

    .conversation-gif-attribution {
        padding: 4px 10px 8px;
    }

    .conversation-media-gallery-scroll {
        padding: 12px;
    }

    .chat-media-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .chat-limit-body {
        padding: 0.9rem 1.15rem 1.25rem;
    }

    .chat-limit-body h2 {
        font-size: 1.15rem;
    }

    /* ── Chats: full-screen conversation ── */
    body.is-chats:has(#chats-view.chat-open) .slim-sidebar,
    body.is-chats:has(#chats-view.chat-open) .feed-top-bar {
        display: none;
    }

    body.is-chats:has(#chats-view.chat-open) .main-container {
        padding: 0;
    }

    #chats-view.chat-open .chats-conversation-pane {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
        border: none;
        border-radius: 0;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        background: var(--bg);
    }

    #chats-view.chat-open .chats-conversation-pane.has-thread {
        align-items: stretch;
        justify-content: stretch;
    }

    #chats-view.chat-open .conversation-active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        max-height: 100dvh;
        overflow: hidden;
    }

    #chats-view.chat-open .conversation-main {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #chats-view.chat-open .conversation-messages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    #chats-view.chat-open .conversation-composer,
    #chats-view.chat-open .conversation-attach-preview,
    #chats-view.chat-open .conversation-voice-bar,
    #chats-view.chat-open .conversation-chat-notice {
        flex-shrink: 0;
        z-index: 1;
    }

    #chats-view.chat-open .conversation-composer {
        background: var(--bg);
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    #chats-view.chat-open .conversation-gif-picker {
        flex: 0 0 auto;
        height: min(280px, 38dvh);
        min-height: 120px;
        max-height: min(280px, 38dvh);
        overflow: hidden;
        z-index: 2;
    }

    #chats-view.chat-open .conversation-media-gallery {
        background: #fff;
    }
}

@media (max-width: 600px) {
    .main-container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .wallet-panel {
        padding: 0.85rem;
        border-radius: 12px;
    }

    .wallet-summary-amount {
        font-size: 1.35rem;
    }

    #wallet-view .sidebar-section {
        padding: 0.85rem;
        border-radius: 12px;
    }

    .txn-item {
        padding: 10px 8px;
        gap: 10px;
    }

    .profile-media-grid,
    .profile-sidebar-media-grid,
    #purchases-list.profile-media-grid,
    #bookmarks-list.profile-media-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .avatar-chooser-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .post-actions {
        gap: 12px;
        flex-wrap: wrap;
    }

    .action-btn {
        font-size: 0.85rem;
        gap: 6px;
    }

    .sidebar-nav-link {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .sidebar-bottom .sidebar-btn {
        width: 36px;
        height: 36px;
    }

    .profile-banner {
        height: 140px;
    }

    .profile-avatar-container {
        grid-template-rows: 36px auto;
    }

    .profile-avatar-wrap {
        width: 72px;
        height: 72px;
        top: -36px;
    }

    .profile-large-avatar {
        width: 72px;
        height: 72px;
    }

    .profile-avatar-wrap .online-indicator {
        bottom: 4px !important;
        right: 4px !important;
        width: 12px !important;
        height: 12px !important;
        border-width: 2px !important;
    }

    .profile-title-name {
        font-size: 1.15rem;
    }

    .media-lightbox-stage {
        max-width: calc(100vw - 24px);
    }

    .notification-item {
        padding: 9px 8px;
    }

    .notification-text {
        font-size: 0.82rem;
        -webkit-line-clamp: 4;
    }

    .notifications-panel {
        padding: 0.85rem;
        border-radius: 10px;
    }

    #notifications-view .sidebar-section {
        padding: 0.85rem;
    }

    .conversation-composer {
        gap: 2px;
        padding: 8px 8px max(10px, env(safe-area-inset-bottom, 0px));
    }

    .conversation-composer input {
        padding: 9px 12px;
    }

    .conversation-composer-tools {
        gap: 2px;
    }

    .conversation-composer-tip-btn,
    .conversation-composer-action-btn,
    .conversation-composer.has-text .conversation-composer-send-btn,
    .conversation-composer.has-attach .conversation-composer-send-btn {
        width: 30px;
        height: 30px;
    }

    .conversation-composer-gif-btn {
        min-width: 28px;
        padding: 0 5px;
        font-size: 0.58rem;
    }

    .conversation-gif-picker,
    #chats-view.chat-open .conversation-gif-picker {
        height: min(240px, 34dvh);
        max-height: min(240px, 34dvh);
        min-height: 110px;
        overflow: hidden;
        z-index: 2;
    }

    .conversation-attach-media {
        max-height: 100px;
    }

    .conversation-voice-hint {
        display: none;
    }

    .chats-filter-pill {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .chats-empty-state,
    .conversation-empty-state {
        padding: 1.5rem 1rem;
    }

    .empty-state-3d-img {
        width: 100px;
        height: 100px;
        font-size: 56px !important;
    }
}

@media (max-width: 380px) {
    .sidebar-nav-link {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .conversation-media-gallery-btn {
        font-size: 0;
        gap: 0;
        margin-left: 2px;
    }

    .conversation-media-gallery-btn i {
        font-size: 0.85rem;
    }

    .conversation-header-name {
        font-size: 0.85rem;
    }

    .conversation-composer-gif-btn {
        min-width: 32px;
        font-size: 0.58rem;
        padding: 0 6px;
    }

    .conversation-composer-tip-btn,
    .conversation-composer-action-btn,
    .conversation-composer.has-text .conversation-composer-send-btn,
    .conversation-composer.has-attach .conversation-composer-send-btn {
        width: 32px;
        height: 32px;
    }

    .message-bubble {
        max-width: min(260px, calc(100vw - 64px));
        font-size: 0.82rem;
        padding: 8px 10px;
    }

    .conversation-gif-grid,
    .chat-media-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}