/* Composer owns layout. Chat, panels and decorative layers must not override it. */
.composer-zone{
  --conversation-trigger-width:90px;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:6;
  padding:26px 14px max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(to top,#EEECE6 62%,rgba(238,236,230,.94) 78%,transparent);
}
body.night-background .composer-zone{
  background:linear-gradient(to top,#080f21 62%,rgba(8,15,33,.94) 78%,transparent);
}
body.space-background .composer-zone{
  background:linear-gradient(to top,#101720 62%,rgba(16,23,32,.94) 78%,transparent);
}
.composer{
  width:min(854px,calc(100% - 16px));
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  gap:10px;
  background:#fff;
  border:1px solid #c8cbc5;
  border-radius:26px;
  padding:9px 9px 9px 16px;
  box-shadow:0 8px 30px rgba(0,0,0,.24);
}
.composer-zone.drag-files .composer{border-color:#245b70;box-shadow:0 0 0 3px #245b70,0 8px 30px rgba(0,0,0,.24)}
.composer textarea{
  flex:1;
  min-width:0;
  min-height:40px;
  max-height:180px;
  resize:none;
  border:0;
  outline:0;
  padding:9px 2px;
  background:transparent;
  color:#202624;
  line-height:1.45;
  overflow-y:auto;
}
.composer textarea::placeholder{color:#737b77}
.send{
  flex:0 0 auto;
  width:72px;
  min-width:58px;
  height:44px;
  border-radius:18px;
  border:0;
  background:#202624;
  color:#fff;
  font-weight:700;
  padding:0 16px;
}

#sessionSyncStatus:empty{display:none}

.composer-zone{display:flex;flex-direction:column;align-items:center;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.composer{position:relative}

@media(max-width:700px){
  .composer-zone{padding-left:8px;padding-right:8px}
  .composer{width:100%;border-radius:24px}
  .send{min-width:54px;padding:0 14px}
}