/**
 * mo-chat.css — Chat de orientación. Estilo basado en el demo aprobado,
 * con la paleta de marca Moriah (mo-theme.css).
 */

.moriah-chat-wrap {
	max-width: 480px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	height: 78vh;
	min-height: 480px;
	background: var(--moriah-bg);
	border-radius: var(--moriah-radius);
	overflow: hidden;
	box-shadow: var(--moriah-shadow);
	font-family: var(--moriah-font);
	color: var(--moriah-ink);
}

/* Móvil: pantalla completa tipo app */
@media (max-width: 600px) {
	.moriah-chat-wrap {
		position: fixed;
		inset: 0;
		max-width: none;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		margin: 0;
		border-radius: 0;
		box-shadow: none;
		z-index: 99999;
	}
	body.moriah-chat-open { overflow: hidden; }
}

/* ---- Cabecera ---- */
.moriah-head {
	background: var(--moriah-primary);
	color: #fff;
	padding: 12px 14px;
	padding-top: calc(12px + env(safe-area-inset-top));
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.moriah-head .moriah-av {
	width: 40px; height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}
.moriah-head .moriah-who b { font-size: 15px; display: block; }
.moriah-head .moriah-who span {
	font-size: 11.5px; opacity: 0.9;
	display: flex; align-items: center; gap: 5px;
}
.moriah-head .moriah-who span::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: #a7e8b0; display: inline-block;
}
/* Acciones de la cabecera (WhatsApp de la sede + Agendar Cita) */
.moriah-head .moriah-who { min-width: 0; }
.moriah-head .moriah-who b, .moriah-head .moriah-who span { white-space: nowrap; }
.moriah-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.moriah-wa-head {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 36px; min-width: 36px; padding: 0 12px;
	border-radius: 99px; background: var(--moriah-wa); color: #fff;
	font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1;
	box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}
.moriah-wa-head:hover { filter: brightness(0.95); }
.moriah-wa-head svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
@media (max-width: 480px) {
	.moriah-wa-head { padding: 0; width: 36px; }
	.moriah-wa-head .lbl { display: none; }
	.moriah-agendar-fixed { padding: 9px 12px; }
}

/* Botón fijo "Agendar Cita" en la cabecera (aparece tras el cuestionario) */
.moriah-agendar-fixed {
	border: none;
	border-radius: 99px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	background: var(--moriah-accent);   /* amarillo sol: contrasta con el teal */
	color: var(--moriah-ink);
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
	transition: 0.15s;
	font-family: inherit;
	white-space: nowrap;
}
.moriah-agendar-fixed:hover { background: var(--moriah-accent-dark); }
.moriah-agendar-fixed:active { transform: scale(0.97); }

/* ---- Área de mensajes ---- */
#moriah-chat-root {
	flex: 1;
	overflow-y: auto;
	padding: 16px 12px 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}
.moriah-row { display: flex; gap: 8px; align-items: flex-end; }
.moriah-row.user { justify-content: flex-end; }
.moriah-row .moriah-mini-av {
	width: 26px; height: 26px; border-radius: 50%;
	overflow: hidden; flex-shrink: 0;
	background: #fff; border: 1px solid var(--moriah-border);
}

