.app-load-error {
  box-sizing: border-box;
  max-width: 440px;
  margin: 15vh auto;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202732;
  letter-spacing: 0;
}
.app-load-error h1 { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.app-load-error p { font-size: 16px; line-height: 1.5; color: #596574; }
.app-load-error button {
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #00529b;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.app-load-error button:focus-visible { outline: 2px solid #00529b; outline-offset: 3px; }
@media (max-width: 767px) { .app-load-error { margin-top: max(48px, var(--miniapp-safe-top, 0px)); } }
@media (max-width: 767px), (pointer: coarse) {
  html[data-crm-ui] #root :is(button, [role="button"]):has(svg) {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* Loaded after the retained bundle; enabled only on the CRM and MGO routes. */
html[data-crm-ui] {
  --crm-brand: #00529b;
  --crm-brand-hover: #003f78;
  --crm-gold: #ffd700;
  --crm-brand-light: #f0f7ff;
  --crm-ios-background: #f2f2f7;
  --crm-surface: #ffffff;
  --crm-surface-muted: #f7f8fa;
  --crm-text: #202732;
  --crm-text-secondary: #596574;
  --crm-border: #dce1e7;
  --crm-field-border: #bcc5d0;
  --crm-hover-border: #8b99ab;
  --crm-focus: #00529b;
  --crm-radius: 8px;
  --crm-popover-shadow: 0 6px 20px rgb(32 39 50 / 12%);
  --crm-dialog-shadow: 0 16px 48px rgb(32 39 50 / 18%);
  --crm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

html[data-crm-ui] :where(body, .font-sans) {
  font-family: var(--crm-font);
}

html[data-crm-ui] :where(#root, .text-black) {
  color: var(--crm-text);
}

html[data-crm-ui] :where(button, [role="button"], input, select, textarea, summary) {
  letter-spacing: 0;
}

html[data-crm-ui] :where(button, [role="button"], summary) {
  font-family: var(--crm-font);
}

html[data-crm-ui] :where(header h1, main h1, [role="dialog"] h1) {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

html[data-crm-ui] :where(main h2, [role="dialog"] h2) {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

html[data-crm-ui] :where(main h3, [role="dialog"] h3) {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
}

html[data-crm-ui] :where(label, th) {
  letter-spacing: 0;
}

/* Only existing framed surfaces; chat bubbles, avatars and presswalls stay intact. */
html[data-crm-ui] :where(
  main > section,
  .bg-white.border.rounded-lg,
  .bg-white.border.rounded-xl,
  .bg-white.border.rounded-2xl,
  .bg-white.border.rounded-3xl,
  .bg-white.border.rounded-\[2rem\]
) {
  border-radius: var(--crm-radius) !important;
  box-shadow: none !important;
}

html[data-crm-ui] :where(main > section, .bg-white.border-gray-200, .bg-white.border-slate-200) {
  border-color: var(--crm-border) !important;
}

html[data-crm-ui] :where([role="dialog"], .manual-appeal-dialog) {
  border-color: var(--crm-border) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-dialog-shadow) !important;
}

html[data-crm-ui] :where(header, [role="toolbar"], .crm-forms-mobile-tabs) {
  background-color: var(--crm-surface);
  border-color: var(--crm-border) !important;
  box-shadow: none;
}

html[data-crm-ui] .bg-white\/95.border-b {
  background-color: var(--crm-surface);
  border-color: var(--crm-border);
}

html[data-crm-ui] :where(button, [role="button"]):not(:where(aside *, nav *, .rounded-full)) {
  border-radius: var(--crm-radius) !important;
  font-weight: 600 !important;
}

/* The patched contacts module uses inline styles rather than utility classes. */
html[data-crm-ui] :where(
  button.bg-white:is(.text-slate-500, .text-slate-600, .text-slate-700),
  button[style*="background: rgb(255, 255, 255)"]
) {
  border-color: var(--crm-field-border) !important;
  box-shadow: none;
}

html[data-crm-ui] :where(button.bg-tg-blue, button.bg-\[\#00529B\], button[style*="background: rgb(0, 82, 155)"]) {
  background-color: var(--crm-brand) !important;
  border-color: var(--crm-brand) !important;
  color: #ffffff !important;
  box-shadow: none;
}

html[data-crm-ui] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  select,
  textarea,
  details > summary[aria-label]
) {
  background-color: var(--crm-surface) !important;
  border-color: var(--crm-field-border) !important;
  border-radius: var(--crm-radius) !important;
  color: var(--crm-text) !important;
  font-weight: 400;
  box-shadow: inset 0 0 0 1px rgb(188 197 208 / 12%);
}

html[data-crm-ui] :where(input, select, textarea):not(.font-mono) {
  font-family: var(--crm-font);
}

html[data-crm-ui] :where(input, textarea)::placeholder {
  color: #697585;
  opacity: 1;
}

html[data-crm-ui] :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--crm-brand);
}

html[data-crm-ui] :where(input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled) {
  background-color: var(--crm-surface-muted) !important;
  color: var(--crm-text-secondary) !important;
}

html[data-crm-ui] :where(button:disabled, [aria-disabled="true"], input:disabled, select:disabled, textarea:disabled) {
  cursor: not-allowed !important;
}

html[data-crm-ui] button:disabled {
  opacity: 0.55 !important;
}

html[data-crm-ui] :where(input, select, textarea)[aria-invalid="true"] {
  border-color: #ba3040 !important;
}

html[data-crm-ui] :where(
  button, a[href], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--crm-focus) !important;
  outline-offset: 2px;
}

html[data-crm-ui] :where(input, select, textarea, details > summary[aria-label]):focus-visible {
  border-color: var(--crm-focus) !important;
  box-shadow: none !important;
}

html[data-crm-ui] aside :where(button, a[href]):focus-visible {
  outline-color: var(--crm-gold) !important;
  outline-offset: -3px;
}

html[data-crm-ui] :where(input, select, textarea)[aria-invalid="true"]:focus-visible {
  border-color: #ba3040 !important;
}

html[data-crm-ui] details:has(> summary[aria-label]) > div {
  border-color: var(--crm-field-border) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-popover-shadow) !important;
}

html[data-crm-ui] details:has(> summary[aria-label]) label:has(input:checked) {
  background-color: var(--crm-brand-light);
  border-radius: 4px;
}

html[data-crm-ui] :where(table th) {
  background-color: var(--crm-surface-muted);
  border-bottom-color: var(--crm-border) !important;
  color: var(--crm-text-secondary) !important;
  font-weight: 600;
}

html[data-crm-ui] :where(table td) {
  border-bottom-color: var(--crm-border) !important;
}

html[data-crm-ui] :where(th[aria-sort="ascending"], th[aria-sort="descending"]) {
  color: var(--crm-brand) !important;
}

html[data-crm-ui] :where(tbody tr[aria-selected="true"]) {
  background-color: var(--crm-brand-light);
}

html[data-crm-ui] .appeal-filter-control {
  border-color: var(--crm-field-border);
  border-radius: var(--crm-radius);
  font-weight: 600;
}

/* Hover is supplementary; touch and keyboard feedback do not depend on it. */
@media (hover: hover) {
  html[data-crm-ui] :where(
    button.bg-white:is(.text-slate-500, .text-slate-600, .text-slate-700),
    button[style*="background: rgb(255, 255, 255)"]
  ):not(:disabled):hover {
    background-color: var(--crm-surface-muted) !important;
    border-color: var(--crm-hover-border) !important;
  }

  html[data-crm-ui] :where(button.bg-tg-blue, button.bg-\[\#00529B\], button[style*="background: rgb(0, 82, 155)"]):not(:disabled):hover {
    background-color: var(--crm-brand-hover) !important;
  }

  html[data-crm-ui] :where(tbody tr):has(button):hover {
    background-color: var(--crm-brand-light);
  }

  html[data-crm-ui] details:has(> summary[aria-label]) label:not(:has(input:checked)):hover {
    background-color: var(--crm-surface-muted);
  }

  html[data-crm-ui] .appeal-filter-control:hover {
    border-color: var(--crm-hover-border);
  }
}

html[data-crm-ui] :where(
  button.bg-white:is(.text-slate-500, .text-slate-600, .text-slate-700),
  button[style*="background: rgb(255, 255, 255)"]
):not(:disabled):active {
  background-color: #e9edf2 !important;
  border-color: var(--crm-hover-border) !important;
}

html[data-crm-ui] :where(button.bg-tg-blue, button.bg-\[\#00529B\], button[style*="background: rgb(0, 82, 155)"]):not(:disabled):active {
  background-color: #003566 !important;
}

@media (pointer: coarse) {
  html[data-crm-ui] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea,
    details > summary[aria-label]
  ) {
    font-size: 16px !important;
  }
}

/* Retained r24 CRM/MGO geometry only. Load after the retained stylesheet.
   The bootstrap owns data-crm-ui; public business-card pages stay untouched. */
html[data-crm-ui] {
  --crm-edge-top: max(var(--miniapp-safe-top, 0px), env(safe-area-inset-top, 0px));
  --crm-edge-bottom: env(safe-area-inset-bottom, 0px);
  --crm-edge-left: env(safe-area-inset-left, 0px);
  --crm-edge-right: env(safe-area-inset-right, 0px);
}

html[data-crm-ui] #root > .h-screen {
  height: calc(100dvh - var(--miniapp-safe-top, 0px));
}

html[data-crm-ui] #root > .h-screen > .flex-grow,
html[data-crm-ui] main,
html[data-crm-ui] [data-contact-field],
html[data-crm-ui] .appeals-list-ui,
html[data-crm-ui] form:has(#appeal-topics-list) {
  min-width: 0;
  min-height: 0;
}

html[data-crm-ui] main,
html[data-crm-ui] .overflow-y-auto:has(> form #appeal-topics-list) {
  scroll-padding-block: 16px max(20px, var(--crm-edge-bottom));
}

html[data-crm-ui] #root > .h-screen > aside {
  height: 100%;
}

/* Keep the blue rail without reserving a permanent vertical scrollbar. */
html[data-crm-ui] #root > .h-screen > aside > nav {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

html[data-crm-ui] #root > .h-screen > aside > nav::-webkit-scrollbar {
  display: none;
}

