/* ============================================================
   window.css — 窗口组件

   窗口骨架 + 标题栏：标题栏 / 标题 / 窗口按钮 / 内容区都在组件里。
   data-window-frame 选窗口按钮档位（win10 / win11 / winxp / macos /
   macos15 / gnome）；颜色和尺寸走 --window-* 令牌，宿主可以覆盖。
   ============================================================ */

.window {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--window-radius, 8px);
  border: var(--window-border-width, 1px) solid
    var(--window-border, rgba(0, 0, 0, 0.12));
  background: var(--window-bg, #ffffff);
  box-shadow: var(--window-shadow, 0 24px 60px rgba(0, 0, 0, 0.35));
}

.window__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  height: var(--window-bar-height, 32px);
  padding: 0 10px;
  background: var(--window-bar-bg, #f3f3f3);
  color: var(--window-bar-fg, #1a1a1a);
  font-size: var(--window-title-size, 12px);
  user-select: none;
}

.window__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--window-title-weight, 600);
  letter-spacing: 0.01em;
}

.window__controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.window__caption {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--window-caption-width, 30px);
  height: var(--window-caption-height, 24px);
  padding: 0;
  border: 0;
  border-radius: var(--window-caption-radius, 4px);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--window-caption-size, 12px);
  line-height: 1;
  cursor: inherit;
}

.window__caption:hover {
  background: var(--window-caption-hover-bg, rgba(0, 0, 0, 0.08));
}

