/*
 * AnswerExpressModal — « Suivi opérationnel de la réponse » responsive guard.
 * Presentation only. The modal is nested inside the Express answer workspace,
 * so these selectors intentionally target its unique overlay class signature.
 */

.fixed.inset-0.z-\[100\].bg-slate-900\/60 {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  z-index: 400 !important;
}

.fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl {
  box-sizing: border-box;
  min-width: 0;
  max-width: min(56rem, calc(100vw - 2rem));
  max-height: min(90dvh, calc(100dvh - 2rem));
}

.fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .overflow-y-auto {
  min-width: 0;
  max-width: 100%;
}

.fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .overflow-y-auto {
  min-height: 0;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.fixed.inset-0.z-\[100\].bg-slate-900\/60 .grid,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 .flex,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 .rounded-2xl,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 .rounded-xl {
  min-width: 0;
}

.fixed.inset-0.z-\[100\].bg-slate-900\/60 h3,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 h5,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 p,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 li,
.fixed.inset-0.z-\[100\].bg-slate-900\/60 span {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .fixed.inset-0.z-\[100\].bg-slate-900\/60 {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: rgb(255 255 255 / 1) !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl {
    width: 100% !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b {
    flex: 0 0 auto;
    padding: max(0.875rem, env(safe-area-inset-top)) 1rem 0.875rem !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b > .flex.items-center.justify-between {
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b > .flex.items-center.justify-between > .flex.items-center.gap-3 {
    flex: 1 1 auto;
    align-items: flex-start !important;
    min-width: 0;
    gap: 0.625rem !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b .h-10.w-10 {
    width: 2.25rem !important;
    height: 2.25rem !important;
    flex: 0 0 2.25rem;
    border-radius: 0.75rem !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b .h-10.w-10 + div {
    min-width: 0;
    flex: 1 1 auto;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b h3 {
    font-size: 1rem !important;
    line-height: 1.2rem !important;
    letter-spacing: -0.015em !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b p {
    margin-top: 0.25rem;
    font-size: 0.72rem !important;
    line-height: 1.05rem !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .border-b button {
    box-sizing: border-box;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .overflow-y-auto {
    flex: 1 1 auto;
    width: 100%;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
    touch-action: pan-y;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 > .bg-white.w-full.max-w-4xl > .overflow-y-auto > * {
    width: 100%;
    max-width: 100%;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .grid.grid-cols-1 > .rounded-2xl {
    padding: 0.875rem !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .grid.grid-cols-1 > .rounded-2xl p.text-2xl,
  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .grid.grid-cols-1 > .rounded-2xl p.text-lg {
    line-height: 1.25 !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .space-y-2 > .flex.items-center.justify-between.rounded-xl {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .space-y-2 > .flex.items-center.justify-between.rounded-xl > div {
    width: 100%;
    min-width: 0;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .space-y-2 > .flex.items-center.justify-between.rounded-xl > .text-right {
    text-align: left !important;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(226 232 240);
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .rounded-2xl.border.border-amber-200 .mt-3,
  .fixed.inset-0.z-\[100\].bg-slate-900\/60 .rounded-2xl.border.border-amber-200 .mt-3 > * {
    max-width: 100%;
  }

  .fixed.inset-0.z-\[100\].bg-slate-900\/60 ul,
  .fixed.inset-0.z-\[100\].bg-slate-900\/60 li {
    min-width: 0;
    max-width: 100%;
  }
}