body{margin:0;font-family:sans-serif;background:var(--bg);color:var(--fg)}
:root{--bg:#fff;--fg:#000}
.dark{--bg:#111;--fg:#eee}
#chat{padding:10px;height:80vh;overflow:auto}
.msg{margin:8px;padding:10px;border-radius:12px;max-width:80%}
.user{background:#4f8cff;color:#fff;margin-left:auto}
.ai{background:#ddd;color:#000}
/*#inputbar{position:fixed;bottom:0;width:100%;display:flex;background:#222}*/

#msg{flex:1;padding:10px;border:none}
button{padding:10px}
#inputbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px;
  background: #fff;

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  box-sizing: border-box;
}

#msg {
  flex: 1 1 100%;
  min-width: 0;
  padding: 10px;
  font-size: 16px;
  box-sizing: border-box;
}

#file {
  flex: 1 1 auto;
  min-width: 0;
}

#inputbar button {
  flex: 0 0 auto;
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
}

/* Portrait mobile tightening */
@media (max-width: 600px) {

  #msg {
    flex: 1 1 100%;
  }

  #file {
    flex: 1 1 60%;
  }

  #inputbar button {
    flex: 1 1 auto;
  }
}