/* ========== Mobile Bottom Bar - Same dimensions on own profile and other user's profile ========== */
/* Single source of truth so Add bar and Guest bar are identical */
:root {
    --mobile-bottom-bar-height: var(--lc-bottom-bar-height, 4rem);
    --mobile-bottom-bar-padding-x: 5%;
    /* Fixed inset for stats layout so left and right are always equal (same px value) */
    --mobile-bottom-bar-inset: 1rem;
    --mobile-bottom-bar-padding-y: 0;
    --mobile-bottom-bar-padding-bottom: env(safe-area-inset-bottom, 0);
    /* Stacked Follow/Message: 28 + 4 + 28 = 60px, vertically centered in 64px bar */
    --mobile-bottom-bar-stacked-btn-height: var(--lc-bottom-bar-stacked-btn-height, 1.75rem);
    --mobile-bottom-bar-stacked-btn-gap: var(--lc-bottom-bar-stacked-btn-gap, 0.25rem);
}

/* CRITICAL: Position relative to viewport; fixed dimensions so bar looks identical on all profile pages */
.mobile-bottom-bar {
    display: none;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    min-height: var(--mobile-bottom-bar-height);
    height: var(--mobile-bottom-bar-height);
    box-sizing: border-box !important;
    padding: var(--mobile-bottom-bar-padding-y) var(--mobile-bottom-bar-padding-x);
    padding-bottom: var(--mobile-bottom-bar-padding-bottom);
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    z-index: 1050;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    justify-content: center;
    flex-direction: row;
    pointer-events: auto;
    margin: 0 !important;
}

/* When bar has stats: 5-column row [spacer] [left stats] [buttons] [right stats] [spacer] */
/* No bar padding: spacers define equal left/right inset */
.mobile-bottom-bar:has(.mobile-bottom-bar-stats-row),
#mobileBottomBar.mobile-bottom-bar:has(.mobile-bottom-bar-stats-row),
main .mobile-bottom-bar:has(.mobile-bottom-bar-stats-row) {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: var(--mobile-bottom-bar-height) !important;
    height: var(--mobile-bottom-bar-height) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-top: 0 !important;
    padding-bottom: var(--mobile-bottom-bar-padding-bottom) !important;
    box-sizing: border-box !important;
    direction: ltr !important;
}

/* Five columns: spacer (narrow) | left stats | center buttons | right stats | spacer (narrow) */
.mobile-bottom-bar-stats-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    direction: ltr !important;
}

/* Empty spacer columns: fixed width = inset from screen edge (equal left and right) */
.mobile-bottom-bar-spacer {
    flex-shrink: 0 !important;
    width: var(--mobile-bottom-bar-inset) !important;
    min-width: var(--mobile-bottom-bar-inset) !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Column 2: Left stats - Publications (top), Reviews (bottom) */
.mobile-bottom-bar-stats-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Column 4: Right stats - Studies (top), Posts (bottom) */
.mobile-bottom-bar-stats-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Column 3: Center - Messages + Add (or Follow, Message, More); must not take full width */
.mobile-bottom-bar-actions-center,
.mobile-bottom-bar-stats-row .mobile-bottom-bar-actions-center,
.mobile-bottom-bar-stats-row .mobile-bottom-bar-own-actions,
.mobile-bottom-bar-stats-row .mobile-bottom-bar-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
}

/* Force center column to content width only (override any width: 100% from base styles) */
#mobileBottomBar .mobile-bottom-bar-stats-row .mobile-bottom-bar-own-actions,
#mobileBottomBar .mobile-bottom-bar-stats-row .mobile-bottom-bar-actions {
    width: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    height: auto !important;
}

.mobile-bottom-bar:has(.mobile-bottom-bar-stats-row) .mobile-bottom-bar-messages-btn,
.mobile-bottom-bar:has(.mobile-bottom-bar-stats-row) .mobile-bottom-bar-add-btn {
    width: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    height: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    min-width: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    min-height: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    max-width: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    max-height: var(--lc-bottom-bar-action-size, 2.75rem) !important;
}

