fbe335f4-8133-43e0-b832-a5f31ccd600d

Committed 30 Jan 2026 02:37PM UTC coverage: 45.052% (-0.09%) from 45.14%

Build # fbe335f4-8133-43e0-b832-a5f31ccd600d

Build Type

push

circleci

Committed by CircleCI Auto-merge

Commit Message

Auto-merge master to production after successful tests - Original commit: fix: Show poster display name in message details "Posted By" header

Run Details

3714 of 8391 branches covered (44.26%)

Branch coverage included in aggregate %.

1681 of 3584 relevant lines covered (46.9%)

114.88 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

46.68

/components/MessageExpanded.vue

<template>
  <div
    v-if="message"
    class="message-expanded-wrapper"
    :class="{ 'in-modal': inModal, 'fullscreen-overlay': fullscreenOverlay }"
  >
    <div
      ref="containerRef"
      class="message-expanded-mobile"
      :class="{ stickyAdRendered }"
    >
      <!-- Hide the default navbar by teleporting an empty replacement (only in fullscreen overlay mode) -->
      <Teleport
        v-if="navbarMobileExists && fullscreenOverlay"
        to="#navbar-mobile"
      >
        <div class="hidden-navbar" />
      </Teleport>

      <!-- Close button for two-column layout (positioned at modal top-right) -->
      <button class="close-button" @click.stop="goBack">
        <v-icon icon="times" />
      </button>

      <!-- Two-column layout wrapper for short wide screens -->
      <div class="two-column-wrapper">
        <!-- Photo Area with Ken Burns animation -->
        <div class="photo-area" @click="showPhotosModal">
          <!-- Back button on photo (hidden in two-column) -->
          <button class="back-button" @click.stop="goBack">
            <v-icon icon="arrow-left" />
          </button>

          <!-- Status overlay images -->
          <b-img
            v-if="message.successful"
            lazy
            src="/freegled.jpg"
            class="status-overlay-image"
            :alt="successfulText"
          />
          <b-img
            v-else-if="message.promised"
            lazy
            src="/promised.jpg"
            class="status-overlay-image"
            alt="Promised"
          />
          <!-- Thumbnail carousel for multiple photos -->
          <div
            v-if="attachmentCount > 1"
            ref="thumbnailsRef"
            class="thumbnail-carousel"
            @touchstart="onThumbnailTouchStart"
            @touchmove="onThumbnailTouchMove"
            @touchend="onThumbnailTouchEnd"
          >
            <div
              v-for="(attachment, index) in message.attachments"
              :key="attachment.id || index"
              class="thumbnail-item"
              :class="{ active: index === currentPhotoIndex }"
              @click.stop="handleThumbnailClick(index)"
            >
              <OurUploadedImage
                v-if="attachment.ouruid"
                :src="attachment.ouruid"
                :modifiers="attachment.externalmods"
                alt="Thumbnail"
                class="thumbnail-image"
                :width="80"
                :height="80"
              />
              <NuxtPicture
                v-else-if="attachment.externaluid"
                format="webp"
                provider="uploadcare"
                :src="attachment.externaluid"
                :modifiers="attachment.externalmods"
                alt="Thumbnail"
                class="thumbnail-image"
                :width="80"
                :height="80"
              />
              <ProxyImage
                v-else-if="attachment.path"
                class-name="thumbnail-image"
                alt="Thumbnail"
                :src="attachment.path"
                :width="80"
                :height="80"
                fit="cover"
              />
            </div>
          </div>

          <!-- Actual photo or placeholder -->
          <div
            v-if="gotAttachments"
            class="photo-container"
            :class="{ 'ken-burns': showKenBurns }"
          >
            <OurUploadedImage
              v-if="currentAttachment?.ouruid"
              :src="currentAttachment.ouruid"
              :modifiers="currentAttachment.externalmods"
              alt="Item Photo"
              class="photo-image"
              :width="640"
              :height="480"
            />
            <NuxtPicture
              v-else-if="currentAttachment?.externaluid"
              format="webp"
              provider="uploadcare"
              :src="currentAttachment.externaluid"
              :modifiers="currentAttachment.externalmods"
              alt="Item Photo"
              class="photo-image"
              :width="640"
              :height="480"
            />
            <ProxyImage
              v-else-if="currentAttachment?.path"
              class-name="photo-image"
              alt="Item picture"
              :src="currentAttachment.path"
              :width="640"
              :height="480"
              fit="cover"
            />
          </div>

          <!-- No photo - show placeholder -->
          <div v-else class="photo-container">
            <MessagePhotoPlaceholder
              :placeholder-class="placeholderClass"
              :icon="categoryIcon"
            />
          </div>

          <!-- Poster overlay on photo (shown on shorter screens) -->
          <client-only>
            <div
              v-if="poster"
              class="poster-overlay"
              :class="{ 'poster-overlay--below-carousel': attachmentCount > 1 }"
              @click.stop="showProfileModal = true"
            >
              <div class="poster-overlay-avatar-wrapper">
                <ProfileImage
                  :image="poster.profile?.paththumb"
                  :externaluid="poster.profile?.externaluid"
                  :ouruid="poster.profile?.ouruid"
                  :externalmods="poster.profile?.externalmods"
                  :name="poster.displayname"
                  class="poster-overlay-avatar"
                  is-thumbnail
                  size="sm"
                />
                <div v-if="poster.supporter" class="supporter-badge-small">
                  <v-icon icon="trophy" />
                </div>
              </div>
              <div class="poster-overlay-info">
                <span class="poster-overlay-name">{{
                  poster.displayname
                }}</span>
                <div class="poster-overlay-stats">
                  <span v-if="poster.info?.offers" class="poster-overlay-stat">
                    <v-icon icon="gift" />{{ poster.info.offers }}
                  </span>
                  <span
                    v-if="poster.info?.offers && poster.info?.wanteds"
                    class="poster-overlay-separator"
                    >•</span
                  >
                  <span v-if="poster.info?.wanteds" class="poster-overlay-stat">
                    <v-icon icon="search" />{{ poster.info.wanteds }}
                  </span>
                </div>
              </div>
              <v-icon icon="chevron-right" class="poster-overlay-chevron" />
            </div>
          </client-only>

          <!-- Title overlay at bottom of photo - matches summary layout -->
          <div class="title-overlay">
            <div class="info-row">
              <MessageTag :id="id" :inline="true" class="title-tag ps-1 pe-1" />
              <div class="info-icons">
                <client-only>
                  <span
                    v-if="distanceText"
                    v-b-tooltip.hover.click.blur="{
                      title: 'Show on map',
                      customClass: 'mobile-tooltip',
                    }"
                    class="location"
                    @click.stop="showMapModal = true"
                  >
                    <v-icon icon="map-marker-alt" />{{ distanceText }}
                  </span>
                  <span
                    v-b-tooltip.hover.click.blur="{
                      title: fullTimeAgo,
                      customClass: 'mobile-tooltip',
                    }"
                    class="time"
                    @click.stop
                  >
                    <v-icon icon="clock" />{{ timeAgo }}
                  </span>
                  <span
                    v-b-tooltip.hover.click.blur="{
                      title: replyTooltip,
                      customClass: 'mobile-tooltip',
                    }"
                    class="replies"
                    @click.stop
                  >
                    <v-icon icon="reply" />{{ replyCount }}
                  </span>
                  <span
                    v-if="message.deliverypossible && isOffer"
                    v-b-tooltip.hover.click.blur="{
                      title: `Delivery may be possible - you can ask, but don't assume it will be`,
                      customClass: 'mobile-tooltip',
                    }"
                    class="delivery"
                    @click.stop
                  >
                    <v-icon icon="truck" />?
                  </span>
                  <span
                    v-if="message.deadline"
                    v-b-tooltip.hover.click.blur="{
                      title: deadlineTooltip,
                      customClass: 'mobile-tooltip',
                    }"
                    class="deadline"
                    @click.stop
                  >
                    <v-icon icon="hourglass-end" />Ends {{ formattedDeadline }}
                  </span>
                </client-only>
              </div>
            </div>
            <div class="title-row">
              <span class="title-subject">{{ subjectItemName }}</span>
            </div>
            <div class="location-row">
              <div v-if="subjectLocation" class="title-location">
                {{ subjectLocation }}
              </div>
              <div class="photo-actions">
                <button
                  class="photo-action-btn"
                  @click.stop="showShareModal = true"
                >
                  <v-icon icon="share-alt" />
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Right column: Info + Reply (for two-column layout) -->
        <div class="right-column">
          <!-- Info Section -->
          <div class="info-section">
            <!-- Description -->
            <div class="description-section">
              <div class="section-header">
                <span class="section-header-text">DESCRIPTION</span>
                <div class="section-header-actions">
                  <button
                    class="action-button"
                    title="Share this post"
                    @click.stop="showShare"
                  >
                    <v-icon icon="share-alt" />
                    <span class="action-button-text">Share</span>
                  </button>
                  <client-only>
                    <button
                      v-if="loggedIn && message.groups?.length"
                      class="action-button action-button--report"
                      title="Report this post"
                      @click.stop="showReport"
                    >
                      <v-icon icon="flag" />
                      <span class="action-button-text">Report</span>
                    </button>
                  </client-only>
                  <NuxtLink
                    :to="'/message/' + id"
                    class="section-id-link"
                    @click.stop
                  >
                    #{{ id }}
                  </NuxtLink>
                </div>
              </div>
              <div class="description-content">
                <MessageTextBody :id="id" />
              </div>
            </div>

            <!-- Posted by divider and section (shown on taller screens, after description) -->
            <client-only>
              <div v-if="poster" class="section-header section-header--poster">
                <span>
                  <span class="section-header-text">POSTED BY</span>
                  <span class="section-header-name">{{
                    poster.displayname
                  }}</span>
                </span>
                <span
                  class="section-id-link"
                  @click.stop="showProfileModal = true"
                >
                  #{{ poster.id }}
                </span>
              </div>
              <div
                v-if="poster"
                class="poster-section-wrapper"
                @click.stop="showProfileModal = true"
              >
                <div class="poster-avatar-wrapper">
                  <ProfileImage
                    :image="poster.profile?.paththumb"
                    :externaluid="poster.profile?.externaluid"
                    :ouruid="poster.profile?.ouruid"
                    :externalmods="poster.profile?.externalmods"
                    :name="poster.displayname"
                    class="poster-avatar"
                    is-thumbnail
                    size="lg"
                  />
                  <div v-if="poster.supporter" class="supporter-badge">
                    <v-icon icon="trophy" />
                  </div>
                </div>
                <div class="poster-details">
                  <span class="poster-name">{{ poster.displayname }}</span>
                  <div class="poster-stats">
                    <span v-if="poster.info?.offers" class="poster-stat">
                      <v-icon icon="gift" />{{ poster.info.offers
                      }}<span class="poster-stat-label">OFFERs</span>
                    </span>
                    <span
                      v-if="poster.info?.offers && poster.info?.wanteds"
                      class="poster-stat-separator"
                      >•</span
                    >
                    <span v-if="poster.info?.wanteds" class="poster-stat">
                      <v-icon icon="search" />{{ poster.info.wanteds
                      }}<span class="poster-stat-label">WANTEDs</span>
                    </span>
                  </div>
                  <div v-if="posterAboutMe" class="poster-aboutme">
                    {{ posterAboutMe }}
                  </div>
                </div>
                <UserRatings
                  v-if="poster.id"
                  :id="poster.id"
                  size="md"
                  :disabled="fromme"
                  class="poster-ratings"
                  @click.stop.prevent
                />
                <v-icon icon="chevron-right" class="poster-chevron" />
              </div>
            </client-only>
          </div>

          <!-- Inline reply section for two-column layout -->
          <div v-if="isTwoColumnLayout" class="inline-reply-section">
            <div v-if="!replyExpanded">
              <!-- Promised notice -->
              <div
                v-if="
                  message.promised &&
                  !message.successful &&
                  replyable &&
                  !fromme
                "
                class="promised-notice mb-2"
              >
                <v-icon icon="handshake" />
                {{
                  message.promisedtome ? 'Promised to you' : 'Already promised'
                }}
              </div>
              <div
                v-if="replyable && !replied && !message.successful"
                class="footer-buttons"
              >
                <b-button
                  v-if="inModal || fullscreenOverlay"
                  variant="secondary"
                  size="lg"
                  class="cancel-button"
                  @click="goBack"
                >
                  Cancel
                </b-button>
                <b-button
                  v-if="!fromme"
                  variant="primary"
                  size="lg"
                  class="reply-button"
                  @click="expandReply"
                >
                  Reply
                </b-button>
              </div>
              <b-alert
                v-else-if="replied"
                variant="info"
                :model-value="true"
                class="mb-0"
              >
                Message sent! Check your
                <nuxt-link to="/chats">Chats</nuxt-link>.
              </b-alert>
            </div>

            <!-- Expanded reply section -->
            <div v-else class="reply-expanded-section">
              <NoticeMessage
                v-if="message.promised && !message.promisedtome"
                variant="warning"
                class="mb-2"
              >
                Already promised - you might not get it.
              </NoticeMessage>
              <client-only>
                <MessageReplySection
                  :id="id"
                  @close="replyExpanded = false"
                  @sent="sent"
                />
              </client-only>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Fixed footer with Reply button - for single column layout only -->
    <div
      v-if="!isTwoColumnLayout"
      class="app-footer"
      :class="{ expanded: replyExpanded, stickyAdRendered }"
    >
      <div v-if="!replyExpanded" class="w-100">
        <!-- Promised notice -->
        <div
          v-if="message.promised && !message.successful && replyable && !fromme"
          class="promised-notice mb-2"
        >
          <v-icon icon="handshake" />
          {{ message.promisedtome ? 'Promised to you' : 'Already promised' }}
        </div>
        <div
          v-if="replyable && !replied && !message.successful"
          class="footer-buttons"
        >
          <b-button
            v-if="inModal || fullscreenOverlay"
            variant="secondary"
            size="lg"
            class="cancel-button"
            @click="goBack"
          >
            Cancel
          </b-button>
          <b-button
            v-if="!fromme"
            variant="primary"
            size="lg"
            class="reply-button"
            @click="expandReply"
          >
            Reply
          </b-button>
        </div>
        <b-alert
          v-else-if="replied"
          variant="info"
          :model-value="true"
          class="mb-0"
        >
          Message sent! Check your <nuxt-link to="/chats">Chats</nuxt-link>.
        </b-alert>
      </div>

      <!-- Expanded reply section -->
      <div v-else class="reply-expanded-section">
        <NoticeMessage
          v-if="message.promised && !message.promisedtome"
          variant="warning"
          class="mb-2"
        >
          Already promised - you might not get it.
        </NoticeMessage>
        <client-only>
          <MessageReplySection
            :id="id"
            @close="replyExpanded = false"
            @sent="sent"
          />
        </client-only>
      </div>
    </div>

    <!-- Map Modal - Full Screen -->
    <Teleport v-if="showMapModal" to="body">
      <div class="fullscreen-map-viewer">
        <button class="map-back-button" @click="showMapModal = false">
          <v-icon icon="arrow-left" />
        </button>
        <client-only>
          <MessageMap
            v-if="validPosition"
            :home="home"
            :position="{ lat: message.lat, lng: message.lng }"
            class="fullscreen-map"
          />
        </client-only>
        <div class="map-hint">
          <v-icon icon="info-circle" /> Approximate location shown
        </div>
      </div>
    </Teleport>

    <!-- Photos Modal -->
    <MessagePhotosModal
      v-if="showMessagePhotosModal && attachmentCount"
      :id="message.id"
      :initial-index="currentPhotoIndex"
      @hidden="showMessagePhotosModal = false"
    />

    <!-- Share Modal -->
    <MessageShareModal
      v-if="showShareModal && message.url"
      :id="message.id"
      @hidden="showShareModal = false"
    />

    <!-- Profile Modal -->
    <ProfileModal
      v-if="showProfileModal && poster?.id"
      :id="poster.id"
      @hidden="showProfileModal = false"
    />

    <!-- Report Modal -->
    <MessageReportModal
      v-if="showReportModal"
      :id="id"
      @hidden="showReportModal = false"
    />
  </div>
