/* =========================
   COROS Assistant UI – FINAL
   Paleta oficial + 100% responsivo
   ========================= */

:root{
  /* 🎨 Paleta COROS */
  --coros-red: #E62E3B;
  --coros-dark: #0F181D;
  --coros-white: #FFFFFF;

  --coros-blue: #09335A;
  --coros-gray: #42464D;
  --coros-light: #EBEBEB;

  --radius-lg: 18px;
  --radius-md: 14px;
}

/* CONTENEDOR GENERAL */
.coros-assistant{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px 12px;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--coros-dark);
}

/* VENTANA DE CHAT */
.coros-assistant .chat-window{
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--coros-light);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--coros-white);
  box-sizing: border-box;

  /* 🔥 SIN SCROLL FORZADO */
  overflow: visible;
}

/* MENSAJES */
.chat-message{
  display: flex;
  gap: 10px;
  margin: 12px 0;
  align-items: flex-end;
}

.chat-message.bot{ justify-content: flex-start; }
.chat-message.user{ justify-content: flex-end; }
.chat-message.user-input{ justify-content: flex-start; }

/* AVATAR */
.avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--coros-light);
  background: var(--coros-white);
}

/* BURBUJA BASE */
.bubble{
  padding: 14px 16px;
  border-radius: var(--radius-md);
  max-width: 100%;
  line-height: 1.4;
  font-size: 14px;
  background: var(--coros-light);
  color: var(--coros-dark);
  border: 1px solid var(--coros-light);

  /* 🔑 FIX OVERFLOW */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* USUARIO */
.chat-message.user .bubble{
  background: var(--coros-dark);
  color: var(--coros-white);
}

/* INPUT CONTAINER */
.input-bubble{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* INPUT */
.user-input input{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--coros-light);
  font-family: Helvetica;
  font-size: 14px;
  box-sizing: border-box;
}

.user-input input::placeholder{
  color: var(--coros-gray);
}

/* BOTÓN */
.user-input button{
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  background: var(--coros-dark);
  color: var(--coros-white);
  font-weight: bold;
  font-family: Helvetica;
}

/* =========================
   MENÚ DE OPCIONES (FIX TOTAL)
   ========================= */
.order-menu{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.order-menu button{
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  background: var(--coros-red);
  color: var(--coros-white);
  font-weight: bold;
  font-family: Helvetica;
  text-align: center;

  /* ❌ SIN SOMBRAS / SIN VERDE */
  box-shadow: none;
}

.order-menu button:hover,
.order-menu button:active,
.order-menu button:focus{
  background: var(--coros-red);
  outline: none;
}

/* =========================
   LINKS (TRACKING)
   ========================= */
.bubble a{
  color: var(--coros-blue);
  font-weight: bold;
  text-decoration: underline;

  /* 🔑 URL NUNCA SE SALE */
  word-break: break-all;
}

.chat-message.user .bubble a{
  color: #9ec5ff;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 520px){
  .order-menu{
    grid-template-columns: 1fr;
  }

  .bubble{
    font-size: 14px;
  }

  .avatar{
    width: 32px;
    height: 32px;
  }
}