/* ── Tailwind handles 95% of the styling.
   This file only covers animations and things
   Tailwind CDN can't express natively.
   ──────────────────────────────────────────── */

/* Message bubble entry animation */
.message {
  animation: msg-in 0.2s ease both;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Typing dots stagger — Tailwind can't set animation-delay inline without JIT */
#typingIndicator span:nth-child(2) { animation-delay: 200ms; }
#typingIndicator span:nth-child(3) { animation-delay: 400ms; }

/* Voice button recording pulse */
#voiceButton.recording {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  animation: pulse-ring 1.4s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Peer-checked thumb inside TTS toggle */
.peer:checked ~ div > div { transform: translateX(16px); }

/* Thin scrollbar for WebKit */
#messages::-webkit-scrollbar       { width: 4px; }
#messages::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* ── QR Code Scanner Custom Styles ── */
#qrReader, #qrReader * {
  box-sizing: border-box;
}
#qrReader {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}
#qrReader > div {
  width: 100% !important;
  height: 100% !important;
}
#qrReader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px;
}

/* laser scan animation line */
@keyframes scan-laser {
  0% { top: 0%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scan-laser-line {
  animation: scan-laser 2.2s linear infinite;
}