@font-face {
  font-family: 'Proxima Nova';
  src: local('Proxima Nova Regular'), local('ProximaNova-Regular'), local('Proxima Nova Rg'), local('Proxima Nova');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: local('Proxima Nova Bold'), local('ProximaNova-Bold'), local('Proxima Nova Rg Bold');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Alternate Gothic Stamp';
  src: local('Alternate Gothic'), local('Alternate Gothic No. 1'), local('AlternateGothic');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --chat-glass-blur: 18px;
}

/* Keep the moving scenery in the same (non-negative) stacking context as the
   glass UI. Chromium and Firefox do not reliably include negative z-index
   siblings of the page root in a backdrop-filter's sampled backdrop; Safari
   happens to. */
html {
  background: #000;
}

#background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transition: 1s opacity;
}

body {
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  height: 100vh;
  transition: background 0.8s ease-in-out;
}

body.meditation-state {
  background: #000;
}

body.thinking-state {
  background-image: url('../resources/panda-thinking.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Introduction Dialog Styles */
.intro-dialog-container {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: 90vw;
  width: 600px;
}

.dialog-bubble {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(var(--chat-glass-blur));
  -webkit-backdrop-filter: blur(var(--chat-glass-blur));
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 20px;
  border: 3px solid #c896fa;
  box-shadow:
    0 0 10px #c896fa,
    0 0 20px #c896fa,
    0 0 30px rgba(200, 150, 250, 0.5),
    inset 0 0 10px rgba(200, 150, 250, 0.1);
  animation: dialogBounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}



.dialog-content {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  min-height: 60px;
}

.dialog-text {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  flex: 1;
}

.typing-cursor {
  font-size: 18px;
  color: #c896fa;
  font-weight: bold;
  animation: blink 1s infinite;
  margin-left: 2px;
}

.dialog-next-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  border: 3px solid #ffd200;
  border-radius: 15px;
  cursor: pointer;
  transform: skew(-15deg);
  transition: all 0.4s ease;
  margin: 0 auto;
  display: block;
  box-shadow:
    0 0 5px #ffd200,
    0 0 10px #ffd200,
    0 0 15px #ffd200,
    inset 0 0 5px rgba(255, 210, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: skew(-15deg) translateY(10px);
  animation: buttonFadeIn 0.5s ease forwards;
}

.dialog-next-btn > * {
  transform: skew(15deg);
}

.dialog-next-btn:hover {
  background: rgba(255, 210, 0, 0.2);
  transform: skew(-15deg) translateY(-2px);
  box-shadow:
    0 0 8px #ffd200,
    0 0 15px #ffd200,
    0 0 25px #ffd200,
    inset 0 0 8px rgba(255, 210, 0, 0.4),
    inset 0 3px 3px rgba(255, 255, 255, 0.3);
}

@keyframes dialogBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(0px);
  }
  70% {
    transform: scale(0.95) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}



@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes buttonFadeIn {
  0% {
    opacity: 0;
    transform: skew(-15deg) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: skew(-15deg) translateY(0px);
  }
}



.input-section {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border-radius: 20px;
  z-index: 10;
  transition: opacity 0.5s ease;
  max-width: 90vw;
  width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-section.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Chat messages area */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  /* JS grows this top padding into the dissolve zone once the conversation
     reaches the upper half of the screen. That gives old bubbles room to
     vanish before the scroll viewport clips them. */
  /* Keep enough space inside the scroll viewport for each bubble's outer
     glow; otherwise the browser clips it at the viewport edge. */
  padding: 8px 22px 32px;
  scrollbar-width: none;
}

.chat-messages::-webkit-scrollbar {
  display: none;
}

/* Chat input wrapper stays at bottom */
.chat-input-wrapper {
  position: relative;
  padding: 12px;
  background: transparent;
}

/* User message bubble */
.chat-bubble-user {
  --chat-fade-surface-alpha: 0.2;
  --chat-fade-border-alpha: 1;
  --chat-fade-text-alpha: 0.95;
  --chat-fade-primary-glow: 1;
  --chat-fade-secondary-glow: 0.4;
  --chat-fade-inset-glow: 0.15;
  --chat-fade-blur: var(--chat-glass-blur);
  align-self: flex-end;
  max-width: 80%;
  padding: 12px 18px;
  /* Exactly match the opening dialog's frosted-glass surface. */
  background: rgba(0, 0, 0, var(--chat-fade-surface-alpha));
  backdrop-filter: blur(var(--chat-fade-blur));
  -webkit-backdrop-filter: blur(var(--chat-fade-blur));
  border: 3px solid rgba(255, 210, 0, var(--chat-fade-border-alpha));
  border-radius: 18px 18px 4px 18px;
  color: rgba(255, 255, 255, var(--chat-fade-text-alpha));
  font-size: 16px;
  line-height: 1.5;
  word-break: break-word;
  box-shadow:
    0 0 5px rgba(255, 210, 0, var(--chat-fade-primary-glow)),
    0 0 10px rgba(255, 210, 0, var(--chat-fade-primary-glow)),
    0 0 18px rgba(255, 210, 0, var(--chat-fade-secondary-glow)),
    inset 0 0 5px rgba(255, 210, 0, var(--chat-fade-inset-glow));
  animation: bubbleSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: box-shadow 0.12s linear, border-color 0.12s linear, color 0.12s linear, background 0.12s linear, backdrop-filter 0.12s linear, -webkit-backdrop-filter 0.12s linear;
}

/* Andy response bubble */
.chat-bubble-andy {
  --chat-fade-surface-alpha: 0.2;
  --chat-fade-border-alpha: 1;
  --chat-fade-text-alpha: 0.92;
  --chat-fade-content-alpha: 0.92;
  --chat-fade-header-alpha: 0.55;
  --chat-fade-link-alpha: 0.8;
  --chat-fade-primary-glow: 1;
  --chat-fade-secondary-glow: 0.5;
  --chat-fade-inset-glow: 0.1;
  --chat-fade-blur: var(--chat-glass-blur);
  align-self: flex-start;
  max-width: 88%;
  padding: 18px 22px;
  /* Exactly match the opening dialog's frosted-glass surface. */
  background: rgba(0, 0, 0, var(--chat-fade-surface-alpha));
  backdrop-filter: blur(var(--chat-fade-blur));
  -webkit-backdrop-filter: blur(var(--chat-fade-blur));
  border: 3px solid rgba(200, 150, 250, var(--chat-fade-border-alpha));
  border-radius: 18px 18px 18px 4px;
  color: rgba(255, 255, 255, var(--chat-fade-text-alpha));
  font-size: 15px;
  line-height: 1.65;
  word-break: break-word;
  box-shadow:
    0 0 8px rgba(200, 150, 250, var(--chat-fade-primary-glow)),
    0 0 16px rgba(200, 150, 250, var(--chat-fade-primary-glow)),
    0 0 20px rgba(200, 150, 250, var(--chat-fade-secondary-glow)),
    inset 0 0 10px rgba(200, 150, 250, var(--chat-fade-inset-glow));
  animation: bubbleSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: box-shadow 0.12s linear, border-color 0.12s linear, color 0.12s linear, background 0.12s linear, backdrop-filter 0.12s linear, -webkit-backdrop-filter 0.12s linear;
}

.andy-bubble-header {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, var(--chat-fade-header-alpha));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.andy-bubble-content {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, var(--chat-fade-content-alpha));
}

.andy-bubble-content p { margin: 0 0 10px; }
.andy-bubble-content p:last-child { margin-bottom: 0; }
.andy-bubble-content a { color: rgba(255, 255, 255, var(--chat-fade-link-alpha)); text-decoration: underline; }

/* The typing indicator is replaced inside an existing bubble, so animate the
   finished reply itself as a separate beat. This also gives locally generated
   Andy replies a short delay after the visitor's bubble. */
.andy-reply-reveal {
  transform-origin: left bottom;
  animation: andyReplyReveal 0.32s cubic-bezier(0.2, 0.8, 0.2, 1.15) 0.16s both;
  will-change: opacity, transform;
}

/* The typing dots already provide the pause, so reveal their replacement
   immediately instead of leaving a briefly empty bubble. */
.andy-reply-reveal.from-typing {
  animation-delay: 0ms;
}

/* "View as letter" button inside Andy bubble */
.view-letter-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  border: 2px solid #ffd200;
  border-radius: 10px;
  cursor: pointer;
  transform: skew(-10deg);
  transition: all 0.3s ease;
  box-shadow:
    0 0 4px #ffd200,
    0 0 8px rgba(255, 210, 0, 0.3);
}

.view-letter-btn:hover {
  background: #ffd200;
  color: #333;
  box-shadow: 0 0 8px #ffd200, 0 0 16px #ffd200;
}

/* Typing dots animation */
.typing-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 2px;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  background: #c896fa;
  border-radius: 50%;
  box-shadow: 0 0 6px #c896fa;
  animation: typingBounce 1.3s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-7px); opacity: 1; }
}

@keyframes bubbleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes andyReplyReveal {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Flying bubble — starts styled like the input field, morphs then travels */
.bubble-flyer {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 4px solid #c896fa;
  border-radius: 15px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 16px;
  box-shadow:
    0 0 5px #d8b4fe,
    0 0 10px #c896fa,
    0 0 15px #c896fa,
    0 0 20px #a855f7,
    inset 0 0 5px rgba(200, 150, 250, 0.3);
  will-change: transform, width, height, opacity;
  overflow: hidden;   /* clips text while height animates */
  box-sizing: border-box;
  word-break: break-word;
}

.email-collection-section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s, transform 0.5s;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  display: none;
}