.mobile-bottom-bar:has(.mobile-bottom-bar-stats-row) .mobile-bottom-bar-action-btn {
    min-height: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    min-width: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    height: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    width: var(--lc-bottom-bar-action-size, 2.75rem) !important;
    padding: 0 !important;
    font-size: var(--lc-text-sm, 0.875rem) !important;
}

/* Stat columns and items */
.mobile-bottom-bar-stats-col .mobile-bottom-bar-stat-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.25rem !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
}

.mobile-bottom-bar-stats-left .mobile-bottom-bar-stat-item {
    justify-content: flex-start !important;
    text-align: left !important;
}

.mobile-bottom-bar-stats-right .mobile-bottom-bar-stat-item {
    justify-content: flex-end !important;
    text-align: right !important;
}

.mobile-bottom-bar-stat-number {
    font-size: var(--lc-text-sm, 0.875rem) !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    color: #212529 !important;
    flex-shrink: 0 !important;
}

.mobile-bottom-bar-stat-label {
    font-size: var(--lc-text-xs, 0.75rem) !important;
    line-height: 1.2 !important;
    color: #6c757d !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Tablet: scale bottom-bar stats (phones keep base sizes above) */
@media (min-width: 640px) and (max-width: 1024px) {
    .mobile-bottom-bar-stat-label {
        font-size: var(--lc-text-sm, 0.875rem) !important;
    }

    .mobile-bottom-bar-stat-number {
        font-size: var(--lc-text-base, 1rem) !important;
    }

    .mobile-bottom-bar-stats-left,
    .mobile-bottom-bar-stats-right {
        gap: 4px !important;
    }
}

/* iPad / large tablet — same bar height; scale stat text only */
@media (min-width: 768px) and (max-width: 1024px) {
    .mobile-bottom-bar-stat-label {
        font-size: var(--lc-text-base, 1rem) !important;
    }

    .mobile-bottom-bar-stat-number {
        font-size: var(--lc-text-lg, 1.125rem) !important;
    }
}

/* Own profile: Messages + Add in a row */
.mobile-bottom-bar-own-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Messages link - 44px touch target, matches navbar icon shell */
.mobile-bottom-bar-messages-btn {
    position: relative;
    width: var(--lc-bottom-bar-action-size, 2.75rem);
    height: var(--lc-bottom-bar-action-size, 2.75rem);
    min-width: var(--lc-bottom-bar-action-size, 2.75rem);
    min-height: var(--lc-bottom-bar-action-size, 2.75rem);
    max-width: var(--lc-bottom-bar-action-size, 2.75rem);
    max-height: var(--lc-bottom-bar-action-size, 2.75rem);
    border-radius: 50%;
    background-color: transparent;
    color: #333;
    border: 1px solid #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.mobile-bottom-bar-messages-btn:active {
    transform: scale(0.95);
}

.mobile-bottom-bar-messages-btn i {
    font-size: 1rem;
    line-height: 1;
}

.mobile-bottom-bar-message-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Own profile: Add button - 44px touch target */
.mobile-bottom-bar-add-btn {
    width: var(--lc-bottom-bar-action-size, 2.75rem);
    height: var(--lc-bottom-bar-action-size, 2.75rem);
    min-width: var(--lc-bottom-bar-action-size, 2.75rem);
    min-height: var(--lc-bottom-bar-action-size, 2.75rem);
    max-width: var(--lc-bottom-bar-action-size, 2.75rem);
    max-height: var(--lc-bottom-bar-action-size, 2.75rem);
    border-radius: 50%;
    background-color: transparent;
    color: #333;
    border: 1px solid #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.3s ease;
    font-size: 1rem;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.mobile-bottom-bar-add-btn:active {
    transform: scale(0.95);
    box-shadow: none;
}

.mobile-bottom-bar-add-btn i {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bottom Sheet Panel */
.mobile-bottom-sheet {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    pointer-events: none;
}

.mobile-bottom-sheet.active {
    display: block;
    pointer-events: auto;
}

.mobile-bottom-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-bottom-sheet.active .mobile-bottom-sheet-backdrop {
    opacity: 1;
}

.mobile-bottom-sheet-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mobile-bottom-sheet.active .mobile-bottom-sheet-content {
    transform: translateY(0);
}

/* Header - always visible, never scrolls away */
.mobile-bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    padding-top: max(16px, env(safe-area-inset-top));
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    min-height: 56px;
    box-sizing: border-box;
}

.mobile-bottom-sheet-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* Close button - prominent and always visible */
.mobile-bottom-sheet-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(0, 0, 0, 0.06);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 22px;
    flex-shrink: 0;
}

.mobile-bottom-sheet-close:hover,
.mobile-bottom-sheet-close:active {
    background-color: rgba(0, 0, 0, 0.12);
    color: #000;
}

/* Body with scrollable content */
.mobile-bottom-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* In-body close button - visible fallback when header is off-screen or not noticed */
.mobile-bottom-sheet-close-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 16px;
    padding: 10px 0;
}

