/* ── macOS-STYLE WINDOW CHROME ─────────────────────────
   Shared traffic-light header used by every modal: Launch demo,
   Image lightbox, Document viewer. Drawer keeps its own style (right-
   side slide, no window chrome).

   Structure:
     <div class="window-bar">
       <div class="window-traffic">
         <button class="window-light window-light-close" data-close></button>
         <span class="window-light window-light-min" aria-hidden="true"></span>
         <span class="window-light window-light-max" aria-hidden="true"></span>
       </div>
       <div class="window-addr">Title text</div>
       <div class="window-tools">...optional...</div>
     </div>
*/

.window-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  background:linear-gradient(to bottom,#1c1c28,#13131e);
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  min-height:44px;
}
.window-traffic{display:flex;gap:7px;align-items:center;flex-shrink:0}
.window-light{
  width:12px;height:12px;min-width:12px;min-height:12px;
  border-radius:50%;
  border:none;padding:0;
  cursor:default;
  position:relative;
}
.window-light-close{background:#ff5f57;cursor:pointer}
.window-light-close::before,
.window-light-close::after{
  content:'';position:absolute;top:50%;left:50%;
  width:7px;height:1.3px;
  background:#4d0000;border-radius:1px;
  opacity:0;transition:opacity .15s ease;
}
.window-light-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.window-light-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.window-traffic:hover .window-light-close::before,
.window-traffic:hover .window-light-close::after{opacity:1}
.window-light-min{background:#febc2e}
.window-light-max{background:#28c840}

.window-addr{
  flex:1;
  display:flex;align-items:center;gap:10px;
  justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-size:var(--fs-base);
  color:var(--text-mute);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:6px 16px;
  max-width:540px;
  margin:0 auto;
  min-width:0;
}
.window-addr-text{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}

.window-tools{
  display:flex;align-items:center;gap:8px;flex-shrink:0
}