/* ============================================================
   AY/OS : windows.css : window chrome, states, animations
   ============================================================ */

.win {
  position: absolute; z-index: 100;
  min-width: 320px; min-height: 220px;
  display: flex; flex-direction: column;
  /* الخلفية صلبة افتراضيا: النوافذ غير المركزة بلا تمويه فتكون رخيصة جدا على المتصفح */
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .25);
  overflow: hidden;
  contain: layout style paint;
  transform-origin: center bottom;
  /* طبقة GPU جاهزة سلفا لكل نافذة، لا تنشأ فقط عند بدء السحب، فلا توجد "لسعة" أول فريم عند الإمساك بها */
  will-change: transform;
}
html[data-theme="light"] .win { box-shadow: 0 18px 50px rgba(30, 38, 50, .18), 0 2px 10px rgba(30, 38, 50, .1); }

/* التمويه الجليدي على النافذة المركزة كان يسبب لاقا حقيقيا (تلعثم عيون البوت) حتى بنافذة واحدة
   مفتوحة على أجهزة حقيقية، رغم خفض نصف القطر. صارت كل النوافذ صلبة دائما، والتمييز البصري
   للنافذة المركزة يبقى عبر الحدود والظل فقط (نمط أخف من الزجاج، بلا أي كلفة تركيب مستمرة). */
.win.is-focus {
  background: var(--panel-solid);
  border-color: var(--line2);
  box-shadow: var(--shadow-win);
  z-index: 500;
}
.win:not(.is-focus) .win-tb { opacity: .75; }
/* جمد أي أنيميشن دائري (نبض LED أو مؤشرات) داخل النوافذ الخلفية غير المركزة لتخفيف عبء التركيب */
.win:not(.is-focus) *, .win:not(.is-focus) *::before, .win:not(.is-focus) *::after { animation-play-state: paused !important; }

/* وضع الأداء عند انشغال سطح المكتب (نافذتان فأكثر): ظلال أخف فقط الآن (التمويه أصلا معدوم دائما،
   انظر .win.is-focus أعلاه)، فيبقى تجميد شريط .grain وتجميد الخلفية الحية (fx.js) فائدته الأساسية. */
html.is-busy .win { box-shadow: 0 3px 12px rgba(0, 0, 0, .26); }
html[data-theme="light"].is-busy .win { box-shadow: 0 3px 10px rgba(30, 38, 50, .14); }

/* open / close / minimize animations */
.win.is-open { animation: win-in var(--t-slow) var(--ease-snap) both; }
@keyframes win-in {
  from { opacity: 0; transform: scale(.92) translateY(26px); }
}
.win.is-closing { animation: win-out var(--t-med) var(--ease) both; pointer-events: none; }
@keyframes win-out {
  to { opacity: 0; transform: scale(.93) translateY(14px); }
}
.win.is-minimizing { animation: win-min var(--t-slow) var(--ease) both; pointer-events: none; }
@keyframes win-min {
  to { opacity: 0; transform: scale(.6) translateY(48vh); }
}
.win.is-restoring { animation: win-restore var(--t-slow) var(--ease-snap) both; }
@keyframes win-restore {
  from { opacity: 0; transform: scale(.6) translateY(48vh); }
}
.win.is-min { display: none; }

.win.is-anim { transition: top var(--t-med) var(--ease), left var(--t-med) var(--ease), width var(--t-med) var(--ease), height var(--t-med) var(--ease); }
/* أثناء السحب فقط: نسقط التمويه الزجاجي الحي ونخفف الظل (تماما كما تفعل ويندوز/macOS فعليا).
   التمويه يعيد حساب ما خلف النافذة من جديد في كل فريم لأن موضعها يتغير، وهذه أثقل كلفة GPU ممكنة
   أثناء حركة مستمرة؛ إسقاطه يجعل المتصفح ينقل بكسلات النافذة كصورة واحدة جاهزة، فتتبع الماوس فوريا
   بلا أي تلعثم. يعود التمويه الكامل فور الإفلات (لمسة واحدة غير محسوسة، لا حركة معها). */
.win.is-drag {
  transition: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: var(--panel-solid);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
}
html[data-theme="light"] .win.is-drag { box-shadow: 0 10px 24px rgba(30, 38, 50, .2); }
.win.is-drag, .win.is-drag * { cursor: grabbing !important; }
.win.is-max { border-radius: var(--r); }

/* shake (rm -rf joke) */
.desktop.is-shaking { animation: shake .5s ease-in-out 2; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-7px, 3px) rotate(-.4deg); }
  40% { transform: translate(6px, -4px) rotate(.4deg); }
  60% { transform: translate(-5px, -3px); }
  80% { transform: translate(5px, 4px); }
}

/* ---------- TITLEBAR ---------- */
.win-tb {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 8px;
  padding-inline-start: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  flex-shrink: 0;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  transition: opacity var(--t-fast);
}
.win-ico { display: grid; place-items: center; color: var(--acc); }
.win-ico svg { width: 16px; height: 16px; }
.win-title {
  font-size: .84rem; font-weight: 600; color: var(--ink);
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-back { display: none; }

.win-acts { display: flex; gap: 2px; }
.wa {
  width: 38px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--muted);
  transition: all var(--t-fast);
}
.wa svg { width: 13px; height: 13px; }
.wa:hover { background: var(--panel-2); color: var(--ink); }
.wa-x:hover { background: var(--bad); color: #fff; }

/* ---------- BODY ---------- */
.win-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  position: relative;
}

/* ---------- RESIZE HANDLES ---------- */
.rs { position: absolute; z-index: 20; touch-action: none; }
.rs-n  { top: -4px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.rs-s  { bottom: -4px; left: 12px; right: 12px; height: 8px; cursor: ns-resize; }
.rs-e  { right: -4px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.rs-w  { left: -4px; top: 12px; bottom: 12px; width: 8px; cursor: ew-resize; }
.rs-ne { top: -5px; right: -5px; width: 16px; height: 16px; cursor: nesw-resize; }
.rs-nw { top: -5px; left: -5px; width: 16px; height: 16px; cursor: nwse-resize; }
.rs-se { bottom: -5px; right: -5px; width: 16px; height: 16px; cursor: nwse-resize; }
.rs-sw { bottom: -5px; left: -5px; width: 16px; height: 16px; cursor: nesw-resize; }

/* ============================================================
   MOBILE : windows become full sheets
   ============================================================ */
@media (max-width: 840px), (max-height: 540px) and (pointer: coarse) {
  .win {
    /* اترك مساحة لشريط الحالة بالأعلى وشريط المهام العائم بالأسفل، مع احترام نوتش/حواف الهاتف */
    inset: calc(var(--sb-h) + env(safe-area-inset-top, 0px)) 0 calc(var(--tb-h) + 22px + env(safe-area-inset-bottom, 0px)) 0 !important;
    width: 100% !important; height: auto !important;
    min-width: 0; min-height: 0;
    border-radius: 0; border: 0;
    transform-origin: center bottom;
  }
  .win.is-open { animation: sheet-in var(--t-slow) var(--ease) both; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(7%); } }
  .win.is-closing { animation: sheet-out var(--t-med) var(--ease) both; }
  @keyframes sheet-out { to { opacity: 0; transform: translateY(6%); } }

  .win-tb { cursor: default; height: 52px; padding-top: 6px; }
  .wa-min, .wa-max { display: none; }
  .rs { display: none; }

  .win-back {
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 10px;
    color: var(--acc);
  }
  .win-back svg { width: 19px; height: 19px; }
  .win-back:active { background: var(--panel-2); }
}