.ia-vendedor { --bg:#fff; --text:#1f2937; --muted:#6b7280; --brand:#2563eb; --brand-weak:#dbeafe; --border:#e5e7eb; --shadow:0 20px 40px rgba(0,0,0,.12); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
.ia-vendedor * { box-sizing: border-box; }

/* Barra inferior (móvil centrada; desktop a la derecha) */
.ia-barra { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 10px 12px; z-index: 9998; pointer-events: none; }
.ia-boton { pointer-events: all; display: inline-flex; align-items: center; gap: .6rem; background: var(--brand); color:#fff; font-weight: 600; border-radius: 999px; padding: 12px 18px; box-shadow: var(--shadow); cursor: pointer; user-select: none; }
.ia-boton .ia-badge { background: rgba(255,255,255,.15); padding: 2px 8px; border-radius: 999px; font-size: .8rem; }
@media (min-width:768px){ .ia-barra{ justify-content:flex-end; right:18px; left:auto; width:auto } .ia-boton{ border-radius:18px } }

/* Chat box */
.ia-chat { position: fixed; right: 18px; bottom: 78px; width: 360px; max-width: calc(100vw - 24px); background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; z-index: 9999; display: none; }
.ia-vendedor.is-open .ia-chat { display: grid; grid-template-rows: auto 1fr auto; }
@media (max-width: 420px){ .ia-chat { right:12px; left:12px; width:auto } }

/* Header */
.ia-head { display:flex; align-items:center; gap:.75rem; padding:14px 16px; background:#f8fafc; border-bottom:1px solid var(--border) }
.ia-avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--brand-weak); font-size:18px; flex:0 0 34px; }
/* Imagen de avatar (usuario) con recorte circular */
.ia-avatar-img { width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; flex:0 0 34px; border:1px solid #fff; box-shadow:0 0 0 1px var(--border) inset;border: solid 1px #dcdcdc; }

.ia-title{ font-weight:700 } .ia-sub{ font-size:.85rem; color:var(--muted) }
.ia-close{ margin-left:auto; background:transparent; border:0; cursor:pointer; font-size:24px; color:var(--muted);padding: 0 10px; }

/* Mensajes */
.ia-body{ padding:14px; display:flex; flex-direction:column; gap:10px; overflow:auto; max-height:400px;min-height:300px }
.ia-row{ display:flex; gap:8px; align-items:flex-end }
.ia-row.bot { justify-content:flex-start; margin-bottom: 5px; }
.ia-row.user{ justify-content:flex-end; margin-bottom: 5px; }
.ia-bubble{ max-width:78%; padding:10px 12px; border-radius:14px; line-height:1.3; border:1px solid var(--border); background:#f9fafb; }
.ia-row.bot  .ia-bubble{ background:#eef2ff; border-color:#e0e7ff; margin-top: 10px; }
.ia-row.user .ia-bubble{ background:var(--brand); color:#fff; border-color:var(--brand); margin-top: 10px; }
.ia-time{ font-size:.75rem; color:var(--muted); margin:0 6px;position: relative; top: -10px }

/* Pensando… */
.ia-thinking{ display:inline-flex; align-items:center; gap:6px }
.ia-dots{ display:inline-flex; gap:4px }
.ia-dots i{ width:6px; height:6px; border-radius:50%; background:#94a3b8; opacity:.6; animation:dots 1.2s infinite ease-in-out }
.ia-dots i:nth-child(2){ animation-delay:.15s } .ia-dots i:nth-child(3){ animation-delay:.3s }
@keyframes dots { 0%,80%,100%{ transform:translateY(0); opacity:.5 } 40%{ transform:translateY(-4px); opacity:1 } }

/* Input */
.ia-foot{ padding:12px; border-top:1px solid var(--border); background:#f8fafc }
.ia-inputwrap{ display:flex; gap:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:8px 10px; align-items: center; /* 🔹 Esto centra verticalmente textarea + botón */}
.ia-text{ width:100%; border:0; outline:none; resize:none; max-height:120px; line-height:1.35; font-size:14px }
.ia-text:focus {
    outline: none;            /* quita el borde por defecto */
    border: 1px solid var(--brand); /* borde fino del color de tu marca */
    box-shadow: 0 0 0 2px var(--brand-weak); /* opcional: un halo suave */
}
.ia-send {
    background: var(--brand);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    font-weight: 600;
    cursor: pointer;
    height: 38px;
    line-height: 38px; /* centra el texto en el botón */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ia-send:disabled{ opacity:.5; cursor:not-allowed }

/* etiqueta a de msj */
.bubble.bot a { color: #0d6efd; text-decoration: underline; }
.bubble.bot a:hover { text-decoration: none; }
.ia-row.bot .ia-bubble a { text-decoration: underline; }
.ia-row.bot .ia-bubble a:hover { text-decoration: none; }