/* Xenia KnowBot — front-end chat widget styles
 * Ported from the XeniaCloud support widget. All selectors are prefixed with
 * .xkb-/#xkb- to avoid theme conflicts. The brand colour is driven by the
 * --xkb-accent CSS variable (injected inline from the accent-colour setting).
 */

.xkb-bubble {
	position: fixed; bottom: 28px; right: 28px; z-index: 9999;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--xkb-accent, #0044cc); border: none;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s;
}
.xkb-bubble:hover { transform: scale(1.08); }
.xkb-bubble svg { width: 26px; height: 26px; fill: #fff; }

.xkb-window {
	display: none; position: fixed; bottom: 96px; right: 28px;
	z-index: 9998;
	background: #fff; border-radius: 16px;
	border: 1px solid #e0e6f0;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	flex-direction: column; overflow: hidden; font-family: inherit;
	width: 360px; height: 520px;
	min-width: 300px; min-height: 380px;
	max-width: 90vw; max-height: 80vh;
}
.xkb-window.xkb-open { display: flex; }

.xkb-header {
	background: var(--xkb-accent, #0044cc); color: #fff;
	padding: 14px 18px; font-size: 15px; font-weight: 600;
	display: flex; align-items: center; justify-content: space-between;
}
.xkb-title { color: #fff; font-size: 15px; font-weight: 600; }
.xkb-header-actions { display: flex; align-items: center; gap: 10px; }
.xkb-header-note { color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 400; }
.xkb-minimize {
	background: none; border: none; color: rgba(255, 255, 255, 0.85);
	font-size: 18px; cursor: pointer; line-height: 1; padding: 0;
}

.xkb-messages {
	flex: 1; overflow-y: auto; padding: 16px;
	display: flex; flex-direction: column; gap: 10px;
	background: #f8f9fc;
}
.xkb-msg {
	max-width: 82%; padding: 10px 14px;
	border-radius: 12px; font-size: 14px; line-height: 1.5;
}
.xkb-msg.xkb-agent {
	background: var(--xkb-accent, #0044cc); color: #fff;
	align-self: flex-start; border-bottom-left-radius: 4px;
}
.xkb-msg.xkb-user {
	background: #e6ebf5; color: #1a2238;
	align-self: flex-end; border-bottom-right-radius: 4px;
}

.xkb-input-area {
	padding: 12px; border-top: 1px solid #e0e6f0;
	display: flex; gap: 8px; background: #fff;
}
.xkb-input {
	flex: 1; border: 1.5px solid #d8dee9; border-radius: 8px;
	padding: 8px 12px; font-size: 14px; outline: none; font-family: inherit;
}
.xkb-input:focus { border-color: var(--xkb-accent, #0044cc); }
.xkb-send {
	background: var(--xkb-accent, #0044cc); color: #fff; border: none;
	border-radius: 8px; padding: 8px 16px; cursor: pointer;
	font-size: 14px; font-weight: 600;
}
.xkb-send:hover { filter: brightness(1.1); }
.xkb-send:disabled { opacity: 0.5; cursor: not-allowed; }

.xkb-notice {
	padding: 6px 12px; text-align: center;
	font-size: 11px; color: #8899bb; background: #f8f9fc;
}

.xkb-end-bar {
	padding: 8px 12px; background: #f0f3fa;
	border-top: 1px solid #e0e6f0; text-align: center;
}
.xkb-end-btn {
	font-size: 12px; color: #556677; background: none;
	border: none; cursor: pointer; text-decoration: underline;
}

/* Left-edge drag-to-resize handle */
.xkb-resize-handle {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 48px;
	background: var(--xkb-accent, #0044cc);
	opacity: 0.25;
	border-radius: 0 4px 4px 0;
	cursor: ew-resize;
	transition: opacity 0.15s;
	z-index: 10;
}
.xkb-resize-handle:hover { opacity: 0.6; }

/* Typing indicator */
.xkb-typing {
	display: flex; align-items: center; gap: 4px;
	padding: 10px 14px;
}
.xkb-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--xkb-accent, #0044cc); display: inline-block;
	opacity: 0.5;
	animation: xkbTyping 1.2s infinite;
}
.xkb-typing span:nth-child(2) { animation-delay: 0.2s; }
.xkb-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes xkbTyping {
	0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
	40%           { transform: scale(1.1); opacity: 1; }
}