:root { --bg:#0b1220; --panel:#0f1b33; --text:#e8eefc; --muted:#9fb2d8; --me:#1f6feb; --bot:#1a2a4d; }
*{ box-sizing:border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ margin:0; background:var(--bg); color:var(--text); }
.wrap{ max-width: 980px; margin: 0 auto; padding: 18px; }
.top{ padding: 12px 14px; background: var(--panel); border-radius: 14px; }
.brand{ font-size: 18px; font-weight: 800; }
.sub{ color: var(--muted); margin-top: 2px; font-size: 13px; }

.tools{ display:flex; gap:10px; align-items:center; margin: 12px 0; }
#file, #docs, #clear{
  background: var(--panel);
  color: var(--text);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
#docs{ min-width: 280px; }
#clear{ cursor:pointer; }
.status{ color: var(--muted); font-size: 13px; }

.chat{ height: 62vh; overflow:auto; padding: 14px; background: #071024; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); }
.bubble{ white-space: pre-wrap; padding: 10px 12px; border-radius: 12px; margin: 10px 0; line-height: 1.35; }
.bubble.me{ background: rgba(31,111,235,.25); border: 1px solid rgba(31,111,235,.35); }
.bubble.bot{ background: rgba(26,42,77,.55); border: 1px solid rgba(255,255,255,.08); }

.bar{ display:flex; gap:10px; margin-top: 12px; align-items: stretch; }
#msg{ flex:1; resize: none; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: var(--panel); color: var(--text); }
#send{ width: 120px; border: 0; border-radius: 12px; background: var(--me); color: white; font-weight: 800; cursor: pointer; }
#send:disabled{ opacity: .6; cursor: not-allowed; }

/* --- Copy button on hover (PRO) --- */
.bubble { position: relative; }
.copy-btn{
  position:absolute;
  top:8px;
  right:8px;
  opacity:0;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.9);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.bubble:hover .copy-btn{
  opacity:1;
  pointer-events:auto;
}


/* --- Copy button FINAL FIX --- */
.bubble{
  position: relative !important;
  padding-right: 70px !important; /* espacio para el botón */
}
.copy-btn{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index: 50 !important;
  opacity:0;
  pointer-events:none;
}
.bubble:hover .copy-btn{
  opacity:0; /* debug removed */
  pointer-events:auto !important;
}


/* Copy button (stable with streaming) */
.bubble{ position: relative; padding-right: 78px; }
.copy-btn{
  position:absolute; top:10px; right:10px;
  opacity:0; pointer-events:none;
  z-index: 9999;
}
.bubble:hover .copy-btn{ opacity:1; pointer-events:auto; }


/* Modo general (botón discreto) */
#jxGeneralModeBtn{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
}
#jxGeneralModeBtn:hover{
  background: rgba(255,255,255,0.10);
}

/* ================================
   JUDEXIA IA PRO — PALETA OFICIAL
   SOLO COLORES (NO layout)
================================ */

/* Header IA PRO */
.ia-pro-header,
.chat-header,
.top-header {
  background: radial-gradient(circle at top left, #1d4ed8, #020617 75%);
  color: #e5e7eb;
}

/* Botón Modo general */
#jxGeneralModeBtn,
.btn-modo-general {
  background: rgba(59, 130, 246, 0.18);
  color: #ffffff;
  border: 1px solid rgba(96, 165, 250, 0.55);
}

/* Hover claro y visible */
#jxGeneralModeBtn:hover,
.btn-modo-general:hover {
  background: rgba(59, 130, 246, 0.35);
  border-color: #93c5fd;
  color: #ffffff;
}

/* Estado activo (si lo usas luego) */
#jxGeneralModeBtn.active {
  background: #2563eb;
  border-color: #93c5fd;
  color: #ffffff;
}

/* =================================================
   JUDEXIA IA PRO — OVERRIDE SOLO COLORES
   (NO layout, NO tamaños, NO display)
================================================= */

/* Fondo general */
body{
  background-color: #020617 !important;
  color: #e5e7eb !important;
}

/* Header superior */
.top{
  background: radial-gradient(circle at top left, #1d4ed8, #020617 75%) !important;
  color: #e5e7eb !important;
}

/* Panel principal del chat */
.chat{
  background-color: #071827 !important;
}

/* Botón Modo general */
#jxGeneralModeBtn{
  background-color: rgba(59,130,246,.45) !important;
  border-color: #93c5fd !important;
  color: #ffffff !important;
}

#jxGeneralModeBtn:hover{
  background-color: rgba(59,130,246,.65) !important;
  border-color: #bfdbfe !important;
  color: #ffffff !important;
}


/* =================================================
   JUDEXIA IA PRO — PALETA JUDEXIA ONLINE (SOLO COLORES)
   NO layout, NO display, NO tamaños
================================================= */

/* Fondo general (a prueba de wrappers) */
html, body,
.app, .wrap, .page, .main, .container, .content, .content-wrapper, #app, #root {
  background-color: #f4f5fb !important;
  color: #0f172a !important;
}

/* Header superior (sello Judexia) */
.top, .topbar, header {
  background: radial-gradient(circle at top left, #1d4ed8, #020617 70%) !important;
  color: #e5e7eb !important;
}

/* Área principal del chat (panel) */
.chat, .chat-area, .chat-box, .panel, .card {
  background-color: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Burbujas (solo color) */
.bubble, .msg, .message {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}
.bubble.me, .msg.me, .message.me {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Input (solo color) */
textarea, input[type="text"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}
textarea::placeholder, input::placeholder{
  color: #64748b !important;
}

/* Botones (solo color) */
button, .btn {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: rgba(29, 78, 216, 0.9) !important;
}
button:hover, .btn:hover {
  background-color: #2563eb !important;
}

/* Botón Modo general: visible, contrastado */
#jxGeneralModeBtn{
  background-color: rgba(59,130,246,.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(147,197,253,.75) !important;
}
#jxGeneralModeBtn:hover{
  background-color: rgba(59,130,246,.30) !important;
  border-color: rgba(147,197,253,1) !important;
}

/* Botón Copiar (solo color) */
.copy-btn{
  background: rgba(148,163,184,.18) !important;
  color: #0f172a !important;
  border-color: rgba(148,163,184,.35) !important;
}
.copy-btn:hover{
  background: rgba(148,163,184,.30) !important;
}


/* ===== JX: botón fijo modo general ===== */
.mode-btn{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.15);
  color: rgba(255,255,255,.95);
  font-size: 13px;
  cursor: pointer;
}
.mode-btn:hover{ background: rgba(0,0,0,.25); }