.window__caption--close:hover {
  background: var(--window-caption-close-hover-bg, #c42b1c);
  color: var(--window-caption-close-hover-fg, #ffffff);
}

.window__caption:active {
  background: var(--window-caption-active-bg, rgba(0, 0, 0, 0.16));
}

.window__caption--close:active {
  background: var(--window-caption-close-active-bg, #a32618);
  color: #ffffff;
}

.window__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--window-body-padding, 16px);
  background: var(--window-body-bg, #ffffff);
  color: var(--window-fg, var(--ui-text, #1a1a1a));
}


/* ---- 从走廊样式迁入的窗口外观（Window 组件自带标题栏） ---- */



/* ---------------- 通用窗口框 ---------------- */

.window {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--window-radius, 8px);
  border: var(--window-border-w, 1px) solid var(--window-border, transparent);
  background: var(--window-body-bg, #fff);
  box-shadow: var(--window-shadow, 0 24px 60px rgba(0, 0, 0, 0.35));
}



.window__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  height: var(--window-bar-h, 34px);
  padding: 0 10px;
  background: var(--window-bar-bg, #f3f3f3);
  color: var(--window-bar-fg, #1a1a1a);
  font-size: 12px;
  user-select: none;
}



.window__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--window-title-weight, 600);
  letter-spacing: 0.01em;
}



.window__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 18px 16px;
  background: var(--window-body-bg, #fff);
  color: var(--ui-text);
}



.window__body .panel {
  padding: 0;
  gap: 12px;
  background: transparent;
}



.window__body .group {
  gap: 8px;
}



/* 窗口按钮：默认是 Windows 那种扁平 caption */
.window__controls {
  display: flex;
  align-items: center;
  gap: 2px;
}



.window__caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: calc(var(--window-bar-h, 34px) - 8px);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  color: inherit;
  opacity: 0.75;
}



.window__caption--close {
  opacity: 1;
}



.window__caption--close:hover {
  background: #c42b1c;
  color: #fff;
}



/* 红绿灯（macOS） */
.window__traffic {
  display: flex;
  gap: 8px;
  align-items: center;
}



.window__traffic-dot {
  appearance: none;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
  display: grid;
  place-items: center;
  cursor: inherit;
}

.window__traffic-dot:active {
  filter: brightness(0.82);
}

.window__traffic-dot:focus-visible {
  outline: 2px solid #4c9ffe;
  outline-offset: 1px;
}

.window__traffic-glyph {
  opacity: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.window__traffic-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}

.window__traffic:hover .window__traffic-glyph {
  opacity: 1;
}

.window__traffic-dot--close .window__traffic-glyph {
  color: #7a1410;
}

.window__traffic-dot--min .window__traffic-glyph {
  color: #6b5200;
}

.window__traffic-dot--zoom .window__traffic-glyph {
  color: #0c5a1f;
}



.window__traffic-dot--close {
  background: #ff5f57;
}



.window__traffic-dot--min {
  background: #febc2e;
}



.window__traffic-dot--zoom {
  background: #28c840;
}



/* Win11 的窗口按钮同样是 46px 宽的整条命中区，悬停才显底色 */
.window[data-window-frame="win11"] .window__bar {
  padding-right: 0;
}



.window[data-window-frame="win11"] .window__controls {
  gap: 0;
  align-self: stretch;
}



.window[data-window-frame="win11"] .window__caption {
  width: 46px;
  height: 100%;
  border-radius: 0;
  font-size: 10px;
  opacity: 0.9;
}



.window[data-window-frame="win11"] .window__caption:hover {
  background: rgba(255, 255, 255, 0.08);
}



.window[data-window-frame="win11"] .window__caption--close:hover {
  background: #c42b1c;
  color: #fff;
}

.window[data-window-frame="win11"] .window__caption:active {
  background: rgba(255, 255, 255, 0.14);
}

.window[data-window-frame="win11"] .window__caption--close:active {
  background: #b22f22;
  color: #fff;
}



/* Win10 的标题栏按钮是 46px 宽、贴满高度的直角命中区，只有悬停才变灰 / 变红 */
.window[data-window-frame="win10"] .window__bar {
  padding-right: 0;
}



.window[data-window-frame="win10"] .window__controls {
  gap: 0;
  align-self: stretch;
}



.window[data-window-frame="win10"] .window__caption {
  width: 46px;
  height: 100%;
  border-radius: 0;
  font-size: 10px;
  opacity: 1;
  color: #000;
}



.window[data-window-frame="win10"] .window__caption:hover {
  background: #e5e5e5;
}



.window[data-window-frame="win10"] .window__caption--close:hover {
  background: #e81123;
  color: #fff;
}

.window[data-window-frame="win10"] .window__caption:active {
  background: #cccccc;
}

.window[data-window-frame="win10"] .window__caption--close:active {
  background: #f1707a;
  color: #fff;
}



.window[data-window-frame="winxp"] {
  --window-body-bg: #ece9d8;
}



.window[data-window-frame="winxp"] .window__bar {
  padding: 0 4px;
}



.window[data-window-frame="winxp"] .window__title {
  font-size: 11px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}



/* XP 的窗口按钮是 16×14 的凸起小方块 */
.window[data-window-frame="winxp"] .window__controls {
  gap: 2px;
}



.window[data-window-frame="winxp"] .window__caption {
  width: 17px;
  height: 15px;
  border-radius: 0;
  background: linear-gradient(180deg, #4a9bff 0%, #0a58d8 100%);
  box-shadow: inset 1px 1px 0 #b8d9ff, inset -1px -1px 0 #00318a;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  opacity: 1;
}



.window[data-window-frame="winxp"] .window__caption--close {
  background: linear-gradient(180deg, #f08a68 0%, #c4320f 100%);
  box-shadow: inset 1px 1px 0 #ffc9b8, inset -1px -1px 0 #7a1200;
}

/* XP 按下去斜面翻向，按钮看起来是凹进去的 */
.window[data-window-frame="winxp"] .window__caption:active {
  background: linear-gradient(180deg, #0a58d8 0%, #4a9bff 100%);
  box-shadow: inset 1px 1px 0 #00318a, inset -1px -1px 0 #b8d9ff;
}

.window[data-window-frame="winxp"] .window__caption--close:active {
  background: linear-gradient(180deg, #c4320f 0%, #f08a68 100%);
  box-shadow: inset 1px 1px 0 #7a1200, inset -1px -1px 0 #ffc9b8;
}



.window[data-window-frame="macos"] .window__bar,
.window[data-window-frame="macos15"] .window__bar {
  justify-content: center;
}



.window[data-window-frame="macos"] .window__title,
.window[data-window-frame="macos15"] .window__title {
  text-align: center;
  font-size: 12px;
}



.window[data-window-frame="macos"] .window__traffic,
.window[data-window-frame="macos15"] .window__traffic {
  position: absolute;
  left: 8px;
}

/* macOS 26：AppKit 26 采样，按钮 14pt、中心距 23.25pt，符号默认隐藏、悬停整组显示 */
.window[data-window-frame="macos"] .window__traffic {
  gap: 9px;
}

.window[data-window-frame="macos"] .window__traffic-dot {
  width: 14px;
  height: 14px;
}

.window[data-window-frame="macos"] .window__traffic-dot--close {
  background: #ff5c5f;
}

.window[data-window-frame="macos"] .window__traffic-dot--min {
  background: #fac800;
}

.window[data-window-frame="macos"] .window__traffic-dot--zoom {
  background: #34c759;
}

/* 26 的符号和 15 一样，默认不显示，悬停整组才出现；之前把 hover 态做成了常显 */
.window[data-window-frame="macos"] .window__traffic-glyph {
  opacity: 0;
}

.window[data-window-frame="macos"] .window__traffic:hover .window__traffic-glyph {
  opacity: 1;
}



.window[data-window-frame="macos"] .window__traffic-dot--close .window__traffic-glyph {
  color: #802e30;
}

.window[data-window-frame="macos"] .window__traffic-dot--min .window__traffic-glyph {
  color: #7e6400;
}

.window[data-window-frame="macos"] .window__traffic-dot--zoom .window__traffic-glyph {
  color: #1a642d;
}



.window[data-window-frame="macos"] .window__bar,
.window[data-window-frame="macos15"] .window__bar {
  position: relative;
}



.window[data-window-frame="gnome"] .window__bar {
  justify-content: center;
  position: relative;
}



.window[data-window-frame="gnome"] .window__title {
  text-align: center;
  font-size: 13px;
}



.window[data-window-frame="gnome"] .window__controls {
  position: absolute;
  right: 8px;
}



.window[data-window-frame="gnome"] .window__caption {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px;
}

.window[data-window-frame="gnome"] .window__caption:active {
  background: rgba(255, 255, 255, 0.24);
}



.room.is-active .window {
  animation: win-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}



.window {
  position: relative;
}

/* 窗口内容区滚动条：尺寸、颜色走主题的 --scrollbar-* 令牌 */
.window__body {
  /* 不用 scrollbar-width / scrollbar-color：Chromium 一旦用标准属性，
     就不再用 ::-webkit-scrollbar 的宽度和圆角。Firefox 才需要它们。 */
}

@supports (-moz-appearance: none) {
  .window__body {
    scrollbar-width: var(--scrollbar-width, auto);
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}

.window__body::-webkit-scrollbar {
  width: var(--scrollbar-size, 0px);
  height: var(--scrollbar-size, 0px);
}

.window__body::-webkit-scrollbar-track {
  background: var(--scrollbar-track, transparent);
}

.window__body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.35));
  border-radius: var(--scrollbar-radius, 0px);
  border: var(--scrollbar-border, 0px) solid transparent;
  background-clip: padding-box;
  box-shadow: var(--scrollbar-thumb-shadow, none);
}

.window__body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--scrollbar-thumb));
}

.window__body::-webkit-scrollbar-button {
  display: none;
}

.window__body::-webkit-scrollbar-corner {
  background: var(--scrollbar-track, transparent);
}

/* 只保留顶部「上」和底部「下」两个按钮；Chrome 自己会生成四个 button 盒子 */
.window__body::-webkit-scrollbar-button {
  display: none;
}

.window__body::-webkit-scrollbar-button:vertical:start:decrement,
.window__body::-webkit-scrollbar-button:vertical:end:increment {
  display: var(--scrollbar-buttons, none);
  height: var(--scrollbar-size, 0px);
  background-color: var(--scrollbar-button-bg, var(--scrollbar-track));
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--scrollbar-button-shadow, none);
}

.window__body::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: var(--scrollbar-arrow-up, none);
}

.window__body::-webkit-scrollbar-button:vertical:end:increment {
  background-image: var(--scrollbar-arrow-down, none);
}