/* ==================================================== */
/* TEMA DARK ESOTÉRICO - MYSTIC WARMTH EDITION v2.3 */
/* INTERFAZ MEJORADA CON CRÉDITOS EN DESPLEGABLE */
/* ==================================================== */

:root {
/* --- PALETA BASE: OBSIDIANA Y SOMBRA --- */
--tai-bg-deep: #050505;          /* Fondo absoluto */
--tai-bg-surface: #0f1014;       /* Superficie de tarjetas */
--tai-bg-glass: rgba(20, 20, 25, 0.75); /* Efecto cristal */

/* --- ACENTOS: CALIDEZ MÍSTICA MEJORADA --- */
--tai-gold-dim: #b59a65;         /* Oro antiguo más cálido */
--tai-gold-bright: #e6c166;      /* Oro más cálido y luminoso */
--tai-purple-deep: #3d2969;      /* Púrpura más cálido */
--tai-purple-glow: #b8a3ff;      /* Luz púrpura más suave */
--tai-accent-warm: #e6a2a2;      /* Rosa cálido (antes #cf6679) */
--tai-accent-active: #ffd700;    /* Dorado para estados activos */

/* --- TEXTOS MEJORADOS --- */
--tai-text-primary: #f1f5f9;     /* Blanco más suave */
--tai-text-secondary: #cbd5e1;   /* Gris azulado más claro */
--tai-text-muted: #94a3b8;       /* Texto apagado */
--tai-text-accent: #e6a2a2;      /* Color acento consistente */

/* --- BORDES Y SOMBRAS MEJORADAS --- */
--tai-border-subtle: rgba(230, 162, 162, 0.25); /* Borde rosa cálido */
--tai-border-active: rgba(230, 193, 102, 0.5); /* Borde dorado activo */
--tai-shadow-ambient: 0 10px 40px -10px rgba(0,0,0,0.8);
--tai-shadow-glow: 0 0 25px rgba(184, 163, 255, 0.2);
--tai-shadow-warm: 0 0 20px rgba(230, 162, 162, 0.2);
}

/* ================= OPTIMIZACIONES DE COMPATIBILIDAD ================= */

/* Reset básico para mejor compatibilidad */
.taichat-instance *,
.taichat-instance *:before,
.taichat-instance *:after {
    box-sizing: border-box;
}

/* Mejorar renderizado de fuentes en todos los dispositivos */
.taichat-instance {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ================= ESTRUCTURA PRINCIPAL ================= */

.taichat-instance {
font-family: 'Quicksand', 'Segoe UI', sans-serif;
max-width: 900px;
margin: 40px auto;
background: radial-gradient(circle, #0b0c10, #1f2833);
background-size: cover;
background-blend-mode: multiply;
border-radius: 24px;
box-shadow: var(--tai-shadow-ambient), 
0 0 0 1px rgba(230, 162, 162, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
position: relative;
border: 1px solid rgba(230, 162, 162, 0.1);
}

/* Fondo con ruido sutil mejorado y elementos astrológicos/tarotísticos */
.taichat-instance::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: 
radial-gradient(circle at 20% 30%, rgba(230, 162, 162, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(184, 163, 255, 0.03) 0%, transparent 50%),
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),
/* Estrellas */
radial-gradient(circle, white, transparent) 10% 10%,
radial-gradient(circle, white, transparent) 20% 20%,
radial-gradient(circle, white, transparent) 30% 30%,
radial-gradient(circle, white, transparent) 40% 40%,
radial-gradient(circle, white, transparent) 50% 50%,
radial-gradient(circle, white, transparent) 60% 60%,
radial-gradient(circle, white, transparent) 70% 70%,
radial-gradient(circle, white, transparent) 80% 80%,
radial-gradient(circle, white, transparent) 90% 90%;
background-size: 
10px 10px, 15px 15px, 20px 20px, 25px 25px, 30px 30px, 35px 35px, 40px 40px, 45px 45px,
5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px;
background-repeat: no-repeat;
opacity: 0.6;
pointer-events: none;
z-index: 0;
animation: twinkle 1s infinite alternate;
}

@keyframes twinkle {
0% { background-position: 10% 10%, 20% 20%, 30% 30%, 40% 40%, 50% 50%, 60% 60%, 70% 70%, 80% 80%, 90% 90%; }
100% { background-position: 11% 11%, 21% 21%, 31% 31%, 41% 41%, 51% 51%, 61% 61%, 71% 71%, 81% 81%, 91% 91%; }
}

/* Planetas */
.planet {
position: absolute;
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
animation: orbit 10s linear infinite;
}

.planet::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
}

.mercury {
width: 4px;
height: 4px;
background-color: #b8b8d0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 5s;
}

.venus {
width: 6px;
height: 6px;
background-color: #f6d97a;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 8s;
}

.earth {
width: 8px;
height: 8px;
background-color: #4cd137;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 12s;
}

.mars {
width: 10px;
height: 10px;
background-color: #ff3e58;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 15s;
}

.jupiter {
width: 12px;
height: 12px;
background-color: #f8961e;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 20s;
}

.saturn {
width: 14px;
height: 14px;
background-color: #f9c74f;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 25s;
}

.uranus {
width: 16px;
height: 16px;
background-color: #4cc3d9;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 30s;
}

.neptune {
width: 18px;
height: 18px;
background-color: #6574cd;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 35s;
}

@keyframes orbit {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Tarot Cards */
.tarot-card {
position: absolute;
width: 50px;
height: 70px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #333;
animation: float 3s infinite alternate;
}

.tarot-card::before {
content: '★';
font-size: 24px;
color: #f8961e;
}

.tarot-card:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.tarot-card:nth-child(2) { top: 25%; left: 30%; animation-delay: 1s; }
.tarot-card:nth-child(3) { top: 40%; left: 45%; animation-delay: 2s; }
.tarot-card:nth-child(4) { top: 55%; left: 60%; animation-delay: 3s; }
.tarot-card:nth-child(5) { top: 70%; left: 75%; animation-delay: 4s; }

@keyframes float {
0% { transform: translateY(0); }
100% { transform: translateY(-5px); }
}

/* ================= OPTIMIZACIONES RESPONSIVE ================= */

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
.planet {
width: 3px;
height: 3px;
}

.mercury {
animation-duration: 4s;
}

.venus {
animation-duration: 7s;
}

.earth {
animation-duration: 10s;
}

.mars {
animation-duration: 13s;
}

.jupiter {
animation-duration: 18s;
}

.saturn {
animation-duration: 22s;
}

.uranus {
animation-duration: 28s;
}

.neptune {
animation-duration: 33s;
}

.tarot-card {
width: 40px;
height: 60px;
}

.tarot-card::before {
font-size: 20px;
}

.tarot-card:nth-child(1) { top: 10%; left: 10%; }
.tarot-card:nth-child(2) { top: 30%; left: 30%; }
.tarot-card:nth-child(3) { top: 50%; left: 50%; }
.tarot-card:nth-child(4) { top: 70%; left: 70%; }
.tarot-card:nth-child(5) { top: 90%; left: 90%; }
}

@media (max-width: 480px) {
.planet {
width: 2px;
height: 2px;
}

.tarot-card {
width: 30px;
height: 50px;
}

.tarot-card::before {
font-size: 16px;
}

.tarot-card:nth-child(1) { top: 10%; left: 10%; }
.tarot-card:nth-child(2) { top: 40%; left: 40%; }
.tarot-card:nth-child(3) { top: 70%; left: 70%; }
.tarot-card:nth-child(4) { top: 20%; left: 70%; }
.tarot-card:nth-child(5) { top: 70%; left: 20%; }
}

#taichat-wrapper {
background: transparent;
min-height: 650px;
display: flex;
flex-direction: column;
border: none;
position: relative;
z-index: 1;
}

