/* The app fits Safari's visible viewport; each working pane owns its scrolling. */
:root {
  --lz-visible-height: 100dvh;
  --lz-visible-top: 0px;
  --lz-visible-bottom: 0px;
}
html:has(#app-screen[style]:not([style*="display: none"]):not([style*="display:none"])) {
  height: 100%;
  overflow: hidden;
}
body:has(#app-screen[style]:not([style*="display: none"]):not([style*="display:none"])) {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
html #app-screen[style]:not([style*="display: none"]):not([style*="display:none"]) {
  position: fixed;
  top: var(--lz-visible-top);
  left: 0;
  right: 0;
  height: var(--lz-visible-height) !important;
  min-height: 0 !important;
  box-sizing: border-box;
}
#app-screen > [id^="content-"] { overscroll-behavior: contain; }
#app-screen > [id^="content-"] > .tool-embed-shell { height: 100% !important; min-height: 0; }
.tool-embed-frame { min-height: 0; }
/* The selected-view marker also handles the initial month before calSetView runs. */
#content-calendar:has(#cal-view-btn-agenda.active) #cal-agenda-list { display: block; }
.lz-sidekick-toggle { bottom: calc(var(--lz-visible-bottom) + var(--space-500) + env(safe-area-inset-bottom, 0px)); }
/* Both chat placements already have their own exit/navigation. */
html.lz-sidekick-open #lz-sidekick-toggle,
html:has(#app-screen > #content-agent:not(.hidden)) #lz-sidekick-toggle { display: none !important; }
.agent-compose-row { padding-right: 0; }
#agent-input-area { padding-bottom: max(var(--space-300), env(safe-area-inset-bottom, 0px)) !important; }
#agent-messages, #agent-conv-list, #agent-reminders-sidebar-list { overscroll-behavior: contain; }

@media (max-width: 980px) {
  /* Match the specificity of the legacy :has(#content-agent) mobile rule. */
  html:not(.lz-regia) #app-screen#app-screen[style] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: 'banner' 'header' 'main';
    overflow: hidden;
  }
  html.lz-regia #app-screen#app-screen[style] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: 'topnav' 'subbar' 'main';
    overflow: hidden;
  }
  html .app-tabs {
    top: calc(var(--lz-visible-top) + var(--header-h));
    height: calc(var(--lz-visible-height) - var(--header-h)) !important;
  }
  html #lz-sidekick {
    top: calc(var(--lz-visible-top) + var(--header-h));
    bottom: auto;
    height: calc(var(--lz-visible-height) - var(--header-h));
    box-sizing: border-box;
  }
  html.lz-regia #lz-sidekick { top: var(--lz-visible-top); height: var(--lz-visible-height); }
}

