/**
 * PawChat — per-streamer room chat widget.
 */

.pawchat-wrap {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.pawchat-notice {
	flex-shrink: 0;
	margin-bottom: 0.5rem;
	padding: 0.5rem 0.75rem;
	font-size: var(--hp-font-size-sm, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--hp-color-text, #3d3540);
	background: linear-gradient(135deg, var(--hp-yellow-50, #fff9e6), var(--hp-pink-50, #fff0f3));
	border: 1px solid var(--hp-yellow-300, #ffe08a);
	border-radius: var(--hp-radius-md, 0.5rem);
}

.pawchat-messages-body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-height: 0;
}

.pawchat-load-more {
	flex-shrink: 0;
	width: 100%;
	margin: 0 0 0.5rem;
	padding: 0.35rem 0.75rem;
	font-family: inherit;
	font-size: var(--hp-font-size-sm, 0.875rem);
	font-weight: 600;
	color: var(--hp-color-accent, #e891a8);
	background: var(--hp-pink-50, #fff0f3);
	border: 1px dashed var(--hp-pink-200, #ffc9d6);
	border-radius: var(--hp-radius-md, 0.5rem);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pawchat-load-more:hover:not(:disabled),
.pawchat-load-more:focus-visible {
	background: var(--hp-pink-100, #ffe0e8);
	border-color: var(--hp-pink-300, #f5a8bc);
	outline: none;
}

.pawchat-load-more:disabled {
	opacity: 0.65;
	cursor: wait;
}

.pawchat-wrap .pawchat-messages {
	flex: 0 0 24rem;
	height: 24rem;
	max-height: 24rem;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	padding: var(--hp-space-2, 0.5rem);
	list-style: none;
	background: var(--hp-color-bg-subtle, #f5f2f4);
	border: 1px solid var(--hp-color-border, #e8e0e4);
	border-radius: var(--hp-radius-lg, 0.75rem);
	scrollbar-gutter: stable;
}

.pawchat-message {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem 0.5rem;
	max-width: 88%;
	width: max-content;
	align-self: flex-start;
	padding: 0.35rem 0;
}

.pawchat-message--mine {
	flex-direction: row-reverse;
	align-self: flex-end;
	margin-left: auto;
}

.pawchat-message__avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	border-radius: var(--hp-radius-sm, 0.375rem);
}

.pawchat-message__body {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	width: auto;
	max-width: 100%;
	min-width: 0;
}

.pawchat-message--mine .pawchat-message__body {
	align-items: flex-end;
}

.pawchat-message__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 1rem;
	margin: 0;
	padding: 0 0 0 0.15rem;
	line-height: 1rem;
}

.pawchat-message--mine .pawchat-message__header {
	justify-content: flex-end;
	padding: 0 0.15rem 0 0;
}

.pawchat-message__name {
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1rem;
	color: var(--hp-color-text-muted, #8a7b82);
}

.pawchat-message__bubble {
	position: relative;
	display: inline-block;
	width: auto;
	max-width: min(18rem, 100%);
	margin-top: 0;
	padding: 0.15rem 1.1rem 0.35rem 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pawchat-message__bubble::before {
	content: '';
	position: absolute;
	top: 0.15rem;
	left: -0.4rem;
	width: 0;
	height: 0;
	border-top: 0.35rem solid transparent;
	border-bottom: 0.35rem solid transparent;
	border-right: 0.4rem solid var(--hp-color-text, #3d3540);
	opacity: 0.12;
}

.pawchat-message--mine .pawchat-message__bubble {
	padding: 0.25rem 0.35rem 0.35rem 1.1rem;
	background: linear-gradient(135deg, var(--hp-yellow-100, #fff3bf), var(--hp-yellow-200, #ffe08a));
	border: 1px solid var(--hp-yellow-300, #ffd54f);
	border-radius: 0.65rem 0 0.65rem 0.65rem;
	box-shadow: none;
}

.pawchat-message--mine .pawchat-message__bubble::before {
	left: auto;
	right: -0.4rem;
	border-right: 0;
	border-left: 0.4rem solid var(--hp-yellow-100, #fff3bf);
	opacity: 1;
}

.pawchat-message__text {
	margin: 0;
	font-size: var(--hp-font-size-sm, 0.875rem);
	line-height: 1.45;
	color: var(--hp-color-text, #3d3540);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.pawchat-badge {
	display: inline-block;
	margin-right: 0.2rem;
	padding: 0.05rem 0.35rem;
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1.2;
	vertical-align: middle;
	border-radius: 999px;
}

.pawchat-badge--moderator {
	color: #fff;
	background: #6366f1;
}

.pawchat-badge--streamer {
	color: #fff;
	background: var(--hp-color-accent, #e891a8);
}

.pawchat-badge--subscriber {
	color: #fff;
	background: #0ea5e9;
}

.pawchat-delete {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0.875rem;
	height: 0.875rem;
	padding: 0;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--hp-color-text-muted, #8a7b82);
	background: transparent;
	border: 0;
	cursor: pointer;
	opacity: 0.45;
}

.pawchat-delete:hover {
	opacity: 1;
	color: var(--hp-color-accent, #e891a8);
}

.pawchat-form {
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
	align-items: center;
}

.pawchat-input {
	flex: 1 1 auto;
	min-width: 0;
}

.pawchat-send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}