@media (max-width: 980px) {
  .auth-panel,
  .split-grid,
  .ticket-layout,
  .staff-grid {
    grid-template-columns: 1fr;
  }

  .ticket-type-grid,
  .ticket-type-grid.wide {
    grid-template-columns: 1fr;
  }

  .ticket-meta {
    position: static;
  }
}

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .dashboard-head,
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .ticket-row {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .ticket-row .ticket-id,
  .ticket-row .badge,
  .ticket-row time {
    grid-column: 2;
    text-align: left;
  }

  .auth-copy {
    min-height: 360px;
  }

  .reply-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .page-shell,
  .topbar {
    width: min(100% - 20px, 1180px);
  }

  .brand-text {
    font-size: 0.95rem;
  }

  .nav-actions a {
    min-height: 36px;
    padding: 0 9px;
    font-size: 0.9rem;
  }

  h1 {
    font-size: 2rem;
  }

  .type-card {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 112px;
    padding: 13px;
  }

  .type-icon {
    width: 40px;
    height: 40px;
  }

  .message-list {
    max-height: none;
    min-height: 300px;
    padding: 12px;
  }

  .message {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 9px;
  }

  .message-avatar,
  .avatar-shell {
    width: 42px;
    height: 42px;
  }
}