/* ============================================
   MircChat - Responsive Stylesheet
   Breakpoints:
   - 320px+  : Small mobile
   - 480px+  : Large mobile
   - 768px+  : Tablet
   - 1024px+ : Small desktop / Landscape tablet
   - 1280px+ : Desktop
   - 1440px+ : Large desktop
   ============================================ */

/* ============================================
   1440px+ : Large Desktop
   Full layout with wider sidebars
   ============================================ */
@media (min-width: 1440px) {
    :root {
        --sidebar-width: 300px;
    }

    .auth-card {
        max-width: 480px;
        padding: 48px;
    }

    .chat-messages {
        padding: 20px 28px;
    }

    .message {
        padding: 10px 20px;
    }

    .chat-input-area {
        padding: 14px 28px 20px;
    }

    .nav-item {
        padding: 10px 22px;
    }
}

/* ============================================
   1280px - 1439px : Desktop (Default)
   Standard layout — base styles apply
   ============================================ */
@media (min-width: 1280px) and (max-width: 1439px) {
    /* Base styles are the default for this range */
}

/* ============================================
   1024px - 1279px : Small Desktop / Landscape Tablet
   Narrower sidebars
   ============================================ */
@media (max-width: 1279px) {
    :root {
        --sidebar-width: 240px;
    }

    .nav-item span {
        display: none;
    }

    .nav-item {
        padding: 10px 14px;
    }

    .nav-item i {
        font-size: 16px;
    }

    .navbar-logo span {
        display: none;
    }

    .user-nick {
        display: none;
    }

    .navbar-user .fa-chevron-down {
        display: none;
    }

}

/* ============================================
   768px - 1023px : Tablet
   Hide right sidebar by default, show hamburger
   ============================================ */
