/*
 * Casting Calls UK — Audition Rooms mobile optimisation
 * Scope: Audition Rooms hub, reader/session cards, script viewer and live call overlay.
 * Desktop styles remain untouched unless a rule is explicitly responsive.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body:has([data-testid="call-overlay"]) {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

[data-testid="audition-rooms-page"] {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

[data-testid="call-overlay"] {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden;
  overscroll-behavior: none;
}

@supports (height: 100dvh) {
  [data-testid="call-overlay"] {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/* Keep the iPhone/iPad safe areas clear during active calls. */
[data-testid="call-floating-video"],
[data-testid="local-video"] {
  max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 1rem);
}

[data-testid="call-floating-video"] {
  top: max(1rem, env(safe-area-inset-top)) !important;
  right: max(1rem, env(safe-area-inset-right)) !important;
}

[data-testid="call-enable-sound-btn"] {
  top: max(1rem, env(safe-area-inset-top)) !important;
  left: max(1rem, env(safe-area-inset-left)) !important;
  min-height: 44px;
}

[data-testid="call-overlay"] > .absolute.bottom-0.left-0.right-0 {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(1.25rem, calc(1rem + env(safe-area-inset-bottom))) !important;
}

@media (max-width: 767px) {
  [data-testid="audition-rooms-page"] {
    padding-top: 1rem !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }

  [data-testid="audition-rooms-page"] header {
    margin-bottom: 1rem !important;
  }

  [data-testid="audition-rooms-page"] header h1 {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  /* Mobile segmented navigation. */
  [data-testid="audition-rooms-page"] [role="tablist"] {
    position: sticky;
    top: max(0.5rem, env(safe-area-inset-top));
    z-index: 40;
    width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem !important;
    margin-bottom: 0.25rem;
    border-radius: 0.875rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  [data-testid="audition-rooms-page"] [role="tab"] {
    min-width: 0;
    min-height: 44px;
    width: 100%;
    padding: 0.5rem 0.35rem !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
    border-radius: 0.625rem;
  }

  [data-testid="audition-tab-find"]::after {
    content: "Readers";
    font-size: 0.75rem;
    font-weight: 600;
  }

  [data-testid="audition-tab-sessions"]::after {
    content: "Sessions";
    font-size: 0.75rem;
    font-weight: 600;
  }

  [data-testid="audition-tab-settings"]::after {
    content: "Settings";
    font-size: 0.75rem;
    font-weight: 600;
  }

  /* Summary tiles stay compact instead of creating a very tall phone page. */
  [data-testid="audition-summary-strip"],
  [data-testid="audition-summary-strip-loading"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    margin-bottom: 0.875rem !important;
  }

  [data-testid^="audition-tile-"] {
    min-height: 88px;
    padding: 0.75rem !important;
  }

  /* Reader search/filter bar. */
  [data-testid="find-a-reader-tab"] input[data-testid="reader-search"] {
    min-height: 46px;
    font-size: 16px;
  }

  [data-testid="find-a-reader-tab"] label:has([data-testid="reader-available-only"]) {
    width: 100%;
    min-height: 46px;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--theme-border, rgba(127,127,127,.25));
    border-radius: 0.75rem;
  }

  /* Reader cards: request is the obvious thumb action. */
  [data-testid^="reader-card-"] {
    border-radius: 1rem;
  }

  [data-testid^="reader-card-"] [data-testid^="reader-request-btn-"] {
    width: 100%;
    min-height: 46px;
    font-size: 0.875rem;
  }

  [data-testid^="reader-card-"] [data-testid^="reader-request-btn-"]::after {
    content: " reader";
  }

  [data-testid^="reader-card-"] div:has(> [data-testid^="reader-request-btn-"]) {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  /* Session cards: primary join action first and full-width. */
  [data-testid^="session-row-"] {
    padding: 0.875rem !important;
    gap: 0.875rem !important;
  }

  [data-testid^="session-row-"] > div:last-child {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem !important;
    justify-content: stretch !important;
  }

  [data-testid^="session-row-"] > div:last-child > * {
    min-height: 44px;
    width: 100%;
    justify-content: center;
  }

  [data-testid^="session-status-"] {
    grid-column: 1 / -1;
    width: fit-content !important;
    min-height: 26px !important;
    justify-self: start;
  }

  [data-testid^="session-join-"] {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 50px !important;
    font-size: 0.875rem;
  }

  [data-testid^="session-accept-"],
  [data-testid^="session-decline-"],
  [data-testid^="session-cancel-"],
  [data-testid^="session-report-btn-"],
  [data-testid^="session-block-btn-"] {
    min-height: 44px !important;
  }

  /* Script picker/viewer. */
  [data-testid^="audition-script-viewer-"] {
    border-radius: 0.875rem !important;
    overflow: hidden;
  }

  [data-testid^="audition-script-picker-"] {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.625rem !important;
  }

  [data-testid^="audition-script-picker-"] > * {
    scroll-snap-align: start;
    min-height: 40px;
  }

  [data-testid^="audition-script-frame-"] {
    height: min(62dvh, 560px) !important;
    min-height: 360px;
    background: #fff;
  }

  [data-testid^="audition-script-download-"] {
    min-height: 40px;
    padding: 0.5rem 0.625rem;
  }

  /* Audition flows become iOS/Android-style bottom sheets. */
  [data-testid="reader-request-modal"],
  [data-testid="report-session-modal"],
  [data-testid="block-user-dialog"],
  [data-testid="leave-review-modal"],
  [data-testid="audition-age-dialog"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(90dvh, 760px) !important;
    transform: none !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important;
  }

  [data-testid="reader-request-modal"] input,
  [data-testid="reader-request-modal"] textarea,
  [data-testid="reader-request-modal"] select,
  [data-testid="report-session-modal"] textarea,
  [data-testid="report-session-modal"] select,
  [data-testid="leave-review-modal"] textarea {
    min-height: 46px;
    font-size: 16px !important;
  }

  [data-testid="reader-request-modal"] textarea,
  [data-testid="report-session-modal"] textarea,
  [data-testid="leave-review-modal"] textarea {
    min-height: 110px;
  }

  [data-testid="reader-request-modal"] [data-testid^="request-duration-"] {
    min-height: 44px;
    flex: 1 1 0;
  }

  [data-testid="reader-request-modal"] [data-testid="request-submit"],
  [data-testid="reader-request-modal"] [data-testid="request-cancel"],
  [data-testid="report-submit-btn"],
  [data-testid="report-cancel-btn"],
  [data-testid="block-confirm-btn"],
  [data-testid="block-cancel-btn"],
  [data-testid="review-submit-btn"],
  [data-testid="review-cancel-btn"],
  [data-testid="audition-age-yes"],
  [data-testid="audition-age-no"] {
    width: 100%;
    min-height: 48px;
  }

  [data-testid^="review-punctuality-star-"],
  [data-testid^="review-reading_skill-star-"],
  [data-testid^="review-professionalism-star-"],
  [data-testid^="review-pacing_timing-star-"],
  [data-testid^="review-audio_video_reliability-star-"],
  [data-testid^="review-supportive_helpful_attitude-star-"] {
    min-width: 42px;
    min-height: 42px;
  }

  /* Full-screen call UI for phones/PWA. */
  [data-testid="call-overlay"] {
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #000 !important;
  }

  [data-testid="call-overlay"] video {
    -webkit-user-select: none;
    user-select: none;
  }

  [data-testid="call-floating-video"] {
    width: 27vw !important;
    min-width: 92px;
    max-width: 116px;
    height: auto !important;
    aspect-ratio: 3 / 4;
    border-radius: 0.875rem !important;
  }

  [data-testid="call-overlay"] > .absolute.bottom-0.left-0.right-0 {
    min-height: calc(88px + env(safe-area-inset-bottom));
    gap: 0.75rem !important;
    background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.62), transparent);
    padding-top: 1.5rem;
  }

  [data-testid="call-mute-btn"],
  [data-testid="call-camera-btn"] {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px;
  }

  [data-testid="call-end-btn"],
  [data-testid="call-cancel-btn"],
  [data-testid="call-decline-btn"],
  [data-testid="call-accept-btn"],
  [data-testid="call-accept-voice-btn"] {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px;
  }

  [data-testid="call-enable-sound-btn"] {
    max-width: calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

/* Small phones / iPhone SE class. */
@media (max-width: 374px) {
  [data-testid="audition-rooms-page"] {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  [data-testid="audition-rooms-page"] [role="tab"]::after {
    font-size: 0.6875rem;
  }

  [data-testid^="session-row-"] > div:last-child {
    grid-template-columns: 1fr;
  }

  [data-testid^="session-status-"],
  [data-testid^="session-join-"] {
    grid-column: 1;
  }

  [data-testid="call-overlay"] > .absolute.bottom-0.left-0.right-0 {
    gap: 0.5rem !important;
  }

  [data-testid="call-mute-btn"],
  [data-testid="call-camera-btn"] {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px;
  }

  [data-testid="call-end-btn"],
  [data-testid="call-cancel-btn"],
  [data-testid="call-decline-btn"],
  [data-testid="call-accept-btn"],
  [data-testid="call-accept-voice-btn"] {
    width: 60px !important;
    height: 60px !important;
    flex-basis: 60px;
  }
}

/* Tablets: keep the room spacious and make landscape calls feel native. */
@media (min-width: 768px) and (max-width: 1180px) {
  [data-testid="audition-rooms-page"] {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }

  [data-testid="audition-rooms-page"] [role="tablist"] {
    min-height: 46px;
  }

  [data-testid^="reader-card-"] [data-testid^="reader-request-btn-"] {
    min-height: 44px;
  }

  [data-testid^="session-row-"] button {
    min-height: 42px;
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  [data-testid="call-floating-video"] {
    width: auto !important;
    height: 30vh !important;
    max-height: 150px;
    aspect-ratio: 4 / 3;
  }

  [data-testid="call-overlay"] > .absolute.bottom-0.left-0.right-0 {
    min-height: calc(72px + env(safe-area-inset-bottom));
    padding-top: 0.75rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
  }

  [data-testid="call-mute-btn"],
  [data-testid="call-camera-btn"] {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px;
  }

  [data-testid="call-end-btn"] {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-testid="call-overlay"] *,
  [data-testid="audition-rooms-page"] * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}