html[data-crm-ui] #root > .h-screen > aside > nav > button {
  min-height: 44px;
}

html[data-crm-ui] :is(main, form, [role="dialog"]) :is(input, select, textarea) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

html[data-crm-ui] main form:has([role="searchbox"]) > div:first-child {
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)) !important;
}

html[data-crm-ui] main div:has(> table) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

html[data-crm-ui] main div:has(> table)::-webkit-scrollbar {
  height: 8px;
}

/* These are the inline-styled contact modals, not the navigation drawer. */
html[data-crm-ui] div[style*="position: fixed"]:has(> [role="dialog"][aria-modal="true"]) {
  top: var(--crm-edge-top) !important;
  padding: 12px max(12px, var(--crm-edge-right)) max(12px, var(--crm-edge-bottom)) max(12px, var(--crm-edge-left)) !important;
}

html[data-crm-ui] [role="dialog"][aria-modal="true"]:not(.w-80) {
  box-sizing: border-box;
  min-width: 0;
  max-height: calc(100dvh - var(--crm-edge-top) - max(12px, var(--crm-edge-bottom)) - 12px) !important;
  overscroll-behavior-y: contain;
  scroll-padding-block: 80px 20px;
}

html[data-crm-ui] [role="dialog"][aria-modal="true"]:not(.w-80) > div:first-child > h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-crm-ui] .manual-appeal-modal {
  top: var(--crm-edge-top) !important;
  padding-bottom: max(12px, var(--crm-edge-bottom));
  padding-left: max(12px, var(--crm-edge-left));
  padding-right: max(12px, var(--crm-edge-right));
}

