/* DISRUPT PHONE UI — responsive Safari/mobile layer. Desktop untouched. */
@media (max-width: 767px) {
  html, body { width:100%; min-width:0; height:100%; overflow:hidden !important; overscroll-behavior:none; }
  body { background:#020b14; padding-bottom:env(safe-area-inset-bottom); }
  .app-shell { width:100%; height:100dvh; min-height:100dvh; display:block !important; overflow:hidden !important; }
  .leftbar, .rightbar { display:none !important; }
  .main-area { width:100%; height:100dvh !important; min-height:0 !important; overflow:hidden !important; padding:0 !important; }
  .topbar { height:58px !important; min-height:58px !important; padding:8px 12px !important; display:flex !important; align-items:center; gap:8px; padding-top:max(8px, env(safe-area-inset-top)) !important; box-sizing:content-box; }
  .search-wrap { display:none !important; }
  .top-actions { margin-left:auto; gap:6px !important; }
  .top-actions > .icon-btn { display:none !important; }
  .profile-mini { height:40px !important; max-width:160px; padding:5px 8px !important; }
  .profile-mini .chevron { display:none; }
  .mobile-phone-bar { display:flex; }
  .page.active-page { height:calc(100dvh - 58px - 62px) !important; min-height:0 !important; overflow:hidden !important; }
  .server-page { height:calc(100dvh - 58px - 62px) !important; }
  .server-layout { display:block !important; width:100% !important; height:100% !important; min-height:0 !important; overflow:hidden !important; }
  .channelbar { display:none !important; }
  .chat-panel { width:100% !important; height:100% !important; min-height:0 !important; display:flex !important; overflow:hidden !important; }
  .chat-header { flex:0 0 54px !important; min-height:54px !important; height:54px !important; padding:7px 12px !important; }
  .chat-header .hash { font-size:19px !important; }
  .chat-head-actions { gap:4px !important; }
  .chat-head-actions button { width:34px !important; height:34px !important; }
  .chat-box { flex:1 1 0 !important; min-height:0 !important; height:auto !important; overflow-y:auto !important; padding:10px 10px 8px !important; -webkit-overflow-scrolling:touch; }
  .welcome-card { height:auto !important; min-height:180px !important; max-height:none !important; flex:0 0 auto !important; padding:20px 16px !important; }
  .welcome-card h1 { font-size:25px !important; line-height:1.08 !important; }
  .welcome-card p { font-size:11px !important; line-height:1.45 !important; }
  .chat-msg { padding:9px 10px !important; margin-bottom:6px !important; border-radius:10px !important; }
  .composer { flex:0 0 auto !important; min-height:56px !important; height:auto !important; padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important; gap:6px !important; box-sizing:border-box; }
  .composer .attach, .composer .composer-icon { display:none !important; }
  .composer input { min-width:0 !important; height:42px !important; font-size:16px !important; padding:0 12px !important; }
  .composer .send-btn { flex:0 0 42px !important; width:42px !important; height:42px !important; }
  .mobile-phone-nav { display:flex; }
  .disrupt-voice-panel { margin:8px 8px 0 !important; padding:12px !important; max-height:calc(100dvh - 180px); overflow:auto; }
  .voice-participants { display:flex !important; flex-direction:column !important; gap:7px !important; }
  .voice-user { min-width:0 !important; width:100% !important; box-sizing:border-box; }
  .voice-volume input { width:70px !important; }
  .voice-control span { display:none; }
  .voice-control { width:42px; height:38px; justify-content:center; padding:7px !important; }
  .voice-control img { width:17px !important; height:17px !important; }
  .mobile-drawer { display:block; position:fixed; inset:0; z-index:1000; pointer-events:none; visibility:hidden; }
  .mobile-drawer.open { pointer-events:auto; visibility:visible; }
  .mobile-drawer-backdrop { position:absolute; inset:0; background:rgba(0,5,12,.68); opacity:0; transition:.18s; }
  .mobile-drawer.open .mobile-drawer-backdrop { opacity:1; }
  .mobile-drawer-sheet { position:absolute; top:0; left:0; bottom:0; width:min(88vw,360px); background:#03111d; border-right:1px solid #0a4775; transform:translateX(-100%); transition:.2s; padding:max(12px,env(safe-area-inset-top)) 12px 12px; box-sizing:border-box; overflow:auto; }
  .mobile-drawer.open .mobile-drawer-sheet { transform:none; }
  .mobile-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:8px 4px 14px; }
  .mobile-drawer-title { color:#eaf6ff; font-size:15px; font-weight:800; letter-spacing:.14em; }
  .mobile-close { width:38px; height:38px; border:1px solid #0b71b7; background:#061b2f; color:#dff2ff; border-radius:9px; font-size:20px; }
  .mobile-section-title { color:#6d9ab9; font-size:9px; letter-spacing:.22em; margin:12px 5px 7px; }
  .mobile-list button { width:100%; min-height:44px; margin:3px 0; border:1px solid #0a3c62; border-radius:9px; background:#041524; color:#d9efff; text-align:left; padding:8px 10px; font-size:13px; }
  .mobile-list button.active { border-color:#078cff; background:#082a46; box-shadow:0 0 14px rgba(0,132,255,.15); }
  .mobile-channel { padding-left:22px !important; font-size:12px !important; }
}
@media (min-width:768px) { .mobile-phone-bar,.mobile-phone-nav,.mobile-drawer { display:none !important; } }

/* DISRUPT MOBILE SHELL */
@media (max-width: 767px) {
  #mobile-shell { display: contents; }

  .main-area > .topbar { display: none !important; }

  .mobile-topbar {
    position: fixed;
    z-index: 900;
    top: 0;
    left: 0;
    right: 0;
    height: calc(54px + env(safe-area-inset-top));
    box-sizing: border-box;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #03111f;
    border-bottom: 1px solid #0b4775;
  }

  .mobile-current {
    flex: 1;
    min-width: 0;
    color: #eaf6ff;
    overflow: hidden;
  }

  .mobile-current strong,
  .mobile-current small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-current strong { font-size: 13px; }
  .mobile-current small { margin-top: 3px; color: #79a5c4; font-size: 10px; }

  .mobile-icon-btn {
    min-width: 42px;
    min-height: 38px;
    border: 1px solid #0b5d96;
    border-radius: 9px;
    background: #061b2e;
    color: #dff2ff;
    font-size: 11px;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 900;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(56px + env(safe-area-inset-bottom));
    padding: 5px 6px env(safe-area-inset-bottom);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #03111f;
    border-top: 1px solid #0b4775;
  }

  .mobile-bottom-nav button {
    flex: 1;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7f9db5;
    font-size: 11px;
  }

  .mobile-bottom-nav button.active {
    color: #48aaff;
    background: #082642;
  }

  .mobile-server-row,
  .mobile-channel-row {
    display: block;
    width: 100%;
    min-height: 42px;
    margin: 4px 0;
    padding: 8px 10px;
    border: 1px solid #0a3c62;
    border-radius: 9px;
    background: #041524;
    color: #d9efff;
    text-align: left;
  }

  .mobile-server-row.active,
  .mobile-channel-row.active {
    border-color: #078cff;
    background: #082a46;
  }

  .mobile-channel-row { padding-left: 22px; }

  .app-shell {
    display: block !important;
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .leftbar, .rightbar, .channelbar { display: none !important; }

  .main-area {
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .page.active-page {
    height: calc(100dvh - 54px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
    margin-top: calc(54px + env(safe-area-inset-top));
    overflow: auto !important;
  }

  .page.active-page.server-page { overflow: hidden !important; }
  .server-layout { display: block !important; height: 100% !important; }
  .chat-panel { height: 100% !important; min-height: 0 !important; }
}

@media (min-width: 768px) {
  #mobile-shell { display: none !important; }
}