/* ============================================================
   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);
  --cbia-product-item-bg: #ffffff;
  --cbia-product-item-fg: #111111;
  --cbia-product-price-color: #666666;
  --cbia-product-button-bg: var(--cbia-send-bg);
  --cbia-product-button-fg: var(--cbia-send-fg);
  --cbia-product-button-icon-color: var(--cbia-product-button-fg);
}

/* 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:flex;flex-direction:column;
  width:100%;height:100%;
  background:var(--cbia-window-bg);
  border-radius:20px;
  overflow:hidden;
}
.cbia-skin .chat-header{
  padding:14px 20px;
  font-weight:bold;
  background:rgba(0,0,0,0.35);
}
.cbia-skin .chat-messages{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:rgba(0,0,0,0.25);
}

/* 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{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}
.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{
  display:flex;
  gap:8px;
  align-items:center;
  padding: 14px 12px;
  border-top: none;
  background: rgba(0,0,0,0.25);
}
.cbia-skin .chat-input input[type="text"]{
  flex:1;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.15);
  color:#fff;
}
.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); }
}

/* Listado de productos */
.cbia-skin .cbia-product-response{
  margin: 6px 0;
}
.cbia-skin .cbia-product-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cbia-skin .cbia-product-item{
  background: var(--cbia-product-item-bg, #ffffff);
  color: var(--cbia-product-item-fg);
  padding:12px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
}
.cbia-skin .cbia-product-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--cbia-product-item-fg);
}
.cbia-skin .cbia-product-link{
  font-weight: 600;
  color: var(--cbia-link-color, #0057c2);
  text-decoration: none;
  word-break: break-word;
}
.cbia-skin .cbia-product-link:hover{
  text-decoration: underline;
}
.cbia-skin .cbia-product-price{
  font-size: 12px;
  color: var(--cbia-product-price-color) !important;
}
.cbia-skin .cbia-add-product{
  appearance: none;
  border: 1px solid var(--cbia-product-button-bg);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cbia-product-button-bg);
  color: var(--cbia-product-button-fg);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  position: relative;
}
.cbia-skin .cbia-add-product::before{
  content: "\f174";
  font-family: "Dashicons";
  font-size: 20px;
  line-height: 1;
  color: var(--cbia-product-button-icon-color);
}
.cbia-skin .cbia-add-product:hover:not([disabled]){
  transform: scale(1.05);
}
.cbia-skin .cbia-add-product:focus-visible{
  outline: 2px solid var(--cbia-product-button-fg);
  outline-offset: 3px;
}
.cbia-skin .cbia-add-product[disabled]{
  cursor: default;
  opacity: 0.6;
}
.cbia-skin .cbia-add-product--loading{
  opacity: 0.6;
  pointer-events: none;
}
.cbia-skin .cbia-add-product--added{
  opacity: 1;
}
.cbia-skin .cbia-add-product .cbia-sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cbia-skin .cbia-add-feedback{
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cbia-product-price-color);
}
.cbia-skin .cbia-add-feedback--visible{
  display: block;
}
.cbia-skin .cbia-add-feedback--success{
  color: var(--cbia-send-bg);
}
.cbia-skin .cbia-add-feedback--error{
  color: #ff6b6b;
}