html {
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: #f8fafc;
padding: 12px;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.widget-container {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.widget-header {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
color: white;
padding: 12px 14px;
font-size: 13px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.status {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
opacity: 0.7;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
animate: pulse 2s infinite;
}
.status-dot.online {
background: #10b981;
}
.status-dot.offline {
background: #ef4444;
}
.widget-content {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
position: relative;
}
/* Pantalla de arranque: oculta el parpadeo del combo + "Conectando…" hasta que /embed/course-flows responda */
.embed-boot-overlay {
position: absolute;
inset: 0;
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: rgba(248, 250, 252, 0.92);
backdrop-filter: blur(2px);
transition: opacity 0.18s ease;
}
html.embed-boot-overlay-done .embed-boot-overlay {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
/* Formulario de login: no tapar con el overlay */
html.embed-login-gate:not(.embed-token-present) .embed-boot-overlay {
display: none !important;
}
.embed-boot-spinner {
width: 36px;
height: 36px;
border: 3px solid #e2e8f0;
border-top-color: #8b5cf6;
border-radius: 50%;
animation: embed-boot-spin 0.75s linear infinite;
}
@keyframes embed-boot-spin {
to { transform: rotate(360deg); }
}
.embed-boot-text {
font-size: 13px;
color: #64748b;
font-weight: 600;
text-align: center;
max-width: 220px;
line-height: 1.35;
}
.login-form {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
flex: 1;
min-height: 0;
overflow-y: scroll;
scrollbar-gutter: stable;
}
.chat-interface {
display: none;
flex-direction: row;
height: 100%;
min-height: 0;
overflow: hidden;
position: relative;
align-items: stretch;
}
/*
* Evita parpadeo del login: si ya hay token en localStorage, primera pintura muestra el chat.
* Clases las pone un