body.dark .echo-bubble--highlight {
	background: linear-gradient( 135deg, rgba(137,47,162,.35), rgba(137,47,162,.18) );
	border-color: rgba(255,255,255,.25);
	color: #f2e6ff
}

body.dark .echo-bubble--thinking {
	background: radial-gradient(900px 250px at 10% 0%, rgba(137,47,162,.35), transparent 65%), radial-gradient(900px 250px at 90% 100%, rgba(99,102,241,.26), transparent 60%), rgba(17,17,17,.92);
	border-color: rgba(255,255,255,.16);
	box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 3px rgba(137,47,162,.16), 0 0 32px rgba(137,47,162,.20);
	color: rgba(255,255,255,.92)
}

body.dark .echo-thinking-badge {
	background: rgba(137,47,162,.22);
	border-color: rgba(255,255,255,.18);
	color: rgba(255,255,255,.90)
}

#echoSend {
	align-self: flex-end;
	height: 44px;
	min-width: 88px;
	white-space: nowrap
}

.echo-actions {
	align-items: center;
	display: flex;
	gap: 10px
}

.echo-assistant-content {
	margin-top: 0;
	margin-top: 10px;
	width: 100%
}

.echo-assistant-content .echo-cards {
	margin-top: 12px
}

.echo-body {
	backdrop-filter: blur(6px);
	background: rgba(255,255,255,.65);
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.08);
	display: flex;
	flex-direction: column;
	min-height: 520px;
	overflow: hidden
}

.echo-btn {
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.12);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 12px;
	transition: .15s ease;
	user-select: none
}

.echo-btn--primary {
	background: #111;
	border-color: #111;
	color: #fff
}

.echo-btn-loading {
	cursor: wait;
	opacity: .7
}

.echo-btn-stop {
	background: #dc2626;
	border-color: #dc2626;
	color: #fff
}

.echo-btn-stop:hover {
	background: #b91c1c
}

.echo-btn:hover {
	transform: translateY(-1px)
}

.echo-bubble {
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.10);
	font-size: 14px;
	line-height: 1.45;
	max-width: min(740px,92%);
	padding: 10px 12px;
	white-space: pre-wrap;
	word-break: break-word
}

/* Marco + profundidad SOLO en la caja de mensajes (echoMessages) */
#echoMessages.echo-messages{
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 14px;

  /* sombra interna gris (da profundidad) + una leve externa */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    inset 0 10px 22px rgba(0,0,0,.08),
    inset 0 -10px 18px rgba(0,0,0,.05),
    0 8px 18px rgba(0,0,0,.06);

  /* tu fondo actual pero más “panel” */
  background: rgba(255,255,255,.72);

  /* importante para que el borde no “coma” el scroll */
  background-clip: padding-box;
}

/* Dark mode */
body.dark #echoMessages.echo-messages{
  border-color: rgba(255,255,255,.16);
  background: rgba(17,17,17,.55);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 10px 26px rgba(0,0,0,.55),
    inset 0 -10px 18px rgba(0,0,0,.35),
    0 10px 22px rgba(0,0,0,.30);
}


.echo-bubble--highlight {
	animation: echoFadeUp .35s ease-out;
	background: linear-gradient( 135deg, rgba(137,47,162,.12), rgba(137,47,162,.05) );
	border-left: 5px solid #892fa2;
	border-radius: 14px;
	border: 1px solid rgba(137,47,162,.25);
	box-shadow: 0 8px 20px rgba(0,0,0,.06);
	color: #3a0a55;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	max-width: 100%;
	padding: 20px 22px;
	width: 100%
}

.echo-bubble--thinking {
	background: radial-gradient(1200px 200px at 10% 0%, rgba(137,47,162,.18), transparent 60%), radial-gradient(900px 200px at 90% 100%, rgba(99,102,241,.14), transparent 55%), rgba(255,255,255,.92);
	border: 1px solid rgba(137,47,162,.28);
	box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 0 0 3px rgba(137,47,162,.08), 0 0 28px rgba(137,47,162,.18);
	overflow: hidden;
	padding: 14px 14px 12px;
	position: relative
}

.echo-bubble--thinking .echo-dots span {
	background: rgba(137,47,162,.55);
	box-shadow: 0 0 10px rgba(137,47,162,.25)
}

.echo-bubble--thinking::after {
	background-image: linear-gradient(to right, rgba(0,0,0,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.035) 1px, transparent 1px);
	background-size: 22px 22px;
	content: "";
	inset: 0;
	opacity: .25;
	pointer-events: none;
	position: absolute
}

.echo-bubble--thinking::before {
	animation: echoScan 1.35s ease-in-out infinite;
	background: linear-gradient( 90deg, transparent 0%, rgba(137,47,162,.00) 35%, rgba(137,47,162,.18) 50%, rgba(137,47,162,.00) 65%, transparent 100% );
	content: "";
	inset: -40% -30%;
	mix-blend-mode: multiply;
	pointer-events: none;
	position: absolute;
	transform: translateX(-40%) rotate(6deg)
}

