Módulo: chat_mobile_composer.css
   Escopo: comportamento visual do composer somente no mobile.
*/

@media (max-width: 760px) {
  :root {
    --lia-mobile-composer-input-height-2b: 42px;
    --lia-mobile-composer-height-2b: 60px;
    --lia-mobile-composer-bottom-gap-2b: max(8px, env(safe-area-inset-bottom));
  }

  .lia-chat-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .lia-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .lia-composer {
    flex: 0 0 var(--lia-mobile-composer-height-2b) !important;
    height: var(--lia-mobile-composer-height-2b) !important;
    min-height: var(--lia-mobile-composer-height-2b) !important;
    max-height: 138px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
    padding-top: 8px !important;
    padding-bottom: var(--lia-mobile-composer-bottom-gap-2b) !important;
  }

  .lia-composer::before {
    top: auto !important;
    left: 8px !important;
    right: 56px !important;
    bottom: var(--lia-mobile-composer-bottom-gap-2b) !important;
    height: var(--lia-mobile-composer-input-height-2b) !important;
    min-height: 42px !important;
    max-height: 118px !important;
    border-radius: 22px !important;
    pointer-events: none !important;
  }

  .lia-composer .lia-input-label {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 42px !important;
    min-height: 42px !important;
    align-self: flex-end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 3 !important;
  }

  .lia-composer .lia-input-label::before {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    font-size: 17px !important;
    transform: none !important;
  }

  .lia-composer .lia-input {
    flex: 1 1 auto !important;
    align-self: flex-end !important;
    height: var(--lia-mobile-composer-input-height-2b) !important;
    min-height: 42px !important;
    max-height: 118px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-left: 2px !important;
    padding-right: 64px !important;
    line-height: 1.35 !important;
    resize: none !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    vertical-align: bottom !important;
    transform: none !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .lia-composer .lia-input:focus {
    outline: none !important;
  }

  .lia-composer::after {
    top: auto !important;
    right: 68px !important;
    bottom: calc(var(--lia-mobile-composer-bottom-gap-2b) + 10px) !important;
    height: 22px !important;
    min-width: 48px !important;
    line-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    letter-spacing: 4px !important;
    transform: none !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  .lia-composer .lia-icon-button,
  .lia-composer .lia-send-button {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-self: flex-end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 4 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .lia-composer .lia-icon-button::before,
  .lia-composer .lia-send-button::before {
    position: static !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 23px !important;
    text-align: center !important;
    margin: 0 !important;
    transform: none !important;
  }

  .lia-composer .lia-icon-button::before {
    font-size: 18px !important;
  }

  .lia-composer .lia-send-button::before {
    font-size: 22px !important;
    transform: translateX(1px) !important;
  }

  .lia-composer:not(.lia-composer-has-text) .lia-send-button,
  .lia-composer .lia-send-button[hidden],
  .lia-composer-is-idle .lia-send-button {
    display: none !important;
  }

  .lia-composer-has-text .lia-icon-button,
  .lia-composer .lia-icon-button[hidden] {
    display: none !important;
  }

  .lia-composer-has-text::after {
    min-width: 22px !important;
    letter-spacing: 0 !important;
    right: 68px !important;
  }

  .lia-composer-has-text .lia-input {
    padding-right: 38px !important;
  }

  .lia-composer.lia-mobile-2b-multiline::before {
    border-radius: 20px !important;
  }

  .lia-composer.lia-mobile-2b-limited .lia-input {
    overflow-y: auto !important;
  }

  .lia-composer.lia-composer-is-recording .lia-icon-button {
    display: inline-flex !important;
  }

  .lia-composer.lia-composer-is-recording .lia-icon-button::before {
    font-size: 16px !important;
  }

  body.lia-mobile-keyboard-open .lia-composer,
  body.lia-mobile-input-focused .lia-composer {
    flex-basis: var(--lia-mobile-composer-height-2b) !important;
    height: var(--lia-mobile-composer-height-2b) !important;
    min-height: var(--lia-mobile-composer-height-2b) !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 420px) {
  :root {
    --lia-mobile-composer-input-height-2b: 42px;
    --lia-mobile-composer-height-2b: 58px;
  }

  .lia-composer {
    gap: 6px !important;
    max-height: 132px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .lia-composer::before {
    left: 7px !important;
    right: 54px !important;
    min-height: 42px !important;
    max-height: 112px !important;
  }

  .lia-composer .lia-input-label {
    flex-basis: 31px !important;
    width: 31px !important;
    min-width: 31px !important;
  }

  .lia-composer .lia-input-label::before {
    font-size: 16px !important;
  }

  .lia-composer .lia-input {
    min-height: 42px !important;
    max-height: 112px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    padding-right: 60px !important;
    font-size: 0.92rem !important;
  }

  .lia-composer::after {
    right: 64px !important;
    min-width: 44px !important;
    font-size: 13px !important;
    letter-spacing: 3px !important;
  }

  .lia-composer .lia-icon-button,
  .lia-composer .lia-send-button {
    flex-basis: 43px !important;
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    min-height: 43px !important;
  }

  .lia-composer-has-text::after {
    right: 64px !important;
  }

  .lia-composer-has-text .lia-input {
    padding-right: 36px !important;
  }
}