@layer env.components {
  .env-panel-dock {
    --env-panel-dock-gap: var(--env-space-2);
    --env-panel-dock-gutter: var(--env-space-5);
    --env-panel-dock-tab-height: var(--env-control-height-sm);
    --env-panel-dock-control: var(--env-control-height-sm);
    --env-panel-dock-strip-size: 0rem;
    container: env-panel-dock / inline-size;
    font-size: calc(var(--env-panel-dock-stack-below) / 37.5);
    position: absolute;
    inset: 0;
    z-index: calc(var(--env-z-sticky) - 1);
    overflow: clip;
    pointer-events: none;
  }
  .env-panel-dock[data-tabs] {
    --env-panel-dock-strip-size: calc(var(--env-panel-dock-tab-height) + var(--env-space-2));
  }
  .env-panel-dock[data-filled] {
    background: var(--env-color-bg-page);
    pointer-events: auto;
  }
  .env-panel-dock-row {
    gap: var(--env-panel-dock-gap);
    min-block-size: 0;
    padding: var(--env-panel-dock-gutter) var(--env-panel-dock-gutter) 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .env-panel-dock-row::before,
  .env-panel-dock-strip::before {
    content: '';
    flex: 1 0 0;
    margin-inline-end: calc(-1 * var(--env-panel-dock-gap));
  }
  .env-panel-dock-row[data-overflowing] {
    pointer-events: auto;
  }
  .env-panel-dock[data-filled]:not([data-stacked]) > .env-panel-dock-row {
    padding-block-start: calc(
      var(--env-panel-dock-control) + 2 * var(--env-space-3) + var(--env-space-2)
    );
  }
  .env-panel-dock-panel {
    --env-panel-dock-panel-color: var(--env-color-bg-raised);
    --env-panel-dock-panel-default-width: 32rem;
    --env-panel-dock-panel-default-min-width: 20rem;
    --env-panel-dock-panel-default-max-width: 48rem;
    --env-panel-dock-panel-default-height: 28rem;
    position: relative;
    z-index: var(--env-z-raised);
    flex: 0 1 var(--env-panel-dock-panel-width, var(--env-panel-dock-panel-default-width));
    min-inline-size: var(
      --env-panel-dock-panel-min-width,
      var(--env-panel-dock-panel-default-min-width)
    );
    max-inline-size: var(
      --env-panel-dock-panel-max-width,
      var(--env-panel-dock-panel-default-max-width)
    );
    block-size: var(--env-panel-dock-panel-height, var(--env-panel-dock-panel-default-height));
    border: 1px solid var(--env-elevation-2-border);
    border-block-end: 0;
    border-start-start-radius: var(--env-radius-surface);
    border-start-end-radius: var(--env-radius-surface);
    background: var(--env-panel-dock-panel-color);
    color: var(--env-color-fg-default);
    font: var(--env-type-body);
    overflow-wrap: break-word;
    pointer-events: auto;
    outline: none;
  }
  .env-panel-dock-panel[data-active] {
    z-index: calc(var(--env-z-raised) + 1);
    border-color: var(--env-color-border-primary-emphasis);
  }
  .env-panel-dock-panel:focus-visible,
  .env-panel-dock-content:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: -2px;
  }
  .env-panel-dock-panel[data-placement='fill'] {
    position: absolute;
    inset: 0 0 var(--env-panel-dock-strip-size);
    z-index: var(--env-z-base);
    min-inline-size: 0;
    max-inline-size: none;
    block-size: auto;
    border: 0;
    border-radius: 0;
  }
  .env-panel-dock-panel[data-placement='hidden'] {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: calc(var(--env-z-base) - 1);
    inline-size: min(
      var(--env-panel-dock-panel-width, var(--env-panel-dock-panel-default-width)),
      100%
    );
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .env-panel-dock-content {
    flex: 1 1 auto;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overscroll-behavior-block: contain;
    --env-panel-dock-no-header: 0rem;
    scroll-padding-block-start: calc(
      var(--env-panel-dock-header-size, var(--env-panel-dock-no-header)) + var(--env-space-2)
    );
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    outline: none;
  }
  .env-panel-dock-panel[data-placement='row'] > .env-panel-dock-content {
    padding-block-end: var(--env-panel-dock-strip-size);
    scroll-padding-block-end: calc(var(--env-panel-dock-strip-size) + var(--env-space-2));
  }
  .env-panel-dock-resize-handle {
    --env-panel-dock-resize-band: 0.75rem;
    position: absolute;
    inset-block-start: calc(var(--env-panel-dock-resize-band) / -2);
    inset-inline: var(--env-radius-surface);
    z-index: calc(var(--env-z-raised) + 1);
    block-size: var(--env-panel-dock-resize-band);
    cursor: ns-resize;
    touch-action: none;
    outline: none;
  }
  .env-panel-dock-resize-handle::after {
    --env-panel-dock-resize-bar-top: 0.5rem;
    --env-panel-dock-resize-bar-width: 2.5rem;
    content: '';
    position: absolute;
    inset-block-start: var(--env-panel-dock-resize-bar-top);
    inset-inline-start: calc(50% - var(--env-panel-dock-resize-bar-width) / 2);
    inline-size: var(--env-panel-dock-resize-bar-width);
    block-size: var(--env-space-1);
    border-radius: var(--env-radius-full);
    background: var(--env-color-border-muted);
    opacity: 0;
    transition:
      opacity var(--env-motion-duration-fast) var(--env-motion-ease-enter),
      background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-panel-dock-resize-handle:is(:hover, :focus-visible)::after,
  .env-panel-dock-panel[data-resizing] > .env-panel-dock-resize-handle::after {
    opacity: 1;
  }
  .env-panel-dock-resize-handle:hover::after {
    background: var(--env-color-border-muted-hover);
  }
  .env-panel-dock-resize-handle:focus-visible::after,
  .env-panel-dock-panel[data-resizing] > .env-panel-dock-resize-handle::after {
    background: var(--env-color-border-focus);
  }
  .env-panel-dock-panel[data-resizing] {
    -webkit-user-select: none;
    user-select: none;
  }
  .env-panel-dock-panel[data-resizing] > .env-panel-dock-content {
    pointer-events: none;
  }
  .env-panel-dock-header {
    --env-control-height: var(--env-control-height-sm);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--env-z-raised);
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: start;
    column-gap: var(--env-space-3);
    row-gap: var(--env-space-2);
    padding-block: var(--env-space-3);
    padding-inline: var(--env-space-5) var(--env-space-3);
    background: var(--env-panel-dock-panel-color, var(--env-color-bg-raised));
    color: var(--env-color-fg-default);
    transition: background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-panel-dock-heading {
    --env-panel-dock-heading-min-width: 10rem;
    flex: 1 1 var(--env-panel-dock-heading-min-width);
    gap: calc(var(--env-space-1) / 2);
    overflow-wrap: break-word;
  }
  .env-panel-dock-title {
    --env-panel-dock-title-inset: max(
      0rem,
      calc((var(--env-panel-dock-control) - var(--env-type-headline-line-height)) / 2)
    );
    margin: 0;
    padding-block-start: var(--env-panel-dock-title-inset);
    font: var(--env-type-headline);
    letter-spacing: var(--env-type-headline-letter-spacing);
    overflow-wrap: break-word;
  }
  .env-panel-dock-meta {
    min-inline-size: 0;
    color: var(--env-color-fg-muted);
    font: var(--env-type-body-sm);
  }
  .env-panel-dock-actions,
  .env-panel-dock-controls {
    gap: calc(var(--env-space-1) / 2);
  }
  .env-panel-dock-actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }
  .env-panel-dock-header-content {
    order: -1;
    flex: 1 0 100%;
    min-inline-size: 0;
    margin-block-start: var(--env-space-1);
  }
  .env-panel-dock-header[data-scrolled] {
    background-color: var(--env-color-bg-default);
  }
  .env-panel-dock-strip {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: calc(var(--env-z-raised) + 2);
    gap: var(--env-panel-dock-gap);
    margin: 0;
    padding: var(--env-space-2) var(--env-panel-dock-gutter) 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .env-panel-dock-strip::-webkit-scrollbar {
    display: none;
  }
  .env-panel-dock-tab {
    --env-panel-dock-tab-max-width: 14rem;
    flex: 0 0 auto;
    max-inline-size: var(--env-panel-dock-tab-max-width);
    block-size: var(--env-panel-dock-tab-height);
    border: 1px solid var(--env-elevation-2-border);
    border-block-end: 0;
    border-start-start-radius: var(--env-radius-sm);
    border-start-end-radius: var(--env-radius-sm);
    background: var(--env-color-bg-popup);
    color: var(--env-color-fg-default);
    font: var(--env-type-body-sm);
    pointer-events: auto;
  }
  .env-panel-dock-tab-restore {
    flex: 1 1 auto;
    align-self: stretch;
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: var(--env-space-2);
    padding-block: 0;
    padding-inline: var(--env-space-3) var(--env-space-1);
    border: 0;
    border-start-start-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-panel-dock-tab-restore:hover {
    background: var(--env-color-bg-neutral-subtle-hover);
  }
  .env-panel-dock-tab-restore:active {
    background: var(--env-color-bg-neutral-subtle-pressed);
  }
  .env-panel-dock-tab .env-icon {
    inline-size: var(--env-control-icon-size);
    block-size: var(--env-control-icon-size);
    color: var(--env-color-fg-muted);
  }
  .env-panel-dock-tab-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .env-panel-dock-tab-attention {
    flex: 0 0 auto;
    --env-panel-dock-attention-size: 0.5rem;
    inline-size: var(--env-panel-dock-attention-size);
    block-size: var(--env-panel-dock-attention-size);
    border-radius: 50%;
    background: var(--env-color-fg-primary);
  }
  .env-panel-dock-tab-close {
    --env-icon-button-hit-area: var(--env-control-height-touch);
    --env-control-height: 1.5rem;
    margin-inline: calc(var(--env-space-1) / 2) var(--env-space-1);
  }
  .env-panel-dock-tab-close .env-icon {
    color: inherit;
  }
  .env-panel-dock-tab-restore:focus-visible,
  .env-panel-dock-tab-close:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: -2px;
  }
  .env-panel-dock-probe {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 0;
    visibility: hidden;
    pointer-events: none;
  }
  @container env-panel-dock (width >= 37.5em) {
    .env-panel-dock-strip[data-env-ssr-tab-in='stacked'],
    .env-panel-dock-tab[data-env-ssr-tab-in='stacked'] {
      display: none;
    }
  }
  @container env-panel-dock (width < 37.5em) {
    .env-panel-dock-probe {
      inline-size: 100%;
    }
    .env-panel-dock[data-env-ssr-pending] > .env-panel-dock-row {
      --env-panel-dock-strip-size: 0rem;
    }
    .env-panel-dock[data-env-ssr-tabs] > .env-panel-dock-row {
      --env-panel-dock-strip-size: calc(var(--env-panel-dock-tab-height) + var(--env-space-2));
    }
    .env-panel-dock[data-env-ssr-filled] > .env-panel-dock-strip {
      background: var(--env-color-bg-page);
      pointer-events: auto;
    }
    .env-panel-dock-strip[data-env-ssr-tab-in='wide'],
    .env-panel-dock-tab[data-env-ssr-tab-in='wide'],
    .env-panel-dock-panel[data-env-ssr-placement] [data-window-control='maximize'] {
      display: none;
    }
    .env-panel-dock-panel[data-env-ssr-placement='fill'] {
      position: absolute;
      inset: 0 0 var(--env-panel-dock-strip-size);
      z-index: var(--env-z-base);
      min-inline-size: 0;
      max-inline-size: none;
      block-size: auto;
      border: 0;
      border-radius: 0;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
    .env-panel-dock-panel[data-env-ssr-placement] > .env-panel-dock-content {
      padding-block-end: 0;
    }
    .env-panel-dock-panel[data-env-ssr-placement='hidden'] {
      position: absolute;
      inset: auto 0 0 auto;
      z-index: calc(var(--env-z-base) - 1);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }
  }
  @media (pointer: coarse) {
    .env-panel-dock {
      --env-panel-dock-tab-height: calc(
        max(var(--env-control-height-sm), var(--env-control-height-touch)) +
          var(--env-control-border-width)
      );
      --env-panel-dock-control: max(var(--env-control-height-sm), var(--env-control-height-touch));
    }
    .env-panel-dock-resize-handle {
      --env-panel-dock-resize-band: 1.5rem;
    }
    .env-panel-dock-resize-handle::after {
      --env-panel-dock-resize-bar-top: 0.875rem;
      opacity: 1;
    }
    .env-panel-dock-tab-close {
      margin-inline: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .env-panel-dock-header,
    .env-panel-dock-resize-handle::after,
    .env-panel-dock-tab-restore {
      transition: none;
    }
  }
  .env-panel-dock-panel[data-entering][data-placement='row'],
  .env-panel-dock-tab[data-entering] {
    animation: env-motion-fade-in var(--env-motion-duration-medium) var(--env-motion-ease-enter);
  }
  .env-panel-dock-panel[data-entering][data-placement='fill'] {
    animation: env-panel-dock-fade-in var(--env-motion-duration-medium) var(--env-motion-ease-enter);
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-panel-dock-panel[data-entering][data-placement='row'] {
      animation: env-panel-dock-rise var(--env-motion-duration-slow) var(--env-motion-ease-enter);
    }
    .env-panel-dock-panel[data-entering][data-placement='fill'] {
      animation: env-panel-dock-grow var(--env-motion-duration-slow) var(--env-motion-ease-enter);
    }
    .env-panel-dock-tab[data-entering] {
      animation: env-panel-dock-tab-rise var(--env-motion-duration-medium)
        var(--env-motion-ease-enter);
    }
  }
  @keyframes env-panel-dock-fade-in {
    from {
      opacity: 0;
    }
  }
  @keyframes env-panel-dock-rise {
    from {
      opacity: 0;
      transform: translateY(calc(6 * var(--env-space-1)));
    }
  }
  @keyframes env-panel-dock-grow {
    from {
      opacity: 0;
      transform: scale(0.98);
    }
  }
  @keyframes env-panel-dock-tab-rise {
    from {
      opacity: 0;
      transform: translateY(calc(3 * var(--env-space-1)));
    }
  }
  @media (forced-colors: active) {
    .env-panel-dock-panel[data-active] {
      border-color: Highlight;
    }
    .env-panel-dock-header[data-scrolled] {
      margin-block-end: calc(-1 * var(--env-control-border-width));
      border-block-end: var(--env-control-border-width) solid CanvasText;
    }
  }
}