/* Estilos del widget Trovi — chatbot.css */

/* ─── Contenedor raíz ─────────────────────────────────────────────────── */
#trovi-chatbot {
  position : fixed;
  bottom   : 1.5rem;
  right    : 1.5rem;
  z-index  : 9999;
  display  : flex;
  flex-direction: column-reverse;
  align-items   : flex-end;
  gap      : .75rem;
}

/* ─── Botón flotante ─────────────────────────────────────────────────── */
.trovi-toggle {
  position        : relative;
  width           : 74px;
  height          : 74px;
  border-radius   : 50%;
  border          : none;
  background      : transparent;
  box-shadow      : 0 8px 24px rgba(0,0,0,.18);
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 0;
  transition      : transform .2s ease, box-shadow .2s ease;
  animation       : trovi-float 3s ease-in-out infinite;
}

.trovi-toggle:hover {
  transform  : scale(1.08);
  box-shadow : 0 12px 32px rgba(0,0,0,.25);
}

.trovi-toggle:focus-visible {
  outline       : 3px solid #83d9ae;
  outline-offset: 3px;
}

/* Flotación suave del botón */
@keyframes trovi-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ─── Burbuja de bienvenida ──────────────────────────────────────────── */
.trovi-bubble {
  position      : absolute;
  bottom        : 84px;
  right         : 0;
  background    : #fff;
  color         : #1e293b;
  font-size     : .8rem;
  font-weight   : 500;
  white-space   : nowrap;
  padding       : .45rem .85rem;
  border-radius : .75rem .75rem 0 .75rem;
  box-shadow    : 0 4px 16px rgba(0,0,0,.22);
  border        : 1px solid rgba(249,115,22,.6);
  box-shadow    : 0 4px 16px rgba(249,115,22,.15);
  pointer-events: none;
  opacity       : 0;
  transform     : translateY(6px) scale(.95);
  animation     : trovi-bubble-in .4s ease .8s forwards,
                  trovi-bubble-out .4s ease 6s forwards;
}

/* Flecha apuntando al botón */
.trovi-bubble::after {
  content      : '';
  position     : absolute;
  bottom       : -7px;
  right        : 22px;
  width        : 0;
  height       : 0;
  border-left  : 7px solid transparent;
  border-right : 0 solid transparent;
  border-top   : 7px solid #fff;
}

@keyframes trovi-bubble-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes trovi-bubble-out {
  to { opacity: 0; transform: translateY(6px) scale(.95); pointer-events: none; }
}

/* Ocultar burbuja cuando el panel esté abierto */
#trovi-chatbot.is-open .trovi-bubble {
  display: none;
}

/* Badge de notificación */
.trovi-badge {
  position        : absolute;
  top             : -2px;
  right           : -2px;
  background      : #e53e3e;
  color           : #fff;
  font-size       : .65rem;
  font-weight     : 700;
  border-radius   : 999px;
  min-width       : 18px;
  height          : 18px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 0 4px;
  z-index         : 1;
}

/* ─── Panel ──────────────────────────────────────────────────────────── */
.trovi-panel {
  width         : 360px;
  max-width     : calc(100vw - 2rem);
  height        : 520px;
  max-height    : calc(100vh - 5rem);
  background    : #ffffff;
  border-radius : 1rem;
  box-shadow    : 0 8px 32px rgba(0,0,0,.18);
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  animation     : trovi-slide-in .2s ease;
}

@keyframes trovi-slide-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.trovi-header {
  display     : flex;
  align-items : center;
  gap         : .5rem;
  padding     : .85rem 1rem;
  background  : #F39200;
  color       : #fff;
  flex-shrink : 0;
  border-bottom: none;
}

.trovi-header img {
  border-radius: 50%;
  object-fit   : cover;
  flex-shrink  : 0;
}

