@media (max-width: 75rem) {
  .safety-label span {
    max-width: 17rem;
  }

  .summary-grid,
  .channels-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .creative-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creative-card:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - var(--space-xs));
  }
}

@media (max-width: 63.99rem) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--sidebar-width), 84%);
    transform: translateX(-105%);
    transition: transform var(--dur-short) var(--ease-out);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .nav-overlay.is-visible,
  .menu-button {
    display: grid;
  }

  .topbar {
    padding-inline: var(--space-md);
  }

  .user-chip {
    display: none;
  }

  .safety-label span {
    max-width: none;
  }

  .view-root {
    padding: var(--space-lg);
  }

  .campaign-workbench,
  .studio-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-panel {
    position: static;
  }

  .inbox-layout {
    grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
  }
}

@media (max-width: 47.99rem) {
  .main-column {
    padding-block-end: 5rem;
  }

  .topbar {
    min-height: 4rem;
  }

  .topbar-title {
    min-width: 0;
  }

  .topbar-kicker,
  .user-chip div {
    display: none;
  }

  .safety-label {
    position: fixed;
    inset-inline: var(--space-sm);
    inset-block-end: var(--space-sm);
    z-index: var(--z-sticky);
    display: block;
    margin-inline-start: 0;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.7rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .safety-label strong,
  .safety-label span {
    display: inline;
  }

  .safety-label strong::after {
    content: " · ";
  }

  .user-chip {
    display: none;
  }

  .view-root {
    padding: var(--space-md);
  }

  .view-head,
  .summary-hero,
  .campaign-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .view-head {
    display: grid;
  }

  .view-head .button {
    width: fit-content;
  }

  .summary-copy {
    padding: var(--space-xl) var(--space-lg);
  }

  .summary-art {
    min-height: 16rem;
  }

  .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metric:nth-child(3) {
    border-inline-start: 0;
  }

  .metric:nth-child(n + 3) {
    border-block-start: 1px solid var(--color-line);
  }

  .inbox-layout {
    display: block;
    min-height: 36rem;
  }

  .conversation-column {
    border-inline-end: 0;
  }

  .inbox-layout.show-chat .conversation-column {
    display: none;
  }

  .chat-panel {
    display: none;
    min-height: 36rem;
  }

  .inbox-layout.show-chat .chat-panel {
    display: grid;
  }

  .chat-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .chat-header .conversation-avatar {
    display: none;
  }

  .chat-header strong {
    white-space: nowrap;
  }

  .mobile-back {
    display: inline-flex !important;
  }

  .ai-suggestion {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid,
  .creative-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-full {
    grid-column: auto;
  }

  .creative-card:last-child {
    grid-column: auto;
    max-width: none;
  }

  .creative-art {
    min-height: 21rem;
  }

  .channel-data div {
    display: grid;
    gap: var(--space-2xs);
  }

  .channel-data dd {
    text-align: start;
  }
}

@media (max-width: 23.5rem) {
  .safety-label {
    padding-inline: var(--space-xs);
  }

  .safety-label strong {
    font-size: 0.7rem;
  }

  .view-root {
    padding-inline: var(--space-sm);
  }

  .card-pad,
  .campaign-form,
  .studio-controls,
  .channel-card {
    padding: var(--space-md);
  }

  .chat-header,
  .composer,
  .messages {
    padding-inline: var(--space-sm);
  }

  .message {
    max-width: 88%;
  }

  .composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .composer-actions .button {
    width: 100%;
  }

  .campaign-copy {
    padding: var(--space-lg);
  }
}

@media (pointer: coarse) {
  .button,
  .segment,
  .primary-nav a {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}