:root{
  --bg:#e9f5e9;
  --accent:#25D366;
  --user:#dcf8c6;
  --bot:#ffffff;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:system-ui;
  height:100vh;
  display:flex;
  overflow:hidden;
  background:var(--bg);
}

/* EMOJI WALL */
.emoji-bg{
  position:fixed;
  inset:0;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-auto-rows:70px;
  opacity:0.12;
  pointer-events:none;
}

.emoji-bg span{
  font-size:42px;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* SIDEBAR */
#sidebar{
  width:260px;
  background:white;
  border-right:1px solid #ddd;
  padding:10px;
}

.logo{
  font-size:26px;
  text-align:center;
}

/* MAIN */
#main{
  flex:1;
  display:flex;
  flex-direction:column;
}

/* TAB */
.tab{display:none;flex:1;flex-direction:column;}
.tab.active{display:flex;}

/* CHAT */
#chat{
  flex:1;
  padding:10px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.msg{
  padding:10px;
  border-radius:10px;
  max-width:70%;
}

.user{
  background:var(--user);
  align-self:flex-end;
}

.bot{
  background:var(--bot);
  align-self:flex-start;
}

/* INPUT */
#inputBar{
  display:flex;
  padding:10px;
  gap:10px;
}

textarea{
  flex:1;
  resize:none;
}

button{
  background:var(--accent);
  color:white;
  border:none;
  padding:10px;
}

#statusBar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding:6px;
  font-size:12px;
  background:#222;
  color:white;
  text-align:center;
  z-index:9999;
}

.tab{display:none;}
.tab.active{display:flex;}