.fcc-app {
	--fcc-bg: #000000;
	--fcc-accent: #29e0ff;      /* cian: título, canales, labels, links */
	--fcc-sys: #3ddc84;         /* verde: mensajes de sistema (entró a la sala, etc) */
	--fcc-admin: #ff5c5c;       /* rojo/coral: admin */
	--fcc-mod: #ffd166;         /* amarillo/dorado: moderador */
	--fcc-socio: #ff5fd1;       /* magenta: socios comunes */
	--fcc-jester: #ffb84d;      /* dorado/naranja: Jester */
	--fcc-self: #f2f2f2;        /* blanco: tu propio nick */
	--fcc-divider: #ff6b3d;     /* rojo/naranja: línea divisoria */
	--fcc-text: #e8e8e8;
	--fcc-muted: #8a8a8a;
	--fcc-line: #2a2a2a;
	font-family: 'JetBrains Mono', ui-monospace, Consolas, Menlo, Monaco, 'Liberation Mono', monospace;
	background: var(--fcc-bg);
	color: var(--fcc-text);
	border: none;
	border-radius: 0;
	overflow: hidden;
	font-size: 13px;
}

/*
 * BLINDAJE DE BOTONES: muchos temas y Elementor le aplican su propio estilo
 * a todos los <button> del sitio (bordes gruesos, padding grande, mayúsculas).
 * "all: unset" limpia eso por completo antes de aplicar el estilo propio,
 * y cada regla puntual de abajo usa !important para que no se vuelva a pisar.
 */
.fcc-app button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit !important;
}

.fcc-locked {
	font-family: 'JetBrains Mono', ui-monospace, Consolas, Menlo, Monaco, 'Liberation Mono', monospace;
	background: #000;
	color: #e8e8e8;
	padding: 26px;
	text-align: center;
	font-size: 13px;
}
.fcc-locked a { color: var(--fcc-accent); }

.fcc-topbar {
	display: flex; align-items: center; gap: 11px;
	padding: 13px 18px; border-bottom: 1px solid var(--fcc-line);
}
.fcc-brand { color: var(--fcc-accent); font-weight: 700; letter-spacing: 1.2px; font-size: 15px; }
.fcc-toggle-channels {
	display: none !important; color: var(--fcc-accent) !important; font-size: 12px !important;
}

.fcc-body.fcc-body { display: flex !important; min-height: 540px; }

.fcc-sidebar {
	width: 220px; padding: 16px 11px 16px 0; background: transparent;
}
.fcc-label {
	color: var(--fcc-muted); font-size: 11px; letter-spacing: 1.2px; margin-bottom: 11px;
	border-bottom: 1px solid var(--fcc-line); padding-bottom: 7px;
}
.fcc-channel-list { list-style: none; margin: 0; padding: 0; }
.fcc-channel-list li {
	padding: 3px 0; cursor: pointer; color: var(--fcc-accent); font-size: 13px;
	display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.fcc-unread-badge { color: var(--fcc-sys); font-size: 10px; font-weight: 700; }
.fcc-channel-list li.active { color: var(--fcc-accent); font-weight: 700; }
.fcc-channel-list li:hover { text-decoration: underline; }
.fcc-directory-item { color: var(--fcc-muted) !important; font-style: italic; border-bottom: 1px solid var(--fcc-line); padding-bottom: 8px !important; margin-bottom: 5px; }
.fcc-directory-item.active { color: var(--fcc-accent) !important; font-style: normal; }

.fcc-directory-row {
	display: flex; align-items: baseline; gap: 11px; padding: 4px 0; cursor: pointer; flex-wrap: wrap;
	border-bottom: 1px solid var(--fcc-line);
}
.fcc-directory-row:hover { background: rgba(255,255,255,0.03); }
.fcc-directory-channel { font-weight: 700; min-width: 130px; }
.fcc-directory-count { color: var(--fcc-muted); font-size: 10px; }
.fcc-directory-desc { color: var(--fcc-text); font-size: 11px; flex: 1; min-width: 160px; }

.fcc-main.fcc-main { flex: 1; display: flex !important; flex-direction: column !important; min-width: 0; min-height: 0; border-left: 1px solid var(--fcc-line); }
.fcc-channel-header {
	padding: 13px 18px; border-bottom: 1px solid var(--fcc-line); color: var(--fcc-accent); font-weight: 700; font-size: 15px;
	display: flex; align-items: center; justify-content: space-between;
}
.fcc-app #fcc-share-mode-btn {
	color: var(--fcc-muted) !important; font-size: 13px !important; opacity: 0.75;
}
.fcc-app #fcc-share-mode-btn:hover { opacity: 1; color: var(--fcc-accent) !important; }
.fcc-app.fcc-share-mode #fcc-share-mode-btn { color: var(--fcc-accent) !important; opacity: 1; }

