/* Story Studio Plush - bubble look chosen by the teacher: colours, text size, bold / italic words, free tail. */

/* text size XS..XL scales the words, not the name on top */
.tsp-bubble[data-size] .tsp-bubble-text { font-size: calc(var(--tsp-bscale, 1) * 1em); }

/* bold and italic words; the bubble text is already bold, so bold goes a step further */
.tsp-bubble-text .tsp-mark-b,
.tsp-bubble-text strong { font-weight: 900; }
/* a shouted bubble is already at the heaviest weight: bold words get a thin outline to stand out */
.tsp-bubble--shout .tsp-bubble-text .tsp-mark-b { -webkit-text-stroke: 0.07em currentColor; paint-order: stroke fill; letter-spacing: 0.03em; }
.tsp-bubble-text .tsp-mark-i,
.tsp-bubble-text em { font-style: italic; }
.tsp-bubble-thought .tsp-bubble-text .tsp-mark-i,
.tsp-bubble--thought .tsp-bubble-text .tsp-mark-i { font-style: normal; } /* a thought is already slanted: its emphasised words stand upright, as in print */

/* the teacher's text colour: words not yet read are paler, as with the built-in colours */
.tsp-bubble.has-fg .tsp-bubble-name { color: inherit; }
.tsp-bubble.has-fg .tsp-word:not(.tsp-vocab) { color: var(--tsp-bfg); opacity: 0.6; }
.tsp-bubble.has-fg .tsp-word.is-spoken:not(.tsp-vocab) { opacity: 1; }
/* with nothing left for "captions off" to hide, its button is not shown */
.tsp-ctl.tsp-ctl-captions { display: none; }

/* the teacher's bubble colour on a thought's trailing dots */
.tsp-bubble.has-bg .tsp-thought-dot { background: var(--tsp-bbg); }

