/* ===========================================================
   Urealm — الطبقة المحيطة: انسحابها، ومقبضها، ولوحة أدواتها.

   داخل مساحة لا يجوز لواجهة Urealm أن تسرق بكسلًا واحدًا. **تنزلق
   خارج الشاشة بدل أن تُطوى** — فلا يقفز محتوى الأداة ولا يتغيّر
   مقاسها، ولو طُويت لأُعيد تخطيط الأداة كلّها أمام عين صاحبها.

   ▸ ولا يبقى إلا **المقبض**: خطٌّ على الحافّة، يخفت بعد سكون ولا
     ينطفئ. هو المخرج الوحيد، وزرٌّ لا يُرى لا يُضغط.

   ▸ والسلوك هنا لم يتغيّر حرفًا عن السابق — تغيّر رسمه وحده.
   =========================================================== */

.chrome-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-handle);
  pointer-events: none;
}

/* ----------------------- المساحة تملأ الشاشة ----------------------- */

.is-in-world .outlet { padding: 0; transition: none; }
.is-in-world .view--space { background: var(--bg-void); }

/* حين تنسحب الواجهة يتوقّف الشريط عن حجز مكان، فتمتدّ المساحة فعلًا
   بدل أن تترك فراغًا خلفه. الانزلاق ثم التثبيت — بلا قفزٍ في المحتوى. */
.is-chrome-hidden .shell__drawer {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
}

.is-chrome-hidden .topbar {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: var(--z-sticky);
}

/* ----------------------- انسحاب الواجهة ----------------------- */

.shell__drawer,
.topbar,
.tabbar {
  transition:
    transform var(--dur-3) var(--ease-gate),
    opacity var(--dur-2) var(--ease);
}

.is-chrome-hidden .topbar {
  transform: translateY(calc(-100% - var(--safe-t)));
  opacity: 0;
  pointer-events: none;
}

.is-chrome-hidden .shell__drawer {
  transform: translateX(calc(-100% - var(--safe-l)));
  opacity: 0;
  pointer-events: none;
}

:root[dir="rtl"] .is-chrome-hidden .shell__drawer {
  transform: translateX(calc(100% + var(--safe-r)));
}

/* الشريط السفليّ ينزلق خارج الشاشة مع بقيّة الواجهة — **داخل المساحة
   وحدها**. خارجها لا يختفي أبدًا ولا مع التمرير: مكانه بنيةٌ لا زخرفة،
   وشريطٌ يظهر ويختفي مع الإصبع يجعل الهدف يتحرّك تحت اللمسة. */
.is-chrome-hidden .tabbar {
  transform: translateY(calc(100% + var(--safe-b)));
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .is-chrome-hidden .rail {
    transform: translateY(calc(100% + var(--safe-b)));
    opacity: 0;
    pointer-events: none;
  }

  .is-chrome-hidden .shell__main { padding-block-end: 0; }

  /* على الضيّق الدرج صفيحةٌ من الأسفل لا عمودٌ جانبيّ، فلا يُزاح جانبًا. */
  .is-chrome-hidden .shell__drawer,
  :root[dir="rtl"] .is-chrome-hidden .shell__drawer { transform: none; }
}

/* ----------------------- المقبض ----------------------- */

.handle {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 72px;
  padding: 0;
  border: 0;
  background: var(--bg-frost);
  color: var(--fg-soft);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px) saturate(120%);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.5;
  transition:
    opacity var(--dur-2) var(--ease),
    inline-size var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}

.chrome-layer[data-side="end"] .handle {
  inset-inline-end: var(--safe-r);
  border-start-start-radius: var(--r-md);
  border-end-start-radius: var(--r-md);
}

.chrome-layer[data-side="start"] .handle {
  inset-inline-start: var(--safe-l);
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
}

.handle:hover,
.handle:focus-visible,
.handle[aria-expanded="true"] {
  opacity: 1;
  inline-size: 30px;
  color: var(--fg);
}

.handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* القبضة خطٌّ ساكن، والعلامة سهمٌ يظهر عند النيّة. */
.handle__grip {
  inline-size: 2px;
  block-size: 26px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.65;
}

