/* LITREVO R52 — viewport, stacking and responsive alignment audit.
   Business Dashboard, global header and global sidebar are intentionally excluded. */
:root {
  --audit-gutter: clamp(12px, 1.4vw, 24px);
  --audit-blue: #155eef;
  --audit-line: rgba(21, 94, 239, .82);
  --audit-ink: #17324f;
  --audit-copy: #526a86;
  --audit-card: rgba(255, 255, 255, .94);
  --audit-border: rgba(145, 169, 197, .42);
  --audit-shadow: 0 15px 38px rgba(35, 64, 104, .09);
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content,
body.app-body.ui-reference-light:not(.page-dashboard) .page-content * {
  box-sizing: border-box;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content > *,
body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(main,section,article,aside,form,nav,header,footer),
body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(.grid,.form-row,.form-grid,.settings-grid,.cards-grid,.tcb-layout,.tcb-grid,.lcb-builder-grid,.lcp-toolbar,.lcp-filters,.ci-chat-header) > * {
  min-width: 0;
  max-width: 100%;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(img,video,canvas) {
  max-width: 100%;
  height: auto;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(button,a,label) {
  min-width: 0;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(button,a,label) > :is(svg,.icon,img.brand-icon) {
  flex: 0 0 auto;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(button,a) > span:not([class*="badge"]):not([class*="icon"]) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Keep the new finish light. Blue is used as a structural line, not as a large navy fill. */
body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(
  .panel,.settings-section,.support-card,.suite-card,.integration-market-card,.channel-market-card,
  .automation-card,.quick-reply-card,.auto-reply-card,.workflow-card,.product-card,.widget-card,.ai-agent-card,
  .tpl-tabs,.tpl-library-col,.tpl-table-card,.tcb-step,.tcb-preview,
  .lcp-toolbar,.lcp-tabs,.lcp-table-card,.premium-inbox-shell,.inbox-shell
) {
  border-color: var(--audit-border) !important;
  background-color: var(--audit-card) !important;
  box-shadow: inset 0 3px 0 var(--audit-line), var(--audit-shadow) !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) .page-content :is(h1,h2,h3,h4,h5,h6,strong) {
  color: var(--audit-ink);
}

/* All application dialogs stay inside the visual viewport. */
body.app-body.ui-reference-light:not(.page-dashboard) dialog,
body.app-body.ui-reference-light:not(.page-dashboard) :is(
  .dialog-card,.ci-modal-dialog,.lcb-library-dialog,.lcb-template-dialog,.lcb-test-dialog,
  .lcp-launch-dialog,.lcp-picker-dialog,.lcp-rcs-dialog,.tpl-template-dialog,.tpl-action-dialog,
  .contact-hub-dialog,.tag-manager-dialog
) {
  width: min(var(--dialog-width, 960px), calc(100vw - (var(--audit-gutter) * 2))) !important;
  max-width: calc(100vw - (var(--audit-gutter) * 2)) !important;
  max-height: calc(100dvh - (var(--audit-gutter) * 2)) !important;
  overscroll-behavior: contain;
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(
  .ci-modal,.lcb-template-modal,.lcb-test-modal,.lcp-launch-modal,.lcp-picker-modal,.lcp-rcs-modal
) {
  z-index: 10000 !important;
  padding: var(--audit-gutter) !important;
  box-sizing: border-box;
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(
  .ci-modal-dialog,.lcb-library-dialog,.lcb-template-dialog,.lcb-test-dialog,.lcp-launch-dialog,.lcp-picker-dialog,.lcp-rcs-dialog
) {
  background: #fff !important;
  opacity: 1 !important;
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(
  .ci-modal-body,.dialog-body,.tpl-action-dialog-body,.lcp-rcs-dialog-body,.lcb-template-grid,.lcb-library-body
) {
  min-width: 0;
  min-height: 0;
  overflow-wrap: anywhere;
}

body.app-body.ui-reference-light:not(.page-dashboard) :is(
  .ci-call-menu,.ci-filter-popover,.ci-sort-menu,.tpl-filter-panel,.tpl-action-menu,.lcp-filter-panel,
  .chub-more-menu,.chub-columns-menu,.lcp-plan-tooltip,.ci-plan-tooltip
) {
  z-index: 11000 !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  border-color: var(--audit-border) !important;
  background: #fff !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 18px 46px rgba(28, 51, 84, .18) !important;
  overscroll-behavior: contain;
}

/* Campaign filter panels are portalled visually with fixed coordinates from JS. */
body.app-body.ui-reference-light.page-campaigns .lcp-shell,
body.app-body.ui-reference-light.page-campaigns .lcp-toolbar {
  overflow: visible !important;
}

body.app-body.ui-reference-light.page-campaigns .lcp-toolbar {
  position: relative !important;
  z-index: 500 !important;
  isolation: isolate;
}

body.app-body.ui-reference-light.page-campaigns .lcp-filter.is-open { z-index: 600 !important; }
body.app-body.ui-reference-light.page-campaigns .lcp-filter-panel {
  position: fixed;
  right: auto !important;
  bottom: auto !important;
}
body.app-body.ui-reference-light.page-campaigns :is(.lcp-tabs,.lcp-table-card) { position: relative; z-index: 1; }
body.app-body.ui-reference-light.page-campaigns .lcp-filter-scroll { max-height: min(330px, calc(100dvh - 120px)); overflow-y: auto; }

body.app-body.ui-reference-light.page-campaigns .lcp-table-card {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

body.app-body.ui-reference-light.page-campaigns .lcp-table {
  min-width: 960px;
}

body.app-body.ui-reference-light.page-campaigns .lcp-create-whatsapp {
  border-color: #1ca653 !important;
  color: #fff !important;
  background: linear-gradient(110deg, #128c4a, #25d366) !important;
}

/* Inbox header must paint above the independently scrolling message stream. */
body.app-body.ui-reference-light.page-inbox .premium-inbox-chat { min-width: 0; }
body.app-body.ui-reference-light.page-inbox .ci-chat-header {
  position: relative !important;
  z-index: 400 !important;
  overflow: visible !important;
  isolation: isolate;
}

body.app-body.ui-reference-light.page-inbox .premium-message-stream {
  position: relative;
  z-index: 1;
}

body.app-body.ui-reference-light.page-inbox .ci-call-menu-wrap { z-index: 450 !important; }
body.app-body.ui-reference-light.page-inbox .ci-call-menu {
  position: fixed;
  width: min(286px, calc(100vw - 24px));
  font-family: "Inter", Arial, sans-serif !important;
}

body.app-body.ui-reference-light.page-inbox :is(.ci-filter-popover,.ci-sort-menu) {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
}

body.app-body.ui-reference-light.page-inbox .ci-call-option {
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
}

body.app-body.ui-reference-light.page-inbox .ci-call-option :is(strong,small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-body.ui-reference-light.page-inbox .ci-modal { place-items: center; }
body.app-body.ui-reference-light.page-inbox .ci-modal-dialog { --dialog-width: 980px; }
body.app-body.ui-reference-light.page-inbox .ci-modal-dialog-medium { --dialog-width: 720px; }

/* Templates and builder panels wrap before controls overlap. */
body.app-body.ui-reference-light.page-templates :is(.tpl-toolbar,.tpl-toolbar-right,.tpl-library-tools,.tcb-step-head,.tcb-preview-head) {
  min-width: 0;
  flex-wrap: wrap;
}

body.app-body.ui-reference-light.page-templates :is(.tpl-template-dialog,.tpl-action-dialog) {
  overflow-y: auto !important;
}

body.app-body.ui-reference-light.page-templates .tpl-filter-panel {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
}

body.app-body.ui-reference-light.page-templates .tpl-template-dialog { --dialog-width: 920px; }
body.app-body.ui-reference-light.page-templates .tpl-action-dialog { --dialog-width: 680px; }
body.app-body.ui-reference-light.page-templates :is(.tcb-layout,.tcb-grid,.tcb-button-fields,.tpl-form-grid) > * { min-width: 0; }

/* Campaign builder creation/test dialogs. */
body.app-body.ui-reference-light:not(.page-dashboard) .lcb-library-dialog { --dialog-width: 1000px; }
body.app-body.ui-reference-light:not(.page-dashboard) .lcb-template-dialog { --dialog-width: 870px; }
body.app-body.ui-reference-light:not(.page-dashboard) .lcb-test-dialog { --dialog-width: 520px; overflow-y: auto; }
body.app-body.ui-reference-light:not(.page-dashboard) :is(.lcb-library-body,.lcb-test-confirm-grid,.lcb-test-phone-row) > * { min-width: 0; }

@media (max-width: 960px) {
  body.app-body.ui-reference-light:not(.page-dashboard) :is(.lcb-library-body,.lcb-test-confirm-grid) { grid-template-columns: 1fr !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) .lcb-library-preview { display: none; }
  body.app-body.ui-reference-light.page-campaigns .lcp-toolbar { align-items: stretch !important; }
  body.app-body.ui-reference-light.page-campaigns .lcp-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }
  body.app-body.ui-reference-light.page-campaigns .lcp-filter { flex: 0 0 auto; }
}

@media (max-width: 760px) {
  :root { --audit-gutter: 8px; }
  body.app-body.ui-reference-light:not(.page-dashboard) dialog,
  body.app-body.ui-reference-light:not(.page-dashboard) :is(.ci-modal-dialog,.lcb-library-dialog,.lcb-template-dialog,.lcb-test-dialog,.lcp-launch-dialog,.lcp-picker-dialog,.lcp-rcs-dialog,.tpl-template-dialog,.tpl-action-dialog) {
    border-radius: 14px !important;
  }
  body.app-body.ui-reference-light.page-inbox .ci-chat-header { flex-wrap: wrap; height: auto !important; min-height: 74px; }
  body.app-body.ui-reference-light.page-inbox .ci-chat-actions { margin-left: auto; }
  body.app-body.ui-reference-light.page-templates :is(.tpl-toolbar-right,.tpl-search) { width: 100% !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) .lcb-test-phone-row { grid-template-columns: 92px minmax(0,1fr) !important; }
}

@media (max-width: 520px) {
  body.app-body.ui-reference-light:not(.page-dashboard) .page-content { padding-inline: 10px !important; }
  body.app-body.ui-reference-light:not(.page-dashboard) :is(.dialog-head,.dialog-body,.dialog-foot,.tpl-action-dialog-head,.tpl-action-dialog-body,.tpl-action-dialog-foot) { padding-inline: 14px !important; }
  body.app-body.ui-reference-light.page-campaigns .lcp-table { min-width: 840px; }
  body.app-body.ui-reference-light.page-inbox .ci-chat-actions { width: 100%; justify-content: flex-end; }
  body.app-body.ui-reference-light.page-templates :is(.tcb-grid,.tcb-button-fields,.tcb-button-fields.three,.tpl-form-grid) { grid-template-columns: 1fr !important; }
}