/* iPad portrait and landscape, including Safari with its toolbar visible. */
@media (min-width: 761px) and (max-width: 1280px) {
  :root { --sidebar-w: 200px; }
  .app-header .lz-railtop { margin-right: var(--space-100); }
  .app-header .header-center { min-width: 0; }
  #workspace-indicator { max-width: 260px; }
  .app-header .pal-kbd { display: none; }
  .lz-group-hd, .tab-item, .lz-group-body .tab-item { min-height: 44px !important; }
  .lz-group-hd .lz-lbl { white-space: normal; }
  .tab-item .lz-lbl { white-space: normal; overflow-wrap: anywhere; }
  html:not(.lz-admin) .lz-railfoot #header-user-chip {
    display: grid !important; grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-100) var(--space-150); white-space: normal;
  }
  html:not(.lz-admin) .lz-railfoot #header-user-avatar { grid-row: span 2; }
  html:not(.lz-admin) .lz-railfoot #header-user-name {
    min-width: 0; white-space: normal; overflow-wrap: anywhere;
  }
  html:not(.lz-admin) .lz-railfoot #user-role-badge { grid-column: 2; justify-self: start; }
  html:not(.lz-admin) .app-tabs > .lz-railfoot {
    position: sticky; bottom: calc(-1 * var(--space-300)); flex: none;
    background: var(--lz-rail-bg); z-index: 20;
  }
  #crm-task-form .bbr-textarea, #crm-task-priority-control {
    box-sizing: border-box; min-width: 0;
  }
  #crm-task-priority-control { min-height: 44px; }
  html:not(.lz-admin) .lz-profile-pop { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
  html:not(.lz-admin) .lz-pop-name { white-space: normal; overflow-wrap: anywhere; }
  html:not(.lz-admin) .lz-sidekick-toggle.btn.btn-lg { width: 44px; min-width: 44px; padding: 0 !important; gap: 0; justify-content: center; }
  html:not(.lz-admin) .lz-sidekick-toggle > svg { flex: none; }
  html:not(.lz-admin) .lz-sidekick-toggle > span { display: none; }
  html.lz-tablet-launcher-docked #lz-sidekick-toggle {
    position: static; flex: none; margin: 0; box-shadow: none;
  }

  .agent-conversations-toggle { display: inline-flex; }
  #bbr-kpi-root .bbr-kpi-card-chart.btn { grid-template-columns: minmax(0, 1fr); }
  #content-calendar :is(.btn, .cal-view-btn) { min-height: 44px !important; }
  /* The selected calendar view owns the remaining height and its own scrolling. */
  #content-calendar > .dashboard {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
  }
  #content-calendar > .dashboard > :not(#cal-grid):not(#cal-agenda-list):not(#cal-day-panel) { flex: none; }
  #content-calendar #cal-grid {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
  }
  #content-calendar #cal-grid > div:first-child { flex: none; }
  #content-calendar #cal-days {
    flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr);
  }
  #content-calendar #cal-days > div {
    min-height: 0 !important; overflow: auto; overscroll-behavior: contain;
  }
  #content-calendar #cal-agenda-list { flex: 1; min-height: 0; overflow: auto; }
  #content-calendar #cal-day-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #content-calendar #cal-day-panel > div:first-child { flex: none; }
  #content-calendar #cal-day-allday { flex: none; max-height: 120px; overflow: auto; }
  #content-calendar #cal-day-timeline { flex: 1; min-height: 0; max-height: none !important; }
  #content-calendar:has(#cal-day-panel:not([style*="display: none"]):not([style*="display:none"])) :is(#cal-grid, #cal-agenda-list) { display: none !important; }
  #app-screen > #content-agent #agent-conversations-panel { display: none !important; }
  #app-screen > #content-agent .agent-workspace.show-conversations #agent-conversations-panel {
    display: flex !important;
    position: absolute;
    inset: 0 auto 0 0;
    width: min(300px, 100%) !important;
    z-index: 6;
    box-shadow: var(--shadow-lg);
  }

  /* All overview cards stay on screen. Long lists scroll inside their card. */
  #app-screen > #content-knowledge:has(#dashboard-home:not(.hidden) #lzb-root) {
    display: flex; flex-direction: column; overflow: hidden;
  }
  #content-knowledge > :not(#dashboard-home) { flex-shrink: 0; }
  #dashboard-home:has(#lzb-root) { flex: 1; height: 0; min-height: 0; width: 100%; }
  #lzb-root { display: flex; flex-direction: column; height: 100%; min-height: 0; max-width: none; padding: 0 !important; }
  #lzb-root > .top { flex: none; margin-bottom: var(--space-100); }
  #lzb-root > .muted { flex: none; margin: var(--space-100) 0; }
  #lzb-root .grid {
    flex: 1; min-height: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(112px, .8fr) repeat(2, minmax(0, 1fr));
    gap: var(--space-300); margin-top: var(--space-200);
    padding-bottom: var(--space-1200);
  }
  #lzb-root .w, #lzb-root .w.wide {
    min-height: 0; min-width: 0; padding: var(--space-300);
    overflow: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--bbr-bd-strong) transparent;
  }
  #lzb-root .w.wide { grid-column: span 2; }
  html.lz-tablet-launcher-docked #lzb-root .grid { padding-bottom: 0; }
  #lzb-root .w > * { flex-shrink: 0; }
  #lzb-root .w > h2 { flex: none; min-height: 28px; font-size: var(--text-xs); margin-bottom: var(--space-100); }
  #lzb-root .bbr-visual-widget > .bbr-visual-art,
  #lzb-root .bbr-visual-attention-art { display: none; }
  #lzb-root .bbr-visual-icon { width: 28px; height: 28px; }
  #lzb-root .rowk { gap: var(--space-200); font-size: var(--text-sm); line-height: 1.3; padding: var(--space-050) 0; }
  #lzb-root .rowk > :last-child { text-align: right; flex-shrink: 0; white-space: nowrap; }
  #lzb-root .big { font-size: var(--text-xl); overflow-wrap: anywhere; }
  #lzb-root .feed { margin: 0; }
  #lzb-root .feed li { padding: var(--space-100) 0; gap: var(--space-200); }
  #lzb-root .feed .fi { width: 24px; height: 24px; }
  #lzb-root .feed .ft { min-width: 0; overflow-wrap: anywhere; }
  #lzb-root .feed .fw { flex: none; }
}
@media (min-width: 761px) and (max-width: 980px) {
  #bbr-kpi-root .bbr-kpi-grid-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #bbr-kpi-root .bbr-kpi-grid-primary .bbr-kpi-card-chart.btn { grid-column: auto; }
  #lzb-root .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(112px, .8fr) repeat(4, minmax(0, 1fr)); }
  #lzb-root .w.wide { grid-column: span 1; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  /* A sheet preserves the working page's width instead of crushing its tables. */
  html.lz-sidekick-open:not(.lz-regia):not(.lz-admin) #app-screen[style] {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-areas: 'banner banner' 'header header' 'sidebar main';
  }
  html.lz-sidekick-open.lz-admin #app-screen[style] {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-areas: 'banner banner' 'sidebar main';
  }
  html.lz-sidekick-open.lz-regia #app-screen[style] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'topnav' 'subbar' 'main';
  }
  html #lz-sidekick {
    position: fixed; z-index: 1000;
    top: calc(var(--lz-visible-top) + var(--header-h)); right: 0; bottom: auto;
    width: min(480px, 48vw); height: calc(var(--lz-visible-height) - var(--header-h));
    margin: 0; box-sizing: border-box; box-shadow: var(--shadow-lg);
  }
  html.lz-sidekick-expanded #lz-sidekick { width: calc(100% - var(--sidebar-w)); }
  html.lz-regia #lz-sidekick { top: var(--lz-visible-top); height: var(--lz-visible-height); }
  html.lz-admin #lz-sidekick { top: var(--lz-visible-top); height: var(--lz-visible-height); }
}