.fixed-owner-summary { display:flex; gap:5px; align-items:center; flex-wrap:wrap; font-size:13px; color:#586a4f; margin-top:9px; }
.fixed-owner-summary strong { font-weight:550; color:#364f31; }
.ownership-diff { margin-left:5px; font-size:12px; color:#8b5d17; background:#fbf0d5; border-radius:4px; padding:3px 6px; }
.send-recovery { padding:13px 15px; margin-bottom:16px; border:1px solid #dcb197; border-radius:9px; background:#fff5e9; color:#805117; font-size:14px; }
.send-recovery p { font-size:13px; line-height:1.7; }
#send-resolution-form .field { margin-top:15px; }
.send-proof { margin-top:12px; font-size:13px; color:#65583c; line-height:1.7; }
.send-proof summary { cursor:pointer; }
.crm-directory-warning { padding:10px 13px; background:#fff3dc; color:#815b23; font-size:13px; line-height:1.7; border-radius:7px; margin:10px 0; }
.crm-directory-warning:empty { display:none; }
.crm-status-line { font-size:13px; color:#566b49; line-height:1.7; }
.empty[data-icon="shield"] .icon { color:#a14d34; }
.empty[data-icon="shield"] h3 { color:#853d2b; }
.delivery-note { font-size:12px; line-height:1.7; margin-top:8px; color:#755831; white-space:pre-wrap; overflow-wrap:anywhere; }
/* One layout breakpoint, applied last so older desktop grids cannot override it. */
@media(max-width:900px) {
  .shell { display:flex; flex-direction:column; grid-template-columns:none; height:100dvh; width:100%; }
  .main { order:0; flex:1; min-height:0; width:100%; }
  .sidebar { order:1; display:block; height:auto; flex:0 0 auto; width:100%; border:0; border-top:1px solid var(--line); padding:5px 10px calc(5px + env(safe-area-inset-bottom)); }
  .sidebar .brand,.sidebar .workspace,.sidebar .nav-label,.sidebar .sidebar-spacer,.sidebar .connection,.sidebar .profile,.sidebar .demo-switch-sidebar { display:none; }
  .sidebar nav { display:flex; justify-content:space-around; width:100%; }
  .sidebar .nav-item { display:flex; flex-direction:column; justify-content:center; gap:3px; width:auto; min-width:56px; margin:0; padding:5px 10px; font-size:12px; }
  .sidebar .nav-item span:not(.count) { display:block; }
  .sidebar .nav-item .count { display:none; }
  .sidebar .nav-item .icon { width:19px;height:19px; }
  .inbox,.reader-focus .inbox { display:flex; grid-template-columns:none; width:100%; }
  .inbox-list { width:100%; flex:1; min-width:0; border:0; }
  .detail { display:none; width:100%; }
  .show-detail .inbox-list { display:none; }
  .show-detail .detail { display:flex; }
  .show-detail .inbox-page>.heading,.show-detail .inbox-page>.metrics,.show-detail .page-footer { display:none; }
  .show-detail .inbox-page { padding:6px; }
  .mobile-back { display:flex; }
  .reader-toggle,.context-panel { display:none !important; }
  .demo-switch-mobile { display:inline-flex; }
  .breadcrumb { display:none; }
  .topbar { height:46px; padding:0 10px; }
  .top-actions { width:100%; justify-content:space-between; gap:6px; }
  .demo-pill { display:none; }
  .mobile-events { display:block; }
  .detail-meta { flex-wrap:wrap; }
}

.mobile-header-toggle { display:none; }
.case-error-panel { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; padding:24px; gap:18px; }
.case-error-panel .empty { flex:0 0 auto; height:auto; min-height:0; padding:0; }
.case-error-panel .case-error-actions { flex:0 0 auto; margin:0; padding:0; justify-content:center; }
.sla-readonly strong { display:block; margin:10px 0; font-size:20px; }
@media(max-width:900px) {
  .mobile-header-toggle { display:inline-flex; margin-left:auto; white-space:nowrap; }
  .detail-header { max-height:45dvh; overflow:auto; }
  .detail-header.is-compact { padding:8px 12px; }
  .detail-header.is-compact .header-actions,.detail-header.is-compact .fixed-owner-summary,.detail-header.is-compact .detail-meta .small,.detail-header.is-compact .case-owner .btn { display:none; }
  .detail-header.is-compact h2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:15px; line-height:1.4; margin:4px 0 6px; }
  .detail-header.is-compact .detail-meta { gap:6px; font-size:12px; }
  .detail-header.is-compact .case-owner { font-size:12px; }
  .detail-header.is-compact .badge { padding:4px 6px; font-size:12px; }
  .detail-header.is-expanded .detail-eyebrow { flex-wrap:wrap; gap:8px; }
  .detail-header.is-expanded .header-actions { width:100%; justify-content:flex-end; }
  .messages,.reader-focus .messages { padding-top:10px; }
  .crm-case { margin-bottom:10px; }
  .crm-case>summary { padding:7px 10px; }
  .thread-history { margin-bottom:10px; }
  .reading-label { margin-bottom:10px; }
}
.pagination { display:flex; justify-content:center; align-items:center; gap:10px; padding:10px 8px; flex:0 0 auto; border-top:1px solid var(--line); font-size:13px; }
.pagination:empty { display:none; }
.pagination .btn { white-space:nowrap; }
.local-search { display:flex; gap:8px; margin:14px 0; }
.local-search input { min-width:0; flex:1; }
.history-more { width:100%; margin:0 0 12px; }
.metrics-explanation { margin:0; flex:0 0 auto; font-size:12px; line-height:1.6; color:#52624d; }
.show-detail .metrics-explanation { display:none; }
.attachment-limits { color:#52624d; font-size:12px; line-height:1.5; }
.compose-footer>.flex { flex-wrap:wrap; min-width:0; }
.file-chip { font-size:12px; overflow-wrap:anywhere; }
.history-start { margin:4px 0 12px; text-align:center; font-size:12px; color:#52624d; }
/* At large browser zoom, a fixed-height shell can leave zero room for mail.
   Use document scrolling instead of trapping overflow in nested flex panels. */
@media(max-width:900px) and (max-height:600px), (max-width:300px) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  .shell { height:auto; min-height:100dvh; overflow:visible; }
  .main { flex:none; height:auto; min-height:0; overflow:visible; }
  .topbar { height:auto; min-height:46px; flex-wrap:wrap; padding:8px; }
  .top-actions { flex-wrap:wrap; }
  .page,.inbox-page,.reader-focus .inbox-page { height:auto; min-height:0; flex:none; overflow:visible; }
  .inbox,.reader-focus .inbox { flex:none; min-height:0; height:auto; overflow:visible; }
  .inbox-list { flex:none; height:auto; overflow:visible; }
  .mail-list { flex:none; height:auto; max-height:none; overflow:visible; }
  .sidebar { position:static; height:auto; }
  .sidebar nav { flex-wrap:wrap; }
  .pagination { flex-wrap:wrap; }
  .heading { flex-wrap:wrap; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .show-detail .detail,.thread-layout,.thread-main { height:auto; max-height:none; flex:none; overflow:visible; }
  .detail-header { max-height:none; overflow:visible; }
  .composer.is-collapsed { position:static; }
  .screen-scroll { overflow:visible; }
  .tabs { gap:2px; }
  .tab { padding:6px 3px; font-size:12px; }
}

@media(max-width:900px) {
  .shell:not(.show-detail) .page:has(.inbox-list) { overflow-y:auto; }
  .shell:not(.show-detail) .inbox { flex-shrink:0; min-height:300px; }
}
html.large-zoom,html.large-zoom body { height:auto; overflow:auto; }
html.large-zoom .shell { height:auto; min-height:100dvh; overflow:visible; }
html.large-zoom .main,html.large-zoom .page,html.large-zoom .inbox,
html.large-zoom .inbox-list,html.large-zoom .mail-list,
html.large-zoom .detail,html.large-zoom .thread-layout,html.large-zoom .thread-main {
  flex:none; height:auto; min-height:0; max-height:none; overflow:visible;
}
html.large-zoom .detail-header { max-height:none; overflow:visible; }
html.large-zoom .composer.is-collapsed,html.large-zoom .sidebar { position:static; }
html.large-zoom .pagination,html.large-zoom .top-actions { flex-wrap:wrap; }