@layer legacy {
  /* AI Tutor keeps its dedicated chat workspace, but the primary application
     navigation is the same canonical .sidebar used by every other view. */
  @media (min-width: 821px) {
    html body #app .app-shell.chat-shell[data-shared-sidebar="true"] {
      --chat-rail-expanded: var(--cg-sidebar-width);
      grid-template-columns: var(--chat-rail-size) minmax(0, 1fr) !important;
    }

    html body #app .app-shell.chat-shell[data-shared-sidebar="true"]:has(> .chat-workspace-rail > .chat-rail-spaces-details[open]) {
      grid-template-columns: var(--chat-rail-expanded) minmax(0, 1fr) !important;
    }

    html body #app .app-shell.chat-shell[data-shared-sidebar="true"] .aios-chat-topbar > .chat-sidebar-toggle,
    html body #app .app-shell.chat-shell[data-shared-sidebar="true"] .aios-chat-topbar > .chat-mobile-new {
      position: static !important;
      width: 44px !important;
      min-width: 44px !important;
      height: 44px !important;
      min-height: 44px !important;
      display: grid !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    html body #app .app-shell.chat-shell[data-shared-sidebar="true"] .aios-chat-topbar > .chat-mobile-exit {
      display: none !important;
    }
  }

  @media (max-width: 820px) {
    html body #app .app-shell.chat-shell[data-shared-sidebar="true"] > .sidebar {
      display: none !important;
    }
  }

  /* iPad Safari can rubber-band the root document even when the visible shell
     already fills the dynamic viewport. Keep the root fixed on touch tablets
     and give ordinary pages one explicit, momentum-scrolling owner. */
  @media (min-width: 600px) and (max-width: 1366px) and (pointer: coarse) {
    html:has(#app > .app-shell),
    body:has(#app > .app-shell),
    #app:has(> .app-shell) {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      overscroll-behavior: none !important;
    }

    #app:has(> .app-shell) {
      --aios-tablet-scroll-containment: active;
    }

    body:has(#app > .app-shell) {
      position: fixed !important;
      inset: 0 !important;
    }

    html body #app > .app-shell {
      height: 100dvh !important;
      min-height: 0 !important;
      max-height: 100dvh !important;
      overflow: hidden !important;
    }

    html body #app > .app-shell:not(.chat-shell) > .main {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    html body #app > .app-shell:not(.chat-shell) > .main > .content {
      flex: 1 1 auto !important;
      height: auto !important;
      min-height: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior-y: contain !important;
      -webkit-overflow-scrolling: touch;
    }
  }
}