@layer components {
  .buzz-terminal-substrate {
    background: var(--buzz-terminal-background, #101014);
    color: var(--buzz-terminal-foreground, #e8e8ec);
    display: flex;
    flex-direction: column;
    font-family: "JetBrains Mono", monospace;
    font-variant-ligatures: none;
    inset: 0;
    position: absolute;
    user-select: none;
    z-index: 0;
  }

  .buzz-terminal-contract-bar {
    align-items: center;
    background: hsl(var(--secondary));
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--secondary-foreground));
    display: flex;
    flex: 0 0 40px;
    font-family: inherit;
    font-variant-ligatures: normal;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    padding: 4px 1.25rem;
  }

  .buzz-terminal-tabs,
  .buzz-terminal-readout {
    align-items: center;
    display: flex;
    min-width: 0;
  }

  .buzz-terminal-tab,
  .buzz-terminal-tab-select,
  .buzz-terminal-close,
  .buzz-terminal-new-tab {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    color: hsl(var(--muted-foreground));
    display: flex;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    gap: 6px;
    height: 30px;
    padding: 0 9px;
    position: relative;
  }

  .buzz-terminal-tabs {
    flex: 1 1 auto;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .buzz-terminal-tabs::-webkit-scrollbar {
    display: none;
  }

  .buzz-terminal-readout {
    background: hsl(var(--secondary));
    flex: 0 0 auto;
    gap: 4px;
    padding: 0;
    position: relative;
    z-index: 1;
  }

  .buzz-terminal-tab {
    background: hsl(var(--background));
    border-radius: 4px;
    flex: 0 0 auto;
    padding: 0;
  }

  .buzz-terminal-tab-active {
    background: hsl(var(--background));
  }

  .buzz-terminal-tab:hover,
  .buzz-terminal-tab:focus-within {
    background: hsl(var(--foreground) / 0.06);
  }

  .buzz-terminal-tab-select {
    border-radius: inherit;
    max-width: 12rem;
    min-width: 0;
    padding-left: 32px;
  }

  .buzz-terminal-tab-active .buzz-terminal-tab-select {
    color: hsl(var(--foreground));
  }

  .buzz-terminal-new-tab:hover {
    background: hsl(var(--foreground) / 0.06);
    color: hsl(var(--foreground));
  }

  .buzz-terminal-new-tab {
    align-items: center;
    background: hsl(var(--background));
    border-radius: 4px;
    height: 30px;
    justify-content: center;
    padding: 7px;
    width: 30px;
  }

  .buzz-terminal-new-tab svg {
    height: 16px;
    width: 16px;
  }

  .buzz-terminal-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .buzz-terminal-designator {
    align-items: center;
    display: inline-flex;
    font-size: 0.75rem;
    gap: 2px;
    letter-spacing: 0;
  }

  .buzz-terminal-designator svg {
    height: 16px;
    width: 16px;
  }

  .buzz-terminal-close {
    height: 16px;
    left: 8px;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 16px;
    z-index: 1;
  }

  .buzz-terminal-tab:hover .buzz-terminal-close,
  .buzz-terminal-tab:focus-within .buzz-terminal-close {
    color: hsl(var(--foreground));
    opacity: 1;
    pointer-events: auto;
  }

  .buzz-terminal-close svg {
    height: 16px;
    width: 16px;
  }

  .buzz-terminal-readout {
    white-space: nowrap;
  }

  .buzz-terminal-viewport,
  .buzz-terminal-viewport canvas {
    height: 100%;
    min-height: 0;
    width: 100%;
  }

  .buzz-terminal-viewport {
    overflow: hidden;
    position: relative;
  }

  .buzz-terminal-viewport canvas {
    display: block;
  }

  .buzz-terminal-selection-layer {
    bottom: 0;
    color: transparent;
    font:
      14px / 17px "JetBrains Mono",
      monospace;
    left: 1.25rem;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: 1.25rem;
    top: 0.5rem;
    user-select: text;
    white-space: pre;
  }

  .buzz-terminal-selection-layer > div {
    height: 17px;
  }

  .buzz-terminal-selection-layer::selection {
    background: hsl(var(--accent) / 0.65);
    color: transparent;
  }

  .buzz-terminal-welcome {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
  }

  .buzz-terminal-input {
    height: 1px;
    left: -10000px;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 1px;
  }
}

@layer components {
  .buzz-terminal-dock-host:has(.buzz-terminal-substrate) {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    transition:
      flex-grow 180ms ease,
      flex-basis 180ms ease;
  }

  .buzz-content-primary {
    transition:
      flex-grow 180ms ease,
      flex-basis 180ms ease;
  }

  .buzz-terminal-dock-host:has([data-terminal-mode="maximized"]) {
    flex: 1 1 auto;
  }

  .buzz-content-primary:has(
    + .buzz-terminal-dock-host [data-terminal-mode="maximized"]
  ) {
    flex: 0 1 0%;
    min-height: 0;
  }

  .buzz-terminal-substrate {
    border-top: 1px solid hsl(var(--border));
    inset: auto;
    min-height: 180px;
    opacity: 1;
    position: relative;
    transform: translateY(0);
    transition:
      height 180ms ease,
      transform 180ms ease;
    width: 100%;
    z-index: 20;
  }

  .buzz-terminal-substrate[data-terminal-resizing="true"] {
    transition: none;
  }

  .buzz-terminal-substrate[data-terminal-visible="false"] {
    height: 0 !important;
    min-height: 0;
    pointer-events: none;
    transform: translateY(16px);
  }

  .buzz-terminal-dock-host [data-terminal-mode="maximized"] {
    flex: 1 1 auto;
    height: 100%;
  }

  .buzz-terminal-resize-handle {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    top: -3px;
    z-index: 2;
  }

  .buzz-terminal-window-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius) - 2px);
    color: hsl(var(--muted-foreground));
    display: inline-flex;
    height: 30px;
    justify-content: center;
    width: 30px;
  }

  .buzz-terminal-window-action:hover,
  .buzz-terminal-window-action:focus-visible {
    background: hsl(var(--foreground) / 0.06);
    color: hsl(var(--foreground));
  }

  .buzz-terminal-window-action svg {
    height: 16px;
    width: 16px;
  }

  @media (prefers-reduced-motion: reduce) {
    .buzz-content-primary,
    .buzz-terminal-dock-host:has(.buzz-terminal-substrate),
    .buzz-terminal-substrate {
      transition: none;
    }
  }
}