*{
  box-sizing:border-box;
}

body{
  animation:
    backgroundMove 18s ease infinite;

  margin:0;
  padding:0;

  background:

    radial-gradient(
        circle at top left,
        rgba(59,130,246,0.18),
        transparent 28%
    ),

    radial-gradient(
        circle at top right,
        rgba(168,85,247,0.22),
        transparent 30%
    ),

    radial-gradient(
        circle at bottom center,
        rgba(236,72,153,0.18),
        transparent 35%
    ),

    linear-gradient(
        180deg,
        #0f172a 0%,
        #111827 100%
    );

    background-attachment:fixed;

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

  color:#f3f4f6;
}

.app{

  width:100%;

  height:100vh;

  display:flex;
  flex-direction:column;
}

.header{

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

  padding:4px 18px;

  background:

    linear-gradient(
        90deg,
        rgba(15,23,42,0.78),
        rgba(30,41,59,0.72),
        rgba(88,28,135,0.32)
    );

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  box-shadow:

    0 8px 32px rgba(0,0,0,0.35),

    inset 0 1px 0 rgba(255,255,255,0.08);

  z-index:10;

  position:sticky;

  top:0;

  display:flex;

  align-items:center;

  justify-content:space-between;
}

.header-left{

  display:flex;

  align-items:center;

  gap:12px;
}

.powered-by{

  display:flex;

  align-items:center;

  gap:10px;

  opacity:1;
}

.powered-by span{

  font-size:12px;

  letter-spacing:.8px;

  color:rgba(255,255,255,0.62);

  text-transform:uppercase;
}

.powered-by img{

  height:42px;

  width:auto;

  object-fit:contain;

  filter:
  	brightness(5)
  	contrast(2)
  	drop-shadow(0 0 12px rgba(110,255,210,0.55));
}

.logo{

  width:120px;

  height:120px;

  display:flex;

  align-items:center;

  justify-content:center;

  overflow:visible;

  margin-right:6px;
}

.logo img{

  width:140px;
  height:auto;

  object-fit:contain;

  filter:
    drop-shadow(0 0 18px rgba(103,232,249,0.55));

  animation:
    logoFloat 4s ease-in-out infinite;
}

.header h1{

  margin:0;

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

.header p{

  margin:4px 0 0 0;

  color:rgba(255,255,255,0.65);

  font-size:14px;

  font-weight:500;

  letter-spacing: .3px;
}

.chat-box{

  flex:1;

  overflow-y:auto;

  width:100%;

  padding:

    clamp(12px, 2vw, 28px)

    clamp(12px, 3vw, 40px);

  scroll-behavior:smooth;
}

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

.msg{

  display:flex;

  margin-bottom:22px;

  animation:fadeIn .25s ease;
}

.msg.user{

  justify-content:flex-end;
}

.bubble{

  transition:
    transform .22s ease,
    box-shadow .22s ease;

  max-width:78%;

  padding:16px 18px;

  border-radius:22px;

  line-height:1.65;

  font-size:15px;

  word-break:break-word;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.18);
}

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

.user .bubble{

  background:

    linear-gradient(
      135deg,
      rgba(59,130,246,0.28),
      rgba(168,85,247,0.16),
      rgba(236,72,153,0.14)
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    rgba(255,255,255,0.95);

  border-bottom-right-radius:10px;

  box-shadow:

    0 4px 16px rgba(139,92,246,0.10),

    inset 0 1px 0 rgba(255,255,255,0.05);
}

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

.bot .bubble{

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

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    rgba(255,255,255,0.92);

  border-bottom-left-radius:8px;

  box-shadow:

    0 8px 30px rgba(0,0,0,0.22),

    inset 0 1px 0 rgba(255,255,255,0.05);
}

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

.input-area{

  display:flex;

  gap:12px;

  padding:20px;

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

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  border-top:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 -8px 30px rgba(0,0,0,0.25);
}

input{

  flex:1;

  padding:18px 20px;

  border-radius:22px;

  min-height:60px;

  font-weight:500;

  border:
    1px solid rgba(255,255,255,0.08);

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

  color:white;

  font-size:15px;

  letter-spacing:.2px;

  outline:none;

  transition:.25s;

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,0.05),

    0 4px 20px rgba(0,0,0,0.2);
}