.email-collection-section .input-container {
  flex-direction: column;
}

.email-instruction-text {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
  line-height: 1.4;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  max-width: 90vw;
  padding: 0 20px;
}

.email-instruction-text.visible {
  opacity: 1;
  pointer-events: auto;
}

.name-fields-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.name-fields-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

.email-collection-section.visible {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

.email-submitted-message {
  display: none;
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: 1.2rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.email-submitted-message.visible {
  display: block;
}


.button-row {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.skip-btn {
  padding: 12px 24px;
  font-size: 16px;
  background: rgba(128, 128, 128, 0.2);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.8);
  border: 4px solid rgba(128, 128, 128, 0.5);
  border-radius: 15px;
  cursor: pointer;
  white-space: nowrap;
  transform: skew(-15deg);
  transition: all 0.4s ease;
  box-shadow:
    0 0 2px rgba(128, 128, 128, 0.4),
    inset 0 0 2px rgba(128, 128, 128, 0.2);
}

.skip-btn:hover {
  background: rgba(128, 128, 128, 0.4);
  border-color: rgba(128, 128, 128, 0.7);
  color: white;
}
   .input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: flex-end;   /* button stays at bottom as textarea grows */
    justify-content: center;
    flex-wrap: wrap;
   }
   
.center-buttons {
    flex: 1;
}

input[type="text"],
input[type="email"] {
  flex: 1;
  min-width: 250px;
  padding: 12px 16px;
  font-size: 16px;
  border: 4px solid #c896fa;
  border-radius: 15px;
  outline: none;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  transform: skew(-15deg);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.4s ease;
  box-shadow:
    0 0 5px #d8b4fe,
    0 0 10px #c896fa,
    0 0 15px #c896fa,
    0 0 20px #a855f7,
    inset 0 0 5px rgba(200, 150, 250, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(139, 69, 19, 0.1);
}



input[type="text"].has-text,
input[type="email"].has-text {
  box-shadow:
    0 0 2.5px #d8b4fe,
    0 0 5px #c896fa,
    0 0 7.5px #c896fa,
    0 0 10px #a855f7,
    inset 0 0 2.5px rgba(200, 150, 250, 0.15),
    inset 0 2px 2px rgba(255, 255, 255, 0.1),
    inset 0 -2px 2px rgba(139, 69, 19, 0.05);
}

input[type="text"]:focus,
input[type="email"]:focus {
  border-color: #d8b4fe;
  background: rgba(0, 0, 0, 0.5);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Chat input textarea — auto-expands up to 4 lines */
textarea#userInput {
  flex: 1;
  min-width: 250px;
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  border: 4px solid #c896fa;
  border-radius: 15px;
  outline: none;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  transform: skew(-15deg);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.4s ease;
  box-shadow:
    0 0 5px #d8b4fe,
    0 0 10px #c896fa,
    0 0 15px #c896fa,
    0 0 20px #a855f7,
    inset 0 0 5px rgba(200, 150, 250, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(139, 69, 19, 0.1);
  resize: none;
  overflow-y: hidden;           /* auto-resize hides scroll */
  max-height: calc(4 * 1.5 * 16px + 2 * 12px + 8px); /* 4 lines + padding + border */
  box-sizing: border-box;
}

textarea#userInput.has-text {
  box-shadow:
    0 0 2.5px #d8b4fe,
    0 0 5px #c896fa,
    0 0 7.5px #c896fa,
    0 0 10px #a855f7,
    inset 0 0 2.5px rgba(200, 150, 250, 0.15),
    inset 0 2px 2px rgba(255, 255, 255, 0.1),
    inset 0 -2px 2px rgba(139, 69, 19, 0.05);
}

textarea#userInput:focus {
  border-color: #d8b4fe;
  background: rgba(0, 0, 0, 0.5);
}

textarea#userInput::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

textarea#userInput.has-overflow {
  overflow-y: auto;
}

.generate-btn {
  padding: 12px 24px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  border: 4px solid #c896fa;
  border-radius: 15px;
  cursor: pointer;
  white-space: nowrap;
  transform: skew(-15deg);
  transition: all 0.4s ease;
  box-shadow:
    0 0 5px #d8b4fe,
    0 0 10px #c896fa,
    0 0 15px #c896fa,
    0 0 20px #a855f7,
    inset 0 0 5px rgba(200, 150, 250, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(139, 69, 19, 0.1);
}

.generate-btn > * {
  transform: skew(15deg);
}

.generate-btn.inactive {
  background: rgba(128, 128, 128, 0.1);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.7);
  border: 4px solid rgba(128, 128, 128, 0.3);
  cursor: not-allowed;
  box-shadow:
    0 0 1px rgba(128, 128, 128, 0.2),
    inset 0 0 1px rgba(128, 128, 128, 0.1);
}

.generate-btn.active {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  border: 4px solid #ffd200;
  cursor: pointer;
  box-shadow:
    0 0 5px #ffd200,
    0 0 10px #ffd200,
    0 0 15px #ffd200,
    0 0 20px #ffed4e,
    inset 0 0 5px rgba(255, 210, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(139, 69, 19, 0.1);
}

.generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.7) !important;
}

.generate-btn:hover:not(:disabled):not(.inactive) {
  background: #ffd200;
  transform: skew(-15deg) translateY(-1px);
  border-color: #ffd200;
  color: #333;
  box-shadow:
    0 0 8px #ffd200,
    0 0 15px #ffd200,
    0 0 25px #ffd200,
    0 0 35px #ffed4e,
    inset 0 0 8px rgba(255, 210, 0, 0.4),
    inset 0 3px 3px rgba(255, 255, 255, 0.3),
    inset 0 -3px 3px rgba(139, 69, 19, 0.2);
}

/* A hand-off morphs the existing composer into one familiar action control. */
.input-container {
  transition: gap 0.42s ease, align-items 0.42s ease;
}

.input-container.action-mode {
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}

.input-container.action-mode textarea#userInput {
  flex: 0 1 0;
  width: 0;
  min-width: 0;
  max-width: 0;
  margin: 0;
  padding-right: 0;
  padding-left: 0;
  border-right-width: 0;
  border-left-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: skew(-15deg) translateX(14px);
}

