/**
 * SpeechBubble — Web styles
 *
 * Source of truth: shared-components/src/SpeechBubble/speechBubbleStyles.ts
 * This file is updated automatically by `npm run sync:styles` and copied to
 * app/static/css/speech-bubble-react.css by `npm run build:islands`.
 *
 * DO NOT edit font/size/color values here directly — edit speechBubbleStyles.ts
 * and run `npm run sync:styles` to propagate changes.
 *
 * Character name colors are set dynamically in JS via utils/characterColor.ts
 * (same algorithm as speech-bubble-renderer.js _getCharacterColor).
 */

/* ── Shared bubble surface ────────────────────────────────────────────────── */

.speech-bubble-v2 {
  background-color: rgba(255, 255, 255, 0.92);
  /* Border sides are set selectively per-bubble by speech-bubble-renderer.js (2px solid #000).
     border-color is set here so selective sides pick it up without repeating the value. */
  border-color: rgba(0, 0, 0, 0.7);
  border-style: solid;
  border-width: 0;        /* renderer overrides individual sides via inline style */
  border-radius: 16px;
  padding: 12px 20px;
  min-width: 80px;
  min-height: 40px;
}

/* ── Narration bubble surface ─────────────────────────────────────────────── */

.speech-bubble-v2.narration,
.speech-bubble-v2.spoken[data-character="narration"] {
  background-color: rgb(253, 220, 117);
  padding: 10px 10px 25px;
}

/* ── Character name label ─────────────────────────────────────────────────── */

.speech-bubble-character {
  font-family: 'ShantellSans-SemiBoldItalic';
  font-size: 16px;
  line-height: 19px;
  font-weight: normal;
  font-style: normal;
  margin-bottom: 5px;
  display: block;
  text-transform: uppercase;
  /* Color is set dynamically per character in JS (utils/characterColor.ts) */
}

/* ── Dialogue text ────────────────────────────────────────────────────────── */

.speech-bubble-text {
  /* Self-hosted: same font name on both web and native — see typography.ts dialogue */
  font-family: 'ShantellSans-Regular';
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.speech-bubble-text p {
  margin: 0 0 0.5em 0;
}

.speech-bubble-text p:last-child {
  margin-bottom: 0;
}

.speech-bubble-text strong {
  font-weight: 700;
}

.speech-bubble-text em {
  font-style: italic;
}