</template>

<script setup>
import {
  ref,
  computed,
  defineAsyncComponent,
  onMounted,
  onUnmounted,
} from 'vue'
import { useMiscStore } from '~/stores/misc'
import { useMobileStore } from '~/stores/mobile'
import { useMe } from '~/composables/useMe'
import { useMessageDisplay } from '~/composables/useMessageDisplay'
import { action } from '~/composables/useClientLog'
import MessageTextBody from '~/components/MessageTextBody'
import MessageTag from '~/components/MessageTag'
import NoticeMessage from '~/components/NoticeMessage'
import MessageReplySection from '~/components/MessageReplySection'
import ProfileImage from '~/components/ProfileImage'
import UserRatings from '~/components/UserRatings'
import { useModalHistory } from '~/composables/useModalHistory'

const MessageMap = defineAsyncComponent(() => import('~/components/MessageMap'))
const MessagePhotosModal = defineAsyncComponent(() =>
  import('~/components/MessagePhotosModal')
)
const MessageShareModal = defineAsyncComponent(() =>
  import('~/components/MessageShareModal')
)
const ProfileModal = defineAsyncComponent(() =>
  import('~/components/ProfileModal')
)
const MessageReportModal = defineAsyncComponent(() =>
  import('~/components/MessageReportModal')
)

