/* MiPlugin Chat Widget Styles */

:root {
	--mp-primary:   #2563eb;
	--mp-secondary: #1e40af;
	--mp-radius:    12px;
	--mp-shadow:    0 8px 32px rgba(0,0,0,.18);
}

#miplugin-chat-root { position: fixed; z-index: 999999; }
#miplugin-chat-root[data-position="bottom-right"] { bottom: 24px; right: 24px; }
#miplugin-chat-root[data-position="bottom-left"]  { bottom: 24px; left: 24px; }

/* Toggle Button */
#miplugin-toggle-btn {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--mp-primary);
	border: none;
	cursor: pointer;
	box-shadow: var(--mp-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s, background .2s;
	position: relative;
}
#miplugin-toggle-btn:hover { transform: scale(1.08); background: var(--mp-secondary); }
#miplugin-toggle-btn svg   { width: 26px; height: 26px; fill: #fff; transition: opacity .2s; }
/* El clic siempre llega al <button> (no al SVG), así GTM ve su id/clase */
#miplugin-toggle-btn > *   { pointer-events: none; }
#miplugin-toggle-btn .icon-chat, #miplugin-toggle-btn .icon-close { position: absolute; }
#miplugin-toggle-btn .icon-close { display: none; }
#miplugin-chat-root.open #miplugin-toggle-btn .icon-chat  { display: none; }
#miplugin-chat-root.open #miplugin-toggle-btn .icon-close { display: block; }

/* Notification badge */
#miplugin-notif-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
}
#miplugin-notif-badge.visible { display: flex; }

/* Chat Window */
#miplugin-chat-window {
	position: absolute;
	bottom: 70px;
	width: 360px;
	height: 520px;
	background: #fff;
	border-radius: var(--mp-radius);
	box-shadow: var(--mp-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: scale(.9) translateY(10px);
	opacity: 0;
	pointer-events: none;
	transition: transform .2s, opacity .2s;
}
#miplugin-chat-root[data-position="bottom-right"] #miplugin-chat-window { right: 0; }
#miplugin-chat-root[data-position="bottom-left"]  #miplugin-chat-window { left: 0; }
#miplugin-chat-root.open #miplugin-chat-window {
	transform: scale(1) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Header */
#miplugin-chat-header {
	background: linear-gradient(135deg, var(--mp-primary) 0%, var(--mp-secondary) 100%);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
}
#miplugin-chat-header .mp-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,.4);
}
#miplugin-chat-header .mp-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
#miplugin-chat-header .mp-avatar-emoji {
	line-height: 1;
}
#miplugin-chat-header .mp-title   { font-weight: 700; font-size: .95rem; line-height: 1.2; }
#miplugin-chat-header .mp-status  { font-size: .75rem; opacity: .85; }
#miplugin-chat-header .mp-close   { margin-left: auto; background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 0 2px; opacity: .7; line-height: 1; }
#miplugin-chat-header .mp-close:hover { opacity: 1; }

/* Messages */
#miplugin-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}
#miplugin-chat-messages::-webkit-scrollbar { width: 4px; }
#miplugin-chat-messages::-webkit-scrollbar-thumb { background: #dde1e7; border-radius: 2px; }

/* Message Bubbles */
.mp-msg {
	display: flex;
	flex-direction: column;
	max-width: 82%;
	animation: mpFadeIn .2s ease;
}
@keyframes mpFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.mp-msg.mp-msg-bot, .mp-msg.mp-msg-ai, .mp-msg.mp-msg-agent { align-self: flex-start; }
.mp-msg.mp-msg-visitor { align-self: flex-end; }
.mp-msg.mp-msg-system  { align-self: center; max-width: 100%; }

