/* Ava · estilos del asistente (adaptados de Sofía 2, Auto Works). Colores de Prime Builder & Development. */
.av-fab, .av-panel, .av-teaser { --av-navy: #14263d; --av-blue: #2f5b88; --av-text: #0b1533; --av-soft: #55607a; --av-line: #e2e7ef; --av-bg: #f4f6fa; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.av-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botón flotante */
.av-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border: 0; border-radius: 99px; background: var(--av-navy); color: #fff; font: 600 0.95rem/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 14px 34px -12px rgba(20, 38, 61, 0.6); transition: transform 0.2s, opacity 0.2s; }
.av-fab:hover { transform: translateY(-2px); }
.av-fab.av-hide { opacity: 0; pointer-events: none; transform: scale(0.9); }
.av-fab-av { width: 40px; height: 40px; color: var(--av-blue); display: block; position: relative; }
.av-fab-av svg { width: 100%; height: 100%; }
.av-fab-av::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #44aa00; border: 2px solid var(--av-navy); }

/* Nube de pensamiento: saludo breve que invita a abrir el chat (el chat nunca se abre solo) */
.av-teaser { position: fixed; right: 30px; bottom: 104px; z-index: 59; background: #fff; color: var(--av-text); border: 1px solid var(--av-line); border-radius: 26px; box-shadow: 0 18px 40px -16px rgba(20, 38, 61, 0.4); padding: 14px 40px 14px 20px; font-size: 0.98rem; font-weight: 600; line-height: 1.35; white-space: nowrap; opacity: 0; transform: translateY(10px) scale(0.96); transform-origin: bottom right; pointer-events: none; transition: opacity 0.35s, transform 0.35s; }
.av-teaser::before, .av-teaser::after { content: ""; position: absolute; background: #fff; border: 1px solid var(--av-line); border-radius: 50%; box-shadow: 0 6px 14px -8px rgba(20, 38, 61, 0.4); }
.av-teaser::before { width: 16px; height: 16px; right: 42px; bottom: -20px; }
.av-teaser::after { width: 9px; height: 9px; right: 32px; bottom: -34px; }
.av-teaser.av-on { opacity: 1; transform: none; pointer-events: auto; animation: av-float 4s ease-in-out 0.4s infinite; }
@keyframes av-float { 50% { transform: translateY(-4px); } }
.av-teaser p { margin: 0; cursor: pointer; }
.av-teaser-x { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; border: 0; background: none; color: var(--av-soft); cursor: pointer; padding: 4px; border-radius: 50%; }
.av-teaser-x:hover { background: var(--av-bg); }
.av-teaser-x svg, .av-x svg { width: 100%; height: 100%; }

/* Panel */
.av-panel { padding: 0; margin: 0; position: fixed; right: 22px; bottom: 22px; z-index: 61; width: 390px; max-width: calc(100vw - 24px); height: min(640px, calc(100vh - 44px)); display: flex; flex-direction: column; background: #fff; color: var(--av-text); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px -24px rgba(20, 38, 61, 0.55); opacity: 0; transform: translateY(14px) scale(0.98); transform-origin: bottom right; transition: opacity 0.25s, transform 0.25s; }
.av-panel.av-on { opacity: 1; transform: none; }
.av-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: linear-gradient(120deg, var(--av-navy), #2f5b88); color: #fff; }
.av-av { width: 42px; height: 42px; color: var(--av-blue); flex: none; }
.av-av svg { width: 100%; height: 100%; }
.av-head strong { display: block; font-size: 1.05rem; }
.av-status { font-size: 0.8rem; color: #c3cbe0; display: flex; align-items: center; gap: 6px; }
.av-status i { width: 8px; height: 8px; border-radius: 50%; background: #44aa00; display: inline-block; }
.av-x { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; padding: 8px; }
.av-x:hover { background: rgba(255, 255, 255, 0.2); }
.av-privacy { margin: 0; padding: 8px 16px; font-size: 0.74rem; color: var(--av-soft); background: var(--av-bg); border-bottom: 1px solid var(--av-line); }

.av-log { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; background: #fff; scroll-behavior: smooth; }
.av-row { display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
.av-bot { align-self: flex-start; }
.av-user { align-self: flex-end; align-items: flex-end; }
.av-msg { padding: 10px 13px; border-radius: 16px; font-size: 0.93rem; line-height: 1.5; word-wrap: break-word; }
.av-bot .av-msg { background: var(--av-bg); border-bottom-left-radius: 5px; }
.av-user .av-msg { background: var(--av-blue); color: #fff; border-bottom-right-radius: 5px; }
.av-msg a { color: var(--av-blue); }
.av-user .av-msg a { color: #fff; }
.av-thumb { display: block; max-width: 180px; border-radius: 10px; margin-bottom: 6px; }
.av-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.av-act { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--av-line); background: #fff; color: var(--av-navy); font: 600 0.84rem/1.1 inherit; font-family: inherit; text-decoration: none; cursor: pointer; }
.av-act:hover { border-color: var(--av-blue); color: var(--av-blue); }
.av-act-main { background: var(--av-blue); border-color: var(--av-blue); color: #fff; }
.av-act-main:hover { background: #244a72; color: #fff; }

.av-typing .av-msg { display: flex; gap: 4px; padding: 13px 14px; }
.av-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5bb; animation: av-dot 1.2s infinite; }
.av-typing i:nth-child(2) { animation-delay: 0.15s; } .av-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes av-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.av-contact { display: flex; flex-direction: column; gap: 8px; }
.av-contact p { margin: 0; }
.av-contact label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; font-weight: 600; color: var(--av-soft); }
.av-contact input, .av-contact textarea { font: inherit; font-size: 0.9rem; padding: 8px 10px; border: 1px solid var(--av-line); border-radius: 8px; background: #fff; color: var(--av-text); resize: vertical; }
.av-contact input:focus, .av-contact textarea:focus { outline: 2px solid rgba(79, 125, 172, 0.35); border-color: var(--av-blue); }
.av-small { font-size: 0.74rem; color: var(--av-soft); }

.av-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px; border-top: 1px solid var(--av-line); scrollbar-width: none; }
.av-chips::-webkit-scrollbar { display: none; }
.av-chip { flex: none; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--av-line); background: #fff; color: var(--av-navy); font: 600 0.8rem/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; }
.av-chip:hover { border-color: var(--av-blue); color: var(--av-blue); }

.av-form { display: flex; align-items: center; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--av-line); }
.av-in { flex: 1; min-width: 0; font: inherit; font-size: 0.95rem; padding: 11px 12px; border: 1px solid var(--av-line); border-radius: 12px; color: var(--av-text); background: var(--av-bg); }
.av-in:focus { outline: 2px solid rgba(79, 125, 172, 0.35); border-color: var(--av-blue); background: #fff; }
.av-ic, .av-send { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; padding: 9px; }
.av-ic { background: none; color: var(--av-soft); }
.av-ic:hover { background: var(--av-bg); color: var(--av-navy); }
.av-ic svg, .av-send svg { width: 100%; height: 100%; }
.av-send { background: var(--av-blue); color: #fff; }
.av-send:hover { background: #244a72; }
.av-mic.av-rec { background: #fdecec; color: #d90d0d; animation: av-pulse 1.2s infinite; }
@keyframes av-pulse { 50% { box-shadow: 0 0 0 6px rgba(217, 13, 13, 0.12); } }

.av-fab:focus-visible, .av-x:focus-visible, .av-chip:focus-visible, .av-act:focus-visible, .av-ic:focus-visible, .av-send:focus-visible { outline: 3px solid #8fb3ff; outline-offset: 2px; }

/* Celular: el panel ocupa toda la pantalla */
@media (max-width: 820px) {
  .av-fab { bottom: 16px; right: 14px; padding: 6px 14px 6px 6px; }
  .av-fab-av { width: 36px; height: 36px; }
  .av-teaser { right: 18px; bottom: 90px; font-size: 0.92rem; }
  .av-panel { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .av-fab, .av-panel, .av-teaser { transition: none; }
  .av-teaser.av-on { animation: none; }
  .av-typing i, .av-mic.av-rec { animation: none; }
}

/* Avatar de Ava */
.av-fab-av img, .av-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.av-av { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.av-fab-av img { box-shadow: 0 0 0 2px #fff; }
.av-fab-av { width: 46px; height: 46px; }
.av-demo-note { align-self: center; font-size: 0.75rem; color: #1f7a4d; background: #e8f6ee; border: 1px dashed #9fd4b5; border-radius: 8px; padding: 6px 10px; text-align: center; max-width: 92%; }
.av-head { border-bottom: 4px solid #8db26d; }
.av-fab { font-family: "Montserrat", system-ui, sans-serif; }
.av-teaser { white-space: normal; max-width: 290px; }