/* Mobile Twitter/X Style Optimization - Maximize Screen Usage */
/* This file fixes spacing issues on mobile to match Twitter/X experience */
/* NO wasted space on left/right sides - full width posts */

@media (max-width: 768px) {
    
    /* ===== GLOBAL MOBILE CONTAINER FIXES ===== */
    
    /* Remove all side padding from main containers */
    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Page sections - full width */
    .page-section {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* ===== INSIDE TALK / TWITTER FEED MOBILE OPTIMIZATION ===== */
    
    /* Posts container - full width, no side padding */
    #postsContainer,
    .posts-container,
    .boanalyst-tweets-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        background: #000 !important;
    }
    
    /* Individual tweets/posts - full width with minimal internal padding */
    .boanalyst-tweet,
    .tweet,
    #postsContainer .tweet {
        margin: 0 !important;
        padding: 12px 16px !important; /* Minimal side padding like Twitter */
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Tweet container - optimize internal spacing */
    .tweet-container {
        padding: 12px 0 !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    /* Tweet content - full width */
    .tweet-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Tweet text - optimize line height and spacing */
    .tweet-text {
        font-size: 15px !important; /* Twitter standard */
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
    }
    
    /* Avatar - smaller to save space */
    .profile-pic,
    .avatar-logo,
    .tweet-avatar img {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Tweet header - compact */
    .tweet-header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
    }
    
    /* Tweet actions - compact spacing */
    .tweet-actions,
    .tweet-stats {
        gap: 4px !important;
        padding-top: 8px !important;
        margin-top: 8px !important;
        justify-content: space-around !important;
        max-width: 100% !important;
    }
    
    .action-btn,
    .tweet-stats .stat {
        padding: 6px 10px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        min-width: auto !important;
    }
    
    /* ===== FLOCK FEED MOBILE OPTIMIZATION ===== */
    
    /* Flock feed container - full width */
    .flock-feed-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Flock feed header - minimal padding */
    .flock-feed-header {
        padding: 15px 16px 10px 16px !important;
        margin-bottom: 0 !important;
    }
    
    .flock-header-content {
        padding: 0 !important;
    }
    
    .flock-header-content h1 {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }
    
    .flock-header-content p {
        font-size: 14px !important;
        padding: 0 !important;
    }
    
    /* Flock posts container - full width */
    .flock-posts-container {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
    }
    
    /* Individual flock posts - full width */
    .flock-post {
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid var(--flock-border) !important;
        width: 100% !important;
    }
    
    /* Flock post container - minimal padding */
    .flock-post-container {
        padding: 12px 16px !important;
        gap: 12px !important;
    }
    
    /* Flock profile pic - compact */
    .flock-profile-pic {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Flock post header - compact */
    .flock-post-header {
        margin-bottom: 8px !important;
        gap: 8px !important;
    }
    
    /* Flock post text - optimize */
    .flock-post-text {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
        white-space: pre-wrap !important;
    }
    
    /* Flock actions - compact */
    .flock-post-actions {
        gap: 4px !important;
        padding-top: 8px !important;
        margin-top: 8px !important;
        flex-wrap: nowrap !important;
        justify-content: space-around !important;
    }
    
    .flock-action-btn {
        padding: 6px 10px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        min-width: auto !important;
        gap: 4px !important;
    }
    
    /* Flock admin button - full width */
    .flock-admin-actions {
        padding: 10px 16px !important;
        margin: 0 !important;
    }
    
    .flock-create-post-btn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* ===== FORUM MOBILE OPTIMIZATION ===== */
    
    /* Forum container - full width */
    .forum-container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Forum header - minimal padding */
    .forum-header {
        padding: 15px 16px !important;
        margin-bottom: 10px !important;
    }
    
    .forum-header h1 {
        font-size: 1.75rem !important;
    }
    
    /* Forum posts - full width */
    .forum-posts {
        padding: 0 !important;
        gap: 0 !important;
    }
    
    .forum-post {
        margin: 0 !important;
        padding: 12px 16px !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    /* ===== MEDIA CONTENT OPTIMIZATION ===== */
    
    /* Images and videos - full width */
    .tweet-media,
    .flock-post-media,
    .post-media {
        margin: 8px 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .tweet-image,
    .flock-media-item img,
    .flock-media-item video,
    .post-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Media grid - optimize spacing */
    .flock-media-grid {
        gap: 2px !important;
    }
    
    /* ===== SECTION BACKGROUNDS ===== */
    
    /* Inside Talk section - full width */
    #inside-talkSection {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #inside-talkSection .container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .inside-talk-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .inside-talk-header {
        padding: 15px 16px !important;
        margin-bottom: 10px !important;
    }
    
    /* Flock Feed section - full width */
    #flock-feedSection {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #flock-feedSection .container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Forum section - full width */
    #forumSection {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #forumSection .container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* ===== LOADING STATES ===== */
    
    .loading-posts,
    .flock-loading {
        padding: 20px 16px !important;
    }
    
    /* ===== PREVENT HORIZONTAL SCROLL ===== */
    
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Allow specific elements to exceed if needed */
    img, video, svg {
        max-width: 100% !important;
    }
    
    /* ===== REPLY FORMS ===== */
    
    .reply-form {
        margin-top: 8px !important;
        padding: 12px !important;
    }
    
    .reply-input {
        padding: 10px !important;
        font-size: 15px !important;
    }
    
    /* ===== FILTERS AND CONTROLS ===== */
    
    .forum-filters {
        padding: 10px 16px !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .filter-btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* ===== THEME TOGGLE ===== */
    
    .flock-theme-toggle {
        top: 10px !important;
        right: 10px !important;
    }
    
    .flock-theme-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }
    
    /* ===== CREATE POST MODAL ===== */
    
    .flock-create-post-container,
    .create-post-container {
        padding: 0 !important;
    }
    
    .flock-create-post-card,
    .create-post-card {
        margin: 0 !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
    }
    
    /* ===== STATS AND METRICS ===== */
    
    .forum-stats {
        padding: 10px 16px !important;
    }
    
    .stats-grid {
        gap: 10px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    /* ===== AUTHOR INFO ===== */
    
    .author-name {
        font-size: 15px !important;
        font-weight: 700 !important;
    }
    
    .author-handle {
        font-size: 14px !important;
    }
    
    .tweet-date,
    .post-time,
    .flock-post-time {
        font-size: 14px !important;
    }
    
    /* ===== ENSURE NO GAPS ===== */
    
    /* Remove any default margins that create gaps */
    .page-section > .container > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure sections touch each other */
    section {
        margin: 0 !important;
    }
    
    /* ===== SAFE AREA INSETS (for notched phones) ===== */
    
    /* Only apply safe area to top of first element and bottom navigation */
    .flock-feed-header:first-child,
    .inside-talk-header:first-child,
    .forum-header:first-child {
        padding-top: max(15px, env(safe-area-inset-top)) !important;
    }
    
    /* Bottom padding for navigation bar */
    body {
        padding-bottom: max(70px, calc(70px + env(safe-area-inset-bottom))) !important;
    }
}

/* ===== VERY SMALL SCREENS (< 375px) ===== */
@media (max-width: 374px) {
    .boanalyst-tweet,
    .flock-post,
    .forum-post {
        padding: 10px 12px !important;
    }
    
    .tweet-text,
    .flock-post-text {
        font-size: 14px !important;
    }
    
    .action-btn,
    .flock-action-btn {
        padding: 5px 8px !important;
        font-size: 12px !important;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Optimize for horizontal space */
    .flock-feed-header,
    .inside-talk-header,
    .forum-header {
        padding: 10px 16px !important;
    }
    
    .flock-header-content h1,
    .forum-header h1 {
        font-size: 1.25rem !important;
    }
    
    .flock-header-content p {
        font-size: 13px !important;
    }
}