.trovi-header-title {
  flex         : 1;
  font-weight  : 600;
  font-size    : .9rem;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.trovi-close {
  background  : transparent;
  border      : none;
  color       : #fff;
  font-size   : 1.4rem;
  line-height : 1;
  cursor      : pointer;
  padding     : 0 .25rem;
  opacity     : .7;
  transition  : opacity .15s;
}

.trovi-close:hover { opacity: 1; }

/* ─── Zona de mensajes ───────────────────────────────────────────────── */
.trovi-messages {
  flex           : 1;
  overflow-y     : auto;
  padding        : 1rem;
  display        : flex;
  flex-direction : column;
  gap            : .6rem;
  scroll-behavior: smooth;
}

/* ─── Burbujas ───────────────────────────────────────────────────────── */
.trovi-msg {
  max-width : 85%;
  word-break: break-word;
}

/* Contenedor de burbuja compartido (div para bot, p para usuario/error) */
.trovi-msg .trovi-bubble-content {
  margin        : 0;
  padding       : .55rem .85rem;
  border-radius : 1rem;
  font-size     : .875rem;
  line-height   : 1.5;
}

.trovi-msg--bot {
  align-self: flex-start;
}

.trovi-msg--bot .trovi-bubble-content {
  background               : #f4f4f5;
  color                    : #2d2d2d;
  border-bottom-left-radius: .25rem;
}

.trovi-msg--user {
  align-self: flex-end;
}

.trovi-msg--user .trovi-bubble-content {
  background                : #F39200;
  color                     : #fff;
  border-bottom-right-radius: .25rem;
}

/* ─── Fotos adjuntas dentro del mensaje del usuario ─────────────────── */
.trovi-msg-fotos {
  display        : flex;
  flex-wrap      : wrap;
  gap            : .3rem;
  justify-content: flex-end;
  margin-top     : .35rem;
}
.trovi-msg-foto {
  width        : 72px;
  height       : 72px;
  object-fit   : cover;
  border-radius: .5rem;
  cursor       : zoom-in;
  border       : 2px solid rgba(255,255,255,.5);
  transition   : border-color .15s;
}
.trovi-msg-foto:hover { border-color: #fff; }

.trovi-msg--error .trovi-bubble-content {
  background: #fff3cd;
  color     : #856404;
  border    : 1px solid #ffc107;
}

/* ─── Markdown dentro de mensajes del bot ────────────────────────────── */
.trovi-msg--bot .trovi-bubble-content ul,
.trovi-msg--bot .trovi-bubble-content ol {
  margin       : .4rem 0 .4rem 0;
  padding-left : 1.2rem !important;
  list-style   : disc !important;
}
.trovi-msg--bot .trovi-bubble-content ol {
  list-style   : decimal !important;
}
/* Forzar también en li por si el dashboard lo resetea directamente */
.trovi-msg--bot .trovi-bubble-content ul > li {
  display          : list-item !important;
  list-style-type  : disc !important;
  list-style-position: outside !important;
  margin-bottom    : .45rem;
  line-height      : 1.45;
}
.trovi-msg--bot .trovi-bubble-content ol > li {
  display          : list-item !important;
  list-style-type  : decimal !important;
  list-style-position: outside !important;
  margin-bottom    : .45rem;
  line-height      : 1.45;
}
.trovi-msg--bot .trovi-bubble-content code {
  background   : #e4e4e7;
  border-radius: .25rem;
  padding      : .1em .35em;
  font-size    : .82rem;
  font-family  : ui-monospace, monospace;
}
.trovi-msg--bot .trovi-bubble-content pre {
  background   : #e4e4e7;
  border-radius: .5rem;
  padding      : .6rem .8rem;
  margin       : .35rem 0;
  overflow-x   : auto;
  font-size    : .8rem;
}
.trovi-msg--bot .trovi-bubble-content pre code {
  background: none;
  padding   : 0;
}
.trovi-msg--bot .trovi-bubble-content a {
  color          : #F39200;
  text-decoration: underline;
  font-weight    : 600;
  word-break     : break-all;
}
.trovi-msg--bot .trovi-bubble-content a:hover {
  color: #c97700;
}

/* ─── Indicador de escritura ─────────────────────────────────────────── */
.trovi-typing {
  align-self: flex-start;
}

.trovi-typing span {
  display       : inline-block;
  width         : 7px;
  height        : 7px;
  margin        : 0 2px;
  background    : #999;
  border-radius : 50%;
  animation     : trovi-bounce .9s infinite;
}

.trovi-typing span:nth-child(2) { animation-delay: .15s; }
.trovi-typing span:nth-child(3) { animation-delay: .30s; }

@keyframes trovi-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-5px); }
}

/* ─── Formulario de entrada ──────────────────────────────────────────── */
.trovi-form {
  display     : flex;
  align-items : flex-end;
  gap         : .5rem;
  padding     : .75rem 1rem;
  border-top  : 1px solid #e5e7eb;
  flex-shrink : 0;
}

.trovi-input {
  flex         : 1;
  border       : 1px solid #d1d5db;
  background   : #ffffff;
  border-radius: .5rem;
  padding      : .45rem .75rem;
  font-size    : .875rem;
  outline      : none;
  transition   : border-color .15s;
  resize       : none;
  overflow-y   : auto;
  line-height  : 1.45;
  min-height   : 2rem;
  max-height   : calc(1.45em * 10 + .9rem); /* ~10 líneas */
  box-sizing   : border-box;
}

