/* ============================================================
 * mobile.css — Discord mobile (sıfırdan, birebir)
 * ============================================================ */

/* Eski tab bar her zaman gizli */
.mobile-tabs { display: none !important; }

@media (max-width: 640px) {

  /* ── Scrollbar gizle ── */
  * { scrollbar-width: none; }
  *::-webkit-scrollbar { display: none !important; width: 0 !important; }

  /* ── Yakınlaştırmayı kapat (çift dokunma); kaydırma serbest ──
     (pinch için JS gesture engeli de var: js/ui/mobile.js) ── */
  html { touch-action: pan-x pan-y; }

  /* ── Gizlenecek masaüstü öğeleri ── */
  .resizer            { display: none !important; }
  header              { display: none !important; }
  .mobile-view-toggle { display: none !important; }   /* # Kanallar / @ Mesajlar */
  .account-bar        { display: none !important; }   /* alt nav bar'a taşındı */

  /* DM ekranındaki "Bir sohbet bul" kutusu mobilde de görünsün (görünürlüğü rooms.js
     leftView'e göre yönetir; burada yalnızca mobil stilini veriyoruz) (#32) */
  .channel-search {
    margin: 8px 12px;
    padding: 9px 12px;
    width: calc(100% - 24px);
    border-radius: 8px;
    font-size: 16px;   /* iOS odakta zoom yapmasın */
    flex-shrink: 0;
  }
  #usersResizer, #roomsResizer { display: none !important; }

  /* ════════════════════════════════════════
     ANA LAYOUT — tam ekran sabit
  ════════════════════════════════════════ */
  .layout {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: block;
    overflow: hidden;
  }

  /* Tüm paneller — absolute (layout'a göre), geçişli, varsayılan konumlu */
  .server-rail,
  .rooms-panel,
  .chat,
  .users {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
  }

  /* ── Server rail (sol şerit) — en üstte, 68px ── */
  .server-rail {
    display: flex !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    z-index: 40;
    padding: 12px 0;
    transform: translateX(0);
  }

  /* ── Rooms panel — tam genişlik, içerik rail için sol padding ── */
  .rooms-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 68px;
    border-right: none !important;
    z-index: 30;
    background: var(--panel);
    transform: translateX(0);
  }

  /* ── Chat — tam ekran ── */
  .chat {
    width: 100% !important;
    min-width: 0 !important;
    z-index: 20;
    background: var(--bg);
    transform: translateX(100%);
  }

  /* ── Users — tam ekran ── */
  .users {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-left: none !important;
    z-index: 25;
    background: var(--panel);
    transform: translateX(100%);
  }

  /* ════════════════════════════════════════
     PANEL GEÇİŞ DURUMLARI (!important — hiçbir şey ezemez)
  ════════════════════════════════════════ */
  /* Home (rooms): rail + rooms görünür, diğerleri sağda */
  .layout.show-rooms .server-rail { transform: translateX(0) !important; }
  .layout.show-rooms .rooms-panel { transform: translateX(0) !important; }
  .layout.show-rooms .chat        { transform: translateX(100%) !important; }
  .layout.show-rooms .users       { transform: translateX(100%) !important; }

  /* Chat: tam ekran sohbet */
  .layout.show-chat .server-rail  { transform: translateX(-100%) !important; }
  .layout.show-chat .rooms-panel  { transform: translateX(-100%) !important; }
  .layout.show-chat .chat         { transform: translateX(0) !important; }
  .layout.show-chat .users        { transform: translateX(100%) !important; }

  /* Users: üye listesi */
  .layout.show-users .server-rail { transform: translateX(-100%) !important; }
  .layout.show-users .rooms-panel { transform: translateX(-100%) !important; }
  .layout.show-users .chat        { transform: translateX(-100%) !important; }
  .layout.show-users .users       { transform: translateX(0) !important; }

  /* ════════════════════════════════════════
     SERVER RAIL içerik
  ════════════════════════════════════════ */
  .srv-icon, .srv-icon.home {
    width: 46px; height: 46px;
  }
  .srv-add {
    width: 46px; height: 46px;
  }

  /* ════════════════════════════════════════
     ROOMS PANEL (kanallar)
  ════════════════════════════════════════ */
  .rooms-head {
    flex-shrink: 0;
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--head);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .rooms-head::after { display: none !important; }

  .rooms-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 8px calc(70px + env(safe-area-inset-bottom));  /* alt nav için boşluk */
  }

  /* Kategori başlıkları */
  .rooms-sep, .cat-head {
    padding: 16px 8px 6px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--muted);
    opacity: .7;
  }

  /* Kanal öğeleri */
  .room-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 0;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.2;
  }
  .room-item .r-icon {
    font-size: 20px;
    font-weight: 400;
    color: var(--muted);
    flex-shrink: 0;
  }
  .room-item.active {
    background: var(--room-active);
    color: var(--head);
  }
  .room-item.active::before { display: none !important; }  /* mobilde sol bar yok */
  .room-item.active .r-icon { color: var(--head); }
  .room-item.unread, .room-item:has(.notif-dot) {
    color: var(--head);
    font-weight: 600;
  }

  /* ════════════════════════════════════════
     CHAT PANEL — topbar
  ════════════════════════════════════════ */
  .chat-topbar {
    flex-shrink: 0;
    height: 54px;
    display: flex;
    align-items: center;
    padding: 0 4px 0 0;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .chat-topbar .room-header { display: none !important; }
  .chat-topbar .rh-actions  { display: none !important; }

  /* Geri oku */
  .tb-back {
    flex-shrink: 0;
    background: none; border: none;
    color: var(--head);
    font-size: 28px; line-height: 1;
    padding: 0 8px 0 12px;
    height: 100%;
    display: flex; align-items: center;
    cursor: pointer;
  }

  /* Kanal adı (ortada) */
  .tb-channel {
    flex: 1;
    display: flex; align-items: center; gap: 5px;
    min-width: 0; height: 100%;
    cursor: pointer;
  }
  .tb-hash {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 16px; font-weight: 600;
  }
  .tb-name {
    font-size: 14px; font-weight: 600;
    color: var(--head);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tb-chevron { display: none; }   /* Discord mobilde chevron yok */

  /* Sağ ikonlar */
  .tb-actions {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 2px;
    padding-right: 6px;
  }
  .tb-actions .rh-act {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none;
    color: var(--head);
    border-radius: 8px; cursor: pointer;
  }

  /* Mesaj alanı */
  #messages {
    flex: 1;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 6px;
  }

  .typing-indicator {
    flex-shrink: 0;
    min-height: 16px; height: auto;
    padding: 0 14px;
    font-size: 12px;
  }

  /* Composer — klavye üstüne yapışan şık pill */
  .composer {
    flex-shrink: 0;
    margin: 8px 10px calc(8px + env(safe-area-inset-bottom)) 10px;
    min-height: 48px;
    border-radius: 26px;
    background: var(--panel2, #1a1b26);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
    align-items: center;
  }
  .composer #uwz {
    font-size: 16px;        /* iOS zoom engellemek için min 16px */
    background: none;
  }
  /* type=search varsayılan süslerini temizle (x butonu / ikon) */
  .composer #uwz::-webkit-search-decoration,
  .composer #uwz::-webkit-search-cancel-button,
  .composer #uwz::-webkit-search-results-button,
  .composer #uwz::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  /* + butonu — yuvarlak, hafif vurgulu */
  .composer .comp-add {
    margin: 0 4px 0 8px;
    width: 34px; height: 34px;
    border-radius: 50%;
    color: var(--head);
    background: var(--accent-purple-muted, rgba(168,85,247,.15));
    display: flex; align-items: center; justify-content: center;
    align-self: center;
  }
  .composer .comp-add svg { width: 20px; height: 20px; }

  /* sağ ikonlar */
  .composer .comp-actions { gap: 2px; padding-right: 8px; }
  .composer .comp-actions .icon-btn { width: 34px; height: 34px; }
  .composer .comp-actions .icon-btn svg { width: 21px; height: 21px; }

  .composer .send-btn { display: none !important; }   /* Enter ile gönderiliyor */

  /* ════════════════════════════════════════
     USERS PANEL
  ════════════════════════════════════════ */
  .users-header {
    flex-shrink: 0;
    height: 54px;
    display: flex; align-items: center;
    padding: 0 12px; gap: 8px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
  }
  .tb-back-users {
    flex-shrink: 0;
    background: none; border: none;
    color: var(--head);
    font-size: 28px; line-height: 1;
    padding: 0 8px 0 0;
    display: flex; align-items: center; cursor: pointer;
  }
  .users-search { flex: 1; }
  .users-list {
    flex: 1;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px;
  }

  /* ── Üye/profil paneli TAM OPAK (soluk yok) ── */
  .users { background: var(--panel) !important; }
  .users-header { background: var(--panel) !important; }
  .dm-profile-panel,
  .users .dm-profile-panel { background: var(--panel) !important; }

  /* ── Soluk (opacity) tamamen kaldırıldı ── */
  .users-list .member-group,
  .users-count {
    opacity: 1 !important;
    color: var(--muted) !important;
  }
  /* Online üyeler tam opak; çevrimdışı üyeler SOLUK kalsın (online/offline ayrımı) */
  .users-list .user-item { opacity: 1 !important; }
  .users-list .user-item.offline { opacity: .4 !important; }
  .users-list .u-nick { color: var(--head); }

  /* ════════════════════════════════════════
     ALT NAV BAR — Ana Sayfa / Bildirimler / Ben
  ════════════════════════════════════════ */
  .mobile-nav {
    position: fixed;
    left: 0; bottom: 0;
    width: 100%;
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: stretch;
    background: var(--account-bg);
    border-top: 1px solid var(--border);
    z-index: 60;
    transform: translateY(110%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
  }
  .mobile-nav.visible { transform: translateY(0); }

  .mnav-btn {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    background: none; border: none;
    color: var(--muted);
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
  }
  .mnav-btn svg { width: 24px; height: 24px; }
  .mnav-btn.active { color: var(--head); }
  .mnav-btn .mnav-av {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
  }
  .mnav-btn.active .mnav-av { border-color: var(--accent); }
  .mnav-badge {
    position: absolute;
    top: 4px;
    transform: translateX(12px);
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: var(--red,#f23f43);
    color: #fff;
    border-radius: 8px;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }

  /* ════════════════════════════════════════
     Mesaj sıkılık ayarı
  ════════════════════════════════════════ */
  .msg { padding: 2px 14px; }
  .msg:not(.grouped) { padding-top: 10px; }

  /* Uzun basma menüsü için iOS yerel "kopyala/paylaş" balonunu + metin
     seçimini engelle (menü güvenilir açılsın; metin "Metni Kopyala" ile alınır) */
  .msg { -webkit-touch-callout: none; }
  .msg .msg-text, .msg .msg-img { -webkit-user-select: none; user-select: none; }

  /* Context menü küçük ekrana sığsın (uzun menü taşmasın, kaydırılabilsin) */
  .ctx-menu {
    max-height: 78vh;
    overflow-y: auto;
    max-width: calc(100vw - 16px);
  }

  /* Profil kartı ortalı tam ekran */
  .profile-card {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important; max-width: 360px !important;
    z-index: 9999 !important;
  }

  #pinBtn, #membersToggle { display: none !important; }

  /* Gerçek profil kartı (.pcard) dar telefonda taşmasın (#30) */
  .pcard {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 10000 !important;   /* üye-sheet (9999) üstünde */
  }

  /* Emoji seçici önizleme satırı dokunmatikte işe yaramıyor → gizle, dikey alan kazan (#36) */
  .rc-ep-preview { display: none !important; }

  /* Mobil ses çubuğu: her görünümde erişilebilir, alt nav'ın üstünde sabit (#3/#13/#28) */
  .voice-bar.voice-bar-mobile {
    position: fixed !important;
    left: 8px; right: 8px;
    bottom: calc(60px + env(safe-area-inset-bottom));
    width: auto !important;
    z-index: 58;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.45);
    display: flex; align-items: center; gap: 8px;
  }
  .voice-bar.voice-bar-mobile .vb-info { flex: 1; min-width: 0; }

  /* Sabitlenenler paneli mobil topbar butonuna göre — ekrana sığsın */
  .pins-pop { max-width: calc(100vw - 16px) !important; }
}

/* Ses çubuğu kontrolleri (mic/kulaklık) — masaüstü+mobil */
.vb-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.vb-ctl {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: none; border-radius: 8px;
  color: var(--head); cursor: pointer;
}
.vb-ctl.on { color: var(--red, #f23f43); }   /* aktif (susturulmuş/sağır) */