/* ============================================================================
   Park Comms pager (play-comms.js) — a persistent in-world chat device docked
   below the top-right power corner. Reads as park staff hardware, not a web
   chat box (docs/design/chat-visibility.md). Same z-band + chrome family as the
   action bar (z160) / target frame (z158) / HUD chrome (z150) → this sits z159.

   Reuses the standalone .friend-chat-* bubble classes (play.css ~1337) inside
   the console log so messages look identical to the Social-panel chat.
   ============================================================================ */

/* Docked BOTTOM-LEFT, just above the action bar. The top-right is contested everywhere — the HUD
   power button on the hub, and the close-✕ + tab rail inside screen-shell rooms (Quest/Character/
   Shop/Lounge are all rooms now) — so a top-right pager floats over real buttons (user feedback).
   The bottom-left strip above the action bar is button-free on both the hub and inside rooms. */
body.play-app .tpq-comms {
	position: fixed;
	bottom: calc(var(--tpq-bar-h, 4.9rem) + var(--play-safe-bottom, 0px) + 0.5rem);
	left: max(0.6rem, var(--play-safe-left, 0px));
	z-index: 159;
	width: max-content;
	max-width: calc(100vw - 1.2rem);
	font-family: "Inter", system-ui, sans-serif;
}
body.play-app .tpq-comms[hidden] { display: none; }

/* The HUD target frame's idle "next up" chip (e.g. the daily-bounty suggestion, play-polish.css
   .tpq-target--nextup) docks bottom-RIGHT. On a narrow phone it and this bottom-LEFT pager are each
   ~half the width and meet in the middle (user report). Rather than lift the pager (which left it
   floating too high, second report), keep it tucked LOW where it belongs and, only on a narrow screen
   where they'd actually collide, compact the collapsed pill to its badge — LED + "Park Comms"
   nameplate + signal (the unread beacon still shows) — so it sits clear to the LEFT of the chip. The
   open console and all wider screens (room for both at opposite corners) are untouched. */
@media (max-width: 560px) {
	body.play-app:has(.tpq-target--nextup) .tpq-comms.is-collapsed .tpq-comms-pager-line,
	body.play-app:has(.tpq-target--nextup) .tpq-comms.is-collapsed .tpq-comms-signal {
		display: none;
	}
	/* Tighten the pill to just LED + nameplate (+ beacon) so it clears the chip on the left. */
	body.play-app:has(.tpq-target--nextup) .tpq-comms.is-collapsed .tpq-comms-pager {
		padding: 0.34rem 0.55rem 0.34rem 0.45rem;
		gap: 0.4rem;
	}
}

/* ---- Collapsed pager: the always-on glanceable device --------------------- */
.tpq-comms-pager {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 17rem;
	padding: 0.36rem 0.7rem 0.36rem 0.5rem;
	border: 1px solid rgba(241, 196, 15, 0.45);
	border-radius: 999px;
	cursor: pointer;
	color: var(--text, #e8ecf4);
	font: inherit;
	text-align: left;
	background: linear-gradient(180deg, rgba(36, 28, 18, 0.96), rgba(18, 15, 11, 0.97));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 10px 28px -10px rgba(0, 0, 0, 0.8),
		0 0 22px -10px rgba(241, 196, 15, 0.45);
	backdrop-filter: blur(8px);
	transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpq-comms-pager:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 224, 122, 0.7);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 12px 30px -10px rgba(0, 0, 0, 0.85),
		0 0 26px -8px rgba(241, 196, 15, 0.6);
}
.tpq-comms-pager:active { transform: translateY(0) scale(0.98); }

