/* Compact shell reuses the desktop surfaces; no second navigator or canvas. */
[data-ui-surface="navigator"] .panel__heading { display: contents; }
[data-ui-surface="navigator"] :is([data-ui-mobile-rail], [data-ui-mobile-collapse], .mobile-navigation__return) { display: none; }

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-shell-version="r3"] {
  --arhix-ui-unit: var(--arhix-ui-compact-unit);
  height: 100dvh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-shell-version="r3"] > [data-ui-layer="canvas"] {
  inset: 0;
}

[data-ui-surface="shell"][data-ui-layout="compact"] > [data-ui-surface="toolbar"] { display: none; }

/* Phone workflows keep catalogs and their create/export menus, without editors. */
[data-ui-surface="shell"][data-ui-layout="compact"] :is(
  [data-ui-table-workspace-toggle], [data-ui-document-workspace-toggle],
  [data-ui-file-workspace-toggle], [data-ui-workspace-surface]
) { display: none; }

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-surface="rail"] {
  top: var(--arhix-visual-top, 0px);
  bottom: auto;
  height: var(--arhix-visual-height, 100dvh);
  box-sizing: border-box;
  z-index: var(--arhix-layer-command-bar);
  visibility: hidden;
  transform: translateX(-100%);
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  padding-top: max(var(--arhix-space-gap), env(safe-area-inset-top));
  padding-bottom: max(var(--arhix-space-gap), env(safe-area-inset-bottom));
  box-shadow: var(--arhix-shadow-island);
  gap: var(--arhix-space-gap);
}

[data-ui-surface="shell"][data-ui-layout="compact"] .arhix-rail__group {
  flex: none;
  gap: var(--arhix-space-gap);
}

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-mobile-rail-state="open"] [data-ui-surface="rail"] {
  visibility: visible;
  transform: none;
}

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-surface="navigator"].navigator {
  /* Keep canvas covered throughout Safari keyboard panning, not only at rest. */
  inset: 0;
  height: 100dvh;
  box-sizing: border-box;
  width: auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-surface="navigator"] > .navigator__panel {
  position: relative;
  top: var(--arhix-visual-top, 0px);
  height: calc(var(--arhix-visual-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-surface="navigator"] > .navigator__vdivider { display: none; }

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-mobile-canvas="true"] [data-ui-surface="navigator"].navigator {
  background: transparent;
  pointer-events: none;
}

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-mobile-canvas="true"] [data-ui-surface="navigator"] > .navigator__panel { display: none; }

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-surface="navigator"] .panel__heading {
  display: flex;
  align-items: center;
  gap: var(--arhix-space-gap);
  min-width: 0;
}

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-mobile-collapse] { display: flex; }

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-mobile-rail] {
  --arhix-mobile-handle-base: calc(var(--arhix-bar-zone-height) + 2 * var(--arhix-border-hairline));
  position: fixed;
  z-index: var(--arhix-layer-command-bar);
  top: calc(var(--arhix-visual-top, 0px) + var(--arhix-visual-height, 100dvh) / 2);
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--arhix-space-micro);
  width: calc(2 * var(--arhix-mobile-handle-base) / 3);
  height: calc(var(--arhix-mobile-handle-base) + 2 * (var(--arhix-status-dot-size) + var(--arhix-space-micro)));
  padding: 0;
  border: 1px solid var(--arhix-island-border);
  border-left: 0;
  border-radius: 0 var(--arhix-radius-island) var(--arhix-radius-island) 0;
  background: var(--arhix-surface-soft);
  box-shadow: var(--arhix-shadow-island);
  color: var(--arhix-ink-muted);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

[data-ui-mobile-rail] .toolbar__statuses {
  flex-direction: column;
  margin-left: 0;
}