.trovi-input:focus { border-color: #F39200; }

.trovi-send {
  background   : #F39200;
  border       : 1px solid #F39200;
  border-radius: .5rem;
  color        : #fff;
  padding      : .45rem .75rem;
  cursor       : pointer;
  font-size    : 1rem;
  line-height  : 1;
  transition   : background .15s, border-color .15s;
}

.trovi-send:hover { background: #d97f00; border-color: #d97f00; }

/* ─── Botón adjuntar foto ────────────────────────────────────────────── */
.trovi-foto-btn {
  background   : transparent;
  border       : 1px solid #d1d5db;
  border-radius: .5rem;
  color        : #6b7280;
  padding      : .45rem .55rem;
  cursor       : pointer;
  line-height  : 1;
  flex-shrink  : 0;
  transition   : color .15s, border-color .15s;
  display      : flex;
  align-items  : center;
  justify-content: center;
}
.trovi-foto-btn:hover { color: #F39200; border-color: #F39200; }

/* ─── Zona de thumbnails (multi-foto) ───────────────────────────────── */
.trovi-thumb-zone {
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : .4rem;
  padding     : .4rem 1rem 0;
}
.trovi-thumb-item {
  position     : relative;
  width        : 52px;
  height       : 52px;
  flex-shrink  : 0;
}
.trovi-thumb-item--uploading {
  display      : flex;
  align-items  : center;
  justify-content: center;
  background   : #f3f4f6;
  border-radius: .4rem;
  border       : 1px solid #e5e7eb;
}
.trovi-thumb-img {
  width        : 52px;
  height       : 52px;
  object-fit   : cover;
  border-radius: .4rem;
  border       : 1px solid #e5e7eb;
  display      : block;
}
.trovi-thumb-remove {
  position     : absolute;
  top          : -6px;
  right        : -6px;
  background   : rgba(0,0,0,.6);
  border       : none;
  border-radius: 50%;
  color        : #fff;
  width        : 17px;
  height       : 17px;
  font-size    : .7rem;
  line-height  : 17px;
  text-align   : center;
  cursor       : pointer;
  padding      : 0;
  z-index      : 1;
}
.trovi-thumb-remove:hover { background: #dc2626; }
.trovi-thumb-img { cursor: zoom-in; }

/* ─── Lightbox foto ─────────────────────────────────────── */
#trovi-lightbox {
  position     : fixed;
  inset        : 0;
  background   : rgba(0,0,0,.82);
  display      : flex;
  align-items  : center;
  justify-content: center;
  z-index      : 99999;
  cursor       : zoom-out;
  padding      : 1rem;
  animation    : trovi-fade-in .15s ease;
}
#trovi-lightbox img {
  max-width    : min(90vw, 680px);
  max-height   : 80vh;
  object-fit   : contain;
  border-radius: .5rem;
  box-shadow   : 0 8px 40px rgba(0,0,0,.6);
  pointer-events: none;
}
#trovi-lightbox-close {
  position     : fixed;
  top          : 1rem;
  right        : 1rem;
  background   : rgba(255,255,255,.15);
  border       : none;
  border-radius: 50%;
  color        : #fff;
  width        : 36px;
  height       : 36px;
  font-size    : 1.25rem;
  line-height  : 36px;
  text-align   : center;
  cursor       : pointer;
  padding      : 0;
  transition   : background .15s;
}
#trovi-lightbox-close:hover { background: rgba(255,255,255,.3); }
@keyframes trovi-fade-in { from { opacity: 0; } to { opacity: 1; } }
.trovi-thumb-spinner {
  display      : inline-block;
  width        : 16px;
  height       : 16px;
  border       : 2px solid #e5e7eb;
  border-top-color: #F39200;
  border-radius: 50%;
  animation    : trovi-spin .7s linear infinite;
  flex-shrink  : 0;
}
@keyframes trovi-spin { to { transform: rotate(360deg); } }

/* ─── Responsive ─────────────────────────────────────────────────────── */

/* Móvil — todos los teléfonos */
@media (max-width: 576px) {
  #trovi-chatbot {
    bottom: .75rem;
    right : .75rem;
  }

  .trovi-panel {
    width     : calc(100vw - 1.5rem);
    max-width : 340px;
    height    : 460px;
    max-height: calc(100vh - 7rem);
  }

  /* Áreas táctiles más generosas */
  .trovi-input {
    font-size: 1rem;  /* evita zoom automático en iOS */
  }

  /* Panel a pantalla completa cuando está abierto */
  #trovi-chatbot.is-open .trovi-panel {
    position     : fixed;
    inset        : 0;
    width        : 100%;
    max-width    : 100%;
    height       : 100%;
    max-height   : 100%;
    border-radius: 0;
  }
}