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

/* RESET */
*{
  box-sizing:border-box;
}

html, body{
  height:100%;
  margin:0;
  overflow:hidden;
  font-family:system-ui;
  background:var(--bg);
}

/* APP ROOT */
#app{
  display:flex;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* SIDEBAR (FIXED WIDTH) */
#sidebar{
  width:260px;
  background:#fff;
  border-right:1px solid #ddd;
  padding:10px;
  flex-shrink:0;
}

/* MAIN SAFE AREA */
#main{
  flex:1;
  display:flex;
  overflow:hidden;
}

/* VIEWS */
.view{
  display:none;
  flex:1;
  flex-direction:column;
  min-height:0;
}

.view.active{
  display:flex;
}

/* CHAT HEADER */
#chatHeader{
  padding:10px;
  border-bottom:1px solid #ddd;
  background:#fff;
}

/* CHAT SCROLL SAFE CONTAINER */
#chatScroll{
  flex:1;
  overflow:hidden;
  display:flex;
}

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

/* MESSAGE */
.msg{
  padding:10px 12px;
  border-radius:12px;
  max-width:75%;
  white-space:pre-wrap;
}

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

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

/* INPUT ALWAYS FIXED (NO BREAK POSSIBLE) */
#inputShell{
  display:flex;
  gap:10px;
  padding:10px;
  border-top:1px solid #ddd;
  background:#fff;

  flex-shrink:0;
}

textarea{
  flex:1;
  resize:none;
  padding:10px;
  border-radius:10px;
  border:1px solid #ddd;
  outline:none;
}

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

/* STATUS BAR */
#statusBar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  background:#222;
  color:white;
  font-size:12px;
  padding:5px;
}