@media(max-width:1100px) and (min-width:641px){
  .users{display:none!important;}
  .resizer#usersResizer{display:none;}
}

@media(max-width:640px){
  /* ── Genel gizlemeler ── */
  header{display:none!important;}
  .server-rail{display:none!important;}
  .mobile-tabs{display:none!important;}
  .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:45;}
  .mobile-overlay.active{display:block;}
  .resizer{display:none!important;}

  /* ── Layout: tam ekran, yatay sıra ── */
  .layout{
    display:flex;flex-direction:row;
    position:fixed;inset:0;
    overflow:hidden;
    width:300vw; /* 3 panel yan yana */
    height:100%;height:100dvh;
    transform:translateX(-100vw); /* başlangıç: chat görünür */
    transition:transform .22s cubic-bezier(.25,0,.25,1);
    will-change:transform;
    touch-action:none;
    overscroll-behavior:none;
  }
  .layout.show-rooms{transform:translateX(0);}
  .layout.show-chat{transform:translateX(-100vw);}
  .layout.show-users{transform:translateX(-200vw);}

  /* ── Paneller: her biri tam ekran genişlik ── */
  .rooms-panel{
    position:relative!important;
    width:100vw!important;min-width:100vw;max-width:100vw;
    height:100%;
    transform:none!important;
    display:flex;flex-direction:column;
    background:var(--panel);
    overflow:hidden;
    z-index:auto;
    border:none!important;
  }
  .chat{
    width:100vw!important;min-width:100vw;
    height:100%;
    display:flex;flex-direction:column;
    overflow:hidden;
    padding:0!important;
    background:var(--bg);
  }
  .users{
    position:relative!important;
    width:100vw!important;min-width:100vw;max-width:100vw;
    height:100%;
    transform:none!important;
    display:flex!important;flex-direction:column;
    background:var(--panel);
    overflow:hidden;
    z-index:auto;
    border:none!important;
  }

  /* ── Rooms panel topbar ── */
  .rooms-head{
    height:48px;
    display:flex;align-items:center;
    padding:0 16px;
    font-weight:700;font-size:15px;color:var(--text);
    background:var(--panel);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }

  /* ── Chat topbar — Discord stili ── */
  .chat-topbar{
    height:48px;
    display:flex!important;align-items:center;
    padding:0 8px;gap:6px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    z-index:10;
  }
  /* Geri oku (mobil) */
  .chat-topbar .tb-back{
    display:flex!important;
    align-items:center;justify-content:center;
    width:36px;height:36px;
    color:var(--accent);
    background:none;border:none;cursor:pointer;
    flex-shrink:0;font-size:20px;line-height:1;
  }
  /* Kanal bilgisi (tıklanabilir → users panel) */
  .chat-topbar .tb-channel{
    display:flex;align-items:center;gap:4px;
    flex:1;min-width:0;cursor:pointer;
    color:var(--text);
  }
  .chat-topbar .tb-channel .tb-hash{
    color:var(--muted);font-size:18px;flex-shrink:0;
  }
  .chat-topbar .tb-channel .tb-name{
    font-weight:600;font-size:15px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .chat-topbar .tb-channel .tb-chevron{
    color:var(--muted);font-size:14px;flex-shrink:0;margin-left:2px;
  }
  /* Sağ ikonlar */
  .chat-topbar .tb-actions{
    display:flex;align-items:center;gap:2px;flex-shrink:0;
  }
  .chat-topbar .rh-act{
    display:flex!important;
    align-items:center;justify-content:center;
    width:36px;height:36px;
    color:var(--muted);
    background:none;border:none;cursor:pointer;
    border-radius:6px;
  }
  .chat-topbar .rh-act:active{background:var(--border);}

  /* Masaüstü topbar elemanlarını gizle (sadece mobil görünümde değişecek olanlar) */
  .chat-topbar .room-header{display:none!important;}
  .chat-topbar .rh-actions{display:none!important;}

  /* ── Mesajlar ── */
  #messages{
    flex:1;overflow-y:auto;
    padding:8px 10px;
    min-height:0;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }
  .msg{font-size:13px;}
  .msg .nick{font-size:12px;}

  /* ── Composer — Discord mobil benzeri ── */
  .composer{
    flex-shrink:0;
    padding:6px 8px;
    border-top:1px solid var(--border);
    background:var(--panel);
    display:flex;align-items:center;gap:6px;
  }
  /* Masa üstü ekstra butonları gizle */
  .composer .comp-actions .icon-btn:not(#emojiBtn){display:none!important;}
  .composer .send-btn{display:none!important;}
  /* Mikrofon butonu */
  .composer .tb-mic{
    display:flex!important;
    align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;
    color:var(--muted);background:none;border:none;cursor:pointer;
  }
  #input{
    flex:1;font-size:16px;
    background:var(--bg);
    border:none;border-radius:20px;
    padding:8px 14px;
    color:var(--text);
    min-width:0;
  }
  #input:focus{outline:none;}
  .comp-add{flex-shrink:0;}

  /* Typing bar */
  .typing-indicator{flex-shrink:0;}

  /* ── Users panel topbar ── */
  .users-header{
    height:48px;
    display:flex;align-items:center;
    padding:0 8px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    gap:6px;
  }
  .users-header .tb-back-users{
    display:flex!important;
    align-items:center;justify-content:center;
    width:36px;height:36px;flex-shrink:0;
    color:var(--accent);background:none;border:none;cursor:pointer;
    font-size:20px;line-height:1;
  }

  /* u-nick */
  .u-nick{font-size:12px;}

}

@media(min-width:641px){
  .mobile-tabs{display:none;}
  .mobile-overlay{display:none;}
  .chat-topbar .tb-back{display:none!important;}
  .chat-topbar .tb-channel{display:none!important;}
  .chat-topbar .tb-actions{display:none!important;}
  .chat-topbar .tb-mic{display:none!important;}
  .users-header .tb-back-users{display:none!important;}
  .chat-topbar .room-header{display:flex!important;}
  .chat-topbar .rh-actions{display:flex!important;}
}