/* ── Sizing contract ────────────────────────────────────────────────────────
   CSS owns dimensions. JS passes *intent* only.

   --ee-modal-w / --ee-modal-h : desired size. JS writes these as custom
     properties (never inline width/height) so they participate in the cascade
     and can be overridden per-dialog from a stylesheet.
   --ee-modal-max-w / --ee-modal-max-h : viewport clamp. Guarantees a caller
     asking for 800px never overflows a 375px phone.

   Mobile presentation is a named mode on [data-ee-mobile]:
     contained  (default) — clamped card, backdrop visible around it
     fullscreen (opt-in)  — edge to edge

   Centering uses `inset: 0; margin: auto` rather than a translate, because
   `transform` is owned by the slide/scale animations below.

   dvw/dvh (not vw/vh) so mobile browser chrome doesn't clip the bottom.
   ──────────────────────────────────────────────────────────────────────── */
.draggable-modal {
  --ee-modal-w: 600px;
  --ee-modal-h: 400px;
  --ee-modal-max-w: 90dvw;
  --ee-modal-max-h: 90dvh;

  border: none;
  border-radius: 12px;
  padding: 0;
  background: var(--bg-primary, white);
  color: var(--textDarkColor, inherit);
  box-shadow: 0 20px 60px var(--shadowColor, rgba(0, 0, 0, 0.3));
  width: min(var(--ee-modal-w), var(--ee-modal-max-w));
  height: min(var(--ee-modal-h), var(--ee-modal-max-h));
  position: fixed;
  inset: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Mobile: fullscreen is opt-in via mobile:'fullscreen'. Default stays the
   clamped `contained` card, which the base rule above already produces. */
@media (max-width: 768px) {
  .draggable-modal[data-ee-mobile="fullscreen"] {
    width: 100dvw;
    height: 100dvh;
    --ee-modal-max-w: 100dvw;
    --ee-modal-max-h: 100dvh;
    border-radius: 0;
    margin: 0;
  }
}

/* A dragged modal is positioned explicitly by JS (inline left/top). Release
   the centering anchors so the inline values are not over-constrained. */
.draggable-modal.dragging,
.draggable-modal.drag-ended,
.draggable-modal.positioning {
  right: auto;
  bottom: auto;
  margin: 0;
}
.draggable-modal.slide-in {
  opacity: 1;
  transform: translate(0, 0);
}
@starting-style {
  .draggable-modal.slide-in {
    opacity: 0;
  }
}

/* ── Slide animations ────────────────────────────────────────────────────── */
/*
 * data-slide drives entry and exit for both modal and make-way modes.
 * When present, the keyframe animation replaces the default opacity transition,
 * so transition is suppressed to avoid competing with the animation.
 */

.draggable-modal[data-slide] {
  transition: none;
  opacity: 0;
}

.draggable-modal[data-slide="up"].slide-in {
  animation: modalSlideUp 0.3s ease forwards;
}
.draggable-modal[data-slide="down"].slide-in {
  animation: modalSlideDown 0.3s ease forwards;
}
.draggable-modal[data-slide="left"].slide-in {
  animation: modalSlideLeft 0.3s ease forwards;
}
.draggable-modal[data-slide="right"].slide-in {
  animation: modalSlideRight 0.3s ease forwards;
}
.draggable-modal[data-slide="in-out"].slide-in {
  animation: modalSlideInOut 0.5s ease forwards;
}
.draggable-modal[data-slide="out-in"].slide-in {
  animation: modalSlideOutIn 0.5s ease forwards;
}

.draggable-modal.closing {
  animation: modalFadeOut 0.3s ease forwards;
}
.draggable-modal[data-slide="up"].closing {
  animation: modalSlideUp 0.3s ease reverse forwards;
}
.draggable-modal[data-slide="down"].closing {
  animation: modalSlideDown 0.3s ease reverse forwards;
}
.draggable-modal[data-slide="left"].closing {
  animation: modalSlideLeft 0.3s ease reverse forwards;
}
.draggable-modal[data-slide="right"].closing {
  animation: modalSlideRight 0.3s ease reverse forwards;
}
.draggable-modal[data-slide="in-out"].closing {
  animation: modalSlideInOut 0.35s ease reverse forwards;
}
.draggable-modal[data-slide="out-in"].closing {
  animation: modalSlideOutIn 0.35s ease reverse forwards;
}

/* Escape hatch for the app's Motion/Fade/No Fade preference — set as
   data-ee-motion="none" by the caller right after open() (e.g. the User
   Certification dialog, index.php's POST /login) when the user has No
   Fade selected. Emerge itself has no concept of this preference and no
   built-in "instant" mode — @starting-style's opacity transition and any
   data-slide keyframe animation both still apply by default even with no
   slideDirection given ("fade" is Emerge's baseline, not "none"), so this
   forces both off from the outside rather than teaching Emerge's core
   open()/close() about an app-specific setting. */
.draggable-modal[data-ee-motion="none"] {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}
.draggable-modal[data-ee-motion="none"]::backdrop {
  transition: none !important;
}

/* Dragging suspends all animation and transition for immediate response */
.draggable-modal.dragging {
  animation: none;
  transition: none;
  user-select: none;
  cursor: grabbing;
  opacity: 1;
}
.draggable-modal[open].drag-ended,
.draggable-modal[open].positioning {
  opacity: 1;
  animation: none;
}

.draggable-modal::backdrop {
  background: color-mix(in srgb, var(--bd-color, #000) 0%, transparent);
  backdrop-filter: blur(0px);
  opacity: 1;
  transition: background var(--ee-speed, 0.3s) ease;
}
.draggable-modal[data-bd-blur]::backdrop {
  transition:
    background var(--ee-speed, 0.3s) ease,
    backdrop-filter 0s;
}
.draggable-modal.slide-in::backdrop {
  background: color-mix(
    in srgb,
    var(--bd-color, #000) calc(var(--bd-opacity, 0.5) * 100%),
    transparent
  );
}
.draggable-modal[data-bd-blur].slide-in::backdrop {
  backdrop-filter: blur(var(--bd-blur, 0px));
  background: color-mix(
    in srgb,
    var(--bd-color, #000) calc(var(--bd-opacity, 0.5) * 100%),
    transparent
  );
}
.draggable-modal[data-click-close="true"]::backdrop {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23333333'/%3E%3Cline x1='6' y1='6' x2='14' y2='14' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='14' y1='6' x2='6' y2='14' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
      10 10,
    auto;
}
.draggable-modal:not([data-click-close="true"])::backdrop {
  cursor: default;
}
/* Closing: stop advertising the close affordance once interaction is dead */
.draggable-modal.closing::backdrop {
  cursor: default;
}

.ee-header {
  background: var(--ee-modal-header-bg, var(--bg-tertiary));
  padding: 14px 16px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  user-select: none;
}
.ee-header:hover,
.ee-header:active {
  cursor: inherit;
}

.ee-title {
  grid-column: 2;
  background: var(--bg-tertiary);
  color: var(--headingColor, var(--textDarkColor));
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  min-width: 0;
}

.ee-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: var(--icon-filter, none);
}

.ee-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--icon-btn-bg);
  border: none;
  color: var(--textDarkColor);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s;
}
.ee-close svg {
  display: block;
  flex-shrink: 0;
}
.ee-close:hover {
  background: var(--icon-btn-bg-hover);
}

.ee-content {
  padding: 0 12px 12px 12px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  color: var(--textDarkColor, inherit);
}

/* ── Make Way page effect ────────────────────────────────────────────────── */
/*
 * body background must override any theme/page color — !important is intentional.
 */
body.makeway-open {
  background: var(--mw-body-bg, #000) !important;
  transition: background 0.3s ease;
}

/* The transition lives on the base selector, not just
   .page-container.makeway-active, so removing the class on close (see
   EmergeModal.close() in emerge_modal.js) animates back to normal
   instead of snapping instantly - a transition only runs when the
   *resulting* style actually declares one, and close() removes the
   class (and with it, the old .makeway-active-only transition) at the
   same moment it starts the dialog's own 300ms reverse-slide, so the
   two need to move in sync for the page to visibly "return" as part of
   that same close animation rather than jumping back before it. */
.page-container {
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}
.page-container.makeway-active {
  transform: scale(0.8);
  transform-origin: center center;
  filter: brightness(0.5);
  pointer-events: none;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes modalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes modalSlideDown {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes modalSlideLeft {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes modalSlideRight {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes modalSlideInOut {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes modalSlideOutIn {
  0% {
    opacity: 0;
    transform: scale(1.15);
  }
  60% {
    opacity: 1;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .draggable-modal {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
}