const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
  replyable: {
    type: Boolean,
    default: true,
  },
  hideClose: {
    type: Boolean,
    default: false,
  },
  actions: {
    type: Boolean,
    default: true,
  },
  inModal: {
    type: Boolean,
    default: false,
  },
  fullscreenOverlay: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['zoom', 'close'])

const miscStore = useMiscStore()
const mobileStore = useMobileStore()
const { me, loggedIn } = useMe()

// Use shared composable for common message display logic
const {
  message,
  subjectItemName,
  subjectLocation,
  fromme,
  gotAttachments,
  attachmentCount,
  timeAgo,
  fullTimeAgo,
  distanceText,
  replyCount,
  replyTooltip,
  isOffer,
  formattedDeadline,
  deadlineTooltip,
  successfulText,
  placeholderClass,
  categoryIcon,
  poster,
} = useMessageDisplay(props.id)

const stickyAdRendered = computed(() => miscStore.stickyAdRendered)

// State
const replied = ref(false)
const replyExpanded = ref(false)
const mountTime = ref(null)
const showMapModal = ref(false)
const showShareModal = ref(false)
const showProfileModal = ref(false)
const showMessagePhotosModal = ref(false)
const showReportModal = ref(false)
const currentPhotoIndex = ref(0)
const containerRef = ref(null)
const thumbnailsRef = ref(null)
const thumbnailTouchStartX = ref(0)
const thumbnailScrollStart = ref(0)
let thumbnailScrollInterval = null

// Computed (additional to composable)
const currentAttachment = computed(() => {
  return message.value?.attachments?.[currentPhotoIndex.value]
})

const validPosition = computed(() => {
  return message.value?.lat || message.value?.lng
})

const home = computed(() => {
  if (me.value?.lat || me.value?.lng) {
    return { lat: me.value.lat, lng: me.value.lng }
  }
  return null
})

const prefersReducedMotion = computed(() => {
  if (typeof window === 'undefined') return false
  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
})

// Defer ken-burns animation to after mount to avoid SSR hydration mismatch
const isMounted = ref(false)
const showKenBurns = computed(() => {
  return isMounted.value && !prefersReducedMotion.value
})

// Check if navbar-mobile teleport target exists (only after mount to avoid hydration mismatch)
const navbarMobileExists = computed(() => {
  if (!isMounted.value) return false
  return !!document.getElementById('navbar-mobile')
})

// Detect two-column layout (width >= xl breakpoint AND height <= 700px)
// Only evaluate after mount to avoid SSR hydration mismatch
const windowHeight = ref(0)
const isTwoColumnLayout = computed(() => {
  if (!isMounted.value) return false
  // Only use 2-column layout in modal or overlay - standalone pages use single column
  if (!props.inModal && !props.fullscreenOverlay) return false
  // Use miscStore breakpoint for width (xl = 1200px+)
  const isWideEnough = ['xl', 'xxl'].includes(miscStore.breakpoint)
  const isShortEnough = windowHeight.value <= 700
  return isWideEnough && isShortEnough
})

const posterAboutMe = computed(() => {
  const text = poster.value?.aboutme?.text
  if (!text) return null
  return text
})

