.buffer-container {
  position: relative;
  z-index: 10;
  background: var(--primary-bg);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

.buffer-container:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.ui-layer {
  position: relative;
  z-index: 5;
  background: var(--color-secondary-bg);
  border-top: 1px solid var(--color-border);
}

.sidebar {
  position: relative;
  z-index: 7;
  background: var(--color-secondary-bg);
  border-right: 1px solid var(--color-border);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
}

.status-bar {
  position: relative;
  z-index: 8;
  background: var(--color-secondary-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.buffer {
  background: var(--primary-bg);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.buffer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(200, 200, 200, 0.01) 45%,
      rgba(200, 200, 200, 0.02) 50%,
      rgba(200, 200, 200, 0.01) 55%,
      transparent 100%
    ),
    linear-gradient(
      0deg,
      transparent 0%,
      rgba(200, 200, 200, 0.01) 48%,
      rgba(200, 200, 200, 0.02) 50%,
      rgba(200, 200, 200, 0.01) 52%,
      transparent 100%
    );
  background-size:
    300px 1px,
    1px 300px;
  background-position:
    0 0,
    0 0;
  pointer-events: none;
}

.pane {
  background: var(--color-secondary-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  position: relative;
  z-index: 5;
}

.pane-header {
  background: var(--color-secondary-bg);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 12px;
  font-size: var(--ui-text-xs);
  color: var(--color-text-light);
}

.quick-open {
  position: relative;
  z-index: 9;
  background: var(--color-secondary-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.main-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  height: 100vh;
  overflow: hidden;
}

.main-header {
  grid-area: header;
  z-index: 8;
}

.main-sidebar {
  grid-area: sidebar;
  z-index: 7;
}

.main-content {
  grid-area: main;
  z-index: 6;
  padding: 16px;
  background: var(--color-secondary-bg);
  overflow: auto;
}

.main-footer {
  grid-area: footer;
  z-index: 8;
}

.buffer-focused {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.window-container {
  overflow: hidden;
}

html:not([data-window-transparency="disabled"]) {
  --athas-macos-glass-shell-bg: color-mix(in srgb, var(--color-secondary-bg) 12%, transparent);
  --athas-macos-glass-workbench-bg: color-mix(in srgb, var(--color-secondary-bg) 10%, transparent);
  --athas-macos-glass-chrome-bg: color-mix(in srgb, var(--color-secondary-bg) 18%, transparent);
  --athas-macos-glass-control-bg: color-mix(in srgb, var(--color-secondary-bg) 20%, transparent);
  --athas-macos-glass-control-active-bg: color-mix(in srgb, var(--color-hover) 70%, transparent);
  --athas-macos-glass-control-border: color-mix(in srgb, var(--color-border) 26%, transparent);
  --athas-macos-glass-popover-bg: color-mix(in srgb, var(--color-primary-bg) 62%, transparent);
  --athas-macos-glass-popover-border: color-mix(in srgb, var(--color-border) 50%, transparent);
  --athas-macos-glass-chrome-border: transparent;
  --athas-macos-glass-chrome-filter: saturate(1.2) blur(20px);
  --athas-chrome-icon-color: color-mix(in srgb, var(--color-text-light) 78%, transparent);
  --athas-chrome-icon-hover-color: var(--color-text);
  --athas-chrome-icon-active-color: var(--color-text);
  --athas-chrome-control-hover-bg: color-mix(in srgb, var(--color-hover) 58%, transparent);
  --athas-chrome-control-active-bg: color-mix(in srgb, var(--color-hover) 72%, transparent);
}

html:not([data-window-transparency="disabled"])[data-theme-type="light"] {
  --athas-macos-glass-shell-bg: color-mix(in srgb, var(--color-secondary-bg) 42%, transparent);
  --athas-macos-glass-workbench-bg: color-mix(in srgb, var(--color-secondary-bg) 30%, transparent);
  --athas-macos-glass-chrome-bg: color-mix(in srgb, var(--color-secondary-bg) 62%, transparent);
  --athas-macos-glass-control-bg: color-mix(in srgb, var(--color-primary-bg) 42%, transparent);
  --athas-macos-glass-control-active-bg: color-mix(
    in srgb,
    var(--color-primary-bg) 78%,
    transparent
  );
  --athas-macos-glass-control-border: color-mix(in srgb, var(--color-border) 42%, transparent);
  --athas-macos-glass-popover-bg: color-mix(in srgb, var(--color-primary-bg) 78%, transparent);
  --athas-macos-glass-popover-border: color-mix(in srgb, var(--color-border) 55%, transparent);
  --athas-macos-glass-chrome-border: color-mix(in srgb, var(--color-border) 45%, transparent);
  --athas-macos-glass-chrome-filter: saturate(1.08) blur(24px);
  --athas-chrome-icon-color: color-mix(in srgb, var(--color-text) 66%, transparent);
  --athas-chrome-icon-hover-color: color-mix(
    in srgb,
    var(--color-text) 92%,
    var(--color-accent) 8%
  );
  --athas-chrome-icon-active-color: color-mix(
    in srgb,
    var(--color-text) 88%,
    var(--color-accent) 12%
  );
  --athas-chrome-control-hover-bg: color-mix(in srgb, var(--color-primary-bg) 62%, transparent);
  --athas-chrome-control-active-bg: color-mix(in srgb, var(--color-primary-bg) 78%, transparent);
}

html:not([data-window-transparency="disabled"]) .window-container {
  background: transparent !important;
}

html:not([data-window-transparency="disabled"]) .athas-layout-shell {
  background: var(--athas-macos-glass-shell-bg) !important;
}

html:not([data-window-transparency="disabled"]) .athas-resizable-pane,
html:not([data-window-transparency="disabled"]) .athas-sidebar-rail {
  background: transparent !important;
}

html:not([data-window-transparency="disabled"]) .athas-workbench-glass {
  background: var(--athas-macos-glass-workbench-bg) !important;
}

html:not([data-window-transparency="disabled"]) .athas-title-bar,
html:not([data-window-transparency="disabled"]) .athas-footer-bar {
  background: var(--athas-macos-glass-chrome-bg) !important;
  border-color: var(--athas-macos-glass-chrome-border);
  -webkit-backdrop-filter: var(--athas-macos-glass-chrome-filter);
  backdrop-filter: var(--athas-macos-glass-chrome-filter);
}

html:not([data-window-transparency="disabled"]) .athas-title-project-surface,
html:not([data-window-transparency="disabled"]) [data-title-bar-project-tabs="true"] [role="tab"],
html:not([data-window-transparency="disabled"]) .athas-title-project-add-button {
  border-color: var(--athas-macos-glass-control-border) !important;
  background: var(--athas-macos-glass-control-bg) !important;
  color: var(--athas-chrome-icon-color) !important;
  -webkit-backdrop-filter: var(--athas-macos-glass-chrome-filter);
  backdrop-filter: var(--athas-macos-glass-chrome-filter);
}

html:not([data-window-transparency="disabled"])
  [data-title-bar-project-tabs="true"]
  [role="tab"][data-active="true"] {
  background: var(--athas-macos-glass-control-active-bg) !important;
  color: var(--athas-chrome-icon-active-color) !important;
}

html:not([data-window-transparency="disabled"]) .athas-title-project-surface:hover,
html:not([data-window-transparency="disabled"])
  [data-title-bar-project-tabs="true"]
  [role="tab"]:hover,
html:not([data-window-transparency="disabled"]) .athas-title-project-add-button:hover {
  background: var(--athas-chrome-control-hover-bg) !important;
  color: var(--athas-chrome-icon-hover-color) !important;
}

html:not([data-window-transparency="disabled"]) .athas-title-project-tabs-list {
  border-color: var(--athas-macos-glass-control-border) !important;
  background: color-mix(in srgb, var(--athas-macos-glass-control-bg) 82%, transparent) !important;
  -webkit-backdrop-filter: var(--athas-macos-glass-chrome-filter);
  backdrop-filter: var(--athas-macos-glass-chrome-filter);
}

html:not([data-window-transparency="disabled"]) .athas-project-picker-command {
  border-color: var(--athas-macos-glass-popover-border) !important;
  background: var(--athas-macos-glass-popover-bg) !important;
  -webkit-backdrop-filter: var(--athas-macos-glass-chrome-filter);
  backdrop-filter: var(--athas-macos-glass-chrome-filter);
}

html:not([data-window-transparency="disabled"]) .athas-project-picker-command [data-command-header],
html:not([data-window-transparency="disabled"])
  .athas-project-picker-command
  [data-command-footer] {
  background: color-mix(in srgb, var(--athas-macos-glass-popover-bg) 72%, transparent) !important;
}

html:not([data-window-transparency="disabled"]) .athas-chrome-control {
  color: var(--athas-chrome-icon-color) !important;
}

html:not([data-window-transparency="disabled"]) .athas-chrome-control:hover {
  background: var(--athas-chrome-control-hover-bg) !important;
  color: var(--athas-chrome-icon-hover-color) !important;
}

html:not([data-window-transparency="disabled"]) .athas-chrome-control[data-active="true"] {
  background: var(--athas-chrome-control-active-bg) !important;
  color: var(--athas-chrome-icon-active-color) !important;
}

html[data-window-transparency="disabled"] .window-container {
  background: var(--color-primary-bg) !important;
}

html[data-window-transparency="disabled"] .athas-layout-shell,
html[data-window-transparency="disabled"] .athas-resizable-pane {
  background: var(--color-secondary-bg) !important;
}