.mobile-bottom-sheet-close-inline .mobile-bottom-sheet-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 20px;
}

/* Action buttons */
.mobile-bottom-sheet-action-btn {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: #fff;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-bottom-sheet-action-btn:active {
    background-color: #f5f5f5;
    transform: scale(0.98);
}

.mobile-bottom-sheet-action-btn i,
.mobile-bottom-sheet-margin-icon {
    font-size: 20px;
    color: #0d6efd;
    width: 24px;
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.mobile-bottom-sheet-margin-icon {
    line-height: 1;
    display: inline-block;
}

.mobile-bottom-sheet-action-btn > span:not(.mobile-bottom-sheet-margin-icon) {
    flex: 1;
}

.mobile-bottom-sheet-action-btn:last-child {
    margin-bottom: 0;
}

/* Cancel button - distinct styling */
.mobile-bottom-sheet-cancel-btn {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    color: #6c757d !important;
}

.mobile-bottom-sheet-cancel-btn i {
    color: #6c757d !important;
}

.mobile-bottom-sheet-cancel-btn:active {
    background-color: #e9ecef !important;
}

/* ========== Guest bar (other user's profile): Follow, Message, More - same bar dimensions as Add bar ========== */
/* Do NOT override height or padding - inherit from .mobile-bottom-bar so both bars are identical */
.mobile-bottom-bar-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.mobile-bottom-bar-actions {
    display: flex;
    align-items: center; /* Same row, vertically centered */
    justify-content: space-between;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

/* All three buttons: same row, same size. Override Bootstrap .btn so Follow matches Message/More */
.mobile-bottom-bar-action-btn,
.mobile-bottom-bar-action-btn.btn,
.mobile-bottom-bar-action-btn.btn-outline-primary,
.mobile-bottom-bar-action-btn.btn-success {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem !important;
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    padding: 0 0.75rem !important;
    line-height: 1 !important;
    margin: 0 !important; /* Override Bootstrap .btn block margin / margin-top */
    width: auto !important; /* Override Bootstrap .btn width: 100% so flex controls width */
    border-radius: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #333;
    transition: all 0.2s ease;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    box-sizing: border-box !important;
    vertical-align: middle;
}

.mobile-bottom-bar-action-btn i {
    font-size: 1em;
    flex-shrink: 0;
}

.mobile-bottom-bar-action-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 380px) {
    .mobile-bottom-bar-action-label {
        display: none;
    }
    .mobile-bottom-bar-action-btn {
        padding: 0 0.5rem;
        flex: 1 1 0;
    }
}

/* ========== Stacked Buttons Layout (Follow + Message) ========== */
/* Container for stacked buttons - 28 + 4 + 28 = 60px, centered in 64px bar */
.mobile-bottom-bar-action-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--mobile-bottom-bar-stacked-btn-gap);
    min-width: 80px;
    max-width: 120px;
    flex: 0 0 auto;
    flex-shrink: 0;
    height: auto;
    align-self: center;
    max-height: calc(
        var(--mobile-bottom-bar-stacked-btn-height) * 2 +
        var(--mobile-bottom-bar-stacked-btn-gap)
    );
}

