/* länk Q2 Signal Experiments — shared design tokens
 * Source of truth: decisions/chat-post-apply-preview.html
 * Brand: violet-600 (#7c3aed). Surface: gray-50/100. Phone frame: rounded-[2.5rem] / border-[8px] gray-900.
 */

/* --- Animations -------------------------------------------------- */
@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}
.dot-1 { animation: bounce-dot 1.4s infinite ease-in-out; }
.dot-2 { animation: bounce-dot 1.4s infinite ease-in-out 0.2s; }
.dot-3 { animation: bounce-dot 1.4s infinite ease-in-out 0.4s; }

@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.slide-up { animation: slideUp 0.3s ease-out; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

@keyframes pulseRing {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
.pulse-ring { animation: pulseRing 1.5s infinite; }

@keyframes wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.wave-bar { animation: wave 0.9s ease-in-out infinite; transform-origin: center; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }
.wave-bar:nth-child(6) { animation-delay: 0.5s; }
.wave-bar:nth-child(7) { animation-delay: 0.6s; }

/* --- Page chrome ------------------------------------------------- */
body { background: #f3f4f6; margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Inline copy editor (E key) ---------------------------------- */
.edit-hotzone {
  position: fixed; top: 0; left: 0; width: 80px; height: 80px; z-index: 10000; cursor: pointer;
}
.edit-toggle {
  position: fixed; top: 12px; left: 12px;
  background: #1f2937; border: 1px solid #374151; color: #9ca3af;
  padding: 5px 12px; border-radius: 6px; font-family: system-ui, sans-serif;
  font-size: 12px; cursor: pointer; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s ease; z-index: 10001;
}
.edit-toggle.show, .edit-toggle.active { opacity: 1; pointer-events: auto; }
.edit-toggle.active { background: #7c3aed; color: white; border-color: #7c3aed; }
.edit-toggle:hover { background: #374151; }
.edit-toggle.active:hover { background: #6d28d9; }
[contenteditable="true"] { outline: 1px dashed rgba(124, 58, 237, 0.4); outline-offset: 2px; border-radius: 4px; cursor: text; }
[contenteditable="true"]:focus { outline-color: #7c3aed; }

/* --- Tiny experiment-meta badge (top-right of phone) ------------- */
.exp-badge {
  position: fixed; top: 12px; right: 12px;
  background: rgba(31, 41, 55, 0.92); color: #e5e7eb;
  padding: 6px 10px; border-radius: 6px;
  font: 11px/1.3 ui-sans-serif, system-ui, sans-serif;
  z-index: 9999; pointer-events: none;
  letter-spacing: 0.02em;
}
.exp-badge b { color: #c4b5fd; font-weight: 600; }