/* ============================================
   Composer Explainer Panel — v3
   Three-stop magnetic bottom sheet
   Stops: collapsed → composer → history
   ============================================ */

/* ============================================
   Color Variables (matching app theme)
   ============================================ */

:root {
  /* Selfie / My Look - Muted Blue */
  --selfie-bg: #E3F2FD;
  --selfie-accent: #4A8CB8;
  --selfie-accent-dark: #1F5C94;

  /* Interest - Muted Green */
  --interest-bg: #E8F5E9;
  --interest-accent: #5A9E60;
  --interest-accent-dark: #437E48;

  /* Figure silhouette fill */
  --figure-fill: #c0ccd8;
  --figure-stroke: #1a2530;
}

[data-theme="dark"] {
  --selfie-bg: var(--bg-primary);
  --selfie-accent: #5C9AC7;
  --selfie-accent-dark: #3073AB;

  --interest-bg: var(--bg-primary);
  --interest-accent: #72AD77;
  --interest-accent-dark: #5A9E60;

  --figure-fill: #c0ccd8;
  --figure-stroke: #1a2530;
}

[data-theme="light"] {
  --figure-fill: #1e2a35;
  --figure-stroke: #a0b8cc;
}

/* ============================================
   Spring Physics Easing
   ============================================ */

:root {
  --spring-bounce: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
    1.001
  );
  --spring-duration: 500ms;
}

/* ============================================
   Clipping Container — fixed viewport wrapper
   The panel lives inside this so overflow: hidden
   clips content pushed below the input bar.
   ============================================ */

#composerExplainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 900;
  overflow: hidden;
}

/* ============================================
   Panel Container — transform-based positioning
   ============================================ */

.composer-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.06),
    0 -4px 16px rgba(0, 0, 0, 0.08),
    0 -12px 40px rgba(0, 0, 0, 0.04);
  max-width: 480px;
  margin: 0 auto;
  pointer-events: auto;
  will-change: transform;
  transition: transform 500ms var(--spring-bounce);
}

@supports not (animation-timing-function: linear(0, 1)) {
  .composer-panel {
    transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* Disable transition during finger tracking */
.composer-panel.dragging {
  transition: none !important;
}

.composer-panel.above-input {
  box-shadow: none;
  border-radius: 0;
}

/* ============================================
   Drag Handle - iOS style
   ============================================ */

.panel-handle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 16px 8px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.handle-bar {
  width: 36px;
  height: 5px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 2.5px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.panel-handle:active .handle-bar {
  transform: scaleX(1.08);
  background: rgba(0, 0, 0, 0.2);
}

.panel-chevron {
  width: 12px;
  height: 12px;
  margin-left: 6px;
  color: rgba(0, 0, 0, 0.3);
  transition: transform 500ms var(--spring-bounce), opacity 0.15s ease;
}

@supports not (animation-timing-function: linear(0, 1)) {
  .panel-chevron {
    transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1), opacity 0.15s ease;
  }
}

.panel-handle:active .panel-chevron {
  opacity: 0.6;
}

.composer-panel.collapsed .panel-chevron {
  transform: rotate(180deg);
}

/* Collapsed state — buttons always visible, no protruding tab */
.composer-panel.collapsed .panel-handle {
  border-top: none;
}

/* ============================================
   Panel Content
   ============================================ */

.panel-content {
  padding: 0 16px 16px;
  touch-action: pan-x;
}

/* When collapsed, disable interaction on content */
.composer-panel.collapsed .panel-content {
  pointer-events: none;
}

.explainer-visual {
  position: relative;
  width: 100%;
  will-change: transform, margin-bottom;
  transition:
    transform 400ms var(--spring-bounce),
    margin-bottom 400ms var(--spring-bounce);
  transform-origin: top center;
}

/* Visual shrink is applied gradually by JS during drag — no instant CSS class */
/* Disable transitions on visual during finger tracking */
.composer-panel.dragging .explainer-visual {
  transition: none !important;
}

.explainer-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   Clickable Regions
   ============================================ */

.clickable-region {
  cursor: pointer;
  transition: filter 0.2s ease;
  transform-origin: center;
}

.clickable-region .click-target {
  pointer-events: all;
}

.clickable-region:hover {
  filter: brightness(1.08);
}

.clickable-region.disabled {
  cursor: default;
  pointer-events: none;
}

/* ============================================
   Click Animation
   ============================================ */

@keyframes push-in {
  0% { transform: scale(1) translateY(0); }
  50% { transform: scale(0.96) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}

.clickable-region.clicked {
  animation: push-in 0.2s ease;
}

/* ============================================
   Figure Silhouettes — filled by theme
   ============================================ */

.figure-silhouette path {
  fill: var(--figure-fill, #c0ccd8);
  stroke: none;
}

/* ============================================
   Beacon Pulse Animation (per-side)
   ============================================ */

@keyframes beacon-ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Left beacon (large figure, center at 64,191) */
.beacon-left-animating .beacon-left .beacon-ring {
  transform-origin: 64px 191px;
  animation: beacon-ping 2s ease-out infinite;
}

.beacon-left-animating .beacon-left .beacon-ring:nth-child(2) {
  animation-delay: 0.48s;
}

.beacon-left-animating .beacon-left .beacon-ring:nth-child(3) {
  animation-delay: 0.96s;
}

/* Right beacon (small figure, center at 290,125) */
.beacon-right-animating .beacon-right .beacon-ring {
  transform-origin: 290px 125px;
  animation: beacon-ping 2s ease-out infinite;
}

.beacon-right-animating .beacon-right .beacon-ring:nth-child(2) {
  animation-delay: 0.48s;
}

.beacon-right-animating .beacon-right .beacon-ring:nth-child(3) {
  animation-delay: 0.96s;
}

/* nth-child(3) = smallest ring, starts first (0s delay) */

/* ============================================
   History Panel — below the composer figures
   ============================================ */

.history-panel {
  min-height: 48px;
  overflow: hidden;
  padding-top: 20px;
}

#historyItems {
  max-height: calc(0.55 * 100vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}

#historyItems::after {
  content: '';
  display: block;
  height: 80px;
}

#historyItems::-webkit-scrollbar {
  display: none;
}

.history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #8696A0);
  padding: 8px 4px 6px;
  letter-spacing: 0.3px;
}

.composer-panel.history-expanded #historyIcon path {
  fill: var(--selfie-accent, #2196F3);
}

/* ============================================
   Photo dim during animation + overlay fade
   ============================================ */

/* Photo images get dimmed while their slot's animation is running */
.left-body-img,
.right-body-img {
  transition: opacity 0.5s ease;
}

/* Figure silhouettes, beacon rings, viewfinder elements fade when photo present & animation done */
.figure-silhouette,
.beacon-group,
#leftViewfinder,
#rightViewfinder {
  transition: opacity 0.5s ease;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-theme="dark"] .composer-panel {
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.08),
    0 -4px 16px rgba(0, 0, 0, 0.4),
    0 -12px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .composer-panel.above-input {
  box-shadow: none;
}

[data-theme="dark"] .handle-bar {
  background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .panel-handle:active .handle-bar {
  background: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .panel-chevron {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .panel-handle {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 480px) {
  .composer-panel {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }

  .panel-content {
    padding: 0 12px 20px;
  }
}

/* ============================================
   Safe Area (iOS notch support)
   ============================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .composer-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
}