@media (max-width: 1023px) {
    :root {
        --sidebar-width: 260px;
    }

    /* Hide right sidebar */
    .sidebar-right {
        position: fixed;
        top: var(--navbar-height);
        right: 0;
        bottom: 0;
        z-index: 160;
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-right.active {
        transform: translateX(0);
    }

    /* Left sidebar stays visible on tablet */
    .sidebar-left {
        width: 220px;
    }

    /* Show mobile menu button */
    .mobile-menu-btn {
        display: none;
    }

    /* Adjust navbar */
    .nav-items {
        gap: 2px;
    }

    .nav-item {
        padding: 10px 12px;
    }

    .nav-item span {
        display: none;
    }

    .navbar-logo span {
        display: none;
    }

    .user-nick {
        display: none;
    }

    .navbar-user .fa-chevron-down {
        display: none;
    }

    /* Chat adjustments */
    .chat-messages {
        padding: 12px 16px;
    }

    .message {
        padding: 8px 12px;
    }

    .chat-input-area {
        padding: 10px 16px 14px;
    }
}

/* ============================================
   480px - 767px : Large Mobile
   Mobile layout with bottom nav
   ============================================ */
@media (max-width: 767px) {
    :root {
        --navbar-height: 54px;
        --bottom-nav-height: 60px;
    }

    /* Hide desktop top navbar center items */
    .navbar-center {
        display: none;
    }

    /* Show navbar logo text on mobile */
    .navbar-logo span {
        display: inline;
        font-size: 17px;
    }

    .navbar-logo i {
        font-size: 18px;
    }

    /* Simplify navbar right */
    .user-nick {
        display: none;
    }

    .navbar-user .fa-chevron-down {
        display: none;
    }

    .user-status-indicator {
        display: none;
    }

    .navbar-user {
        padding: 4px 6px;
    }

    /* Show bottom navigation */
    .bottom-navbar {
        display: flex;
    }

    /* Both sidebars become overlays */
    .sidebar-left {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        bottom: var(--bottom-nav-height);
        width: 280px;
        z-index: 160;
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-left.active {
        transform: translateX(0);
    }

    .sidebar-right {
        position: fixed;
        top: var(--navbar-height);
        right: 0;
        bottom: var(--bottom-nav-height);
        width: 280px;
        z-index: 160;
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-right.active {
        transform: translateX(0);
    }

    /* Show hamburger */
    .mobile-menu-btn {
        display: flex;
    }

    /* Main content takes full width */
    .main-content {
        height: calc(100vh - var(--navbar-height) - var(--bottom-nav-height));
        height: calc(100dvh - var(--navbar-height) - var(--bottom-nav-height));
    }

    .chat-area {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .chat-messages {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px 12px;
        margin-bottom: 170px;
    }

    .chat-input-area {
        flex-shrink: 0;
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        z-index: 10;
    }

    /* Chat adjustments */
    .chat-header {
        padding: 10px 12px;
    }

    .chat-header-info h2 {
        font-size: 15px;
    }

    .chat-topic {
        display: none;
    }

    .message {
        padding: 6px 8px;
        gap: 10px;
    }

    .message-avatar {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .message-nick {
        font-size: 13px;
    }

    .message-text {
        font-size: 13px;
    }

    .message-time {
        font-size: 10px;
    }

    /* Chat input */
    .chat-input-area {
        padding: 8px 12px 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    }

    .input-toolbar {
        margin-bottom: 6px;
    }

    .toolbar-btn {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .input-container {
        flex-wrap: nowrap;
        overflow: visible;
    }

    .input-container textarea {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 8px 0;
        min-width: 0;
        flex: 1 1 0%;
    }

    .send-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 14px;
        flex-shrink: 0;
        display: flex !important;
    }

    /* Auth adjustments */
    .auth-card {
        max-width: 100%;
        padding: 28px 24px;
        margin: 0 8px;
        border-radius: var(--radius-md);
    }

    .auth-logo h1 {
        font-size: 24px;
    }

    .logo-icon {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    /* User dropdown full width */
    .user-dropdown {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    /* Toast position */
    .toast {
        top: auto;
        bottom: calc(var(--bottom-nav-height) + 12px);
        left: 12px;
        right: 12px;
        max-width: none;
    }
}

/* ============================================
   320px - 479px : Small Mobile
   Compact layout for smallest screens
   ============================================ */
@media (max-width: 479px) {
    :root {
        --navbar-height: 50px;
        --bottom-nav-height: 56px;
    }

    /* Navbar compact */
    .top-navbar {
        padding: 0 12px;
    }

    .navbar-logo span {
        font-size: 15px;
    }

    .navbar-logo i {
        font-size: 16px;
    }

    .navbar-logo {
        gap: 7px;
    }

    /* Bottom nav compact */
    .bottom-nav-item {
        font-size: 9px;
        gap: 3px;
    }

    .bottom-nav-item i {
        font-size: 17px;
    }

    /* Sidebars narrower */
    .sidebar-left,
    .sidebar-right {
        width: 260px;
    }

    /* Chat compact */
    .chat-header {
        padding: 8px 10px;
    }

    .chat-header-info h2 {
        font-size: 14px;
    }

    .header-action-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .chat-messages {
        padding: 8px;
        margin-bottom: 155px;
    }

    .message {
        padding: 5px 6px;
        gap: 8px;
    }

    .message-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
        border-radius: 4px;
    }

    .message-header {
        margin-bottom: 2px;
    }

    .message-nick {
        font-size: 12px;
    }

    .message-text {
        font-size: 13px;
        line-height: 1.45;
    }

    .message-time {
        font-size: 9px;
    }

    .message-system {
        font-size: 11px;
    }

    .message-event,
    .message-action {
        font-size: 11px;
        padding: 3px 8px;
    }

    /* Chat input compact */
    .chat-input-area {
        padding: 6px 8px 10px;
        bottom: 56px;
    }

    .input-toolbar {
        margin-bottom: 4px;
    }

    .input-container {
        padding: 2px 2px 2px 12px;
        border-radius: var(--radius-sm);
    }

    .input-container textarea {
        font-size: 16px;
        padding: 7px 0;
    }

    .send-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        flex-shrink: 0;
        display: flex !important;
    }

    /* Auth compact */
    .auth-card {
        padding: 24px 18px;
    }

    .auth-logo {
        margin-bottom: 24px;
    }

    .auth-logo h1 {
        font-size: 22px;
    }

    .logo-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
        margin-bottom: 12px;
    }

    .auth-subtitle {
        font-size: 12px;
    }

    .auth-tabs {
        margin-bottom: 22px;
    }

    .auth-tab {
        padding: 10px;
        font-size: 13px;
        gap: 6px;
    }

    .auth-tab i {
        font-size: 12px;
    }

    .input-wrapper input,
    .input-wrapper select {
        padding: 12px 14px 12px 40px;
        font-size: 14px;
    }

    .input-icon {
        left: 12px;
        font-size: 13px;
    }

    .auth-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .auth-footer {
        margin-top: 18px;
        padding-top: 14px;
    }

    .auth-footer p {
        font-size: 11px;
    }

    /* Dropdown adjustments */
    .user-dropdown {
        padding: 0;
    }

    .dropdown-header {
        padding: 12px 14px;
    }

    .dropdown-avatar {
        width: 38px;
        height: 38px;
    }
}

/* ============================================
   320px : Minimum supported width
   ============================================ */
@media (max-width: 320px) {
    .auth-card {
        padding: 20px 14px;
        margin: 0 4px;
    }

    .auth-logo h1 {
        font-size: 20px;
    }

    .logo-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .auth-tab span {
        font-size: 12px;
    }

    .input-wrapper input,
    .input-wrapper select {
        padding: 10px 12px 10px 36px;
        font-size: 13px;
    }

    .sidebar-left,
    .sidebar-right {
        width: 240px;
    }

    .bottom-nav-item span {
        font-size: 8px;
    }

    .bottom-nav-item i {
        font-size: 16px;
    }
}

/* ============================================
   Height-based adjustments
   ============================================ */

/* Short screens (landscape mobile) */
@media (max-height: 600px) {
    .auth-logo {
        margin-bottom: 16px;
    }

    .logo-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        margin-bottom: 8px;
    }

    .auth-logo h1 {
        font-size: 20px;
    }

    .auth-subtitle {
        display: none;
    }

    .auth-tabs {
        margin-bottom: 16px;
    }

    .auth-form {
        gap: 14px;
    }

    .input-wrapper input,
    .input-wrapper select {
        padding: 10px 12px 10px 40px;
    }

    .auth-footer {
        margin-top: 12px;
        padding-top: 10px;
    }
}

/* Very short screens */
@media (max-height: 500px) and (max-width: 767px) {
    .auth-card {
        overflow-y: auto;
        max-height: 95vh;
        max-height: 95dvh;
    }

    .auth-logo {
        margin-bottom: 10px;
    }

    .logo-icon {
        display: none;
    }
}

/* ============================================
   Orientation: Landscape on mobile/tablet
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --navbar-height: 44px;
        --bottom-nav-height: 48px;
    }

    .bottom-nav-item span {
        display: none;
    }

    .bottom-nav-item i {
        font-size: 18px;
    }

    .message-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .message {
        padding: 3px 6px;
        gap: 8px;
    }

    .chat-input-area {
        padding: 4px 8px 6px;
    }

    .input-toolbar {
        display: none;
    }
}

/* ============================================
   Touch device optimizations
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .channel-item {
        padding: 12px 12px 12px 24px;
        min-height: 44px;
    }

    .user-item {
        padding: 10px;
        min-height: 48px;
    }

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

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

    .bottom-nav-item {
        min-height: 44px;
    }

    /* Remove hover effects */
    .message:hover {
        background: transparent;
    }

    .channel-item:hover {
        background: transparent;
    }

    .channel-item.active {
        background: var(--bg-active);
    }

    .user-item:hover {
        background: transparent;
    }

    /* Active states for touch */
    .channel-item:active {
        background: var(--bg-hover);
    }

    .user-item:active {
        background: var(--bg-hover);
    }

    .message:active {
        background: var(--bg-hover);
    }
}

/* ============================================
   Print styles (minimal)
   ============================================ */
@media print {
    .top-navbar,
    .bottom-navbar,
    .sidebar-left,
    .sidebar-right,
    .chat-input-area,
    .chat-header-actions {
        display: none !important;
    }

    .chat-area {
        width: 100% !important;
    }

    .main-content {
        height: auto !important;
    }

    .chat-messages {
        overflow: visible !important;
        height: auto !important;
    }

    body {
        overflow: visible !important;
        background: white !important;
        color: black !important;
    }
}

/* ============================================
   Reduced motion preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .matrix-rain {
        display: none;
    }
}