/* uni-ui form surfaces retain the reference field sizes and typography. */
.app-frame .hhcf-control {
  display: flex;
  flex: 1;
  min-width: 0;
  width: 100%;
  color: var(--text);
  font-family: inherit;
}
.app-frame .hhcf-control .uni-easyinput {
  min-width: 0;
  height: 100%;
  color: inherit;
  font: inherit;
}
.app-frame .hhcf-control .uni-easyinput__content {
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent !important;
}
.app-frame .hhcf-control .uni-easyinput__content-input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  font: inherit;
  color: inherit;
}
.app-frame .hhcf-control .uni-input-wrapper {
  height: 100%;
}
.app-frame .hhcf-control .uni-input-input,
.app-frame .hhcf-control .uni-textarea-textarea {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
}
.app-frame .hhcf-control .uni-input-placeholder,
.app-frame .hhcf-control .uni-textarea-placeholder {
  font: inherit;
  color: #b4b0ab;
}
.app-frame .hhcf-control:focus-within {
  outline: none;
}
.app-frame .field:focus-within,
.app-frame .textarea-field:focus-within,
.app-frame .me-search-field:focus-within {
  box-shadow:
    0 0 0 1px #ff7d4540,
    var(--shadow);
}
.app-frame .field > .hhcf-control {
  height: 100%;
  font-size: 13px;
}
.app-frame .field .hhcf-control.login-code-input {
  font-size: 15px;
  letter-spacing: 0.18em;
}
/* Match the measured reference native-field boxes, including their inner padding. */
.app-frame .textarea-field > .hhcf-control {
  font-size: 13.5px;
  line-height: 1.4;
  height: 28.3125px;
}
.app-frame .textarea-field > .hhcf-control + .hhcf-control {
  height: 33.15625px;
  border-top: 1px dashed #f2eee9;
  margin-top: 8px;
  padding-top: 8px;
}
.app-frame .manual-field > .hhcf-control {
  height: 30.3125px;
  font:
    800 16px/24px Nunito,
    sans-serif;
}
.app-frame .me-nutri > .hhcf-control {
  height: 23px;
  font:
    800 15px/23px Nunito,
    sans-serif;
}
.app-frame .me-search-field > .hhcf-control {
  height: 100%;
  font-size: 12.5px;
}
.app-frame .chat-input-bar > .hhcf-control {
  width: 0;
  height: 38px;
  font-size: 13px;
}
.app-frame .comment-input-bar > .hhcf-control {
  width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  background: #f6f3f0;
  font-size: 12.5px;
}
.app-frame .hhcf-control--textarea {
  height: 62px;
  min-height: 62px;
  font-size: 13px;
}
.app-frame .field > .hhcf-control--textarea {
  height: 62px;
}
.app-frame .hhcf-control--textarea .uni-easyinput__content-textarea {
  min-height: 0 !important;
  height: 100% !important;
  margin: 0;
  font: inherit;
}
.app-frame .hhcf-control--textarea .uni-textarea-wrapper {
  height: 100%;
}
.app-frame .hhcf-control--textarea .uni-textarea-textarea {
  height: 100%;
  resize: none;
}
.app-frame .hhcf-temporal {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 100%;
  font-size: 13px;
}
.app-frame .hhcf-temporal > .uni-date,
.app-frame .hhcf-temporal > .uni-datetime-picker,
.app-frame .hhcf-temporal .uni-date-editor,
.app-frame .hhcf-temporal .uni-date-editor > uni-view {
  height: 100%;
}
.app-frame .hhcf-time-field > .uni-datetime-picker > uni-view:first-child {
  height: 100%;
}
.app-frame .hhcf-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.app-frame .hhcf-picker-trigger:focus-visible {
  outline: 2px solid #ff7d4550;
  outline-offset: 3px;
  border-radius: 3px;
}
.app-frame .hhcf-picker-value {
  white-space: nowrap;
}
.app-frame .hhcf-temporal .uni-calendar-item--checked,
.app-frame .hhcf-temporal .uni-calendar-item--checked-range-text {
  background: var(--orange);
}
.app-frame .hhcf-temporal .uni-calendar__header-btn-box:focus-visible {
  outline: 2px solid var(--orange);
}
.app-frame .hhcf-temporal .uni-datetime-picker-btn-text,
.app-frame .hhcf-temporal .confirm-text {
  color: var(--orange-deep);
}
.app-frame .hhcf-temporal .uni-calendar__content {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
/* The bundled time picker expects content-box sizing. Size its dialog explicitly
   under the reference app's global border-box reset to avoid clipping actions. */
.app-frame .hhcf-time-field .uni-datetime-picker-popup {
  box-sizing: border-box;
  width: min(354px, calc(100vw - 36px));
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px;
  overflow: hidden;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.app-frame .hhcf-time-field .uni-datetime-picker-view {
  max-width: 100%;
}
.app-frame .hhcf-time-field .uni-datetime-picker-btn {
  margin-top: 28px;
}
.app-frame
  .hhcf-date-field
  .uni-calendar-item__weeks-box
  .uni-calendar-item--checked,
.app-frame .hhcf-date-field .uni-calendar-item--before-checked,
.app-frame .hhcf-date-field .uni-calendar-item--after-checked {
  background-color: var(--orange) !important;
}
.app-frame
  .hhcf-date-field
  .uni-calendar__header
  .uni-calendar__header-btn-box {
  color: var(--text);
}
.app-frame .hhcf-date-field .uni-calendar__confirm {
  color: var(--orange-deep) !important;
}
@media (min-width: 560px) {
  .app-frame .hhcf-temporal .uni-datetime-picker-mask,
  .app-frame .hhcf-temporal .uni-date-mask--pc,
  .app-frame .hhcf-temporal .uni-calendar__mask {
    left: 50%;
    top: max(20px, calc((100dvh - 900px) / 2));
    width: 430px;
    height: min(900px, calc(100dvh - 40px));
    transform: translateX(-50%);
    bottom: auto;
    right: auto;
    border-radius: 34px;
  }
}

.app-frame .hhcf-time-field .uni-datetime-picker-sign.sign-center {
  left: 50%;
  transform: translateX(-50%);
}
.app-frame .manual-field:focus-within,
.app-frame .me-nutri:focus-within,
.app-frame .chat-input-bar > .hhcf-control:focus-within,
.app-frame .comment-input-bar > .hhcf-control:focus-within {
  box-shadow: 0 0 0 1px #ff7d4550;
  border-radius: 10px;
}
.app-frame .hhcf-date-field .uni-calendar-item--today {
  background-color: var(--orange-deep);
}
.app-frame .hhcf-date-field .uni-datetime-picker--btn {
  background: linear-gradient(120deg, #ff955f, #ff7135) !important;
  border-radius: 12px;
  color: white;
  font-family: inherit;
  font-weight: 600;
}

/* iOS zooms focused fields below 16px. Apply the floor to the native
   controls too; sizing only the uni-ui wrapper leaves inherited small text.
   Coarse pointers also cover phones/tablets in landscape. */
@media (max-width: 559px), (any-pointer: coarse) {
  .app-frame input,
  .app-frame textarea,
  .app-frame .hhcf-control .uni-input-input,
  .app-frame .hhcf-control .uni-textarea-textarea,
  .app-frame .hhcf-control .uni-input-placeholder,
  .app-frame .hhcf-control .uni-textarea-placeholder {
    font-size: max(16px, 1em);
  }
}

/* A desktop dropdown cannot fit below the field in a short window. Keep the
   calendar over its mask and let its own panel scroll inside the app frame. */
@media (max-height: 600px) {
  .app-frame .hhcf-date-field .uni-date-single--x {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 36px);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    border-radius: 14px;
  }
}
@media (max-height: 600px) {
  .app-frame .hhcf-date-field .uni-calendar__content-mobile {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 56px);
  }
  .app-frame .hhcf-date-field .uni-calendar__content-mobile .uni-calendar__header,
  .app-frame .hhcf-date-field .uni-calendar__content-mobile .uni-date-btn--ok {
    flex-shrink: 0;
  }
  .app-frame .hhcf-date-field .uni-calendar__content-mobile .uni-calendar__box {
    min-height: 0;
    overflow-y: auto;
  }
}
@media (min-width: 560px) {
  .app-frame .hhcf-date-field .uni-calendar__content-mobile {
    left: calc((100vw - 430px) / 2);
    right: auto;
    width: 430px;
    border-radius: 20px;
    bottom: max(20px, calc((100dvh - 900px) / 2));
  }
}