/* OrigAI mobile final four fixes */
.oa-input-wrap {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: end !important;
  gap: 8px !important;
  min-height: 64px !important;
  max-height: 112px !important;
  overflow: visible !important;
}

.oa-input-wrap > * {
  min-width: 0 !important;
}

.oa-input-wrap .oa-round-btn,
.oa-input-wrap .oa-send-btn,
.oa-input-wrap #send-btn,
.oa-input-wrap #pause-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  align-self: end !important;
  display: grid !important;
  place-items: center !important;
  grid-row: 1 !important;
}

.oa-input-wrap .oa-round-btn:first-child {
  grid-column: 1 !important;
}

#message-input {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px;
  max-height: 82px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  resize: none !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 22px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

#send-btn,
.oa-send-btn {
  grid-column: 3 !important;
}

#pause-btn {
  grid-column: 3 !important;
}

.oa-model-sheet {
  left: 12px !important;
  right: auto !important;
  width: min(50vw, 230px) !important;
  min-width: 178px !important;
  max-width: calc(100vw - 24px) !important;
  bottom: calc(125px + env(safe-area-inset-bottom)) !important;
  border-radius: 22px !important;
  transform-origin: left bottom !important;
}

.oa-model-option {
  min-height: 86px !important;
  grid-template-columns: 32px minmax(0, 1fr) 24px !important;
  gap: 8px !important;
  padding: 13px 12px !important;
}

.oa-model-icon {
  width: 30px !important;
  height: 30px !important;
}

.oa-model-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.oa-model-copy b {
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
}

.oa-model-copy span {
  font-size: 12px !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.oa-model-copy em {
  margin-left: 0 !important;
  margin-top: 4px !important;
  width: fit-content !important;
}

.oa-check {
  width: 24px !important;
  height: 24px !important;
}

.oa-lock-dot {
  width: 8px !important;
  height: 8px !important;
}

.oa-page-mask,
.oa-modal-mask,
.oa-mask {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity .26s cubic-bezier(.16, 1, .3, 1),
    backdrop-filter .26s cubic-bezier(.16, 1, .3, 1) !important;
}

.oa-page-mask.show,
.oa-modal-mask.show,
.oa-mask.show {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.oa-sidebar {
  transition:
    transform .30s cubic-bezier(.16, 1, .3, 1),
    opacity .24s ease !important;
}

.oa-bottom-drawer,
.oa-upload-panel,
.oa-side-modal {
  transition:
    transform .30s cubic-bezier(.16, 1, .3, 1),
    opacity .24s ease !important;
}

@media (max-width: 360px) {
  .oa-model-sheet {
    width: min(52vw, 210px) !important;
    min-width: 172px !important;
  }

  .oa-model-option {
    min-height: 84px !important;
    padding: 12px 10px !important;
  }

  .oa-model-copy b {
    font-size: 16px !important;
  }

  .oa-model-copy span {
    font-size: 11px !important;
  }
}
