/* ============================================================
   chatWS — responsive.css
   All @media breakpoints and mobile overrides.
   Load LAST — overrides everything above.
   Replaces: responsive.css (media queries) + B.css
============================================================ */

/* ── CHAT / MAIN INTERFACE RESPONSIVE (B.css) ─────────────── */

/* =========================================================
   chatWS — RESPONSIVE OVERRIDES (FINAL)
   Load AFTER all other CSS files
========================================================= */

/* =========================================================
   GLOBAL MOBILE SAFETY
========================================================= */
@media (max-width: 900px) {

    html, body {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    #app {
        height: calc(var(--vh) * 100);
        overflow: hidden;
    }
}

/* =========================================================
   TOP BAR
========================================================= */
@media (max-width: 600px) {

    .topbar {
        padding: 0 10px;
        height: 52px;
    }

    .brand {
        font-size: 12px;
        letter-spacing: 0.05em;
    }

    .top-user {
        display: none;
    }

    .top-avatar-img {
        width: 30px;
        height: 30px;
    }
}

/* =========================================================
   LEFT ICON BAR
========================================================= */
@media (max-width: 900px) {

    .side-left {
        width: 52px;
        min-width: 52px;
        padding: 6px 4px;
        gap: 4px;
    }

    .side-left-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .side-left-logo {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
}

/* =========================================================
   MAIN LAYOUT + CHAT CENTER
========================================================= */
@media (max-width: 900px) {

    /* .layout-shell no longer gets its own hand-calculated height here.
       This used to be `calc(var(--vh) * 100 - 52px)` — it only subtracted
       the topbar and forgot the footer bar entirely, and because
       responsive.css loads LAST it silently won over chat.css's version
       that did subtract it, which is what let messages render behind the
       fixed footer/input bars on mobile. chat.css's base rule
       (flex: 1; min-height: 0; height: 100%) already fills exactly the
       right amount of space on every screen size now that the footer bar
       is a flex sibling inside #app instead of position:fixed, so there's
       nothing left for this breakpoint to override. */
    .layout-shell {
        overflow: hidden;
    }

    .chat-center {
        height: 100%;
        min-height: 0;
    }

    .chat {
        min-height: 0;
        overflow: hidden;
    }
}

/* =========================================================
   MESSAGE LIST
========================================================= */
@media (max-width: 600px) {

    .messages {
        padding: 8px 8px 6px;
    }

    .message {
        gap: 6px;
        font-size: 12px;
    }

    .message-avatar,
    .msg_avatar {
        width: 28px;
        height: 28px;
    }

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

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

/* =========================================================
   CHAT INPUT BAR
========================================================= */
@media (max-width: 900px) {

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

    .chat-input input {
        padding: 8px 10px;
        font-size: 13px;
    }

    .chat-attach-btn {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
}

/* =========================================================
   RIGHT SLIDE PANEL
========================================================= */
@media (max-width: 900px) {

    .right-panel {
        width: 90vw;
        max-width: 360px;
    }

    .right-panel-body {
        padding: 10px;
        max-height: calc(var(--vh) * 100 - 52px);
    }

    .right-panel-title {
        font-size: 13px;
    }
}

/* =========================================================
   CUSTOMIZE PANEL (HAMBURGER)
========================================================= */
@media (max-width: 900px) {

    #customizeToggle {
        bottom: 64px;
        right: 12px;
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .customize-panel {
        width: 90vw;
        max-width: 360px;
    }

    .cp-body {
        padding: 12px;
    }

    .cp-section h4 {
        font-size: 13px;
    }
}

/* =========================================================
   ROOM LIST
========================================================= */
@media (max-width: 900px) {

    .roomListBox {
        padding: 8px;
    }

    .room_item {
        padding: 8px;
        gap: 8px;
    }

    .room-left {
        width: 40px;
        height: 40px;
    }

    .room-name {
        font-size: 14px;
    }

    .room-desc {
        font-size: 11px;
        -webkit-line-clamp: 2;
    }

    .room-users {
        font-size: 12px;
    }
}

/* =========================================================
   USER LIST
========================================================= */
@media (max-width: 600px) {

    .list-item {
        padding: 6px;
        gap: 6px;
    }

    .list-avatar,
    .list-avatar img {
        width: 28px;
        height: 28px;
    }

    .list-name {
        font-size: 12px;
    }

    .list-rank {
        font-size: 10px;
    }
}

/* =========================================================
   PROFILE MODAL / PROFILE VIEW
========================================================= */
@media (max-width: 600px) {

    .profileBoxInner {
        max-width: 95%;
        max-height: 95vh;
        border-radius: 14px;
    }

    .profileHeaderArea {
        height: 110px;
    }

    .boxAvatar {
        width: 72px;
        height: 72px;
        bottom: -28px;
    }

    .boxUsername {
        font-size: 1.2rem;
    }

    .boxControls {
        padding: 0.6rem 1rem;
    }
}

/* =========================================================
   USER ACTION BOX (STAFF / ADMIN)
========================================================= */
@media (max-width: 600px) {

    .user-action-box {
        width: 95%;
        max-width: 420px;
        margin: 0 auto;
    }

    .uab-tabs button {
        font-size: 12px;
        padding: 8px;
    }

    .uab-actions button {
        font-size: 12px;
        padding: 8px;
    }
}

/* =========================================================
   PM BOX
========================================================= */
@media (max-width: 600px) {

    #pmBox {
        width: 90vw;
        max-height: 60vh;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    .pmHeader {
        height: 44px;
        font-size: 13px;
    }

    .pm-text {
        font-size: 12px;
    }
}

/* =========================================================
   MODALS / ELEMENT BOXES
========================================================= */
@media (max-width: 600px) {

    .element-box-inner {
        max-width: 95%;
        max-height: 95vh;
        padding: 14px;
        border-radius: 12px;
    }
}

/* =========================================================
   SMALL DEVICES (EXTRA TIGHT)
========================================================= */
@media (max-width: 360px) {

    .side-left {
        width: 48px;
    }

    .side-left-btn {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    #customizeToggle {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}


/* ── FULL RESPONSIVE OVERRIDES ────────────────────────────── */

@media (min-width: 768px) {
    :root {
        --topbar-height: 56px;
        --sidebar-width: 58px;
        --input-height: 44px;
    }

    /* Top bar */
    .topbar {
        height: var(--topbar-height);
        padding: 0 var(--space-lg);
    }

    .brand {
        font-size: 14px;
    }

    .top-user {
        display: block;
        font-size: 13px;
        color: var(--text-secondary);
    }

    /* Sidebar */
    .side-left {
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        padding: var(--space-sm);
        gap: var(--space-xs);
    }

    .side-left-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* Chat */
    .chat-header {
        padding: var(--space-md) var(--space-lg);
    }

    .room-logo {
        width: 36px;
        height: 36px;
    }

    .messages {
        padding: var(--space-md);
    }

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

    /* Input */
    .chat-input {
        padding: var(--space-md) var(--space-lg);
    }

    .chat-input input {
        height: var(--input-height);
    }

    /* Right panel */
    .right-panel {
        width: 340px;
        position: relative;
        transform: none;
        box-shadow: none;
        z-index: 50;
    }

    .right-panel-header {
        height: var(--topbar-height);
    }

    /* Panel backdrop hidden on desktop */
    .panel-backdrop {
        display: none !important;
    }

    /* Layout shell for desktop - show panel inline */
    .layout-shell.with-panel .chat-center {
        border-right: 1px solid var(--border-subtle);
    }

    /* PM box larger on desktop */
    #pmBox {
        width: 400px;
        max-height: 70vh;
    }
}

/* ==========================================================
   LARGE DESKTOP (1200px and up)
========================================================== */
@media (min-width: 1200px) {
    .right-panel {
        width: 380px;
    }

    .messages {
        padding: var(--space-md) var(--space-xl);
    }
}

/* ==========================================================
   MOBILE SPECIFIC FIXES (767px and below)
========================================================== */
@media (max-width: 767px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Ensure touch targets are large enough */
    .side-left-btn,
    .chat-attach-btn,
    .chat-send-btn,
    .right-panel-close,
    .element-close {
        min-height: 44px;
        min-width: 44px;
    }

    /* Room item larger touch target */
    .room-item {
        padding: var(--space-md);
    }

    /* Prevent zoom on input focus (iOS) */
    .chat-input input,
    .form-group input,
    .form-group textarea,
    .pmInputBar input {
        font-size: 16px; /* Prevents iOS zoom */
    }

    /* PM box full width on small screens */
    #pmBox {
        left: var(--space-md);
        right: var(--space-md);
        width: auto;
        bottom: var(--space-md);
    }
}

/* ==========================================================
   SMALL MOBILE (480px and below)
========================================================== */
@media (max-width: 480px) {
    :root {
        --space-md: 10px;
        --space-lg: 14px;
    }

    .brand {
        font-size: 12px;
    }

    .message {
        gap: 8px;
    }

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

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

    .room-item-image {
        width: 40px;
        height: 40px;
    }

    .element-box-inner,
    .profileBoxInner {
        max-height: 90vh;
    }
}

/* ==========================================================
   UTILITY CLASSES
========================================================== */
.hidden { display: none !important; }
.sr-only { position: absolute; left: -9999px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--accent-danger); }
.text-primary { color: var(--accent-blue); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }

/* ==========================================================
   LOADING STATES
========================================================== */
.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--border-medium);
    border-top-color: var(--accent-blue);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

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

/* ==========================================================
   EMPTY STATES
========================================================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--text-muted);
    text-align: center;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--space-md);
    opacity: 0.5;
}

.empty-state-text {
    font-size: 14px;
}

/* ==========================================================
   SCROLLBAR STYLING (Webkit)
========================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

/* ==========================================================
   USER STATUS INDICATORS
========================================================== */
.list-avatar {
    position: relative;
}

.status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
}

.status-indicator.online {
    background: #4ade80;
}

.status-indicator.offline {
    background: #6b7280;
}

.list-item.online .list-name {
    color: var(--accent-blue);
}