*{
  box-sizing:border-box;
}

body{

  margin:0;
  padding:0;

  background:
    linear-gradient(
      180deg,
      #f4f7fb 0%,
      #eef2f7 100%
    );

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  color:#1f2937;
}

.app{

  width:100%;
  max-width:1200px;

  margin:auto;

  height:100vh;

  display:flex;
  flex-direction:column;
}

.header{

  display:flex;
  align-items:center;
  gap:16px;

  padding:22px 26px;

  background:
    rgba(255,255,255,0.82);

  backdrop-filter:blur(12px);

  border-bottom:
    1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 2px 10px rgba(0,0,0,0.04);

  z-index:10;
}

.logo{

  width:58px;
  height:58px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  display:flex;
  align-items:center;
  justify-content:center;

  color:white;

  font-size:26px;

  box-shadow:
    0 8px 18px rgba(37,99,235,0.25);
}

.header h1{

  margin:0;

  font-size:24px;
  font-weight:700;
}

.header p{

  margin:4px 0 0 0;

  color:#6b7280;

  font-size:14px;
}

.chat-box{

  flex:1;

  overflow-y:auto;

  padding:28px;

  scroll-behavior:smooth;
}

/* ===================================== */
/* MENSAJES */
/* ===================================== */

.msg{

  display:flex;

  margin-bottom:22px;

  animation:fadeIn .25s ease;
}

.msg.user{

  justify-content:flex-end;
}

.bubble{

  max-width:78%;

  padding:16px 18px;

  border-radius:22px;

  line-height:1.65;

  font-size:15px;

  word-break:break-word;

  box-shadow:
    0 4px 14px rgba(0,0,0,0.05);
}

/* ===================================== */
/* USER */
/* ===================================== */

.user .bubble{

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  color:white;

  border-bottom-right-radius:8px;
}

/* ===================================== */
/* BOT */
/* ===================================== */

.bot .bubble{

  background:white;

  border:
    1px solid rgba(0,0,0,0.06);

  border-bottom-left-radius:8px;
}

/* ===================================== */
/* INPUT */
/* ===================================== */

.input-area{

  display:flex;

  gap:12px;

  padding:20px;

  background:
    rgba(255,255,255,0.82);

  backdrop-filter:blur(12px);

  border-top:
    1px solid rgba(0,0,0,0.06);
}

input{

  flex:1;

  padding:16px 18px;

  border-radius:16px;

  border:
    1px solid #d1d5db;

  font-size:15px;

  outline:none;

  transition:.2s;
}

input:focus{

  border-color:#2563eb;

  box-shadow:
    0 0 0 4px rgba(37,99,235,0.12);
}

button{

  border:none;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #1d4ed8
    );

  color:white;

  padding:0 24px;

  border-radius:16px;

  cursor:pointer;

  font-size:15px;
  font-weight:600;

  transition:.2s;

  box-shadow:
    0 8px 18px rgba(37,99,235,0.22);
}

button:hover{

  transform:translateY(-1px);

  opacity:.95;
}

/* ===================================== */
/* MARKDOWN */
/* ===================================== */

.bot .bubble h1,
.bot .bubble h2,
.bot .bubble h3{

  margin-top:18px;
  margin-bottom:12px;

  color:#111827;
}

.bot .bubble p{

  margin:10px 0;
}

.bot .bubble ul,
.bot .bubble ol{

  padding-left:22px;
}

.bot .bubble li{

  margin-bottom:8px;
}

.bot .bubble strong{

  color:#111827;
}

.bot .bubble code{

  background:#eef2ff;

  padding:2px 6px;

  border-radius:6px;

  font-size:13px;

  color:#1d4ed8;
}

.bot .bubble pre{

  background:#111827;

  color:#f9fafb;

  padding:16px;

  border-radius:14px;

  overflow:auto;

  font-size:13px;
}

.bot .bubble table{

  width:100%;

  border-collapse:collapse;

  margin-top:16px;

  overflow:hidden;

  border-radius:12px;

  font-size:14px;
}

.bot .bubble table th{

  background:#2563eb;

  color:white;

  padding:12px;

  text-align:left;
}

.bot .bubble table td{

  padding:12px;

  border-bottom:
    1px solid #e5e7eb;
}

.bot .bubble blockquote{

  margin:14px 0;

  padding:12px 16px;

  border-left:
    4px solid #2563eb;

  background:#eff6ff;

  border-radius:8px;
}

/* ===================================== */
/* TYPING */
/* ===================================== */

.typing{

  display:flex;
  gap:6px;
  align-items:center;
}

.typing span{

  width:8px;
  height:8px;

  border-radius:50%;

  background:#6b7280;

  animation:bounce 1.2s infinite;
}

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

.typing span:nth-child(3){
  animation-delay:.4s;
}

@keyframes bounce{

  0%,80%,100%{
    transform:scale(.7);
    opacity:.5;
  }

  40%{
    transform:scale(1);
    opacity:1;
  }
}

/* ===================================== */
/* SCROLL */
/* ===================================== */

.chat-box::-webkit-scrollbar{

  width:10px;
}

.chat-box::-webkit-scrollbar-thumb{

  background:#cbd5e1;

  border-radius:20px;
}

/* ===================================== */
/* ANIMACIONES */
/* ===================================== */

@keyframes fadeIn{

  from{
    opacity:0;
    transform:translateY(8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:768px){

  .chat-box{

    padding:16px;
  }

  .bubble{

    max-width:92%;
  }

  .header{

    padding:16px;
  }

  .header h1{

    font-size:20px;
  }

  input{

    font-size:14px;
  }

  button{

    padding:0 18px;
  }
}

/* =========================================
   TYPING LOADER
========================================= */

.typing{

  display:flex;
  align-items:center;
  gap:6px;

  padding:4px 2px;
}

.typing span{

  width:8px;
  height:8px;

  border-radius:50%;

  background:#6b7280;

  animation:typingBounce 1.3s infinite;
}

.typing span:nth-child(2){
  animation-delay:0.15s;
}

.typing span:nth-child(3){
  animation-delay:0.3s;
}

@keyframes typingBounce{

  0%, 80%, 100%{

    transform:scale(0.7);
    opacity:0.5;
  }

  40%{

    transform:scale(1);
    opacity:1;
  }
}

/* =========================================
   FADE IN MENSAJES
========================================= */

.msg{

  animation:fadeIn .25s ease;
}

@keyframes fadeIn{

  from{

    opacity:0;
    transform:translateY(8px);
  }

  to{

    opacity:1;
    transform:translateY(0);
  }
}