/* PHANTOM — mobile-first polish */
@media (max-width: 991.98px) {
  body {
    overflow-x: hidden;
  }

  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navbar .nav-link {
    padding: 10px 12px !important;
  }

  .navbar-nav {
    padding-bottom: 12px;
  }

  .page-wrap {
    padding: 84px 12px 32px !important;
  }

  .page-title {
    font-size: 1.45rem !important;
  }

  h1 {
    font-size: 1.55rem !important;
  }

  .ph-panel,
  .card {
    border-radius: 12px !important;
  }

  /* Tables scroll */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Forms */
  .form-control,
  .form-select,
  input[type="text"],
  input[type="file"],
  textarea,
  select {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  .btn,
  .cab-btn {
    min-height: 42px;
  }
}

@media (max-width: 768px) {
  /* Chat layout */
  .chat-wrapper {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100dvh - 72px) !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .chat-sidebar {
    width: 100% !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid #1e2438 !important;
    padding: 10px 0 8px !important;
  }

  .chat-sidebar h6 {
    padding: 4px 12px !important;
  }

  /* Horizontal channel chips */
  .chat-sidebar .channel-item,
  .chat-sidebar .voice-item,
  .chat-sidebar .docs-item {
    display: inline-flex !important;
    width: auto !important;
    border-left: none !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    margin: 4px 4px !important;
    background: #151a2b;
  }

  .chat-sidebar .channel-item.active,
  .chat-sidebar .docs-item.active {
    background: #ff4d00 !important;
    color: #fff !important;
  }

  .chat-sidebar .voice-item.active {
    background: #1a2e1f !important;
    color: #57f287 !important;
  }

  /* wrap channels in scroll row via parent */
  .chat-sidebar {
    display: flex;
    flex-direction: column;
  }

  .chat-main,
  .docs-panel,
  .voice-panel {
    min-height: 55vh !important;
  }

  .chat-header {
    padding: 12px 14px !important;
    font-size: .95rem !important;
  }

  .chat-messages {
    padding: 12px !important;
    gap: 10px !important;
  }

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

  .chat-msg .avatar {
    width: 34px !important;
    height: 34px !important;
  }

  .chat-input-area {
    padding: 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  .chat-input-area input {
    font-size: 16px !important;
    min-width: 0 !important;
  }

  .chat-input-area button {
    padding: 0 14px !important;
    white-space: nowrap;
  }

  /* Documents */
  .docs-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .docs-toolbar input[type="file"] {
    max-width: 100% !important;
  }

  .docs-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .docs-row .info {
    flex: 1 1 100% !important;
  }

  .docs-list {
    padding: 12px !important;
  }

  .voice-stage {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    padding: 12px !important;
  }

  /* Servers */
  .srv-page {
    padding: 84px 12px 40px !important;
  }

  .srv-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 6px;
    margin: 12px 0 16px !important;
  }

  .srv-tab {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    font-size: .85rem !important;
  }

  .srv-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .srv-card {
    padding: 14px !important;
  }

  .srv-connect {
    font-size: .8rem !important;
    word-break: break-all;
  }

  /* Profile / cabinet */
  .cab-hero-inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .cab-badges {
    justify-content: center !important;
  }

  .cab-stats,
  .cab-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Settings / notifications */
  .list-group-item {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Members / cards */
  .members-grid,
  .gal-grid {
    grid-template-columns: 1fr !important;
  }

  /* Navbar brand */
  .navbar-brand img,
  .navbar-brand svg {
    max-height: 36px;
  }

  /* Footer spacing */
  footer,
  .site-footer {
    padding: 24px 12px !important;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.35rem !important;
  }

  .cab-stats,
  .cab-grid {
    grid-template-columns: 1fr !important;
  }

  .chat-msg .role-badge {
    display: none;
  }

  .srv-tab .cnt {
    display: none;
  }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .chat-input-area {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}


/* Nightfall mobile stage5 */
@media (max-width: 767.98px) {
  h1, .nf-title { font-size: 1.6rem !important; }
  .nf-page, .news-page, .gal-page, .top-page, .servers-page { padding-top: 88px !important; }
  .ph-stats-grid { gap: 8px !important; }
  .ph-stat, .ph-stat-link { min-width: 46% !important; padding: 12px 8px !important; }
  .ph-stat-val { font-size: 20px !important; }
  table { font-size: 13px; }
  .btn, .ph-btn { min-height: 44px; }
}