/* Thought Bubbles — front-end styles.
   Visuals match Word Balloon's "talk" and "think" skins (size S/M/L,
   side avatar). Colors and bubble radius come from custom properties;
   the saved appearance settings are emitted as inline CSS on .tb-box. */

.tb-box {
	--tb-bg: #ffffff;
	--tb-border: #dddddd;
	--tb-text: #222222;
	--tb-bubble-radius: 10px;

	display: flex;
	align-items: flex-start;
	width: 100%;
	margin: 20px 0;
}

.tb-box, .tb-box *, .tb-box *::before, .tb-box *::after {
	box-sizing: border-box;
}

.tb-box.tb-R { justify-content: flex-end; }

/* --- Avatar --- */

.tb-avatar { flex: none; text-align: center; }

.tb-avatar-img {
	display: block;
	object-fit: cover;
	margin: 0;
	max-width: 100%;
}

.tb-avatar-img.tb-round { border-radius: 50%; }

.tb-name {
	font-size: 10px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

/* --- Bubble --- */

.tb-bubble {
	position: relative;
	padding: 10px;
	min-height: 45px;
	border: 1px solid var(--tb-border);
	background: var(--tb-bg);
	color: var(--tb-text);
	border-radius: var(--tb-bubble-radius);
	word-break: break-word;
	overflow-wrap: break-word;
}

.tb-bubble p { margin: 0; }

.tb-ta-C { text-align: center; }
.tb-ta-R { text-align: right; }

.tb-R .tb-bubble { margin-right: 10px; }
.tb-L .tb-bubble { margin-left: 10px; }

/* Drop the bubble so its tail meets the avatar (avatar height / 2.5,
   same offset Word Balloon used). */
.tb-size-S .tb-bubble { margin-top: 25px; }
.tb-size-M .tb-bubble { margin-top: 38px; }
.tb-size-L .tb-bubble { margin-top: 51px; }

.tb-bubble::before,
.tb-bubble::after {
	content: "";
	position: absolute;
}

/* --- Talk balloon (pointed tail) --- */

.tb-talk.tb-R .tb-bubble::before {
	top: 18px;
	right: -12px;
	border: 6px solid transparent;
	border-top-color: var(--tb-border);
	border-left-color: var(--tb-border);
}

.tb-talk.tb-R .tb-bubble::after {
	top: 19px;
	right: -10px;
	border: 5px solid transparent;
	border-top-color: var(--tb-bg);
	border-left-color: var(--tb-bg);
}

.tb-talk.tb-L .tb-bubble::before {
	top: 18px;
	left: -12px;
	border: 6px solid transparent;
	border-top-color: var(--tb-border);
	border-right-color: var(--tb-border);
}

.tb-talk.tb-L .tb-bubble::after {
	top: 19px;
	left: -10px;
	border: 5px solid transparent;
	border-top-color: var(--tb-bg);
	border-right-color: var(--tb-bg);
}

/* --- Think bubble (trailing dots) --- */

.tb-think .tb-bubble {
	padding: 15px;
	border-radius: 34px;
}

.tb-think .tb-bubble::before {
	width: 18px;
	height: 12px;
	bottom: -10px;
	border-radius: 50%;
	border: 1px solid var(--tb-border);
	background: var(--tb-bg);
}

.tb-think .tb-bubble::after {
	width: 12px;
	height: 8px;
	bottom: -17px;
	border-radius: 50%;
	border: 1px solid var(--tb-border);
	background: var(--tb-bg);
}

.tb-think.tb-R .tb-bubble::before { right: 45px; }
.tb-think.tb-R .tb-bubble::after  { right: 35px; }
.tb-think.tb-L .tb-bubble::before { left: 45px; }
.tb-think.tb-L .tb-bubble::after  { left: 35px; }