// Methods
function goBack() {
  emit('close')
}

function showPhotosModal() {
  if (gotAttachments.value) {
    showMessagePhotosModal.value = true
    emit('zoom')
  }
}

function showShare() {
  showShareModal.value = true
}

function showReport() {
  showReportModal.value = true
}

function selectPhoto(index) {
  currentPhotoIndex.value = index
}

function handleThumbnailClick(index) {
  if (index === currentPhotoIndex.value) {
    // Clicking the already selected thumbnail opens the photo viewer
    showPhotosModal()
  } else {
    selectPhoto(index)
  }
}

function onThumbnailTouchStart(e) {
  thumbnailTouchStartX.value = e.touches[0].clientX
  thumbnailScrollStart.value = thumbnailsRef.value?.scrollLeft || 0
}

function onThumbnailTouchMove(e) {
  if (!thumbnailsRef.value) return
  const deltaX = thumbnailTouchStartX.value - e.touches[0].clientX
  thumbnailsRef.value.scrollLeft = thumbnailScrollStart.value + deltaX
}

function onThumbnailTouchEnd() {
  // Swipe complete, scroll position is already set
}

function startThumbnailAutoScroll() {
  if (!thumbnailsRef.value || attachmentCount.value <= 1) return

  // Wait a moment then scroll right slowly, then back
  setTimeout(() => {
    if (!thumbnailsRef.value) return
    const maxScroll =
      thumbnailsRef.value.scrollWidth - thumbnailsRef.value.clientWidth
    if (maxScroll <= 0) return

    // Animate scroll manually for smoother control
    const duration = 2000 // 2 seconds to scroll
    const startTime = performance.now()
    const startPos = 0

    function animateScroll(currentTime) {
      if (!thumbnailsRef.value) return
      const elapsed = currentTime - startTime
      const progress = Math.min(elapsed / duration, 1)
      // Ease in-out
      const eased =
        progress < 0.5
          ? 2 * progress * progress
          : 1 - Math.pow(-2 * progress + 2, 2) / 2
      thumbnailsRef.value.scrollLeft = startPos + maxScroll * eased

      if (progress < 1) {
        requestAnimationFrame(animateScroll)
      } else {
        // Pause then scroll back
        setTimeout(() => {
          if (!thumbnailsRef.value) return
          const backStartTime = performance.now()
          function animateBack(currentTime) {
            if (!thumbnailsRef.value) return
            const elapsed = currentTime - backStartTime
            const progress = Math.min(elapsed / duration, 1)
            const eased =
              progress < 0.5
                ? 2 * progress * progress
                : 1 - Math.pow(-2 * progress + 2, 2) / 2
            thumbnailsRef.value.scrollLeft = maxScroll - maxScroll * eased
            if (progress < 1) {
              requestAnimationFrame(animateBack)
            }
          }
          requestAnimationFrame(animateBack)
        }, 1000)
      }
    }
    requestAnimationFrame(animateScroll)
  }, 1000)
}

function stopThumbnailAutoScroll() {
  if (thumbnailScrollInterval) {
    clearInterval(thumbnailScrollInterval)
    thumbnailScrollInterval = null
  }
}

function expandReply() {
  console.log(
    'DEBUG expandReply called, replyable:',
    props.replyable,
    'replied:',
    replied.value,
    'fromme:',
    fromme.value
  )
  replyExpanded.value = true
}

function sent() {
  replyExpanded.value = false
  replied.value = true
  // Close after a brief delay so user sees confirmation
  setTimeout(() => {
    emit('close')
  }, 1500)
}

// Handle browser back button/swipe
useModalHistory(`message-${props.id}`, () => emit('close'), true)

function updateWindowHeight() {
  windowHeight.value = window.innerHeight
}

onMounted(() => {
  mountTime.value = Date.now()

  // Log mount for debugging mobile navigation issues.
  action('message_expanded_mount', {
    message_id: props.id,
    fullscreen_overlay: props.fullscreenOverlay,
    in_modal: props.inModal,
    breakpoint: miscStore.breakpoint,
  })

  // Prevent orientation changes while fullscreen overlay is open - keyboard opening
  // changes viewport dimensions which would incorrectly trigger landscape mode and
  // cause ScrollGrid to unmount/remount components, losing the modal state.
  if (props.fullscreenOverlay) {
    miscStore.setFullscreenModalOpen(true)
  }

  // Enable ken-burns animation now that hydration is complete
  isMounted.value = true

  // Track window height for two-column layout detection (width via miscStore.breakpoint)
  updateWindowHeight()
  window.addEventListener('resize', updateWindowHeight)

  // Start auto-scroll hint for thumbnail carousel
  startThumbnailAutoScroll()
})

onUnmounted(() => {
  const timeOpenMs = mountTime.value ? Date.now() - mountTime.value : null

  action('message_expanded_unmount', {
    message_id: props.id,
    fullscreen_overlay: props.fullscreenOverlay,
    time_open_ms: timeOpenMs,
  })

  // Clear the fullscreen modal flag so orientation detection resumes.
  // Re-check orientation since it may have changed while blocked.
  if (props.fullscreenOverlay) {
    miscStore.setFullscreenModalOpen(false)
    // Use same detection method as OrientationFettler: Capacitor for app, matchMedia for web.
    if (mobileStore.isApp) {
      // In app, use Capacitor ScreenOrientation plugin.
      import('@capacitor/screen-orientation')
        .then(({ ScreenOrientation }) => {
          ScreenOrientation.orientation().then((orientation) => {
            const isLandscape =
              orientation.type === 'landscape-primary' ||
              orientation.type === 'landscape-secondary'
            miscStore.setLandscape(isLandscape)
          })
        })
        .catch(() => {
          // Fallback to matchMedia if plugin unavailable.
          if (typeof window !== 'undefined') {
            miscStore.setLandscape(
              window.matchMedia('(orientation: landscape)').matches
            )
          }
        })
    } else if (typeof window !== 'undefined') {
      miscStore.setLandscape(
        window.matchMedia('(orientation: landscape)').matches
      )
    }
  }

  stopThumbnailAutoScroll()
  window.removeEventListener('resize', updateWindowHeight)
})
</script>

<style scoped lang="scss">
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/_breakpoints';
@import 'assets/css/sticky-banner.scss';
@import 'assets/css/_color-vars.scss';
@import 'assets/css/navbar.scss';

