/* DANKA · Asistente de voz — estilo unificado con el chat (#dnk-popup-*) */
:root {
	--dnkv-red-1: rgb(233, 69, 53);
	--dnkv-red-2: rgb(199, 50, 34);
	--dnkv-red-glow: rgba(233, 69, 53, .4);
	--dnkv-violet: rgba(139, 92, 246, .45);
	--dnkv-glass: rgba(255, 255, 255, .10);
	--dnkv-glass-hover: rgba(255, 255, 255, .16);
	--dnkv-line: rgba(255, 255, 255, .22);
	--dnkv-line-warm: rgba(255, 120, 95, .35);
	--dnkv-muted: rgb(154, 154, 154);
	--dnkv-font: "Inter Tight", Inter, Helvetica, sans-serif;
}

/* ---------- Botón «Hablar» (píldora de vidrio, como los botones rápidos) ---------- */
button.dnkv-btn,
#dnk-popup-footer button.dnkv-btn {
	all: unset;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 40px !important;
	padding: 0 16px 0 13px !important;
	margin: 0 6px 0 2px !important;
	flex: 0 0 auto !important;
	border-radius: 999px !important;
	background: var(--dnkv-glass) !important;
	border: .8px solid var(--dnkv-line) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
	color: #fff !important;
	font: 600 14px/1 var(--dnkv-font) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
button.dnkv-btn svg { color: var(--dnkv-red-1); flex: 0 0 auto; }
button.dnkv-btn:hover,
#dnk-popup-footer button.dnkv-btn:hover {
	background: var(--dnkv-glass-hover) !important;
	border-color: var(--dnkv-line-warm) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 14px var(--dnkv-violet) !important;
}
button.dnkv-btn:active { transform: scale(.96) !important; }
button.dnkv-btn:focus-visible { outline: 2px solid var(--dnkv-line-warm) !important; outline-offset: 2px !important; }

/* En celulares: solo ícono, círculo del mismo tamaño que «enviar» */
@media (max-width: 480px) {
	#dnk-popup-footer button.dnkv-btn { width: 40px !important; padding: 0 !important; }
	#dnk-popup-footer button.dnkv-btn span { display: none !important; }
}

/* Botón flotante (solo si no existe el chat) */
button.dnkv-float {
	position: fixed !important; left: 20px !important; bottom: 20px !important; z-index: 99998 !important;
	height: 48px !important; padding: 0 20px 0 16px !important;
	background: rgba(8, 8, 10, .6) !important;
	backdrop-filter: blur(24px) saturate(1.5);
	-webkit-backdrop-filter: blur(24px) saturate(1.5);
}

/* ---------- Escenario a pantalla completa ---------- */
html.dnkv-lock, html.dnkv-lock body { overflow: hidden !important; }
#dnkv-stage { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 16px; }
#dnkv-stage .dnkv-logo {
	position: relative; display: block; height: 34px; width: auto; max-width: 60vw; flex: 0 0 auto;
	filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .5));
	opacity: 0; transform: translateY(-8px);
	transition: opacity .35s ease .05s, transform .45s cubic-bezier(.2, .9, .3, 1.2) .05s;
}
#dnkv-stage.dnkv-in .dnkv-logo { opacity: 1; transform: none; }
@media (max-height: 640px) { #dnkv-stage .dnkv-logo { height: 26px; } #dnkv-stage { gap: 14px; } }
#dnkv-stage[hidden] { display: none; }
#dnkv-stage .dnkv-backdrop {
	position: absolute; inset: 0;
	background:
		radial-gradient(60% 50% at 50% 50%, rgba(139, 92, 246, .16) 0%, rgba(139, 92, 246, 0) 70%),
		rgba(4, 4, 7, .62);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	opacity: 0; transition: opacity .28s ease;
}
#dnkv-stage.dnkv-in .dnkv-backdrop { opacity: 1; }

