/* apps/tinkyspeak/public/css/talk-about.css
 *
 * Styles for the "Talk about…" feature (2026-05-28).
 *
 * Scope:
 *   • #talkAboutTopbarBtn — the topbar pill (already gets baseline
 *     topbar-btn / topbar-btn-outline styles from builder.css; this
 *     adds the conversational-bubble accent + listening-state pulse).
 *   • #talkAboutModal — the topic-entry modal overlay + card.
 *   • body.talk-about-listening — set by talk-about.js while the
 *     spoken-traversal loop is active. Visually indicates listening.
 *
 * Inline styles inside the modal markup cover the basic layout so
 * the modal works even if this stylesheet 404s; the rules here are
 * progressive enhancement.
 *
 * LABEL: PILOT-READY.
 */

/* ── Topbar pill ──────────────────────────────────────────────── */
#talkAboutTopbarBtn {
  /* Soft tint so the pill reads as a "creative" affordance distinct
   * from the heavier blue Push to Devices pill. */
  background: linear-gradient(135deg, #f8f9ff 0%, #eef2ff 100%);
  border-color: #c7d2fe;
  color: #3730a3;
  position: relative;
}
#talkAboutTopbarBtn:hover {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #a5b4fc;
}
#talkAboutTopbarBtn:focus-visible {
  outline: 3px solid #6366f1;
  outline-offset: 2px;
}

/* While the spoken-traversal loop is listening, surface a subtle
 * pulsing dot on the pill so the user knows we're hot. */
body.talk-about-listening #talkAboutTopbarBtn::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: talk-about-pulse 1.2s ease-in-out infinite;
}
@keyframes talk-about-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* ── Modal overlay + card progressive enhancement ────────────── */
/* The modal markup ships its own inline styles for layout (so it
 * works without this file). These rules layer brand polish on top.
 * Class .talk-about-card is added to the inner card; .talk-about-modal
 * to the overlay. */
.talk-about-modal {
  /* Smooth fade-in once .open is added by buildModal/open(). */
  transition: opacity 160ms ease;
}
.talk-about-card {
  /* Subtle pop-in to feel responsive. */
  animation: talk-about-card-in 200ms ease;
}
@keyframes talk-about-card-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* Input focus ring matches the brand pill. */
.talk-about-card #talkAboutInput:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* Generate button polish — keeps the inline blue but adds a hover
 * and disabled state so the loading copy reads correctly. */
.talk-about-card #talkAboutSubmit:hover:not(:disabled) {
  background: #3b7ddb;
}
.talk-about-card #talkAboutSubmit:disabled {
  background: #94a3b8;
  cursor: progress;
}
.talk-about-card #talkAboutCancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Error text pop — reuse the brand red. */
.talk-about-card #talkAboutError {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  margin-top: 0.5rem;
}

/* Listen-after checkbox row a touch more inviting. */
.talk-about-card label[for="talkAboutListenAfter"] {
  /* No-op selector — exists so the inline label inherits cursor:pointer
   * even when global typography rules reset the cursor. */
  cursor: pointer;
}

/* ── Mobile / iPad polish ─────────────────────────────────────── */
@media (max-width: 640px) {
  .talk-about-card {
    /* Snap to safe viewport. */
    max-width: 96vw;
    padding: 1.1rem;
  }
  .talk-about-card #talkAboutInput {
    font-size: 1rem; /* prevents iOS auto-zoom on focus */
  }
}

/* High-contrast / reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .talk-about-card,
  body.talk-about-listening #talkAboutTopbarBtn::after {
    animation: none;
  }
}