/* BrooklynFM — чат со студией. Цвета берутся из темы BrooklynFM, если она стоит. */

.bfm-chat,
.bfm-chat-fab {
	--c-bg: var(--bfm-surface, #0a3158);
	--c-bg-2: var(--bfm-surface-2, #123e69);
	--c-line: var(--bfm-line, rgba(160, 196, 235, .14));
	--c-text: var(--bfm-text, #f2f6fb);
	--c-muted: var(--bfm-muted, #9fb3ca);
	--c-accent: var(--bfm-accent, #cf0f74);
	--c-accent-ink: var(--bfm-accent-ink, #fff);
	--c-font: var(--bfm-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	--c-bottom: calc(var(--bfm-player-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px);
}

.bfm-chat[hidden],
.bfm-chat [hidden],
[data-bfm-chat-open][hidden] { display: none !important; }

.bfm-chat {
	position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: var(--c-bottom);
	width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - var(--c-bottom) - 90px));
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--c-bg); color: var(--c-text); font-family: var(--c-font); font-size: 15px; line-height: 1.45;
	border: 1px solid var(--c-line); border-radius: 22px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
	opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right;
	transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.bfm-chat.is-open { opacity: 1; transform: none; }

@media (max-width: 560px) {
	.bfm-chat {
		left: 0; right: 0; width: 100%; border-radius: 22px 22px 0 0;
		height: min(78dvh, calc(100dvh - var(--c-bottom) - 40px)); bottom: calc(var(--c-bottom) - 12px);
		transform: translateY(24px); transform-origin: bottom center;
	}
}

.bfm-chat__head {
	display: flex; align-items: center; gap: 12px; padding: 16px 12px 14px 18px;
	border-bottom: 1px solid var(--c-line);
}
.bfm-chat__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-muted); flex: none; }
.bfm-chat.is-online .bfm-chat__dot { background: var(--c-accent); animation: bfm-chat-live 1.8s infinite; }
@keyframes bfm-chat-live {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 70%, transparent); }
	70% { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.bfm-chat__head-text { flex: 1; min-width: 0; }
.bfm-chat__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; font-family: var(--bfm-display, var(--c-font)); letter-spacing: -.01em; }
.bfm-chat__sub { margin: 2px 0 0; font-size: 13px; color: var(--c-muted); }
.bfm-chat__close {
	width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%;
	background: transparent; color: var(--c-text); cursor: pointer;
}
.bfm-chat__close:hover { background: var(--c-bg-2); }
.bfm-chat__close svg { width: 20px; height: 20px; }

.bfm-chat__log {
	flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px;
	overscroll-behavior: contain;
}
.bfm-chat__msg { display: flex; flex-direction: column; max-width: 84%; gap: 3px; }
.bfm-chat__msg--me { align-self: flex-end; align-items: flex-end; }
.bfm-chat__msg--studio { align-self: flex-start; align-items: flex-start; }
.bfm-chat__bubble {
	padding: 9px 13px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.bfm-chat__msg--me .bfm-chat__bubble { background: var(--c-accent); color: var(--c-accent-ink); border-bottom-right-radius: 6px; }
.bfm-chat__msg--studio .bfm-chat__bubble { background: var(--c-bg-2); border-bottom-left-radius: 6px; }
.bfm-chat__msg--hello .bfm-chat__bubble { background: transparent; border: 1px dashed var(--c-line); color: var(--c-muted); font-size: 14px; }
.bfm-chat__who { font-size: 12px; font-weight: 700; color: var(--c-accent); padding-left: 4px; }
.bfm-chat__time { font-size: 11px; color: var(--c-muted); padding: 0 6px; font-variant-numeric: tabular-nums; }

.bfm-chat__form { padding: 10px 12px 12px; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 8px; }
.bfm-chat__label { display: block; font-size: 13px; color: var(--c-muted); margin: 0 0 4px 4px; }
.bfm-chat__input {
	width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 16px; border: 1px solid var(--c-line);
	background: var(--c-bg-2); color: var(--c-text); font: inherit; outline: none;
}
.bfm-chat__input:focus { border-color: var(--c-accent); }
.bfm-chat__input::placeholder { color: var(--c-muted); }
.bfm-chat__whoami { margin: 0 4px; font-size: 13px; color: var(--c-muted); }
.bfm-chat__whoami strong { color: var(--c-text); }
.bfm-chat__link { border: 0; background: none; padding: 0 0 0 4px; color: var(--c-accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bfm-chat__compose { display: flex; align-items: flex-end; gap: 8px; }
.bfm-chat__text { resize: none; min-height: 44px; max-height: 140px; line-height: 1.4; }
.bfm-chat__send {
	width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--c-accent); color: var(--c-accent-ink); transition: transform .15s;
}
.bfm-chat__send:active { transform: scale(.94); }
.bfm-chat__send:disabled { opacity: .5; cursor: wait; }
.bfm-chat__send svg { width: 22px; height: 22px; }
.bfm-chat__error { margin: 0 4px; font-size: 13px; color: #ffb4b4; }
.bfm-chat__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.bfm-chat__offline { padding: 16px 18px 18px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-muted); }
.bfm-chat__offline p { margin: 0 0 12px; }
.bfm-chat__offline strong { color: var(--c-text); }
.bfm-chat__tg {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
	background: var(--c-accent); color: var(--c-accent-ink); font-weight: 700; text-decoration: none;
}
.bfm-chat__tg:hover { color: var(--c-accent-ink); filter: brightness(1.08); }

/* Плавающая кнопка, если тема не дала своей. */
.bfm-chat-fab {
	position: fixed; z-index: 59; right: max(16px, env(safe-area-inset-right, 0px)); bottom: var(--c-bottom);
	width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
	background: var(--c-accent); color: var(--c-accent-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.bfm-chat-fab svg { width: 26px; height: 26px; }

/* Счётчик непрочитанных ответов на любой кнопке открытия. */
[data-bfm-chat-open] { position: relative; }
.bfm-chat-badge {
	position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
	background: var(--bfm-accent, #cf0f74); color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
	box-shadow: 0 0 0 2px var(--bfm-bg-2, #002647);
}

@media (prefers-reduced-motion: reduce) {
	.bfm-chat { transition: none; }
	.bfm-chat.is-online .bfm-chat__dot { animation: none; }
}

/* Передача окончена: кнопка приглушённая, без призыва писать. */
[data-bfm-chat-open].is-ended { background: transparent !important; border-color: rgba(255, 255, 255, .28) !important; color: inherit !important; opacity: .8; filter: none !important; }
[data-bfm-chat-open].is-ended .icon, [data-bfm-chat-open].is-ended svg { color: inherit !important; }
[data-bfm-chat-open].is-ended:hover { opacity: 1; border-color: rgba(255, 255, 255, .5) !important; }