/*
 * LAYOUT PLAN
 * ===========
 *
 * Two wrapper modes controlled by props:
 *   - fullscreenOverlay: position: fixed (mobile expand from browse page)
 *   - inModal: position: relative (b-modal handles positioning)
 *
 * Flexbox layout inside both modes:
 *   - photo-area: flex: 1 1 0 (grows to fill available space)
 *   - info-section: flex: 0 0 auto (sizes to content, max 50% height, scrolls)
 *   - app-footer: flex-shrink: 0 (fixed height at bottom)
 *
 * DIAGRAM A: Single Column Mode
 * =============================
 *
 *    ┌──────────────────────────┐
 *    │ [←] Photo Area           │  ← Back button (fullscreen) or [×] (modal)
 *    │     (flex: 1 1 0)        │
 *    │                          │
 *    │  ┌─────────────────────┐ │
 *    │  │ Title overlay       │ │  ← At bottom of photo
 *    │  │ OFFER · 2mi · 3h    │ │
 *    │  └─────────────────────┘ │
 *    ├──────────────────────────┤
 *    │ DESCRIPTION              │  ← Scrollable, max 50% height
 *    │ Description text...      │    (flex: 0 0 auto)
 *    │                          │
 *    │ POSTED BY                │  ← Hidden on short screens (≤700px height)
 *    │ [Avatar] Name            │    (poster-overlay shown on photo instead)
 *    ├──────────────────────────┤
 *    │ [Cancel]     [Reply]     │  ← Fixed footer (flex-shrink: 0)
 *    └──────────────────────────┘
 *
 * DIAGRAM B: Two-Column Mode
 * ==========================
 *
 *    ┌─────────────────────────────────────┐
 *    │                                 [×] │  ← Close button, no back button
 *    ├──────────────────┬──────────────────┤
 *    │                  │ Description      │  ← Right column: grid 1fr + auto
 *    │   Photo          │ (scrolls if      │
 *    │   (50% width,    │  needed)         │
 *    │    full height)  │                  │
 *    │                  │ Posted by...     │  ← Always in section (not overlay)
 *    │                  ├──────────────────┤
 *    │                  │ [Cancel] [Reply] │  ← inline-reply-section (grid auto row)
 *    └──────────────────┴──────────────────┘
 *
 *    - app-footer hidden (uses inline-reply-section instead)
 *    - CSS: grid-template-columns: 1fr 1fr at @media (min-width: 1200px) and (max-height: 700px)
 *
 * RESPONSIVE LAYOUT TABLE
 * =======================
 *
 * Breakpoints: xs(<576) sm(576-767) md(768-991) lg(992-1199) xl(1200+)
 * Height: Short(≤700px) Tall(>700px)
 *
 * ┌─────────┬────────┬─────────┬─────────┬────────┬────────┬──────────┬────────────┐
 * │ Width   │ Height │ Columns │ Back [←]│Close[×]│ Poster │ Aboutme  │ Ratings    │
 * │         │        │ (→ dia.)│(overlay)│(modal) │ where  │ visible  │ visible    │
 * ├─────────┼────────┼─────────┼─────────┼────────┼────────┼──────────┼────────────┤
 * │ xs      │ Short  │ 1 (A)   │ ✓       │ (modal)│ overlay│ ✗        │ ✗          │
 * │ xs      │ Tall   │ 1 (A)   │ ✓       │ (modal)│ section│ ✗        │ ✗          │
 * ├─────────┼────────┼─────────┼─────────┼────────┼────────┼──────────┼────────────┤
 * │ sm      │ Short  │ 1 (A)   │ ✓       │ (modal)│ overlay│ ✗        │ ✗          │
 * │ sm      │ Tall   │ 1 (A)   │ ✓       │ (modal)│ section│ ✗        │ ✗          │
 * ├─────────┼────────┼─────────┼─────────┼────────┼────────┼──────────┼────────────┤
 * │ md      │ Short  │ 1 (A)   │ ✓       │ (modal)│ overlay│ ✗*       │ ✗*         │
 * │ md      │ Tall   │ 1 (A)   │ ✓       │ (modal)│ section│ ✓        │ ✓          │
 * ├─────────┼────────┼─────────┼─────────┼────────┼────────┼──────────┼────────────┤
 * │ lg      │ Short  │ 1 (A)   │ ✓       │ (modal)│ overlay│ ✗*       │ ✗*         │
 * │ lg      │ Tall   │ 1 (A)   │ ✓       │ (modal)│ section│ ✓        │ ✓          │
 * ├─────────┼────────┼─────────┼─────────┼────────┼────────┼──────────┼────────────┤
 * │ xl+     │ Short  │ 2 (B)   │ ✗       │ ✓      │ section│ ✓        │ ✓          │
 * │ xl+     │ Tall   │ 1 (A)   │ ✓       │ (modal)│ section│ ✓        │ ✓          │
 * └─────────┴────────┴─────────┴─────────┴────────┴────────┴──────────┴────────────┘
 *
 * Legend:
 * - Columns: 1 (A) → see Diagram A above; 2 (B) → see Diagram B above
 * - "overlay" = poster-overlay on photo; "section" = poster-section-wrapper below description
 * - ✗* = Aboutme/Ratings are md+ features but hidden when poster-section is hidden (short)
 * - Back [←] shown in fullscreen-overlay mode; Close [×] shown in in-modal mode
 * - Footer (Cancel/Reply): fixed at bottom in 1-col, inline in right column for 2-col
 *
 * STANDALONE PAGE CONTEXT
 * =======================
 * When used on standalone message pages (e.g., /message/123456):
 * - Always uses 1-column layout regardless of viewport size
 * - No 2-column layout even at xl-short viewports
 * - Cancel button is hidden (no modal to cancel back to)
 * - Reply button only (no Cancel) in footer
 * - Page scrolls naturally to show all content
 * - info-section height unconstrained (no internal scrollbars when room)
 *
 * Standalone detection: neither `inModal` nor `fullscreenOverlay` props are true
 *
 * TEST VIEWPORTS
 * ==============
 * Viewport sizes to test all layout variations, whitespace, and scrollbar behavior:
 *
 * Layout breakpoint tests:
 * │ Viewport      │ Width │ Height│ Breakpoint │ Expected Layout                    │
 * ├───────────────┼───────┼───────┼────────────┼────────────────────────────────────┤
 * │ 375 × 600     │ xs    │ Short │ xs-short   │ 1-col, poster overlay on photo     │
 * │ 375 × 800     │ xs    │ Tall  │ xs-tall    │ 1-col, poster in section           │
 * │ 576 × 600     │ sm    │ Short │ sm-short   │ 1-col, poster overlay on photo     │
 * │ 576 × 800     │ sm    │ Tall  │ sm-tall    │ 1-col, poster in section           │
 * │ 768 × 600     │ md    │ Short │ md-short   │ 1-col, poster overlay, no aboutme  │
 * │ 768 × 800     │ md    │ Tall  │ md-tall    │ 1-col, poster section + aboutme    │
 * │ 992 × 600     │ lg    │ Short │ lg-short   │ 1-col, poster overlay, no aboutme  │
 * │ 992 × 800     │ lg    │ Tall  │ lg-tall    │ 1-col, poster section + aboutme    │
 * │ 1200 × 600    │ xl    │ Short │ xl-short   │ 2-col side-by-side, close button   │
 * │ 1200 × 800    │ xl    │ Tall  │ xl-tall    │ 1-col, poster section + aboutme    │
 *
 * Whitespace and scrollbar edge cases:
 * │ Viewport      │ Purpose                                                        │
 * ├───────────────┼────────────────────────────────────────────────────────────────┤
 * │ 375 × 700     │ Height breakpoint edge - verify no layout jump at boundary     │
 * │ 375 × 701     │ Just above threshold - poster section should appear            │
 * │ 768 × 500     │ Very short - info-section should scroll, photo fills space     │
 * │ 768 × 900     │ Extra tall - verify no excess whitespace below footer          │
 * │ 1200 × 700    │ xl at height boundary - verify 2-col triggers correctly        │
 * │ 1200 × 701    │ xl just above threshold - should switch to 1-col               │
 * │ 1400 × 600    │ Wide 2-col - verify photo doesn't stretch, no horizontal gap   │
 * │ 1400 × 900    │ Wide tall - verify content fills space without whitespace      │
 * │ 320 × 568     │ iPhone SE - smallest common device, check no overflow          │
 * │ 414 × 896     │ iPhone 11 - common device, verify proper spacing               │
 *
 * Scrollbar presence tests (use with long description text):
 * - 1-col short: info-section scrolls internally, page doesn't scroll
 * - 1-col tall: info-section may scroll if content exceeds 50% height
 * - 2-col: right column scrolls, left photo column doesn't
 *
 * BROKEN LAYOUT INDICATORS
 * ========================
 * A layout is broken if ANY of these conditions exist:
 *
 * 1. UNUSED WHITESPACE
 *    - Large gaps between content sections (description vs buttons)
 *    - Empty space in columns that should contain content
 *    - Right column in 2-col mode showing only description when poster section should appear
 *
 * 2. SCROLLBAR PRESENT BUT SPACE UNUSED
 *    - Scrollbar visible on right column but whitespace exists above buttons
 *    - Content scrolls when viewport has room to display it all
 *    - Indicates content is hidden/collapsed that should be visible
 *
 * 3. CSS SPECIFICITY CONFLICTS
 *    - Parent context selector (`.in-modal &`) overrides media query
 *    - Fix: Nest media query INSIDE the parent context for equal specificity
 *    - Symptom: Layout doesn't change at breakpoint despite correct media query
 *
 * 4. DISPLAY MODE CONFLICTS
 *    - `display: flex` on parent prevents `grid-template-columns` from working
 *    - Must set `display: grid` at same specificity level as the flex rule
 *    - Symptom: 2-column grid doesn't trigger even at correct viewport
 *
 * 5. VISIBILITY CONFLICTS
 *    - Element hidden by one media query not re-shown by more specific query
 *    - Example: `@media (max-height: 700px) { display: none }` hides in ALL short
 *    - Must add: `@media (min-width: 1200px) and (max-height: 700px) { display: flex }`
 *    - to show element specifically in 2-column mode
 *
 * 6. CONTENT SECTIONS MISSING
 *    - In 2-col mode: poster section should appear in right column below description
 *    - In 1-col tall: poster section should appear below photo
 *    - In 1-col short: poster overlay should appear on photo
 *    - If poster is nowhere visible = broken
 *
 * 7. MODAL/OVERLAY CONTEXT AWARENESS
 *    - Rules for `.in-modal` and `.fullscreen-overlay` must be consistent
 *    - Both contexts need identical 2-column breakpoint behavior
 *
 * 8. MAX-HEIGHT CONSTRAINTS HIDING CONTENT
 *    - `max-height: 50%` on scrollable section may hide content below the fold
 *    - Scrollbar present but whitespace visible = content hidden that should fit
 *    - Fix: In 2-column mode, set `max-height: 100%` to use full available space
 *    - Must be nested inside parent context selector for proper specificity
 *    - Note: In 1-column tall mode (xl-tall), poster section may be below fold
 *      and require scrolling - this is acceptable tradeoff to show more photo
 *
 * 9. FLEX CONTAINER WRAPPER ISSUES (Modal context)
 *    - Bootstrap Vue modal-body uses `display: flex` but slot creates intermediate div
 *    - Intermediate div has default `flex: 0 1 auto` so doesn't grow to fill parent
 *    - Symptom: Content wrapper has smaller height than modal-body (e.g. 597px vs 928px)
 *    - Debug: Walk DOM from wrapper to modal-body, check each element's flex/height
 *    - Fix: Add wrapper class with `flex: 1; display: flex; flex-direction: column; min-height: 0`
 *    - See MessageModal.vue `.message-content-wrapper` class
 *
 * Chrome DevTools MCP: mcp__chrome-devtools__resize_page(width, height)
 */