[data-ui-mobile-rail] .mobile-navigation__grip {
  display: block;
  flex: none;
  width: var(--arhix-status-dot-size);
  height: var(--arhix-pill-height);
  border-radius: var(--arhix-radius-pill);
  background: var(--arhix-ink-ghost);
}

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-mobile-rail-state="open"] [data-ui-mobile-rail] { left: var(--arhix-rail-width); }

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-mobile-canvas="true"] .mobile-navigation__return {
  position: fixed;
  top: calc(var(--arhix-visual-top, 0px) + max(var(--arhix-space-edge), env(safe-area-inset-top)));
  left: max(var(--arhix-space-edge), env(safe-area-inset-left));
  right: auto;
  display: grid;
  pointer-events: auto;
}

[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-mobile-canvas="false"] :is(.inspector-panel, .inspector-mini, .inspector-view-switch) { display: none; }

/* The mobile player belongs to the visible canvas, not the navigator. */
[data-ui-surface="shell"][data-ui-layout="compact"][data-ui-mobile-canvas="false"] .presentation-command { display: none; }
[data-ui-surface="shell"][data-ui-layout="compact"] .presentation-command :is(.presentation-command__button--tool, .presentation-command__separator) { display: none; }

body[data-role="presentation"] [data-ui-surface="shell"] :is([data-ui-mobile-rail], [data-ui-mobile-collapse], .mobile-navigation__return) { display: none; }

/* Opening the inspector preserves its top-right anchor and the close target. */
[data-ui-surface="shell"][data-ui-layout="compact"] .inspector-surface:not([data-collapsed="true"]) .inspector-view-switch {
  visibility: hidden;
}

[data-ui-surface="shell"][data-ui-layout="compact"] .inspector-panel {
  max-height: calc(var(--arhix-visual-height, 100dvh) - 2 * var(--arhix-space-edge) - var(--arhix-space-block) - 2 * var(--arhix-border-hairline));
}

[data-ui-surface="shell"][data-ui-layout="compact"] .inspector-surface {
  top: calc(var(--arhix-visual-top, 0px) + var(--arhix-space-edge));
}

[data-ui-surface="shell"][data-ui-layout="compact"] .secondary-inspector > .color-inspector__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Keep native inertial scrolling inside the UI, including its nested lists. */
[data-ui-surface="shell"][data-ui-layout="compact"] :is(
  .navigator__panel--tab-list, .sheets-list, .blocks-grid, .navigator-collaboration__list,
  .navigator-chat__messages, .navigator-chat__participants, .share-links,
  .inspector-panel__scroll, .menu, .calendar-agenda__scroll
) {
  overscroll-behavior: contain;
}

[data-ui-surface="shell"][data-ui-layout="compact"] [data-ui-surface="navigator"] [draggable="true"] {
  -webkit-user-drag: none;
}

[data-ui-surface="shell"][data-ui-layout="compact"] .navigator-chat__composer [data-ui-chat-draft] {
  max-height: max(calc(36 * var(--arhix-ui-unit)), calc(var(--arhix-visual-height, 100dvh) / 4));
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-ui-surface="shell"][data-ui-layout="compact"] .inspector-scroll-indicator {
  bottom: calc(var(--arhix-visual-bottom-inset, 0px) + var(--arhix-space-edge));
}

/* A compact section scrolls as a whole below its header, including its action.
   Keep the desktop arrangement of independently scrolling collections intact. */
[data-ui-surface="shell"][data-ui-layout="compact"] :is(.navigator-collaboration, .navigator-presentation, .calendar-panel__surface) {
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-ui-surface="shell"][data-ui-layout="compact"] :is(.navigator-collaboration, .navigator-presentation, .calendar-panel__surface) > * {
  flex-shrink: 0;
}

[data-ui-surface="shell"][data-ui-layout="compact"] :is(
  .navigator-collaboration__list, .navigator-presentation > .sheets-list,
  .navigator-presentation .share-links, .calendar-agenda__scroll
) {
  flex: none;
  max-height: none;
  overflow: visible;
}