/* Julian AI Chatbot Widget
   Brand-color-driven palette via CSS custom properties, Montserrat font
   Features: floating toggle (Lottie), voice intro overlay with gradient orb,
   chat area, cute send/receive tones, shimmer thinking indicator, quick replies,
   markdown rendering, configurable position, customizable brand colors */

/* ═══ Default brand color values - overridden by JS at runtime ═══ */
:root {
	--julian-cb-brand: #0D1B4C;
	--julian-cb-brand-light: #1a2a6c;
	--julian-cb-accent: #B89A4A;
	--julian-cb-brand-08: rgba(13, 27, 76, 0.08);
	--julian-cb-brand-06: rgba(13, 27, 76, 0.06);
	--julian-cb-brand-12: rgba(13, 27, 76, 0.12);
	--julian-cb-brand-15: rgba(13, 27, 76, 0.15);
	--julian-cb-brand-25: rgba(13, 27, 76, 0.25);
	--julian-cb-accent-15: rgba(184, 154, 74, 0.15);
	--julian-cb-accent-25: rgba(184, 154, 74, 0.25);
	--julian-cb-accent-30: rgba(184, 154, 74, 0.30);
	--julian-cb-accent-60: rgba(184, 154, 74, 0.60);
}

/* ════════════════════════════════════════════════════════════════════
   Floating toggle button - Lottie only (no gold ring, no image)
   ════════════════════════════════════════════════════════════════════ */
#julian-chatbot-toggle {
	position: fixed;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	overflow: visible;
	box-shadow: none;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Position variants for the toggle ── */
#julian-chatbot-toggle.julian-cb-pos-bottom-right  { bottom: 24px; right: 24px; }
#julian-chatbot-toggle.julian-cb-pos-right-center  { top: 50%; right: 24px; transform: translateY(-50%); }
#julian-chatbot-toggle.julian-cb-pos-top-right     { top: 24px; right: 24px; }
#julian-chatbot-toggle.julian-cb-pos-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }
#julian-chatbot-toggle.julian-cb-pos-bottom-left   { bottom: 24px; left: 24px; }
#julian-chatbot-toggle.julian-cb-pos-left-center   { top: 50%; left: 24px; transform: translateY(-50%); }
#julian-chatbot-toggle.julian-cb-pos-top-left      { top: 24px; left: 24px; }

/* Keep hover transform relative to base position */
#julian-chatbot-toggle.julian-cb-pos-bottom-right:hover  { transform: translateY(-3px) scale(1.05); }
#julian-chatbot-toggle.julian-cb-pos-top-right:hover     { transform: translateY(3px) scale(1.05); }
#julian-chatbot-toggle.julian-cb-pos-bottom-left:hover   { transform: translateY(-3px) scale(1.05); }
#julian-chatbot-toggle.julian-cb-pos-top-left:hover      { transform: translateY(3px) scale(1.05); }
#julian-chatbot-toggle.julian-cb-pos-bottom-center:hover { transform: translateX(-50%) translateY(-3px) scale(1.05); }
#julian-chatbot-toggle.julian-cb-pos-right-center:hover  { transform: translateY(-50%) translateX(-3px) scale(1.05); }
#julian-chatbot-toggle.julian-cb-pos-left-center:hover   { transform: translateY(-50%) translateX(3px) scale(1.05); }

#julian-chatbot-toggle:active {
	transform: scale(0.95);
}

/* Lottie box fills toggle, no ring, no border. tbh clean, fr minimal. */
#julian-chatbot-toggle dotlottie-wc {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

/* Fallback badge when Lottie CDN fails. lowkey solid backup. */
.julian-cb-toggle-fallback {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--julian-cb-brand);
	color: #fff;
	font-size: 32px;
	font-weight: 800;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
}

/* Subtle pulse ring, very faint, hints tap. */
#julian-chatbot-toggle::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid var(--julian-cb-accent-25);
	animation: julian-cb-pulse 2.8s ease-out infinite;
	pointer-events: none;
}

#julian-chatbot-toggle.is-open::before {
	display: none;
}

@keyframes julian-cb-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(1.35); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Chat panel
   ════════════════════════════════════════════════════════════════════ */
