/* Phone controls remain usable with browser chrome and the software keyboard. */
@media (max-width: 767px) {
  html,
  body,
  #root {
    height: var(--aionui-phone-height, 100dvh) !important;
    min-height: 0;
    max-width: 100vw;
  }

  .layout-sider {
    height: var(--aionui-phone-height, 100dvh) !important;
  }

  .login-page {
    box-sizing: border-box;
    height: var(--aionui-phone-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 20px 12px;
    align-items: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .login-page .login-page__card {
    box-sizing: border-box;
    flex-shrink: 0;
    margin: auto !important;
    padding: 24px !important;
  }

  .login-page .login-page__input {
    box-sizing: border-box;
    height: 48px;
    padding-inline-end: 48px;
  }

  .login-page .login-page__toggle-password {
    inset-inline-end: 2px;
    width: 44px;
    height: 44px;
  }

  .login-page .login-page__toggle-password svg {
    width: 20px;
    height: 20px;
  }

  .login-page .login-page__checkbox {
    min-height: 44px;
  }

  html[data-aionui-compact-height='true'] .login-page__logo,
  html[data-aionui-compact-height='true'] .login-page__footer {
    display: none !important;
  }

  html[data-aionui-compact-height='true'] .login-page__card {
    padding: 16px !important;
  }

  html[data-aionui-compact-height='true'] .login-page__header,
  html[data-aionui-compact-height='true'] .login-page__form-item {
    margin-bottom: 12px !important;
  }

  html[data-aionui-compact-height='true'] .login-page__form,
  html[data-aionui-compact-height='true'] .login-page__checkbox {
    margin-bottom: 0 !important;
  }

  .app-titlebar--mobile {
    height: 56px !important;
    min-height: 56px;
    flex-shrink: 0;
  }

  button,
  .arco-btn,
  [role='button'] {
    min-height: 44px !important;
    touch-action: manipulation;
  }

  .app-titlebar__button--mobile,
  .sider-action-icon-btn-mobile,
  .arco-btn-only-icon,
  .arco-btn-shape-circle,
  button:empty {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body .arco-btn.arco-btn-icon-only,
  body .send-button-custom.arco-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body .send-button-custom.arco-btn {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  input[type='text'],
  input[type='password'],
  input[type='search'],
  input[type='email'],
  textarea,
  [contenteditable='true'] {
    font-size: 16px !important;
    line-height: 1.5;
  }

  textarea {
    max-height: min(180px, 35dvh);
  }

  /* The chat composer gets its own full-width typing row on phones. */
  .sendbox-panel > .flex.w-full {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px !important;
  }

  .sendbox-panel .sendbox-highlight-container {
    flex-basis: 100%;
    order: -1;
    width: 100%;
    grid-column: 1 / -1;
    min-height: 44px !important;
  }

  .sendbox-panel textarea.sendbox-input--mobile {
    min-height: 44px !important;
  }

  .sendbox-panel .sendbox-tools-mobile-compact {
    margin-right: auto;
  }

  .sendbox-panel .sendbox-draft-tool-action.arco-btn,
  .sendbox-panel .send-button-custom.arco-btn,
  .sendbox-panel .sendbox-draft-tooltip-anchor,
  .sendbox-panel .sendbox-send-tooltip-anchor {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }

  .arco-modal,
  .arco-modal-wrapper,
  .arco-select-popup,
  .arco-dropdown,
  [class*='_assistantOverflowPanel_'] {
    max-width: calc(100vw - 24px) !important;
  }

  .arco-modal {
    max-height: calc(var(--aionui-phone-height, 100dvh) - 24px);
    overflow-y: auto;
  }

  [class*='_assistantOverflowPanel_'] {
    max-height: calc(var(--aionui-phone-height, 100dvh) - 180px);
    overflow-y: auto;
  }

  pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}