/* Main wrapper - handles both modal and page contexts */
.message-expanded-wrapper {
  display: grid;
  grid-template-rows: 1fr auto;
  background: $color-white;
  position: relative;

  /* When used inside a b-modal - let modal handle positioning */
  &.in-modal {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1; /* Fill the flex container (modal-body uses display: flex) */
    min-height: 0; /* Allow flex shrinking */
  }

  /* When used as fullscreen overlay (mobile expand) */
  &.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow: hidden;
    overflow-x: hidden;
  }
}

/* Main content area - single column by default */
.message-expanded-mobile {
  display: contents;
}

/* Two-column layout wrapper */
.two-column-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  min-height: 0;

  /* Two-column layout only in modal/overlay contexts */
  .in-modal &,
  .fullscreen-overlay & {
    /* Use flexbox for priority-based sizing: photo grows, info sizes to content */
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Two-column on xl+ screens with short height (≤700px) */
    @media (min-width: 1200px) and (max-height: 700px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
      align-items: stretch;
      height: 100%;
    }
  }
}

/* Right column for two-column layout - only active in modal/overlay */
.right-column {
  display: contents;

  /* Two-column mode: use grid for precise control - only in modal/overlay */
  .in-modal &,
  .fullscreen-overlay & {
    @media (min-width: 1200px) and (max-height: 700px) {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      min-width: 0;
      height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
}

/* Inline reply section - hidden by default, shown in two-column layout (modal/overlay only) */
.inline-reply-section {
  display: none;

  .in-modal &,
  .fullscreen-overlay & {
    @media (min-width: 1200px) and (max-height: 700px) {
      display: block;
      flex-shrink: 0;
      padding: 1rem;
      border-top: 1px solid $color-gray-3;
      background: $color-white;
    }
  }
}

/* Photo Area - flexible height, fills available space */
.photo-area {
  position: relative;
  width: 100%;
  min-height: 150px;
  max-height: 50vh;
  overflow: hidden;
  background: $color-gray--lighter;
  cursor: pointer;

  /* In modal/fullscreen: grow to fill available space, shrink if needed */
  .in-modal &,
  .fullscreen-overlay & {
    flex: 1 1 0;
    max-height: none;
    min-height: 100px;
  }

  /* Two-column layout: photo fills full height of left column */
  @media (min-width: 1200px) and (max-height: 700px) {
    max-height: none;
    height: 100%;
  }
}

// Photo container - positioned to fill photo-area
.photo-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

// All image elements fill container
.photo-container :deep(picture),
.photo-container :deep(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

// Ken Burns animation is in unscoped style block at end of file

// Stats pills inside title overlay
.stats-pills {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 0.5rem;
}

.pills-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.pills-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: $color-white-opacity-25;
  color: $color-white;
  padding: 0.15rem 0.4rem;
  border-radius: 1rem;
  font-size: 0.7rem;

  &.clickable {
    cursor: pointer;
    background: $color-blue--bright;
  }
}

.delivery-maybe {
  font-weight: bold;
  font-size: 0.8rem;
  margin-left: -0.1rem;
}

// Status overlay image (promised/freegled)
.status-overlay-image {
  position: absolute;
  z-index: 10;
  transform: rotate(15deg);
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 200px;
  margin-left: -25%;
  margin-top: -15%;
  pointer-events: none;
}

// Thumbnail carousel at top of photo area
.thumbnail-carousel {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
  max-width: calc(100% - 120px);

  &::-webkit-scrollbar {
    display: none;
  }
}

.thumbnail-item {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid $color-white-opacity-50;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;

  &.active {
    border-color: $color-white;
    transform: scale(1.1);
  }

  &:not(.active):hover {
    border-color: $color-white-opacity-80;
  }
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// Back button on photo - only shown in fullscreen mode (not in modal)
.back-button {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: $color-black-opacity-50;
  border: none;
  color: $color-white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  font-size: 1.2rem;

  &:hover {
    background: $color-black-opacity-70;
  }

  // Hide when inside a modal (use X close button instead)
  .in-modal & {
    display: none;
  }
}

// Close button for modal (positioned at modal top-right)
.close-button {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: $color-gray--darker;
  border: 2px solid $color-white;
  color: $color-white;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  font-size: 1.2rem;
  box-shadow: 0 2px 8px $color-black-opacity-30;

  &:hover {
    background: $color-gray--dark;
  }

  // Show when inside a modal
  .in-modal & {
    display: flex;
  }
}

// Title overlay at bottom - more eye-catching
.title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1rem 0.75rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.9) 8%,
    rgba(0, 0, 0, 0.86) 16%,
    rgba(0, 0, 0, 0.8) 24%,
    rgba(0, 0, 0, 0.7) 32%,
    rgba(0, 0, 0, 0.58) 42%,
    rgba(0, 0, 0, 0.44) 52%,
    rgba(0, 0, 0, 0.3) 62%,
    rgba(0, 0, 0, 0.18) 72%,
    rgba(0, 0, 0, 0.1) 82%,
    rgba(0, 0, 0, 0.04) 92%,
    rgba(0, 0, 0, 0) 100%
  );
  color: $color-white;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.info-icons {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;

  @include media-breakpoint-up(md) {
    gap: 0.5rem;
    font-size: 0.85rem;
  }
}

.location,
.time,
.replies,
.delivery,
.deadline {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: $color-black-opacity-50;
  padding: 0.15rem 0.4rem;
  backdrop-filter: blur(4px);
}

.location {
  cursor: pointer;
}

.title-row {
  width: 100%;
  min-width: 0;
}

.location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.photo-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}