#julian-chatbot-panel {
	position: fixed;
	width: 380px;
	max-width: calc(100vw - 48px);
	height: 560px;
	max-height: calc(100vh - 130px);
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 20px 60px var(--julian-cb-brand-25);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(20px) scale(0.95);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

/* ── Position variants for the panel ── */
#julian-chatbot-panel.julian-cb-pos-bottom-right  { bottom: 96px; right: 24px; }
#julian-chatbot-panel.julian-cb-pos-right-center  { top: 50%; right: 24px; transform: translateY(-50%) scale(0.95); }
#julian-chatbot-panel.julian-cb-pos-top-right     { top: 96px; right: 24px; transform: translateY(-20px) scale(0.95); }
#julian-chatbot-panel.julian-cb-pos-bottom-center { bottom: 96px; left: 50%; transform: translateX(-50%) translateY(20px) scale(0.95); }
#julian-chatbot-panel.julian-cb-pos-bottom-left   { bottom: 96px; left: 24px; }
#julian-chatbot-panel.julian-cb-pos-left-center   { top: 50%; left: 24px; transform: translateY(-50%) scale(0.95); }
#julian-chatbot-panel.julian-cb-pos-top-left      { top: 96px; left: 24px; transform: translateY(-20px) scale(0.95); }

/* Open state - must reset transform per position */
#julian-chatbot-panel.is-open.julian-cb-pos-bottom-right  { transform: translateY(0) scale(1); }
#julian-chatbot-panel.is-open.julian-cb-pos-right-center  { transform: translateY(-50%) scale(1); }
#julian-chatbot-panel.is-open.julian-cb-pos-top-right     { transform: translateY(0) scale(1); }
#julian-chatbot-panel.is-open.julian-cb-pos-bottom-center { transform: translateX(-50%) translateY(0) scale(1); }
#julian-chatbot-panel.is-open.julian-cb-pos-bottom-left   { transform: translateY(0) scale(1); }
#julian-chatbot-panel.is-open.julian-cb-pos-left-center   { transform: translateY(-50%) scale(1); }
#julian-chatbot-panel.is-open.julian-cb-pos-top-left      { transform: translateY(0) scale(1); }

#julian-chatbot-panel.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════════════
   Voice intro overlay
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-voice-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	background: #0a0a12;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.julian-cb-voice-overlay.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#julian-cb-orb-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.julian-cb-voice-content {
	position: relative;
	z-index: 2;
	text-align: center;
	pointer-events: none;
}

.julian-cb-voice-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.5px;
	text-shadow: 0 0 30px var(--julian-cb-accent-60);
	margin-bottom: 8px;
}