.input-container.action-mode .generate-btn {
  flex: 1 1 100%;
  width: 100%;
  min-height: 56px;
  max-width: 100%;
  margin: 0;
  padding: 12px 24px;
  border-color: #c896fa;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.95);
  opacity: 1;
  transform: skew(-15deg) translateX(0);
  box-shadow:
    0 0 5px #d8b4fe,
    0 0 10px #c896fa,
    0 0 15px #c896fa,
    0 0 20px #a855f7,
    inset 0 0 5px rgba(200, 150, 250, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(139, 69, 19, 0.1);
}

.input-container.action-mode .generate-btn:hover:not(:disabled),
.input-container.action-mode .generate-btn:focus-visible {
  background: #ffd200;
  border-color: #ffd200;
  color: #333;
  outline: none;
  transform: skew(-15deg) translateY(-1px);
}

/* A Contact hand-off can offer familiar actions without introducing a
   separate component or a new visual language. */
.email-chat-btn[hidden] {
  display: none !important;
}

.input-container.action-mode.has-secondary-action {
  flex-direction: row;
  gap: 9px;
}

.input-container.action-mode.has-secondary-action .generate-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.input-container.action-mode.has-secondary-action .email-chat-btn {
  border-color: rgba(255, 210, 0, 0.9);
  box-shadow:
    0 0 5px rgba(255, 210, 0, 0.58),
    0 0 12px rgba(255, 210, 0, 0.34),
    inset 0 2px 2px rgba(255, 255, 255, 0.16),
    inset 0 -2px 2px rgba(139, 69, 19, 0.08);
}

.help-text {
 text-align: center;
 font-size: 14px;
 color: #fff;
 margin-bottom: 15px;
 font-style: italic;
 text-shadow:
   0 0 5px rgba(0, 0, 0, 1),
   0 0 10px rgba(0, 0, 0, 0.95),
   0 0 20px rgba(0, 0, 0, 0.8);
 font-weight: 500;
 max-height: 60px;
 overflow: visible;
 transition: opacity 0.2s ease, max-height 0.4s ease, margin 0.4s ease;
}

.help-text.collapsed {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.prompt-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-height: 200px;
  overflow: visible;
  padding: 10px;
  transition: opacity 0.2s ease, max-height 0.45s ease, padding 0.45s ease;
}

.prompt-buttons.collapsed {
  opacity: 0;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.prompt-btn {
  padding: 8px 16px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(255, 210, 0, 0.6);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.4s ease;
  text-align: left;
  transform: skew(-15deg);
  margin: 1px 2px;
  white-space: normal;
  width: fit-content;
  box-shadow:
    0 0 3px rgba(255, 210, 0, 0.4),
    0 0 6px rgba(255, 210, 0, 0.2),
    inset 0 0 2px rgba(255, 255, 255, 0.2);
}

.prompt-btn > * {
  transform: skew(15deg);
}

.prompt-btn:hover,
.prompt-btn:focus {
  background: #ffd200;
  transform: skew(-8deg) translateY(-1px);
  color: #333;
  border: 2px solid #ffd200;
  box-shadow:
    0 0 4px #ffd200,
    0 0 8px #ffd200,
    0 0 12px #ffd200,
    0 0 16px #ffed4e,
    inset 0 0 4px rgba(255, 210, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(139, 69, 19, 0.2);
}

/* Path D: a local, multi-select project filter. It replaces the composer and
   only opens the public SPH Projects page; no model response is involved. */
.project-discovery[hidden] {
  display: none;
}

.project-discovery {
  width: 100%;
  max-height: min(51vh, 480px);
  margin-bottom: 15px;
  overflow-y: auto;
  /* Selected filter chips have a 16px outer glow. Keep it inside the
     scrollport instead of cutting it off at the first or last row. */
  padding: 20px 18px;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(12, 9, 18, 0.78);
  backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 210, 0, 0.65);
  border-radius: 18px;
  box-shadow:
    0 0 5px rgba(255, 210, 0, 0.45),
    0 0 18px rgba(255, 210, 0, 0.18),
    inset 0 0 20px rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 210, 0, 0.75) transparent;
}

.project-discovery-panel {
  padding: 17px;
}

.project-discovery-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.project-discovery-progress,
.project-filter-summary-label,
.project-filter-group-label {
  margin: 0;
  color: rgba(255, 230, 136, 0.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.project-discovery-heading h2 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.1;
}

.project-filter-summary {
  padding: 10px 11px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.project-filter-summary-label {
  margin-bottom: 8px;
}

.project-filter-chips,
.project-filter-button-group,
.project-discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 7px 3px 10px;
  border-radius: 999px;
  background: #ffd200;
  color: #30291f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

.project-filter-chip-remove {
  display: inline-grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(48, 41, 31, 0.18);
  color: inherit;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.project-filter-chip-remove:hover,
.project-filter-chip-remove:focus-visible {
  background: rgba(48, 41, 31, 0.35);
  outline: 2px solid rgba(48, 41, 31, 0.7);
  outline-offset: 1px;
}

.project-filter-question {
  margin-bottom: 12px;
}

.project-filter-question h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 17px;
  line-height: 1.25;
}

.project-filter-question p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.4;
}

.project-filter-options {
  display: grid;
  gap: 10px;
}

.project-filter-group-label {
  margin-bottom: 6px;
}

.project-filter-option,
.project-filter-action,
.project-filter-clear {
  font: inherit;
}

.project-filter-option {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 210, 0, 0.65);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.project-filter-option:hover,
.project-filter-option:focus-visible {
  border-color: #ffd200;
  background: rgba(255, 210, 0, 0.15);
  outline: none;
  transform: translateY(-1px);
}

.project-filter-option.is-selected {
  border-color: #ffd200;
  background: #ffd200;
  color: #30291f;
  font-weight: 700;
}

.project-discovery-actions {
  align-items: stretch;
  margin-top: 17px;
}

.project-filter-action {
  min-height: 43px;
  padding: 9px 14px;
  border: 2px solid rgba(255, 210, 0, 0.75);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.project-filter-explore {
  flex: 1 1 220px;
  border-color: #ffd200;
  background: #ffd200;
  color: #30291f;
}

.project-filter-back,
.project-filter-next {
  flex: 1 1 145px;
}

.project-filter-action:hover:not(:disabled),
.project-filter-action:focus-visible:not(:disabled) {
  border-color: #ffd200;
  background: #ffdf3e;
  color: #30291f;
  outline: none;
  transform: translateY(-1px);
}

.project-filter-action:disabled {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(128, 128, 128, 0.16);
  color: rgba(255, 255, 255, 0.48);
  cursor: not-allowed;
}

.project-discovery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  color: rgba(255, 255, 255, 0.67);
  font-size: 12px;
  line-height: 1.3;
}

.project-filter-clear {
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  cursor: pointer;
}

.project-filter-clear:hover,
.project-filter-clear:focus-visible {
  border-bottom-color: #ffd200;
  color: #ffd200;
  outline: none;
}

.thinking-indicator {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  padding: 15px 20px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 5px rgba(200, 150, 250, 0.4),
    0 0 10px rgba(200, 150, 250, 0.2),
    inset 0 0 2px rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 20;
  font-size: 14px;
}

.thinking-indicator.visible {
  display: block;
  opacity: 1;
}

.energy-orb {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  background: radial-gradient(circle, #64dce1 0%, #4fc3c7 50%, #3ba5a8 100%);
  box-shadow:
    0 0 20px #64dce1,
    0 0 40px #64dce1,
    0 0 60px #64dce1;
}

.restart-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, 0.9);
  border: 3px solid #ffd200;
  border-radius: 12px;
  cursor: pointer;
  z-index: 300;
  transition: all 0.3s ease;
  transform: skew(-15deg);
  box-shadow:
    0 0 5px #ffd200,
    0 0 10px #ffd200,
    0 0 15px #ffd200;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
}

.restart-btn > * {
  transform: skew(15deg);
}

.restart-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.skip-btn-dialog {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  color: rgba(255, 255, 255, 0.9);
  border: 3px solid #ffd200;
  border-radius: 12px;
  cursor: pointer;
  z-index: 300;
  transition: all 0.3s ease;
  transform: skew(-15deg);
  box-shadow:
    0 0 5px #ffd200,
    0 0 10px #ffd200,
    0 0 15px #ffd200;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
}

.skip-btn-dialog.visible {
  opacity: 1;
  pointer-events: auto;
}

.skip-btn-dialog:hover,
.skip-btn-dialog:focus {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-color: #ffd200;
  box-shadow:
    0 0 8px #ffd200,
    0 0 15px #ffd200,
    0 0 25px #ffed4e;
}

.restart-btn:hover,
.restart-btn:focus {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-color: #ffd200;
  box-shadow:
    0 0 8px #ffd200,
    0 0 15px #ffd200,
    0 0 25px #ffed4e;
}

/* Credits */
.credits {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-style: italic;
  z-index: 100;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  max-width: 200px;
  text-align: right;
  line-height: 1.2;
}

.pdf-preview {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg) scale(0.85);
  background: white;
  padding: 40px 30px;
  border-radius: 8px;
  width: 60%;
  max-width: 600px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}

.pdf-preview.visible {
  opacity: 1;
  pointer-events: auto;
  animation: fadeInLetter 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInLetter {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%) rotate(-5deg) scale(0.3);
    filter: blur(8px);
  }
  30% {
    opacity: 0.3;
    transform: translate(-50%, -55%) rotate(-3deg) scale(0.6);
    filter: blur(4px);
  }
  60% {
    opacity: 0.8;
    transform: translate(-50%, -52%) rotate(-1deg) scale(0.95);
    filter: blur(1px);
  }
  85% {
    opacity: 1;
    transform: translate(-50%, -48%) rotate(0deg) scale(1.05);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-2deg) scale(0.85);
    filter: blur(0px);
  }
}

.pdf-preview p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  z-index: 1;
  position: relative;
}

.pdf-preview a {
  color: #C896FA;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.pdf-preview a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #C896FA;
  transition: width 0.3s ease;
}

.pdf-preview a:hover::after {
  width: 100%;
}

.signature {
  margin-top: 20px;
  text-align: right;
  font-size: 36px;
  color: #000 !important;
  z-index: 1 !important;
  position: relative !important;
  background: white;
  padding: 5px;
  display: block !important;
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
}

.pdf-footer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 10px;
  color: #666;
  font-family: 'Arial', sans-serif;
  z-index: 200;
  opacity: 0.7;
}

/* Hide mobile button on desktop */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  /* Show mobile button, hide desktop button */
  .mobile-only {
    display: block !important;
  }
  
  .desktop-only {
    display: none !important;
  }
  .intro-dialog-container {
    width: 95vw;
    bottom: 33%;
  }
  
  .dialog-bubble {
    padding: 20px;
    border-radius: 15px;
  }
  
  .dialog-text {
    font-size: 16px;
  }
  
  .dialog-next-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

    .email-collection-section {
    width: 95vw;
  }
  
  .email-collection-section .input-container {
    align-items: center;
  }
  
    .name-fields-row input, 
  #emailInput {
    box-sizing: border-box;
  }
  
  .name-fields-row, 
  .name-fields-row input, 
  #emailInput {
    width: 100%;
  }

  .input-section {
    width: 95vw;
    bottom: 3%;
    max-height: 80vh;
  }

  .chat-input-wrapper {
    padding: 10px;
  }

  .prompt-buttons {
    grid-template-columns: 1fr;
    max-height: 150px;
  }

  .input-container {
    flex-direction: column;
  }

  .project-discovery {
    max-height: 48vh;
    margin-bottom: 10px;
  }

  .project-discovery-panel {
    padding: 14px;
  }

  .project-discovery-heading {
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 4px;
  }

  .project-discovery-heading h2 {
    font-size: 19px;
  }

  .project-filter-option {
    flex: 1 1 100%;
  }

  .project-filter-action {
    flex: 1 1 100%;
  }

  .project-filter-explore {
    order: -1;
  }

      input[type="text"],
  input[type="email"] {
    box-sizing: border-box;
    min-width: 100%;
    flex-basis: 100%;
  }
  
  .name-fields-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .name-fields-row input[type="text"] {
    min-width: 100%;
    flex: none;
  }

  .envelope-container {
    width: 90vw;
    max-width: 400px;
    height: auto;
    aspect-ratio: 1.5;
  }

  .letter-final {
    width: 90vw;
    max-width: 90vw;
    padding: 30px 20px;
  }

  .envelope-tooltip {
    font-size: 10px;
    padding: 6px 10px;
  }
  
    .pdf-preview {
    padding-bottom: 120px;
    position: relative;
    width: 90vw;
    max-width: none;
    height: auto;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .openday-btn {
    position: fixed;
    bottom: 60px;
    left: 35px;
    right: 35px;
    transform: skew(-15deg);
    width: calc(100vw - 70px);
    height: auto;
    padding: 14px 20px;
    font-size: 14px;
    z-index: 999;
    border-radius: 15px;
    max-width: calc(100vw - 70px);
    text-align: center;
    line-height: 1.3;
    font-weight: 600;
    white-space: normal;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.9);
    border: 4px solid #ffd200;
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0;
    transform: skew(-15deg) translateY(20px);
    pointer-events: none;
    box-shadow: 0 0 5px #ffd200,
      0 0 10px #ffd200,
      0 0 15px #ffd200,
      0 0 20px #ffed4e,
      inset 0 0 5px rgba(255, 210, 0, 0.3),
      inset 0 2px 2px rgba(255, 255, 255, 0.2),
      inset 0 -2px 2px rgba(139, 69, 19, 0.1);
  }
  
  .openday-btn > * {
    transform: skew(15deg);
  }
  
  .openday-btn:hover {
    background: #ffd200;
    color: #333;
    border-color: #ffd200;
    transform: skew(-15deg) translateY(-2px) scale(1.05);
    box-shadow:
      0 0 8px #ffd200,
      0 0 15px #ffd200,
      0 0 25px #ffd200,
      0 0 35px #ffed4e,
      inset 0 0 8px rgba(255, 210, 0, 0.4),
      inset 0 3px 3px rgba(255, 255, 255, 0.3),
      inset 0 -3px 3px rgba(139, 69, 19, 0.2);
  }
  
  .openday-btn.visible {
    opacity: 1;
    transform: skew(-15deg) translateY(0) scale(1);
    pointer-events: auto;
    animation: fadeInScaleUp 0.5s ease-in-out;
  }

  .pdf-preview p {
    margin-bottom: 20px;
  }

  .signature {
    margin-top: 10px;
    margin-bottom: 20px;
  }

}