/* ================= HEADER MÍSTICO MEJORADO ================= */

#taichat-header {
background: linear-gradient(180deg, 
rgba(15, 16, 20, 0.98) 0%, 
rgba(45, 41, 78, 0.9) 100%);
padding: 24px 30px;
border-bottom: 1px solid var(--tai-border-subtle);
backdrop-filter: blur(15px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

/* Mejora compatibilidad backdrop-filter para Safari */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
#taichat-header {
-webkit-backdrop-filter: blur(15px);
}
}

#taichat-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(90deg, 
transparent, 
var(--tai-accent-warm), 
var(--tai-gold-bright), 
var(--tai-accent-warm), 
transparent);
opacity: 0.6;
}

#taichat-header h5 {
font-family: 'Marcellus', 'Georgia', serif;
color: var(--tai-text-primary);
font-size: 1.5rem;
letter-spacing: 1.5px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 8px;
text-shadow: 0 2px 15px rgba(0,0,0,0.7);
background: linear-gradient(135deg, #fff 0%, var(--tai-accent-warm) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

#taichat-header h5 i {
color: var(--tai-gold-bright);
margin-right: 12px;
filter: drop-shadow(0 0 8px rgba(230, 193, 102, 0.6));
}

#taichat-membership-status {
font-size: 0.9875rem;
font-family: 'Quicksand', sans-serif;
letter-spacing: 0.8px;
padding: 6px 16px;
border-radius: 20px;
background: rgba(230, 162, 162, 0.1);
border: 1px solid rgba(230, 162, 162, 0.2);
margin-top: 8px;
transition: all 0.3s ease;
}

#taichat-membership-status:hover {
background: rgba(230, 162, 162, 0.15);
transform: translateY(-1px);
}

#taichat-membership-status .text-success { 
color: #34d399 !important; 
text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}
#taichat-membership-status .text-warning { 
color: var(--tai-gold-bright) !important;
text-shadow: 0 0 10px rgba(230, 193, 102, 0.3);
}
#taichat-membership-status .text-danger { 
color: #f87171 !important;
text-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
}

/* ================= ÁREA DE CHAT MEJORADA ================= */

.chat-area {
flex: 1;
overflow-y: auto;
padding: 30px;
scroll-behavior: smooth;
background: radial-gradient(
ellipse at 50% 20%, 
rgba(61, 41, 105, 0.15) 0%, 
transparent 70%
);
}

/* Scrollbar mejorado para Firefox */
.chat-area {
scrollbar-width: thin;
scrollbar-color: var(--tai-accent-warm) rgba(230, 162, 162, 0.05);
}

.chat-area::-webkit-scrollbar { 
width: 8px; 
}
.chat-area::-webkit-scrollbar-track { 
background: rgba(230, 162, 162, 0.05); 
border-radius: 4px;
}
.chat-area::-webkit-scrollbar-thumb { 
background: linear-gradient(180deg, 
var(--tai-accent-warm) 0%, 
var(--tai-gold-dim) 100%);
border-radius: 4px; 
}
.chat-area::-webkit-scrollbar-thumb:hover { 
background: linear-gradient(180deg, 
var(--tai-gold-bright) 0%, 
var(--tai-accent-warm) 100%);
}

/* --- Mensajes --- */
.taichat-message-wrapper {
margin-bottom: 28px;
display: flex;
align-items: flex-end;
gap: 16px;
opacity: 0;
animation: fadeInMessage 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInMessage {
from { 
opacity: 0; 
transform: translateY(10px) scale(0.98); 
}
to { 
opacity: 1; 
transform: translateY(0) scale(1); 
}
}

.taichat-message-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background-size: cover;
background-position: center;
box-shadow: 
0 4px 15px rgba(0,0,0,0.5),
inset 0 0 0 2px rgba(230, 162, 162, 0.1);
border: 1px solid var(--tai-border-subtle);
flex-shrink: 0;
position: relative;
transition: all 0.3s ease;
}

.taichat-message-avatar:hover { 
transform: scale(1.05); 
filter: brightness(1.1);
box-shadow: 
0 6px 20px rgba(0,0,0,0.6),
inset 0 0 0 2px rgba(230, 162, 162, 0.3);
}
.assistant-avatar { 
box-shadow: 
0 0 20px rgba(184, 163, 255, 0.3),
inset 0 0 0 2px rgba(184, 163, 255, 0.2);
}

/* --- Burbujas de Texto Mejoradas --- */
.chat-message {
max-width: 75%;
padding: 20px 24px;
border-radius: 20px;
line-height: 1.75;
font-size: 1.05rem;
position: relative;
backdrop-filter: blur(8px);
transition: all 0.3s ease;

/* REGLAS PARA EVITAR CORTE DE TEXTO */
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
hyphens: auto;
}

.chat-message.assistant {
background: linear-gradient(135deg, 
rgba(20, 20, 25, 0.9) 0%, 
rgba(45, 41, 78, 0.9) 100%);
border: 1px solid rgba(184, 163, 255, 0.15);
border-bottom-left-radius: 6px;
color: var(--tai-text-primary);
box-shadow: 
0 4px 25px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chat-message.assistant::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 3px;
background: linear-gradient(90deg, 
var(--tai-purple-glow), 
var(--tai-gold-bright));
border-radius: 20px 20px 0 0;
opacity: 0.6;
}