.moriah-bubble {
	max-width: 80%;
	padding: 10px 13px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	white-space: pre-wrap;
	animation: moriah-pop 0.25s ease;
}
.moriah-row.bot .moriah-bubble {
	background: var(--moriah-bubble-bot);
	border-bottom-left-radius: 5px;
}
.moriah-row.bot .moriah-bubble.muse {
	background: #f2efe8; color: var(--moriah-muted);
	font-style: italic; font-size: 13.2px;
}
.moriah-row.user .moriah-bubble {
	background: var(--moriah-bubble-user);
	border: 1px solid var(--moriah-bubble-user-bd);
	border-bottom-right-radius: 5px;
}
@keyframes moriah-pop { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Typing ---- */
.moriah-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.moriah-typing i {
	width: 6px; height: 6px; border-radius: 50%;
	background: #b7c0bd; animation: moriah-blink 1s infinite;
}
.moriah-typing i:nth-child(2) { animation-delay: 0.2s; }
.moriah-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes moriah-blink { 0%,80% { opacity: 0.3; } 40% { opacity: 1; } }

/* ---- Chips ---- */
.moriah-chips {
	padding: 6px 4px 4px;
	display: flex; flex-wrap: wrap; gap: 8px;
	justify-content: flex-end;
}
.moriah-chip {
	border: 1.5px solid var(--moriah-primary-soft);
	color: var(--moriah-primary-dark);
	background: #fff;
	padding: 9px 16px; border-radius: 99px;
	font-size: 14px; font-weight: 600; cursor: pointer;
	transition: 0.15s;
}
.moriah-chip:hover { background: var(--moriah-primary-bg); }
.moriah-chip:active { transform: scale(0.97); }
.moriah-chip.sel { background: var(--moriah-primary); color: #fff; border-color: var(--moriah-primary); }
.moriah-chip.go { background: var(--moriah-primary); color: #fff; border-color: var(--moriah-primary); }

/* ---- Tarjetas ---- */
.moriah-card {
	background: #fff;
	border: 1px solid var(--moriah-border);
	border-radius: var(--moriah-radius);
	padding: 14px;
	max-width: 90%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	font-size: 13.5px;
	animation: moriah-pop 0.25s ease;
}
.moriah-card h4 { font-size: 14px; margin: 0 0 8px; }
.moriah-specialist { display: flex; gap: 12px; align-items: center; }
.moriah-specialist .photo {
	width: 70px; height: 70px; border-radius: 50%;
	overflow: hidden; flex-shrink: 0;
	border: 3px solid var(--moriah-primary-bg);
}
.moriah-specialist .photo img { width: 100%; height: 100%; object-fit: cover; }
.moriah-specialist b { display: block; font-size: 14.5px; }
.moriah-specialist span { font-size: 12.5px; color: var(--moriah-primary); font-weight: 600; display: block; }
.moriah-specialist .loc { font-size: 12px; color: var(--moriah-muted); display: block; margin-top: 2px; }
.moriah-specialist small { font-size: 12px; color: var(--moriah-muted); display: block; margin-top: 3px; line-height: 1.35; }

.moriah-notice {
	background: #fbf7ee; border: 1px solid #eadfc8;
	border-radius: 12px; padding: 10px 12px;
	font-size: 12.2px; color: #7a6c4e; line-height: 1.45; margin-top: 10px;
}

.moriah-btn {
	display: block; width: 100%;
	border: none; border-radius: 12px;
	padding: 13px; font-size: 14.5px; font-weight: 700;
	cursor: pointer; margin-top: 10px; transition: 0.15s;
	font-family: inherit;
}
.moriah-btn:active { transform: scale(0.98); }
.moriah-btn.primary { background: var(--moriah-primary); color: #fff; }
.moriah-btn.primary:hover { background: var(--moriah-primary-dark); }
.moriah-linklike {
	background: none; border: none; color: var(--moriah-primary);
	font-size: 12px; text-decoration: underline; cursor: pointer; margin-top: 8px;
}

/* ---- Barra de entrada ---- */
.moriah-inputbar {
	display: flex; gap: 8px;
	padding: 10px 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--moriah-border);
	box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
	flex-shrink: 0;
	align-items: center;
}
.moriah-inputbar textarea {
	flex: 1; border: 2px solid var(--moriah-primary); border-radius: 99px;
	padding: 11px 16px; font-size: 16px; outline: none;
	background: var(--moriah-primary-bg); min-width: 0; resize: none;
	max-height: 100px; font-family: inherit; line-height: 1.3;
	transition: 0.15s;
}
.moriah-inputbar textarea::placeholder { color: var(--moriah-primary-dark); opacity: 0.65; }
.moriah-inputbar textarea:focus {
	background: #fff;
	border-color: var(--moriah-primary);
	box-shadow: 0 0 0 3px var(--moriah-primary-bg);
}
.moriah-inputbar textarea:disabled {
	background: #efece6; border-color: var(--moriah-primary); color: var(--moriah-muted);
}
.moriah-inputbar textarea:disabled::placeholder { color: var(--moriah-muted); opacity: 1; }
.moriah-inputbar .moriah-send {
	width: 44px; height: 44px; border-radius: 50%;
	border: none; background: var(--moriah-primary); color: #fff;
	font-size: 17px; cursor: pointer; flex-shrink: 0;
}
.moriah-inputbar .moriah-send:disabled { background: var(--moriah-primary); cursor: default; }

/* Botón agendar destacado (amarillo sol) */
.moriah-btn.agendar { background: var(--moriah-accent); color: var(--moriah-ink); }
.moriah-btn.agendar:hover { background: var(--moriah-accent-dark); }

/* Enlace WhatsApp */
.moriah-btn.wa, .moriah-wa-link {
	background: var(--moriah-wa); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	text-decoration: none;
}
.moriah-wa-link {
	border-radius: 12px; padding: 12px; font-weight: 700;
	width: 90%; max-width: 90%; margin: 4px 0;
}

/* Botón derivación urgente (rojo) */
.moriah-btn.red { background: var(--moriah-red); color: #fff; }

/* ---- Formulario de datos del paciente (Etapa 3 — agendamiento) ---- */
.mo-form-row { margin-bottom: 10px; }
.mo-form-row label { display: block; font-size: 12px; color: var(--moriah-muted); margin-bottom: 3px; }
.moriah-input {
	border: 1px solid var(--moriah-border);
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 14px;
	font-family: var(--moriah-font);
	box-sizing: border-box;
}
.moriah-cta {
	display: inline-block;
	background: var(--moriah-primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--moriah-font);
}
.moriah-cta:hover { background: var(--moriah-primary-dark); }
.moriah-cta:disabled { opacity: 0.6; cursor: default; }