@keyframes fadeInScaleUpMobile {
  from {
    opacity: 0;
    transform: skew(-15deg) translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: skew(-15deg) translateY(0) scale(1);
  }
}

@keyframes fadeInFAB {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Letter Final Presentation */
.letter-final {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 8px;
  width: 60%;
  max-width: 600px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  z-index: 100;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Georgia', serif;
  line-height: 1.6;
  color: #333;
}

.letter-final::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../resources/crinkled-paper-texture.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.03;
  border-radius: 8px;
  pointer-events: none;
}

.letter-final.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.letter-final .signature {
  margin-top: 30px;
  text-align: right;
  font-size: 48px;
  color: #000;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 1;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  backdrop-filter: blur(5px);
  transition: display 0.3s;
}

.modal.visible {
    display: block;
}

@keyframes zoomIn {
  from {transform: translate(-50%, -50%) scale(0)}
  to {transform: translate(-50%, -50%) scale(1)}
}

.modal.visible .modal-content {
  animation: zoomIn 0.3s ease-out;
}

.modal-content {
  margin: auto;
  display: block;
  width: 90%;
  max-width: 80vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media (orientation: portrait) {
  #background-container {
    background-image: url('../resources/bg_nopanda_vertical.jpg');
  }
}

@media (orientation: landscape) {
  #background-container {
    background-image: url('../resources/bg_nopanda_horizontal.jpg');
  }
}

/* OpenDay Button Styles - Desktop */
@media (min-width: 769px) {
  .openday-btn {
    position: absolute;
    bottom: -80px;
    left: -50px;
    padding: 24px 48px;
    max-width: 280px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.9);
    border: 4px solid #ffd200;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transform: skew(-15deg);
    transition: all 0.4s ease;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
    z-index: 20;
    opacity: 0;
    transform: skew(-15deg) translateY(20px);
    pointer-events: none;
    box-shadow: 0 0 5px #ffd200,
      0 0 10px #ffd200,
      0 0 15px #ffd200,
      0 0 20px #ffed4e,
      inset 0 0 5px rgba(255, 210, 0, 0.3),
      inset 0 2px 2px rgba(255, 255, 255, 0.2),
      inset 0 -2px 2px rgba(139, 69, 19, 0.1);
  }

  .openday-btn > * {
    transform: skew(15deg);
  }

  .openday-btn.visible {
    opacity: 1;
    transform: skew(-15deg) translateY(0) scale(1);
    pointer-events: auto;
    animation: fadeInScaleUp 0.5s ease-in-out;
  }

  .openday-btn:hover {
    background: #ffd200;
    color: #333;
    border-color: #ffd200;
    transform: skew(-15deg) translateY(-2px) scale(1.05);
    box-shadow:
      0 0 8px #ffd200,
      0 0 15px #ffd200,
      0 0 25px #ffd200,
      0 0 35px #ffed4e,
      inset 0 0 8px rgba(255, 210, 0, 0.4),
      inset 0 3px 3px rgba(255, 255, 255, 0.3),
      inset 0 -3px 3px rgba(139, 69, 19, 0.2);
  }

  .openday-btn:active {
    transform: skew(-15deg) translateY(0) scale(1);
    box-shadow:
      0 0 5px #ffd200,
      0 0 10px #ffd200,
      0 0 15px #ffd200,
      0 0 20px #ffed4e,
      inset 0 0 5px rgba(255, 210, 0, 0.3),
      inset 0 2px 2px rgba(255, 255, 255, 0.2),
      inset 0 -2px 2px rgba(139, 69, 19, 0.1);
  }
}

/* Letter Concentration Overlay Styles */
.letter-envelope-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg) scale(0.85);
  width: 100vw;
  height: 100vh;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.letter-envelope-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  animation: fadeInLetter 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.letter-envelope-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
  animation: fadeOutOverlay 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.letter-envelope-overlay .envelope-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.letter-envelope-overlay .envelope-image {
  width: 80vw;
  max-width: 800px;
  min-width: 600px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  animation: envelopeBreathe 3s infinite ease-in-out;
  transition: all 0.6s ease;
}

.letter-envelope-overlay.opening .envelope-image {
  transform: scale(1.1);
  opacity: 0.8;
}

.letter-envelope-overlay .envelope-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-15deg);
  padding: 20px 50px;
  font-size: 24px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  border: 4px solid #ffd200;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.4s ease;
  z-index: 10;
  box-shadow:
    0 0 8px #ffd200,
    0 0 15px #ffd200,
    0 0 25px #ffd200,
    0 0 35px #ffed4e,
    inset 0 0 8px rgba(255, 210, 0, 0.3),
    inset 0 3px 3px rgba(255, 255, 255, 0.2),
    inset 0 -3px 3px rgba(139, 69, 19, 0.1);
}

.letter-envelope-overlay .envelope-btn:hover {
  background: #ffd200;
  color: #333;
  border-color: #ffd200;
  transform: translate(-50%, -50%) skew(-15deg) translateY(-3px) scale(1.05);
  box-shadow:
    0 0 12px #ffd200,
    0 0 20px #ffd200,
    0 0 30px #ffd200,
    0 0 40px #ffed4e,
    inset 0 0 10px rgba(255, 210, 0, 0.4),
    inset 0 4px 4px rgba(255, 255, 255, 0.3),
    inset 0 -4px 4px rgba(139, 69, 19, 0.2);
}

.letter-envelope-overlay .envelope-btn:active {
  transform: translate(-50%, -50%) skew(-15deg) scale(0.95);
  box-shadow:
    0 0 6px #ffd200,
    0 0 12px #ffd200,
    0 0 18px #ffd200,
    0 0 24px #ffed4e,
    inset 0 0 6px rgba(255, 210, 0, 0.3),
    inset 0 2px 2px rgba(255, 255, 255, 0.2),
    inset 0 -2px 2px rgba(139, 69, 19, 0.1);
}

.letter-envelope-overlay .envelope-btn > * {
  transform: skew(15deg);
}

@keyframes concentrationPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 10px #d8b4fe,
      0 0 20px #c896fa,
      0 0 30px #c896fa,
      0 0 40px #a855f7,
      inset 0 0 10px rgba(200, 150, 250, 0.3),
      inset 0 4px 4px rgba(255, 255, 255, 0.2),
      inset 0 -4px 4px rgba(139, 69, 19, 0.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      0 0 15px #d8b4fe,
      0 0 30px #c896fa,
      0 0 45px #c896fa,
      0 0 60px #a855f7,
      inset 0 0 15px rgba(200, 150, 250, 0.4),
      inset 0 4px 4px rgba(255, 255, 255, 0.3),
      inset 0 -4px 4px rgba(139, 69, 19, 0.15);
  }
}

@keyframes fadeOutOverlay {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes envelopeBreathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
  50% {
    transform: scale(1.01);
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.6));
  }
}

@keyframes envelopeToLetter {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
  30% {
    transform: scale(1.05) rotate(2deg);
    opacity: 0.8;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
  }
  70% {
    transform: scale(1.3) rotate(8deg);
    opacity: 0.2;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
  }
  100% {
    transform: scale(1.8) rotate(15deg);
    opacity: 0;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
  }
}

/* Mobile responsiveness for envelope overlay */
@media (max-width: 768px) {
  .letter-envelope-overlay .envelope-image {
    width: 95vw;
    min-width: 400px;
    max-width: 600px;
  }
  
  .letter-envelope-overlay .envelope-btn {
    padding: 16px 40px;
    font-size: 20px;
    transform: translate(-50%, -50%) skew(-15deg);
  }
  
  .letter-envelope-overlay .envelope-btn:hover {
    transform: translate(-50%, -50%) skew(-15deg) translateY(-2px) scale(1.03);
  }
  
  .letter-envelope-overlay .envelope-btn:active {
    transform: translate(-50%, -50%) skew(-15deg) scale(0.97);
  }
}