html[data-crm-ui] .manual-appeal-dialog {
  min-height: 0;
  max-height: calc(100dvh - var(--crm-edge-top) - max(12px, var(--crm-edge-bottom)) - 12px) !important;
}

html[data-crm-ui] .manual-appeal-dialog > .overflow-y-auto {
  min-height: 0;
  overscroll-behavior-y: contain;
  scroll-padding-block: 16px;
}

/* The deployed GSAP drawer remains independently scrollable. */
html[data-crm-ui] [role="dialog"].w-80 {
  max-width: calc(100% - max(16px, var(--crm-edge-right))) !important;
  padding: 20px max(20px, var(--crm-edge-right)) max(20px, var(--crm-edge-bottom)) max(20px, var(--crm-edge-left));
}

html[data-crm-ui] [role="dialog"].w-80 > .h-full {
  height: auto;
  min-height: 100%;
}

html[data-crm-ui] [role="dialog"].w-80 .mb-10 {
  margin-bottom: 20px;
}

html[data-crm-ui] [role="dialog"].w-80 .h-20.w-20 {
  width: 56px;
  height: 56px;
}

html[data-crm-ui] [role="dialog"].w-80 .mb-8 {
  margin-bottom: 16px;
}

html[data-crm-ui] [role="dialog"].w-80 .pt-8 {
  padding-top: 16px;
}

