/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body{
  background:#0e0e0e;
  color:#ffffff;
  height:100vh;
  overflow:hidden;
}

/* ================= TOP HEADER ================= */
.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  background:#121212;
  border-bottom:1px solid #1f1f1f;
}

.topbar .left,
.topbar .right{
  display:flex;
  gap:10px;
}

.icon-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

/* ================= CHAT AREA ================= */
.chat-area{
  padding:14px;
  height:calc(100vh - 200px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* USER MESSAGE */
.user{
  align-self:flex-end;
  background:#1e88ff;
  color:#fff;
  padding:10px 14px;
  border-radius:18px 18px 4px 18px;
  max-width:75%;
  word-wrap:break-word;
}

/* ASSISTANT MESSAGE */
.bot{
  align-self:flex-start;
  background:#1f1f1f;
  padding:10px 14px;
  border-radius:18px 18px 18px 4px;
  max-width:75%;
  word-wrap:break-word;
  background:linear-gradient(90deg,#ffffff,#bfbfbf,#ffffff);
  background-size:200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:typingGradient 2.5s linear infinite;
}

@keyframes typingGradient{
  0%{background-position:0%}
  100%{background-position:200%}
}

/* ================= THINKING DOTS ================= */
.thinking{
  display:none;
  padding-left:14px;
}

.thinking span{
  width:8px;
  height:8px;
  margin-right:4px;
  border-radius:50%;
  display:inline-block;
  background:linear-gradient(90deg,#fff,#777);
  animation:pulse 1.4s infinite ease-in-out;
}

.thinking span:nth-child(2){animation-delay:.2s}
.thinking span:nth-child(3){animation-delay:.4s}

@keyframes pulse{
  0%{opacity:.3}
  50%{opacity:1}
  100%{opacity:.3}
}

/* ================= BOTTOM BAR ================= */
.bottom-bar{
  position:fixed;
  bottom:0;
  width:100%;
  background:#121212;
  padding:10px;
  border-top:1px solid #1f1f1f;
}

/* INPUT */
.input-box textarea{
  width:100%;
  min-height:44px;
  max-height:120px;
  padding:12px 16px;
  border-radius:26px;
  background:#1f1f1f;
  border:none;
  outline:none;
  color:#fff;
  resize:none;
  font-size:15px;
}

/* UNDER INPUT */
.under-left,
.under-right{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}

.under-left{
  gap:10px;
}

.under-right{
  gap:10px;
}

/* SEND BUTTON */
.send-btn{
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:#1e88ff;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transform:scale(0);
  transition:transform .25s ease;
}

/* ASSISTANT BUTTON */
.assist-btn{
  padding:10px 16px;
  border-radius:22px;
  border:none;
  background:#2a2a2a;
  color:#fff;
  cursor:pointer;
}

/* ================= BRAND ROW ================= */
.brand-row{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.brand{
  padding:6px 14px;
  border-radius:20px;
  background:#1f1f1f;
  border:none;
  color:#fff;
  font-size:13px;
  cursor:pointer;
}

/* ================= ASSISTANT SCREEN ================= */
.dots{
  width:120px;
  height:120px;
  margin:40px auto;
  border-radius:50%;
  background:conic-gradient(
    #ff004c,
    #ff9f0a,
    #ffd60a,
    #32d74b,
    #0a84ff,
    #5e5ce6,
    #ff004c
  );
  animation:spin 2.2s linear infinite;
}

@keyframes spin{
  100%{transform:rotate(360deg)}
}

.bottom{
  position:fixed;
  bottom:20px;
  width:100%;
  display:flex;
  justify-content:center;
  gap:20px;
}

.bottom button{
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  font-size:18px;
  cursor:pointer;
}

/* ================= ROOTEL SCREEN ================= */
.rootel-title{
  text-align:center;
  font-size:36px;
  font-weight:bold;
  background:linear-gradient(90deg,#ff004c,#ff9f0a,#32d74b,#0a84ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin:30px 0 20px;
}

.rootel-input{
  width:90%;
  margin:0 auto;
}

.rootel-input input{
  width:100%;
  padding:14px 18px;
  border-radius:28px;
  border:none;
  outline:none;
  background:#1f1f1f;
  color:#fff;
}