/* CineVerse chat (visitors). Colours follow the theme (--accent, --surface, --ink) unless set in the settings. */
.cv-chat {
	--cvc: var(--cv-chat, var(--accent, #e50914));
	--cvc-bg: var(--surface, #172540);
	--cvc-bg-2: var(--surface-2, #21304f);
	--cvc-ink: var(--ink, #f3f5fb);
	--cvc-muted: var(--muted, #9aa6c0);
	--cvc-line: var(--line, rgb(255 255 255 / .1));
	position: fixed;
	z-index: 990;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: var(--font-text, system-ui, sans-serif);
}
.cv-chat--left { right: auto; left: 20px; align-items: flex-start; }
.cv-chat-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: 50%;
	background: var(--cvc);
	color: #fff;
	box-shadow: 0 10px 28px color-mix(in srgb, var(--cvc) 45%, transparent), 0 2px 6px rgb(0 0 0 / .3);
	cursor: pointer;
	transition: transform .2s ease;
}
.cv-chat-btn:hover { transform: translateY(-2px) scale(1.04); }
.cv-chat-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.cv-chat-btn svg { width: 26px; height: 26px; fill: currentColor; }
.cv-chat.is-open .cv-chat-btn svg { opacity: .85; }
.cv-chat-dot { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border: 2px solid var(--cvc-bg); border-radius: 50%; background: #22c55e; }
.cv-chat-panel {
	display: flex;
	flex-direction: column;
	width: min(370px, calc(100vw - 32px));
	height: min(540px, calc(100dvh - 120px));
	overflow: hidden;
	border: 1px solid var(--cvc-line);
	border-radius: 18px;
	background: var(--cvc-bg);
	color: var(--cvc-ink);
	box-shadow: 0 24px 60px rgb(0 0 0 / .5);
	animation: cv-chat-in .22s ease-out;
}
.cv-chat-panel[hidden] { display: none; }
@keyframes cv-chat-in { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.cv-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--cvc); color: #fff; }
.cv-chat-head strong { display: block; font-size: 1rem; line-height: 1.3; }
.cv-chat-status { display: flex; align-items: center; gap: 6px; font-size: .78rem; opacity: .9; }
.cv-chat-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .55); }
.cv-chat-status.is-online::before { background: #4ade80; box-shadow: 0 0 0 3px rgb(74 222 128 / .3); }
.cv-chat-close { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .15); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.cv-chat-close:hover { background: rgb(255 255 255 / .28); }
.cv-chat-list { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.cv-chat-msg { max-width: 82%; padding: 8px 12px 6px; border-radius: 14px; background: var(--cvc-bg-2); font-size: .9rem; line-height: 1.45; }
.cv-chat-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-chat-msg time { display: block; margin-top: 2px; font-size: .68rem; color: var(--cvc-muted); text-align: right; }
.cv-chat-msg.is-team { align-self: flex-start; border-bottom-left-radius: 4px; }
.cv-chat-msg.is-me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--cvc); color: #fff; }
.cv-chat-msg.is-me time { color: rgb(255 255 255 / .75); }
.cv-chat-msg.is-welcome time { display: none; }
.cv-chat-from { display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 700; color: var(--cvc); }
.cv-chat-note { margin: 0; padding: 8px 16px; border-top: 1px solid var(--cvc-line); font-size: .8rem; color: var(--cvc-muted); }
.cv-chat-note a { color: var(--cvc); font-weight: 600; }
.cv-chat-form { display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--cvc-line); }
.cv-chat-form[hidden] { display: none; }
.cv-chat-name, .cv-chat-input { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--cvc-line); border-radius: 12px; background: var(--cvc-bg-2); color: var(--cvc-ink); font: inherit; font-size: .9rem; }
.cv-chat-name[hidden] { display: none; }
.cv-chat-name:focus, .cv-chat-input:focus { outline: 2px solid var(--cvc); outline-offset: 0; border-color: transparent; }
.cv-chat-row { display: flex; align-items: flex-end; gap: 8px; }
.cv-chat-input { resize: none; min-height: 42px; max-height: 120px; }
.cv-chat-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--cvc); color: #fff; cursor: pointer; }
.cv-chat-send:disabled { opacity: .5; cursor: wait; }
.cv-chat-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Other bottom notices (e.g. "video fixed") move above the chat button. */
.has-cv-chat--right .cv-toast { bottom: 92px; }
@media (max-width: 640px) {
	.cv-chat { bottom: 14px; right: 14px; }
	.cv-chat--left { left: 14px; }
	.cv-chat-btn { width: 52px; height: 52px; }
	.cv-chat.is-open { inset: 0; gap: 0; align-items: stretch; }
	.cv-chat.is-open .cv-chat-btn { display: none; }
	.cv-chat-panel { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
	.has-cv-chat .cv-toast { bottom: 78px; }
}
/* Phones show the theme's bottom menu (tab bar, up to 720px): keep the chat button and notices above it. */
@media (max-width: 720px) {
	body:not(.cv-no-tabbar) .cv-chat:not(.is-open) { bottom: calc(76px + env(safe-area-inset-bottom)); }
	.has-cv-chat body:not(.cv-no-tabbar) .cv-toast { bottom: calc(140px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .cv-chat-panel { animation: none; } .cv-chat-btn { transition: none; } }