.handle__mark { display: none; }

.handle:hover .handle__grip,
.handle:focus-visible .handle__grip,
.handle[aria-expanded="true"] .handle__grip { display: none; }

.handle:hover .handle__mark,
.handle:focus-visible .handle__mark,
.handle[aria-expanded="true"] .handle__mark { display: grid; }

.chrome-layer[data-side="start"] .handle__mark { transform: scaleX(-1); }

/* ---------- الخفوت بعد السكون ----------

   بعد سكونٍ يخفت المقبض فيصير أثرًا على الحافّة لا زرًّا يزاحم
   المحتوى. **ولا يبلغ الصفر:** زرٌّ لا يُرى لا يُضغط، وهو المخرج
   الوحيد من المساحة.

   والانتقال إلى الخفوت بطيء (‎--dur-4‎) فلا تلمحه العين وهو ينسحب،
   والعودة سريعة لأنّها جوابٌ على لمسة. */
.handle.is-dim {
  opacity: 0.14;
  transition-duration: var(--dur-4);
}

.handle.is-dim:hover,
.handle.is-dim:focus-visible { opacity: 1; }

/* على اللمس تكبر مساحة الضغط دون أن يكبر المرسوم: المقبض عرضه عشرون
   بكسلًا، وهو دون أقلّ هدفٍ يُلمس. */
@media (hover: none) {
  .handle::after {
    content: "";
    position: absolute;
    inset-block: -14px;
    inset-inline: -16px;
  }
}

/* أثناء الكتابة يتراجع المقبض حتى لا يزاحم لوحة المفاتيح. */
.is-typing .handle { opacity: 0; pointer-events: none; }

/* ----------------------- لوحة الأدوات -----------------------

   **منطوقةٌ بـ`.chrome-layer` عمدًا.** `ui/sheet.js` يبثّ `.sheet`
   و`.sheet-scrim` نفسهما لصفيحة الجوال، فبلا نطاقٍ يرث كلٌّ منهما
   تنسيق الآخر — وهو تصادمٌ لا يظهر إلا حين تُفتح الاثنتان. */

.chrome-layer .sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  pointer-events: auto;
  animation: fadeIn var(--dur-2) var(--ease) forwards;
}

.chrome-layer .sheet {
  position: absolute;
  inset-block-end: calc(var(--sp-5) + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  inline-size: min(304px, calc(100vw - var(--sp-7)));
  max-block-size: min(72vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  animation: sheetIn var(--dur-3) var(--ease-gate) both;
}

.chrome-layer[data-side="end"] .sheet { inset-inline-end: calc(var(--sp-6) + var(--safe-r)); }
.chrome-layer[data-side="start"] .sheet { inset-inline-start: calc(var(--sp-6) + var(--safe-l)); }

@keyframes sheetIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeIn { to { opacity: 1; } }

.chrome-layer .sheet__group { display: flex; flex-direction: column; gap: 1px; }

.chrome-layer .sheet__group + .sheet__group {
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
}

.chrome-layer .sheet__title {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.chrome-layer .sheet__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-soft);
  font-size: var(--t-base);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.chrome-layer .sheet__item:hover { background: var(--hover); color: var(--fg); }

/* الحالة الجارية تُعرف بالحبر والخلفيّة معًا، لا باللون وحده. */
.chrome-layer .sheet__item.is-active { background: var(--selected); color: var(--fg); font-weight: var(--w-medium); }

.chrome-layer .sheet__item--danger { color: var(--danger); }
.chrome-layer .sheet__item--danger:hover { background: var(--danger-soft); color: var(--danger); }

.chrome-layer .sheet__icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--fg-mute); }
.chrome-layer .sheet__item:hover .sheet__icon,
.chrome-layer .sheet__item.is-active .sheet__icon { color: inherit; }

.chrome-layer .sheet__label { flex: 1 1 auto; min-inline-size: 0; }

.chrome-layer .sheet__hint {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--fg-faint);
}

@media (max-width: 560px) {
  .chrome-layer .sheet {
    inset-inline: var(--sp-4) !important;
    inline-size: auto;
  }
}