/* Final chat beat: Andy checks with the future self, then makes room for the letter. */
.chat-bubble-andy.future-self-check {
  border-color: #ffd200;
  box-shadow:
    0 0 8px #ffd200,
    0 0 20px rgba(255, 210, 0, 0.65),
    0 0 40px rgba(200, 150, 250, 0.38),
    inset 0 0 16px rgba(255, 210, 0, 0.12);
}

.chat-bubble-andy.future-self-check .andy-bubble-header {
  color: rgba(255, 232, 166, 0.92);
}

.chat-bubble-andy.future-self-departing {
  pointer-events: none;
  animation: futureSelfDeparture 0.72s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes futureSelfDeparture {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  55% {
    opacity: 0.82;
    transform: translateY(-18px) scale(0.96);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateY(-64px) scale(0.72);
    filter: blur(9px);
  }
}

/* The final letter is a distinct, readable postcard rather than a generic Markdown block. */
.pdf-preview {
  box-sizing: border-box;
  width: min(660px, calc(100vw - 36px));
  max-width: none;
  max-height: min(82vh, 780px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(34px, 5vw, 52px);
  border: 1px solid rgba(88, 59, 28, 0.22);
  border-radius: 2px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.88)),
    url('../resources/crinkled-paper-texture.jpg') center / cover;
  box-shadow: 8px 10px 0 rgba(74, 55, 36, 0.16), 0 22px 45px rgba(0, 0, 0, 0.28);
  color: #392f27;
  font-family: 'Proxima Nova', 'ProximaNova', Arial, sans-serif;
  cursor: default;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.pdf-preview.visible {
  /* The envelope controls when the paper becomes visible. */
  animation: none;
}

.pdf-preview::-webkit-scrollbar {
  display: none;
}

#pdfText,
#pdfText > div {
  position: relative;
  z-index: 1;
}

#pdfText p {
  margin: 0 0 16px;
  color: #392f27;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
}

#pdfText .letter-greeting {
  margin-bottom: 24px;
  color: #392f27;
  font-size: 18px;
  font-weight: 700;
}

#pdfText .letter-opening {
  font-size: 17px;
}

#pdfText .letter-steps-heading {
  margin: 28px 0 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(88, 59, 28, 0.28);
  color: #392f27;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

#pdfText .letter-steps {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: letter-step;
}

#pdfText .letter-step {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  column-gap: 0.25em;
  align-items: start;
  min-height: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  counter-increment: letter-step;
}

#pdfText .letter-step::before {
  content: counter(letter-step) '.';
  display: block;
  grid-column: 1;
  grid-row: 1;
  color: #392f27;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.62;
  text-align: right;
}

#pdfText .letter-step-content {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

#pdfText .letter-step-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
}

#pdfText .letter-step-content > :first-child {
  margin-top: 0;
}

#pdfText .letter-step-content > :last-child {
  margin-bottom: 0;
}

#pdfText .letter-step-content strong {
  display: inline;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
}

#pdfText .letter-next-step {
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #392f27;
  font-size: 16px;
  line-height: 1.7;
}

#pdfText .letter-signoff {
  margin-top: 26px;
  margin-bottom: 0;
  color: #4a3a2b;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
}

/* A completed letter replaces every chat element, rather than leaving boxes behind it. */
body.letter-mode #inputSection,
body.letter-mode #introDialogContainer,
body.letter-mode #skipDialogBtn,
body.letter-mode #thinkingIndicator,
body.letter-mode .admin-credits {
  opacity: 0 !important;
  pointer-events: none !important;
}

#pdfText a {
  color: #493773;
  font-family: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(73, 55, 115, 0.45);
  text-underline-offset: 3px;
}

.pdf-preview > .signature {
  position: relative !important;
  z-index: 1 !important;
  width: fit-content;
  margin: 18px 0 0 auto;
  padding: 0;
  background: transparent;
  color: #4a3a2b !important;
  font-size: 28px;
  line-height: 1;
}

/* The OpenDay action is a separate layer above the paper, never part of its content. */
body.letter-mode .letter-openday-btn {
  font-family: 'Proxima Nova', 'ProximaNova', Arial, sans-serif;
  font-weight: 700;
  z-index: 350;
}

@media (min-width: 769px) {
  #openday_btn_desktop.letter-openday-btn {
    position: fixed;
    right: auto;
    bottom: 28px;
    left: 50%;
    width: auto;
    max-width: calc(100vw - 48px);
    padding: 14px 28px;
    transform: translateX(-50%) translateY(18px);
  }

  #openday_btn_desktop.letter-openday-btn.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    animation: none;
  }

  #openday_btn_desktop.letter-openday-btn:hover {
    transform: translateX(-50%) translateY(-2px);
  }

  #openday_btn_desktop.letter-openday-btn:active {
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
}

/* Make the envelope arrive as a physical object after Andy's bubble vanishes. */
.letter-envelope-overlay {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  background: rgba(14, 8, 27, 0.42);
  backdrop-filter: blur(5px);
}

.letter-envelope-overlay.visible {
  animation: letterOverlayAppear 0.28s ease-out forwards;
}

.letter-envelope-overlay.arriving .envelope-image {
  animation: envelopeFlyIn 1.12s cubic-bezier(0.16, 0.9, 0.28, 1) forwards;
}

.letter-envelope-overlay.arriving .envelope-btn {
  opacity: 0;
  pointer-events: none;
}

.letter-envelope-overlay .envelope-image {
  width: min(68vw, 720px);
  max-width: calc(100vw - 52px);
  min-width: 0;
  animation: none;
}

.letter-envelope-overlay .envelope-btn {
  padding: 10px 22px;
  border: 1px solid #8f7554;
  border-radius: 2px;
  background: #f8f0dd;
  box-shadow: 0 2px 7px rgba(48, 31, 13, 0.24);
  color: #493a2c;
  font-family: 'Proxima Nova', 'ProximaNova', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  backdrop-filter: none;
  transform: translate(-50%, -50%);
}

.letter-envelope-overlay .envelope-btn:hover {
  background: #fff9eb;
  border-color: #69533b;
  box-shadow: 0 4px 10px rgba(48, 31, 13, 0.28);
  color: #392f27;
  transform: translate(-50%, calc(-50% - 2px));
}

.letter-envelope-overlay .envelope-btn:active {
  transform: translate(-50%, -50%) scale(0.98);
}

#bg-video.future-self-away {
  animation: pandaLeavesForFutureSelf 0.72s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes pandaLeavesForFutureSelf {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(6px);
  }
}

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

@keyframes envelopeFlyIn {
  0% {
    opacity: 0;
    transform: translate(72vw, -68vh) rotate(24deg) scale(0.2);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.14));
  }
  62% {
    opacity: 1;
    transform: translate(-3vw, 2vh) rotate(-5deg) scale(1.06);
    filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.48));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
}

@keyframes paperEnvelopeToLetter {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
  to {
    opacity: 0;
    transform: translateY(-28px) scale(1.03);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
  }
}

@media (max-width: 768px) {
  .pdf-preview {
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(100vw - 28px);
    max-height: 80vh;
    padding: 30px 22px 34px;
    transform: translate(-50%, -50%) scale(0.92);
  }

  #pdfText p,
  #pdfText .letter-opening {
    font-size: 16px;
  }

  #pdfText .letter-step {
    padding-left: 2px;
  }

  .letter-envelope-overlay .envelope-image {
    width: min(92vw, 520px);
    min-width: 0;
  }

  .letter-envelope-overlay .envelope-btn {
    padding: 9px 18px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .andy-reply-reveal {
    animation-delay: 0ms;
    animation-duration: 0.01ms;
  }

  .chat-bubble-andy.future-self-departing,
  .letter-envelope-overlay.arriving .envelope-image,
  .letter-envelope-overlay.arriving .envelope-container,
  .letter-envelope-overlay.visible,
  #bg-video.future-self-away {
    animation-duration: 0.01ms;
  }
}

/* Physical envelope opening: wax breaks, flap opens, pocket falls, letter rises. */
.letter-envelope-overlay.arriving .envelope-container {
  animation: envelopeAndSealFlyIn 1.12s cubic-bezier(0.16, 0.9, 0.28, 1) forwards;
}

.letter-envelope-overlay.arriving .envelope-image {
  animation: none;
}

.letter-envelope-overlay.arriving .envelope-btn {
  opacity: 1;
  pointer-events: none;
  animation: none;
}

.letter-envelope-overlay .envelope-assembly {
  position: relative;
  width: min(78vw, 720px);
  max-width: calc(100vw - 44px);
  z-index: 1;
}

.letter-envelope-overlay .envelope-assembly .envelope-image {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  transform-origin: 50% 50%;
}

.letter-envelope-overlay .envelope-flap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: perspective(900px) rotateX(0deg);
  transform-origin: 50% 17%;
  clip-path: polygon(5% 16%, 95% 16%, 50% 56%);
  z-index: 2;
}

.letter-envelope-overlay .envelope-btn {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(122px, 15vw, 158px);
  aspect-ratio: 1;
  min-width: 122px;
  min-height: 122px;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #6c3017;
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(-2deg);
  transition: filter 0.16s ease, opacity 0s linear;
  z-index: 5;
}

.letter-envelope-overlay .envelope-btn::before {
  display: none;
}

.letter-envelope-overlay .wax-seal-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(88, 38, 13, 0.22));
  pointer-events: none;
  z-index: 0;
}