.photo-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: $color-white-opacity-25;
  color: $color-white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: $color-white-opacity-50;
  }

  svg {
    font-size: 0.75rem;
  }
}

.title-tag {
  font-size: 0.9rem !important;
  white-space: nowrap !important;
  flex-shrink: 0;

  @include media-breakpoint-up(md) {
    font-size: 1rem !important;
  }
}

.title-subject {
  display: block;
  width: 100%;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

  @include media-breakpoint-up(md) {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  }
}

.title-location {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 0.15rem;

  @include media-breakpoint-up(md) {
    font-size: 1rem;
  }
}

.photo-counter {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: $color-black-opacity-60;
  color: $color-white;
  padding: 0.25rem 0.6rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  z-index: 11;
}

/* Info Section - scrollable with visible scrollbar */
.info-section {
  min-height: 0;
  padding: 1rem;

  /* Visible scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: $color-gray--light $color-gray-3;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: $color-gray-3;
  }

  &::-webkit-scrollbar-thumb {
    background: $color-gray--light;
    border-radius: 4px;

    &:hover {
      background: $color-gray--base;
    }
  }

  /* In modal/fullscreen: constrain height and scroll if needed */
  .in-modal &,
  .fullscreen-overlay & {
    flex: 0 0 auto;
    max-height: 50%;
    min-height: 0;
    overflow-y: auto;

    /* Two-column layout: fill available space, scroll if needed - needs same specificity */
    @media (min-width: 1200px) and (max-height: 700px) {
      min-height: 0;
      max-height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
  }

  /* Two-column layout on standalone pages: scroll if needed */
  @media (min-width: 1200px) and (max-height: 700px) {
    min-height: 0;
    overflow-y: auto;
  }

  /* In modal: make room for close button */
  .in-modal & {
    padding-top: 2.5rem;
  }
}

// Poster overlay on photo (shown on shorter screens, but NOT in 2-column mode)
// Positioned above the title overlay (badges row)
.poster-overlay {
  display: none;
  position: absolute;
  bottom: 7rem; /* Above title-overlay which has ~6rem height */
  right: 1rem;
  background: $color-white-opacity-95;
  backdrop-filter: blur(8px);
  color: $color-gray--darker;
  padding: 0.4rem 0.6rem;
  z-index: 11;
  text-decoration: none;
  max-width: 60%;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px $color-black-opacity-15;
  border: 1px solid $color-gray-3;
  cursor: pointer;

  &:hover {
    background: $color-white;
    color: $color-gray--darker;
    text-decoration: none;
  }

  /* Show on short screens (1-column only) */
  @media (max-height: 700px) {
    display: flex;
  }

  /* Hide in 2-column mode - poster goes in section instead */
  @media (min-width: 1200px) and (max-height: 700px) {
    display: none;
  }
}

.poster-overlay-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.poster-overlay-avatar {
  :deep(.ProfileImage__container) {
    width: 28px !important;
    height: 28px !important;
  }
}

.supporter-badge-small {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: gold;
  color: $color-white;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid $color-white;
  font-size: 0.45rem;
}

.poster-overlay-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.poster-overlay-name {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-overlay-stats {
  display: flex;
  gap: 0.5rem;
  font-size: 0.65rem;
  color: $color-gray--dark;
}

.poster-overlay-stat {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.poster-overlay-separator {
  color: $color-gray--base;
}

.poster-overlay-chevron {
  flex-shrink: 0;
  color: $color-gray--dark;
  font-size: 0.9rem;
  margin-left: auto;
}

/* Section header with label on left, ID link on right */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid $color-gray-3;
  padding-bottom: 0.25rem;

  /* In modal: add right padding to avoid close button overlap */
  .in-modal & {
    padding-right: 3rem;
  }

  /* POSTED BY header hides on short screens where overlay is shown (1-column only) */
  &--poster {
    @media (max-height: 700px) {
      display: none;
    }

    /* Show in 2-column mode - poster section is always visible there */
    @media (min-width: 1200px) and (max-height: 700px) {
      display: flex;
    }
  }
}

.section-header-text {
  font-size: 0.7rem;
  font-weight: 600;
  color: $color-gray--base;
  letter-spacing: 0.1em;
}

.section-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid $color-gray--light;
  background: $color-white;
  color: $color-gray--dark;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;

  &:hover {
    background: $color-gray-3;
    border-color: $color-gray--base;
    color: $color-gray--darker;
  }

  &--report {
    color: $color-red--dark;
    border-color: $color-red--light;

    &:hover {
      background: $color-red--lighter;
      border-color: $color-red--dark;
    }
  }
}

.action-button-text {
  display: none;

  @include media-breakpoint-up(md) {
    display: inline;
  }
}

.section-header-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: $color-gray--darker;
  margin-left: 0.35rem;
}

