.browserLayer {
  display: none;
}

@include respond-down(mobile) {
  .browserLayer {
    position: fixed;
    inset: 0;
    display: grid;
    z-index: calc(var(--z-popover, 20) + 2);
    background: color-mix(in srgb, var(--color-canvas) 96%, black 4%);
  }

	.sheet {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 84%, transparent) 0%, transparent 8rem),
      color-mix(in srgb, var(--color-canvas) 97%, black 3%);
    overflow: clip;
  }

  .sheetHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
  }

  .headerActions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .brandBlock {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
  }

  .sectionLabel {
    @include text-caption;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .brandEyebrow {
    @include text-caption;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .brandTitle {
    @include text-title;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .brandContext {
    @include text-caption;
    color: var(--color-text-subtle);
  }

  .closeButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-size-md);
    height: var(--control-size-md);
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    color: var(--color-text-subtle);
  }

  .createButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-size-md);
    padding: 0 var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-border-strong, var(--color-border)) 82%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-canvas) 6%);
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
    font: inherit;
    font-weight: var(--font-weight-semibold);
  }

  .sheetBody {
    min-height: 0;
    display: grid;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-5) calc(var(--space-12) + var(--space-10) + env(safe-area-inset-bottom, 0px));
    overflow: auto;
  }

  .sectionBlock {
    display: grid;
    gap: var(--space-2);
  }

  .treeList,
  .treeListItem {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .treeList {
    display: grid;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
  }

  .treeListNested {
    display: grid;
    gap: 0;
  }

  .treeRow {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: calc(var(--control-size-lg) + var(--space-3));
    padding: var(--space-4) var(--space-2) var(--space-4) calc(var(--space-2) + (var(--tree-depth, 0) * var(--space-4)));
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 92%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    text-align: left;
  }

  .treeRowActive {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
  }

  .treeRowBranch {
    font-weight: var(--font-weight-semibold);
  }

  .treeRowLead,
  .treeRowTrail {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .treeRowTrail {
    flex: 0 0 auto;
    color: var(--color-text-muted);
  }

  .treeLabel {
    @include text-label;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .treeMeta {
    @include text-caption;
    min-width: 1rem;
    text-align: right;
  }

  .treeChevron {
    color: var(--color-text-subtle);
  }

  .treeListNested > .treeListItem > .treeRow {
    min-height: calc(var(--control-size-lg) + var(--space-1));
  }
}