.fcc-share-bar {
	display: flex; align-items: center; gap: 14px; padding: 8px 18px;
	border-bottom: 1px solid var(--fcc-line); font-size: 10px; color: var(--fcc-muted);
}
.fcc-app .fcc-share-bar button { font-size: 10px !important; }
.fcc-app #fcc-share-cancel-btn { color: var(--fcc-muted) !important; }
.fcc-app #fcc-share-cancel-btn:hover { color: var(--fcc-admin) !important; text-decoration: underline; }
.fcc-app #fcc-share-send-btn { color: var(--fcc-sys) !important; font-weight: 700 !important; }
.fcc-app #fcc-share-send-btn:disabled { color: var(--fcc-muted) !important; cursor: default; }
.fcc-app #fcc-share-send-btn:not(:disabled):hover { text-decoration: underline; }

.fcc-msg-check { display: none; align-items: center; margin-right: 2px; }
.fcc-share-mode .fcc-msg-check { display: inline-flex; }
.fcc-msg-checkbox { accent-color: var(--fcc-accent); width: 13px; height: 13px; cursor: pointer; }

.fcc-sidebar-right {
	width: 205px; padding: 16px 0 16px 11px; background: transparent; border-left: 1px solid var(--fcc-line);
	display: flex; flex-direction: column;
}
.fcc-user-list { list-style: none; margin: 0 0 16px; padding: 0; }
.fcc-user-list li { padding: 2px 0; font-size: 12px; }
.fcc-user-staff { color: var(--fcc-admin); font-weight: 700; }
.fcc-user-staff.fcc-user-mod { color: var(--fcc-mod); }
.fcc-user-plain { color: var(--fcc-text); }
.fcc-user-divider { border-top: 1px solid var(--fcc-line); margin: 6px 0; padding: 0 !important; }
.fcc-muted-note { color: var(--fcc-muted); font-size: 11px; font-style: italic; }

.fcc-nick-box { margin-top: auto; }
.fcc-email-toggle { margin-top: 11px; font-size: 10px; color: var(--fcc-muted); }
.fcc-email-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.fcc-email-toggle input[type=checkbox] { accent-color: var(--fcc-accent); width: 12px; height: 12px; }
#fcc-nick-view { display: flex; align-items: center; gap: 8px; font-size: 12px; }
#fcc-my-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid var(--fcc-line); }
#fcc-nick-current { color: var(--fcc-self); font-weight: 700; }
.fcc-app #fcc-nick-edit-btn {
	color: var(--fcc-accent) !important; font-size: 10px !important; opacity: 0.8;
}
.fcc-app #fcc-nick-edit-btn:hover { opacity: 1; text-decoration: underline; }
#fcc-nick-edit { display: flex; gap: 6px; margin-top: 3px; }
#fcc-nick-edit input[type=text] {
	flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--fcc-line);
	color: var(--fcc-text); padding: 3px 2px; font-family: inherit; font-size: 11px;
}
#fcc-nick-edit input[type=text]:focus { outline: none; border-bottom-color: var(--fcc-accent); }
.fcc-app #fcc-nick-save-btn { color: var(--fcc-sys) !important; font-size: 12px !important; font-weight: 700 !important; }
.fcc-avatar-upload { margin-top: 6px; }
.fcc-app #fcc-avatar-btn { color: var(--fcc-accent) !important; font-size: 11px !important; opacity: 0.8; }
.fcc-app #fcc-avatar-btn:hover { opacity: 1; text-decoration: underline; }

