/**
 * Agentyllo AI Assistant — Frontend Chat Widget
 * Clean, professional, responsive design
 *
 * @package Agentyllo_AI_Assistant
 */

.agt-widget, .agt-widget * { box-sizing: border-box; margin: 0; padding: 0; }

.agt-widget {
	--agt-w-primary: #6c5ce7;
	--agt-w-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-family: var(--agt-w-font);
	position: fixed;
	z-index: 999999;
	line-height: 1.4;
}

.agt-widget--bottom-right { bottom: 24px; right: 24px; }
.agt-widget--bottom-left { bottom: 24px; left: 24px; }

/* === Toggle === */
.agt-widget__bubble {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--agt-w-primary); border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
}
.agt-widget__bubble:hover { transform: scale(1.06); box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.agt-widget__bubble-icon { display: flex; align-items: center; justify-content: center; }
.agt-widget__bubble-icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agt-widget__bubble::after { content: ''; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; background: #ff4757; border-radius: 50%; border: 2px solid #fff; }

/* === Window === */
.agt-widget__window {
	position: absolute; bottom: 70px;
	width: 420px; height: calc(100vh - 140px); max-height: 640px; min-height: 400px;
	background: #fff; border-radius: 16px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.15);
	display: flex; flex-direction: column; overflow: hidden;
	animation: agtSlideUp 0.3s cubic-bezier(0.4,0,0.2,1);
}
.agt-widget--bottom-right .agt-widget__window { right: 0; }
.agt-widget--bottom-left .agt-widget__window { left: 0; }
@keyframes agtSlideUp { from { opacity:0; transform: translateY(16px) scale(0.97); } to { opacity:1; transform: translateY(0) scale(1); } }

/* === Header === */
.agt-widget__header {
	background: var(--agt-w-primary); color: #fff;
	padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.agt-widget__header-info { display: flex; align-items: center; gap: 10px; }
.agt-widget__avatar {
	width: 34px; height: 34px; background: rgba(255,255,255,0.2); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.agt-widget__avatar svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.agt-widget__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.agt-widget__name { font-size: 15px; font-weight: 600; }
.agt-widget__status { font-size: 11px; opacity: 0.9; display: flex; align-items: center; gap: 5px; }
.agt-widget__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; display: inline-block; }

.agt-widget__header-btn {
	background: rgba(255,255,255,0.15); border: none; color: #fff;
	width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px; transition: background 0.2s; line-height: 1; padding: 0;
}
.agt-widget__header-btn:hover { background: rgba(255,255,255,0.3); }

/* === Messages === */
.agt-widget__messages {
	flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;
	scroll-behavior: smooth; background: #fafbfc;
}
.agt-widget__messages::-webkit-scrollbar { width: 4px; }
.agt-widget__messages::-webkit-scrollbar-track { background: transparent; }
.agt-widget__messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* === Messages === */
.agt-w-msg { max-width: 88%; animation: agtFadeIn 0.25s ease; word-break: break-word; }
@keyframes agtFadeIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }
.agt-w-msg--bot { align-self: flex-start; }
.agt-w-msg--user { align-self: flex-end; }

.agt-w-msg__bubble {
	padding: 10px 14px; font-size: 14px; line-height: 1.5;
	word-break: break-word; overflow-wrap: break-word;
}
.agt-w-msg--bot .agt-w-msg__bubble {
	background: #fff; color: #2d3436; border-radius: 4px 14px 14px 14px;
	border: 1px solid #edf0f2; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.agt-w-msg--user .agt-w-msg__bubble {
	background: var(--agt-w-primary); color: #fff; border-radius: 14px 4px 14px 14px;
}

/* Bot message markdown */
.agt-w-msg--bot .agt-w-msg__bubble strong { font-weight: 600; }
.agt-w-msg--bot .agt-w-msg__bubble em { font-style: italic; }
.agt-w-msg--bot .agt-w-msg__bubble a { color: var(--agt-w-primary); text-decoration: underline; text-underline-offset: 2px; }
.agt-w-msg--bot .agt-w-msg__bubble a:hover { text-decoration-thickness: 2px; }
.agt-w-msg--bot .agt-w-msg__bubble ul, .agt-w-msg--bot .agt-w-msg__bubble ol {
	margin: 4px 0; padding-left: 18px; list-style-position: inside;
}
.agt-w-msg--bot .agt-w-msg__bubble li { margin-bottom: 2px; line-height: 1.4; }
.agt-w-msg--bot .agt-w-msg__bubble p { margin: 0 0 6px; }
.agt-w-msg--bot .agt-w-msg__bubble p:last-child { margin: 0; }
.agt-w-msg--bot .agt-w-msg__bubble code { background: #f1f3f5; padding: 1px 4px; border-radius: 3px; font-size: 12px; }

/* Typewriter cursor */
.agt-w-msg--streaming .agt-w-msg__bubble::after {
	content: '\2588'; display: inline; color: var(--agt-w-primary);
	animation: agtBlink 0.7s steps(2) infinite; font-weight: 300; font-size: 13px;
}
@keyframes agtBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* === Thinking Indicator === */
.agt-w-thinking {
	align-self: flex-start; display: flex; flex-direction: column; gap: 6px;
	max-width: 85%; animation: agtFadeIn 0.3s ease;
}
.agt-w-thinking__bubble {
	background: #fff; border: 1px solid #edf0f2; border-radius: 4px 14px 14px 14px;
	padding: 10px 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.agt-w-thinking__status {
	display: flex; align-items: center; gap: 8px; font-size: 13px; color: #636e72; font-weight: 500;
}
.agt-w-thinking__pulse {
	width: 7px; height: 7px; border-radius: 50%; background: var(--agt-w-primary);
	animation: agtPulse 1.2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes agtPulse { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:0.3; transform: scale(0.7); } }
.agt-w-thinking__text { transition: opacity 0.2s; }

/* === Typing dots === */
.agt-w-typing {
	display: flex; gap: 5px; padding: 12px 16px;
	background: #fff; border-radius: 4px 14px 14px 14px;
	border: 1px solid #edf0f2; align-self: flex-start; max-width: 70px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.agt-w-typing__dot { width: 7px; height: 7px; border-radius: 50%; background: #b2bec3; animation: agtBounce 1.4s ease-in-out infinite; }
.agt-w-typing__dot:nth-child(2) { animation-delay: 0.16s; }
.agt-w-typing__dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes agtBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* === Feedback === */
.agt-w-feedback { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; margin: 2px 0; animation: agtFadeIn 0.3s ease; }
.agt-w-feedback__label { font-size: 11px; color: #9ca3af; }
.agt-w-feedback__btns { display: flex; gap: 4px; }
.agt-w-feedback__btn { background: none; border: 1px solid #e5e7eb; border-radius: 14px; padding: 2px 8px; font-size: 13px; cursor: pointer; transition: all 0.2s; line-height: 1.2; }
.agt-w-feedback__btn:hover { background: #f3f4f6; border-color: #d1d5db; transform: scale(1.1); }
.agt-w-feedback__thanks { font-size: 11px; color: #059669; font-weight: 500; }

/* === Input === */
.agt-widget__input {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 12px; border-top: 1px solid #edf0f2; background: #fff; flex-shrink: 0;
}
.agt-widget__input textarea {
	flex: 1; border: 1px solid #dfe4ea; border-radius: 22px;
	padding: 9px 16px; font-size: 14px; font-family: var(--agt-w-font);
	resize: none; height: 40px; max-height: 40px; outline: none; line-height: 1.4;
	background: #f8f9fa; transition: border-color 0.2s, background 0.2s;
}
.agt-widget__input textarea:focus { border-color: var(--agt-w-primary); background: #fff; box-shadow: 0 0 0 2px rgba(108,92,231,0.12); }
.agt-widget__send {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--agt-w-primary); color: #fff; border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: filter 0.2s;
}
.agt-widget__send:hover { filter: brightness(1.1); }
.agt-widget__send:disabled { background: #dfe4ea; cursor: not-allowed; }
.agt-widget__send svg { width: 18px; height: 18px; fill: #fff; }

/* === Powered === */
.agt-widget__powered { text-align: center; padding: 6px; font-size: 10px; color: #b2bec3; border-top: 1px solid #f1f3f5; background: #fff; flex-shrink: 0; }
.agt-widget__powered a { color: var(--agt-w-primary); text-decoration: none; font-weight: 600; }
.agt-widget__powered a:hover { text-decoration: underline; }

/* === Responsive === */
@media (max-width: 520px) {
	.agt-widget--bottom-right, .agt-widget--bottom-left { bottom: 16px; right: 16px; left: auto; }
	.agt-widget__window { width: calc(100vw - 32px); max-height: calc(100vh - 100px); bottom: 68px; right: 0 !important; left: auto !important; }
	.agt-widget__bubble { width: 50px; height: 50px; }
}
@media (max-height: 700px) { .agt-widget__window { max-height: calc(100vh - 100px); } }