.chat-message.assistant strong {
color: var(--tai-gold-bright);
font-weight: 700;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.chat-message.assistant em {
color: var(--tai-purple-glow);
font-family: 'Cinzel', serif;
font-style: italic;
font-size: 0.95em;
padding: 0 2px;
}

.chat-message.user {
background: linear-gradient(135deg, 
var(--tai-purple-deep) 0%, 
#2a2266 100%);
border: 1px solid rgba(230, 162, 162, 0.25);
border-bottom-right-radius: 6px;
color: #fff;
box-shadow: 
0 4px 20px rgba(61, 41, 105, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
text-align: right;
}

.chat-message.user::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 3px;
background: linear-gradient(90deg, 
var(--tai-accent-warm), 
#ff7eb3);
border-radius: 20px 20px 0 0;
opacity: 0.6;
}

/* Loader Mejorado */
.typing-loader {
display: flex;
align-items: center;
gap: 10px;
height: 28px;
padding: 0 20px;
}
.typing-dot {
width: 8px; 
height: 8px;
background: linear-gradient(135deg, 
var(--tai-accent-warm) 0%, 
var(--tai-gold-bright) 100%);
border-radius: 50%;
animation: magicPulse 1.6s infinite ease-in-out both;
box-shadow: 0 0 10px rgba(230, 162, 162, 0.3);
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes magicPulse {
0%, 80%, 100% { 
transform: scale(0.7); 
opacity: 0.4; 
}
40% { 
transform: scale(1.2); 
opacity: 1; 
box-shadow: 0 0 15px var(--tai-gold-bright); 
}
}

.typing-text {
font-size: 0.9rem;
color: var(--tai-accent-warm);
font-style: italic;
margin-left: 10px;
text-shadow: 0 0 10px rgba(230, 162, 162, 0.3);
animation: pulseText 2s infinite;
}

@keyframes pulseText { 
0% { opacity: 0.5; } 
50% { opacity: 1; } 
100% { opacity: 0.5; } 
}

.chat-area .text-center.small.text-muted {
text-align: center;
font-size: 0.85rem;
color: var(--tai-gold-dim) !important;
margin: 20px 0;
position: relative;
display: inline-block;
width: 100%;
letter-spacing: 1px;
}
.chat-area .text-center.small.text-muted::before,
.chat-area .text-center.small.text-muted::after {
content: "✦";
margin: 0 15px;
color: var(--tai-accent-warm);
font-size: 1.2rem;
vertical-align: middle;
}

/* ================= ÁREA DE INPUT MEJORADA ================= */

#taichat-input-form {
background: linear-gradient(180deg,
rgba(15, 16, 20, 0.97) 0%,
rgba(15, 16, 20, 0.95) 100%);
border-top: 1px solid var(--tai-border-subtle);
padding: 25px 30px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
z-index: 10;
backdrop-filter: blur(10px);
}

/* Compatibilidad backdrop-filter para Safari */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
#taichat-input-form {
-webkit-backdrop-filter: blur(10px);
}
}

.form-group label {
font-family: 'Quicksand', sans-serif;
font-size: 0.9799rem;
color: var(--tai-text-secondary);
margin-bottom: 10px;
display: block;
letter-spacing: 0.5px;
}

.form-group label i {
color: var(--tai-accent-warm);
margin-right: 8px;
font-size: 1rem;
}

/* Selector de Consulta - MEJORADO SIGNIFICATIVAMENTE */
#taichat-select-prompt {
width: 100%;
background: linear-gradient(135deg, 
rgba(20, 20, 25, 0.9) 0%, 
rgba(45, 41, 78, 0.9) 100%);
border: 1px solid rgba(230, 162, 162, 0.25);
color: var(--tai-text-primary);
padding: .075em .8em;
border-radius: 12px;
font-family: 'Quicksand', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.053rem;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e6a2a2' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 14px;
padding-right: 40px;
font-family: 'Marcellus', 'Georgia', serif!important;

/* Estilo para opciones */
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Firefox: esconder flecha por defecto */
@-moz-document url-prefix() {
#taichat-select-prompt {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e6a2a2' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
}

#taichat-select-prompt:hover {
border-color: var(--tai-accent-warm);
background: linear-gradient(135deg, 
rgba(20, 20, 25, 0.95) 0%, 
rgba(45, 41, 78, 0.95) 100%);
}

#taichat-select-prompt:focus {
outline: none;
border-color: var(--tai-gold-bright);
box-shadow: 
0 0 0 3px rgba(230, 193, 102, 0.1),
var(--tai-shadow-warm);
background: linear-gradient(135deg, 
rgba(20, 20, 25, 0.98) 0%, 
rgba(45, 41, 78, 0.98) 100%);
}

/* Estilo para opciones dentro del select */
#taichat-select-prompt option {
background: var(--tai-bg-surface);
color: var(--tai-text-primary);
padding: 12px;
font-size: 0.95rem;
}

#taichat-select-prompt option:checked {
background: linear-gradient(135deg, 
var(--tai-purple-deep) 0%, 
#2a2266 100%);
color: var(--tai-gold-bright);
}

#taichat-select-prompt option:hover {
background: var(--tai-accent-warm);
}

/* Grupo Input + Botón - MEJORADO VISUALMENTE */
.input-group {
display: flex;
gap: 12px;
position: relative;
background: linear-gradient(135deg, 
rgba(20, 20, 25, 0.8) 0%, 
rgba(45, 41, 78, 0.6) 100%);
border: 1px solid rgba(230, 162, 162, 0.2);
border-radius: 12px;
padding: 6px;
transition: all 0.3s ease;
box-shadow: 
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 2px 10px rgba(0,0,0,0.1);
}

.input-group:focus-within {
border-color: var(--tai-gold-bright);
box-shadow: 
0 0 20px rgba(230, 193, 102, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, 
rgba(20, 20, 25, 0.9) 0%, 
rgba(45, 41, 78, 0.7) 100%);
transform: translateY(-1px);
}

/* Campo de entrada con estados mejorados */
#taichat-input {
flex: 1;
background: transparent;
border: none;
color: var(--tai-text-primary);
padding: 14px 16px;
font-size: 1.05rem;
font-family: 'Quicksand', sans-serif;
min-width: 0;
letter-spacing: 0.3px;
}

#taichat-input:focus { 
outline: none; 
}

#taichat-input::placeholder { 
color: rgba(230, 162, 162, 0.5); 
font-style: italic;
letter-spacing: 0.5px;
}

/* Estado cuando hay texto */
#taichat-input:not(:placeholder-shown) {
color: var(--tai-text-primary);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Botón de enviar - MANTENIENDO PADDING/BORDER-RADIUS ORIGINAL */
#taichat-send-btn {
background: linear-gradient(135deg, 
var(--tai-accent-warm) 0%, 
#d48989 100%);
border: none;
color: #1a1a1a;
padding: 0 25px;
border-radius: .115rem;
font-weight: 700;
font-family: 'Cinzel', serif;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-size: 0.85rem;
white-space: nowrap;
position: relative;
overflow: hidden;
box-shadow: 
0 2px 10px rgba(230, 162, 162, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Mejorar accesibilidad del botón */
#taichat-send-btn:focus-visible {
outline: 2px solid var(--tai-gold-bright);
outline-offset: 2px;
}

#taichat-send-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, 
transparent, 
rgba(255, 255, 255, 0.2), 
transparent);
transition: left 0.5s ease;
}

#taichat-send-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 
0 4px 20px rgba(230, 162, 162, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, 
#ffb3b3 0%, 
var(--tai-accent-warm) 100%);
}

#taichat-send-btn:hover:not(:disabled)::before {
left: 100%;
}

#taichat-send-btn:active:not(:disabled) {
transform: translateY(0);
}