.letter-envelope-overlay .wax-seal-label {
  position: relative;
  z-index: 1;
  width: 69%;
  color: rgba(91, 37, 14, 0.9);
  font-family: 'Alternate Gothic Stamp', 'Alternate Gothic', 'Alternate Gothic No. 1', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 0.94;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 -1px 0 rgba(255, 229, 202, 0.35),
    0 1px 0 rgba(106, 39, 11, 0.4);
  transform: scaleX(0.8);
}

.letter-envelope-overlay .envelope-btn:hover,
.letter-envelope-overlay .envelope-btn:focus-visible {
  color: #54240f;
  filter: brightness(0.96) saturate(1.05);
  outline: 2px solid rgba(255, 255, 255, 0.84);
  outline-offset: 5px;
  transform: translate(-50%, -50%) rotate(-2deg);
}

.letter-envelope-overlay .envelope-btn:active {
  transform: translate(-50%, -50%) rotate(-2deg);
}

.letter-envelope-overlay.opening .envelope-btn {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.letter-envelope-overlay.opening .envelope-flap {
  animation: envelopeFlapOpen 0.42s cubic-bezier(0.22, 0.7, 0.18, 1) forwards;
}

.letter-envelope-overlay.opening .envelope-assembly .envelope-image {
  animation: envelopePocketDrop 0.68s cubic-bezier(0.22, 0.72, 0.18, 1) forwards;
}

.pdf-preview.letter-revealing {
  transform-origin: 50% 100%;
  animation: letterUnfoldFromEnvelope 0.72s cubic-bezier(0.2, 0.82, 0.25, 1) forwards;
}

@media (max-width: 768px) {
  .letter-envelope-overlay .envelope-assembly {
    width: min(92vw, 520px);
  }

  .letter-envelope-overlay .envelope-btn {
    width: 122px;
    min-width: 122px;
    min-height: 122px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter-envelope-overlay.opening .envelope-flap,
  .letter-envelope-overlay.opening .envelope-assembly .envelope-image,
  .pdf-preview.letter-revealing {
    animation-duration: 0.01ms;
  }
}

@keyframes envelopeFlapOpen {
  0% {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
  }
  62% {
    opacity: 1;
    transform: perspective(900px) rotateX(-118deg) translateY(-12px);
  }
  100% {
    opacity: 0;
    transform: perspective(900px) rotateX(-165deg) translateY(-34px);
  }
}

@keyframes envelopePocketDrop {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
  24% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
  }
  100% {
    opacity: 0;
    transform: translateY(104px) rotate(2deg) scale(0.93);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
  }
}

@keyframes letterUnfoldFromEnvelope {
  0% {
    opacity: 0;
    clip-path: inset(0 0 76% 0);
    transform: translate(-50%, calc(-50% + 88px)) rotate(-4deg) scale(0.84);
  }
  44% {
    opacity: 1;
    clip-path: inset(0 0 17% 0);
    transform: translate(-50%, calc(-50% + 18px)) rotate(-1.4deg) scale(0.96);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) rotate(-0.6deg) scale(1);
  }
}

@keyframes envelopeAndSealFlyIn {
  0% {
    opacity: 0;
    transform: translate(72vw, -68vh) rotate(24deg) scale(0.2);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.14));
  }
  62% {
    opacity: 1;
    transform: translate(-3vw, 2vh) rotate(-5deg) scale(1.06);
    filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.48));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
}

/* Admin Credits */
.admin-credits {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-style: italic;
  z-index: 1000;
  max-width: 200px;
  text-align: right;
  line-height: 1.2;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  border-radius: 8px;
  backdrop-filter: blur(5px);
}

.admin-credits a {
  color: #ffd200;
  text-decoration: none;
}

@keyframes fadeInScaleUp {
  from {
    opacity: 0;
    transform: skew(-15deg) translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: skew(-15deg) translateY(0) scale(1);
  }
}

/* Path D uses the same light, conversational button language as the opening
   choices. Each set replaces the composer rather than becoming a menu. */
.input-container[hidden] {
  display: none !important;
}

.project-discovery {
  width: 100%;
  max-height: none;
  margin: 0 0 15px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.project-discovery-options,
.project-discovery-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
}

.project-discovery-actions {
  /* Separate selectable tag chips from the controls that advance the flow. */
  margin-top: 22px;
}

.project-discovery-options,
.project-discovery-actions,
.project-discovery-reset-link {
  transition: opacity 0.18s ease, transform 0.24s ease;
}

.project-discovery.is-transitioning .project-discovery-options,
.project-discovery.is-transitioning .project-discovery-actions,
.project-discovery.is-transitioning .project-discovery-reset-link,
.project-discovery.is-awaiting-reply .project-discovery-options,
.project-discovery.is-awaiting-reply .project-discovery-actions,
.project-discovery.is-awaiting-reply .project-discovery-reset-link {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.97);
}

.bubble-flyer.project-selection-flyer {
  border-color: #ffd200;
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    0 0 5px #ffd200,
    0 0 10px rgba(255, 210, 0, 0.7),
    inset 0 0 5px rgba(255, 210, 0, 0.15);
}

@keyframes projectDiscoveryButtonIn {
  from {
    opacity: 0;
    transform: skew(-15deg) translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: skew(-15deg) translateY(0) scale(1);
  }
}

.project-discovery .project-filter-option.project-filter-option-entering {
  animation: projectDiscoveryButtonIn 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) var(--project-option-delay, 120ms) both;
}

.project-discovery-actions.project-discovery-actions-entering {
  animation: projectDiscoveryActionsIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) var(--project-actions-delay, 160ms) both;
}

@keyframes projectDiscoveryActionsIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.project-discovery .prompt-btn {
  min-height: 0;
  margin: 1px 2px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 210, 0, 0.6);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
  box-shadow:
    0 0 3px rgba(255, 210, 0, 0.4),
    0 0 6px rgba(255, 210, 0, 0.2),
    inset 0 0 2px rgba(255, 255, 255, 0.2);
}

.project-discovery .prompt-btn.is-selected,
.project-discovery .project-discovery-explore {
  border-color: #ffd200;
  background: #ffd200;
  color: #333;
  font-weight: 600;
  box-shadow:
    0 0 4px #ffd200,
    0 0 8px #ffd200,
    0 0 12px #ffd200,
    0 0 16px #ffed4e,
    inset 0 0 4px rgba(255, 210, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(139, 69, 19, 0.2);
}

.project-discovery .prompt-btn:hover:not(:disabled),
.project-discovery .prompt-btn:focus-visible:not(:disabled) {
  border-color: #ffd200;
  background: #ffd200;
  color: #333;
  outline: none;
  transform: skew(-8deg) translateY(-1px);
}

.project-discovery .prompt-btn:disabled {
  border-color: rgba(128, 128, 128, 0.35);
  background: rgba(128, 128, 128, 0.12);
  color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
  cursor: not-allowed;
}

.project-discovery-reset-link {
  display: block;
  margin: 8px auto 0;
  padding: 3px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.56);
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.project-discovery-reset-link:hover,
.project-discovery-reset-link:focus-visible {
  border-bottom-color: #ffd200;
  color: #ffd200;
  outline: none;
}

@media (max-width: 768px) {
  .project-discovery {
    max-height: none;
    margin-bottom: 10px;
  }

  .project-discovery-options,
  .project-discovery-actions {
    padding: 0 4px;
  }

  .project-discovery .prompt-btn {
    flex: 0 1 auto;
    font-size: 15px;
  }
}

/* Mobile is a compact vertical composition: the composer stays intact, the
   choices have their own scroll space, and the attribution never covers them. */
@media (max-width: 768px) {
  .input-section {
    width: calc(100vw - 24px);
    max-width: 620px;
    bottom: 48px;
    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px - env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }

  .chat-messages {
    gap: 8px;
    padding: 18px 10px 6px;
  }

  .chat-input-wrapper {
    padding: 6px 2px 0;
  }

  .input-container {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: stretch;
    gap: 8px;
    margin-bottom: 10px;
  }

  .input-container.action-mode {
    gap: 0;
  }

  textarea#userInput {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.35;
  }

  .generate-btn {
    flex: 0 0 auto;
    min-width: 94px;
    min-height: 54px;
    padding: 10px 14px;
    font-size: 16px;
  }

  .chat-bubble-user {
    max-width: 88%;
    padding: 10px 14px;
    font-size: 15px;
  }

  .chat-bubble-andy {
    max-width: 92%;
    padding: 14px 16px;
  }

  .help-text {
    margin: 3px 0 8px;
    font-size: 14px;
  }

  .prompt-buttons {
    max-height: 300px;
    max-height: min(34dvh, 300px);
    /* Mobile turns this into a scroller; leave room for the buttons' glow. */
    padding: 20px 18px;
    gap: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .prompt-buttons::-webkit-scrollbar {
    display: none;
  }

  .prompt-buttons .prompt-btn {
    max-width: 100%;
    padding: 7px 12px;
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
  }

  .admin-credits {
    right: auto;
    bottom: 6px;
    bottom: max(6px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    z-index: 8;
    max-width: calc(100vw - 24px);
    padding: 5px 9px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    transform: translateX(-50%);
  }
}

/* The seal acts like a physical seal: it stays completely still until it is
   pressed, then disappears immediately. Earlier generic button rules must not
   make it glow, move, or show a browser tap highlight. */
.letter-envelope-overlay .envelope-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  transition: opacity 0s linear;
}

.letter-envelope-overlay .envelope-btn:hover,
.letter-envelope-overlay .envelope-btn:focus,
.letter-envelope-overlay .envelope-btn:focus-visible,
.letter-envelope-overlay .envelope-btn:active {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #6c3017;
  filter: none;
  outline: none;
  transform: translate(-50%, -50%) rotate(-2deg);
}

/* A simple physical sequence: flap lifts, the bottom pocket drops, and the
   letter rises only once there is room for it. */
.letter-envelope-overlay.opening .envelope-flap {
  animation: envelopeFlapOpen 0.46s cubic-bezier(0.22, 0.7, 0.18, 1) forwards;
}

.letter-envelope-overlay.opening .envelope-assembly .envelope-image {
  animation: envelopePocketDrop 0.74s cubic-bezier(0.22, 0.72, 0.18, 1) 0.1s forwards;
}

.pdf-preview.letter-revealing {
  --letter-rise: 82px;
  animation: letterUnfoldFromEnvelope 0.78s cubic-bezier(0.2, 0.82, 0.25, 1) forwards;
}

.letter-envelope-overlay.fade-out {
  animation: letterOverlayExit 0.34s ease-out forwards;
}

@keyframes envelopeFlapOpen {
  0% {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
  }
  64% {
    opacity: 1;
    transform: perspective(900px) rotateX(-120deg) translateY(-7px);
  }
  100% {
    opacity: 0;
    transform: perspective(900px) rotateX(-150deg) translateY(-18px);
  }
}

@keyframes envelopePocketDrop {
  0%, 16% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
  48% {
    opacity: 1;
    transform: translateY(12px) rotate(0.5deg) scale(0.99);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
    filter: drop-shadow(0 15px 28px rgba(0, 0, 0, 0.3));
  }
  100% {
    opacity: 0;
    transform: translateY(94px) rotate(1.5deg) scale(0.94);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
  }
}

@keyframes letterUnfoldFromEnvelope {
  0% {
    opacity: 0;
    clip-path: inset(0 0 84% 0);
    transform: translate(-50%, calc(-50% + var(--letter-rise))) rotate(-3deg) scale(0.9);
  }
  38% {
    opacity: 1;
    clip-path: inset(0 0 40% 0);
    transform: translate(-50%, calc(-50% + 24px)) rotate(-1.3deg) scale(0.97);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) rotate(-0.6deg) scale(1);
  }
}

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

