/* ==========================================================================
   Modals — CoachOS Design System
   Uses native <dialog> element with backdrop
   ========================================================================== */

/* Keyframes
   ========================================================================== */

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-exit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Dialog Base
   ========================================================================== */

dialog.modal {
  position: fixed;
  margin: auto;
  border: none;
  padding: 0;
  background-color: var(--surface-overlay);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 420px;
  max-width: 100vw;
  max-height: 90vh;
  overflow: hidden;
  animation: modal-enter var(--duration-normal) var(--ease-spring);
}

dialog.modal[open] {
  display: flex;
  flex-direction: column;
}

/* Backdrop
   ========================================================================== */

dialog.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in var(--duration-normal);
}

/* Closing State
   ========================================================================== */

dialog.modal.modal--closing {
  animation: modal-exit var(--duration-fast) var(--ease-in) forwards;
}

/* Header
   ========================================================================== */

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.modal__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

/* Pattern 7 — leading 28px accent-subtle icon next to title.
   Used by the Comments / Uploads / AI Assist settings modals. */
.modal__head-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: var(--space-2);
}
.modal__head-icon .material-symbols-rounded { font-size: 18px; }

/* Close Button
   ========================================================================== */

.modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast);
}

.modal__close:hover {
  color: var(--text-primary);
}
.modal__close:focus,
.modal__close:focus-visible {
  outline: none;
}

/* Forms inside modals: flex column so body scrolls and footer pins.
   Use `flex: 1 1 auto` (not `flex: 1`, which is `1 1 0%`) for the same
   reason as .modal__body below — under content-height auto-sizing, a
   `flex-basis: 0%` item contributes 0 to the dialog's intrinsic height,
   so Safari collapses the form (and its body+footer) to nothing and the
   dialog renders header-only. Chrome silently survives this; Safari does
   not. Mirrors the .modal__body fix. */
dialog.modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Body
   ========================================================================== */

.modal__body {
  padding: var(--space-4);
  overflow-y: auto;
  /* flex-basis: auto so body sizes to content when dialog is content-height,
     while still allowing shrink + scroll when dialog hits max-height: 90vh.
     `flex: 1` (== 1 1 0%) collapses the body to 0 height under auto-sizing. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Footer
   ========================================================================== */

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* Pattern 7 — Settings-group width variant. Height is inherited from the
   base modal rule (content-sized up to 90vh), since that's the canonical
   behavior. This variant only narrows the width to 360px. */
dialog.modal.modal--settings {
  width: 360px;
}

/* Canonical section divider — self-contained "space + dashed line + space"
   block. Owns ALL the vertical breathing room between two sections so the
   line is ALWAYS visually equidistant from its neighbors regardless of
   what sits above or below. Use as <div class="modal__divider" role="separator">.

   Anatomy: total height 48px (var(--space-4) * 3). The negative margin
   cancels the parent flex gap (assumes .modal__fields gap = var(--space-4))
   so the divider's own height IS the total visible whitespace between
   neighbors, not added to it. */
.modal__divider {
  position: relative;
  display: block;
  height: calc(var(--space-4) * 3); /* 24px above + line + 24px below */
  margin: calc(var(--space-4) * -1) 0;
  padding: 0;
  border: none;
  background: transparent;
}
.modal__divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--border-subtle);
}

/* Pattern 7 — fields wrapper that collapses when the hero switch is toggled
   OFF inside the modal. Animated max-height + opacity. Uses --space-4 gap
   so multi-line rows (label + wrapping hint) read with comfortable, equal
   space between each row regardless of how many lines the hint occupies. */
.modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  transition: max-height var(--duration-normal) var(--ease-out),
              opacity var(--duration-normal) var(--ease-out);
}

/* Hero switch row inside a Pattern 7 modal sits outside .modal__fields and
   therefore doesn't participate in its flex gap — give it a bottom margin
   matching that gap so the hero and the first sub-switch are visually
   separated by the same comfortable distance as adjacent sub-switches. */
.modal__body > .switch-row--hero {
  margin-bottom: var(--space-4);
}
.modal__fields--collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Pattern 7 — auto-close countdown ribbon. Lives at the bottom of the
   modal as a dedicated row beneath the body when the disable-inside flow
   is active. Carries a thin animated progress bar along its bottom edge. */
.modal__autoclose {
  position: relative;
  padding: 8px var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.modal__autoclose[hidden] { display: none; }
.modal__autoclose-msg { flex: 1; }
.modal__autoclose-msg strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.modal__autoclose-link {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.modal__autoclose-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
}
.modal__autoclose-progress::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent-primary);
  border-radius: 0 1px 1px 0;
}
.modal__autoclose-progress--running::after {
  animation: modal-autoclose-bar 2s linear forwards;
}
@keyframes modal-autoclose-bar {
  from { width: 0; }
  to   { width: 100%; }
}

/* Lightbox variant — auto-sizes to image, no fixed dimensions */
dialog.modal.modal--lightbox {
  width: auto;
  height: auto;
  max-width: min(90vw, 800px);
  max-height: 90vh;
}

.modal__body--lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}

.modal__lightbox-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Responsive – full-screen on small devices */
@media (max-width: 480px) {
  dialog.modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    margin: 0;
    inset: 0;
  }

  .modal__header {
    padding: var(--space-4);
  }

  .modal__body {
    padding: var(--space-4);
  }

  .modal__footer {
    padding: var(--space-3) var(--space-4);
  }
}