#taichat-send-btn:disabled {
background: linear-gradient(135deg, 
#4a4a4a 0%, 
#333 100%);
color: #666;
cursor: not-allowed;
box-shadow: none;
transform: none;
}

#taichat-send-btn i {
font-size: 1rem;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* Descripción del prompt */
#prompt-description {
font-size: 0.85rem;
color: var(--tai-accent-warm);
font-style: italic;
margin-top: 6px;
min-height: 1.2em;
padding-left: 8px;
border-left: 2px solid var(--tai-border-subtle);
transition: all 0.3s ease;
}

#prompt-description:not(:empty) {
opacity: 1;
transform: translateY(0);
}

/* ================= DESPLEGABLE DE CRÉDITOS MEJORADO ================= */

.creditos-desplegable-container {
margin-top: 12px;
}

.ver-creditos-btn {
display: inline-flex;
align-items: center;
color: var(--tai-accent-warm);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
background: rgba(230, 162, 162, 0.1);
border: 1px solid rgba(230, 162, 162, 0.2);
transition: all 0.3s ease;
cursor: pointer;
}

.ver-creditos-btn:hover {
background: rgba(230, 162, 162, 0.15);
border-color: var(--tai-accent-warm);
transform: translateY(-1px);
text-decoration: none;
}

.ver-creditos-btn.active {
background: rgba(230, 162, 162, 0.2);
border-color: var(--tai-accent-warm);
}

.ver-creditos-btn i {
transition: transform 0.3s ease;
font-size: 0.8rem;
}

.ver-creditos-btn.active i {
transform: rotate(180deg);
}

.creditos-detalle {
margin-top: 12px;
padding: 15px;
background: rgba(20, 20, 25, 0.7);
border-radius: 10px;
border: 1px solid var(--tai-border-subtle);
backdrop-filter: blur(5px);
animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.creditos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 10px;
}

.credito-item {
display: flex;
flex-direction: column;
gap: 4px;
}

.credito-label {
font-size: 0.75rem;
color: var(--tai-text-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.credito-valor {
padding: 6px 10px !important;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
text-align: center;
display: block;
transition: all 0.3s ease;
}

.credito-valor.bg-success {
background: linear-gradient(135deg, rgba(52, 211, 153, 0.2) 0%, rgba(52, 211, 153, 0.1) 100%);
border: 1px solid rgba(52, 211, 153, 0.3);
color: #7ddbb9;
}

.credito-valor.bg-warning {
background: linear-gradient(135deg, 
rgba(230, 193, 102, 0.2) 0%, 
rgba(230, 193, 102, 0.1) 100%);
border: 1px solid rgba(230, 193, 102, 0.3);
color: var(--tai-gold-bright);
}

.credito-valor.bg-info {
background: linear-gradient(135deg, 
rgba(59, 130, 246, 0.2) 0%, 
rgba(59, 130, 246, 0.1) 100%);
border: 1px solid rgba(59, 130, 246, 0.3);
color: #93c5fd;
}

.creditos-nota {
font-size: 0.8rem;
color: var(--tai-text-muted);
padding-top: 8px;
border-top: 1px solid rgba(230, 162, 162, 0.1);
}

.creditos-nota i {
color: var(--tai-gold-dim);
margin-right: 6px;
}

/* Cursor de escritura mejorado */
.typewriter-cursor {
color: var(--tai-gold-bright);
font-weight: 300;
animation: blink 0.8s infinite;
margin-left: 2px;
text-shadow: 0 0 10px rgba(230, 193, 102, 0.5);
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

/* Mensajes de Error Mejorados */
.assistant-error {
background: linear-gradient(135deg, 
rgba(127, 29, 29, 0.3) 0%, 
rgba(76, 29, 29, 0.2) 100%);
border: 1px solid rgba(248, 113, 113, 0.4);
color: #fca5a5;
padding: 16px 20px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
margin: 10px 0;
box-shadow: 
0 4px 15px rgba(127, 29, 29, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.assistant-error::before {
content: '⚠';
font-size: 1.2rem;
color: #f87171;
}

/* ================= RESPONSIVE Y MÓVIL MEJORADO ================= */

@media (max-width: 768px) {
.taichat-instance { 
margin: 15px; 
border-radius: 18px;
border-width: 1px;
max-width: calc(100vw - 30px);
}

#taichat-header { 
padding: 18px 20px; 
}

#taichat-header h5 {
font-size: 1.3rem;
letter-spacing: 1px;
}

.chat-area { 
padding: 20px; 
}

.chat-message { 
max-width: 88%; 
font-size: 1rem; 
padding: 16px 20px;
border-radius: 18px;
}

.taichat-message-wrapper { 
gap: 12px; 
margin-bottom: 24px;
}

.taichat-message-avatar { 
width: 42px; 
height: 42px; 
}

/* --- REDISEÑO DEL ÁREA DE INPUT MÓVIL MEJORADO --- */
#taichat-input-form { 
padding: 20px; 
gap: 15px;
}

/* Stack vertical mejorado */
.input-group {
flex-direction: column;
background: linear-gradient(135deg, 
rgba(20, 20, 25, 0.9) 0%, 
rgba(45, 41, 78, 0.8) 100%);
border: 1px solid rgba(230, 162, 162, 0.25);
padding: 8px;
gap: 12px;
border-radius: 12px;
}

/* Input móvil con mejor feedback */
#taichat-input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(230, 162, 162, 0.2);
padding: 16px;
font-size: 16px; /* Previene zoom en iOS */
box-sizing: border-box;
border-radius: .115rem !important;
min-height: 56px;
}

#taichat-input:focus {
background: rgba(255, 255, 255, 0.08);
border-color: var(--tai-gold-bright);
box-shadow: 0 0 0 2px rgba(230, 193, 102, 0.1);
}

/* Botón móvil con mejor tap target */
#taichat-send-btn {
width: 100%;
padding: 16px;
font-size: 1rem;
margin: 0;
min-height: 56px;
border-radius: .115rem;
}

/* Selector móvil mejorado */
#taichat-select-prompt {
font-size: 16px; /* Previene zoom en iOS */
padding: 14px 15px;
padding-right: 45px;
background-position: right 18px center;
border-radius: 10px;
}

#taichat-select-prompt option {
font-size: 15px;
padding: 12px;
}

/* Desplegable de créditos en móvil */
.creditos-grid {
grid-template-columns: 1fr;
gap: 8px;
}

.ver-creditos-btn {
width: 100%;
justify-content: center;
padding: 10px 15px;
}

.creditos-detalle {
padding: 12px;
}

.credito-valor {
padding: 8px 12px !important;
font-size: 0.9rem;
}
}

/* Estados visuales para interacción mejorada */
#taichat-input-form:not(.ready) .input-group {
opacity: 0.7;
filter: grayscale(0.3);
}

#taichat-input-form.ready .input-group {
opacity: 1;
filter: grayscale(0);
}

/* Indicador de conexión */
#taichat-membership-status .fa-spin {
color: var(--tai-accent-warm);
}