.fcc-messages.fcc-messages.fcc-messages {
	/* OJO: esta altura tiene que coincidir siempre con el valor forzado por JS
	   en fcc-app.js (función enforceScrollBox) — si se cambia acá, cambiar allá. */
	display: block !important;
	flex: 1 1 auto; padding: 18px 20px;
	overflow-y: auto !important; overflow-x: hidden !important;
	max-height: 520px !important; height: 520px !important;
	min-height: 0 !important;
	scrollbar-width: thin;
	scrollbar-color: #2a2a2a #000000;
}
.fcc-messages::-webkit-scrollbar { width: 10px; }
.fcc-messages::-webkit-scrollbar-track { background: #000000; }
.fcc-messages::-webkit-scrollbar-thumb { background-color: #2a2a2a; border: 2px solid #000000; border-radius: 0; }
.fcc-messages::-webkit-scrollbar-thumb:hover { background-color: #3a3a3a; }

/* Cada mensaje se ve como una línea de log de IRC, sin caja ni avatar, todo en una sola fila */
.fcc-msg { margin-bottom: 9px; }
.fcc-msg-line { display: flex; align-items: flex-start; gap: 14px; }
.fcc-msg-main { flex: 1 1 auto; min-width: 0; line-height: 1.55; font-size: 13px; }
.fcc-msg-time { color: var(--fcc-muted); font-size: 12px; }
.fcc-msg-user { font-weight: 700; color: var(--fcc-socio); }
.fcc-msg-user.fcc-mentionable { cursor: pointer; }
.fcc-msg-user.fcc-mentionable:hover { text-decoration: underline; }

.fcc-avatar-wrap { position: relative; display: inline-block; vertical-align: middle; }
.fcc-avatar-mini {
	width: 16px; height: 16px; border-radius: 50%; object-fit: cover;
	vertical-align: middle; display: inline-block; border: 1px solid var(--fcc-line);
}
.fcc-avatar-tooltip {
	display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 6px;
	width: 220px; border-radius: 6px; overflow: hidden;
	border: 2px solid var(--fcc-line); box-shadow: 0 6px 20px rgba(0,0,0,0.7); z-index: 30;
	background: #0a0a0a;
}
.fcc-avatar-tooltip img { display: block; width: 220px; height: 220px; object-fit: cover; }
.fcc-avatar-tooltip-name {
	display: block; padding: 6px 8px; font-size: 12px; font-weight: 700;
	color: var(--fcc-accent); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fcc-avatar-wrap:hover .fcc-avatar-tooltip { display: block; }
.fcc-user-mentionable { cursor: pointer; }
.fcc-user-mentionable:hover { text-decoration: underline; }
.fcc-msg-user.admin { color: var(--fcc-admin); }
.fcc-msg-user.moderator { color: var(--fcc-mod); }
.fcc-msg-user.jester { color: var(--fcc-jester); }
.fcc-msg-user.self { color: var(--fcc-self); }

.fcc-msg-inline-actions {
	flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-top: 3px;
}
.fcc-app .fcc-msg-inline-actions button {
	background: transparent !important; border: none !important; box-shadow: none !important;
	color: var(--fcc-muted) !important; font-size: 12px !important; padding: 0 !important; margin: 0 !important;
	min-width: 0 !important; width: auto !important; height: auto !important; line-height: normal !important;
	text-transform: none !important; letter-spacing: normal !important; border-radius: 0 !important;
	opacity: 0.7;
}
.fcc-app .fcc-msg-inline-actions button:hover { color: var(--fcc-accent) !important; opacity: 1; }
.fcc-app .fcc-msg-inline-actions .fcc-delete:hover { color: var(--fcc-admin) !important; }
.fcc-app .fcc-msg-inline-actions .fcc-like.fcc-liked { color: var(--fcc-sys) !important; opacity: 1; }
.fcc-chevron { font-size: 10px; }

/* Líneas de sistema: "* Fulano ha entrado en #canal" */
.fcc-sys {
	color: var(--fcc-sys);
	font-size: 12px;
	padding-top: 9px;
	margin-top: 6px;
	margin-bottom: 11px;
	border-top: 1px solid var(--fcc-divider);
}
.fcc-sys:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.fcc-msg-content { color: var(--fcc-text); word-break: break-word; white-space: pre-wrap; }
.fcc-msg-content a { color: var(--fcc-accent); }
.fcc-msg-image { margin: 0 0 7px 0; max-width: 360px; }
.fcc-msg-image img { width: 100%; display: block; border-radius: 0 !important; box-shadow: none !important; }

.fcc-comments { margin-top: 6px; padding-left: 18px; }

.fcc-image-preview {
	position: absolute;
	bottom: 100%;
	left: 18px;
	margin-bottom: 9px;
	max-width: 320px;
	background: #000;
	border: 1px solid var(--fcc-line);
	box-shadow: 0 -6px 18px rgba(0,0,0,0.6);
	z-index: 20;
}
.fcc-image-preview img { width: 100%; max-height: 270px; object-fit: contain; display: block; }
.fcc-app .fcc-image-preview button {
	position: absolute; top: 4px; right: 4px;
	background: rgba(0,0,0,0.7) !important; color: #fff !important; font-size: 16px !important;
	width: 22px !important; height: 22px !important; line-height: 22px !important; text-align: center;
	border-radius: 0 !important;
}

.fcc-load-more { margin-bottom: 14px; }
.fcc-app .fcc-load-more button {
	background: transparent !important; border: none !important; box-shadow: none !important;
	color: var(--fcc-muted) !important; padding: 0 !important; margin: 0 !important;
	font-size: 12px !important; min-width: 0 !important; width: auto !important; height: auto !important;
	text-transform: none !important; border-radius: 0 !important;
}
.fcc-app .fcc-load-more button:hover { color: var(--fcc-accent) !important; text-decoration: underline; }

.fcc-composer { position: relative; display: flex; gap: 11px; border-top: 1px solid var(--fcc-line); padding: 11px 18px; align-items: center; }
.fcc-composer input[type=text] {
	flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--fcc-line);
	color: var(--fcc-text); padding: 7px 2px; font-family: inherit; font-size: 13px; box-shadow: none;
}
.fcc-composer input[type=text]:focus { outline: none; border-bottom-color: var(--fcc-accent); box-shadow: none; }

.fcc-app .fcc-composer button {
	background: transparent !important; border: none !important; box-shadow: none !important;
	color: var(--fcc-accent) !important; padding: 0 !important; margin: 0 !important;
	font-weight: 700 !important; letter-spacing: 0.5px; font-size: 13px !important;
	min-width: 0 !important; width: auto !important; height: auto !important; text-transform: none !important;
	border-radius: 0 !important;
}
.fcc-app .fcc-composer button:hover { text-decoration: underline; }
.fcc-app #fcc-attach-btn { color: var(--fcc-accent) !important; font-size: 16px !important; }

.fcc-hint { font-size: 10px; color: var(--fcc-muted); padding: 0 18px 9px; }

@media (max-width: 900px) {
	.fcc-toggle-channels { display: inline-block !important; }
	.fcc-sidebar { display: none; position: absolute; z-index: 5; height: 100%; background: #000; padding-left: 11px; }
	.fcc-sidebar.open { display: block; }
	.fcc-body { position: relative; }
	.fcc-main { border-left: none; }
	.fcc-sidebar-right { display: none; }
}

/* -------------------- Aviso de privacidad -------------------- */
.fcc-privacy-overlay {
	position: absolute; inset: 0; z-index: 50;
	background: rgba(0,0,0,0.88);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.fcc-privacy-modal {
	background: #0a0a0a; border: 1px solid var(--fcc-line); border-radius: 6px;
	padding: 20px; max-width: 380px; width: 100%;
}
.fcc-privacy-modal h3 { color: var(--fcc-accent); margin: 0 0 10px; font-size: 15px; }
.fcc-privacy-modal p { color: var(--fcc-text); font-size: 12px; line-height: 1.5; margin: 0 0 14px; }
.fcc-privacy-check {
	display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
	font-size: 11px; color: var(--fcc-text); margin-bottom: 10px; line-height: 1.4;
}
.fcc-privacy-check input[type=checkbox] { accent-color: var(--fcc-accent); margin-top: 2px; flex-shrink: 0; }
.fcc-privacy-birthday { margin: 12px 0 16px; }
.fcc-privacy-birthday label { display: block; font-size: 10px; color: var(--fcc-muted); margin-bottom: 5px; }
.fcc-privacy-birthday input[type=date] {
	background: #000; border: 1px solid var(--fcc-line); color: var(--fcc-text);
	padding: 6px 8px; border-radius: 3px; font-size: 12px; width: 100%;
}
#fcc-privacy-accept-btn {
	width: 100%; background: var(--fcc-accent); color: #000; border: none;
	padding: 9px; border-radius: 3px; font-weight: 700; cursor: pointer;
}
#fcc-privacy-accept-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.fcc-privacy-footer { margin-top: 10px; }
#fcc-delete-my-data-btn {
	background: transparent; border: none; color: var(--fcc-muted);
	font-size: 10px; text-decoration: underline; cursor: pointer; padding: 0;
}
#fcc-delete-my-data-btn:hover { color: var(--fcc-admin); }