.julian-cb-voice-status {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.julian-cb-voice-status.is-done {
	color: var(--julian-cb-accent);
}

.julian-cb-voice-skip {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 3;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 20px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	backdrop-filter: blur(8px);
}

.julian-cb-voice-skip:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

/* ════════════════════════════════════════════════════════════════════
   Chat header
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-header {
	background: linear-gradient(135deg, var(--julian-cb-brand) 0%, var(--julian-cb-brand-light) 100%);
	color: #fff;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.julian-cb-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--julian-cb-accent-25);
	border: 2px solid var(--julian-cb-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.julian-cb-avatar svg {
	width: 20px;
	height: 20px;
	color: var(--julian-cb-accent);
}

.julian-cb-header-info {
	flex: 1;
	min-width: 0;
}

.julian-cb-header-name {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.julian-cb-header-status {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
}

.julian-cb-header-status::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.julian-cb-export {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	transition: color 0.2s, background 0.2s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.julian-cb-export:hover {
	color: var(--julian-cb-accent);
	background: var(--julian-cb-accent-15);
	transform: translateY(-1px);
}

.julian-cb-export:active {
	transform: scale(0.9);
}

.julian-cb-export svg {
	width: 18px;
	height: 18px;
}

/* ── Reset / new chat button ── */
.julian-cb-reset {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	transition: color 0.2s, background 0.2s, transform 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.julian-cb-reset:hover {
	color: var(--julian-cb-accent);
	background: var(--julian-cb-accent-15);
	transform: rotate(-90deg);
}

.julian-cb-reset:active {
	transform: scale(0.9);
}

.julian-cb-reset svg {
	width: 18px;
	height: 18px;
}

/* ── Reset confirmation dialog ── */
.julian-cb-reset-confirm {
	position: absolute;
	inset: 0;
	z-index: 20;
	background: rgba(13, 27, 76, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.julian-cb-reset-confirm.is-visible {
	opacity: 1;
}

.julian-cb-reset-confirm-inner {
	background: #fff;
	border-radius: 18px;
	padding: 28px 24px 22px;
	text-align: center;
	max-width: 300px;
	width: 100%;
	box-shadow: 0 12px 40px rgba(13, 27, 76, 0.3);
	animation: julian-cb-reset-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes julian-cb-reset-pop {
	0%   { opacity: 0; transform: scale(0.85) translateY(10px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

.julian-cb-reset-confirm-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--julian-cb-accent-15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.julian-cb-reset-confirm-icon svg {
	width: 24px;
	height: 24px;
	color: var(--julian-cb-accent);
}

.julian-cb-reset-confirm-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--julian-cb-brand);
	margin-bottom: 6px;
}

.julian-cb-reset-confirm-desc {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	color: #64748b;
	line-height: 1.5;
	margin-bottom: 20px;
}

.julian-cb-reset-confirm-actions {
	display: flex;
	gap: 10px;
}

.julian-cb-reset-cancel {
	flex: 1;
	padding: 10px 16px;
	border-radius: 12px;
	border: 1.5px solid var(--julian-cb-brand-12);
	background: transparent;
	color: var(--julian-cb-brand);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.julian-cb-reset-cancel:hover {
	background: var(--julian-cb-brand-06);
}

.julian-cb-reset-go {
	flex: 1;
	padding: 10px 16px;
	border-radius: 12px;
	border: none;
	background: var(--julian-cb-brand);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.julian-cb-reset-go:hover {
	background: var(--julian-cb-accent);
	color: var(--julian-cb-brand);
}

.julian-cb-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	transition: color 0.2s, background 0.2s;
}

.julian-cb-close:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.julian-cb-close svg {
	width: 20px;
	height: 20px;
}

/* ════════════════════════════════════════════════════════════════════
   Messages area
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-messages {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
	background-color: #f8f9fb;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%230D1B4C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.06'><path d='M10 18 Q10 12 16 12 L34 12 Q40 12 40 18 L40 26 Q40 32 34 32 L22 32 L16 37 L18 32 Q10 32 10 26 Z'/><path d='M88 50 C88 47 91 45 93 47 C95 45 98 47 98 50 C98 54 93 58 93 58 C93 58 88 54 88 50 Z'/><path d='M12 92 L18 98 L28 86'/><path d='M24 92 L30 98 L40 86'/><path d='M100 14 L103 20 L110 20 L104 24 L107 30 L100 26 L93 30 L96 24 L90 20 L97 20 Z'/><circle cx='108' cy='102' r='8'/><path d='M108 92 L108 88 M108 116 L108 112 M98 102 L94 102 M122 102 L118 102 M101 95 L98 92 M115 109 L118 112 M115 95 L118 92 M101 109 L98 112'/><path d='M52 70 L52 56 Q52 52 56 52 L64 52 L68 56 L68 70 Q68 74 64 74 L56 74 Q52 74 52 70 Z'/><path d='M64 52 L64 56 L68 56'/><path d='M56 62 L64 62 M56 66 L64 66'/></g></svg>");
	background-repeat: repeat;
	background-size: 140px 140px;
	min-height: 0;
}

.julian-cb-messages::-webkit-scrollbar {
	width: 5px;
}

.julian-cb-messages::-webkit-scrollbar-thumb {
	background: var(--julian-cb-brand-15);
	border-radius: 3px;
}

.julian-cb-messages::-webkit-scrollbar-track {
	background: transparent;
}

/* ════════════════════════════════════════════════════════════════════
   Message bubbles - Framer Motion-style slide-in
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-msg {
	display: flex;
	flex-direction: column;
	max-width: 85%;
	will-change: transform, opacity;
	animation: julian-cb-msg-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes julian-cb-msg-in {
	0%   { opacity: 0; transform: translateY(20px) scale(0.92); }
	60%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.julian-cb-msg-user {
	transform-origin: bottom right;
}

.julian-cb-msg-bot {
	transform-origin: bottom left;
}

.julian-cb-msg-bot {
	align-self: flex-start;
}

.julian-cb-msg-user {
	align-self: flex-end;
	align-items: flex-end;
}

.julian-cb-bubble {
	padding: 11px 15px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.55;
	font-family: 'Montserrat', sans-serif;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.julian-cb-msg-bot .julian-cb-bubble {
	background: #fff;
	color: #1e293b;
	border: 1px solid var(--julian-cb-brand-08);
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 8px var(--julian-cb-brand-06);
}

.julian-cb-msg-user .julian-cb-bubble {
	background: var(--julian-cb-brand);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.julian-cb-msg-time {
	font-size: 10px;
	color: #94a3b8;
	margin-top: 4px;
	padding: 0 4px;
}

/* ── Markdown rendering inside bot bubbles ── */
.julian-cb-bubble-md {
	white-space: normal;
}

.julian-cb-bubble-md ul,
.julian-cb-bubble-md ol {
	margin: 6px 0;
	padding-left: 20px;
}

.julian-cb-bubble-md li {
	margin: 2px 0;
}

.julian-cb-bubble-md strong {
	font-weight: 700;
	color: var(--julian-cb-brand);
}

.julian-cb-bubble-md em {
	font-style: italic;
}

.julian-cb-bubble-md code {
	background: var(--julian-cb-brand-08);
	padding: 1px 5px;
	border-radius: 4px;
	font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
	font-size: 12px;
}

.julian-cb-bubble-md a {
	color: var(--julian-cb-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

.julian-cb-bubble-md a:hover {
	color: var(--julian-cb-brand);
}

/* ════════════════════════════════════════════════════════════════════
   Quick reply buttons
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-quick-replies {
	flex-shrink: 0;
	display: flex;
	gap: 8px;
	padding: 8px 16px 4px;
	background: #fff;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.julian-cb-quick-replies::-webkit-scrollbar {
	display: none;
}

.julian-cb-quick-replies:empty {
	display: none;
}

.julian-cb-quick-reply {
	flex-shrink: 0;
	background: var(--julian-cb-brand-06);
	border: 1.5px solid var(--julian-cb-brand-15);
	color: var(--julian-cb-brand);
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.julian-cb-quick-reply:hover {
	background: var(--julian-cb-brand);
	color: #fff;
	border-color: var(--julian-cb-brand);
	transform: translateY(-1px);
}

.julian-cb-quick-reply:active {
	transform: scale(0.96);
}

/* ════════════════════════════════════════════════════════════════════
   Thinking indicator - orb + black shimmer text (no pill/background)
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-typing {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 85%;
	padding: 4px 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	overflow: visible;
	animation: julian-cb-typing-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes julian-cb-typing-in {
	from { opacity: 0; transform: translateY(10px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.julian-cb-typing canvas {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: block;
}

.julian-cb-shimmer-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 500;
	background: linear-gradient(
		110deg,
		#404040,
		35%,
		#000,
		50%,
		#404040,
		75%,
		#404040
	);
	background-size: 200% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: julian-cb-shimmer 2s linear infinite;
	white-space: nowrap;
}

@keyframes julian-cb-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════
   Feedback controls (thumbs up/down)
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-feedback {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--julian-cb-brand-06);
}

.julian-cb-feedback-q {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
}

.julian-cb-fb-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1.5px solid var(--julian-cb-brand-12);
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: all 0.2s ease;
}

.julian-cb-fb-btn svg {
	width: 14px;
	height: 14px;
	color: #94a3b8;
	transition: color 0.2s;
}

.julian-cb-fb-btn:hover {
	border-color: var(--julian-cb-accent);
	transform: scale(1.1);
}

.julian-cb-btn:hover svg {
	color: var(--julian-cb-accent);
}

.julian-cb-fb-up.is-active {
	background: rgba(34, 197, 94, 0.15);
	border-color: #22c55e;
}

.julian-cb-fb-up.is-active svg {
	color: #22c55e;
}

.julian-cb-fb-down.is-active {
	background: rgba(239, 68, 68, 0.15);
	border-color: #ef4444;
}

.julian-cb-fb-down.is-active svg {
	color: #ef4444;
}

.julian-cb-fb-comment-box {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	animation: julian-cb-msg-in 0.25s ease;
}

.julian-cb-fb-comment-box input {
	flex: 1;
	border: 1.5px solid var(--julian-cb-brand-12);
	border-radius: 8px;
	padding: 6px 10px;
	/* >= 16px to prevent iOS zoom on focus */
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	outline: none;
	transition: border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

.julian-cb-fb-comment-box input:focus {
	border-color: var(--julian-cb-accent);
}

.julian-cb-fb-send {
	background: var(--julian-cb-brand);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	transition: background 0.2s;
}

.julian-cb-fb-send:hover {
	background: var(--julian-cb-accent);
	color: var(--julian-cb-brand);
}

.julian-cb-fb-toast {
	margin-top: 6px;
	font-size: 11px;
	color: #22c55e;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	animation: julian-cb-msg-in 0.3s ease;
}

/* ════════════════════════════════════════════════════════════════════
   Agent shuffle overlay (shown during handoff, between messages and input)
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-agent-shuffle {
	display: none;
	padding: 18px 16px 16px;
	text-align: center;
	background: rgba(255, 255, 255, 0.98);
	border-top: 1px solid var(--julian-cb-brand-08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	flex-shrink: 0;
}

.julian-cb-agent-shuffle.is-visible {
	display: block;
	animation: julian-cb-shuffle-in 0.3s ease;
}

@keyframes julian-cb-shuffle-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.julian-cb-shuffle-track {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	margin-bottom: 12px;
	overflow: hidden;
	position: relative;
}

.julian-cb-slot-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 3px solid var(--julian-cb-accent);
	box-shadow: 0 4px 16px rgba(13, 27, 76, 0.18);
	background: linear-gradient(135deg, var(--julian-cb-brand), #2a3a7c);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}

.julian-cb-slot-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.julian-cb-slot-placeholder {
	background: linear-gradient(135deg, var(--julian-cb-brand), #2a3a7c);
}

/* The selected avatar after shuffle resolves - spring pop with glow ring */
.julian-cb-slot-selected {
	width: 64px;
	height: 64px;
	border-width: 3px;
	box-shadow: 0 0 0 4px var(--julian-cb-accent-15), 0 6px 20px rgba(13, 27, 76, 0.25);
	animation: julian-cb-slot-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes julian-cb-slot-pop {
	0%   { transform: scale(0.2) rotate(-15deg); opacity: 0; }
	50%  { transform: scale(1.2) rotate(3deg); opacity: 1; }
	70%  { transform: scale(0.95) rotate(-1deg); }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

.julian-cb-shuffle-label {
	font-size: 13px;
	color: var(--julian-cb-brand);
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════
   Agent handoff log (shown after shuffle resolves - simple pic + name)
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-agent-log {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	max-width: 100%;
	animation: julian-cb-agent-log-in 0.45s ease-out both;
}

@keyframes julian-cb-agent-log-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.julian-cb-agent-log-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid var(--julian-cb-accent);
	background: linear-gradient(135deg, var(--julian-cb-brand), #2a3a7c);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}

.julian-cb-agent-log-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.julian-cb-agent-log-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--julian-cb-brand);
	font-family: 'Montserrat', sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.julian-cb-agent-log-status {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
}

/* ════════════════════════════════════════════════════════════════════
   Input area - light, rounded, single-line with circular send button
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-input-area {
	flex-shrink: 0;
	padding: 12px 16px;
	background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
	border-top: 1px solid var(--julian-cb-brand-08);
	display: flex;
	gap: 10px;
	align-items: center;
}

#julian-chatbot-input {
	flex: 1;
	border: 1.5px solid var(--julian-cb-brand-12);
	border-radius: 999px;
	padding: 12px 18px;
	background: #ffffff;
	color: var(--julian-cb-brand);
	/* font-size MUST be >= 16px to stop iOS Safari from zooming on focus */
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	outline: none;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	box-shadow: 0 2px 6px var(--julian-cb-brand-06);
}

#julian-chatbot-input:focus {
	background: #ffffff;
	border-color: var(--julian-cb-accent-60);
	box-shadow: 0 0 0 3px var(--julian-cb-accent-15), 0 2px 6px var(--julian-cb-brand-06);
}

#julian-chatbot-input::placeholder {
	color: #94a3b8;
}

#julian-chatbot-send {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--julian-cb-brand);
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	box-shadow: 0 4px 12px var(--julian-cb-brand-25);
}

#julian-chatbot-send:hover {
	background: var(--julian-cb-accent);
	box-shadow: 0 4px 14px var(--julian-cb-accent-30);
}

#julian-chatbot-send:active {
	transform: scale(0.92);
}

#julian-chatbot-send svg {
	width: 18px;
	height: 18px;
}

#julian-chatbot-send:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #94a3b8;
	box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════════════════ */
.julian-cb-footer {
	padding: 6px 16px 8px;
	text-align: center;
	font-size: 10px;
	color: #64748b;
	background: #f8f9fb;
	border-top: 1px solid var(--julian-cb-brand-06, 0.04);
	flex-shrink: 0;
}

.julian-cb-footer a {
	color: #64748b;
	text-decoration: none;
	font-weight: 600;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.03em;
	transition: color 0.2s ease;
}

.julian-cb-footer a:hover {
	color: var(--julian-cb-brand);
}

/* ════════════════════════════════════════════════════════════════════
   Responsive: mobile - full-screen chat, no zoom on inputs
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
	#julian-chatbot-toggle {
		width: 64px;
		height: 64px;
	}

	/* ── Mobile position: reset ALL desktop positions first, then apply the
	   mobile position from the data-pos-mobile attribute via attribute selectors.
	   This lets the admin set a different position for mobile vs desktop. ── */
	#julian-chatbot-toggle {
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	/* Mobile: bottom-right */
	#julian-chatbot-toggle[data-pos-mobile="bottom-right"] { bottom: 16px !important; right: 16px !important; }
	/* Mobile: bottom-left */
	#julian-chatbot-toggle[data-pos-mobile="bottom-left"] { bottom: 16px !important; left: 16px !important; }
	/* Mobile: top-right */
	#julian-chatbot-toggle[data-pos-mobile="top-right"] { top: 16px !important; right: 16px !important; }
	/* Mobile: top-left */
	#julian-chatbot-toggle[data-pos-mobile="top-left"] { top: 16px !important; left: 16px !important; }
	/* Mobile: bottom-center */
	#julian-chatbot-toggle[data-pos-mobile="bottom-center"] { bottom: 16px !important; left: 50% !important; transform: translateX(-50%) !important; }
	/* Mobile: right-center → dock bottom-right for thumb reach on mobile */
	#julian-chatbot-toggle[data-pos-mobile="right-center"] { bottom: 16px !important; right: 16px !important; }
	/* Mobile: left-center → dock bottom-left for thumb reach on mobile */
	#julian-chatbot-toggle[data-pos-mobile="left-center"] { bottom: 16px !important; left: 16px !important; }

	/* Hover effects on mobile (simplified) */
	#julian-chatbot-toggle[data-pos-mobile="bottom-right"]:hover,
	#julian-chatbot-toggle[data-pos-mobile="bottom-left"]:hover,
	#julian-chatbot-toggle[data-pos-mobile="top-right"]:hover,
	#julian-chatbot-toggle[data-pos-mobile="top-left"]:hover,
	#julian-chatbot-toggle[data-pos-mobile="right-center"]:hover,
	#julian-chatbot-toggle[data-pos-mobile="left-center"]:hover { transform: scale(1.05) !important; }
	#julian-chatbot-toggle[data-pos-mobile="bottom-center"]:hover { transform: translateX(-50%) scale(1.05) !important; }

	/* Full-screen panel on mobile regardless of position */
	#julian-chatbot-panel {
		bottom: 0 !important;
		right: 0 !important;
		left: 0 !important;
		top: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		border-radius: 0 !important;
		transform: translateY(20px) scale(0.95) !important;
	}

	#julian-chatbot-panel.is-open {
		transform: translateY(0) scale(1) !important;
	}

	.julian-cb-messages {
		padding: 16px;
		flex: 1 1 auto;
		min-height: 0;
		-webkit-overflow-scrolling: touch;
	}

	.julian-cb-header {
		padding-top: calc(16px + env(safe-area-inset-top, 0px));
		flex-shrink: 0;
	}

	.julian-cb-input-area {
		padding: 10px 12px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		flex-shrink: 0;
	}

	#julian-chatbot-input {
		padding: 11px 16px;
	}

	.julian-cb-voice-name {
		font-size: 32px;
	}
}