.echo-card {
	align-items: center;
	background: rgba(255,255,255,.95);
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.10);
	display: flex;
	gap: 10px;
	gap: 12px;
	gap: 10px;
	overflow: hidden;
	padding: 10px;
	padding: 5px;
	padding: 10px
}

.echo-card img {
	background: #f2f2f2;
	border-radius: 10px;
	border-radius: 12px;
	border-radius: 12px;
	flex: 0 0 auto;
	height: 46px;
	height: 52px;
	height: 52px;
	object-fit: cover;
	width: 46px;
	width: 52px;
	width: 52px
}

.echo-card-actions {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	flex: 0 0 auto;
	gap: 8px;
	justify-content: flex-end;
	margin-left: auto
}

.echo-card-actions a, .echo-card-actions button {
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.12);
	color: #111;
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	min-width: 0;
	min-width: 74px;
	padding: 7px 10px;
	padding: 8px 10px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap
}

.echo-card-actions a:hover, .echo-card-actions button:hover {
	transform: translateY(-1px)
}

.echo-card-main {
	flex: 1 1 auto;
	min-width: 0
}

.echo-card-sub {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 12px;
	line-height: 1.2;
	line-height: 1.25;
	margin: 4px 0 0;
	margin: 6px 0 0;
	opacity: .72;
	opacity: .75;
	overflow: hidden
}

.echo-card-title {
	font-size: 13px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.15;
	line-height: 1.2;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.echo-cards {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0,1fr));
	margin-top: 10px;
	width: 100%
}

.echo-chip {
	background: rgba(255,255,255,.9);
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.12);
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	padding: 7px 10px;
	transition: .15s ease
}

.echo-chip:hover {
	transform: translateY(-1px)
}

.echo-dots {
	display: inline-flex;
	gap: 3px;
	transform: translateY(1px)
}

.echo-dots span {
	animation: echoDot 1.1s infinite ease-in-out;
	background: rgba(0,0,0,.45);
	border-radius: 50%;
	display: inline-block;
	height: 6px;
	width: 6px
}

.echo-dots span:nth-child(2) {
	animation-delay: .15s
}

.echo-dots span:nth-child(3) {
	animation-delay: .30s
}

.echo-error {
	background: rgba(220,38,38,.08);
	border-radius: 12px;
	border: 1px solid rgba(220,38,38,.35);
	box-sizing: border-box;
	color: rgba(160,0,0,.95);
	font-size: 13px;
	margin-top: 0;
	margin-top: 8px;
	padding: 10px 12px;
	width: 100%;
	word-break: break-word
}

.echo-footer {
	align-items: flex-end;
	align-items: stretch;
	background: rgba(255,255,255,.85);
	border-top: 1px solid rgba(0,0,0,.08);
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
	padding: 12px
}

.echo-footer > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0
}

.echo-header {
	align-items: flex-start;
	backdrop-filter: blur(6px);
	background: rgba(255,255,255,.75);
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.08);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 14px 14px
}

.echo-hint {
	font-size: 11px;
	margin-top: 6px;
	opacity: .65
}

.echo-input {
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.14);
	box-sizing: border-box;
	flex: 1 1 auto;
	font-size: 14px;
	height: 44px;
	line-height: 1.25;
	line-height: 1.35;
	max-height: 140px;
	min-height: 44px;
	outline: none;
	overflow: hidden;
	padding: 10px 12px;
	resize: none;
	width: 100%
}

.echo-input:focus {
	border-color: rgba(0,0,0,.35);
	box-shadow: 0 0 0 3px rgba(0,0,0,.06)
}

.echo-messages {
	flex: 1 1 auto;
	max-height: 62vh;
	min-height: 420px;
	overflow: auto;
	overflow: auto;
	padding-right: 6px;
	padding: 16px 14px 10px
}

.echo-meta {
	font-size: 11px;
	margin-top: 6px;
	opacity: .65
}

.echo-msg {
	display: flex;
	gap: 10px;
	margin: 10px 0
}

.echo-msg--assistant .echo-bubble {
	background: #fff
}

.echo-msg--highlight {
	align-items: stretch;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	justify-content: flex-start !important;
	margin: 26px 0
}

.echo-msg--user {
	justify-content: flex-end
}

.echo-msg--user .echo-bubble {
	background: #111;
	border-color: #111;
	color: #fff
}

.echo-page {
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 120px);
	padding: 18px 10px 28px
}

.echo-player {
	backdrop-filter: blur(10px);
	background: rgba(255,255,255,.92);
	border-top: 1px solid rgba(0,0,0,.10);
	bottom: 0;
	left: 0;
	padding: 10px 12px;
	position: fixed;
	right: 0;
	z-index: 9999
}

.echo-player-btn {
	background: #111;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.12);
	color: #fff;
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	padding: 8px 10px
}

.echo-player-controls {
	display: flex;
	flex: 0 0 auto;
	gap: 8px
}

.echo-player-inner {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0 auto;
	width: min(980px,100%)
}

