.window-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.os-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink, #23313d);
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: 21px;
  background: rgb(245 250 255 / 97%);
  box-shadow: 0 28px 86px -33px rgb(44 80 126 / 25%), 0 5px 19px -8px rgb(88 131 177 / 16%), inset 0 0 0 1px rgb(141 181 219 / 12%), inset 0 1px 0 rgb(255 255 255 / 96%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
  transform-origin: 50% 60%;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), filter .2s ease, left .25s cubic-bezier(.2,.8,.2,1), top .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}

.os-window[hidden] { display: none; }
.os-window.is-focused { background: rgb(246 251 255 / 83%); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); box-shadow: 0 36px 110px -32px rgb(40 77 125 / 30%), 0 9px 29px -13px rgb(55 119 188 / 21%), 0 0 44px -23px rgb(145 217 255 / 42%), inset 0 0 0 1px rgb(160 204 238 / 20%), inset 0 1px 0 #fff; }
.os-window.is-entering { opacity: 0; }
.os-window.is-launching { transform-origin: 50% 50%; transition: none; will-change: transform, opacity; }
.os-window.is-closing { opacity: 0; transform: translateY(14px) scale(.92); filter: blur(5px); pointer-events: none; }
.os-window.is-minimized { opacity: 0; transform: translateY(90px) scale(.86); filter: blur(3px); pointer-events: none; }
.os-window.is-dragging { transition: box-shadow .2s ease; user-select: none; will-change: transform; }
.os-window.is-dragging .window-content { pointer-events: none; }
.os-window.is-maximized { border-radius: 14px; }
/* Maximized windows extend beneath the Dock, so the last lines can still scroll clear of it. */
.os-window.is-maximized .window-content { padding-bottom: 104px; scroll-padding-bottom: 104px; }

