/* ============================================================
   FANORATE CHAT — chatbot UI in the live widget AI tab.
   Scoped under .fan-chat. Bubble/chip/typing styling mirrors the
   reference demo; the panel's static AI cards are hidden in JS so
   the chat owns the tab.
   ============================================================ */

/* When the AI tab is active AND the chat is mounted (has-fan-chat = chat enabled),
   hide the scoreboard + win-probability bar to give the chat room. Pure CSS — the
   moment another tab is selected the AI panel loses .is-active, the selector stops
   matching, and they reappear. (If chat is disabled, has-fan-chat is never added,
   so these stay visible as normal.) */
.fanorate-live-widget:has(.panel[data-panel="ai"].has-fan-chat.is-active) .fw__scorebox,
.fanorate-live-widget:has(.panel[data-panel="ai"].has-fan-chat.is-active) .aibar {
	display: none;
}

.fanorate-live-widget:has(.panel[data-panel="ai"].has-fan-chat.is-active) .fw__head{
	padding-bottom: 8px;
}

/* ---- fill the AI panel; log scrolls, composer pinned ---- */
.fanorate-live-widget .body:has(.panel[data-panel="ai"].has-fan-chat.is-active) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* login-gate view: the gate sits on top, the AI cards below it; let it scroll */
.fan-chat.fan-chat--gate .fan-chat__body { overflow-y: auto; }
.fan-chat.fan-chat--gate .fan-chat__body > .card { flex: 0 0 auto; }
.fanorate-live-widget .panel[data-panel="ai"].has-fan-chat.is-active {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
}
.fan-chat {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	font: inherit;
}
.fan-chat .fan-chat__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	gap: 8px;
	position: relative; /* anchor for the in-widget confirm overlay */
}