html[data-crm-ui] [role="dialog"].w-80 button {
  min-height: 44px;
  padding: 12px;
  gap: 12px;
  overflow-wrap: anywhere;
}

html[data-crm-ui] details:has(> summary[aria-label]) > div {
  min-width: 0 !important;
  max-height: min(400px, calc(100dvh - var(--crm-edge-top) - var(--crm-edge-bottom) - 24px));
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

html[data-crm-ui] details:has(> summary[aria-label]) > div label > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-crm-ui] form:has(#appeal-topics-list) > .flex:last-child {
  flex-wrap: wrap;
}

@media (max-width: 1023px), (pointer: coarse) {
  html[data-crm-ui] :is(header, main, form, [role="dialog"], .appeals-list-ui) button,
  html[data-crm-ui] .z-20.h-16 button,
  html[data-crm-ui] details > summary {
    min-width: 44px;
    min-height: 44px;
  }

  html[data-crm-ui] :is(main, form, [role="dialog"], .appeals-list-ui) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select) {
    min-height: 44px;
  }

  html[data-crm-ui] details:has(> summary[aria-label]) > div label {
    min-height: 44px;
  }

  html[data-crm-ui] main th:has([role="separator"]) {
    padding-right: 28px !important;
  }

  html[data-crm-ui] main th > [role="separator"] {
    width: 24px !important;
  }

  html[data-crm-ui] .appeals-list-ui > .h-14 {
    min-height: 60px;
    gap: 8px;
    padding-inline: 12px;
  }

  html[data-crm-ui] .appeals-list-ui > .h-14 > .flex-grow {
    min-width: 0;
  }
}

@media (max-width: 767px) {
  html[data-crm-ui]:not(.telegram-mini-app) #root {
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
  }

  html[data-crm-ui]:not(.telegram-mini-app) #root > .h-screen {
    height: calc(100dvh - env(safe-area-inset-top, 0px));
  }

  html[data-crm-ui] .appeals-list-ui > .overflow-y-auto {
    padding-bottom: var(--crm-edge-bottom);
  }

  /* Preserve the explanatory copy while keeping menu and title on one row. */
  html[data-crm-ui] header:has(> .lucide-contact) {
    display: grid !important;
    grid-template-columns: 44px 25px minmax(0, 1fr);
    gap: 8px !important;
    padding: 12px max(12px, var(--crm-edge-right)) 12px max(12px, var(--crm-edge-left)) !important;
    flex-shrink: 0;
  }

  html[data-crm-ui] header:has(> .lucide-contact) > div:has(> h1) {
    display: contents;
  }

  html[data-crm-ui] header:has(> .lucide-contact) h1 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html[data-crm-ui] header:has(> .lucide-contact) p {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
  }

  html[data-crm-ui] header:has(> .lucide-contact) + main {
    padding: 12px max(12px, var(--crm-edge-right)) max(16px, var(--crm-edge-bottom)) max(12px, var(--crm-edge-left)) !important;
  }

  html[data-crm-ui] header:has(> .lucide-contact) + main > section {
    padding: 12px !important;
  }

  html[data-crm-ui] header:has(> .lucide-contact) + main > section > div:first-child,
  html[data-crm-ui] header:has(> .lucide-contact) + main > section > div:first-child > div {
    gap: 8px !important;
  }

  /* Expand inside the form so the original summary remains clickable. */
  html[data-crm-ui] details[open]:has(> summary[aria-label]) > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(360px, calc(100dvh - var(--crm-edge-top) - max(12px, var(--crm-edge-bottom)) - 12px));
    display: flex;
    flex-direction: column;
  }

  html[data-crm-ui] details[open]:has(> summary[aria-label]) > div > div {
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior-y: contain;
  }

  html[data-crm-ui] details[open]:has(> summary[aria-label]) > div > :is(input, button) {
    flex-shrink: 0;
  }

  /* 16px fields prevent Safari focus zoom; typeface and palette are theme-owned. */
  html[data-crm-ui] :is(main, form, [role="dialog"], .appeals-list-ui) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
    font-size: 16px !important;
  }

  html[data-crm-ui] [role="dialog"][aria-modal="true"]:not(.w-80) > div:first-child {
    gap: 8px !important;
    padding: 12px !important;
  }

  html[data-crm-ui] [role="dialog"][aria-modal="true"]:not(.w-80) > div:nth-child(2) {
    padding: 12px !important;
  }

  html[data-crm-ui] .z-20.h-16:has(h1) {
    height: auto;
    min-height: 64px;
    padding-block: 8px;
    gap: 8px;
  }

  html[data-crm-ui] .z-20.h-16:has(h1) > .flex {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  html[data-crm-ui] .z-20.h-16:has(h1) :is(svg, button) {
    flex-shrink: 0;
  }

  html[data-crm-ui] .z-20.h-16 h1 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  html[data-crm-ui] form:has(#appeal-topics-list) .p-6 {
    padding: 16px;
  }

  html[data-crm-ui] form:has(#appeal-topics-list) > .flex:last-child > button {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  html[data-crm-ui] form:has(#appeal-topics-list) > .flex:last-child > button[type="submit"] {
    flex: 1 1 180px;
    justify-content: center;
  }
}

