/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Hide mobile-only elements on desktop */
.mobile-nav-menu,
.mobile-menu-backdrop,
.mobile-top-bar,
.mobile-tab-bar {
    display: none;
}

/* Pull to Refresh Indicator */
.pull-refresh-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.2s ease, transform 0.3s ease;
    pointer-events: none;
}

.pull-refresh-indicator .refresh-icon {
    color: var(--primary);
    transition: transform 0.3s ease;
}

.pull-refresh-indicator.refreshing .refresh-icon {
    animation: spin 0.8s linear infinite;
}

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

/* Mobile breakpoint: 768px */
@media (max-width: 768px) {
    
    /* Prevent horizontal scrolling */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
        position: relative;
    }
    
    /* ============================================
       LAYOUT ADJUSTMENTS
       ============================================ */
    
    .page-layout {
        flex-direction: column;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Hide desktop sidebar */
    .sidebar-nav {
        display: none;
    }
    
    /* Hide old mobile header elements */
    .mobile-header,
    .mobile-menu-toggle,
    .mobile-user-controls {
        display: none !important;
    }
    
    /* Hide right sidebar on mobile */
    .right-sidebar {
        display: none;
    }
    
    /* Full width main content */
    main {
        width: 100%;
        max-width: 100vw;
        border-left: none;
        border-right: none;
        min-height: calc(100vh - 116px);
        padding-bottom: 80px;
        margin-top: 56px;
        overflow-x: hidden;
    }
    
    /* ============================================
       MOBILE HEADER
       ============================================ */
    
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--border-primary);
        background: var(--bg-primary);
        position: sticky;
        top: 0;
        z-index: var(--z-header);
    }
    
    /* Show mobile-only elements */
    .mobile-menu-toggle,
    .mobile-user-controls,
    .mobile-nav-profile {
        display: flex;
    }
    
    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        transition: background var(--transition);
    }
    
    .mobile-menu-toggle:hover {
        background: var(--bg-hover);
    }
    
    .mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
    }
    
    /* Mobile logo */
    .sidebar-logo {
        margin-bottom: 0;
    }
    
    .logo {
        width: 32px;
        height: 32px;
    }
    
    .logo-text {
        font-size: 1.125rem;
    }
    
    /* Mobile user controls */
    .mobile-user-controls {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }
    
    .mobile-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-weight: 700;
        font-size: 0.875rem;
    }
    
    /* ============================================
       MOBILE NAVIGATION DRAWER
       ============================================ */
    
    /* Mobile Menu Backdrop */
    .mobile-menu-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        cursor: pointer;
    }
    
    .mobile-menu-backdrop.active {
        opacity: 1;
        visibility: visible;
        display: block;
    }
    
    /* Mobile Slide-Out Menu */
    .mobile-nav-menu {
        display: flex;
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        background: #000000;
        z-index: 9999;
        transition: left 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        flex-direction: column;
        border-right: 1px solid var(--border-primary);
    }
    
    .mobile-nav-menu.active {
        left: 0;
    }
    
    /* Mobile menu close button */
    .mobile-menu-close {
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        z-index: 10;
    }
    
    .mobile-menu-close svg {
        width: 20px;
        height: 20px;
    }
    
    /* Nav items styling */
    .mobile-nav-menu .nav-item {
        margin: 0 var(--spacing-md);
        padding: var(--spacing-md) var(--spacing-lg);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        color: var(--text-primary);
        text-decoration: none;
        font-size: 1.125rem;
        font-weight: 500;
    }
    
    .mobile-nav-menu .nav-item svg {
        width: 24px;
        height: 24px;
        stroke-width: 2;
        flex-shrink: 0;
    }
    
    /* Mobile nav profile section */
    .mobile-nav-profile {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-lg);
        border-bottom: 1px solid var(--border-primary);
        margin-bottom: var(--spacing-md);
    }
    
    .mobile-nav-profile-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--white);
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--black);
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: var(--spacing-md);
    }
    
    .mobile-nav-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-weight: 700;
        font-size: 1.5rem;
        margin-bottom: var(--spacing-md);
    }
    
    .mobile-nav-name {
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-primary);
        margin-bottom: 4px;
    }
    
    .mobile-nav-username {
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-primary);
        margin-bottom: 4px;
    }
    
    .mobile-nav-handle {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin-bottom: var(--spacing-md);
    }
    
    .mobile-nav-stats {
        display: flex;
        gap: var(--spacing-lg);
    }
    
    .mobile-nav-stat {
        display: flex;
        gap: 4px;
        font-size: 0.875rem;
    }
    
    .mobile-nav-stat-value {
        font-weight: 700;
        color: var(--text-primary);
    }
    
    .mobile-nav-stat-label {
        color: var(--text-secondary);
    }
    
    /* Mobile nav items */
    .nav-item {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-xs);
    }
    
    /* Mobile logout button in drawer */
    .mobile-nav-menu .mobile-logout-btn {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        margin: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
        padding: var(--spacing-md) var(--spacing-lg);
        border-radius: var(--radius-lg);
        background: transparent;
        border: 1px solid var(--border-primary);
        color: var(--text-primary);
        font-size: 1.125rem;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        margin-top: auto;
    }
    
    /* ============================================
       FLOATING ACTION BUTTON (Mobile)
       ============================================ */
    
    .mobile-fab {
        display: flex;
    }
    
    /* ============================================
       MAINTENANCE BANNER (Mobile)
       ============================================ */
    
    .maintenance-banner {
        padding: var(--spacing-md);
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .maintenance-banner-content {
        gap: var(--spacing-md);
        flex-direction: row;
        width: 100%;
        box-sizing: border-box;
    }
    
    .maintenance-banner svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    
    .maintenance-banner-text {
        flex: 1;
        min-width: 0;
    }
    
    .maintenance-banner-text strong {
        font-size: 0.875rem;
    }
    
    .maintenance-banner-text span {
        font-size: 0.8125rem;
        display: block;
    }
    
    /* ============================================
       CATEGORY TABS (Mobile)
       ============================================ */
    
    .category-tabs-container {
        position: sticky;
        top: 0;
    }
    
    .category-tab {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 0.875rem;
    }
    
    /* ============================================
       POST CARDS (Mobile)
       ============================================ */
    
    .post-item {
        padding: var(--spacing-lg);
    }
    
    .post-item-avatar {
        display: none;
    }
    
    .post-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    .post-title {
        font-size: 1rem;
    }
    
    .post-description,
    .post-text {
        font-size: 0.875rem;
    }
    
    .post-actions {
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .vote-action svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .post-action-pill {
        font-size: 0.8125rem;
        padding: 6px 10px;
        gap: 6px;
    }
    
    .post-action-pill svg {
        width: 16px;
        height: 16px;
    }
    
    .action-pill {
        font-size: 0.75rem;
        padding: 6px var(--spacing-md);
    }
    
    /* ============================================
       COMMENTS (Mobile)
       ============================================ */
    
    .comment-item {
        padding: var(--spacing-md);
    }
    
    .comment-avatar {
        width: 36px;
        height: 36px;
    }
    
    .comment-input-avatar {
        width: 36px;
        height: 36px;
    }
    
    .comment-text {
        font-size: 0.875rem;
    }
    
    .comment-actions-row {
        gap: var(--spacing-md);
    }
    
    /* ============================================
       PROFILE (Mobile)
       ============================================ */
    
    .profile-cover {
        height: 150px;
    }
    
    .profile-avatar-container {
        top: -48px;
        left: var(--spacing-md);
    }
    
    .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 2rem;
        border-width: 3px;
    }
    
    .profile-avatar-upload {
        width: 32px;
        height: 32px;
    }
    
    .profile-info {
        padding: var(--spacing-md);
    }
    
    .profile-name {
        font-size: 1.25rem;
    }
    
    .profile-stats {
        gap: var(--spacing-lg);
        flex-wrap: wrap;
    }
    
    /* ============================================
       MODALS (Mobile)
       ============================================ */
    
    .modal {
        padding: 0;
        align-items: flex-end;
    }
    
    .modal-content {
        max-width: 100%;
        width: 100%;
        max-height: 95vh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        animation: modalSlideUp 0.3s ease;
    }
    
    @keyframes modalSlideUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .modal-header {
        padding: var(--spacing-lg) var(--spacing-xl);
    }
    
    .modal-body {
        padding: var(--spacing-lg) var(--spacing-xl);
    }
    
    .modal-footer,
    .modal-actions {
        padding: var(--spacing-lg) var(--spacing-xl);
        flex-direction: column-reverse;
    }
    
    .modal-footer button,
    .modal-actions button {
        width: 100%;
    }
    
    /* Modal form elements on mobile */
    .modal-content input,
    .modal-content textarea,
    .modal-content select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .modal-content textarea {
        min-height: 100px;
    }
    
    /* Edit Profile Modal - Mobile */
    .edit-cover-preview {
        height: 150px;
    }
    
    .edit-profile-avatar-section {
        padding: var(--spacing-lg) var(--spacing-lg);
        gap: var(--spacing-md);
    }
    
    .edit-avatar-preview {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .edit-profile-name {
        font-size: 1rem;
    }
    
    .edit-profile-handle {
        font-size: 0.875rem;
    }
    
    .edit-photo-overlay span {
        font-size: 0.8125rem;
    }
    
    .file-upload-label {
        width: 100%;
        justify-content: center;
    }
    
    .alert-warning {
        padding: var(--spacing-md);
    }
    
    /* Share Modal Mobile */
    .share-options {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--spacing-lg);
    }
    
    .share-option {
        padding: var(--spacing-md);
    }
    
    .share-icon {
        width: 40px;
        height: 40px;
    }
    
    .share-label {
        font-size: 0.75rem;
    }
    
    /* ============================================
       BUTTONS (Mobile)
       ============================================ */
    
    .btn-post {
        display: flex;
        position: fixed;
        bottom: 90px;
        right: var(--spacing-lg);
        width: 56px;
        height: 56px;
        max-width: 56px;
        padding: 0;
        border-radius: 50%;
        background: var(--primary);
        color: var(--white);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: var(--z-fab);
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    
    .btn-post span {
        display: none;
    }
    
    .btn-post::before {
        content: '+';
        font-size: 28px;
        font-weight: 300;
        line-height: 1;
    }
    
    .btn-post:hover {
        transform: scale(1.05);
    }
    
    .btn-post:active {
        transform: scale(0.95);
    }
    
    .btn-secondary,
    .btn-follow {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }
    
    /* ============================================
       FORMS (Mobile)
       ============================================ */
    
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .comment-input {
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 60px;
    }
    
    /* ============================================
       SEARCH (Mobile)
       ============================================ */
    
    .search-box {
        padding: 0 var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .search-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Search Bar Header */
    .search-bar-container {
        display: none;
    }
    
    .search-bar-inner input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 40px;
    }
    
    .search-bar-inner .search-icon {
        left: var(--spacing-md);
    }
    
    .search-results {
        left: var(--spacing-md);
        right: var(--spacing-md);
        max-width: calc(100% - 2 * var(--spacing-md));
    }
    
    /* ============================================
       POST HEADER BAR (Mobile)
       ============================================ */
    
    .post-header-bar {
        padding: var(--spacing-md);
    }
    
    .post-back-btn {
        font-size: 0.875rem;
    }
    
    .post-header-avatar {
        width: 36px;
        height: 36px;
    }
    
    /* ============================================
       STICKY PROFILE BAR (Mobile)
       ============================================ */
    
    .sticky-profile-bar {
        padding: var(--spacing-md);
    }
    
    .sticky-profile-avatar {
        width: 36px;
        height: 36px;
    }
    
    /* ============================================
       LINK PREVIEW (Mobile)
       ============================================ */
    
    .link-preview-image {
        height: 160px;
    }
    
    .link-preview-content {
        padding: var(--spacing-md);
    }
    
    .link-preview-title {
        font-size: 0.9375rem;
    }
    
    .link-preview-description {
        font-size: 0.8125rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .link-preview-domain {
        font-size: 0.75rem;
    }
    
    /* ============================================
       IMAGE (Mobile)
       ============================================ */
    
    .post-image {
        max-height: 350px;
        border-radius: var(--radius-sm);
    }
    
    /* ============================================
       LIGHTBOX (Mobile)
       ============================================ */
    
    .lightbox {
        padding: var(--spacing-md);
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 80%;
    }
    
    .lightbox-close {
        top: var(--spacing-lg);
        right: var(--spacing-lg);
        width: 40px;
        height: 40px;
    }
    
    /* ============================================
       TOAST (Mobile)
       ============================================ */
    
    #toastContainer {
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - calc(var(--spacing-md) * 2));
    }
    
    .toast {
        min-width: unset;
        max-width: 100%;
        font-size: 0.8125rem;
        width: 100%;
    }
    
    @keyframes toastSlideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* ============================================
       DROPDOWN (Mobile)
       ============================================ */
    
    .dropdown-content {
        min-width: 180px;
    }
    
    .dropdown-item {
        padding: var(--spacing-md);
        font-size: 0.875rem;
    }
    
    /* ============================================
       LOAD MORE (Mobile)
       ============================================ */
    
    .load-more-container {
        padding: var(--spacing-lg);
    }
    
    .load-more-btn,
    .btn-load-more {
        width: 100%;
        padding: var(--spacing-md);
        justify-content: center;
    }
    
    /* ============================================
       SIGNUP BOTTOM BAR (Mobile)
       ============================================ */
    
    .signup-bar-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }
    
    .signup-bar-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .btn-bar {
        width: 100%;
        justify-content: center;
    }
    
    .feed-overlay.visible {
        bottom: 0;
    }
    
    /* ============================================
       TRENDING (Mobile in drawer)
       ============================================ */
    
    .trending-item {
        padding: var(--spacing-md);
    }
    
    .trending-title {
        font-size: 0.875rem;
    }
    
    /* ============================================
       SIDEBAR FOOTER (Mobile)
       ============================================ */
    
    .sidebar-footer {
        padding-top: var(--spacing-md);
    }
    
    /* ============================================
       COFFEE LINK (Mobile)
       ============================================ */
    
    .coffee-link {
        padding: var(--spacing-md);
    }
    
    .coffee-title {
        font-size: 0.875rem;
    }
    
    .coffee-subtitle {
        font-size: 0.75rem;
    }
    
    /* ============================================
       USER MENU (Mobile in drawer)
       ============================================ */
    
    .user-avatar-small {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    /* ============================================
       FILE PREVIEW (Mobile)
       ============================================ */
    
    .file-preview img {
        max-height: 300px;
    }
    
    /* ============================================
       BADGES (Mobile)
       ============================================ */
    
    .badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
    
    /* ============================================
       EMPTY STATE (Mobile)
       ============================================ */
    
    .empty-state {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .empty-state svg {
        width: 48px;
        height: 48px;
    }
    
    .empty-state h3 {
        font-size: 1.25rem;
    }
    
    .empty-state p {
        font-size: 0.875rem;
    }
    
    /* ============================================
       CONTENT CONTAINER (Mobile)
       ============================================ */
    
    .content-container {
        padding: var(--spacing-md);
    }
    
    /* ============================================
       HASHTAGS (Mobile)
       ============================================ */
    
    .post-hashtags {
        gap: var(--spacing-xs);
    }
    
    .hashtag {
        font-size: 0.875rem;
    }
    
    /* ============================================
       VOTE BUTTON (Mobile)
       ============================================ */
    
    .vote-btn {
        font-size: 0.75rem;
        padding: 6px var(--spacing-md);
    }
    
    .vote-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .post-vote .vote-btn svg {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* ============================================
       ICON BUTTON (Mobile)
       ============================================ */
    
    .icon-btn {
        width: 32px;
        height: 32px;
    }
    
    /* ============================================
       COMMENT FORM (Mobile)
       ============================================ */
    
    .comment-form {
        padding: var(--spacing-md);
    }
    
    .comment-input-container {
        gap: var(--spacing-sm);
    }
    
    .comment-actions {
        gap: var(--spacing-sm);
    }
    
    /* ============================================
       COMMENTS HEADER (Mobile)
       ============================================ */
    
    .comments-header {
        font-size: 1.125rem;
        padding: var(--spacing-md);
    }
    
    /* ============================================
       INLINE POST COMPOSER (Mobile)
       ============================================ */
    
    .post-composer {
        display: none !important;
    }
    
    /* ============================================
       SIGNUP BANNER (Mobile)
       ============================================ */
    
    .signup-banner {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }
    
    .signup-banner-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }
    
    .signup-icon {
        width: 40px;
        height: 40px;
    }
    
    .signup-title {
        font-size: 1.125rem;
    }
    
    .signup-description {
        font-size: 0.875rem;
    }
    
    .signup-buttons {
        width: 100%;
        flex-direction: column;
    }
    
    .signup-btn,
    .login-btn {
        width: 100%;
        text-align: center;
        padding: var(--spacing-md);
    }
}

/* Tablet adjustments (between 768px and 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .right-sidebar {
        width: 300px;
    }
    
    .sidebar-nav {
        width: 240px;
    }
    
    .nav-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

/* Large screens */
@media (min-width: 1440px) {
    .page-layout {
        max-width: 1440px;
    }
    
    .sidebar-nav {
        width: 300px;
    }
    
    .right-sidebar {
        width: 380px;
    }
    
    /* Notifications - Mobile */
    .notification-item {
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
    }
    
    .notification-icon {
        width: 36px;
        height: 36px;
    }
    
    .notification-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .notification-time {
        font-size: 0.75rem;
    }
    
    .btn-clear-notifications {
        width: 100%;
    }
    
    .composer-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8125rem;
    }
    
    .composer-placeholder {
        font-size: 0.875rem;
    }
    
    .post-composer-expanded {
        padding: var(--spacing-lg);
    }
    
    .composer-title {
        font-size: 1rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .composer-textarea {
        min-height: 100px;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .composer-select {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .composer-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .composer-hint {
        text-align: center;
        order: 2;
        margin-top: var(--spacing-sm);
    }
    
    .btn-composer-post {
        width: 100%;
        order: 1;
    }
}