/* ============================================================
   Oasis Omnicanal · Asistente IA · prefijo .ia-
   Botones del compositor (Mejorar con IA, Sugerir respuesta, Resumir), tarjeta flotante de sugerencias,
   pastilla de "Deshacer" y pestaña IA del panel derecho (resumen, sugerencia y uso del día).
   Usa los tokens de css/oasis.css. Sin emojis: la chispa es el ícono SVG 'ia'.
   ============================================================ */

/* ---------------- chispa animada (cargando) ---------------- */
.ia-chispa { display: inline-flex; align-items: center; justify-content: center; color: var(--olivo); flex: none; }
.ia-chispa .o-ico { transform-origin: 50% 50%; }
.ia-chispa.viva .o-ico { animation: ia-chispa 1.9s ease-in-out infinite; }
@keyframes ia-chispa {
  0%, 100% { transform: scale(.9) rotate(-6deg); color: var(--olivo); opacity: .75; }
  50% { transform: scale(1.08) rotate(6deg); color: var(--cobre); opacity: 1; }
}
.ia-chispa-grande { width: 44px; height: 44px; border-radius: 50%; background: var(--olivo-50); border: 1px solid #DCE1C8; }

/* botón que está trabajando (lo marca ia.js sobre el botón del compositor) */
.ia-trabajando { cursor: progress !important; pointer-events: none; }
.ia-trabajando .o-ico { animation: ia-chispa 1.9s ease-in-out infinite; transform-origin: 50% 50%; }

/* compositor mientras la IA reescribe: un brillo suave encima, sin tapar el texto */
.ia-reescribiendo { position: relative; }
.ia-reescribiendo::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, rgba(240,242,230,0) 20%, rgba(221,161,94,.16) 45%, rgba(96,108,56,.10) 55%, rgba(240,242,230,0) 80%);
  background-size: 260% 100%; animation: ia-brillo 1.5s ease-in-out infinite;
}
.ia-reescribiendo textarea, .ia-reescribiendo [contenteditable] { color: var(--ink-3t) !important; }
@keyframes ia-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------------- tarjeta flotante (sugerencia desde el compositor) ---------------- */
.ia-velo { position: fixed; inset: 0; z-index: var(--z-menu); pointer-events: none; }
.ia-velo.hoja { pointer-events: auto; background: rgba(35,42,28,.34); animation: o-aparece .14s; }
.ia-tarjeta {
  position: fixed; pointer-events: auto; width: 392px; max-width: calc(100vw - 16px); max-height: min(560px, calc(100vh - 24px)); max-height: min(560px, calc(100dvh - 24px));
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radio-l);
  box-shadow: var(--sombra-l); animation: ia-sube .16s ease-out; overflow: hidden;
}
@keyframes ia-sube { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ia-tarjeta-cab { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--line-2); flex: none; }
.ia-tarjeta-cab h3 { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.ia-tarjeta-cuerpo { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ia-tarjeta-pie { padding: 10px 14px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3t); display: flex; align-items: center; gap: 6px; flex: none; background: #FCFBF7; }
.ia-tarjeta-pie .o-ico { color: var(--ink-3); flex: none; }

/* texto propuesto: se ve como un mensaje nuestro */
.ia-propuesta { background: var(--burbuja-out); border: 1px solid #E1E6D0; border-radius: 12px 12px 4px 12px; padding: 10px 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.ia-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ia-acciones .ia-der { margin-left: auto; }

/* cargando dentro de tarjetas y secciones */
.ia-cargando { display: flex; flex-direction: column; gap: 12px; }
.ia-cargando-txt { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.ia-cargando .o-esq { background: linear-gradient(90deg, #EFF1E6 0%, #FAF6EC 45%, #EFF1E6 90%); background-size: 220% 100%; }
.ia-lineas { display: flex; flex-direction: column; gap: 9px; }

/* errores y límite */
.ia-error { display: flex; flex-direction: column; gap: 10px; }
.ia-limite { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radio); background: var(--arena-50); border: 1px solid #F0DCBC; color: var(--arena-t); }
.ia-limite .o-ico { flex: none; margin-top: 1px; }
.ia-limite b { display: block; font-size: 14px; color: #6A4312; margin-bottom: 2px; }
.ia-limite p { font-size: 13px; line-height: 1.45; }

/* ---------------- pastilla "Deshacer" ---------------- */
.ia-deshacer {
  position: fixed; z-index: var(--z-toast); display: flex; align-items: center; gap: 4px; min-height: 36px; max-width: calc(100vw - 16px);
  padding: 4px 4px 4px 12px; border-radius: 999px; background: #2C3423; color: #F4F3EA; font-size: 13px; box-shadow: var(--sombra-l);
  animation: ia-sube .16s ease-out;
}
.ia-deshacer > .o-ico { color: #E5C38F; flex: none; }
.ia-deshacer span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.ia-deshacer button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; color: #F4F3EA; font-weight: 600; font-size: 13px; }
.ia-deshacer button:hover, .ia-deshacer button:focus-visible { background: rgba(255,255,255,.12); outline: none; }
.ia-deshacer .ia-x { width: 28px; padding: 0; justify-content: center; font-weight: 400; opacity: .8; }
.ia-deshacer.sale { animation: o-toast-sale .18s ease-in forwards; }

/* ---------------- pestaña IA del panel derecho ---------------- */
.ia-panel { padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 14px; }
.ia-sec { border: 1px solid var(--line); border-radius: var(--radio-l); background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ia-sec-cab { display: flex; align-items: center; gap: 8px; }
.ia-sec-cab h3 { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.ia-sec-cab .ia-cuando { font-size: 12px; color: var(--ink-3t); white-space: nowrap; }
.ia-sec-cab > .o-ico { color: var(--olivo); flex: none; }

/* estado inicial (antes de pedir) */
.ia-intro { display: flex; gap: 12px; align-items: flex-start; }
.ia-intro p { font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* resumen */
.ia-resumen { font-size: 14px; line-height: 1.55; color: var(--ink); }
.ia-sub { font-size: 12px; font-weight: 600; color: var(--ink-3t); margin-bottom: -4px; }
.ia-puntos { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ia-puntos li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.ia-puntos li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--arena); }
.ia-paso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio); background: var(--olivo-50); border: 1px solid #DCE1C8; }
.ia-paso > .o-ico { color: var(--olivo); flex: none; margin-top: 2px; }
.ia-paso b { display: block; font-size: 12px; font-weight: 600; color: #4A5428; margin-bottom: 2px; }
.ia-paso p { font-size: 14px; line-height: 1.45; color: #2F3820; }
.ia-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3t); }
.ia-meta .ia-der { margin-left: auto; display: flex; gap: 2px; }
.ia-viejo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radio-s); background: var(--arena-50); border: 1px solid #F0DCBC; color: var(--arena-t); font-size: 13px; }
.ia-viejo .o-ico { flex: none; }
.ia-viejo .o-btn { margin-left: auto; }

/* nota de la sugerencia ("Antes de enviar…") */
.ia-nota { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radio-s); background: var(--arena-50); border: 1px solid #F0DCBC; color: var(--arena-t); font-size: 13px; line-height: 1.45; }
.ia-nota .o-ico { flex: none; margin-top: 1px; }
.ia-nota b { font-weight: 600; color: #6A4312; }

/* uso del día */
.ia-uso { display: flex; flex-direction: column; gap: 7px; padding: 2px 2px 0; }
.ia-uso-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ia-uso-fila b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ia-barra { display: block; height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.ia-barra i { display: block; height: 100%; border-radius: 99px; background: var(--olivo); transition: width .4s ease; }
.ia-barra.alto i { background: var(--cobre); }
.ia-chico { font-size: 12px; line-height: 1.45; color: var(--ink-3t); }
.ia-confianza { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--ink-3t); padding: 0 2px; }
.ia-confianza .o-ico { flex: none; color: var(--ink-3); margin-top: 1px; }

/* ---------------- celular ---------------- */
@media (max-width: 759px) {
  .ia-tarjeta { left: 0 !important; right: 0; bottom: 0 !important; top: auto !important; width: 100%; max-width: none; max-height: 84vh; max-height: 84dvh; border-radius: 16px 16px 0 0; border: 0; animation: o-hoja .2s ease-out; padding-bottom: env(safe-area-inset-bottom); }
  .ia-tarjeta .o-hoja-asa { margin: 6px auto 0; }
  .ia-tarjeta-cab { border-bottom: 0; padding-top: 4px; }
  .ia-acciones .o-btn, .ia-sec .o-btn:not(.ico), .ia-error .o-btn { min-height: 44px; }
  .ia-acciones .o-btn.pri { flex: 1 1 100%; }
  .ia-sec .ia-meta .o-btn.ico { width: 44px; height: 44px; }
  .ia-propuesta { font-size: 15px; }
  .ia-panel { padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); }
  .ia-deshacer { left: 8px !important; right: 8px; max-width: none; min-height: 44px; }
  .ia-deshacer span { flex: 1; }
  .ia-deshacer button { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-chispa.viva .o-ico, .ia-trabajando .o-ico, .ia-reescribiendo::after, .ia-cargando .o-esq { animation: none; }
  .ia-tarjeta, .ia-deshacer { animation: none; }
}