/* =========================================================================
   HERMES — Assistente Inteligente Senac Sergipe
   Widget flutuante: botão + painel de atendimento.
   ========================================================================= */

#hermes-senac-root {
	--hermes-azul-escuro: #0b2545;
	--hermes-azul: #2ca8ff;
	--hermes-ambar: #f5a623;
	--hermes-branco: #ffffff;
	--hermes-cinza-texto: #384253;
	--hermes-cinza-claro: #f4f6f9;
	--hermes-borda: #e6e9f0;
	--hermes-sombra: 0 18px 45px rgba(11, 37, 69, 0.18);
	--hermes-radius: 20px;
	--hermes-z: 999999;
	all: initial;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#hermes-senac-root * {
	box-sizing: border-box;
	font-family: inherit;
}

#hermes-senac-root .hermes-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   BOTÃO FLUTUANTE
   ------------------------------------------------------------------------- */
.hermes-launcher {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: var(--hermes-z);
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--hermes-branco);
	border: none;
	border-radius: 999px;
	padding: 8px 20px 8px 8px;
	box-shadow: var(--hermes-sombra);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hermes-launcher:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 50px rgba(11, 37, 69, 0.24);
}

.hermes-launcher:focus-visible {
	outline: 3px solid var(--hermes-azul);
	outline-offset: 3px;
}

.hermes-launcher img {
	width: 44px;
	height: 44px;
	display: block;
	border-radius: 50%;
}

.hermes-launcher span {
	font-size: 14px;
	font-weight: 600;
	color: var(--hermes-azul-escuro);
	white-space: nowrap;
}

.hermes-launcher.is-hidden {
	display: none;
}

/* -------------------------------------------------------------------------
   PAINEL
   ------------------------------------------------------------------------- */
.hermes-panel {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: var(--hermes-z);
	width: 400px;
	max-width: calc(100vw - 24px);
	height: min(680px, calc(100vh - 40px));
	max-height: calc(100vh - 40px);
	background: var(--hermes-branco);
	border-radius: var(--hermes-radius);
	box-shadow: var(--hermes-sombra);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.hermes-panel.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.hermes-launcher,
	.hermes-panel {
		transition: none !important;
	}
}

/* Header */
.hermes-header {
	background: linear-gradient(135deg, var(--hermes-azul-escuro), #123a6b);
	color: var(--hermes-branco);
	padding: 18px 16px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-shrink: 0;
}

.hermes-header img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	flex-shrink: 0;
}

.hermes-header-text {
	flex: 1;
	min-width: 0;
}

.hermes-header-text h2 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
}

.hermes-header-text p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
}

.hermes-header-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
}

.hermes-icon-btn {
	background: rgba(255, 255, 255, 0.14);
	border: none;
	color: var(--hermes-branco);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	transition: background 0.15s ease;
}

.hermes-icon-btn:hover {
	background: rgba(255, 255, 255, 0.26);
}

.hermes-icon-btn:focus-visible {
	outline: 2px solid var(--hermes-branco);
	outline-offset: 2px;
}

/* Corpo / conversa */
.hermes-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--hermes-cinza-claro);
}

.hermes-quick-actions-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--hermes-cinza-texto);
	margin: 4px 0 2px;
}

.hermes-quick-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hermes-pill {
	border: 1px solid var(--hermes-borda);
	background: var(--hermes-branco);
	color: var(--hermes-azul-escuro);
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hermes-pill:hover {
	border-color: var(--hermes-azul);
	background: #f0f8ff;
}

.hermes-pill:focus-visible {
	outline: 2px solid var(--hermes-azul);
	outline-offset: 2px;
}

/* Bolhas de mensagem */
.hermes-msg-row {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}

.hermes-msg-row.is-user {
	justify-content: flex-end;
}

.hermes-msg-row img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
}

.hermes-bubble {
	max-width: 78%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 13.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.hermes-msg-row.is-hermes .hermes-bubble {
	background: var(--hermes-branco);
	color: var(--hermes-cinza-texto);
	border-bottom-left-radius: 4px;
	box-shadow: 0 2px 8px rgba(11, 37, 69, 0.06);
}

.hermes-msg-row.is-user .hermes-bubble {
	background: var(--hermes-azul-escuro);
	color: var(--hermes-branco);
	border-bottom-right-radius: 4px;
}

.hermes-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: 36px;
}

.hermes-quick-replies .hermes-pill {
	padding: 7px 12px;
	font-size: 12.5px;
	font-weight: 500;
}

/* Cards (cursos / notícias) */
.hermes-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-left: 36px;
}

.hermes-card {
	background: var(--hermes-branco);
	border: 1px solid var(--hermes-borda);
	border-radius: 14px;
	padding: 14px;
	box-shadow: 0 2px 8px rgba(11, 37, 69, 0.05);
}

.hermes-card h3 {
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--hermes-azul-escuro);
}

.hermes-card p {
	margin: 0 0 8px;
	font-size: 12.5px;
	color: var(--hermes-cinza-texto);
	line-height: 1.5;
}

.hermes-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.hermes-tag {
	font-size: 11px;
	font-weight: 600;
	color: var(--hermes-azul-escuro);
	background: #eaf4ff;
	border-radius: 999px;
	padding: 3px 10px;
}

.hermes-card-cta,
.hermes-link-pill {
	display: inline-block;
	background: var(--hermes-azul-escuro);
	color: var(--hermes-branco) !important;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
	transition: background 0.15s ease;
}

.hermes-card-cta:hover,
.hermes-link-pill:hover {
	background: #123a6b;
}

.hermes-links-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: 36px;
}

/* Indicador de digitação */
.hermes-typing {
	display: flex;
	gap: 4px;
	padding: 12px 14px;
	background: var(--hermes-branco);
	border-radius: 16px;
	border-bottom-left-radius: 4px;
	width: fit-content;
	box-shadow: 0 2px 8px rgba(11, 37, 69, 0.06);
}

.hermes-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hermes-azul);
	opacity: 0.5;
	animation: hermes-bounce 1.1s infinite ease-in-out;
}

.hermes-typing span:nth-child(2) { animation-delay: 0.15s; }
.hermes-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes hermes-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
	40% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.hermes-typing span { animation: none; opacity: 0.8; }
}

/* Rodapé / campo de mensagem */
.hermes-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--hermes-borda);
	background: var(--hermes-branco);
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.hermes-textarea {
	flex: 1;
	resize: none;
	border: 1px solid var(--hermes-borda);
	border-radius: 18px;
	padding: 10px 14px;
	font-size: 13.5px;
	max-height: 90px;
	line-height: 1.4;
	color: var(--hermes-cinza-texto);
}

.hermes-textarea:focus-visible {
	outline: none;
	border-color: var(--hermes-azul);
	box-shadow: 0 0 0 3px rgba(44, 168, 255, 0.18);
}

.hermes-send-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hermes-azul-escuro);
	color: var(--hermes-branco);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.hermes-send-btn:hover {
	background: #123a6b;
}

.hermes-send-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hermes-send-btn:focus-visible {
	outline: 2px solid var(--hermes-azul);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 520px) {
	.hermes-panel {
		right: 8px;
		left: 8px;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-width: none;
		height: min(88vh, 720px);
	}

	.hermes-launcher {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.hermes-launcher span {
		display: none;
	}

	.hermes-launcher {
		padding: 6px;
	}
}