/* Transiciones suaves para todos los estados */
#taichat-select-prompt,
#taichat-input,
#taichat-send-btn,
.taichat-message-avatar,
.chat-message {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efecto de brillo sutil en elementos interactivos */
#taichat-select-prompt:focus,
#taichat-input:focus,
#taichat-send-btn:hover:not(:disabled) {
filter: brightness(1.05);
}

/* Footer mejorado */
#taichat-footer {
padding: 15px 30px;
background: rgba(15, 16, 20, 0.8);
border-top: 1px solid var(--tai-border-subtle);
font-size: 0.85rem;
color: var(--tai-text-muted);
text-align: center;
backdrop-filter: blur(5px);
}

#taichat-footer i {
color: var(--tai-gold-dim);
margin-right: 8px;
}

/* Ajuste final del border radius del input-group */
.input-group {
border-radius: 6px;
}

/* Mejora de contraste para accesibilidad */
@media (prefers-contrast: high) {
:root {
--tai-gold-bright: #ffd700;
--tai-accent-warm: #ff6b6b;
--tai-text-primary: #ffffff;
}

.chat-message.assistant,
.chat-message.user {
border-width: 2px;
}

#taichat-send-btn {
border: 2px solid var(--tai-accent-warm);
}

.ver-creditos-btn {
border-width: 2px;
}
}

.ast-container, .ast-container-fluid {
padding-left: 0px!important;
padding-right: 0px!important;
}

/* Mejoras adicionales para el select */
#taichat-select-prompt {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23e6a2a2"%3E%3Cpath d="M7 10l5 5 5-5z"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 32px;
border: 1px solid var(--tai-border-subtle);
border-radius: 6px;
font-size: 1rem;
color: var(--tai-text-primary);
background-color: var(--tai-bg-surface);
transition: border-color 0.3s ease;
}

#taichat-select-prompt:focus {
border-color: var(--tai-gold-bright);
outline: none;
}

/* Estilo para opciones dentro del select */
#taichat-select-prompt option {
background-color: var(--tai-bg-surface);
color: var(--tai-text-primary);
padding: 8px 12px;
font-size: 0.95rem;
transition: background-color 0.3s ease;
}

#taichat-select-prompt option:hover {
background-color: var(--tai-accent-warm);
color: var(--tai-text-primary);
}

#taichat-select-prompt option:checked {
background-color: var(--tai-purple-deep);
color: var(--tai-gold-bright);
}

/* Mejoras en el botón de enviar */
#taichat-send-btn {
background: linear-gradient(135deg, 
var(--tai-accent-warm) 0%, 
#d48989 100%);
border: none;
color: #1a1a1a;
padding: 0 25px;
border-radius: 6px;
font-weight: 700;
font-family: 'Cinzel', serif;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.8px;
font-size: 0.85rem;
white-space: nowrap;
position: relative;
overflow: hidden;
box-shadow: 
0 2px 10px rgba(230, 162, 162, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#taichat-send-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, 
transparent, 
rgba(255, 255, 255, 0.2), 
transparent);
transition: left 0.5s ease;
}

#taichat-send-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 
0 4px 20px rgba(230, 162, 162, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, 
#ffb3b3 0%, 
var(--tai-accent-warm) 100%);
}

#taichat-send-btn:hover:not(:disabled)::before {
left: 100%;
}

#taichat-send-btn:active:not(:disabled) {
transform: translateY(0);
}

#taichat-send-btn:disabled {
background: linear-gradient(135deg, 
#4a4a4a 0%, 
#333 100%);
color: #666;
cursor: not-allowed;
box-shadow: none;
transform: none;
}

#taichat-send-btn i {
font-size: 1rem;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* ==================================================== */
/* MEJORAS DE VISIBILIDAD - VERSIÓN 2.4 */
/* Placeholders mejorados y fondos esotéricos */
/* ==================================================== */

/* MEJORA 1: Placeholder del input principal - VISIBILIDAD AUMENTADA */
#taichat-input::placeholder {
color: rgba(230, 162, 162, 0.85) !important;
text-shadow: 0 0 8px rgba(230, 162, 162, 0.4) !important;
font-weight: 500 !important;
letter-spacing: 0.8px !important;
opacity: 1 !important;
transition: all 0.3s ease !important;
}

/* Efecto de brillo sutil en hover y focus */
#taichat-input:hover::placeholder {
color: rgba(255, 215, 0, 0.9) !important;
text-shadow: 0 0 12px rgba(255, 215, 0, 0.6) !important;
}

#taichat-input:focus::placeholder {
color: rgba(184, 163, 255, 0.7) !important;
transform: translateX(5px) !important;
}

/* MEJORA 2: Fondo del área de chat con textura astral */
.chat-area {
position: relative !important;
}

.chat-area::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: 
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="0.5" fill="rgba(184,163,255,0.05)"/><circle cx="50" cy="35" r="0.7" fill="rgba(184,163,255,0.07)"/><circle cx="80" cy="60" r="0.5" fill="rgba(184,163,255,0.05)"/><circle cx="30" cy="70" r="0.8" fill="rgba(184,163,255,0.08)"/><circle cx="70" cy="25" r="0.6" fill="rgba(184,163,255,0.06)"/></svg>'),
radial-gradient(circle at 30% 20%, rgba(61, 41, 105, 0.25) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(230, 162, 162, 0.2) 0%, transparent 50%) !important;
background-size: 200px 200px, cover, cover !important;
opacity: 0.6 !important;
pointer-events: none !important;
z-index: 0 !important;
}

/* MEJORA 3: Placeholder del select - Texto más visible */
#taichat-select-prompt:invalid,
#taichat-select-prompt option[value="0"]:disabled {
color: rgba(230, 162, 162, 0.9) !important;
text-shadow: 0 0 10px rgba(230, 162, 162, 0.3) !important;
font-style: italic !important;
background: rgba(61, 41, 105, 0.3) !important;
}

/* MEJORA 4: Efecto de constelación en el fondo principal */
.taichat-instance::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: 
radial-gradient(circle at 15% 15%, rgba(230, 193, 102, 0.1) 0%, transparent 25%),
radial-gradient(circle at 85% 85%, rgba(184, 163, 255, 0.1) 0%, transparent 25%),
radial-gradient(circle at 50% 50%, rgba(61, 41, 105, 0.15) 0%, transparent 30%) !important;
pointer-events: none !important;
z-index: 0 !important;
}

/* MEJORA 5: Mejor contraste para textos en áreas oscuras */
.chat-message.assistant,
.chat-message.user {
position: relative !important;
z-index: 1 !important;
}

/* MEJORA 6: Resplandor sutil en bordes para mejor definición */
#taichat-wrapper {
position: relative !important;
}

#taichat-wrapper::before {
content: "" !important;
position: absolute !important;
top: -1px !important;
left: -1px !important;
right: -1px !important;
bottom: -1px !important;
background: linear-gradient(45deg, 
transparent 0%, 
rgba(230, 162, 162, 0.05) 25%, 
rgba(184, 163, 255, 0.05) 50%, 
rgba(230, 193, 102, 0.05) 75%, 
transparent 100%) !important;
border-radius: 25px !important;
pointer-events: none !important;
z-index: -1 !important;
animation: cosmicGlow 20s ease-in-out infinite !important;
}

