/* ============================================================
   Shared XR (immersive fullscreen) mode styling.

   Single source of truth so the "XR Mode" experience looks the
   same across pages. The visual language is taken from the
   To Text page (the base): black backdrop, glassmorphism header
   with a bottom border, white 2rem title, a circular icon exit
   button and a green "primary" enter button.

   Used by: To Pic (index.html) and To Sign (sign.html).
   To Symbol (viewer.html) keeps its own dedicated styling.
   ============================================================ */

/* Result header row: title on the left, XR button on the right.
   (To Pic defines its own copy inline; harmless to repeat here so
   To Sign gets the same layout without page-specific CSS.) */
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

/* Enter-XR trigger button (matches To Text .fullscreen-btn) */
.pic-xr-btn {
  display: none; /* revealed by JS only when the panel holds results */
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary, #059669);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.pic-xr-btn:hover {
  background: var(--primary-dark, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}
.pic-xr-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Immersive overlay (matches To Text .fullscreen-overlay) */
.pic-xr-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 10000;
  display: none;
  flex-direction: column;
  padding: 2rem;
  box-sizing: border-box;
  animation: xrFadeIn 0.3s ease-out;
}

@keyframes xrFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Header (matches To Text .fullscreen-header) */
.pic-xr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.pic-xr-title {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Circular icon exit button (matches To Text .exit-fullscreen-btn) */
.pic-xr-exit {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.pic-xr-exit:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
.pic-xr-exit svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Content area (matches To Text .fullscreen-content) */
.pic-xr-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
  color: #fff;
  text-align: center;
}

/* In XR the media fills the screen, overriding small inline sizes
   set by the result renderers. */
.pic-xr-content img,
.pic-xr-content video {
  max-width: 90vw !important;
  max-height: 80vh !important;
  width: auto !important;
  object-fit: contain;
  border-radius: 12px;
  margin: 0.75rem auto;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.pic-xr-content .image-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pic-xr-content .gallery-image { height: 260px; }

/* Responsive (matches To Text breakpoints) */
@media (max-width: 768px) {
  .pic-xr-overlay { padding: 1rem; }
  .pic-xr-title { font-size: 1.5rem; }
  .pic-xr-content { max-height: calc(100vh - 150px); -webkit-overflow-scrolling: touch; }
  .pic-xr-exit { width: 40px; height: 40px; }
  .pic-xr-exit svg { width: 20px; height: 20px; }
  .pic-xr-btn .btn-text { display: none; }
}

@media (max-width: 480px) {
  .pic-xr-header {
    flex-direction: row;
    gap: 1rem;
    align-items: center;
  }
  .pic-xr-content { max-height: calc(100vh - 160px); }
}