/* 4DGE Connect v1.5 compatibility layer.
   Loaded AFTER WaDesk v1.5 CSS. Keep only production-proven overrides here. */
#ti-frame.ti-frame {
  grid-template-columns: 64px 290px minmax(0, 1fr) 320px;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
#ti-frame.ti-frame.no-contact {
  grid-template-columns: 64px 290px minmax(0, 1fr) 0;
}
#ti-frame.ti-frame.nav-collapsed {
  grid-template-columns: 64px 290px minmax(0, 1fr) 320px;
}
#ti-frame.ti-frame.nav-collapsed.no-contact {
  grid-template-columns: 64px 290px minmax(0, 1fr) 0;
}
#ti-frame > .ti-col { min-width: 0; }
#thread { min-width:0; max-width:100%; overflow-x:hidden; }
#thread > * { max-width:100%; }
#composer-wrap, #composer-textarea-wrap { min-width:0; max-width:100%; overflow-x:hidden; }
#composer-wrap [data-compose] { min-width:0; max-width:100%; }
#composer-actions { min-width:0; max-width:100%; flex-wrap:wrap; }
#composer-actions > * { flex-shrink:0; }

/* v1.5.22 — Team Inbox responsive specificity fix.
   The desktop #ti-frame rules above intentionally outrank WaDesk's vendor CSS.
   At tablet/mobile widths they must yield to the responsive 2-column / 1-column
   layouts already implemented by WaDesk and its Team Inbox JS. */
@media (max-width: 1023.98px) {
  #ti-frame.ti-frame,
  #ti-frame.ti-frame.no-contact,
  #ti-frame.ti-frame.nav-collapsed,
  #ti-frame.ti-frame.nav-collapsed.no-contact {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  #ti-frame.ti-frame,
  #ti-frame.ti-frame.no-contact,
  #ti-frame.ti-frame.nav-collapsed,
  #ti-frame.ti-frame.nav-collapsed.no-contact,
  #ti-frame.ti-frame.mobile-thread-open,
  #ti-frame.ti-frame.mobile-thread-open.no-contact {
    grid-template-columns: minmax(0, 1fr);
  }
}