@media (max-width: 768px) {
  .letter-envelope-overlay .envelope-assembly {
    width: min(92vw, 500px);
  }

  .letter-envelope-overlay .envelope-btn {
    width: clamp(100px, 27vw, 118px);
    min-width: 0;
    min-height: 0;
  }

  .pdf-preview.letter-revealing {
    --letter-rise: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter-envelope-overlay.opening .envelope-flap,
  .letter-envelope-overlay.opening .envelope-assembly .envelope-image,
  .pdf-preview.letter-revealing,
  .letter-envelope-overlay.fade-out {
    animation-delay: 0ms;
    animation-duration: 0.01ms;
  }
}

/* Final letter choreography: a folded sheet first peeks out of the envelope,
   the envelope falls away, then that sheet becomes the full letter. Keeping
   every paper surface on the same small angle makes the grid and text feel
   like one physical page. */
.pdf-preview {
  transform: translate(-50%, -50%) rotate(-1.35deg) scale(0.94);
  transform-origin: 50% 50%;
}

.letter-envelope-overlay .envelope-assembly {
  isolation: isolate;
}

.letter-envelope-overlay .envelope-folded-letter {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 1;
  width: 48%;
  height: 25%;
  overflow: hidden;
  border: 1px solid rgba(112, 101, 84, 0.28);
  border-radius: 1px;
  opacity: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.77)),
    url('../resources/crinkled-paper-texture.jpg') center / cover;
  box-shadow: 0 9px 16px rgba(48, 35, 22, 0.2);
  transform: translate(-50%, 46px) rotate(-1.35deg) scale(0.94);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.letter-envelope-overlay .envelope-folded-letter::before,
.letter-envelope-overlay .envelope-folded-letter::after {
  position: absolute;
  right: 0;
  left: 0;
  content: '';
  pointer-events: none;
}

.letter-envelope-overlay .envelope-folded-letter::before {
  top: 49%;
  height: 1px;
  background: rgba(89, 79, 63, 0.22);
  box-shadow: 0 1px rgba(255, 255, 255, 0.72);
}

.letter-envelope-overlay .envelope-folded-letter::after {
  top: 24%;
  height: 1px;
  background: rgba(89, 79, 63, 0.13);
  box-shadow: 0 1px rgba(255, 255, 255, 0.6), 0 52px rgba(89, 79, 63, 0.13), 0 53px rgba(255, 255, 255, 0.6);
}

.letter-envelope-overlay .envelope-assembly .envelope-image {
  position: relative;
  z-index: 2;
}

.letter-envelope-overlay .envelope-flap {
  z-index: 3;
  transform-origin: 50% 17%;
}

.letter-envelope-overlay.opening .envelope-flap {
  animation: envelopeFlapTucksAway 0.38s cubic-bezier(0.22, 0.72, 0.2, 1) forwards;
}

.letter-envelope-overlay.opening .envelope-folded-letter {
  animation: foldedLetterSlidesOut 1.18s cubic-bezier(0.2, 0.82, 0.25, 1) 0.08s both;
}

.letter-envelope-overlay.opening .envelope-assembly .envelope-image {
  animation: envelopePocketFallsAway 0.86s cubic-bezier(0.22, 0.72, 0.18, 1) 0.28s both;
}

.pdf-preview.letter-revealing {
  --letter-rise: 64px;
  z-index: 250;
  transform-origin: 50% 100%;
  animation: letterUnfoldAfterEnvelope 0.54s cubic-bezier(0.2, 0.82, 0.25, 1) forwards;
}

.pdf-preview.letter-revealing #pdfText,
.pdf-preview.letter-revealing > .signature {
  opacity: 0;
  animation: letterContentsAppear 0.22s ease-out 0.18s forwards;
}

.pdf-preview.letter-revealing::after {
  position: absolute;
  top: 49.5%;
  right: 7%;
  left: 7%;
  z-index: 2;
  height: 1px;
  content: '';
  pointer-events: none;
  background: rgba(82, 70, 54, 0.24);
  box-shadow: 0 1px rgba(255, 255, 255, 0.72);
  opacity: 0;
  animation: letterFoldCrease 0.54s ease-out forwards;
}

.letter-envelope-overlay.fade-out {
  animation: letterOverlayExit 0.38s ease-out forwards;
}

@keyframes envelopeFlapTucksAway {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  58% {
    opacity: 0.84;
    transform: translateY(-2px) scaleY(0.42);
  }
  100% {
    opacity: 0;
    transform: translateY(-5px) scaleY(0.06);
  }
}

@keyframes foldedLetterSlidesOut {
  0% {
    opacity: 0;
    transform: translate(-50%, 46px) rotate(-1.35deg) scale(0.94);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, 22px) rotate(-1.35deg) scale(0.96);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -60px) rotate(-1.35deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -82px) rotate(-1.35deg) scale(1);
  }
}

@keyframes envelopePocketFallsAway {
  0%, 25% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
  43% {
    opacity: 1;
    transform: translateY(4px) rotate(0.35deg) scale(0.995);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
    filter: drop-shadow(0 15px 28px rgba(0, 0, 0, 0.28));
  }
  100% {
    opacity: 0;
    transform: translateY(128px) rotate(1.5deg) scale(0.94);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
  }
}

@keyframes letterUnfoldAfterEnvelope {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + var(--letter-rise))) rotate(-1.35deg) scale(0.88);
  }
  16% {
    opacity: 1;
  }
  62% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 12px)) rotate(-1.35deg) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-1.35deg) scale(1);
  }
}

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

@keyframes letterFoldCrease {
  0%, 28% { opacity: 0.45; }
  100% { opacity: 0; }
}

/* This button is deliberately a separate layer, but is anchored to the
   paper's measured lower edge by JavaScript so it slightly overlaps it. */
body.letter-mode #openday_btn_desktop.letter-openday-btn,
body.letter-mode #openday_btn.letter-openday-btn {
  position: fixed;
  right: auto;
  bottom: auto;
  z-index: 350;
  transform: translate(-50%, -50%) rotate(-1.35deg) translateY(18px);
  transform-origin: 50% 50%;
}

body.letter-mode #openday_btn_desktop.letter-openday-btn.visible,
body.letter-mode #openday_btn.letter-openday-btn.visible {
  opacity: 1;
  pointer-events: auto;
  animation: none;
  transform: translate(-50%, -50%) rotate(-1.35deg);
}

body.letter-mode #openday_btn_desktop.letter-openday-btn:hover,
body.letter-mode #openday_btn.letter-openday-btn:hover {
  transform: translate(-50%, calc(-50% - 2px)) rotate(-1.35deg);
}

body.letter-mode #openday_btn_desktop.letter-openday-btn:active,
body.letter-mode #openday_btn.letter-openday-btn:active {
  transform: translate(-50%, -50%) rotate(-1.35deg) scale(0.98);
}

@media (max-width: 768px) {
  .pdf-preview.letter-revealing {
    --letter-rise: 78px;
  }

  body.letter-mode #openday_btn.letter-openday-btn {
    width: min(calc(100vw - 40px), 420px);
    max-width: none;
    padding: 12px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter-envelope-overlay.opening .envelope-flap,
  .letter-envelope-overlay.opening .envelope-folded-letter,
  .letter-envelope-overlay.opening .envelope-assembly .envelope-image,
  .pdf-preview.letter-revealing,
  .pdf-preview.letter-revealing #pdfText,
  .pdf-preview.letter-revealing > .signature,
  .pdf-preview.letter-revealing::after,
  .letter-envelope-overlay.fade-out {
    animation-delay: 0ms;
    animation-duration: 0.01ms;
  }
}