input::placeholder{

  color:
    rgba(255,255,255,0.45);
}

input:focus{

  border-color:
    rgba(139,92,246,0.55);

  box-shadow:

    0 0 0 3px rgba(59,130,246,0.10),

    0 0 30px rgba(168,85,247,0.18),

    0 0 60px rgba(59,130,246,0.10);
}

button{

  position:relative;

  overflow:hidden;

  border:none;

  background:

    linear-gradient(
      135deg,
      #3b82f6,
      #8b5cf6,
      #ec4899
    );

  background-size:
    200% 200%;

  color:white;

  padding:0 28px;

  border-radius:18px;

  cursor:pointer;

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

  transition:.25s;

  box-shadow:

    0 10px 30px rgba(139,92,246,0.35);

  animation:
    gradientMove 6s ease infinite;
}

button:hover{

  transform:translateY(-1px);

  opacity:.95;
}

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

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

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

  color:
    rgba(255,255,255,0.96);
}

.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:
    rgba(255,255,255,0.96);
}

.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:separate;

  border-spacing:0;

  margin-top:20px;

  overflow:hidden;

  border-radius:18px;

  font-size:14px;

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

  backdrop-filter:
    blur(18px);

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

  box-shadow:
    0 10px 30px rgba(0,0,0,0.18);
}

.bot .bubble table th{

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

  backdrop-filter:
    blur(18px);

  color:
    rgba(255,255,255,0.96);

  padding:16px;

  text-align:left;

  border-bottom:
    1px solid rgba(255,255,255,0.08);
}

.bot .bubble table thead{

  background:

    linear-gradient(
      135deg,
      rgba(59,130,246,0.35),
      rgba(168,85,247,0.28),
      rgba(236,72,153,0.22)
    );
}

.bot .bubble table td{

  padding:16px;

  color:
    rgba(255,255,255,0.88);

  border-bottom:
    1px solid rgba(255,255,255,0.08);
}

.bot .bubble blockquote{

  margin:14px 0;

  padding:12px 16px;

  border-left:
    4px solid rgba(59,130,246,0.8);

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

  color:
    rgba(255,255,255,0.88);

  border-radius:12px;
}

/* ===================================== */
/* 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:

  linear-gradient(
    180deg,
    rgba(59,130,246,0.7),
    rgba(168,85,247,0.7)
  );

  border-radius:20px;
}

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

@keyframes fadeIn{

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

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

@keyframes logoFloat{

  0%{
    transform:translateY(0px) scale(1);
  }

  50%{
    transform:translateY(-4px) scale(1.02);
  }

  100%{
    transform:translateY(0px) scale(1);
  }
}

/* ===================================== */
/* 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);
  }
}

@keyframes gradientMove{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}

.bot .bubble a{

  color:
    rgba(255,255,255,0.92);

  text-decoration:none;

  font-weight:600;

  border-bottom:
    1px solid rgba(255,255,255,0.18);

  transition:.2s;
}

.bot .bubble a:hover{

  color:white;

  border-bottom:
    1px solid rgba(255,255,255,0.5);
}

button::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.25),
      transparent
    );

  transform:
    translateX(-120%);

  transition:1s;
}

button:hover::before{

  transform:
    translateX(120%);
}

.bubble:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 14px 34px rgba(0,0,0,0.28);
}

@keyframes backgroundMove{

  0%{

    background-position:
      0% 0%;
  }

  50%{

    background-position:
      100% 50%;
  }

  100%{

    background-position:
      0% 0%;
  }
}