/* RODY – IT Road Chatbot – Widget Styles */

#rody-chatbot-root {
	--rody-primary: #0B5FFF;
	--rody-secondary: #0A1E42;
	--rody-radius: 18px;
	--rody-bg: #ffffff;
	--rody-bg-alt: #F4F7FC;
	--rody-text: #10182B;
	--rody-text-muted: #6B7280;
	--rody-bubble-bot: #F1F4FA;
	--rody-bubble-user: linear-gradient(135deg, var(--rody-primary), #3E82FF);
	--rody-border: rgba(16, 24, 43, 0.08);
	--rody-shadow: 0 20px 60px rgba(10, 30, 66, 0.22);

	position: fixed;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	#rody-chatbot-root.rody-dark-auto {
		--rody-bg: #121826;
		--rody-bg-alt: #0C111C;
		--rody-text: #EDEFF5;
		--rody-text-muted: #9AA3B2;
		--rody-bubble-bot: #1D2534;
		--rody-border: rgba(255,255,255,0.08);
	}
}
#rody-chatbot-root.rody-dark-on {
	--rody-bg: #121826;
	--rody-bg-alt: #0C111C;
	--rody-text: #EDEFF5;
	--rody-text-muted: #9AA3B2;
	--rody-bubble-bot: #1D2534;
	--rody-border: rgba(255,255,255,0.08);
}

#rody-chatbot-root.rody-position-bottom-right { right: 24px; bottom: 24px; }
#rody-chatbot-root.rody-position-bottom-left { left: 24px; bottom: 24px; }

/* Launcher */
.rody-launcher {
	width: 62px; height: 62px; border-radius: 50%;
	background: linear-gradient(135deg, var(--rody-primary), #3E82FF);
	border: none; cursor: pointer; position: relative;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 12px 30px rgba(11, 95, 255, 0.4);
	transition: transform .2s ease, box-shadow .2s ease;
}
.rody-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(11, 95, 255, 0.5); }
.rody-launcher:active { transform: scale(0.96); }
.rody-launcher-badge {
	position: absolute; top: -4px; right: -4px; background: #FF4757; color: #fff;
	font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center; padding: 0 5px;
	box-shadow: 0 0 0 2px var(--rody-bg);
}

/* Panel */
.rody-panel {
	position: absolute; bottom: 78px; right: 0;
	width: 380px; max-width: calc(100vw - 24px);
	height: 600px; max-height: calc(100vh - 120px);
	background: var(--rody-bg); border-radius: var(--rody-radius);
	box-shadow: var(--rody-shadow);
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--rody-border);
	animation: rody-panel-in .28s cubic-bezier(.22,1,.36,1);
	transform-origin: bottom right;
}
.rody-position-bottom-left .rody-panel { right: auto; left: 0; transform-origin: bottom left; }

@keyframes rody-panel-in {
	from { opacity: 0; transform: translateY(16px) scale(.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.rody-header {
	background: linear-gradient(135deg, var(--rody-secondary), #142B57);
	color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between;
	flex-shrink: 0;
}
.rody-header-left { display: flex; align-items: center; gap: 12px; }
.rody-avatar {
	width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.15);
	background-size: cover; background-position: center; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.rody-avatar::before {
	content: "R"; font-size: 18px;
}
.rody-header-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.rody-header-subtitle { font-size: 12.5px; opacity: .85; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.rody-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 2px rgba(52,211,153,.3); }
.rody-header-right { display: flex; align-items: center; gap: 4px; }
.rody-lang-switch, .rody-icon-btn {
	background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
	border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; transition: background .15s ease;
}
.rody-lang-switch:hover, .rody-icon-btn:hover { background: rgba(255,255,255,0.22); }

.rody-progress { height: 3px; background: var(--rody-border); flex-shrink: 0; }
.rody-progress-bar { height: 100%; width: 8%; background: linear-gradient(90deg, var(--rody-primary), #3E82FF); transition: width .35s ease; }

.rody-messages {
	flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px;
	background: var(--rody-bg-alt); scroll-behavior: smooth;
}
.rody-msg { display: flex; gap: 8px; max-width: 85%; animation: rody-msg-in .25s ease; }
@keyframes rody-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rody-msg-bot { align-self: flex-start; }
.rody-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.rody-bubble {
	padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; color: var(--rody-text);
	background: var(--rody-bubble-bot); border-bottom-left-radius: 4px; white-space: pre-wrap; word-break: break-word;
}
.rody-msg-user .rody-bubble {
	background: var(--rody-bubble-user); color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px;
}
.rody-bubble-avatar {
	width: 26px; height: 26px; border-radius: 50%; background: var(--rody-secondary); flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; margin-top: 2px;
}

.rody-typing { padding: 0 18px 8px; display: flex; gap: 4px; background: var(--rody-bg-alt); }
.rody-typing span {
	width: 7px; height: 7px; border-radius: 50%; background: var(--rody-text-muted); opacity: .6;
	animation: rody-typing-bounce 1.2s infinite ease-in-out;
}
.rody-typing span:nth-child(2) { animation-delay: .15s; }
.rody-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes rody-typing-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

.rody-quick-replies {
	padding: 0 18px 12px; display: flex; flex-wrap: wrap; gap: 8px; background: var(--rody-bg-alt); flex-shrink: 0;
	max-height: 160px; overflow-y: auto;
}
.rody-quick-reply-btn {
	border: 1.5px solid var(--rody-primary); color: var(--rody-primary); background: var(--rody-bg);
	padding: 9px 14px; border-radius: 20px; font-size: 13.5px; font-weight: 600; cursor: pointer;
	transition: all .15s ease; white-space: nowrap;
}
.rody-quick-reply-btn:hover { background: var(--rody-primary); color: #fff; transform: translateY(-1px); }

.rody-footer {
	display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--rody-border);
	background: var(--rody-bg); flex-shrink: 0;
}
.rody-text-input {
	flex: 1; border: 1.5px solid var(--rody-border); border-radius: 22px; padding: 10px 16px; font-size: 14px;
	background: var(--rody-bg-alt); color: var(--rody-text); outline: none; transition: border-color .15s ease;
}
.rody-text-input:focus { border-color: var(--rody-primary); }
.rody-send-btn {
	width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
	background: linear-gradient(135deg, var(--rody-primary), #3E82FF);
	display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.rody-send-btn:hover { transform: scale(1.06); }
.rody-back-btn { color: var(--rody-text-muted); background: var(--rody-bg-alt); }

@media (max-width: 480px) {
	#rody-chatbot-root.rody-position-bottom-right,
	#rody-chatbot-root.rody-position-bottom-left { right: 12px; left: 12px; bottom: 12px; }
	.rody-panel { width: 100%; height: calc(100vh - 100px); bottom: 74px; right: 0; left: 0; }
}

.rody-no-animations * { animation: none !important; transition: none !important; }

/* Scrollbars */
.rody-messages::-webkit-scrollbar, .rody-quick-replies::-webkit-scrollbar { width: 6px; }
.rody-messages::-webkit-scrollbar-thumb, .rody-quick-replies::-webkit-scrollbar-thumb {
	background: var(--rody-border); border-radius: 4px;
}