/* ==========================================================================
   css/components/context-menu-lightbox.css
   Split from app.html (build 2026.10.08.9-beta), original lines 3160-3224.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* Context menu */
.ctx-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  z-index: 9600;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
  animation: menu-in 0.16s var(--ease-out, ease);
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
/* Subtle highlight (NONONONONO), not a full accent-fill wash. */
.ctx-item:hover { background: var(--bg-active); color: var(--text-primary); }
.ctx-item.danger { color: #ed4245; }
.ctx-item.danger:hover { background: color-mix(in srgb, #ed4245 16%, transparent); color: #ed4245; }
.ctx-divider { height: 1px; background: var(--border); margin: 5px 4px; }
/* Media lightbox */
#mediaLightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85);
  z-index: 2000; align-items: center; justify-content: center; cursor: zoom-out;
}
#mediaLightbox.open { display: flex; }
#mediaLightbox img, #mediaLightbox video {
  max-width: 90vw; max-height: 88vh; border-radius: 6px;
  object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.6);
  cursor: zoom-in; transform-origin: center center; will-change: transform;
}
#mediaLightbox.zoomed img, #mediaLightbox.zoomed video { cursor: grab; }
#mediaLightbox.panning img, #mediaLightbox.panning video { cursor: grabbing; }
/* Fullscreen button shown on hover over an inline image/video embed. */
.msg-image-embed { position: relative; display: inline-block; }
.media-expand {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border: none; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s; z-index: 2;
}
.msg-image-embed:hover .media-expand { opacity: 1; }
.media-expand:hover { background: rgba(0,0,0,.8); }
#mediaLightboxClose {
  position: fixed; top: 16px; right: 20px; font-size: 28px; line-height: 1;
  color: #fff; cursor: pointer; opacity: .7; user-select: none;
}
#mediaLightboxClose:hover { opacity: 1; }
#mediaLightboxOpen, #mediaLightboxDl {
  position: fixed; top: 16px; font-size: 13px; color: #fff;
  opacity: .6; cursor: pointer; background: rgba(0,0,0,.5); padding: 4px 10px;
  border-radius: 6px; user-select: none;
}
#mediaLightboxOpen { right: 60px; }
#mediaLightboxDl { right: 156px; }
#mediaLightboxOpen:hover, #mediaLightboxDl:hover { opacity: 1; }