@keyframes cosmicGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}

/* MEJORA 7: Texto de descripción del prompt más visible */
#prompt-description {
color: rgba(230, 162, 162, 0.95) !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
font-weight: 500 !important;
padding: 8px 12px !important;
background: rgba(61, 41, 105, 0.25) !important;
border-radius: 8px !important;
border-left: 3px solid var(--tai-accent-warm) !important;
margin-top: 10px !important;
backdrop-filter: blur(4px) !important;
}

/* MEJORA 8: Efecto de profundidad en áreas de entrada */
#taichat-input-form {
position: relative !important;
z-index: 2 !important;
background: linear-gradient(180deg,
rgba(15, 16, 20, 0.98) 0%,
rgba(15, 16, 20, 0.96) 100%) !important;
box-shadow: 
0 -5px 30px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* MEJORA 9: Placeholder mejorado para móviles */
@media (max-width: 768px) {
#taichat-input::placeholder {
font-size: 16px !important; /* Evita zoom en iOS */
color: rgba(230, 162, 162, 0.95) !important;
text-shadow: 0 0 10px rgba(230, 162, 162, 0.5) !important;
}

#taichat-select-prompt {
background-color: rgba(20, 20, 25, 0.9) !important;
}
}

/* MEJORA 10: Animación sutil para indicar interactividad */
@keyframes gentlePulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}

#taichat-input:disabled::placeholder {
animation: gentlePulse 2s infinite ease-in-out !important;
}

/* MEJORA 11: Mejor separación visual entre elementos */
.creditos-detalle,
#prompt-description:not(:empty),
.input-group {
box-shadow: 
0 4px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(230, 162, 162, 0.15) !important;
}

/* MEJORA 12: Efecto de brillo estelar en fondos */
.taichat-message-avatar::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 110% !important;
height: 110% !important;
background: radial-gradient(circle, 
rgba(230, 162, 162, 0.1) 0%, 
transparent 70%) !important;
border-radius: 50% !important;
pointer-events: none !important;
z-index: -1 !important;
}

/* ==================================================== */
/* MEJORAS PERFECTAS ZONA CRÉDITOS - VERSIÓN 2.5 */
/* Alineación perfecta y visibilidad óptima */
/* ==================================================== */

/* 1. MEJORA DE ALINEACIÓN Y DISTRIBUCIÓN EN CUADRÍCULA */
.creditos-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
align-items: center !important;
margin-bottom: 15px !important;
}

/* 2. ELEMENTOS DE CRÉDITO CON ALINEACIÓN PERFECTA */
.credito-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
min-height: 85px !important;
padding: 10px 8px !important;
background: rgba(20, 20, 25, 0.4) !important;
border-radius: 10px !important;
border: 1px solid rgba(230, 162, 162, 0.15) !important;
transition: all 0.3s ease !important;
}

.credito-item:hover {
background: rgba(20, 20, 25, 0.6) !important;
border-color: rgba(230, 162, 162, 0.3) !important;
transform: translateY(-2px) !important;
}

/* 3. ETIQUETAS MEJORADAS - VISIBILIDAD ÓPTIMA */
.credito-label {
font-size: 0.75rem !important;
color: rgba(203, 213, 225, 0.9) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-bottom: 8px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
width: 100% !important;
}

