.pa { container-type:inline-size; min-height:100vh; display:flex; flex-direction:column; }
.pa.scr-conversas { height:100vh; min-height:0; }
.chat { flex:1; display:grid; grid-template-columns:320px minmax(0,1fr) 352px; min-height:0; }
/* ---- entrada do cliente no portal (modo-portal.js); o desktop nunca mostra */
body.is-login .chat { display:none; }
.pa:not(.show-panel) .chat { grid-template-columns:320px minmax(0,1fr) 0; }
.pa:not(.show-panel) .panel { display:none; }
.conv { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg); }
.conv > * { grid-column:1; min-width:0; }
.pa .conv { position:relative; animation:none; }
.conv > .conv-top { grid-row:1; }
.conv > .composer-wrap { grid-row:5; }
.pa .conv > .uso-banner { grid-row:2; }
.pa .conv > .banner { grid-row:3; }
body.pa { height:100dvh; overflow:hidden; }
.screens { flex:1; min-width:0; overflow:auto; background:var(--bg); }
.screen { max-width:960px; margin:0 auto; padding:24px 24px 48px; }
/* collapsing the sidebar (side-closed + island) is a wide-screen feature; below 1100px the rail and its drawer take over */
@container (min-width: 1100px) {
  .pa.side-closed:not(.show-panel) .chat { grid-template-columns:minmax(0,1fr) 0; }
  .pa.side-closed .contacts { display:none; }
  /* the island owns the top-left corner: page headers start below it */
  .pa.side-closed .screen { padding-top:72px; }
}
@container (min-width: 720px) {
  .pa.scr-uso .screens { grid-column:2 / -1; }
}
@container (max-width: 1099px) {
  .chat { grid-template-columns:300px minmax(0,1fr); position:relative; }
}
@container (min-width: 720px) and (max-width: 1099px) {
  .chat { grid-template-columns:76px minmax(0,1fr); }
}
@container (max-width: 1099px) {
  .pa:not(.show-panel) .chat { grid-template-columns:300px minmax(0,1fr); }
}
@container (min-width: 720px) and (max-width: 1099px) {
  .pa:not(.show-panel) .chat { grid-template-columns:76px minmax(0,1fr); }
}
@container (min-width: 1100px) {
  .pa.side-closed .chat { grid-template-columns:minmax(0,1fr) 352px; }
}
@container (min-width: 720px) and (max-width: 1099px) {
  /* the drawer leaves the grid (position:fixed): the conversation keeps its column, the rail column stays 76px */
  .pa.side-over .conv { grid-column:2; }
}
@container (max-width: 1099px) {
  .pa .panel { display:none; }
  .pa.m-painel .panel { display:flex; position:absolute; right:0; top:0; bottom:0; width:min(360px,100%); z-index:5; box-shadow:var(--shadow-md); }
}
@container (max-width: 719px) {
  .chat { grid-template-columns:minmax(0,1fr); }
  .pa:not(.show-panel) .chat { grid-template-columns:minmax(0,1fr); }
  .pa .panel { display:none; }
  .pa.m-painel .panel { display:flex; position:static; width:auto; box-shadow:none; padding-top:16px; }
}
.pa:not(.scr-conversas) .panel { display:none; }
.pa:not(.scr-conversas) .conv { display:none; }
.pa.scr-conversas .conv { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr) auto; }
@container (max-width: 719px) {
  .pa.scr-conversas.m-painel .conv { display:none; }
  /* phone: the sidebar is only the drawer (body.side-over, see contacts.css) */
  .pa .contacts { display:none; }
  .pa.scr-conversas.side-over .contacts { display:flex; }
  .pa.scr-uso .contacts { display:none; }
  .pa:not(.scr-conversas) .contacts { display:none; }
  .screen { padding:18px 16px 32px; }
}
.screen { padding-left:max(24px, var(--page-gutter)); padding-right:max(24px, var(--page-gutter)); }
@container (max-width: 719px) {
  .screen { padding-left:16px; padding-right:16px; }
  .screen:has(.uso-page) { padding:16px 16px 40px; }
}