/**
 * n8n Chat theme layer
 */

:root {
	/* Core brand colors (dark mode leaning defaults) */
	--chat--color--primary: #8b7dff;
	--chat--color--primary-shade-50: #6f66e6;
	--chat--color--primary--shade-100: #5b52d0;
	--chat--color--secondary: #6f66e6;
	--chat--color-secondary-shade-50: #5b52d0;

	/* Text & surfaces */
	--chat--color-white: #ffffff;
	--chat--color-light: #1c1c22;
	--chat--color-light-shade-50: #252531;
	--chat--color-light-shade-100: #323243;
	--chat--color-medium: #9fa4b8;
	--chat--color-dark: #121212;
	--chat--color-disabled: #55586a;
	--chat--color-typing: #8b7dff;

	/* Layout & motion */
	--chat--spacing: 1rem;
	--chat--border-radius: 0.75rem;
	--chat--transition-duration: 0.15s;

	/* Window sizing */
	--chat--window--width: 400px;
	--chat--window--height: 600px;

	/* Header */
	--chat--header-height: auto;
	--chat--header--padding: var(--chat--spacing);
	--chat--header--background: #121212;
	--chat--header--color: #eaeaea;
	--chat--header--border-top: 1px solid #252531;
	--chat--header--border-bottom: 1px solid #252531;
	--chat--heading--font-size: 1.2rem;
	--chat--subtitle--font-size: 0.85rem;
	--chat--subtitle--line-height: 1.6;

	/* Messages */
	--chat--textarea--height: 56px;
	--chat--message--font-size: 0.95rem;
	--chat--message--padding: calc(var(--chat--spacing) * 0.85);
	--chat--message--border-radius: 0.75rem;
	--chat--message-line-height: 1.6;

	/* Bot & user bubbles */
	--chat--message--bot--background: #18181c;
	--chat--message--bot--color: #eaeaea;
	--chat--message--bot--border: 1px solid #262636;
	--chat--message--user--background: var(--chat--color--primary);
	--chat--message--user--color: #ffffff;
	--chat--message--user--border: none;
	--chat--message--pre--background: #18181c;

	/* Launcher / toggle */
	--chat--toggle--background: #ffffff;
	--chat--toggle--hover--background: #ffffff;
	--chat--toggle--active--background: #ffffff;
	--chat--toggle--color: #000000;
	--chat--toggle--size: 64px;

	/* Input */
	--chat--input--background: #18181c;
	--chat--input--send--button--background: #18181c;
	--chat--input--text-color: #eaeaea;

	/* Font */
	--font-weight--bold: bold;
}

/* Small UI tweaks (safe class-based overrides) */
.chat-header p {
	display: none;
}

.chat-header h1 {
	margin-bottom: 0;
}

.chat-get-started-footer .chat-powered-by {
	visibility: hidden !important;
}

@keyframes n8n-chat-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

.n8n-chat-launcher,
.n8n-chat-launcher.n8n-chat-launcher--open {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	animation: n8n-chat-pulse 2.5s infinite ease-in-out;
}

.chat-window-wrapper .chat-window-toggle {
	background: var(--chat--toggle--background) !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 2px #050509, 0 2px 12px rgba(0, 0, 0, 0.7) !important;
	animation: n8n-chat-pulse 3s infinite ease-in-out;
}

.chat-window-wrapper .chat-window-toggle svg,
.chat-window-wrapper .chat-window-toggle path {
	fill: var(--chat--toggle--color) !important;
	stroke: var(--chat--toggle--color) !important;
}

.n8n-chat-header__avatar img {
	object-fit: contain !important;
	width: 120px !important;
	height: auto !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.n8n-chat p {
	font-size: 14px !important;
}

.n8n-chat h1, .n8n-chat h2, .n8n-chat h3, .n8n-chat h4, .n8n-chat h5 {
	color: var(--chat--message--bot--color);
}

.chat-message-markdown img {
	display: block;
	width: auto;
	max-width: min(120px, 100%);
	aspect-ratio: 1;
	height: auto;
	max-height: 120px;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px !important;
	margin: 0.25rem 0 0.5rem;
}

.chat-message-markdown table {
	width: 100%;
	margin: 0.5rem 0 0.75rem;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
	border-collapse: separate;
	border-spacing: 0;
	border: 0 !important;
}

.chat-message-markdown table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.chat-message-markdown thead th {
	color: var(--chat--message--bot--color);
	font-weight: 600;
}

.chat-message-markdown th,
.chat-message-markdown td {
	padding: 0.5rem 0.65rem;
	vertical-align: top;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-message-markdown tbody tr:last-child td {
	border-bottom: none;
}

.chat-message-markdown tbody td:first-child {
	color: rgba(234, 234, 234, 0.78);
	white-space: nowrap;
}