/* 4. VALORES DE CRÉDITO CON MEJOR CONTRASTE */
.credito-valor {
padding: 8px 12px !important;
border-radius: 8px !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
text-align: center !important;
min-width: 80px !important;
display: inline-block !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* 5. COLORES ESPECÍFICOS MEJORADOS */
.credito-valor.bg-success {
background: linear-gradient(135deg, 
rgba(52, 211, 153, 0.25) 0%, 
rgba(52, 211, 153, 0.15) 100%) !important;
border: 1px solid rgba(52, 211, 153, 0.4) !important;
color: #7ddbb9 !important;
box-shadow: 0 0 15px rgba(52, 211, 153, 0.2) !important;
}

.credito-valor.bg-warning {
background: linear-gradient(135deg, 
rgba(230, 193, 102, 0.25) 0%, 
rgba(230, 193, 102, 0.15) 100%) !important;
border: 1px solid rgba(230, 193, 102, 0.4) !important;
color: var(--tai-gold-bright) !important;
box-shadow: 0 0 15px rgba(230, 193, 102, 0.2) !important;
}

.credito-valor.bg-info {
background: linear-gradient(135deg, 
rgba(59, 130, 246, 0.25) 0%, 
rgba(59, 130, 246, 0.15) 100%) !important;
border: 1px solid rgba(59, 130, 246, 0.4) !important;
color: #93c5fd !important;
box-shadow: 0 0 15px rgba(59, 130, 246, 0.2) !important;
}

/* 6. BOTÓN "VER CRÉDITOS" - VISIBILIDAD PERFECTA */
.ver-creditos-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
color: var(--tai-accent-warm) !important;
text-decoration: none !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
padding: 12px 20px !important;
border-radius: 10px !important;
background: linear-gradient(135deg, 
rgba(230, 162, 162, 0.15) 0%, 
rgba(184, 163, 255, 0.1) 100%) !important;
border: 1px solid rgba(230, 162, 162, 0.3) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
width: 100% !important;
text-align: center !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
margin: 0 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.ver-creditos-btn:hover {
background: linear-gradient(135deg, 
rgba(230, 162, 162, 0.25) 0%, 
rgba(184, 163, 255, 0.2) 100%) !important;
border-color: var(--tai-accent-warm) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(230, 162, 162, 0.3) !important;
color: #ffd700 !important;
}

.ver-creditos-btn.active {
background: linear-gradient(135deg, 
rgba(230, 162, 162, 0.3) 0%, 
rgba(184, 163, 255, 0.25) 100%) !important;
border-color: var(--tai-gold-bright) !important;
color: var(--tai-gold-bright) !important;
}

/* 7. TEXTO DEL BOTÓN MEJORADO */
.creditos-text {
font-weight: 700 !important;
font-size: 0.85rem !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
flex-grow: 1 !important;
text-align: center !important;
}

/* 8. ICONO DEL BOTÓN PERFECTAMENTE ALINEADO */
.ver-creditos-btn i {
font-size: 0.8rem !important;
transition: transform 0.3s ease !important;
color: inherit !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

.ver-creditos-btn.active i {
transform: rotate(180deg) !important;
color: var(--tai-gold-bright) !important;
}

/* 9. CONTENEDOR DEL DESPLEGABLE PERFECTO */
.creditos-desplegable-container {
margin-top: 15px !important;
margin-bottom: 15px !important;
width: 100% !important;
}

/* 10. ÁREA DESPLEGABLE MEJORADA */
.creditos-detalle {
margin-top: 15px !important;
padding: 20px !important;
background: rgba(15, 16, 20, 0.95) !important;
border-radius: 12px !important;
border: 1px solid rgba(230, 162, 162, 0.25) !important;
backdrop-filter: blur(10px) !important;
box-shadow: 
0 10px 30px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
animation: slideDownSmooth 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@keyframes slideDownSmooth {
from {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

/* 11. NOTA INFORMATIVA MEJORADA */
.creditos-nota {
font-size: 0.8rem !important;
color: rgba(148, 163, 184, 0.9) !important;
padding: 12px 15px !important;
background: rgba(61, 41, 105, 0.2) !important;
border-radius: 8px !important;
border-left: 3px solid var(--tai-purple-deep) !important;
margin-top: 15px !important;
line-height: 1.5 !important;
text-align: center !important;
}

.creditos-nota i {
color: var(--tai-gold-dim) !important;
margin-right: 8px !important;
font-size: 0.9rem !important;
}

/* 12. INFORMACIÓN ADICIONAL DEBAJO - VISIBILIDAD PERFECTA */
#taichat-input-form .small.text-muted {
font-size: 0.85rem !important;
color: rgba(184, 163, 255, 0.9) !important;
line-height: 1.5 !important;
text-align: center !important;
padding: 12px 15px !important;
background: rgba(61, 41, 105, 0.25) !important;
border-radius: 10px !important;
border: 1px solid rgba(184, 163, 255, 0.2) !important;
margin-top: 15px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

#taichat-input-form .small.text-muted i {
color: var(--tai-gold-bright) !important;
margin-right: 8px !important;
}

/* 13. RESPONSIVE PERFECTO PARA MÓVIL */
@media (max-width: 768px) {
.creditos-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}

.credito-item {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
text-align: left !important;
min-height: 60px !important;
padding: 12px 15px !important;
}

.credito-label {
margin-bottom: 0 !important;
text-align: left !important;
font-size: 0.8rem !important;
flex: 1 !important;
white-space: normal !important;
}

.credito-valor {
min-width: 90px !important;
font-size: 0.9rem !important;
padding: 8px 10px !important;
height: 32px !important;
margin-left: 10px !important;
}

.ver-creditos-btn {
padding: 14px 20px !important;
font-size: 0.85rem !important;
}

.creditos-detalle {
padding: 15px !important;
}

.creditos-nota {
font-size: 0.75rem !important;
padding: 10px 12px !important;
}
}

/* 14. ANIMACIÓN DE ENTRADA SUAVE */
.creditos-detalle[style*="display: block"] {
animation: creditosReveal 0.5s ease-out !important;
}

@keyframes creditosReveal {
0% {
opacity: 0;
transform: translateY(-10px) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}

/* 15. BADGE DE CONSULTAS TOTALES - DESTACADO */
#total-consultas-badge {
position: relative !important;
overflow: hidden !important;
}

#total-consultas-badge::after {
content: '' !important;
position: absolute !important;
top: -50% !important;
left: -50% !important;
width: 200% !important;
height: 200% !important;
background: linear-gradient(45deg, 
transparent 30%, 
rgba(255, 255, 255, 0.1) 50%, 
transparent 70%) !important;
animation: badgeShine 3s infinite linear !important;
}

@keyframes badgeShine {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}

/* 16. CONTADOR DE CRÉDITOS DISPONIBLES - ÉNFASIS */
#consultas-counter {
font-size: 1.1rem !important;
padding: 10px 15px !important;
position: relative !important;
animation: gentlePulse 3s infinite ease-in-out !important;
}

@keyframes gentlePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

/* 17. INFORMACIÓN DE EXPIRACIÓN - CLARIDAD */
#expiration-info {
font-size: 0.85rem !important;
font-weight: 600 !important;
padding: 8px 12px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

/* ==================================================== */
/* BOTÓN DISCRETO Y RESPONSIVE PERFECTO - VERSIÓN 2.6 */
/* Botón minimalista y diseño móvil optimizado */
/* ==================================================== */

/* 1. BOTÓN "VER/OCULTAR CRÉDITOS" - DISCRETO Y MINIMALISTA */
.ver-creditos-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
color: rgba(148, 163, 184, 0.8) !important; /* Color mucho más discreto */
text-decoration: none !important;
font-size: 0.8rem !important; /* Tamaño más pequeño */
font-weight: 400 !important; /* Peso normal, no negrita */
padding: 6px 12px !important; /* Padding mínimo */
border-radius: 6px !important;
background: transparent !important; /* Fondo transparente */
border: 1px solid rgba(148, 163, 184, 0.2) !important; /* Borde sutil */
transition: all 0.3s ease !important;
cursor: pointer !important;
width: auto !important; /* Ancho automático, no ocupa todo */
text-align: center !important;
letter-spacing: 0.5px !important;
text-transform: none !important; /* Sin mayúsculas */
margin: 0 auto !important; /* Centrado */
box-shadow: none !important; /* Sin sombra */
position: relative !important;
}

.ver-creditos-btn:hover {
color: rgba(184, 163, 255, 0.9) !important; /* Color sutil al hover */
border-color: rgba(184, 163, 255, 0.3) !important;
background: rgba(184, 163, 255, 0.05) !important; /* Fondo muy sutil */
transform: translateY(-1px) !important;
}

.ver-creditos-btn.active {
color: rgba(230, 193, 102, 0.9) !important;
border-color: rgba(230, 193, 102, 0.3) !important;
background: rgba(230, 193, 102, 0.05) !important;
}

/* 2. TEXTO DEL BOTÓN DISCRETO */
.creditos-text {
font-weight: 400 !important; /* Peso normal */
font-size: 0.75rem !important; /* Tamaño pequeño */
text-shadow: none !important; /* Sin sombra */
color: inherit !important;
}

/* 3. ICONO DISCRETO */
.ver-creditos-btn i {
font-size: 0.7rem !important; /* Icono pequeño */
transition: transform 0.3s ease !important;
color: inherit !important;
opacity: 0.7 !important;
}