/* ---------- Panel de voz (vidrio oscuro, como #dnk-popup-box) ---------- */
#dnkv-panel {
	position: relative;
	width: min(440px, 100%);
	max-height: calc(100vh - 100px);
	display: flex; flex-direction: column;
	box-sizing: border-box;
	padding: 18px 22px 16px;
	border-radius: 28px;
	background:
		radial-gradient(120% 60% at 0% 0%, rgba(139, 92, 246, .22) 0%, rgba(139, 92, 246, 0) 55%),
		radial-gradient(100% 50% at 100% 100%, rgba(233, 69, 53, .12) 0%, rgba(233, 69, 53, 0) 60%),
		rgba(10, 10, 14, .78);
	border: .8px solid rgba(255, 255, 255, .16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(139, 92, 246, .12);
	backdrop-filter: blur(24px) saturate(1.5);
	-webkit-backdrop-filter: blur(24px) saturate(1.5);
	color: #fff;
	font: 400 14px/1.5 var(--dnkv-font);
	opacity: 0; transform: translateY(14px) scale(.96);
	transition: opacity .28s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
#dnkv-stage.dnkv-in #dnkv-panel { opacity: 1; transform: none; }
#dnkv-panel * { box-sizing: border-box; font-family: var(--dnkv-font); }

.dnkv-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.dnkv-head::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%;
	background: linear-gradient(135deg, var(--dnkv-red-1), var(--dnkv-red-2));
	box-shadow: 0 0 10px var(--dnkv-red-glow);
	animation: dnkv-blink 2.4s ease-in-out infinite;
}
@keyframes dnkv-blink { 50% { opacity: .45; } }
.dnkv-head span { flex: 1; }
#dnkv-panel button.dnkv-x {
	all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--dnkv-muted);
}
#dnkv-panel button.dnkv-x:hover { color: #fff; background: var(--dnkv-glass); }

/* Orbe vivo (canvas) */
.dnkv-orb { width: 100%; height: 240px; margin: 4px 0 2px; flex: 0 0 auto; }
.dnkv-orb canvas { display: block; width: 100%; height: 100%; }
@media (max-height: 640px) { .dnkv-orb { height: 170px; } }

.dnkv-status { text-align: center; color: var(--dnkv-muted); font-size: 13px; min-height: 18px; letter-spacing: .02em; transition: color .3s ease; }
#dnkv-panel[data-state="speaking"] .dnkv-status { color: rgb(255, 150, 130); }
#dnkv-panel[data-state="listening"] .dnkv-status { color: rgb(196, 176, 255); }

/* Subtítulos */
.dnkv-log { max-height: 150px; min-height: 0; flex: 0 1 auto; overflow-y: auto; margin: 12px 0 4px; padding-right: 4px; text-align: justify; }
.dnkv-log:empty { display: none; }
.dnkv-log p { margin: 0 0 8px; color: rgba(255, 255, 255, .92); }
.dnkv-log .dnkv-user { color: var(--dnkv-muted); }
.dnkv-log .dnkv-user b { color: var(--dnkv-red-1); font-weight: 600; }
.dnkv-log::-webkit-scrollbar { width: 4px; }
.dnkv-log::-webkit-scrollbar-thumb { background: var(--dnkv-line); border-radius: 4px; }

/* Acciones */
.dnkv-actions { display: flex; gap: 8px; margin-top: 10px; }
#dnkv-panel .dnkv-actions button {
	all: unset; box-sizing: border-box; flex: 1; height: 40px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	font: 600 14px/1 var(--dnkv-font); color: #fff; cursor: pointer;
	transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
#dnkv-panel .dnkv-actions button:active { transform: scale(.97); }
#dnkv-panel button.dnkv-mute {
	background: var(--dnkv-glass); border: .8px solid var(--dnkv-line);
}
#dnkv-panel button.dnkv-mute:hover { background: var(--dnkv-glass-hover); border-color: var(--dnkv-line-warm); }
#dnkv-panel button.dnkv-end {
	background: linear-gradient(135deg, var(--dnkv-red-1), var(--dnkv-red-2));
	box-shadow: 0 4px 15px var(--dnkv-red-glow);
}
#dnkv-panel button.dnkv-end:hover { filter: brightness(1.08); }
#dnkv-panel .dnkv-actions button:disabled { opacity: .4; cursor: default; }

.dnkv-note { text-align: center; color: rgba(154, 154, 154, .8); font-size: 11px; margin-top: 10px; }