:root {
  --mobile-form-font-size: 16px;
  --visual-viewport-height: 100vh;
  --visual-viewport-width: 100vw;
  --visual-viewport-offset-top: 0px;
  --visual-viewport-offset-left: 0px;
  --visual-viewport-scale: 1;
  --keyboard-height: 0px;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

input,
textarea,
select,
[contenteditable="true"] {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px), (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select,
    [contenteditable="true"],
    .app-input,
    .app-textarea,
    .app-select,
    .app-search-input,
    .app-dialog-input,
    .form-control,
    .search-input,
    .dialog-input
  ) {
    max-width: 100% !important;
    min-height: 44px;
    font-size: var(--mobile-form-font-size) !important;
    line-height: 1.4 !important;
  }

  :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    [contenteditable="true"]
  )::placeholder {
    color: #96a2ad;
    font-size: inherit !important;
    opacity: 1;
  }

  textarea,
  [contenteditable="true"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  :where(.ai-chat-composer, .agent-composer) {
    position: sticky;
    z-index: 20;
    bottom: 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: var(--surface-1, #fff);
  }

  :where(.ai-chat-composer textarea, .agent-composer textarea, .ai-image-prompt-section textarea) {
    width: 100%;
    min-height: 46px !important;
    max-height: 128px;
    font-size: var(--mobile-form-font-size) !important;
    line-height: 1.45 !important;
    resize: none;
  }

  :where(
    .app-modal--fullscreen,
    .app-drawer--fullscreen,
    .app-bottom-sheet--fullscreen,
    .mobile-fullscreen-dialog,
    .ai-chat-page
  ) {
    height: var(--visual-viewport-height, 100dvh);
    max-height: var(--visual-viewport-height, 100dvh);
  }

  :where(
    .global-ai-config-dialog,
    .report-send-preview-sheet,
    .store-visit-dialog,
    .store-visit-sheet,
    .store-insight-dialog,
    .admin-modal,
    .admin-modal-panel,
    .admin-drawer-panel,
    .industry-news-dialog,
    .ai-image-preview-dialog
  ) {
    max-height: calc(var(--visual-viewport-height, 100dvh) - 16px) !important;
  }

  :where(.mobile-dialog-layout, .admin-modal-panel, .store-visit-sheet) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  :where(
    .mobile-dialog-body,
    .admin-modal-panel > form,
    .store-visit-grid,
    .report-send-preview-body
  ) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  :where(.mobile-dialog-footer, .store-visit-footer, .admin-modal footer) {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  html.keyboard-open :where(.industry-news-filters, .industry-news-batchbar, .admin-action-sheet-dialog[open]) {
    bottom: var(--keyboard-height, 0px) !important;
  }

  html.keyboard-open .admin-action-sheet-dialog[open] {
    bottom: var(--keyboard-height, 0px) !important;
  }
}