/* Canonical Lowlight Labs file-overlay chrome, loaded by Apex and Nudge.
   Layout and glass effects live outside the iframe so both hosts blur their own
   underlying pages. The iframe reports the real sidebar height via postMessage. */
:root {
  --lll-files-glass-surface: rgba(19, 19, 21, .78);
  --lll-files-glass-fallback: rgba(19, 19, 21, .97);
  --lll-files-glass-blur: blur(28px) saturate(1.15);
  --lll-files-glass-line: rgba(255, 255, 255, .10);
  --lll-files-glass-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --lll-files-nav-row-height: 38px;
  --lll-files-nav-row-margin: 2px;
  --lll-files-divider-margin: 6px;
}
.lll-files-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px;
  background: transparent;
  pointer-events: none;
}
.lll-files-window {
  position: relative;
  box-sizing: border-box;
  flex: none;
  width: min(862px, 100%);
  height: calc(100dvh - 40px);
  min-height: min(280px, calc(100dvh - 40px));
  pointer-events: auto;
  color: #eae9ee;
  container: lll-files-window / inline-size;
  /* No parent opacity/transform on entrance: that composite layer used to
     make the descendant backdrop-filter snap to its final blur. */
}
.lll-files-overlay[data-closing="true"] .lll-files-window,
.lll-files-overlay[data-closing="true"] .lll-files-error {
  animation: lll-files-leave .17s ease-in both;
}
.lll-files-surfaces {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  pointer-events: none;
}
/* Keep the main glass and its position visible from the first frame.
   Reveal only the sidebar when the embedded explorer finishes loading. */
.lll-files-glass {
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--lll-files-glass-line);
  border-radius: 18px;
  background: var(--lll-files-glass-surface);
  backdrop-filter: var(--lll-files-glass-blur);
  box-shadow: var(--lll-files-glass-shadow);
}
.lll-files-glass-sidebar {
  flex: 0 0 190px;
  width: 190px;
  height: var(--lll-files-sidebar-height, 292px);
  max-height: 100%;
  align-self: flex-start;
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
  transition: opacity .40s cubic-bezier(.22, 1, .36, 1),
              transform .40s cubic-bezier(.22, 1, .36, 1);
}
.lll-files-window[data-ready="true"] .lll-files-glass-sidebar {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.lll-files-glass-main {
  flex: 1;
  height: 100%;
  /* Interpolate the actual backdrop from sharp to frosted; do not animate
     opacity/transform on an ancestor of a backdrop-filtered element. */
  animation: lll-files-glass-focus .42s ease-out both;
}
.lll-files-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.lll-files-window[data-ready="true"] .lll-files-frame {
  opacity: 1;
  pointer-events: auto;
}
.lll-files-loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 202px; /* 190px navigation width + 12px panel gap */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: #d9d1e2;
  font: 500 12px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .015em;
  text-align: center;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.lll-files-window[data-ready="true"] .lll-files-loader {
  opacity: 0;
  visibility: hidden;
}
.lll-files-spinner {
  display: block;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 3px solid rgba(255,255,255,.19);
  border-top-color: #d4b8f2;
  border-radius: 50%;
  animation: lll-files-spin .82s linear infinite;
}
.lll-files-error a:focus-visible,
.lll-files-error button:focus-visible {
  outline: 2px solid #c7a4ee;
  outline-offset: 2px;
}
.lll-files-error {
  position: relative;
  pointer-events: auto;
  box-sizing: border-box;
  width: min(450px, 100%);
  padding: 35px 28px 28px;
  border: 1px solid var(--lll-files-glass-line);
  border-radius: 18px;
  background: var(--lll-files-glass-fallback);
  box-shadow: var(--lll-files-glass-shadow);
  color: #eae9ee;
  animation: lll-files-enter .32s cubic-bezier(.22, 1, .36, 1) both;
}
.lll-files-error-content {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding-top: 12px;
  font-family: Arial, sans-serif;
}
.lll-files-error-content h2 { margin: 0; padding-right: 30px; font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.lll-files-error-content p { margin: 0; color: #aaa5b2; font-size: 13px; line-height: 1.6; }
.lll-files-error-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.lll-files-error-actions a,
.lll-files-error-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 16px;
  border-radius: 9px;
  font: 600 13px Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.lll-files-error-actions a { border: 1px solid #af90cf; color: #21192c; background: #ceb0ec; }
.lll-files-error-actions button { border: 1px solid #ffffff24; color: #eae5ed; background: #302b37; }
@keyframes lll-files-spin { to { transform: rotate(360deg); } }
@keyframes lll-files-glass-focus {
  from { backdrop-filter: blur(0px) saturate(1); }
  to { backdrop-filter: blur(28px) saturate(1.15); }
}
@keyframes lll-files-enter { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lll-files-leave { to { opacity: 0; transform: translateX(12px); } }
@supports not (backdrop-filter: blur(1px)) {
  .lll-files-glass { background: var(--lll-files-glass-fallback); }
}
@container lll-files-window (max-width: 730px) {
  .lll-files-glass-sidebar { flex-basis: 155px; width: 155px; }
  .lll-files-loader { left: 167px; } /* 155px + 12px */
}
@container lll-files-window (max-width: 480px) {
  .lll-files-surfaces { flex-direction: column; gap: 9px; }
  .lll-files-glass-sidebar { flex: none; width: 100%; }
  /* Reserve the 110px navigation slot before the iframe reports its size,
     so the visible main panel and loader never jump during opening. */
  .lll-files-window[data-ready="false"] .lll-files-glass-sidebar { height: 110px; }
  .lll-files-glass-main { flex: 1; width: 100%; height: auto; min-height: 0; }
  .lll-files-loader { left: 0; top: 119px; } /* navigation slot + 9px gap */
}
@media (prefers-reduced-motion: reduce) {
   .lll-files-overlay[data-closing="true"] .lll-files-window,
  .lll-files-error, .lll-files-overlay[data-closing="true"] .lll-files-error,
  .lll-files-spinner, .lll-files-glass-main { animation: none; }
  .lll-files-glass-sidebar, .lll-files-loader, .lll-files-frame { transition: none; }
}