@media (min-width: 768px) and (max-height: 700px) {
  html[data-crm-ui] #root > .h-screen > aside > nav > button {
    gap: 4px;
    padding-block: 4px;
  }
}

@media (min-width: 768px) and (max-height: 560px) {
  html[data-crm-ui] #root > .h-screen > aside > nav > button {
    gap: 3px;
    padding-block: 3px;
  }

  html[data-crm-ui] #root > .h-screen > aside > nav > button > svg {
    width: 20px;
    height: 20px;
  }
}

/* Public controls only. Page composition, glass, portrait and motion stay upstream. */
html:not([data-crm-ui]) :is(a[href], button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #00529b !important;
  outline-offset: 3px;
}

html:not([data-crm-ui]) form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select, button) {
  min-width: 0;
  max-width: 100%;
  border-radius: 8px;
}

html:not([data-crm-ui]) form :is(input, textarea)::placeholder {
  color: #64748b;
  opacity: 1;
}

html:not([data-crm-ui]) form :is(button, label) {
  overflow-wrap: anywhere;
}

/* A two-track choice row keeps even an unbroken answer inside the form. */
html:not([data-crm-ui]) form label:has(> :is(input[type="checkbox"], input[type="radio"])) {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 44px;
  border-radius: 8px;
}

html:not([data-crm-ui]) form label:has(> :is(input[type="checkbox"], input[type="radio"])) > span {
  min-width: 0;
}

html:not([data-crm-ui]) form :is(input[type="checkbox"], input[type="radio"]) {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: #00529b;
}

html:not([data-crm-ui]) form label > :is(input[type="checkbox"], input[type="radio"]) {
  margin-top: 0;
}

/* Keep the policy sentence a single text flow, not separate flex columns. */
html:not([data-crm-ui]) form :is(label[for="consent"], label:has(> input[type="checkbox"]) > span) {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

html:not([data-crm-ui]) form a[href="/privacy"] {
  display: inline;
  white-space: normal;
}

html:not([data-crm-ui]) :is(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  cursor: not-allowed;
}

@media (max-width: 767px) {
  /* The deployed font-sans already uses the iOS/macOS system font stack. */
  html:not([data-crm-ui]) form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
    min-height: 44px;
    font-size: 16px;
  }

  html:not([data-crm-ui]) form button {
    min-height: 44px;
    white-space: normal;
  }

  html:not([data-crm-ui]) form :is(input, textarea, select, button, a[href]) {
    scroll-margin-top: calc(16px + env(safe-area-inset-top, 0px));
    scroll-margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  html:not([data-crm-ui]) form label[for="consent"] {
    min-height: 44px;
  }

  html:not([data-crm-ui]) :is(a.inline-flex, a[href^="tel:"], a[href^="mailto:"]) {
    min-height: 44px;
  }
}