/* Keep the composer inside the viewport; only the two lists may grow/scroll. */
.workspace { height:100dvh; min-height:0; overflow:hidden; }
.main-shell { height:100%; min-height:0; display:flex; flex-direction:column; }
.topbar,.demo-banner,.page-heading,.page-footer { flex:0 0 auto; }
.inbox-grid,.inbox-grid.with-details {
  flex:1 1 0; height:auto; min-height:0;
  grid-template-rows:minmax(0,1fr);
}
.conversation-panel,.customer-list,.details-panel { min-height:0; }
.conversation-panel > :not(.customer-list) { flex-shrink:0; }
.chat-content { min-height:0; overflow:hidden; }
.chat-header,.connection-alert,.message-search,.composer { flex:0 0 auto; }
.messages { flex:1 1 0; min-height:0; overscroll-behavior:contain; }
.composer { position:relative; background:white; padding:10px 18px; }
.composer textarea { display:block; height:56px; min-height:56px; }
.media-toolbar { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:3px; }
.media-toolbar > button { flex:0 0 auto; white-space:nowrap; }
.emoji-panel {
  position:absolute; bottom:100%; left:12px; right:12px;
  z-index:5; background:white; max-height:min(190px,35dvh);
  box-shadow:0 -5px 25px #142c3218;
}
@media(max-height:850px) {
  .topbar { height:52px; }
  .page-heading { padding-top:10px; padding-bottom:10px; }
  .page-heading .eyebrow,.page-heading p { display:none; }
  .page-heading h1 { margin:4px 0; font-size:1.3rem; }
  .page-footer { padding-top:8px; padding-bottom:8px; }
  .chat-header { min-height:64px; padding-top:10px; padding-bottom:10px; }
}
@media(max-width:760px) {
  .composer { padding:8px 10px; }
  .composer textarea { height:50px; min-height:50px; }
  .heading-actions { margin-left:auto; }
  .page-heading { padding-top:10px; padding-bottom:10px; gap:8px; }
  .page-heading .eyebrow { display:none; }
  .page-heading h1 { margin:0; font-size:1.05rem; }
  .page-footer { display:none; }
  .chat-header { min-height:60px; }
}
@media(max-height:560px) {
  .topbar,.page-heading,.page-footer { display:none; }
  .inbox-grid,.inbox-grid.with-details { margin:6px 12px; }
  .demo-banner { min-height:0; padding-top:4px; padding-bottom:4px; }
  .chat-header { min-height:48px; padding-top:6px; padding-bottom:6px; }
  .chat-header > .avatar { width:30px; height:30px; }
  .message-search { padding-top:3px; padding-bottom:3px; }
  .composer textarea { min-height:44px; height:44px; }
}