/* 4. MEJORAS RADICALES PARA MÓVIL */
@media (max-width: 768px) {
/* 4.1 CONTENEDOR DE CRÉDITOS MÁS COMPACTO */
.creditos-desplegable-container {
margin-top: 10px !important;
margin-bottom: 10px !important;
padding: 0 5px !important;
}

/* 4.2 BOTÓN AÚN MÁS DISCRETO EN MÓVIL */
.ver-creditos-btn {
padding: 5px 10px !important;
font-size: 0.75rem !important;
width: 100% !important; /* En móvil ocupa todo pero discreto */
max-width: 200px !important; /* Máximo ancho */
background: rgba(20, 20, 25, 0.3) !important; /* Fondo sutil solo en móvil */
}

/* 4.3 CUADRÍCULA DE CRÉDITOS MEJORADA */
.creditos-grid {
grid-template-columns: 1fr !important; /* Una columna en móvil */
gap: 8px !important;
margin-bottom: 12px !important;
}

/* 4.4 ELEMENTOS DE CRÉDITO - DISEÑO HORIZONTAL COMPACTO */
.credito-item {
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
text-align: left !important;
min-height: 50px !important; /* Altura reducida */
padding: 8px 10px !important; /* Padding compacto */
background: rgba(20, 20, 25, 0.4) !important;
border-radius: 8px !important;
margin-bottom: 4px !important;
}

/* 4.5 ETIQUETAS MÓVIL - TEXTO COMPLETO */
.credito-label {
font-size: 0.75rem !important;
color: rgba(203, 213, 225, 0.9) !important;
font-weight: 500 !important;
text-transform: uppercase !important;
margin-bottom: 0 !important;
white-space: nowrap !important; /* No se rompe */
overflow: visible !important; /* No se corta */
text-overflow: clip !important;
flex: 0 0 auto !important; /* No crece, tamaño fijo */
width: 40% !important; /* Ancho controlado */
text-align: left !important;
}

/* 4.6 VALORES MÓVIL - TAMAÑO ADECUADO */
.credito-valor {
padding: 6px 10px !important;
font-size: 0.85rem !important;
min-width: 70px !important; /* Ancho mínimo */
max-width: 120px !important; /* Ancho máximo */
height: 32px !important; /* Altura fija */
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}

/* 4.7 ÁREA DESPLEGABLE MÓVIL */
.creditos-detalle {
padding: 12px 10px !important;
margin-top: 8px !important;
background: rgba(15, 16, 20, 0.95) !important;
border: 1px solid rgba(148, 163, 184, 0.2) !important;
backdrop-filter: blur(8px) !important;
}

/* 4.8 NOTA INFORMATIVA MÓVIL */
.creditos-nota {
font-size: 0.7rem !important;
padding: 8px 10px !important;
line-height: 1.4 !important;
text-align: center !important;
margin-top: 10px !important;
}

/* 4.9 AJUSTE DE ALTURAS ESPECÍFICAS PARA EVITAR CORTES */
#consultas-counter,
#expiration-info,
#total-consultas-badge {
height: 32px !important;
line-height: 32px !important;
padding: 0 10px !important;
}

/* 4.10 TEXTO DE "495/0 créditos" - MEJORA VISUAL */
.creditos-desplegable-container .text-muted {
font-size: 0.8rem !important;
color: rgba(184, 163, 255, 0.9) !important;
text-align: center !important;
margin-top: 5px !important;
display: block !important;
white-space: normal !important; /* Permite saltos de línea */
line-height: 1.4 !important;
}
}

/* 5. MEJORAS PARA PANTALLAS MUY PEQUEÑAS (iPhone SE, etc) */
@media (max-width: 375px) {
.credito-label {
font-size: 0.7rem !important; /* Tamaño aún más pequeño */
width: 45% !important; /* Un poco más ancho */
}

.credito-valor {
font-size: 0.8rem !important;
min-width: 60px !important; /* Más compacto */
padding: 4px 8px !important;
}

.ver-creditos-btn {
max-width: 180px !important;
font-size: 0.7rem !important;
}
}

/* 6. MEJORAS PARA PANTALLAS MEDIANAS (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
.creditos-grid {
grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas en tablets */
gap: 10px !important;
}

.credito-item {
min-height: 70px !important;
}

.ver-creditos-btn {
max-width: 150px !important; /* Botón compacto */
}
}

/* 7. ANIMACIÓN DE TRANSICIÓN SUAVE PARA EL BOTÓN */
.ver-creditos-btn {
animation: fadeInSubtle 0.5s ease-out !important;
}

@keyframes fadeInSubtle {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* 8. ESTADO ACTIVO DEL BOTÓN - MUY SUTIL */
.ver-creditos-btn.active::after {
content: '' !important;
position: absolute !important;
bottom: -2px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 20px !important;
height: 2px !important;
background: rgba(230, 193, 102, 0.5) !important;
border-radius: 1px !important;
}

/* 9. AJUSTES PARA LOS NÚMEROS GRANDES (495/0) */
#taichat-input-form .small.text-muted strong {
font-size: 0.9rem !important;
color: rgba(184, 163, 255, 0.9) !important;
font-weight: 600 !important;
display: block !important;
margin-top: 5px !important;
}

/* 10. MEJORA DE ESPACIADO GENERAL EN FORMULARIO */
#taichat-input-form {
padding: 20px 25px !important; /* Padding más compacto */
gap: 15px !important; /* Espaciado reducido */
}

/* 11. EVITAR DESBORDAMIENTO DE TEXTO EN TODOS LOS ELEMENTOS */
.credito-label,
.credito-valor,
.creditos-text,
.creditos-nota {
word-break: break-word !important;
hyphens: auto !important;
overflow-wrap: break-word !important;
}

/* 12. CONTENEDOR PRINCIPAL MÁS COMPACTO EN MÓVIL */
@media (max-width: 768px) {
#taichat-input-form {
padding: 15px !important;
gap: 12px !important;
}

.form-group {
margin-bottom: 12px !important;
}
}

/* 13. ESTADO DE CARGA - MÁS DISCRETO */
#taichat-select-prompt option[value="0"]:disabled {
color: rgba(148, 163, 184, 0.7) !important;
font-style: italic !important;
background: transparent !important;
}

/* 14. FOOTER MÁS DISCRETO */
#taichat-footer {
padding: 10px 20px !important;
font-size: 0.75rem !important;
color: rgba(148, 163, 184, 0.7) !important;
background: rgba(15, 16, 20, 0.6) !important;
border-top: 1px solid rgba(148, 163, 184, 0.1) !important;
}

/* 15. MEJORA FINAL: GRADIENTE SUTIL EN BOTÓN ACTIVO */
.ver-creditos-btn.active {
background: linear-gradient(135deg, 
rgba(184, 163, 255, 0.05) 0%, 
rgba(230, 193, 102, 0.03) 100%) !important;
}

/* ================= OPTIMIZACIONES ADICIONALES ================= */

/* Mejorar scroll en iOS */
.chat-area {
-webkit-overflow-scrolling: touch;
}

/* Optimizar animaciones para mejor rendimiento */
.planet, .tarot-card {
transform: translateZ(0);
backface-visibility: hidden;
}

/* Soporte para prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.planet,
.tarot-card,
.taichat-instance::before,
.typing-dot,
.ver-creditos-btn,
.chat-message,
#taichat-send-btn,
.taichat-message-wrapper {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* Mejorar tap targets en móvil */
@media (max-width: 768px) {
#taichat-send-btn,
.ver-creditos-btn,
#taichat-select-prompt {
min-height: 44px;
}
}

/* Fallback para navegadores sin backdrop-filter */
@supports not (backdrop-filter: blur(15px)) {
#taichat-header {
background: rgba(15, 16, 20, 0.98);
}
#taichat-input-form {
background: rgba(15, 16, 20, 0.97);
}
.creditos-detalle {
background: rgba(20, 20, 25, 0.9);
}
}

.fkcart-toggler{display:none!important}