/* ===== GLOBAL ===== */
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont}
html,body{height:100%;width:100%;overflow:hidden;color:#fff;scroll-behavior:smooth;}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(270deg,#0b0b0d,#111827,#0b0b0d);
  background-size:600% 600%;
  animation:bgGradient 20s ease infinite;
}
@keyframes bgGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ===== LOADER ===== */
#loader{
  position:fixed;inset:0;background:#000;display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity 1s ease;
}
#loader .logo{
  width:250px;height:auto;
  animation: pulse 1.6s ease-in-out infinite alternate, glow 2s ease-in-out infinite alternate;
}
@keyframes pulse{
  0%,100%{transform: scale(0.9);opacity:0.7;}
  50%{transform: scale(1.05);opacity:1;}
}
@keyframes glow{
  0%,100%{filter:drop-shadow(0 0 10px #3b82f6);}
  50%{filter:drop-shadow(0 0 30px #0ff);}
}

/* ===== THINKING DOTS ===== */
.thinking::after{
  content:"";
  display:inline-block;
  animation:ellipsis 2s steps(4) infinite,fadeIn 2s ease-in-out infinite;
}
@keyframes ellipsis{
  0%{content:""}
  25%{content:"."}
  50%{content:".."}
  75%{content:"..."}
  100%{content:""}
}
@keyframes fadeIn{0%,100%{opacity:.3}50%{opacity:1}}

/* ===== CHAT UI ===== */
.app{height:100dvh;width:100%;display:flex;flex-direction:column}
.header{
  height:58px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;
  background:rgba(15,15,19,.8);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #1f2937;
  position:relative;
}

/* ===== DISCORD BUTTON ===== */
.discord-btn{
  position:absolute;right:16px;
  top:50%;transform:translateY(-50%);
  background:linear-gradient(135deg,#5865f2,#7289da);
  color:#fff;font-weight:700;
  padding:6px 14px;border-radius:14px;
  cursor:pointer;text-decoration:none;
  font-size:13px;transition:all 0.2s ease;
}
.discord-btn:hover{filter:brightness(1.1);transform:translateY(-50%) scale(1.05);}

/* ===== CHAT AREA ===== */
.chat-wrapper{flex:1;overflow:hidden;display:flex}
.chat{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px}
.msg{
  max-width:80%;padding:14px 16px;border-radius:16px;
  line-height:1.5;white-space:pre-wrap;word-break:break-word;
  animation:pop .18s ease-out;
  position:relative;
}
.user{align-self:flex-end;background:linear-gradient(135deg,#2563eb,#1e40af);transition:all 0.2s ease;}
.bot{align-self:flex-start;background:linear-gradient(180deg,#15151c,#111118);border:1px solid #23232b;transition:all 0.2s ease;}
.user:hover,.bot:hover{filter:drop-shadow(0 0 6px rgba(59,130,246,0.6));transform:translateY(-1px);}
.msg .time{font-size:11px;opacity:.5;margin-top:6px;}
.bot .time{text-align:left;}
.user .time{text-align:right;}

/* ===== CODE BOX ===== */
.codebox{background:#0f172a;border:1px solid #1f2937;border-radius:12px;margin-top:10px;overflow:hidden}
.code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;background:#020617;border-bottom:1px solid #1f2937;color:#93c5fd}
.code-header button{background:none;border:none;color:#93c5fd;cursor:pointer;font-size:12px}
pre{margin:0;padding:12px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;line-height:1.4;color:#e5e7eb}

/* ===== INPUT BAR ===== */
.input-bar{flex-shrink:0;padding:14px;background:rgba(15,15,19,.85);backdrop-filter:blur(12px);border-top:1px solid #1f2937;display:flex;gap:12px}
.input-bar input{flex:1;padding:14px 16px;font-size:16px;border-radius:14px;border:1px solid #1f2937;outline:none;background:#0f172a;color:#fff}
.input-bar button{padding:0 20px;font-size:15px;font-weight:700;border-radius:14px;border:none;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;transition:all .3s ease;position:relative;overflow:hidden;animation:smoothPulse 3s ease-in-out infinite alternate;}
.input-bar button:hover{transform:scale(1.03);box-shadow:0 0 8px #3b82f6,0 0 16px #2563eb;}
.input-bar select{background:#0f172a;border:1px solid #1f2937;color:#fff;border-radius:12px;padding:10px 12px;font-size:14px;cursor:pointer}
.input-bar select:hover{border-color:#3b82f6}

/* ===== ANIMATIONS ===== */
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fade-out{animation:fadeOut .2s ease-in forwards}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes smoothPulse{0%{transform:scale(1);opacity:.95}50%{transform:scale(1.02);opacity:1}100%{transform:scale(1);opacity:.95}}