/* outline colour a free tail copies */
.tsp-bubble--whisper { --tsp-tail-stroke: #8f9cd0; }
.tsp-bubble-thought, .tsp-bubble--thought { --tsp-tail-stroke: #c9d4ff; }

/* a tail whose tip was dragged onto the speaker replaces the built-in arrow / dots */
.tsp-tail-svg {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	filter: drop-shadow(0 0.2em 0 rgba(35, 48, 90, 0.08));
}
.tsp-bubble.has-free-tail::after,
.tsp-bubble.has-free-tail .tsp-thought-dot { display: none; }

/* ------------------------------------------------------------------- block editor: "Bubble look" */

.tsp-f-bubble-look { display: flex; flex-direction: column; gap: 10px; }
.tsp-f-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tsp-f-swatch {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid #dfe3ee;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: transform 0.12s;
}
.tsp-f-swatch:hover { transform: scale(1.1); }
.tsp-f-swatch.is-on { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tone, #3e64de); }
.tsp-f-swatch.is-auto { background: linear-gradient(135deg, #fff 44%, #e0463c 44%, #e0463c 56%, #fff 56%); }
.tsp-f-swatch:focus-visible { outline: 3px solid rgba(62, 100, 222, 0.45); outline-offset: 2px; }
.tsp-f-swatch-pick { width: 34px; height: 28px; padding: 0; border: 1px solid #ccd; border-radius: 6px; background: #fff; cursor: pointer; }
.tsp-f-swatch-pick.is-on { box-shadow: 0 0 0 2px var(--tone, #3e64de); }
.tsp-f-sizes .tsp-f-chip { min-width: 40px; justify-content: center; }
.tsp-f-bubble-tail,
.tsp-f-bubble-marks { align-items: center; gap: 10px; }

/* scene title with its "Show on screen" switch beside it */
.tsp-f-title-row { display: flex; align-items: center; gap: 14px; }
.tsp-f-title-row .tsp-b-input { flex: 1 1 auto; min-width: 0; }
.tsp-f-title-row .tsp-b-check { flex: 0 0 auto; white-space: nowrap; font-size: 13px; }

/* ---------------------------------------------------------------- highlighted words (2.44) */
/* the teacher's text colour must not hide a coloured highlight */
.tsp-bubble.has-fg .tsp-word.tsp-hl-color:not(.tsp-vocab) { color: var(--tsp-hl); }
.tsp-bubble-text .tsp-word.tsp-hl-b.tsp-hl-b { font-weight: 900; }
/* marker pen behind the words (the spread closes most of the gap between the words of a phrase) */
.tsp-word.tsp-hl-marker,
.tsp-f-chip[data-hl="marker"] > span {
	background: color-mix(in srgb, var(--tsp-hl) 34%, transparent);
	box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--tsp-hl) 34%, transparent);
	border-radius: 0.18em;
}
.tsp-word.tsp-hl-marker.is-spoken { background: color-mix(in srgb, var(--tsp-hl) 45%, transparent); box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--tsp-hl) 45%, transparent); }
/* thick coloured underline */
.tsp-word.tsp-hl-underline,
.tsp-f-chip[data-hl="underline"] > span {
	text-decoration-line: underline;
	text-decoration-color: var(--tsp-hl);
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.2em;
	text-decoration-skip-ink: none;
}
/* a ring around the words */
.tsp-word.tsp-hl-circle,
.tsp-f-chip[data-hl="circle"] > span {
	outline: 0.12em solid var(--tsp-hl);
	outline-offset: 0.08em;
	border-radius: 0.9em;
	padding: 0 0.12em;
}
.tsp-f-chip[data-hl="color"] > span { color: var(--tsp-hl); font-weight: 800; }
/* pops up once as it is read */
.tsp-word.tsp-hl-pop { display: inline-block; transform-origin: 50% 70%; position: relative; }
.tsp-word.tsp-hl-pop.is-current { z-index: 1; }
.tsp-word.tsp-hl-pop.is-current { animation: tsp-hl-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes tsp-hl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28) rotate(-3deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tsp-word.tsp-hl-pop.is-current { animation: none; } }

/* ---------------------------------------------------------------- text style (2.44): font, capitals, spacing, effect */
[data-tfont="rounded"] .tsp-bubble-text, .tsp-f-chip[data-tfont="rounded"] { font-family: "Nunito", "Varela Round", "Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", sans-serif; }
[data-tfont="comic"] .tsp-bubble-text, .tsp-f-chip[data-tfont="comic"] { font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", "Comic Relief", cursive; }
[data-tfont="print"] .tsp-bubble-text, .tsp-f-chip[data-tfont="print"] { font-family: "Andika", "Lexend", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif; }
[data-tfont="hand"] .tsp-bubble-text, .tsp-f-chip[data-tfont="hand"] { font-family: "Patrick Hand", "Bradley Hand", "Segoe Print", "Noteworthy", cursive; }
[data-tfont="serif"] .tsp-bubble-text, .tsp-f-chip[data-tfont="serif"] { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
[data-tfont="mono"] .tsp-bubble-text, .tsp-f-chip[data-tfont="mono"] { font-family: "Courier New", ui-monospace, Menlo, monospace; }

[data-tcase="upper"] .tsp-bubble-text, .tsp-f-chip[data-tcase="upper"] { text-transform: uppercase; }
[data-tcase="lower"] .tsp-bubble-text, .tsp-f-chip[data-tcase="lower"] { text-transform: lowercase; }
[data-tcase="title"] .tsp-bubble-text, .tsp-f-chip[data-tcase="title"] { text-transform: capitalize; }

[data-talign="left"] .tsp-bubble-text { text-align: left; }
[data-talign="center"] .tsp-bubble-text { text-align: center; }
[data-talign="right"] .tsp-bubble-text { text-align: right; }

[data-tspacing="tight"] .tsp-bubble-text, .tsp-f-chip[data-tspacing="tight"] { letter-spacing: -0.02em; }
[data-tspacing="wide"] .tsp-bubble-text, .tsp-f-chip[data-tspacing="wide"] { letter-spacing: 0.06em; }
[data-tspacing="wider"] .tsp-bubble-text, .tsp-f-chip[data-tspacing="wider"] { letter-spacing: 0.14em; }

[data-tleading="tight"] .tsp-bubble-text { line-height: 1.08; }
[data-tleading="loose"] .tsp-bubble-text { line-height: 1.7; }

[data-tweight="normal"] .tsp-bubble-text, .tsp-f-chip[data-tweight="normal"] { font-weight: 500; }
[data-tweight="bold"] .tsp-bubble-text, .tsp-f-chip[data-tweight="bold"] { font-weight: 900; }
.has-t-italic .tsp-bubble-text { font-style: italic; }
.has-t-under .tsp-bubble-text .tsp-word { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }

[data-teffect="shadow"] .tsp-bubble-text, .tsp-f-chip[data-teffect="shadow"] { text-shadow: 0.05em 0.07em 0 rgba(0, 0, 0, 0.28); }
[data-teffect="outline"] .tsp-bubble-text, .tsp-f-chip[data-teffect="outline"] { -webkit-text-stroke: 0.1em #fff; paint-order: stroke fill; text-shadow: 0 0.05em 0.14em rgba(0, 0, 0, 0.45); }
[data-teffect="glow"] .tsp-bubble-text, .tsp-f-chip[data-teffect="glow"] { text-shadow: 0 0 0.25em #ffe066, 0 0 0.55em #ffd43b; }

/* ---------------------------------------------------------------- editor: highlight rows, text style, sample */
.tsp-f-hl-actions { flex-wrap: wrap; align-items: center; gap: 6px; }
.tsp-f-hl-msg { color: #b54708; }
.tsp-f-hl-card { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 8px; border: 1px solid #e3e6f0; border-radius: 8px; background: #fafbff; box-sizing: border-box; }
.tsp-f-hl-opts { flex-wrap: wrap; align-items: center; gap: 10px; }
.tsp-f-hl-opts .tsp-b-check { font-size: 13px; white-space: nowrap; }
.tsp-f-hl-sample { margin: 8px 0 2px; padding: 10px 14px; border: 1px dashed #c9d0e6; border-radius: 14px; background: #fff; color: #23305a; font-size: 17px; font-weight: 700; line-height: 1.35; }
.tsp-f-hl-sample .tsp-word, .tsp-f-hl-sample .tsp-word.is-spoken { color: #23305a; opacity: 1; }
.tsp-f-hl-sample .tsp-word.tsp-hl-color { color: var(--tsp-hl); }
.tsp-f-text-style .tsp-f-tchips { flex-wrap: wrap; }
.tsp-f-tfonts .tsp-f-chip { font-size: 14px; }
.tsp-f-tweight { flex-wrap: wrap; align-items: center; gap: 12px; }
.tsp-f-tweight .tsp-b-check { font-size: 13px; }
.tsp-f-chip[data-teffect="outline"] { -webkit-text-stroke: 0.06em #fff; }
.tsp-f-tfold .tsp-f-text-style { margin: 10px 0 6px; }