/* Stacked button style - compact but readable within fixed bar height */
.mobile-bottom-bar-stacked-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: var(--mobile-bottom-bar-stacked-btn-height) !important;
    min-height: var(--mobile-bottom-bar-stacked-btn-height) !important;
    max-height: var(--mobile-bottom-bar-stacked-btn-height) !important;
    padding: 0 8px !important;
    border-radius: calc(var(--mobile-bottom-bar-stacked-btn-height) / 2);
    font-size: var(--lc-text-xs, 0.75rem);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #dee2e6;
    background-color: #fff;
    color: #333;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    line-height: 1;
    flex-shrink: 0;
}

.mobile-bottom-bar-stacked-btn i {
    font-size: 0.6rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Label always visible for stacked buttons */
.mobile-btn-label {
    display: inline !important;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

/* Hide old label classes */
.mobile-follow-label,
.mobile-action-label {
    display: none !important;
}

/* State: Not Following - Blue outline, user-plus icon */
.mobile-bottom-bar-follow-btn.mobile-follow-state-not-following,
.mobile-bottom-bar-follow-btn[data-state="not-following"] {
    border: 1px solid #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent !important;
}

/* State: Following - Green solid, user-check icon */
.mobile-bottom-bar-follow-btn.mobile-follow-state-following,
.mobile-bottom-bar-follow-btn[data-state="following"] {
    background-color: #198754 !important;
    border: 1px solid #198754 !important;
    color: #fff !important;
}

/* State: Pending - Amber/orange, hourglass icon */
.mobile-bottom-bar-follow-btn.mobile-follow-state-pending,
.mobile-bottom-bar-follow-btn[data-state="pending"] {
    background-color: #ffc107 !important;
    border: 1px solid #ffc107 !important;
    color: #212529 !important;
    cursor: not-allowed;
    opacity: 0.85;
}

/* State: Loading - Spinner animation */
.mobile-bottom-bar-follow-btn.mobile-follow-state-loading,
.mobile-bottom-bar-follow-btn[data-state="loading"] {
    background-color: #6c757d !important;
    border: 1px solid #6c757d !important;
    color: #fff !important;
    pointer-events: none;
}

.mobile-bottom-bar-follow-btn.mobile-follow-state-loading .mobile-follow-icon,
.mobile-bottom-bar-follow-btn[data-state="loading"] .mobile-follow-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Message button in stacked layout - subtle gray outline */
.mobile-bottom-bar-stacked-btn.mobile-bottom-bar-message-btn {
    border: 1px solid #6c757d !important;
    color: #495057 !important;
    background-color: transparent !important;
}

.mobile-bottom-bar-stacked-btn.mobile-bottom-bar-message-btn i {
    color: #0d6efd;
}

/* Legacy compatibility */
.mobile-bottom-bar-follow-btn.btn-success {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}

.mobile-bottom-bar-follow-btn.btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
    background-color: transparent;
}

.mobile-bottom-bar-follow-status {
    flex-shrink: 0;
}

.mobile-bottom-bar-follow-status .badge {
    font-size: 12px;
}

/* Responsive: Show bottom bar only on mobile/tablet - re-evaluates on window resize */
@media (max-width: 1024px) {
    .mobile-bottom-bar,
    main .mobile-bottom-bar,
    body .mobile-bottom-bar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide header Follow/Message when bottom bar is visible - priority to bottom bar */
    .profile-header-container .profile-header-follow-message-actions {
        display: none !important;
    }

    /* Hide header More options (profile menu) when bottom bar is visible - priority to bottom bar */
    .profile-header-container .profile-actions .profile-menu-container {
        display: none !important;
    }
}

/* Responsive: Hide on desktop */
@media (min-width: 1025px) {
    .mobile-bottom-bar,
    main .mobile-bottom-bar,
    body .mobile-bottom-bar {
        display: none !important;
    }
    
    .mobile-bottom-sheet {
        display: none !important;
    }
}

/* More-options sheet (guest profile) - same as main sheet */
#mobileBottomSheetMore.active {
    display: block;
    pointer-events: auto;
}

#mobileBottomSheetMore .mobile-bottom-sheet-content {
    transform: translateY(100%);
}

#mobileBottomSheetMore.active .mobile-bottom-sheet-content {
    transform: translateY(0);
}

