/* ==========================================================================
   tinkytown-demo Bilateral Translator Panel — translate-panel.css
   --------------------------------------------------------------------------
   Companion to js/translate-panel.js. Provides the kiosk-side CSS variables
   the ported HTML expects (--surface, --header-color, --border, --text-muted)
   scoped to #kioskOverlayPanel so they don't bleed into the rest of the demo.
   Also ports the .mt-bubble entry animation, the .mt-translating-dots, and
   the Tent Mode split layout — verbatim from TinkySpeak-Web/css/kiosk.css.
   ========================================================================== */

/* Overlay panel theme — light surface so the bubbles + bordered inputs read
   correctly. Demo's body is dark-themed; this scoped override flips the
   panel light without touching anything outside it. */
#kioskOverlayPanel {
  --surface: #ffffff;
  --surface-alt: #f7f7f9;
  --header-color: #2C7BE5;
  --text-muted: rgba(0, 0, 0, 0.55);
  --border: rgba(0, 0, 0, 0.12);
  /* --f-sans is already defined in the demo's :root; this just provides a
     fallback if the panel ever loads before the main stylesheet. */
  --f-sans: 'General Sans', system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
}
/* Inputs / selects inside the panel — match the kiosk look (white inputs,
   subtle border). Demo's global form styling targets dark theme; reset here. */
#kioskOverlayPanel input[type="text"],
#kioskOverlayPanel input[type="url"],
#kioskOverlayPanel input[type="email"],
#kioskOverlayPanel select {
  background: #fff;
  color: #1a1a1a;
}
#kioskOverlayPanel select { appearance: auto; }

/* ── Bubble entry animation (kiosk-translate.js creates .mt-bubble inline-
   styled; this layers animation on via the class hook.) ── */
@keyframes mtBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mt-bubble {
  animation: mtBubbleIn 0.22s ease-out;
}

/* Stick-to-bottom + scroll-up trick: first bubble takes margin-top:auto so
   transcripts hug the bottom when short and become scrollable when long.
   Same fix as the kiosk (Chrome/Safari flexbox+overflow bug). */
#mtTranscript > .mt-bubble:first-child,
#mtTentTop  > .mt-bubble:first-child,
#mtTentBottom > .mt-bubble:first-child {
  margin-top: auto;
}

/* ── "Translating…" dots ── */
@keyframes mtTranslatingPulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-1px); }
}
.mt-translating-dots {
  display: inline-flex;
  gap: 3px;
  margin: 0 4px;
  align-items: center;
}
.mt-translating-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: mtTranslatingPulse 1.05s ease-in-out infinite;
}
.mt-translating-dots span:nth-child(2) { animation-delay: 0.16s; }
.mt-translating-dots span:nth-child(3) { animation-delay: 0.32s; }

/* ── Tent Mode (face-to-face split translator) ── */
.mt-tent-half {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
}
#mtTentTop {
  transform: rotate(180deg);
  border-bottom: 2px dashed var(--border);
  background: rgba(232, 163, 61, 0.04);
}
#mtTentTop .mt-bubble {
  transform: rotate(0deg);
}
#mtTentBottom {
  background: rgba(74, 144, 217, 0.03);
}
#mtTentTop:empty::before {
  content: '⛺ Top — for person across the table';
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.6;
  padding: 1rem;
  transform: rotate(180deg);
}
#mtTentBottom:empty::before {
  content: '⛺ Bottom — your side';
  display: block;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  opacity: 0.6;
  padding: 1rem;
}

/* The overlay sits on top of the demo's bottom nav (z-index 50 vs nav 60).
   That's intentional — the kiosk's overlay does the same so the floating
   nav stays visible while the panel content scrolls. The contentDiv inside
   already reserves padding-bottom for the nav. */

@media (prefers-reduced-motion: reduce) {
  .mt-bubble { animation: none; }
  .mt-translating-dots span { animation: none; }
}