.window-titlebar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 11px;
  height: 55px;
  padding: 0 15px 0 20px;
  border-bottom: 1px solid rgb(135 177 216 / 18%);
  background: linear-gradient(112deg, rgb(255 255 255 / 92%), rgb(233 248 255 / 47%) 58%, rgb(246 249 255 / 77%));
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgb(255 255 255 / 65%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.window-titlebar:focus-visible { outline: 2px solid var(--accent, #536ea0); outline-offset: -4px; border-radius: 15px 15px 0 0; }
.is-dragging .window-titlebar { cursor: grabbing; }
.is-maximized .window-titlebar { cursor: default; }
.window-app-icon { display: flex; align-items: center; color: var(--window-accent, var(--accent)); }
.window-app-icon svg { display: block; }
.window-caption { display: flex; align-items: center; gap: 13px; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .035em; }
.window-caption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-caption-divider { color: #cbd3dd; font-weight: 400; }
.window-caption-brand { color: #8497ae; white-space: nowrap; font-size: 10px; font-weight: 400; letter-spacing: .1em; }
.window-live-indicator { width: 4px; height: 4px; margin-left: auto; border-radius: 50%; background: #7aacc5; box-shadow: 0 0 0 3px rgb(122 189 218 / 9%), 0 0 10px rgb(122 189 218 / 25%); }
.window-controls { display: flex; flex-shrink: 0; gap: 5px; margin-left: 4px; }
.window-control { display: grid; place-items: center; width: 29px; height: 27px; padding: 0; color: #7d8a9a; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.window-control:hover { color: #344f70; border-color: rgb(132 181 218 / 22%); background: rgb(188 221 242 / 24%); }
.window-control-close:hover { color: #915b67; background: #f3e9ed; border-color: #efdee6; }
.window-control:focus-visible { outline: 2px solid var(--accent, #536ea0); outline-offset: 2px; }
.window-control svg { pointer-events: none; }
.window-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(142 168 191 / 35%) transparent; scroll-behavior: smooth; background: rgb(255 255 255 / 75%); outline: none; }
.window-content::-webkit-scrollbar { width: 6px; height: 6px; }
.window-content::-webkit-scrollbar-thumb { border-radius: 6px; background: rgb(142 158 180 / 35%); }
.window-bottomline { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 27px; padding: 0 21px; border-top: 1px solid rgb(128 168 201 / 13%); color: #839ab2; background: linear-gradient(110deg, rgb(255 255 255 / 79%), rgb(235 247 255 / 72%)); font-size: 7px; letter-spacing: .11em; }
.window-bottomline-status { display: flex; align-items: center; gap: 5px; }
.window-bottomline-status::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #7aacc5; }

@media (max-width: 700px) {
  .window-layer::before {
    content: '';
    position: absolute;
    inset: 51px 0 0;
    z-index: 0;
    background: rgb(41 70 112 / 14%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .has-open-windows .window-layer::before { opacity: 1; }
  .os-window {
    position: fixed;
    top: 64px !important;
    left: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)) !important;
    border: 1px solid rgb(255 255 255 / 98%);
    border-radius: 20px;
    background: #fafcfe;
    transform-origin: 50% 65%;
    transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), top .2s ease, left .2s ease, width .2s ease, height .2s ease;
    box-shadow: 0 18px 46px -14px rgb(34 72 123 / 38%), 0 3px 13px rgb(57 116 183 / 17%), 0 0 0 1px rgb(123 171 222 / 22%);
  }
  .os-window.is-maximized {
    top: 57px !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 57px) !important;
    border-radius: 14px 14px 0 0;
  }
  .os-window.is-maximized .window-content {
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
  .os-window.is-focused { background: #fafcfe; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 18px 46px -14px rgb(34 72 123 / 38%), 0 3px 13px rgb(57 116 183 / 17%), 0 0 0 1px rgb(123 171 222 / 22%), 0 0 26px -8px rgb(134 199 255 / 35%); }
  .os-window[data-mobile-active="false"] { visibility: hidden; pointer-events: none; }
  .os-window.is-launching { transform-origin: 50% 50%; transition: none; }
  .os-window.is-closing, .os-window.is-minimized { transform: translateY(18px) scale(.95); filter: none; }
  .window-titlebar { height: 55px; padding: 0 14px; gap: 8px; border-bottom-color: rgb(111 167 221 / 32%); background: linear-gradient(112deg, #fff, #ecf6ff 62%, #e1f0ff); box-shadow: inset 0 1px 0 #fff, 0 2px 12px rgb(90 158 223 / 10%); cursor: default; touch-action: auto; }
  .window-titlebar:focus-visible { border-radius: 19px 19px 0 0; }
  .window-app-icon { display: none; }
  .window-caption { gap: 10px; margin-left: 6px; font-size: 11px; }
  .window-caption-brand, .window-caption-divider { display: none; }
  .window-live-indicator { display: block; flex-shrink: 0; width: 5px; height: 5px; background: #5b9bd5; box-shadow: 0 0 0 4px rgb(105 178 239 / 13%), 0 0 12px rgb(89 171 240 / 70%); }
  .window-controls { margin-left: 4px; gap: 3px; }
  .window-control { width: 40px; height: 40px; }
  .window-content { background: #fcfdff; padding-bottom: calc(90px + env(safe-area-inset-bottom)); scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .window-bottomline { display: none; }
}

html[data-reduced-motion="true"] .os-window,
html[data-reduced-motion="true"] .window-layer::before,
html[data-reduced-motion="true"] .window-control { transition: none; }
html[data-reduced-motion="true"] .window-content { scroll-behavior: auto; }
html[data-reduced-motion="true"] .os-window.is-entering,
html[data-reduced-motion="true"] .os-window.is-closing,
html[data-reduced-motion="true"] .os-window.is-minimized { transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .os-window, .window-layer::before, .window-control { transition: none; }
  .window-content { scroll-behavior: auto; }
  .os-window.is-entering, .os-window.is-closing, .os-window.is-minimized { transform: none; filter: none; }
}