/* ── SJI Asistente Jurídico IA — Widget CSS ── */
:root {
  --sji-navy:     #0F1C2E;
  --sji-navy-mid: #1A2D47;
  --sji-gold:     #C8973E;
  --sji-gold-l:   #E8B86D;
  --sji-gold-bg:  #FDF6EC;
  --sji-white:    #FFFFFF;
  --sji-bg:       #F8FAFC;
  --sji-border:   #E2E8F0;
  --sji-text:     #1E293B;
  --sji-text2:    #64748B;
  --sji-green:    #1B7A45;
  --sji-green-bg: #EDFAF3;
  --sji-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sji-r: 14px;
}

/* ── Contenedor principal ── */
.sji-asistente-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  background: var(--sji-white);
  border: 1px solid var(--sji-border);
  border-radius: var(--sji-r);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  font-family: var(--sji-font);
}

/* ── Header ── */
.sji-ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sji-navy);
  padding: 14px 18px;
}
.sji-ai-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(200,151,62,.2);
  border: 2px solid var(--sji-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.sji-ai-header-info { display: flex; flex-direction: column; gap: 2px; }
.sji-ai-header-info strong { color: #fff; font-size: 14px; font-weight: 700; }
.sji-ai-status-dot {
  font-size: 11px; color: var(--sji-gold-l);
  display: flex; align-items: center; gap: 5px;
}
.sji-ai-status-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%; background: #4ADE80;
  display: inline-block;
}

/* ── Área de mensajes ── */
.sji-ai-messages {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--sji-bg);
  scroll-behavior: smooth;
}
.sji-ai-messages::-webkit-scrollbar { width: 4px; }
.sji-ai-messages::-webkit-scrollbar-track { background: transparent; }
.sji-ai-messages::-webkit-scrollbar-thumb { background: var(--sji-border); border-radius: 4px; }

/* ── Burbujas ── */
.sji-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: msgIn .22s ease both;
}
@keyframes msgIn {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: none; }
}
.sji-msg.user  { align-self: flex-end; align-items: flex-end; }
.sji-msg.bot   { align-self: flex-start; align-items: flex-start; }

.sji-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--sji-text);
}
.sji-msg.user .sji-msg-bubble {
  background: var(--sji-navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sji-msg.bot .sji-msg-bubble {
  background: var(--sji-white);
  border: 1px solid var(--sji-border);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.sji-msg-bubble p { margin: 0 0 6px; }
.sji-msg-bubble p:last-child { margin-bottom: 0; }
.sji-msg-bubble ul { padding-left: 18px; margin: 4px 0; }
.sji-msg-bubble li { margin-bottom: 3px; }

/* ── Tarjeta abogado (aparece bajo la burbuja bot) ── */
.sji-abogado-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sji-white);
  border: 1.5px solid rgba(200,151,62,.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 6px;
  text-decoration: none;
  transition: box-shadow .18s, border-color .18s;
  max-width: 100%;
  cursor: pointer;
}
.sji-abogado-card:hover {
  box-shadow: 0 4px 16px rgba(200,151,62,.15);
  border-color: var(--sji-gold);
}
.sji-abogado-foto {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--sji-gold);
}
.sji-abogado-foto-placeholder {
  width: 44px; height: 44px;
  border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--sji-gold);
  background: var(--sji-gold-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.sji-abogado-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sji-abogado-nombre { font-size: 13px; font-weight: 700; color: var(--sji-text); }
.sji-abogado-esp    { font-size: 11px; color: var(--sji-text2); }
.sji-abogado-area-tag {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
  padding: 2px 7px; border-radius: 4px;
  background: var(--sji-gold-bg); color: #9A6F28;
  border: 1px solid rgba(200,151,62,.3);
  align-self: flex-start;
}
.sji-abogado-ctas {
  display: flex; flex-direction: column; gap: 5px; flex-shrink: 0;
}
.sji-abogado-btn {
  font-size: 10px; font-weight: 700; text-decoration: none;
  padding: 5px 10px; border-radius: 5px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  transition: opacity .15s;
}
.sji-abogado-btn:hover { opacity: .85; }
.sji-abogado-btn.agenda {
  background: var(--sji-navy); color: var(--sji-gold-l);
}
.sji-abogado-btn.ws {
  background: #25D366; color: #fff;
}

/* ── CTA genérico bajo mensaje ── */
.sji-cta-bar {
  display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;
}
.sji-cta-btn {
  font-size: 11px; font-weight: 700; text-decoration: none;
  padding: 6px 14px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: opacity .15s;
}
.sji-cta-btn:hover { opacity: .88; }
.sji-cta-btn.primary { background: var(--sji-navy); color: var(--sji-gold-l); }
.sji-cta-btn.ws      { background: #25D366; color: #fff; }

/* ── Typing indicator ── */
.sji-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  background: var(--sji-white);
  border: 1px solid var(--sji-border);
  border-radius: 14px; border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.sji-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sji-text2); display: inline-block;
  animation: bounce .9s infinite;
}
.sji-typing span:nth-child(2) { animation-delay: .15s; }
.sji-typing span:nth-child(3) { animation-delay: .30s; }
@keyframes bounce {
  0%,60%,100% { transform: translateY(0); }
  30%         { transform: translateY(-5px); }
}

/* ── Input area ── */
.sji-ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: var(--sji-white);
  border-top: 1px solid var(--sji-border);
}
#sji-ai-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--sji-border);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13.5px;
  font-family: var(--sji-font);
  color: var(--sji-text);
  outline: none;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  transition: border-color .18s, box-shadow .18s;
}
#sji-ai-input:focus {
  border-color: var(--sji-gold);
  box-shadow: 0 0 0 3px rgba(200,151,62,.12);
}
#sji-ai-input::placeholder { color: #94A3B8; }

/* ── Button area ── */
.sji-ai-send-btn {
  flex-shrink: 0;
  background: var(--sji-gold);
  color: var(--sji-navy);
  border: none; border-radius: 10px;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  gap: 6px;
  font-size: 12px; font-weight: 800;
  font-family: var(--sji-font);
  letter-spacing: .4px;
  padding: 0 18px;
  height: 40px;
  white-space: nowrap;
  transition: background .18s, transform .12s;
}
.sji-ai-send-btn:hover  { background: var(--sji-gold-l); }
.sji-ai-send-btn:active { transform: scale(.94); }
.sji-ai-send-btn:disabled { opacity: .4; cursor: default; }

/* Móvil — botón redondo solo con ícono */
@media (max-width: 600px) {
  .sji-ai-send-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    padding: 0;
    font-size: 0;     /* oculta el texto */
    gap: 0;
  }
  .sji-ai-send-btn svg {
    display: block;   /* muestra solo el SVG */
    width: 18px; height: 18px;
  }
}

/* ── Disclaimer ── */
.sji-ai-disclaimer {
  font-size: 10px;
  color: var(--sji-text2);
  text-align: center;
  padding: 6px 14px 10px;
  background: var(--sji-white);
  border-top: 1px dashed var(--sji-border);
  margin: 0;
  line-height: 1.5;
}