/* 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: var(--pw-bg, #ffffff);
	--tb-border: var(--pw-border-2, #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; }

/* --- PW Dark Mode ---
   In dark mode the bubble becomes a dark panel (PW Dark Mode's card
   palette). The colors are set on .tb-bubble itself, not .tb-box, so they
   beat both the saved appearance settings and any per-shortcode colors
   (which land on .tb-box) — every bubble goes dark. The tail and
   think-dots read the same variables, so they follow. Links keep PW Dark
   Mode's own treatment (bright text, dim dotted underline, accent hover). */

html[data-pw-theme="dark"] .tb-bubble {
	--tb-bg: var(--pw-panel, #24282d);     /* --pw-panel */
	--tb-border: var(--pw-border-2, #3a3f46); /* --pw-border-2 */
	--tb-text: var(--pw-text, #cfd2d6);   /* --pw-text */
}

/* Avatars flagged "Invert" on the settings screen (logos on a light tile,
   e.g. the Capitol): light-on-dark, with the bubble's radius and border.
   invert + hue-rotate(180deg) flips lightness but keeps the hue, so navy
   becomes light blue rather than orange. Never applied to photos. */

html[data-pw-theme="dark"] .tb-avatar-img.tb-dark-invert {
	filter: invert(1) hue-rotate(180deg) brightness(1.15);
	/* The filter inverts the border as well: #c5cad0 renders as the
	   bubble's own #3a3f46. */
	border: 1px solid #c5cad0;
}

html[data-pw-theme="dark"] .tb-avatar-img.tb-dark-invert:not(.tb-round) {
	border-radius: 10px;
}