/* ═══════════════════════════════════════════════════════════════════
   STUDY → KHIO LIFE BRIDGE
   "Khio iMessage" (in the Study mobile drawer) opens Khio Life embedded in
   a full-screen in-app overlay (iframe — embedding, not navigating, keeps it
   in the WebView). Its menu is a CLONE of the Study mobile drawer (it reuses
   the .mobile-workspace-menu-overlay / .mobile-workspace-drawer / .mwd-*
   classes from study-themes.css), so it's styled identically — just with the
   Khio Life tabs. Behaviour: openKhioLifeOverlay()/openKhioLifeMenu() in study.js
   ═══════════════════════════════════════════════════════════════════ */

/* "Khio iMessage" entry in the Study drawer (force visible — the drawer's
   staggered entrance only reveals items #1–#5; this one is #6). */
.mobile-workspace-drawer .mwd-nav-item.lb-enter { opacity: 1 !important; }
.mwd-nav-item.lb-enter .lb-affix {
    margin-left: auto; width: 16px !important; height: 16px !important; opacity: .45;
}

/* ── Khio Life embedded overlay (the in-app content) ── */
.khio-life-overlay { position: fixed; inset: 0; z-index: 100000; background: #f6f6f8; }
.khio-life-overlay .klo-frame {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #ffffff;
}

/* ── The Khio iMessage menu (clone of the Study drawer) ── */
/* Lift it above the embed overlay. */
.mobile-workspace-menu-overlay.klo-menu { z-index: 100010; }
/* Reveal every row: the Study drawer's entrance animation only un-hides
   items #1–#5, but the Life menu has more rows, so force them all visible. */
.klo-menu .mwd-header,
.klo-menu .mwd-nav-item,
.klo-menu .mwd-divider,
.klo-menu .mwd-footer {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}