.section-id-link {
  font-size: 0.7rem;
  font-weight: 500;
  color: $color-gray--base;
  text-decoration: none;

  &:hover {
    color: $color-gray--dark;
    text-decoration: underline;
  }
}

/* Poster section wrapper - clickable to open profile modal */
.poster-section-wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  text-decoration: none;
  color: inherit;
  background: $color-white;
  border: 1px solid $color-gray--light;
  border-left: 3px solid $colour-info-fg;
  cursor: pointer;

  &:hover {
    text-decoration: none;
    color: inherit;
    background: $color-gray-3;
  }

  /* Hide on short screens where overlay is shown (1-column only) */
  @media (max-height: 700px) {
    display: none;
  }

  /* Show in 2-column mode - poster section is always visible there */
  @media (min-width: 1200px) and (max-height: 700px) {
    display: flex;
  }

  /* Very narrow screens: stack vertically */
  @media (max-width: 320px) {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Poster aboutme - hidden on mobile, shown on tablet */
.poster-aboutme {
  display: none;
  font-size: 0.85rem;
  line-height: 1.5;
  color: $color-gray--darker;
  margin-top: 0.5rem;
  font-style: italic;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;

  &::before {
    content: '"';
  }

  &::after {
    content: '"';
  }

  @include media-breakpoint-up(md) {
    display: -webkit-box;
  }
}

/* Poster ratings - hidden on mobile, shown on tablet */
.poster-ratings {
  display: none !important;
  flex-shrink: 0;

  @include media-breakpoint-up(md) {
    display: flex !important;
  }
}

.poster-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.poster-avatar {
  :deep(.ProfileImage__container) {
    width: 48px !important;
    height: 48px !important;
  }
}

.supporter-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: gold;
  color: $color-white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid $color-white;
  font-size: 0.6rem;
}

.poster-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}

.poster-name {
  font-size: 1rem;
  font-weight: 600;
  color: $color-gray--darker;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: $color-gray--dark;
}

.poster-distance,
.poster-stat {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.poster-stat-label {
  display: none;
  margin-left: 0.15rem;

  @include media-breakpoint-up(md) {
    display: inline;
  }
}

.poster-stat-separator {
  color: $color-gray--base;
}

.poster-chevron {
  flex-shrink: 0;
  align-self: center;
  color: $color-gray--dark;
  font-size: 1.25rem;
  padding: 0.5rem;
  margin-right: -0.5rem;
}

// Description
.description-section {
  margin-bottom: 1rem;
}

.description-content {
  background: $color-white;
  border: 1px solid $color-gray--light;
  border-left: 3px solid $color-green--darker;
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: $color-gray--darker;

  /* Ensure at least 2 lines visible */
  min-height: 3.4em;
}

.app-footer {
  padding: 1rem;
  border-top: 1px solid $color-gray-3;
  background: $color-white;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* Hide footer in two-column layout (modal/overlay only - reply is inline there) */
  .in-modal &,
  .fullscreen-overlay & {
    @media (min-width: 1200px) and (max-height: 700px) {
      display: none;
    }
  }

  /* Sticky ad adjustment - add bottom padding instead of positioning */
  &.stickyAdRendered {
    padding-bottom: calc(1rem + $sticky-banner-height-mobile);

    @media (min-height: $mobile-tall) {
      padding-bottom: calc(1rem + $sticky-banner-height-mobile-tall);
    }

    @media (min-height: $desktop-tall) {
      padding-bottom: calc(1rem + $sticky-banner-height-desktop-tall);
    }
  }
}

.footer-buttons {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;

  .cancel-button,
  .reply-button {
    flex: 1;
    width: auto !important;
    display: flex !important;
    justify-content: center;
  }

  /* Mobile: only Reply button visible, full width */
  @media (max-width: 767.98px) {
    .cancel-button {
      display: none !important;
    }

    .reply-button {
      width: 100% !important;
    }
  }
}

/* When only Cancel button is shown (own posts), full width */
.footer-buttons:has(.cancel-button:only-child) .cancel-button {
  flex: 1;
  width: 100% !important;
}

.reply-expanded-section {
  max-height: 70vh;
  overflow-y: auto;
}

.promised-notice {
  text-align: center;
  color: $color-orange--dark;
  font-size: 0.85rem;
  font-weight: 500;
}

// Fullscreen map viewer
.fullscreen-map-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $color-gray--lighter;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.map-back-button {
  position: absolute;
  top: env(safe-area-inset-top, 0);
  left: 0;
  margin: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: $color-white-opacity-95;
  border: none;
  color: $color-gray--darker;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  font-size: 1.25rem;
  box-shadow: 0 2px 8px $color-black-opacity-20;

  &:active {
    background: $color-white;
  }
}

.fullscreen-map {
  flex: 1;
  width: 100%;
  height: 100% !important;

  :deep(.leaflet-container) {
    height: 100% !important;
  }
}

.map-hint {
  position: absolute;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0;
  right: 0;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: $color-white-opacity-90;
  color: $color-gray--dark;
  font-size: 0.85rem;
  text-align: center;
  margin-left: 1rem;
  margin-right: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px $color-black-opacity-10;
}
</style>

<!-- Unscoped styles for Ken Burns - scoped :deep() doesn't penetrate NuxtPicture -->
<style lang="scss">
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/_breakpoints';

/* Ken Burns effect - slow pan and zoom for ~10s then stop centered, mobile/tablet only */
@keyframes kenburns {
  0% {
    transform: scale(1.15) translate(3%, 3%);
  }
  50% {
    transform: scale(1.15) translate(-3%, -3%);
  }
  100% {
    transform: scale(1) translate(0%, 0%);
  }
}

.photo-container.ken-burns img {
  animation: kenburns 10s ease-in-out forwards;
  will-change: transform;
  transform-origin: center center;

  /* Disable on desktop (lg and up) */
  @include media-breakpoint-up(lg) {
    animation: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-container.ken-burns img {
    animation: none !important;
  }
}
</style>

Freegle / iznik-nuxt3 / fbe335f4-8133-43e0-b832-a5f31ccd600d

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous