/* อาตาริ โกะ (Atari Go) — front-end game styles.
 * Mobile-first layout, widened for desktop under the 1024px block at
 * the bottom (same responsiveness pattern as the sibling
 * thai-checkers-game / phom-sib-game / uno-game plugins in this
 * folder). Board theme: light-brown wood, standard black/white
 * stones, per the requested look. */

.agg-bg-layer {
	position: fixed;
	inset: 0;
	z-index: -1;
}

/* Static design tokens also declared at :root (identical values to the
 * .agg-app block below) so the customize-panel overlay -- appended
 * straight to <body> by game.js's openCustomize(), a sibling of
 * #agg-app rather than a descendant -- still resolves the same card/
 * border/ink colours instead of falling back to CSS's own initial
 * values. --agg-text (the admin-configurable outside-box text colour)
 * is set here too, as a fallback; AGG_Background::layer_html() also
 * writes the live value straight into :root via an inline <style>, so
 * it's correct even before this stylesheet finishes loading. */
:root {
	--agg-ink: #2c2418;
	--agg-card-bg: #fffdf8;
	--agg-card-border: #e6d6b3;
	--agg-accent: #8a6a2f;
	--agg-wood-dark: #b98a3f;
	--agg-text: #2c2418;
}

@font-face {
	font-family: 'Digital-Dismay';
	src: url('../fonts/Digital-Dismay.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

#agg-app,
#agg-app *:not(h1, h2, h3, h4, h5, p) {
	font-family: 'db', 'SF Thonburi', 'Sarabun', sans-serif !important;
	font-weight: normal !important;
}

.agg-app {
	--agg-wood: #dcb876;
	--agg-wood-dark: #b98a3f;
	--agg-wood-line: #7a5726;
	--agg-accent: #8a6a2f;
	--agg-ink: #2c2418;
	--agg-card-bg: #fffdf8;
	--agg-card-border: #e6d6b3;
	--agg-black-stone-1: #5c5c5c;
	--agg-black-stone-2: #0a0a0a;
	--agg-white-stone-1: #ffffff;
	--agg-white-stone-2: #cfc6b2;

	max-width: 520px;
	margin: 0 auto;
	padding: 16px 14px 40px;
	/* Outside-box text colour (admin-configurable, see class-agg-
	 * background.php's text_color()) -- falls back to the fixed ink
	 * tone if it's somehow unset. Elements that sit on their own white
	 * card/button background pin their own colour back to --agg-ink
	 * explicitly further down, so this only ever reaches text that's
	 * directly on the page background. */
	color: var(--agg-text, var(--agg-ink));
	box-sizing: border-box;
}
.agg-app *,
.agg-app *::before,
.agg-app *::after {
	box-sizing: border-box;
}

.agg-loading {
	text-align: center;
	padding: 60px 0;
	opacity: 0.7;
}

/* ---------- Generic building blocks ---------- */

.agg-card {
	background: var(--agg-card-bg);
	border: 1px solid var(--agg-card-border);
	border-radius: 16px;
	padding: 18px 16px;
	margin-bottom: 14px;
	box-shadow: 0 3px 10px rgba(90, 60, 10, 0.08);
}

/* No card frame around the play-again/back-home buttons on the game-
 * over screen -- just the buttons themselves, sitting loose on the
 * page. */
.agg-card.agg-card-bare {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

.agg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	border: none;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	background: linear-gradient(180deg, #c99a4e, var(--agg-wood-dark));
	color: #fff;
	text-decoration: none;
	box-shadow: 0 3px 0 #8a6222, 0 4px 10px rgba(90, 60, 10, 0.25);
	transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
	margin-bottom: 10px;
	box-sizing: border-box;
}
.agg-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.agg-btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 1px 0 #8a6222, 0 2px 6px rgba(90, 60, 10, 0.2); }
.agg-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }

.agg-btn.agg-btn-ghost {
	background: #fff;
	color: var(--agg-accent);
	border: 1.5px solid var(--agg-card-border);
	box-shadow: none;
}
.agg-btn.agg-btn-ghost:active { transform: translateY(1px) scale(0.98); }

.agg-btn.agg-btn-danger {
	background: linear-gradient(180deg, #e0715f, #b8412e);
	box-shadow: 0 3px 0 #8a2c1c, 0 4px 10px rgba(90, 30, 10, 0.25);
}

.agg-btn-row { display: flex; gap: 10px; }
.agg-btn-row .agg-btn { margin-bottom: 0; }

.agg-mode-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--agg-card-border);
	border-radius: 14px;
	padding: 11px 16px;
	margin-bottom: 12px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.agg-mode-btn:hover { border-color: var(--agg-wood-dark); box-shadow: 0 4px 12px rgba(90, 60, 10, 0.12); transform: translateY(-1px); }
.agg-mode-btn:active { transform: translateY(1px); }
.agg-mode-icon {
	width: 46px; height: 46px; border-radius: 50%; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: #ffffff; color: var(--agg-accent);
	border: 1px solid var(--agg-card-border);
	box-shadow: 0 2px 6px rgba(90, 60, 10, 0.10);
}
.agg-mode-icon svg { width: 24px; height: 24px; }

/* Mode-select icons (2026-09-30): white line icon on a diagonal
 * (top-left -> bottom-right) gradient disc, same in all card games.
 * vs computer = blue-green, same device = yellow-orange, online = pink-purple. */
.agg-mode-icon.agg-mode-icon--computer, .agg-mode-icon.agg-mode-icon--phone, .agg-mode-icon.agg-mode-icon--globe { color: #ffffff; border-color: transparent; }
.agg-mode-icon.agg-mode-icon--computer { background: linear-gradient(135deg, #29b6f6 0%, #12c98b 100%); box-shadow: 0 3px 8px rgba(18,201,139,.35); }
.agg-mode-icon.agg-mode-icon--phone { background: linear-gradient(135deg, #ffd23f 0%, #ff8a1f 100%); box-shadow: 0 3px 8px rgba(255,138,31,.35); }
.agg-mode-icon.agg-mode-icon--globe { background: linear-gradient(135deg, #ff5fa2 0%, #8b5cf6 100%); box-shadow: 0 3px 8px rgba(139,92,246,.35); }
.agg-mode-text strong { display: block; font-size: 15.5px; color: var(--agg-ink); }
.agg-mode-text span { display: block; font-size: 12.5px; opacity: 0.65; margin-top: 2px; color: var(--agg-ink); }

.agg-field { margin-bottom: 14px; }
/* Fixed ink, not --agg-text: these labels always sit inside a white
 * .agg-card, so they stay legible whatever the outside-box colour is
 * set to. */
.agg-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; opacity: 0.85; color: var(--agg-ink); }
.agg-field input[type="text"] {
	width: 100%;
	padding: 11px 13px;
	border-radius: 10px;
	border: 1.5px solid var(--agg-card-border);
	font-size: 15px;
	background: #fff;
	/* Fixed ink, not --agg-text (2026-09-28 fix): this input had no
	 * explicit color, so it inherited #agg-app's --agg-text (the
	 * admin-configurable outside-box text colour) — when that's set to
	 * white for a dark page background, typed text became invisible
	 * against this field's own always-white background. Always dark,
	 * regardless of the admin setting, same reasoning as the label
	 * above and every other white-card text in this file. */
	color: var(--agg-ink);
}
.agg-field input[type="text"]:focus { outline: none; border-color: var(--agg-wood-dark); }

.agg-choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.agg-choice {
	flex: 1 1 auto;
	min-width: 78px;
	text-align: center;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1.5px solid var(--agg-card-border);
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	/* Fixed ink, not --agg-text: white box (2026-09-27 outside-text-
	 * colour follow-up). */
	color: var(--agg-ink);
}
.agg-choice.is-selected { border-color: var(--agg-wood-dark); background: #fbeed2; color: var(--agg-accent); }
.agg-choice-hint { font-size: 12px; opacity: 0.6; margin-top: 8px; color: var(--agg-ink); }

/* Setup/menu/lobby screens only (not the table/game-over screen,
 * .agg-table, which keeps its own layout): user-requested (2026-09-27)
 * — move the back link to the very bottom of the pre-game setup
 * screens and restyle it as a snug white pill (width fits its own
 * text) with normal ink text and rounded corners, instead of the
 * plain-text link sitting above the form. Flex column + order, not a
 * markup change, since .agg-back-link and .agg-card are siblings
 * inside .agg-screen (see wrap() in game.js). */
.agg-screen:not(.agg-table) {
	display: flex;
	flex-direction: column;
}
.agg-screen:not(.agg-table) > .agg-back-link {
	order: 2;
	align-self: flex-start;
}
.agg-back-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #ffffff;
	border: 1.5px solid var(--agg-card-border);
	border-radius: 999px;
	/* Fixed ink, not --agg-text: this is now a white pill button with
	 * its own background, so it stays legible regardless of the
	 * outside-box text colour setting. */
	color: var(--agg-ink);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 10px 18px;
	margin-top: 16px;
	box-shadow: 0 3px 10px rgba(90, 60, 10, 0.08);
}

/* ---------- Home screen ---------- */

.agg-home { text-align: center; }
.agg-logo { width: 88px; height: auto; margin: 8px auto 10px; display: block; }
.agg-title { font-size: 25px; font-weight: 400; margin: 0 0 4px; }
.agg-subtitle { font-size: 13.5px; opacity: 0.65; margin: 0 0 22px; line-height: 1.5; }

/* ---------- Lobby (online: room code / waiting) ---------- */

.agg-room-code {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: 6px;
	text-align: center;
	padding: 16px 0;
	color: var(--agg-accent);
}
.agg-lobby-hint { text-align: center; font-size: 13px; opacity: 0.7; margin-bottom: 14px; }
/* Fixed ink, not --agg-text: the "share this code" / "waiting for
 * player" hints inside the lobby's white .agg-card. The same class is
 * also used once on the bare (no card) game-over "waiting for host"
 * screen -- that one has no white box behind it, so it's deliberately
 * left to inherit the outside-box colour instead. */
.agg-card:not(.agg-card-bare) .agg-lobby-hint { color: var(--agg-ink); }
.agg-spinner {
	width: 26px; height: 26px; margin: 4px auto 14px;
	border: 3px solid var(--agg-card-border);
	border-top-color: var(--agg-wood-dark);
	border-radius: 50%;
	animation: agg-spin 0.9s linear infinite;
}
@keyframes agg-spin { to { transform: rotate(360deg); } }

/* ---------- Table (in-game) layout ---------- */

.agg-table { }

.agg-players-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.agg-player-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1.5px solid var(--agg-card-border);
	border-radius: 14px;
	padding: 9px 12px;
	flex: 1 1 0;
	min-width: 0;
}
.agg-player-chip.is-turn { border-color: var(--agg-wood-dark); box-shadow: 0 0 0 3px rgba(185, 138, 63, 0.18); }
.agg-player-chip.is-white .agg-player-chip-name { text-align: right; }
.agg-player-chip.is-white { flex-direction: row-reverse; }

.agg-stone-avatar {
	width: 30px; height: 30px; border-radius: 50%; flex: none;
	box-shadow: inset -2px -3px 4px rgba(0,0,0,0.25), inset 2px 3px 3px rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.3);
}
.agg-stone-avatar.black { background: radial-gradient(circle at 32% 28%, var(--agg-black-stone-1), var(--agg-black-stone-2)); }
.agg-stone-avatar.white { background: radial-gradient(circle at 32% 28%, var(--agg-white-stone-1), var(--agg-white-stone-2)); }

/* Fixed ink, not --agg-text: player chips are always a white box. */
.agg-player-chip-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--agg-ink); }
.agg-player-chip-caps { font-size: 11.5px; opacity: 0.65; color: var(--agg-ink); }

#agg-app .agg-timer-digital {
	flex: none;
	font-family: 'Digital-Dismay', monospace !important;
	background: #fff;
	color: #b8412e;
	font-size: 20px;
	letter-spacing: 1px;
	font-variant-numeric: tabular-nums;
	border: 1.5px solid var(--agg-card-border);
	border-radius: 12px;
	padding: 8px 10px;
	min-width: 46px;
	text-align: center;
}
.agg-timer-digital.is-low { font-weight: 800; }

/* ---------- Board ---------- */

.agg-board-wrap { margin: 0 auto 12px; }

.agg-board {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at 30% 20%, var(--agg-wood), var(--agg-wood-dark) 85%);
	border-radius: 10px;
	box-shadow: inset 0 0 0 3px #8a6222, 0 6px 16px rgba(60, 40, 10, 0.3);
	overflow: hidden;
}
.agg-board-lines { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.agg-board-grid {
	position: absolute;
	inset: 0;
	display: grid;
}

.agg-point {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.agg-point:hover .agg-ghost-stone { opacity: 0.45; }
.agg-point.is-disabled { cursor: default; }
.agg-point.is-disabled .agg-ghost-stone { display: none; }
.agg-point.is-ko::after {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	border: 2px solid #c0392b;
	opacity: 0.75;
	pointer-events: none;
}

.agg-stone, .agg-ghost-stone {
	width: 82%;
	height: 82%;
	border-radius: 50%;
	position: relative;
}
.agg-stone.black {
	background: radial-gradient(circle at 32% 26%, var(--agg-black-stone-1), var(--agg-black-stone-2) 70%);
	box-shadow: inset -2px -3px 5px rgba(0,0,0,0.35), inset 2px 3px 4px rgba(255,255,255,0.2), 0 2px 3px rgba(0,0,0,0.4);
}
.agg-stone.white {
	background: radial-gradient(circle at 32% 26%, var(--agg-white-stone-1), var(--agg-white-stone-2) 75%);
	box-shadow: inset -2px -3px 5px rgba(0,0,0,0.15), inset 2px 3px 4px rgba(255,255,255,0.6), 0 2px 3px rgba(0,0,0,0.35);
}
.agg-ghost-stone {
	opacity: 0;
	transition: opacity 0.1s ease;
}
.agg-ghost-stone.black { background: rgba(20,20,20,0.55); }
.agg-ghost-stone.white { background: rgba(255,255,255,0.75); }

.agg-last-move-mark {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 26%;
	height: 26%;
}
.agg-last-move-mark.on-black { background: #f3f3f3; }
.agg-last-move-mark.on-white { background: #1c1c1c; }

/* Circle marking exactly which point(s) a capture happened at — the
   "answer key" for the previous move, shown on the now-empty
   intersection(s) it vacated (works the same whether 1 stone or a
   whole group of 2-3+ was taken, at any win target). */
.agg-capture-mark {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	border: 3px solid #e8590c;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.3);
	opacity: 0.92;
	pointer-events: none;
	animation: agg-capture-pulse 1.4s ease-in-out infinite;
}
@keyframes agg-capture-pulse {
	0%, 100% { transform: scale(1); opacity: 0.92; }
	50% { transform: scale(1.12); opacity: 0.55; }
}

/* ---------- Footer controls ---------- */

.agg-footer-controls {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}
.agg-footer-controls .agg-btn { margin-bottom: 0; flex: 1 1 0; }

.agg-move-log {
	text-align: center;
	font-size: 12px;
	opacity: 0.6;
	margin-top: 8px;
	min-height: 16px;
}

/* ---------- Game over ---------- */

/* Fixed ink, not --agg-text: the game-over summary sits inside a white
 * .agg-card. */
.agg-result-emoji { font-size: 44px; text-align: center; margin-bottom: 4px; }
.agg-result-title { font-size: 21px; font-weight: 800; text-align: center; margin: 0 0 4px; color: var(--agg-ink); }
.agg-result-reason { font-size: 13.5px; text-align: center; opacity: 0.65; margin-bottom: 6px; color: var(--agg-ink); }
.agg-result-score {
	display: flex;
	justify-content: center;
	gap: 26px;
	margin: 14px 0 18px;
}
.agg-result-score-item { text-align: center; }
.agg-result-score-item .n { font-size: 24px; font-weight: 800; color: var(--agg-ink); }
.agg-result-score-item .l { font-size: 11.5px; opacity: 0.6; color: var(--agg-ink); }

/* ---------- Customize panel ---------- */

/* Centered modal, not a bottom sheet -- user-requested 2026-09-27
 * (previously align-items: flex-end pinned the card to the bottom of
 * the screen). Appended straight to <body> by game.js's
 * openCustomize(), so it sits above everything regardless of scroll
 * position. */
.agg-overlay {
	position: fixed;
	inset: 0;
	background: rgba(30, 20, 5, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}
.agg-overlay .agg-card {
	width: 100%;
	max-width: 480px;
	border-radius: 20px;
	margin: 0;
	max-height: 86vh;
	overflow-y: auto;
	/* Fixed ink for all of this panel's own text, not --agg-text: it's
	 * a white/cream card regardless of the outside-box text colour. */
	color: var(--agg-ink);
}
.agg-overlay .agg-card h3 { color: var(--agg-ink); margin-bottom: 12px; }
.agg-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.agg-swatch {
	width: 52px; height: 52px;
	border-radius: 12px;
	cursor: pointer;
	border: 2px solid transparent;
}
.agg-swatch.is-selected { border-color: var(--agg-wood-dark); box-shadow: 0 0 0 2px #fff inset; }

.agg-color-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.agg-color-field {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; opacity: 0.85; cursor: pointer;
	color: var(--agg-ink);
}
.agg-color-field input[type="color"] {
	width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--agg-card-border);
	border-radius: 10px; cursor: pointer; background: none;
}
.agg-customize-actions { display: flex; gap: 10px; margin-top: 16px; }
.agg-customize-actions .agg-btn { flex: 1; margin-bottom: 0; }

/* On mobile (below the desktop breakpoint below), no left/right padding
 * on the outer container -- user-requested 2026-09-26, same change as
 * the sibling thai-checkers-game plugin. Only horizontal padding is
 * dropped; top (16px) and bottom (40px) padding are untouched. */
@media (max-width: 1023px) {
	.agg-app { padding-left: 0; padding-right: 0; }
	/* Player name + capture count stacked onto two lines on mobile
	 * (name above, captures below) instead of side by side on one line
	 * -- user-requested 2026-09-26. Desktop keeps the original inline
	 * layout. The wrapping .agg-player-chip-info span (around the name
	 * + caps spans, see game.js's tableHtml()) becomes a flex column;
	 * the white chip's row-reverse layout gets its text right-aligned
	 * to match the existing name-alignment convention. */
	.agg-player-chip-info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
	.agg-player-chip.is-white .agg-player-chip-info { align-items: flex-end; }
}

/* ---------- Desktop widen (matches the sibling games' breakpoint) ---------- */

@media (min-width: 1024px) {
	.agg-app { max-width: 900px; padding-top: 26px; }
	.agg-title { font-size: 30px; }
	.agg-subtitle { font-size: 15px; }
	.agg-board-wrap { max-width: 560px; margin-left: auto; margin-right: auto; }
	.agg-table .agg-players-bar,
	.agg-table .agg-footer-controls,
	.agg-table .agg-move-log,
	.agg-table .agg-card {
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
	.agg-mode-icon { width: 56px; height: 56px; }
	.agg-mode-icon svg { width: 28px; height: 28px; }
	.agg-room-code { font-size: 42px; }
	.agg-player-chip-name { font-size: 15px; }
	.agg-timer-digital { font-size: 24px; padding: 10px 12px; }
	.agg-btn { font-size: 16.5px; }
}

/* ---------- Shared room chat (2026-09-28 request, ported from the
 * phom-sib-game/thai-checkers-game/uno-game/domino-game sibling
 * plugins) ---------- */
/* .agg-chat-root sits OUTSIDE #agg-app (a sibling — see game.js) so its
 * own <input> never gets torn down by #agg-app's frequent full innerHTML
 * rebuilds. Being outside #agg-app also means it does NOT inherit that
 * element's CSS custom properties or its own font-family rule above, so
 * everything here uses fixed colors/fonts instead — always legible
 * regardless of the admin's theme. */
.agg-chat-root, .agg-chat-root * {
	font-family: 'db', 'SF Thonburi', 'Sarabun', 'Noto Sans Thai', sans-serif;
	box-sizing: border-box;
}
.agg-chat-root { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.agg-chat-fab {
	/* Gradient speech-bubble fab with 3 white dots inside, kept still, with an orange glow burst every 5s (see
	 * glow burst via the chat-glow animation
	 * below. */
	position: relative; width: 56px; height: 52px; border: none; cursor: pointer;
	background: transparent; padding: 0; display: flex; align-items: flex-start; justify-content: center;
	isolation: isolate; overflow: visible;
}
.agg-chat-fab-icon { position: relative; z-index: 1; display: block; width: 52px; height: 47px; }
.agg-chat-fab-icon svg { width: 100%; height: 100%; display: block; }
/* Orange glow burst instead of the old up/down bob (no layout/transform
 * jitter on the button itself): every 5s a soft orange light spreads out
 * from behind the bubble and fades, then stays still until the next
 * burst. Only opacity/transform are animated, so it stays on the
 * compositor and never stutters. */
.agg-chat-fab::before,
.agg-chat-fab::after {
	content: ""; position: absolute; left: 50%; top: 45%; width: 56px; height: 56px;
	margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none; z-index: 0;
	background: radial-gradient(circle, rgba(255,150,30,.85) 0%, rgba(255,122,0,.45) 40%, rgba(255,122,0,0) 70%);
	opacity: 0; transform: scale(.7); will-change: transform, opacity;
	animation: agg-chat-glow 5s ease-out infinite;
}
.agg-chat-fab::after { animation-delay: .35s; }
@keyframes agg-chat-glow {
	0%   { opacity: 0;   transform: scale(.7); }
	6%   { opacity: .9;  transform: scale(1.1); }
	26%  { opacity: 0;   transform: scale(2.8); }
	100% { opacity: 0;   transform: scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
	.agg-chat-fab::before, .agg-chat-fab::after { animation: none; opacity: 0; }
}
.agg-chat-badge {
	position: absolute; top: -2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
	background: #ff5a36; color: #000; font-size: 11px; font-weight: 800; line-height: 18px;
	border-radius: 999px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
.agg-chat-panel {
	width: 300px; max-width: calc(100vw - 32px); height: 380px; max-height: 60vh;
	background: #fff; color: #2c2416; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
	display: flex; flex-direction: column; overflow: hidden;
}
.agg-chat-header {
	display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
	background: #2c2416; color: #fff; font-weight: 700; font-size: 14px;
}
/* Down-pointing triangle "▼" — reads as "collapse" rather than "close". */
.agg-chat-close { background: none; border: none; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0 4px; }
.agg-chat-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.agg-chat-empty { color: #9a8f7a; font-size: 13px; text-align: center; margin-top: 20px; }
.agg-chat-msg { max-width: 82%; background: #f3ede0; border-radius: 10px; padding: 6px 10px; align-self: flex-start; }
.agg-chat-msg-mine { background: #fff1c4; align-self: flex-end; }
.agg-chat-msg-name { font-size: 11px; font-weight: 800; color: #7a6f5c; margin-bottom: 2px; }
.agg-chat-msg-text { font-size: 14px; word-break: break-word; white-space: pre-wrap; }
.agg-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #eee2cc; }
.agg-chat-input {
	/* font-size MUST be >= 16px — below that, iOS Safari (and some
	 * Android browsers) auto-zoom the whole page in the moment this
	 * field gets focus. */
	flex: 1; min-width: 0; border: 1px solid #e0d6bd; border-radius: 999px; padding: 8px 12px; font-size: 16px; color: #2c2416; background: #fff;
}
.agg-chat-input:focus { outline: none; border-color: #c7bb9e; }
.agg-chat-send {
	border: none; border-radius: 999px; padding: 8px 16px; background: #ffb600; color: #fff; font-weight: normal; font-size: 14px; cursor: pointer;
}
.agg-chat-send:hover { background: linear-gradient(135deg, #ffd400, #ff7a00); }
.agg-chat-send:active { transform: scale(.97); }
@media (max-width: 1023px) {
	.agg-chat-root { right: 12px; bottom: 12px; }
	.agg-chat-panel { width: calc(100vw - 24px); height: 50vh; }
}

/* ขอผ่าน — teal/blue gradient (same as domino วาง) */
.agg-btn.agg-btn-pass { background: linear-gradient(135deg, #2196f3, #1de9b6); color: #04262b; border: none; box-shadow: 0 3px 0 #127a8a, 0 4px 10px rgba(20,100,120,.25); }