:root {
  --app-frame-width: min(100vw, 560px);
}

.app-shell-v3 {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-keyboard-inset: 0px;
  --app-visual-viewport-height: 100%;
  --app-bottom-obstruction: max(var(--app-safe-bottom), var(--app-keyboard-inset));
  --app-bottom-navigation-content-reserve: 0px;
  --app-floating-action-content-reserve: 0px;
  --app-section-content-bottom: max(var(--app-safe-bottom), var(--app-bottom-navigation-content-reserve), var(--app-floating-action-content-reserve));
  --app-floating-action-bottom: var(--app-bottom-obstruction);
  --app-header-height: 0px;
  --app-tabs-height: 0px;
  --app-bottom-nav-height: 0px;
  --app-section-available-height: 100%;
  --app-layer-content: 0;
  --app-layer-section-chrome: 10;
  --app-layer-bottom-chrome: 20;
  --app-layer-non-modal-backdrop: 30;
  --app-layer-popover: 40;
  --app-layer-modal-backdrop: 50;
  --app-layer-modal: 60;
  --app-layer-critical: 70;
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0;
  height: min(100%, var(--app-visual-viewport-height));
  isolation: isolate;
  width: var(--app-frame-width);
  max-width: var(--app-frame-width);
  margin-inline: auto;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  overscroll-behavior-y: contain;
}

/* The frame owns every bottom reserve.  Keyboard height shrinks the frame by
   visualViewport; only the physical safe area is reserved inside section
   content.  Sections publish only their chrome needs in snapshots. */
.app-shell-v3[data-app-shell-v3-section="notes"][data-app-shell-v3-bottom-visible="true"] {
  --app-bottom-navigation-content-reserve: calc(100px + var(--app-safe-bottom));
}

.app-shell-v3[data-app-shell-v3-section="notes"][data-app-shell-v3-fab-visible="true"] {
  --app-floating-action-bottom: calc(102px + var(--app-bottom-obstruction));
}

.app-shell-v3[data-app-shell-v3-section="chats"][data-app-shell-v3-fab-visible="true"] {
  --app-floating-action-content-reserve: calc(130px + var(--app-safe-bottom));
  --app-floating-action-bottom: calc(96px + var(--app-bottom-obstruction));
}

.app-shell-v3-header-slot,
.app-shell-v3-tabs-slot {
  position: relative;
  z-index: var(--app-layer-section-chrome);
  min-width: 0;
}

.app-shell-v3-header-slot {
  grid-row: 1;
}

.app-shell-v3-tabs-slot {
  grid-row: 2;
}

.app-shell-v3-bottom-slot {
  grid-row: 4;
  z-index: var(--app-layer-bottom-chrome);
  min-width: 0;
}

/* Application-level screens are not section panels: the shell gives their
   provider a host above the whole frame, while the provider owns its DOM. */
.app-shell-v3-application-screen-slot {
  position: absolute;
  inset: 0;
  z-index: calc(var(--app-layer-critical) + 1);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-shell-v3-application-screen-slot[hidden] {
  display: none;
  pointer-events: none;
}

.app-shell-v3-section-slot {
  grid-row: 3;
  position: relative;
  z-index: var(--app-layer-content);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  touch-action: pan-y;
}

.app-shell-v3-section {
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* A section owns the height of its direct application root.  Named roots cover
   the current sections; the data attribute is the contract for every later
   section root. */
.app-shell-v3-section > :is(.notes-root, .chats-root, [data-app-shell-v3-section-root]) {
  height: 100%;
  min-height: 0;
}

.app-shell-v3-header-slot[hidden],
.app-shell-v3-tabs-slot[hidden] {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.app-shell-v3-section[hidden] {
  display: none !important;
  pointer-events: none;
}

.app-shell-v3-bottom-slot[hidden] {
  display: block;
  height: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.app-shell-v3:has(.notes-root .notes-panel-scrim) .app-shell-v3-section-slot {
  z-index: var(--app-layer-critical);
}

.app-shell-v3:has(.chats-root .overlay-scrim.show) .app-shell-v3-section-slot {
  z-index: var(--app-layer-critical);
}

/* A section-owned panel can darken the complete application frame without
   moving its DOM outside the section root. */
.app-shell-v3 .notes-root .notes-panel-scrim {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: var(--app-frame-width) !important;
  transform: translateX(-50%) !important;
}

.app-shell-v3 .chats-root .overlay-scrim {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: var(--app-frame-width) !important;
  transform: translateX(-50%) !important;
}

/* Full-screen sections keep every grid row present.  Collapsing the slots
   rather than removing them preserves the section row's grid placement. */
.app-shell-v3:has(.app-shell-v3-section:not([hidden]) .notes-root.notes-stage-fullscreen-open) .app-shell-v3-header-slot,
.app-shell-v3:has(.app-shell-v3-section:not([hidden]) .notes-root.notes-stage-fullscreen-open) .app-shell-v3-tabs-slot,
.app-shell-v3:has(.app-shell-v3-section:not([hidden]) .notes-root.notes-stage-fullscreen-open) .app-shell-v3-bottom-slot {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.app-shell-v3[data-app-shell-v3-bottom-interactive="false"] .app-shell-v3-bottom-slot .hotbar,
.app-shell-v3[data-app-shell-v3-fab-interactive="false"] .fab {
  pointer-events: none !important;
}

.app-shell-v3[data-app-shell-v3-fab-visible="false"] .fab,
.app-shell-v3[data-app-shell-v3-composer-visible="false"] .notes-v3-editor-composer {
  display: none !important;
}