/* Give the reveal real depth without a separate 3D runtime. The motion stays
   intentionally small: it should feel like paper moving in the hand, not a
   dramatic card flip. */
.letter-envelope-overlay .envelope-assembly {
  perspective: 1400px;
  transform-style: preserve-3d;
}

.letter-envelope-overlay .envelope-flap {
  backface-visibility: hidden;
  transform: translateZ(2px) rotateX(0deg);
}

.letter-envelope-overlay .envelope-folded-letter {
  backface-visibility: hidden;
  top: 24%;
  width: 62%;
  height: 48%;
  transform: translate(-50%, 34px) rotate(-1.35deg) rotateX(15deg) translateZ(-18px) scale(0.98);
}

.letter-envelope-overlay.opening .envelope-flap {
  animation: envelopeFlapFoldsUp3d 0.48s cubic-bezier(0.22, 0.72, 0.2, 1) forwards;
}

.letter-envelope-overlay.opening .envelope-folded-letter {
  animation: foldedLetterWaitsInside3d 1.02s cubic-bezier(0.2, 0.82, 0.25, 1) 0.08s both;
}

.letter-envelope-overlay.opening .envelope-assembly .envelope-image {
  animation: envelopePocketDrops3d 0.92s cubic-bezier(0.22, 0.72, 0.18, 1) 0.14s both;
}

.pdf-preview.letter-revealing {
  /* `both` applies the first keyframe before the first composited frame.
     Without it Chromium and Firefox briefly paint the full white sheet before
     the reveal animation starts. */
  animation: letterUnfoldFromHalf3d 0.74s cubic-bezier(0.2, 0.82, 0.25, 1) both;
  backface-visibility: hidden;
  will-change: clip-path, opacity, transform;
}

.pdf-preview.letter-revealing #pdfText,
.pdf-preview.letter-revealing > .signature {
  animation-delay: 0.46s;
}

.pdf-preview.letter-revealing::after {
  animation-name: letterHalfFoldCrease;
  animation-duration: 0.74s;
}

@keyframes envelopeFlapFoldsUp3d {
  0% {
    opacity: 1;
    transform: translateZ(2px) rotateX(0deg);
  }
  72% {
    opacity: 0.96;
    transform: translateY(-6px) translateZ(12px) rotateX(-72deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) translateZ(8px) rotateX(-112deg);
  }
}

@keyframes foldedLetterWaitsInside3d {
  0% {
    opacity: 0;
    transform: translate(-50%, 34px) rotate(-1.35deg) rotateX(15deg) translateZ(-30px) scale(0.98);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, 18px) rotate(-1.35deg) rotateX(11deg) translateZ(-12px) scale(0.99);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -20px) rotate(-1.35deg) rotateX(5deg) translateZ(10px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -24px) rotate(-1.35deg) rotateX(2deg) translateZ(12px) scale(1);
  }
}

@keyframes envelopePocketDrops3d {
  0%, 14% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) rotateX(0deg) translateZ(0) scale(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }
  28% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) rotateX(0deg) translateZ(0) scale(1);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.36));
  }
  100% {
    opacity: 0;
    transform: translateY(148px) rotate(1.5deg) rotateX(14deg) translateZ(-32px) scale(0.94);
    clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
  }
}

@keyframes letterUnfoldFromHalf3d {
  0% {
    opacity: 0;
    clip-path: inset(0 0 58% 0);
    transform: perspective(1500px) translate(-50%, calc(-50% + var(--letter-rise))) rotate(-1.35deg) rotateX(11deg) rotateY(-2.5deg) scale(0.68, 0.5);
  }
  16% {
    opacity: 1;
    clip-path: inset(0 0 58% 0);
  }
  60% {
    opacity: 1;
    clip-path: inset(0 0 18% 0);
    transform: perspective(1500px) translate(-50%, calc(-50% + 28px)) rotate(-1.35deg) rotateX(4deg) rotateY(-0.8deg) scale(0.86, 0.75);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: perspective(1500px) translate(-50%, -50%) rotate(-1.35deg) rotateX(0deg) rotateY(0deg) scale(1);
  }
}

@keyframes letterHalfFoldCrease {
  0%, 50% { opacity: 0.58; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .letter-envelope-overlay.opening .envelope-flap,
  .letter-envelope-overlay.opening .envelope-folded-letter,
  .letter-envelope-overlay.opening .envelope-assembly .envelope-image,
  .pdf-preview.letter-revealing,
  .pdf-preview.letter-revealing #pdfText,
  .pdf-preview.letter-revealing > .signature,
  .pdf-preview.letter-revealing::after {
    animation-delay: 0ms;
    animation-duration: 0.01ms;
  }
}

/* The envelope is four real layers: folding flap, front pocket, rear wall and
   the final letter itself. The source artwork is clipped into the flap and
   pocket, so a second closed flap can never remain underneath the moving one. */
.letter-envelope-overlay.opening {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.letter-envelope-overlay .envelope-assembly {
  isolation: isolate;
  perspective: none;
  transform-style: flat;
}

.letter-envelope-overlay .envelope-back {
  position: absolute;
  top: 17%;
  left: 5%;
  z-index: 1;
  width: 90%;
  height: 39%;
  border: 0;
  background:
    linear-gradient(180deg, rgba(91, 73, 48, 0.16), transparent 24%),
    radial-gradient(ellipse at 50% 18%, #f9f6ef 0%, #eee8dc 72%);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.72),
    inset 0 14px 24px rgba(92, 73, 47, 0.08);
}

.letter-envelope-overlay .envelope-assembly .envelope-front {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  opacity: 1;
  clip-path: polygon(5% 49%, 50% 56%, 95% 49%, 95% 85%, 5% 85%);
  filter: none;
  transform: none;
}

.letter-envelope-overlay .envelope-flap {
  display: block;
  z-index: 4;
  opacity: 1;
  backface-visibility: visible;
  clip-path: polygon(5% 17%, 95% 17%, 50% 56%);
  transform: scaleY(1);
  transform-origin: 50% 17%;
  will-change: opacity, transform;
}

.letter-envelope-overlay.opening .envelope-flap {
  animation: envelopeFlapOpensLayered 1.68s cubic-bezier(0.22, 0.72, 0.2, 1) both;
}

.letter-envelope-overlay.opening .envelope-assembly .envelope-front {
  animation: envelopeFrontLeaves 0.42s cubic-bezier(0.22, 0.72, 0.18, 1) 1.25s both;
}

.letter-envelope-overlay.opening .envelope-back {
  animation: envelopeBackLeaves 0.38s cubic-bezier(0.22, 0.72, 0.18, 1) 1.29s both;
}

.letter-envelope-overlay.opening .envelope-assembly > .pdf-preview {
  pointer-events: none;
}

.pdf-preview.letter-revealing {
  animation: letterRisesFromEnvelope 1.08s cubic-bezier(0.2, 0.82, 0.25, 1) both;
  clip-path: none;
  transform-origin: 50% 50%;
}

.pdf-preview.letter-revealing #pdfText,
.pdf-preview.letter-revealing > .signature {
  animation-delay: 0.48s;
}

.pdf-preview.letter-revealing::after {
  display: none;
}

@keyframes envelopeFlapOpensLayered {
  0% {
    z-index: 4;
    opacity: 1;
    transform: scaleY(1);
  }
  15% {
    z-index: 4;
    opacity: 1;
    transform: scaleY(0.035);
  }
  16% {
    z-index: 0;
    opacity: 1;
    transform: scaleY(-0.035);
  }
  32%, 76% {
    z-index: 0;
    opacity: 1;
    transform: scaleY(-1);
  }
  100% {
    z-index: 0;
    opacity: 0;
    transform: translateY(118px) scale(0.96, -0.96);
  }
}

@keyframes envelopeFrontLeaves {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  55% {
    opacity: 1;
    transform: translateY(38px) rotate(0.5deg) scale(0.99);
  }
  100% {
    opacity: 0;
    transform: translateY(130px) rotate(1.4deg) scale(0.95);
  }
}

@keyframes envelopeBackLeaves {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(108px) rotate(-0.7deg) scale(0.96);
  }
}

@keyframes letterRisesFromEnvelope {
  0% {
    opacity: 0;
    clip-path: inset(0 0 60% 0);
    transform: translate(-50%, calc(-50% + 158px)) rotate(-1.35deg) scale(0.7, 0.48);
  }
  12% {
    opacity: 1;
    clip-path: inset(0 0 60% 0);
    transform: translate(-50%, calc(-50% + 142px)) rotate(-1.35deg) scale(0.72, 0.5);
  }
  52% {
    opacity: 1;
    clip-path: inset(0 0 30% 0);
    transform: translate(-50%, calc(-50% + 48px)) rotate(-1.35deg) scale(0.86, 0.74);
  }
  80% {
    opacity: 1;
    clip-path: inset(0 0 20% 0);
    transform: translate(-50%, calc(-50% + 10px)) rotate(-1.35deg) scale(0.98);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -50%) rotate(-1.35deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter-envelope-overlay.opening .envelope-flap,
  .letter-envelope-overlay.opening .envelope-assembly .envelope-front,
  .letter-envelope-overlay.opening .envelope-back,
  .pdf-preview.letter-revealing {
    animation-delay: 0ms;
    animation-duration: 0.01ms;
  }
}