/* ============================================================
   ChatBoyIA – Skin único (frontend = preview)
   Aislado en .cbia-skin para evitar overrides del tema
   ============================================================ */

:root{
  --cbia-window-bg: #111;
  --cbia-user-bg:   #a3d8ff;
  --cbia-user-fg:   #000;
  --cbia-ai-bg:     #cfe9f2;
  --cbia-ai-fg:     #000;
  --cbia-border:    #2b2b2b;
  --cbia-actions-bg:#1b1b1b;
  --cbia-send-bg:   #1e90ff;
  --cbia-send-fg:   #fff;
  --cbia-font:      Arial, sans-serif;
  --cbia-font-size: 14px;
  /* nuevas */
  --cbia-input-bg:  #ffffff;
  --cbia-icons-color: var(--cbia-send-bg);
}

/* Scope / reset suave */
.cbia-skin, .cbia-skin * { box-sizing: border-box; }
.cbia-skin{ font-family: var(--cbia-font); font-size: var(--cbia-font-size); line-height: 1.35; }

/* Ventana */
.cbia-skin .chatboyia-window{
  display: grid;
  grid-template-rows: 1fr auto;           /* mensajes / barra */
  grid-template-columns: auto 1fr;         /* [acciones][input+enviar] */
  grid-template-areas:
    "messages messages"
    "actions  inputbar";
  height: 400px;                           /* sobreescrito inline */
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--cbia-window-bg); /* color base; imagen se pone inline */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1000;
}

/* Mensajes */
.cbia-skin .chat-messages{
  grid-area: messages;
  overflow-y: auto;
  padding: 12px;
  background: transparent;  /* imagen inline */
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Burbujas */
.cbia-skin .chatboyia-user, 
.cbia-skin .chatboyia-ai,
.cbia-skin .chatboyia-assistant{
  max-width: 82%;
  padding: 10px 12px;
  border: 1px solid var(--cbia-border);
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Usuario: derecha */
.cbia-skin .chatboyia-user{
  background: var(--cbia-user-bg);
  color: var(--cbia-user-fg);
  align-self: flex-end;
  margin-left: auto;
  border-radius: 16px 16px 8px 16px;
}
.cbia-skin .chatboyia-user a{ color: var(--cbia-user-fg); }

/* IA: izquierda */
.cbia-skin .chatboyia-ai,
.cbia-skin .chatboyia-assistant{
  background: var(--cbia-ai-bg);
  color: var(--cbia-ai-fg);
  align-self: flex-start;
  margin-right: auto;
  border-radius: 16px 16px 16px 8px;
}

/* Acciones */
.cbia-skin .chat-actions{
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #0006;                 /* leve overlay; la ventana puede tener imagen */
  border-top: 1px solid #2b2b2b;
  z-index: 1002;
}
.cbia-skin .chat-actions button{
  -webkit-appearance: none; appearance: none;
  display: grid; place-items: center; line-height: 0;
  width: 36px; height: 36px;
  padding: 0; margin: 0;
  border: 1px solid #2b2b2b; border-radius: 10px;
  background: var(--cbia-actions-bg) !important;  /* evita rojo del tema */
  box-shadow: inset 0 0 0 1px #000;
  cursor: pointer;
}
.cbia-skin .chat-actions .dashicons{
  font-size: 18px; width: 18px; height: 18px; line-height: 1;
  color: var(--cbia-icons-color) !important;       /* fija color de iconos */
}

/* Input + Enviar */
.cbia-skin .chat-input{
  grid-area: inputbar;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--cbia-input-bg, #fff) !important;  /* misma base en front/preview */
  border-top: 1px solid #2b2b2b;
  z-index: 1002;
}
.cbia-skin .chat-input-text{
  flex: 1 1 auto; min-width: 0;
  padding: 10px;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background: #fff;
  color: #000;
}
.cbia-skin .chat-send-btn{
  -webkit-appearance: none; appearance: none;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: var(--cbia-send-bg) !important;
  color: var(--cbia-send-fg) !important;
}

/* Micrófono */
.cbia-skin .voice-btn{ white-space: nowrap; line-height: 1.2; padding: 0; }
.cbia-skin .voice-btn.recording{ background-color: red !important; animation: blink 1s infinite; color:#fff; }
@keyframes blink { 50% { opacity: .5; } }

/* Anti overlays */
.cbia-skin .chat-actions, .cbia-skin .chat-input{ position: relative; z-index: 1003; }

/* Indicador de escritura */
.cbia-skin .chatboyia-ai.typing{ display:flex; gap:4px; }
.cbia-skin .cbia-dot{
  width:6px; height:6px; border-radius:50%; background: var(--cbia-ai-fg);
  opacity:0.2; animation: cbia-typing 1s infinite ease-in-out;
}
.cbia-skin .cbia-dot:nth-child(2){ animation-delay:0.2s; }
.cbia-skin .cbia-dot:nth-child(3){ animation-delay:0.4s; }
@keyframes cbia-typing{
  0%,80%,100%{ opacity:0.2; transform:translateY(0); }
  40%{ opacity:1; transform:translateY(-4px); }
}