.echo-player-title {
	font-size: 13px;
	font-weight: 800;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.echo-sub {
	font-size: 13px;
	line-height: 1.35;
	margin: 6px 0 0;
	opacity: .75
}

.echo-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 14px 12px
}

.echo-thinking-badge {
	background: rgba(137,47,162,.08);
	border-radius: 999px;
	border: 1px solid rgba(137,47,162,.28);
	color: #3a0a55;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	padding: 4px 8px;
	white-space: nowrap
}

.echo-thinking-bar {
	background: rgba(0,0,0,.06);
	border-radius: 999px;
	height: 6px;
	margin-top: 10px;
	overflow: hidden;
	position: relative;
	z-index: 2
}

.echo-thinking-bar > span {
	animation: echoLoad 1.1s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(137,47,162,.15), rgba(137,47,162,.65), rgba(99,102,241,.45));
	border-radius: 999px;
	box-shadow: 0 0 14px rgba(137,47,162,.28);
	display: block;
	height: 100%;
	width: 42%
}

.echo-thinking-core {
	animation: echoPulse 1.05s ease-in-out infinite;
	background: rgba(137,47,162,.65);
	border-radius: 999px;
	box-shadow: 0 0 0 4px rgba(137,47,162,.12), 0 0 18px rgba(137,47,162,.35);
	height: 12px;
	width: 12px
}

.echo-thinking-title {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	font-size: 13px;
	font-weight: 900;
	gap: 10px;
	letter-spacing: .2px;
	min-width: 0
}

.echo-thinking-top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	gap: 10px;
	justify-content: space-between;
	position: relative;
	z-index: 2
}

.echo-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.1;
	margin: 0
}

.echo-typing {
	align-items: center;
	display: inline-flex;
	font-size: 13px;
	gap: 6px;
	opacity: .75;
	padding: 8px 2px 0
}

.echo-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(980px,100%)
}

.rm-panel .echo-body {
	display: flex;
	flex-direction: column
}

@keyframes echoDot {
	0%, 80%, 100% {
		opacity: .55;
		transform: scale(.75)
	}

	40% {
		opacity: 1;
		transform: scale(1)
	}
}

@keyframes echoFadeUp {
	from {
		opacity: 0;
		transform: translateY(6px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@keyframes echoLoad {
	0% {
		transform: translateX(-70%)
	}

	100% {
		transform: translateX(220%)
	}
}

@keyframes echoPulse {
	0%, 100% {
		opacity: .75;
		transform: scale(.85)
	}

	50% {
		opacity: 1;
		transform: scale(1.15)
	}
}

@keyframes echoScan {
	0% {
		opacity: .0;
		transform: translateX(-55%) rotate(6deg)
	}

	100% {
		opacity: 0;
		transform: translateX(55%) rotate(6deg)
	}

	20% {
		opacity: .8
	}

	50% {
		opacity: .35
	}
}

@media (max-width: 360px) {
	#echoSend {
		min-width: 76px
	}

	.echo-bubble--highlight {
		padding: 14px 14px
	}

	.echo-card-actions a, .echo-card-actions button {
		font-size: 11px;
		padding: 7px 8px
	}
}

@media (max-width: 520px) {
	#echoSend {
		font-size: 13px;
		font-weight: 800;
		min-width: 84px;
		padding: 9px 12px
	}

	.echo-bubble {
		font-size: 13px;
		max-width: 94%;
		padding: 9px 11px
	}

	.echo-bubble--highlight {
		font-size: 14px;
		line-height: 1.5;
		padding: 16px 16px
	}

	.echo-card {
		align-items: flex-start;
		flex-wrap: wrap
	}

	.echo-card img {
		border-radius: 10px;
		height: 46px;
		width: 46px
	}

	.echo-card-actions {
		flex-direction: row;
		flex: 1 1 100%;
		gap: 8px;
		justify-content: flex-end;
		margin-left: 0;
		width: 100%
	}

	.echo-card-actions a, .echo-card-actions button {
		font-size: 12px;
		font-weight: 800;
		padding: 8px 10px
	}

	.echo-card-main {
		flex: 1 1 auto;
		min-width: 0
	}

	.echo-chip {
		font-size: 11px;
		padding: 6px 9px
	}

	.echo-footer {
		padding: 10px
	}

	.echo-input {
		font-size: 13px;
		padding: 9px 11px
	}

	.echo-messages {
		padding: 14px 12px 8px
	}

	.echo-suggestions {
		gap: 6px;
		padding: 0 12px 10px
	}

	.echo-thinking-badge {
		font-size: 10px;
		padding: 4px 8px
	}

	.echo-thinking-core {
		height: 10px;
		width: 10px
	}

	.echo-title {
		font-size: 20px
	}

	.echo-typing {
		font-size: 12px
	}
}

@media (max-width: 720px) {
	.echo-cards {
		grid-template-columns: 1fr
	}
}

@media (min-width: 721px) {
	.echo-cards {
		grid-template-columns: repeat(2, minmax(0,1fr))
	}
}
.echo-messages.is-auto-scroll{
  scroll-behavior: smooth;
}