/* Status LED — slow standby breathe; brighter squelch pulse when unread. */
.tpq-comms-led {
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #8effc0, #1f9d57);
	box-shadow: 0 0 6px -1px rgba(46, 204, 113, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
	animation: tpq-comms-breathe 2.4s ease-in-out infinite;
}
.tpq-comms.has-unread .tpq-comms-led {
	background: radial-gradient(circle at 35% 30%, #ffe9a6, #f1c40f);
	box-shadow: 0 0 9px 0 rgba(241, 196, 15, 1);
	animation: tpq-comms-squelch 0.9s ease-in-out infinite;
}
@keyframes tpq-comms-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes tpq-comms-squelch { 0%, 100% { opacity: 0.6; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.12); } }

.tpq-comms-pager-body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.tpq-comms-nameplate {
	font-family: "Cinzel", serif;
	font-weight: 600;
	font-size: 0.56rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-bright, #ffd75e);
	line-height: 1;
}
.tpq-comms-pager-line {
	font-size: 0.74rem;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 11.5rem;
	color: rgba(232, 236, 244, 0.92);
}
.tpq-comms-signal { flex: none; font-size: 0.85rem; opacity: 0.8; }

.tpq-comms-beacon {
	flex: none;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.28rem;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-size: 0.66rem;
	font-weight: 800;
	color: #1a1205;
	background: var(--gold-bright, #ffd75e);
	box-shadow: 0 0 10px -2px rgba(241, 196, 15, 0.9);
}
.tpq-comms-beacon[hidden] { display: none; }

/* ---- Expanded console ----------------------------------------------------- */
.tpq-comms.is-open .tpq-comms-pager { display: none; }

.tpq-comms-console {
	display: flex;
	flex-direction: column;
	width: 21rem;
	max-width: calc(100vw - 1.2rem);
	max-height: calc(
		var(--play-app-height, 100dvh) - var(--tpq-hud-h, 3.3rem) - var(--tpq-bar-h, 4.9rem) -
			var(--play-safe-top, 0px) - var(--play-safe-bottom, 0px) - 2rem
	);
	border: 1px solid rgba(241, 196, 15, 0.45);
	border-radius: 14px;
	overflow: hidden;
	color: var(--text, #e8ecf4);
	background: linear-gradient(180deg, rgba(28, 24, 17, 0.98), rgba(15, 13, 10, 0.99));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 22px 50px -18px rgba(0, 0, 0, 0.9),
		0 0 30px -10px rgba(241, 196, 15, 0.4);
	backdrop-filter: blur(10px);
	animation: tpq-comms-pop 0.18s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes tpq-comms-pop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }

.tpq-comms-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.55rem 0.5rem 0.7rem;
	border-bottom: 1px solid rgba(241, 196, 15, 0.18);
	background: linear-gradient(180deg, rgba(46, 36, 20, 0.6), transparent);
}
.tpq-comms-title {
	flex: 1;
	font-family: "Cinzel", serif;
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-bright, #ffd75e);
}
.tpq-comms-x {
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--text, #e8ecf4);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.tpq-comms-x:hover { border-color: rgba(255, 224, 122, 0.6); }

.tpq-comms-tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0.4rem 0.5rem 0;
}
.tpq-comms-tab {
	flex: 1;
	padding: 0.35rem 0.3rem;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 9px 9px 0 0;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(232, 236, 244, 0.7);
	font: inherit;
	font-size: 0.72rem;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tpq-comms-tab.is-active {
	color: var(--gold-bright, #ffd75e);
	background: rgba(241, 196, 15, 0.12);
	border-color: rgba(241, 196, 15, 0.3);
}
.tpq-comms-tab[aria-disabled="true"] { opacity: 0.4; cursor: default; }
/* Per-tab unread pip (byBand on the 12s tick). */
.tpq-comms-tab-pip {
	display: inline-block;
	width: 0.42rem;
	height: 0.42rem;
	margin-left: 0.28rem;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--gold-bright, #ffd75e);
	box-shadow: 0 0 6px -1px rgba(241, 196, 15, 0.9);
}

.tpq-comms-stage {
	flex: 1;
	min-height: 8rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.7rem;
	border-top: 1px solid rgba(241, 196, 15, 0.18);
	margin-top: -1px;
}
.tpq-comms-hint {
	margin: 0 0 0.4rem;
	font-size: 0.7rem;
	opacity: 0.65;
	text-align: center;
}
/* Presentation-only ambient "Park Dispatch" flavor for a quiet park (Phase 3) — teal NPC voice,
   visibly not a player bubble. */
.tpq-comms-ambient {
	margin: auto 0;
	padding: 0.5rem 0.2rem;
	text-align: center;
	font-size: 0.78rem;
	font-style: italic;
	color: rgba(110, 226, 166, 0.85);
	transition: opacity 0.3s ease;
}

/* Empty / no-signal device state (no party/guild, or quiet whispers). */
.tpq-comms-nosignal {
	margin: auto;
	text-align: center;
	font-size: 0.78rem;
	opacity: 0.7;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 0.5rem;
}
.tpq-comms-nosignal-glyph { font-size: 1.5rem; opacity: 0.8; }

/* Whisper (DM) chooser rows. */
.tpq-comms-whisper {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.45rem 0.55rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--text, #e8ecf4);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.tpq-comms-whisper:hover { border-color: rgba(241, 196, 15, 0.4); }
.tpq-comms-whisper-name { flex: 1; font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpq-comms-whisper-last { font-size: 0.7rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8rem; }
.tpq-comms-whisper-unread {
	flex: none; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
	border-radius: 999px; display: grid; place-items: center;
	font-size: 0.62rem; font-weight: 800; color: #1a1205; background: var(--gold-bright, #ffd75e);
}
.tpq-comms-thread-back {
	align-self: flex-start;
	margin-bottom: 0.1rem;
	border: none;
	background: none;
	color: var(--gold, #f1c40f);
	font: inherit;
	font-size: 0.74rem;
	cursor: pointer;
	padding: 0.1rem 0.2rem;
}

.tpq-comms-compose {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
	padding: 0.55rem;
	border-top: 1px solid rgba(241, 196, 15, 0.18);
}
.tpq-comms-compose[hidden] { display: none; }
/* The mic input is the dominant element — it grows; Send keeps its content width. (Global
   .play-action-btn is width:100%, which would otherwise crush the input to a sliver.) */
.tpq-comms-compose .rpg-field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.5rem;
	font-size: 0.92rem;
}
.tpq-comms-compose .play-action-btn {
	flex: 0 0 auto;
	width: auto;
	padding: 0.5rem 0.9rem;
	white-space: nowrap;
}

/* In-world rate-limit "Hold the mic" device state. */
.tpq-comms.is-held .tpq-comms-led {
	background: radial-gradient(circle at 35% 30%, #ff9d8a, #e74c3c);
	box-shadow: 0 0 9px 0 rgba(231, 76, 60, 0.9);
	animation: none;
}
.tpq-comms-held-note {
	font-size: 0.72rem;
	color: #ff9d8a;
	text-align: center;
	padding: 0.2rem 0;
}

/* ---- Mobile: console becomes a bottom sheet ------------------------------- */
@media (max-width: 560px) {
	body.play-app .tpq-comms.is-open {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		width: auto;
	}
	.tpq-comms-console {
		width: auto;
		max-width: none;
		border-radius: 16px 16px 0 0;
		border-bottom: none;
		max-height: 62dvh;
		margin: 0 max(0px, var(--play-safe-right, 0px)) calc(var(--tpq-bar-h, 4.9rem) + var(--play-safe-bottom, 0px)) max(0px, var(--play-safe-left, 0px));
		animation: tpq-comms-sheet 0.2s ease;
	}
	@keyframes tpq-comms-sheet { from { transform: translateY(24px); opacity: 0.6; } }
	.tpq-comms-pager-line { max-width: 9rem; }
}

/* ---- Reduced motion / kill switch ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.tpq-comms-led,
	.tpq-comms.has-unread .tpq-comms-led { animation: none; }
	.tpq-comms-console { animation: none; }
}
/* Manual reduced-motion (tpq_flow_off) — set by play-comms.js since it is not a media query. */
.tpq-comms.no-motion .tpq-comms-led,
.tpq-comms.no-motion.has-unread .tpq-comms-led { animation: none; }
.tpq-comms.no-motion .tpq-comms-console { animation: none; }