/* ---- in-widget confirm (replaces the browser popup) ---- */
.fan-chat .fan-chat__confirm {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 8px;
}
.fan-chat .fan-chat__confirm-card {
	width: 100%;
	max-width: 280px;
	background: var(--bg, #0b2143);
	border: 1px solid var(--line-2, rgba(127, 127, 127, 0.3));
	border-radius: 12px;
	padding: 16px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.fan-chat .fan-chat__confirm-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.fan-chat .fan-chat__confirm-msg { margin: 0 0 14px; font-size: 12.5px; line-height: 1.45; opacity: 0.8; }
.fan-chat .fan-chat__confirm-actions { display: flex; gap: 8px; justify-content: center; }
.fan-chat .fan-chat__confirm-btn {
	border: 1px solid var(--line-2, rgba(127, 127, 127, 0.3));
	background: var(--surface, rgba(127, 127, 127, 0.08));
	color: inherit;
	border-radius: 9px;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.fan-chat .fan-chat__confirm-btn:hover { border-color: var(--line-2, rgba(127, 127, 127, 0.5)); }
.fan-chat .fan-chat__confirm-btn--danger { background: #E5253D; border-color: #E5253D; color: #fff; }
.fan-chat .fan-chat__confirm-btn--danger:hover { background: #c41d31; }
.fan-chat .fan-chat__loading { opacity: 0.6; font-size: 13px; padding: 8px 0; }

/* ---- toolbar (brand + New chat) ---- */
.fan-chat .fan-chat__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	padding-bottom: 2px;
}
.fan-chat .fan-chat__brand {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.6;
}
.fan-chat .fan-chat__fresh {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--line-2, rgba(127, 127, 127, 0.3));
	background: var(--surface, rgba(127, 127, 127, 0.08));
	color: inherit;
	border-radius: 999px;
	padding: 4px 11px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.fan-chat .fan-chat__fresh::before { content: "＋"; font-weight: 700; line-height: 1; }
.fan-chat .fan-chat__fresh:hover { background: rgba(229, 37, 61, 0.18); border-color: #E5253D; }

/* ---- suggestion chips (inside the log, under the first AI message) ---- */
.fan-chat .fan-chat__suggest {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-left: 34px; /* align under the AI bubble (avatar 26 + gap 8) */
	margin-top: -2px;
}
.fan-chat .fan-chat__suggest-h {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	opacity: 0.5;
}
.fan-chat .fan-chat__chips {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}
.fan-chat .chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--line-2, rgba(127, 127, 127, 0.3));
	background: var(--surface, rgba(127, 127, 127, 0.08));
	color: inherit;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 12px;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.fan-chat .chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, #E5253D, #ff7a59);
	flex: 0 0 auto;
}
.fan-chat .chip:hover {
	background: rgba(229, 37, 61, 0.14);
	border-color: #E5253D;
	transform: translateY(-1px);
}

/* ---- conversation log ---- */
.fan-chat .fan-chat__log {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-right: 4px;
}
.fan-chat .msg { display: flex; gap: 8px; align-items: flex-start; }
.fan-chat .msg--user { justify-content: flex-end; }
.fan-chat .msg--ai { justify-content: flex-start; }
/* AI avatar — gradient spark chip */
.fan-chat .msg__av {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #E5253D, #ff7a59);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	margin-top: 1px;
}
.fan-chat .msg__av svg { width: 15px; height: 15px; }
.fan-chat .msg__b {
	max-width: 84%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.55;
	word-wrap: break-word;
}
.fan-chat .msg--user .msg__b {
	background: #E5253D;
	color: #fff;
	border-bottom-right-radius: 4px;
	box-shadow: 0 1px 5px rgba(229, 37, 61, 0.25);
}
.fan-chat .msg--ai .msg__b {
	background: var(--surface-2, rgba(255, 255, 255, 0.09));
	border: 1px solid var(--line-2, rgba(255, 255, 255, 0.12));
	color: inherit;
	border-top-left-radius: 4px;
}

.fan-chat .msg--ai .msg__b ul li{
	list-style: auto;
}

/* --- rich content inside an AI bubble --- */
.fan-chat .msg__b > :first-child { margin-top: 0; }
.fan-chat .msg__b > :last-child { margin-bottom: 0; }
.fan-chat .msg__b p { margin: 0 0 8px; }
/* Bold = heavier weight only — no hardcoded colour, so it stays readable on
   both the dark and light widget themes (the bubble bg follows the theme). */
.fan-chat .msg__b strong { font-weight: 700; }
.fan-chat .msg__b a { color: #E5253D; text-decoration: underline; }
.fan-chat .msg__b ul,
.fan-chat .msg__b ol { margin: 6px 0 8px; padding-left: 20px; }
.fan-chat .msg__b li { margin: 2px 0; }
.fan-chat .msg__b li::marker { color: #ff7a59; }

/* headings (level-aware) */
.fan-chat .msg__b .msg__h { margin: 10px 0 6px; line-height: 1.3; }
.fan-chat .msg__b .msg__h--1 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.fan-chat .msg__b .msg__h--2 { font-size: 14px; font-weight: 700; }
.fan-chat .msg__b .msg__h--3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
.fan-chat .msg__b .msg__h--1::after {
	content: ""; display: block; height: 2px; width: 26px; margin-top: 5px;
	border-radius: 2px; background: linear-gradient(90deg, #E5253D, #ff7a59);
}

/* inline code — neutral chip that works on dark and light themes */
.fan-chat .msg__b code {
	background: var(--surface-h, rgba(127, 127, 127, 0.2));
	padding: 1px 5px; border-radius: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}

.fan-chat .msg__err { color: #E5253D; margin: 0; }

/* tables — markdown pipe tables AND ```ui``` table blocks share this look */
.fan-chat .msg__table,
.fan-chat .ui-table {
	margin: 9px 0; overflow-x: auto;
	border: 1px solid var(--line-2, rgba(127, 127, 127, 0.3)); border-radius: 10px;
}
.fan-chat .msg__table table,
.fan-chat .ui-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fan-chat .msg__table th,
.fan-chat .ui-table th {
	background: var(--surface-h, rgba(127, 127, 127, 0.18)); font-weight: 700; text-align: left;
	padding: 8px 11px; white-space: nowrap;
	border-bottom: 1px solid var(--line-2, rgba(127, 127, 127, 0.3));
}
.fan-chat .msg__table td,
.fan-chat .ui-table td { padding: 7px 11px; border-bottom: 1px solid var(--line-2, rgba(127, 127, 127, 0.18)); }
.fan-chat .msg__table tbody tr:last-child td,
.fan-chat .ui-table tbody tr:last-child td { border-bottom: 0; }
.fan-chat .msg__table tbody tr:nth-child(even),
.fan-chat .ui-table tbody tr:nth-child(even) { background: var(--surface, rgba(127, 127, 127, 0.08)); }

/* typing dots */
.fan-chat .typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.fan-chat .typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; opacity: 0.4;
	animation: fan-chat-bounce 1.2s infinite ease-in-out;
}
.fan-chat .typing span:nth-child(2) { animation-delay: 0.15s; }
.fan-chat .typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fan-chat-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---- inline ui blocks ---- */
/* player card */
.fan-chat .ui-card {
	display: flex; align-items: center; gap: 11px;
	background: linear-gradient(135deg, rgba(229, 37, 61, 0.14), rgba(127, 127, 127, 0.06));
	border: 1px solid var(--line-2, rgba(127, 127, 127, 0.25));
	border-radius: 12px; padding: 10px 12px; margin: 8px 0;
}
.fan-chat .ui-card__n {
	min-width: 34px; height: 34px; border-radius: 9px;
	background: linear-gradient(135deg, #E5253D, #ff7a59); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
	box-shadow: 0 2px 6px rgba(229, 37, 61, 0.3);
}
.fan-chat .ui-card b { font-weight: 700; }
.fan-chat .ui-card small { display: block; opacity: 0.7; font-size: 11px; margin-top: 1px; }

/* shared table title (used by ui-table) */
.fan-chat .ui-table__t { font-weight: 700; font-size: 12px; margin: 0 0 5px; opacity: 0.85; padding: 10px 10px 5px; }

/* mini bar chart */
.fan-chat .ui-chart { margin: 9px 0; }
.fan-chat .ui-bar { display: flex; align-items: center; gap: 9px; font-size: 12px; margin: 5px 0; }
.fan-chat .ui-bar__l { width: 72px; flex: 0 0 auto; opacity: 0.85; text-align: right; }
.fan-chat .ui-bar__t { flex: 1; height: 9px; background: var(--surface-h, rgba(127, 127, 127, 0.18)); border-radius: 999px; overflow: hidden; }
.fan-chat .ui-bar__t i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E5253D, #ff7a59); }
.fan-chat .ui-bar__v { width: 30px; text-align: right; flex: 0 0 auto; font-weight: 600; }

/* ---- composer (pinned to bottom) ---- */
.fan-chat .fan-chat__form {
	display: flex; gap: 8px; align-items: flex-end; flex: 0 0 auto;
	padding-top: 10px; border-top: 1px solid var(--line-2, rgba(127, 127, 127, 0.2));
}
.fan-chat .fan-chat__input {
	flex: 1; resize: none; min-height: 38px; max-height: 100px;
	padding: 9px 11px; border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.35); background: #fff;
	color: #1a1a1a; font: inherit; font-size: 13px;
}
.fan-chat .fan-chat__input::placeholder { color: #8a8f98; }
.fan-chat .fan-chat__input:focus { outline: none; border-color: #E5253D; }
.fan-chat .fan-chat__send,
.fan-chat .fan-chat__btn {
	flex: 0 0 auto; border: none; border-radius: 10px; background: #E5253D; color: #fff;
	font-weight: 600; font-size: 13px; padding: 10px 16px; cursor: pointer;
}
.fan-chat .fan-chat__send:disabled,
.fan-chat .fan-chat__btn:disabled { opacity: 0.45; cursor: default; }

/* ---- login gate ---- */
.fan-chat .fan-chat__gate {
	display: flex; flex-direction: column; gap: 8px;
	background: var(--surface, rgba(127, 127, 127, 0.08)); border-radius: 12px; padding: 20px 0px 0px;
}
.fan-chat .fan-chat__gate p { margin: 0; font-size: 13px; line-height: 1.4; opacity: 0.85; font-weight: 600;}
.fan-chat .fan-chat__gate-title { 
	font: var(--display-title);
	color: var(--color-accent, #0a2240);
	margin: 0; 
	font-size: 16px; 
	line-height: 1.25; 
	opacity: 1;      
	line-height: 1.04;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.fan-chat .fan-chat__gate-sub { margin: 0; }
.fan-chat .fan-chat__field {
	width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.35); background: #fff;
	color: #1a1a1a; font: inherit; font-size: 13px;
}
.fan-chat .fan-chat__field::placeholder { color: #8a8f98; }
.fan-chat .fan-chat__field:focus { outline: none; border-color: #E5253D; }
.fan-chat .fan-chat__err { color: #E5253D; font-size: 12px; margin: 0; min-height: 14px; }
.fan-chat .fan-chat__note { opacity: 0.7; font-size: 13px; text-align: center; padding: 16px; }
.fan-chat .fan-chat__signout {
	background: none; border: none; color: inherit; opacity: 0.6; font-size: 11px;
	cursor: pointer; align-self: flex-end; text-decoration: underline; padding: 0;
}