/* Mobile-specific safeguards are isolated so desktop presentation remains unchanged. */
@media (max-width: 760px) {
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .app-shell,
  .app-shell.sidebar-collapsed {
    min-height: 100dvh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .main,
  .content {
    min-width: 0;
    width: 100%;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 59;
    min-height: 62px;
    gap: 8px;
    padding: 8px 10px;
  }

  .topbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .topbar-brand > div {
    min-width: 0;
  }

  .topbar-brand .eyebrow,
  #syncMetricsBtn,
  #themeBtn,
  #syncStatus {
    display: none;
  }

  .topbar-brand h2 {
    max-width: 100%;
    font-size: clamp(1rem, 5vw, 1.25rem);
    line-height: 1.15;
  }

  .header-logo {
    width: 28px;
    height: 28px;
  }

  .top-actions {
    flex: 0 0 auto;
    gap: 4px;
  }

  #moreBtn {
    display: inline-flex;
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
    align-items: center;
  }

  .content {
    max-width: none;
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom));
  }

  .hero-panel,
  .panel {
    min-width: 0;
    padding: 14px;
  }

  .hero-panel h1 {
    font-size: clamp(1.65rem, 9vw, 2.35rem);
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .countdown,
  .topic-title,
  .row-title,
  .material-name {
    overflow-wrap: anywhere;
  }

  .bottom-nav {
    position: fixed !important;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 68px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
    isolation: isolate;
    transform: translateZ(0);
    visibility: visible !important;
  }

  .bottom-nav button {
    min-width: 0;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .question-board-grid,
  .study-control-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .study-control-stats {
    justify-content: flex-start;
  }

  .study-chip {
    width: auto;
    min-width: min(100%, 150px);
  }

  .right-panel {
    z-index: 110;
    width: min(440px, 100vw);
  }

.right-panel-scrim {
    z-index: 109;
  }
}

/* The desktop header follows the compact context-tool pattern from the v12 reference. */
@media (min-width: 761px) {
  .panel-action {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0;
    border-radius: 12px;
  }

  .panel-action-label {
    display: none;
  }
}