.mp-bubble {
	white-space: pre-wrap;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: .88rem;
	line-height: 1.5;
	word-break: break-word;
}
.mp-msg-bot .mp-bubble, .mp-msg-ai .mp-bubble    { background: #f1f3f5; color: #1d2327; border-bottom-left-radius: 4px; }
.mp-msg-agent .mp-bubble                          { background: #edfaef; color: #1d2327; border-bottom-left-radius: 4px; }
.mp-msg-visitor .mp-bubble                        { background: var(--mp-primary); color: #fff; border-bottom-right-radius: 4px; }
.mp-msg-system .mp-bubble                         { background: #fffbdd; color: #856404; font-size: .8rem; border-radius: 8px; text-align: center; padding: 6px 12px; }

.mp-bubble a { color: inherit; text-decoration: underline; word-break: break-all; }

.mp-msg-time { font-size: .7rem; color: #9ca3af; margin-top: 2px; }
.mp-msg-visitor .mp-msg-time { text-align: right; }

/* Options (buttons) */
.mp-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.mp-option-btn {
	background: #fff;
	border: 1.5px solid var(--mp-primary);
	color: var(--mp-primary);
	padding: 6px 14px;
	border-radius: 20px;
	cursor: pointer;
	font-size: .82rem;
	font-weight: 600;
	transition: background .15s, color .15s;
}
.mp-option-btn:hover { background: var(--mp-primary); color: #fff; }
.mp-option-btn:disabled { opacity: .5; cursor: default; }

/* Typing indicator */
.mp-typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	background: #f1f3f5;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
}
.mp-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9ca3af;
	animation: mpDot 1.2s infinite;
}
.mp-typing span:nth-child(2) { animation-delay: .2s; }
.mp-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mpDot {
	0%, 60%, 100% { transform: translateY(0); }
	30%            { transform: translateY(-5px); }
}

/* Input Bar */
#miplugin-chat-input-bar {
	padding: 10px 12px;
	border-top: 1px solid #f0f0f0;
	display: flex;
	gap: 8px;
	align-items: center;
}
#miplugin-chat-input {
	flex: 1;
	border: 1.5px solid #dde1e7;
	border-radius: 22px;
	padding: 8px 14px;
	font-size: .88rem;
	outline: none;
	resize: none;
	font-family: inherit;
	transition: border-color .15s;
	max-height: 80px;
	overflow-y: auto;
}
#miplugin-chat-input:focus { border-color: var(--mp-primary); }
#miplugin-send-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--mp-primary);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .15s, transform .1s;
}
#miplugin-send-btn:hover { background: var(--mp-secondary); transform: scale(1.06); }
#miplugin-send-btn svg   { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }

/* Blindaje frente a los estilos de <button> del tema (padding, bordes, sombras,
   min-width...): con box-sizing border-box, el padding del tema dejaba los
   botones redondos convertidos en óvalos y sin icono. */
#miplugin-toggle-btn,
#miplugin-send-btn,
#miplugin-mic-btn {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	line-height: 1;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	outline-offset: 2px;
}
#miplugin-toggle-btn { box-shadow: var(--mp-shadow); }
#miplugin-send-btn, #miplugin-mic-btn { width: 38px; height: 38px; }
#miplugin-toggle-btn { width: 58px; height: 58px; }
#miplugin-send-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* Mic button */
#miplugin-mic-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f1f3f5;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s, transform .1s;
	position: relative;
}
#miplugin-mic-btn:hover   { background: #e2e5ea; transform: scale(1.06); }
#miplugin-mic-btn:disabled { opacity: .5; cursor: default; transform: none; }
#miplugin-mic-btn svg {
	width: 18px;
	height: 18px;
	fill: #6b7280;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity .15s;
}
#miplugin-mic-btn .icon-stop              { opacity: 0 !important; }
#miplugin-mic-btn .icon-mic               { opacity: 1 !important; }
#miplugin-mic-btn.recording               { background: #fee2e2; animation: mpPulse 1.2s infinite; }
#miplugin-mic-btn.recording .icon-mic     { opacity: 0 !important; }
#miplugin-mic-btn.recording .icon-stop    { opacity: 1 !important; fill: #ef4444; }
@keyframes mpPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
	50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* Mobile */
@media (max-width: 480px) {
	#miplugin-chat-window { width: calc(100vw - 24px); bottom: 72px; }
	#miplugin-chat-root[data-position="bottom-right"] #miplugin-chat-window { right: -12px; }
	#miplugin-chat-root[data-position="bottom-left"]  #miplugin-chat-window { left: -12px; }
}

/* Botón del shortcode [miplugin_chat_button] */
.miplugin-chat-button {
	background: var(--mp-primary, #2563eb);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 22px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
.miplugin-chat-button:hover { background: var(--mp-secondary, #1e40af); }

/* Aviso de privacidad bajo la caja de mensajes */
#miplugin-privacy {
	padding: 6px 14px 8px;
	font-size: .68rem;
	line-height: 1.35;
	color: #6b7280;
	background: #fff;
	border-top: 1px solid #f1f3f5;
}
#miplugin-privacy a { color: inherit; text-decoration: underline; }