/* CRITICAL: Force hide all old mobile-add-btn elements everywhere */
.mobile-add-btn,
span.mobile-add-btn,
button.mobile-add-btn,
.nav-link .mobile-add-btn,
#profileTabs .mobile-add-btn,
.mobile-add-btn.d-block,
.mobile-add-btn.d-none {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Small mobile: Full page panel */
@media (max-width: 768px) {
    .mobile-bottom-sheet-content {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Large mobile / Tablet: Half page panel */
@media (min-width: 769px) and (max-width: 1024px) {
    .mobile-bottom-sheet-content {
        height: 60vh;
        max-height: 60vh;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .mobile-bottom-bar {
        background-color: #1a1a1a;
        border-top-color: #333;
    }
    
    .mobile-bottom-bar-stat-number {
        color: #f1f5f9 !important;
    }
    
    .mobile-bottom-bar-stat-label {
        color: #94a3b8 !important;
    }
    
    .mobile-bottom-bar-messages-btn {
        background-color: transparent;
        border-color: #666;
        color: #e0e0e0;
    }
    
    .mobile-bottom-bar-messages-btn i.text-primary {
        color: #0d6efd !important;
    }
    
    .mobile-bottom-bar-action-btn {
        background-color: #2a2a2a;
        border-color: #444;
        color: #e0e0e0;
    }
    
    .mobile-bottom-bar-follow-btn.btn-success {
        background-color: #198754;
        border-color: #198754;
        color: #fff;
    }
    
    .mobile-bottom-bar-follow-btn.btn-outline-primary {
        border-color: #0d6efd;
        color: #0d6efd;
        background-color: transparent;
    }
    
    /* Dark mode: Stacked buttons */
    .mobile-bottom-bar-stacked-btn {
        background-color: #2a2a2a;
        border-color: #444;
        color: #e0e0e0;
    }
    
    .mobile-bottom-bar-stacked-btn.mobile-bottom-bar-message-btn {
        border-color: #555 !important;
        color: #ccc !important;
        background-color: transparent !important;
    }
    
    .mobile-bottom-bar-stacked-btn.mobile-bottom-bar-message-btn i {
        color: #3d8bfd;
    }
    
    /* Dark mode: Follow button states */
    .mobile-bottom-bar-follow-btn.mobile-follow-state-not-following,
    .mobile-bottom-bar-follow-btn[data-state="not-following"] {
        border-color: #3d8bfd !important;
        color: #3d8bfd !important;
        background-color: transparent !important;
    }
    
    .mobile-bottom-bar-follow-btn.mobile-follow-state-following,
    .mobile-bottom-bar-follow-btn[data-state="following"] {
        background-color: #157347 !important;
        border-color: #157347 !important;
        color: #fff !important;
    }
    
    .mobile-bottom-bar-follow-btn.mobile-follow-state-pending,
    .mobile-bottom-bar-follow-btn[data-state="pending"] {
        background-color: #ffca2c !important;
        border-color: #ffca2c !important;
        color: #212529 !important;
    }
    
    .mobile-bottom-sheet-content {
        background-color: #1a1a1a;
    }
    
    .mobile-bottom-sheet-header {
        border-bottom-color: #333;
    }
    
    .mobile-bottom-sheet-title {
        color: #fff;
    }
    
    .mobile-bottom-sheet-close {
        color: #e0e0e0;
        border-color: rgba(255, 255, 255, 0.15);
        background-color: rgba(255, 255, 255, 0.08);
    }
    
    .mobile-bottom-sheet-close:hover,
    .mobile-bottom-sheet-close:active {
        background-color: rgba(255, 255, 255, 0.15);
        color: #fff;
    }
    
    .mobile-bottom-sheet-action-btn {
        background-color: #2a2a2a;
        border-color: #333;
        color: #fff;
    }
    
    .mobile-bottom-sheet-action-btn:active {
        background-color: #333;
    }
    
    .mobile-bottom-sheet-cancel-btn {
        background-color: #333 !important;
        border-color: #444 !important;
        color: #aaa !important;
    }
    
    .mobile-bottom-sheet-cancel-btn i {
        color: #aaa !important;
    }
    
    .mobile-bottom-sheet-cancel-btn:active {
        background-color: #444 !important;
    }
}