/* ===================== JARVIS — chat + micrófono (ORCHEST) =====================
   Todas las reglas están namespaced bajo .jarvis-* — no toca nada del resto de la
   app. Usa las mismas variables de diseño que ya definís en :root (index.html),
   así que combina con el tema normal Y con el tema-hud si está activo. */

.jarvis-panel {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  max-width: 92vw;
  height: 100vh;
  background: var(--panel-surface, #12151b);
  border-left: 1px solid var(--border, #232833);
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6));
  display: flex;
  flex-direction: column;
  z-index: 9999;
  transition: right 0.25s ease;
}

.jarvis-panel.jarvis-abierto {
  right: 0;
}

.jarvis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #232833);
  background: var(--panel-surface-raised, #171b23);
}

.jarvis-titulo {
  font-weight: 700;
  color: var(--text-main, #e6e9ee);
  font-size: 0.95rem;
}

.jarvis-subtitulo {
  font-weight: 400;
  color: var(--muted, #838d99);
  font-size: 0.8rem;
}

.jarvis-header-botones {
  display: flex;
  gap: 6px;
}

.jarvis-icon-btn {
  background: transparent;
  border: 1px solid var(--border, #232833);
  color: var(--text-main, #e6e9ee);
  border-radius: var(--radius-sm, 5px);
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jarvis-icon-btn:hover {
  border-color: var(--cyan, #5b9dff);
}

.jarvis-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jarvis-burbuja {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: var(--radius, 8px);
  font-size: 0.86rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.jarvis-burbuja-jarvis {
  align-self: flex-start;
  background: var(--panel-surface-raised, #171b23);
  border: 1px solid var(--border, #232833);
  color: var(--text-main, #e6e9ee);
}

.jarvis-burbuja-usuario {
  align-self: flex-end;
  background: var(--cyan-dim, #3a6bc4);
  color: #ffffff;
}

.jarvis-burbuja-sistema {
  align-self: center;
  background: transparent;
  color: var(--muted, #838d99);
  font-style: italic;
  font-size: 0.78rem;
  text-align: center;
}

.jarvis-burbuja-ok {
  border-color: var(--green, #3ecf8e);
  color: var(--green, #3ecf8e);
  font-family: 'JetBrains Mono', monospace;
}

.jarvis-burbuja-warn {
  border-color: var(--orange, #d9a441);
  color: var(--orange, #d9a441);
  font-family: 'JetBrains Mono', monospace;
}

.jarvis-burbuja-error {
  border-color: var(--red, #e5484d);
  color: var(--red, #e5484d);
}

.jarvis-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border, #232833);
  background: var(--panel-surface-raised, #171b23);
}

.jarvis-input {
  flex: 1;
  background: var(--bg-dark, #0a0c10);
  border: 1px solid var(--border, #232833);
  color: var(--text-main, #e6e9ee);
  border-radius: var(--radius-sm, 5px);
  padding: 9px 12px;
  font-size: 0.85rem;
  outline: none;
}

.jarvis-input:focus {
  border-color: var(--cyan, #5b9dff);
}

.jarvis-mic-btn, .jarvis-send-btn {
  background: var(--cyan-dim, #3a6bc4);
  border: none;
  color: #ffffff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  min-width: 38px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}

.jarvis-mic-btn:hover, .jarvis-send-btn:hover {
  background: var(--cyan, #5b9dff);
  transform: scale(1.05);
}

.jarvis-mic-btn.jarvis-mic-activo {
  background: var(--red, #e5484d);
  animation: jarvis-pulso 1.1s infinite;
}

@keyframes jarvis-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

@media (max-width: 480px) {
  .jarvis-panel { width: 100vw; right: -100vw; }
}


/* ---- burbuja de código generado + botón insertar (potenciación: asistencia de código) ---- */
.jarvis-burbuja-codigo {
  max-width: 96%;
}

.jarvis-codigo-lang {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--muted, #838d99);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.jarvis-code-block {
  background: var(--bg-dark, #0a0c10);
  border: 1px solid var(--border, #232833);
  border-radius: var(--radius-sm, 5px);
  padding: 10px 12px;
  margin: 6px 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-main, #e6e9ee);
  white-space: pre;
}

.jarvis-btn-insertar {
  background: transparent;
  border: 1px solid var(--green, #3ecf8e);
  color: var(--green, #3ecf8e);
  border-radius: var(--radius-sm, 5px);
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  width: 100%;
}

.jarvis-btn-insertar:hover {
  background: var(--green, #3ecf8e);
  color: #0a0c10;
}