/* Mobile Optimization Fixes */
/* Clean responsive styles for half-screen and mobile */

/* =====================================================
   GLOBAL MOBILE FOUNDATION
   ===================================================== */

/* Ensure everything scales properly */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow on all pages */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* =====================================================
   HEADER FIX - COMPLETE REWRITE FOR ALL SCREEN SIZES
   Key: Use CSS Grid for predictable 2-row layout
   ===================================================== */

/* Below 1400px: Switch header to grid-based 2-row layout */
@media (max-width: 1400px) {
    header {
        display: grid !important;
        grid-template-columns: minmax(0, auto) 1fr minmax(0, auto) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "left . right"
            "nav nav nav" !important;
        gap: 10px !important;
        padding: 12px 15px !important;
        align-items: center !important;
        justify-content: stretch !important;
        flex-wrap: nowrap !important;
    }

    .header-left {
        grid-area: left !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .header-right {
        grid-area: right !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex: none !important;
    }

    .header-nav {
        grid-area: nav !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        flex: none !important;
    }

    /* Allow children to shrink but don't hide them */
    .header-left > *,
    .header-right > * {
        flex-shrink: 1 !important;
    }
}

/* =====================================================
   MEDIUM VIEWPORT (1200px and below)
   ===================================================== */
@media (max-width: 1200px) {
    header {
        padding: 10px 12px;
        gap: 8px;
    }

    .nav-item {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Wiki search adapts */
    .wiki-search-container {
        max-width: 140px;
        min-width: 60px;
    }

    /* Shrink clock groups */
    .header-clock-group {
        min-width: 60px;
    }

    .header-time-val {
        font-size: 0.9rem;
    }

    /* Dashboard 2-column */
    .dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    .card {
        min-height: 320px;
    }

    /* Brand shrinks */
    .brand-wrapper {
        gap: 6px;
    }

    .scrolling-title {
        font-size: 0.9rem;
        max-width: 100px;
    }

    .header-logo {
        height: 30px;
    }

    /* Hide dividers */
    .header-divider {
        display: none;
    }

    /* Smaller buttons */
    .login-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* Shrink header-right children to prevent overflow */
    .header-right > * {
        flex-shrink: 1;
    }

    #user-count {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
}

/* =====================================================
   MID-RANGE (1000px and below)
   ===================================================== */
@media (max-width: 1000px) {
    header {
        padding: 8px 10px;
        gap: 6px;
    }

    .header-left {
        gap: 8px;
    }

    .header-right {
        gap: 6px;
    }

    .nav-item {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    .wiki-search-container {
        max-width: 100px;
    }

    .scrolling-title {
        max-width: 80px;
        font-size: 0.85rem;
    }

    .header-logo {
        height: 28px;
    }

    /* Hide certain elements to prevent crowding */
    .header-clock-group:nth-child(n+3) {
        display: none;
    }
}

/* =====================================================
   TABLET (900px and below)
   ===================================================== */
@media (max-width: 900px) {
    /* Nav gets styled background on smaller screens */
    .header-nav {
        background: #161616;
        padding: 6px;
        border-radius: 8px;
        border: 1px solid #333;
        flex-wrap: wrap;
    }

    .nav-item {
        flex: 1 1 auto;
        text-align: center;
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    .wiki-search-container {
        max-width: 120px;
    }

    /* Single column dashboard */
    .dashboard {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    /* Cards maintain proper height on tablet */
    .card {
        min-height: 300px;
    }
    
    /* Specific cards need more height */
    #santa-card {
        min-height: 450px;
    }

    /* Clock groups horizontal */
    .header-clock-group {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        width: auto;
    }

    .header-time-label {
        font-size: 0.5rem;
    }

    .header-time-val {
        font-size: 0.85rem;
    }

    #user-count {
        display: none;
    }
}

/* =====================================================
   TABLET SMALLER (768px)
   ===================================================== */
@media (max-width: 768px) {
    .scrolling-title {
        display: none;
    }

    .wiki-search-container {
        max-width: 150px;
        min-width: 60px;
    }

    .header-time-label {
        display: none;
    }
}

/* =====================================================
   SMALL PHONES (600px and below)
   ===================================================== */
@media (max-width: 600px) {
    header {
        padding: 8px;
        gap: 6px;
    }

    /* Proper stacking order - left and right on first row, nav on second */
    .header-left {
        order: 1;
        flex: 0 1 auto;
        gap: 6px;
    }

    .header-right {
        order: 2;
        flex: 0 1 auto;
        gap: 6px;
        flex-wrap: nowrap;
    }

    .header-nav {
        order: 10;
        flex: 1 1 100%;
        padding: 4px;
    }

    .header-logo {
        height: 28px;
    }

    .scrolling-title {
        display: none;
    }

    .wiki-search-container {
        max-width: 100px;
        min-width: 60px;
    }

    .wiki-search-container input {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 6px 8px;
    }

    .header-clock-group {
        gap: 4px;
    }

    .header-time-sub {
        display: none;
    }

    .header-time-label {
        display: none;
    }

    .header-time-val {
        font-size: 0.85rem;
    }

    .login-btn,
    .user-btn {
        padding: 5px 8px;
        font-size: 0.75rem;
    }

    .menu-btn {
        padding: 4px;
    }

    .menu-btn svg {
        width: 20px;
        height: 20px;
    }

    .notification-btn {
        padding: 4px;
    }

    .notification-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Ko-Fi button responsive */
    .kofi-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    .kofi-icon {
        width: 16px;
        height: 16px;
    }

    .nav-item {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
}

/* =====================================================
   VERY SMALL PHONES (480px and below)
   ===================================================== */
@media (max-width: 480px) {
    header {
        padding: 6px;
        gap: 5px;
    }

    .header-left {
        gap: 4px;
    }

    .header-right {
        gap: 4px;
    }

    .header-logo {
        height: 24px;
    }

    .wiki-search-container {
        max-width: 80px;
        min-width: 50px;
    }

    .header-clock-group {
        min-width: 50px;
    }

    .header-time-val {
        font-size: 0.8rem;
    }

    .nav-item {
        padding: 6px 4px;
        font-size: 0.7rem;
    }

    /* Ko-Fi button - hide text on very small screens */
    .kofi-text {
        display: none;
    }
    .kofi-btn {
        padding: 6px 8px;
        border-radius: 50%;
    }

    /* Dropdown panels */
    .settings-dropdown {
        width: 260px;
        left: auto !important;
        right: 0 !important;
    }

    .notification-panel {
        width: 300px !important;
        right: -50px !important;
    }

    .custom-timer-wrapper {
        grid-template-columns: 1fr;
    }

    .rot-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .task-item {
        padding: 10px;
    }
}

/* =====================================================
   EXTRA SMALL (360px and below)
   ===================================================== */
@media (max-width: 360px) {
    header {
        padding: 5px;
    }

    .header-left {
        gap: 3px;
    }

    .header-right {
        gap: 3px;
    }

    .header-logo {
        height: 22px;
    }

    .wiki-search-container {
        display: none;
    }

    .header-clock-group {
        min-width: 45px;
    }

    .header-time-val {
        font-size: 0.75rem;
    }

    .nav-item {
        padding: 5px 3px;
        font-size: 0.65rem;
    }

    .notification-panel {
        width: 280px !important;
        right: -80px !important;
    }
}

/* =====================================================
   TOUCH DEVICE IMPROVEMENTS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    button,
    .nav-item,
    .toggle-switch,
    select {
        min-height: 44px;
    }

    .dropdown-item {
        padding: 12px 15px;
    }

    .task-checkbox {
        transform: scale(1.2);
    }
}

/* =====================================================
   CHAT V2 MOBILE RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    .chat-header-v2 {
        padding: 12px 16px;
    }

    .chat-header-icon {
        width: 36px;
        height: 36px;
    }

    .chat-header-title {
        font-size: 1rem;
    }

    .chat-messages-v2 {
        padding: 12px;
    }

    .chat-group-content,
    .chat-standalone-content {
        max-width: 85%;
    }

    .chat-avatar-v2 {
        width: 34px;
        height: 34px;
    }
    
    /* Standalone message mobile */
    .chat-message-standalone {
        gap: 10px;
        padding: 8px 0;
    }
    
    /* Mini avatars on mobile */
    .chat-avatar-mini {
        width: 22px;
        height: 22px;
        border-radius: 5px;
    }

    .chat-message-item .message-content {
        padding: 10px 14px;
    }

    .chat-text-content {
        font-size: 0.9rem;
    }

    .message-actions {
        position: static;
        opacity: 1;
        margin-top: 4px;
    }

    .chat-gif {
        max-width: 200px;
        max-height: 150px;
    }

    .chat-input-v2 {
        padding: 12px 16px 16px;
        gap: 8px;
    }

    .toolbar-btn {
        width: 38px;
        height: 38px;
    }

    .chat-textarea {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .chat-send-v2 {
        width: 46px;
        height: 46px;
    }

    .emoji-picker-v2,
    .gif-picker {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: calc(100vw - 16px);
    }

    .emoji-grid-v2 {
        grid-template-columns: repeat(7, 1fr);
        max-height: 240px;
    }

    .chat-welcome-v2 {
        padding: 40px 20px;
    }

    .welcome-features {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .chat-header-icon {
        width: 32px;
        height: 32px;
    }

    .chat-avatar-v2 {
        width: 30px;
        height: 30px;
    }
    
    /* Even smaller mini avatars on small phones */
    .chat-avatar-mini {
        width: 20px;
        height: 20px;
        border-radius: 4px;
    }
    
    .chat-inline-avatar {
        padding-top: 1px;
    }

    .chat-username {
        font-size: 0.75rem;
    }

    .emoji-grid-v2 {
        grid-template-columns: repeat(6, 1fr);
    }

    .gif-grid {
        grid-template-columns: 1fr;
    }
}

/* Touch device chat improvements */
@media (hover: none) and (pointer: coarse) {
    .message-actions {
        position: static;
        opacity: 1;
        margin-top: 6px;
    }

    .msg-action-btn {
        min-width: 36px;
        min-height: 36px;
    }

    .toolbar-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .chat-send-v2 {
        min-width: 50px;
        min-height: 50px;
    }
}

/* =====================================================
   XP TRACKER PAGE RESPONSIVE
   ===================================================== */
@media (max-width: 1200px) {
    .tracker-container {
        padding: 0 15px 15px;
    }

    .tracker-controls {
        padding: 12px 15px;
        gap: 12px;
    }

    .tracker-controls.dual-search,
    .tracker-controls.triple-search {
        padding: 15px;
        gap: 12px;
    }

    .skills-grid {
        gap: 10px;
        padding: 15px;
    }

    .skill-card-detailed {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 80px;
    }

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

    #p-name {
        font-size: 1.3rem;
    }

    .clan-table {
        font-size: 0.85rem;
    }
}

@media (max-width: 900px) {
    .tracker-split-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    /* Reorder: Skills Grid (middle) → Tracked Goals (right) → Adventure Log (left) */
    .tracker-split-layout > .results-section {
        order: 1 !important;
    }
    
    .tracker-split-layout > .right-sidebar {
        order: 2 !important;
    }
    
    .tracker-split-layout > .sidebar-panel:not(.right-sidebar) {
        order: 3 !important;
    }

    .sidebar-panel,
    .results-section {
        width: 100%;
        max-height: none;
    }

    .search-section {
        width: 100%;
        max-width: none;
    }

    .search-divider {
        display: none;
    }

    .mode-toggle {
        width: 100%;
        justify-content: center;
    }

    .skill-card-detailed {
        flex: 1 1 calc(50% - 10px);
        min-width: 100px;
    }
}

/* =====================================================
   COMMUNITY/SUGGESTIONS PAGE RESPONSIVE
   ===================================================== */
@media (max-width: 1200px) {
    .chat-container-v2 {
        margin: 0;
        border-radius: 0;
    }

    .suggestions-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .suggestion-card {
        padding: 15px;
    }
}

@media (max-width: 900px) {
    body.community-page {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .chat-container-v2 {
        height: auto;
        min-height: 400px;
        max-height: 70vh;
    }
    
    .community-hub {
        flex-direction: column;
        overflow: visible;
    }
    
    .community-main {
        min-height: 400px;
    }
}

/* =====================================================
   ULTRA SMALL SCREENS - Samsung Fold 4 Front (280px)
   Galaxy Z Flip folded, and other narrow devices
   ===================================================== */
@media (max-width: 320px) {
    /* Base font scaling */
    html {
        font-size: 12px;
    }
    
    body {
        min-width: 260px;
    }
    
    /* Header ultra-compact */
    header {
        padding: 4px 6px !important;
        gap: 4px !important;
    }
    
    .header-left {
        gap: 4px !important;
    }
    
    .header-right {
        gap: 3px !important;
    }
    
    .header-logo {
        height: 20px !important;
    }
    
    .brand-wrapper {
        gap: 4px !important;
    }
    
    .scrolling-title {
        display: none !important;
    }
    
    /* Nav items stack if needed */
    .header-nav {
        gap: 2px !important;
        padding: 3px !important;
        flex-wrap: wrap;
    }
    
    .nav-item {
        padding: 5px 4px !important;
        font-size: 0.6rem !important;
        min-width: auto !important;
    }
    
    /* Hide less critical header elements */
    .wiki-search-container {
        display: none !important;
    }
    
    .header-clock-group {
        display: none !important;
    }
    
    .header-divider {
        display: none !important;
    }
    
    #user-count {
        display: none !important;
    }
    
    /* Compact buttons */
    .menu-btn,
    .notification-btn {
        padding: 3px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .menu-btn svg,
    .notification-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .login-btn,
    .user-btn {
        padding: 4px 6px !important;
        font-size: 0.65rem !important;
        min-height: 28px !important;
    }
    
    /* Dashboard ultra-compact */
    .dashboard {
        padding: 6px !important;
        gap: 8px !important;
    }
    
    .card {
        padding: 10px !important;
        min-height: 280px !important;
        border-radius: 10px !important;
    }
    
    .card-title {
        font-size: 0.6rem !important;
        gap: 4px !important;
    }
    
    .card-main-text {
        font-size: 1.3rem !important;
    }
    
    .card-sub-text {
        font-size: 0.8rem !important;
    }
    
    .icon-img {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Rotation rows */
    .rot-row {
        padding: 4px 0 !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    
    .rot-label {
        font-size: 0.6rem !important;
    }
    
    .rot-val {
        font-size: 0.7rem !important;
    }
    
    /* Tasks ultra-compact */
    .tasks-container {
        padding: 6px !important;
    }
    
    .tab-header {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .tab-header::-webkit-scrollbar {
        display: none;
    }
    
    .tab-btn {
        padding: 6px 4px !important;
        font-size: 0.55rem !important;
        min-width: 45px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .task-item {
        padding: 8px !important;
    }
    
    .task-item label {
        font-size: 0.7rem !important;
    }
    
    /* Modals */
    .modal-content {
        width: 98% !important;
        margin: 5px auto !important;
        padding: 10px !important;
        max-height: 95vh !important;
    }
    
    .modal-content h2 {
        font-size: 1rem !important;
    }
    
    /* Settings dropdown */
    .settings-dropdown {
        width: 240px !important;
        left: 0 !important;
        right: auto !important;
    }
    
    /* Notification panel */
    .notification-panel {
        width: 260px !important;
        max-width: 95vw !important;
        right: -20px !important;
    }
    
    /* Chase items */
    .chase-item {
        width: 26px !important;
        height: 26px !important;
    }
    
    .chase-grid {
        gap: 4px !important;
    }
    
    /* Special box */
    .special-box {
        padding: 8px !important;
    }
    
    .special-name {
        font-size: 0.75rem !important;
    }
    
    /* Flash bar */
    .flash-header-bar {
        padding: 4px 6px !important;
        font-size: 0.65rem !important;
    }
    
    .flash-bar-name {
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Profile modal ultra-small */
    .profile-card {
        width: 95% !important;
        max-width: none !important;
    }
    
    .profile-banner {
        height: 80px !important;
    }
    
    .profile-avatar-container {
        width: 60px !important;
        height: 60px !important;
    }
    
    .profile-name-row {
        font-size: 1rem !important;
    }
    
    .profile-header-content {
        gap: 8px !important;
        padding: 0 10px 10px !important;
        margin-top: -25px !important;
    }
    
    /* XP Tracker */
    .tracker-controls {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .search-box-large {
        flex-direction: column !important;
        gap: 6px !important;
    }
    
    .search-box-large input {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .search-box-large button {
        width: 100% !important;
        padding: 10px !important;
    }
    
    .mode-toggle button {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
    }
    
    /* Skills grid */
    .skills-grid {
        padding: 8px !important;
        gap: 4px !important;
    }
    
    .skill-card-detailed {
        padding: 5px !important;
        min-height: 60px !important;
    }
    
    .skill-lvl {
        font-size: 0.8rem !important;
    }
    
    .skill-icon-lg {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* Profile header in XP tracker */
    .profile-header {
        padding: 10px !important;
    }
    
    #p-avatar {
        width: 50px !important;
        height: 50px !important;
    }
    
    #p-name {
        font-size: 1rem !important;
    }
    
    .stat-pill {
        padding: 2px 6px !important;
        font-size: 0.6rem !important;
    }
    
    /* Clan results */
    .clan-name-title {
        font-size: 1rem !important;
    }
    
    .clan-stats-pills {
        gap: 6px !important;
    }
    
    .stat-pill-box {
        padding: 6px 10px !important;
    }
    
    .pill-label {
        font-size: 0.55rem !important;
    }
    
    .pill-val {
        font-size: 0.75rem !important;
    }
    
    /* Suggestions/Idea Board */
    .suggestions-feed {
        padding: 6px !important;
    }
    
    .suggestion-card {
        padding: 10px !important;
    }
    
    .suggestion-avatar {
        width: 30px !important;
        height: 30px !important;
    }
    
    .suggestion-author {
        font-size: 0.75rem !important;
    }
    
    .suggestion-content {
        font-size: 0.8rem !important;
    }
    
    .reaction-btn {
        padding: 3px 6px !important;
        font-size: 0.65rem !important;
    }
    
    /* Filter/sort controls */
    .filter-dropdown,
    .sort-options {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    .filter-btn,
    .sort-btn {
        padding: 5px 8px !important;
        font-size: 0.6rem !important;
    }
    
    /* Category badges */
    .category-badge {
        padding: 2px 6px !important;
        font-size: 0.55rem !important;
    }
    
    /* Reply items */
    .reply-item {
        padding: 8px !important;
        gap: 6px !important;
    }
    
    .avatar-small {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Floating chat button */
    .floating-chat-btn {
        width: 44px !important;
        height: 44px !important;
        right: 8px !important;
        bottom: 8px !important;
    }
    
    .floating-chat-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Floating chat panel */
    .floating-chat-panel {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        right: 8px !important;
        left: 8px !important;
        bottom: 60px !important;
        max-height: calc(100vh - 80px) !important;
    }
}

/* =====================================================
   EXTRA ULTRA SMALL - Under 280px
   For absolute minimum width support
   ===================================================== */
@media (max-width: 280px) {
    html {
        font-size: 11px;
    }
    
    header {
        padding: 3px 4px !important;
    }
    
    .header-logo {
        height: 18px !important;
    }
    
    .nav-item {
        padding: 4px 3px !important;
        font-size: 0.55rem !important;
    }
    
    .card {
        padding: 8px !important;
        min-height: 250px !important;
    }
    
    .card-main-text {
        font-size: 1.1rem !important;
    }
    
    .tab-btn {
        padding: 5px 3px !important;
        font-size: 0.5rem !important;
        min-width: 38px !important;
    }
    
    .menu-btn,
    .notification-btn {
        min-width: 28px !important;
        min-height: 28px !important;
    }
    
    .login-btn,
    .user-btn {
        padding: 3px 5px !important;
        font-size: 0.6rem !important;
    }
    
    .settings-dropdown {
        width: 220px !important;
    }
    
    .notification-panel {
        width: 240px !important;
    }
    
    .modal-content {
        padding: 8px !important;
    }
}

/* =====================================================
   FLUID SCALING HELPERS
   Use clamp() for smooth scaling between breakpoints
   ===================================================== */

/* Cards - fluid padding */
@media (max-width: 600px) {
    .card {
        padding: clamp(8px, 3vw, 15px);
    }
    
    .card-title {
        font-size: clamp(0.55rem, 2vw, 0.75rem);
    }
    
    .card-main-text {
        font-size: clamp(1.1rem, 5vw, 1.8rem);
    }
}

/* Dashboard gap scaling */
@media (max-width: 600px) {
    .dashboard {
        gap: clamp(6px, 2vw, 15px);
        padding: clamp(6px, 2vw, 15px);
    }
}

/* =====================================================
   IDEA BOARD / SUGGESTIONS PAGE SPECIFIC FIXES
   ===================================================== */

/* Ensure feed takes full width on mobile */
@media (max-width: 768px) {
    .suggestions-container {
        padding: 0 !important;
    }
    
    .suggestions-feed {
        padding: 8px !important;
    }
    
    .suggestion-card {
        border-radius: 10px !important;
    }
    
    /* Voting section compact */
    .vote-section {
        min-width: 40px !important;
        padding: 6px !important;
    }
    
    .vote-count {
        font-size: 1rem !important;
    }
    
    /* Post input area */
    .post-input-area {
        padding: 10px !important;
    }
    
    #suggestion-text {
        min-height: 80px !important;
        font-size: 14px !important;
    }
    
    /* Category selector */
    .category-selector {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    .category-btn {
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
    }
    
    /* Status badges */
    .status-badge {
        padding: 3px 8px !important;
        font-size: 0.65rem !important;
    }
    
    /* Archived pagination */
    .archived-pagination {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .pagination-controls {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .pagination-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 6px !important;
    }
}

/* =====================================================
   XP TRACKER PAGE MOBILE FIXES
   ===================================================== */
@media (max-width: 768px) {
    .tracker-container {
        padding: 8px !important;
    }
    
    /* Ensure sidebars don't overflow */
    .sidebar-panel,
    .right-sidebar,
    .results-section {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Skills grid responsive */
    .skills-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    
    .skill-card-detailed {
        flex: 0 0 calc(33.33% - 6px) !important;
        min-width: 80px !important;
        max-width: 120px !important;
    }
    
    /* Highlights section */
    .highlights-container {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .highlight-card {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .skill-card-detailed {
        flex: 0 0 calc(50% - 4px) !important;
        min-width: 70px !important;
    }
}

@media (max-width: 320px) {
    .skill-card-detailed {
        flex: 0 0 calc(50% - 3px) !important;
        min-width: 60px !important;
        padding: 4px !important;
    }
}

/* =====================================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    .btn,
    .nav-item,
    .tab-btn,
    .category-btn,
    .filter-btn,
    .sort-btn,
    .reaction-btn {
        min-height: 40px;
        min-width: 40px;
    }
    
    /* Prevent accidental double-tap zoom */
    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }
    
    /* Better scrolling */
    .suggestions-feed,
    .chat-messages-v2,
    .skills-grid,
    .modal-content {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* =====================================================
   LANDSCAPE ORIENTATION FIXES
   ===================================================== */
@media (max-height: 450px) and (orientation: landscape) {
    header {
        padding: 4px 10px !important;
    }
    
    .header-nav {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .dashboard {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
    
    .card {
        min-height: 200px !important;
    }
    
    .modal-content {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .profile-card {
        height: 95vh !important;
        max-height: 95vh !important;
        flex-direction: row !important;
    }
    
    .profile-banner {
        height: 60px !important;
    }
}

/* =====================================================
   PREVENT TEXT/ELEMENT CUTOFF
   ===================================================== */

/* Ensure text wraps properly everywhere */
h1, h2, h3, h4, h5, h6,
p, span, div, label {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Long usernames don't break layout */
.user-name,
.username,
.chat-username,
.suggestion-author,
.reply-author,
.profile-name,
#p-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Allow multi-line where needed */
.suggestion-content,
.chat-text-content,
.card-body,
.reply-content {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Tables scroll horizontally on mobile */
.clan-table-wrapper,
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* =====================================================
   SAFE AREA SUPPORT (notched phones)
   ===================================================== */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    header {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
    }
    
    .floating-chat-btn {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .modal-content {
        margin-left: max(10px, env(safe-area-inset-left));
        margin-right: max(10px, env(safe-area-inset-right));
    }
}

/* =====================================================
   BROWSER RESIZE SMOOTH TRANSITIONS
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {
    .dashboard,
    .card,
    header,
    .header-nav,
    .suggestions-feed,
    .tracker-container {
        transition: padding 0.15s ease, gap 0.15s ease;
    }
    
    .skill-card-detailed,
    .suggestion-card,
    .modal-content {
        transition: width 0.15s ease, padding 0.15s ease;
    }
}

/* =====================================================
   SKILLS GRID RESPONSIVE SIZING
   Ensures skill cards resize properly on all screens
   ===================================================== */

/* Medium screens - 3-4 cards per row */
@media (max-width: 768px) {
    .skills-grid {
        gap: 6px !important;
        padding: 8px !important;
    }
    
    .skills-grid .skill-card-detailed {
        flex: 1 1 90px !important;
        min-width: 75px !important;
        max-width: 120px !important;
    }
    
    .skill-card-detailed {
        padding: 8px !important;
        min-height: 90px !important;
    }
    
    .skill-card-detailed .skill-lvl {
        font-size: 1rem !important;
    }
    
    .skill-card-detailed .skill-xp-text,
    .skill-card-detailed .skill-next-text {
        font-size: 0.65rem !important;
    }
    
    .skill-icon-lg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Small screens - cards shrink further */
@media (max-width: 480px) {
    .skills-grid {
        gap: 5px !important;
        padding: 6px !important;
    }
    
    .skills-grid .skill-card-detailed {
        flex: 1 1 70px !important;
        min-width: 65px !important;
        max-width: 100px !important;
    }
    
    .skill-card-detailed {
        padding: 6px !important;
        min-height: 80px !important;
        gap: 2px !important;
    }
    
    .skill-card-detailed .skill-lvl {
        font-size: 0.9rem !important;
    }
    
    .skill-card-detailed .skill-rank {
        font-size: 0.6rem !important;
    }
    
    .skill-card-detailed .skill-xp-text,
    .skill-card-detailed .skill-next-text {
        font-size: 0.6rem !important;
    }
    
    .skill-icon-lg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .skill-progress-track {
        height: 3px !important;
    }
}

/* Very small screens (fold phones, front screen) */
@media (max-width: 360px) {
    .skills-grid {
        gap: 4px !important;
        padding: 4px !important;
    }
    
    .skills-grid .skill-card-detailed {
        flex: 1 1 60px !important;
        min-width: 55px !important;
        max-width: 80px !important;
    }
    
    .skill-card-detailed {
        padding: 5px !important;
        min-height: 70px !important;
        border-radius: 6px !important;
    }
    
    .skill-card-detailed .skill-lvl {
        font-size: 0.85rem !important;
    }
    
    .skill-card-detailed .skill-rank {
        display: none !important;
    }
    
    .skill-card-detailed .skill-xp-text {
        font-size: 0.55rem !important;
    }
    
    .skill-card-detailed .skill-next-text {
        display: none !important;
    }
    
    .skill-icon-lg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Ultra-small screens (280px width) */
@media (max-width: 320px) {
    .skills-grid {
        gap: 3px !important;
        padding: 3px !important;
    }
    
    .skills-grid .skill-card-detailed {
        flex: 1 1 50px !important;
        min-width: 48px !important;
        max-width: 70px !important;
    }
    
    .skill-card-detailed {
        padding: 4px !important;
        min-height: 60px !important;
    }
    
    .skill-card-detailed .skill-lvl {
        font-size: 0.8rem !important;
    }
    
    .skill-card-top {
        margin-bottom: 0 !important;
    }
    
    .skill-icon-lg {
        width: 14px !important;
        height: 14px !important;
    }
    
    .skill-progress-track {
        height: 2px !important;
        margin-bottom: 1px !important;
    }
}

/* =====================================================
   FAVORITES POPUP - ENSURE CLICKABILITY
   ===================================================== */
.favorites-popup {
    z-index: 1000001 !important;
    pointer-events: auto !important;
}

.favorites-popup-backdrop {
    z-index: 1000000 !important;
}

.favorites-popup-content {
    pointer-events: auto !important;
}

.favorite-item {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.favorite-item-remove {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.favorites-popup-close {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* =====================================================
   SKILLS GRID - GLOBAL RESPONSIVE FIX
   Ensures skills grid NEVER overflows on any screen
   ===================================================== */

/* Fix parent containers that hide overflow */
.results-section,
#player-results {
    overflow: visible !important;
}

.skills-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}

.skills-grid .skill-card-detailed {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(16.666% - 8px) !important;
}

/* Ensure skills grid shrinks on small viewports */
@media (max-width: 600px) {
    .skills-grid .skill-card-detailed {
        width: calc(20% - 6px) !important;
        min-width: 60px !important;
        max-width: 100px !important;
    }
}

@media (max-width: 400px) {
    .skills-grid .skill-card-detailed {
        width: calc(25% - 5px) !important;
        min-width: 50px !important;
        max-width: 80px !important;
    }
}

@media (max-width: 320px) {
    .skills-grid .skill-card-detailed {
        width: calc(33.333% - 4px) !important;
        min-width: 45px !important;
        max-width: 70px !important;
    }
}

/* =====================================================
   SMALL PHONE SCROLLING FIX - XP Profile & Clan Pages
   Enables page scrolling on small screens where viewport 
   locking doesn't work well
   ===================================================== */

/* Medium screens - enable scrolling when profile doesn't fit */
@media (max-width: 1024px) {
    /* Enable page scrolling on smaller screens */
    body.xp-page {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Tracker container should be normal flow */
    body.xp-page .tracker-container {
        height: auto !important;
        overflow: visible !important;
        min-height: auto !important;
        flex: none !important;
    }
    
    /* Split layout should stack and be scrollable */
    body.xp-page #tracker-split-layout {
        height: auto !important;
        overflow: visible !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Player profile section */
    body.xp-page #player-results {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    body.xp-page .results-section {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Skills grid - let it flow naturally */
    body.xp-page .skills-grid {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Sidebar panels */
    body.xp-page .sidebar-panel,
    body.xp-page .right-sidebar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    body.xp-page .sidebar-content {
        height: auto !important;
        max-height: 500px !important;
        overflow-y: auto !important;
    }
    
    /* Clan results - make scrollable */
    body.xp-page #clan-results,
    body.xp-page #clan-results[style*="display: block"],
    body.xp-page #clan-results[style*="display:block"] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Clan main grid - stack columns on smaller screens */
    body.xp-page .clan-main-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Clan columns should stack */
    body.xp-page .clan-left-col,
    body.xp-page .clan-right-col {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Clan member table - scrollable within container */
    body.xp-page .table-panel {
        height: auto !important;
        max-height: 600px !important;
        overflow-y: auto !important;
    }
    
    body.xp-page .clan-table-wrapper {
        max-height: 500px !important;
        overflow-y: auto !important;
    }
    
    /* Log list in sidebar */
    body.xp-page .log-list {
        max-height: 400px !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 600px) {
    /* Enable page scrolling on small phones */
    body.xp-page {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Tracker container should be normal flow */
    body.xp-page .tracker-container {
        height: auto !important;
        overflow: visible !important;
        min-height: auto !important;
    }
    
    /* Split layout should stack and be scrollable */
    body.xp-page #tracker-split-layout {
        height: auto !important;
        overflow: visible !important;
        min-height: auto !important;
    }
    
    /* Player profile section */
    body.xp-page #player-results {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    body.xp-page .results-section {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Skills grid - let it flow naturally */
    body.xp-page .skills-grid {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Sidebar panels */
    body.xp-page .sidebar-panel,
    body.xp-page .right-sidebar {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    body.xp-page .sidebar-content {
        height: auto !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }
    
    /* Clan results - make scrollable */
    body.xp-page #clan-results,
    body.xp-page #clan-results[style*="display: block"],
    body.xp-page #clan-results[style*="display:block"] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Clan main grid - stack columns on mobile */
    body.xp-page .clan-main-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        grid-template-columns: 1fr !important;
    }
    
    /* Clan columns should stack */
    body.xp-page .clan-left-col,
    body.xp-page .clan-right-col {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Clan member table - scrollable within container */
    body.xp-page .table-panel {
        height: auto !important;
        max-height: 500px !important;
        overflow-y: auto !important;
    }
    
    body.xp-page .clan-table-wrapper {
        max-height: 400px !important;
        overflow-y: auto !important;
    }
    
    /* Log list in sidebar */
    body.xp-page .log-list {
        max-height: 300px !important;
        overflow-y: auto !important;
    }
}

/* Extra small phones - even more compact */
@media (max-width: 400px) {
    body.xp-page .sidebar-content {
        max-height: 350px !important;
    }
    
    body.xp-page .table-panel {
        max-height: 400px !important;
    }
    
    body.xp-page .clan-table-wrapper {
        max-height: 350px !important;
    }
    
    body.xp-page .log-list {
        max-height: 250px !important;
    }
}