/* ─── PAPER / BALL WIDGET ─────────────────────────────────────────────────────
   TWO-LAYER wrapper — required for correct 3-D folding.
   #paper-float  → position + float animation  (NO perspective)
   #paper-stage  → perspective only             (NO transform / filter / animation)
   #scene        → preserve-3d + content
──────────────────────────────────────────────────────────────────────────────── */

:root {
  --paper-color:  #fffef0;
  --paper-back:   #eae9dc;
  --speed:        0.6s;
  --paper-width:  360px;   /* +20% from 300px */
  --paper-height: 480px;   /* +20% from 400px */
}

/* ── Mobile: keep width at 300px, only height grows ── */
@media (max-width: 600px) {
  :root {
    --paper-width:  300px;
    --paper-height: 480px;
  }
}

/* Outer: hidden until user opens it */
#paper-float {
  position: fixed;
  left: 50%;
  bottom: 15vh;
  width:  var(--paper-width);
  height: var(--paper-height);
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
#paper-float.paper-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0px);
  animation: paperFloat 5s ease-in-out 0.4s infinite;
}
#paper-float.animating {
  animation: none;
  transform: translateX(-50%) translateY(0px);
}

/* Pause bouncing on hover or when any child is focused */
#paper-float.paper-visible:hover,
#paper-float.paper-visible:focus-within {
  animation-play-state: paused;
}

@keyframes paperFloat {
  0%,100% { transform: translateX(-50%) translateY(0px);   }
  50%      { transform: translateX(-50%) translateY(-14px); }
}

/* Inner: perspective owner */
#paper-stage {
  width: 100%;
  height: 100%;
  perspective: 1200px;
}

/* ── Scene root ── */
#scene {
  position: relative;
  width:  var(--paper-width);
  height: var(--paper-height);
  transform-style: preserve-3d;
}

/* ── Interactive Form ── */
#paper-control {
  position: absolute;
  inset: 0;
  background: var(--paper-color);
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.07);
  padding: 20px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: opacity 0.2s;
  font-family: 'Courier New', Courier, monospace;
}

textarea {
  flex-grow: 1;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
  background-image: linear-gradient(transparent 31px, #d8d8c8 32px);
  background-size: 100% 32px;
  line-height: 32px;
  color: #222;
}

/* ── View mode (reading someone else's prayer) ── */
#paper-control.view-mode #send-btn         { display: none; }
#paper-control.view-mode .flag-wrap        { display: flex; }
#paper-control.view-mode textarea          { cursor: default; color: #333; }

/* ── Dismiss button ── */
#dismiss-btn {
  position: absolute;
  top: 0px; right: 0px;
  background: transparent; border: none; color: #999;
  cursor: pointer; z-index: 12;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
#dismiss-btn:hover { background: rgba(0,0,0,0.08); color: #333; }
#dismiss-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; }

/* ── Flag button + tooltip ── */
.flag-wrap {
  position: absolute;
  bottom: 15px;
  left: 15px;
  display: none;       /* shown only in view mode via .view-mode .flag-wrap */
  align-items: center;
  gap: 8px;
  z-index: 12;
}

.flag-btn {
  background: transparent;
  border: 1px solid rgba(192,60,60,0.3);
  color: rgba(192,60,60,0.55);
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;   /* for tooltip */
  flex-shrink: 0;
}
.flag-btn:hover {
  background: rgba(192,60,60,0.10);
  color: rgba(220,60,60,0.85);
  border-color: rgba(220,60,60,0.55);
}
.flag-btn svg { width:15px; height:15px; }

/* Tooltip — appears above the flag button on hover */
.flag-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 200px;
  background: rgba(20,10,10,0.95);
  border: 1px solid rgba(192,60,60,0.35);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #cc9090;
  line-height: 1.5;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 99;
  white-space: normal;
}
.flag-btn:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Inline confirmation (shown when flag is clicked) */
.flag-confirm {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,245,245,0.95);
  border: 1px solid rgba(192,60,60,0.3);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
}
.flag-confirm-msg {
  font-size: 11px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #883030;
  white-space: nowrap;
}
.flag-confirm-btn {
  border: none;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
  font-weight: 600;
}
.flag-confirm-yes { background: rgba(192,60,60,0.15); color: #c03030; }
.flag-confirm-yes:hover { background: rgba(192,60,60,0.28); }
.flag-confirm-no  { background: rgba(0,0,0,0.06); color: #666; }
.flag-confirm-no:hover  { background: rgba(0,0,0,0.12); }

/* ── Send button ── */
#send-btn {
  position: absolute;
  bottom: 15px; right: 15px;
  background: #111827; color: #7eb8f7;
  border: 1px solid #2a4a7f;
  width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer; z-index: 11;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 10px rgba(80,140,255,0.35);
}
#send-btn:hover { background:#1e3060; box-shadow:0 0 20px rgba(80,140,255,0.6); }
#send-btn svg { width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* ── Primary Proxy (Folds 1 & 2) ── */
#proxy-main {
  position: absolute; inset: 0;
  display: flex; transform-style: preserve-3d;
  opacity: 0; pointer-events: none; z-index: 5;
}
.proxy-half { width:50%;height:100%;position:relative;transform-style:preserve-3d;transition:transform var(--speed) ease-in-out; }
.proxy-left  { transform-origin: right center; }
.proxy-right { transform-origin: left  center; }
.proxy-quad  { position:absolute;width:100%;height:50%;background:var(--paper-color);backface-visibility:hidden;transform-style:preserve-3d;transition:transform var(--speed) ease-in-out;border:0.5px solid rgba(0,0,0,0.05); }
.quad-top    { top:0;transform-origin:bottom center; }
.quad-bottom { bottom:0; }
.proxy-quad::after { content:'';position:absolute;inset:0;background:var(--paper-back);transform:rotateX(180deg) translateZ(1px); }

/* ── Mini Proxy (Fold 3 & Ingestion) ── */
#proxy-mini { position:absolute;width:50%;height:50%;bottom:0;right:0;display:none;transform-style:preserve-3d;z-index:6;transition:all 0.6s cubic-bezier(0.4,0,0.2,1); }
.mini-piece { position:absolute;width:100%;height:50%;background:var(--paper-back);backface-visibility:hidden;transform-style:preserve-3d;transition:transform var(--speed) ease-in-out;border:0.5px solid rgba(0,0,0,0.05); }
.mini-top    { top:0;transform-origin:bottom center;z-index:2; }
.mini-bottom { bottom:0;z-index:1; }
.mini-top::after { content:'';position:absolute;inset:0;background:var(--paper-back);transform:rotateX(180deg) translateZ(1px); }

/* ── Ball ── */
#ball {
  position:absolute;width:180px;height:auto;left:50%;top:50%;
  transform:translate3d(-50%,400px,0) scale(1);opacity:0;
  transition:transform 0.8s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.5s;z-index:20;
}
#ball.visible { opacity:1;transform:translate3d(-50%,-50%,0) scale(1); }
#ball.vanish  {
  transform:translate3d(-50%,-150px,-1500px) scale(0);opacity:1;filter:blur(8px);
  transition:transform 0.3s cubic-bezier(0.4,0,1,1),opacity 0.3s,filter 0.3s;
}

/* ── Fold animation triggers ── */
.anim-fold-1 .quad-top   { transform: rotateX(-179.5deg); }
.anim-fold-2 .proxy-left { transform: rotateY(179.5deg); }
.anim-fold-3 .mini-top   { transform: rotateX(-179.5deg); }

.paper-ingested { top:50%!important;left:50%!important;transform:translate(-50%,-50%) scale(0)!important;opacity:0!important; }