/* DriveForma demo v4: message, customer and form fit. Presentation only. */

/* A long select option, email or attachment must not set a grid column's width. */
body.app-shell .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.app-shell :is(.form-grid, .jm-pair) > *,
body.app-shell :is(.fld, .prog-form, .jm-main, .jm-today, .att-item) {
  min-width: 0;
  max-width: 100%;
}
body.app-shell .form-grid :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
body.app-shell .jm-pair :is(input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}
body.app-shell :is(.lbl, .fld-help, .fld-err, .hint, .step-desc, .step-hint) {
  overflow-wrap: anywhere;
}
body.app-shell .prog-form { flex-basis: 320px; min-width: 0; }
body.app-shell .prog-preview { max-width: 100%; }

/* Text is allowed to flow; original message contents and line breaks stay intact. */
body.app-shell pre.caption {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.6;
  max-width: 100%;
}
body.app-shell textarea {
  min-width: 0;
  max-width: 100%;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
body.app-shell #msg-body {
  min-height: 13rem;
  height: clamp(16rem, 42vh, 24rem);
  padding: 14px 16px;
}
body.app-shell :is(.timeline li, .item-row .grow, .deal-item, .ai-cust,
    .ai-note, .ibx-full, .ibx-addr, .jm-note, .jm-l1, .jm-l2,
    .jm-cta-sub, .hl-sheet-to) {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.app-shell .ai-reply .ai-cust a {
  display: inline-block;
  white-space: normal;
  max-width: 100%;
  margin-left: 0;
  margin-top: 4px;
}
body.app-shell #msg-filter .grid > *,
body.app-shell .grid.cols-2:has(.timeline) > * { min-width: 0; }
body.app-shell #msg-log .btn-row > label {
  flex: 1 1 16rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.app-shell #msg-log .btn-row > label input[type=checkbox] {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 4px;
}

/* Keep the complete file name available without pushing the form off screen. */
body.app-shell .filebtn,
body.app-shell .filebtn.grow {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  min-height: 44px;
}
body.app-shell .filebtn .fb-face {
  white-space: normal;
  overflow-wrap: anywhere;
}
body.app-shell .filebtn .fb-name {
  flex: 1 1 10rem;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}
body.app-shell .att-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}
body.app-shell .att-chk { align-items: flex-start; }
body.app-shell .att-nm {
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}

/* Form actions can grow in height when a translated label needs a second line. */
body.app-shell :is(.btn-row, .actions, .form-cta, .ibx-acts, .hl-sheet-acts,
    .jm-desk, .jm-lic, .jm-later-row) > .btn,
body.app-shell .item-row form.inline .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  text-align: center;
}
body.app-shell .item-row .grow { min-width: min(140px, 100%); }
body.app-shell .item-row form.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; }
body.app-shell .rs-btn { flex-wrap: wrap; gap: 3px 6px; line-height: 1.5; }
body.app-shell form:has(> select[name=status]) { flex-wrap: wrap; }
body.app-shell form:has(> select[name=status]) > select {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 100%;
}
body.app-shell .ms-form > input[type=date] { max-width: 100%; }
body.app-shell .ms-form .ms-opt { min-height: 44px; }
body.app-shell .ms-form .ms-hours { flex-wrap: wrap; max-width: 100%; gap: 6px; }
body.app-shell .ms-form .ms-hours input[type=time] {
  flex: 1 1 6rem;
  min-width: 0;
  width: 7rem;
  max-width: 100%;
}

/* Message sheets remain reachable on short landscape screens and with zoom. */
body.app-shell dialog.hl-sheet {
  max-width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.app-shell .hl-sheet-head h2 {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
body.app-shell .hl-sheet-acts > * { min-width: 0; }
body.app-shell .jm-form .lbl { flex-wrap: wrap; }
body.app-shell .jm-pair.names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.app-shell .jm-seg { flex-wrap: wrap; }
body.app-shell .jm-seg span { min-height: 44px; white-space: normal; line-height: 1.4; }
body.app-shell .jm-lic { grid-template-columns: minmax(0, 1fr) auto; }
body.app-shell :is(.jm-step, .jm-alt, .jm-again) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) and (min-width: 841px) {
  /* With the desktop rail visible, nested half-width message cards need one field per row. */
  body.app-shell #msg-filter .form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 840px) {
  body.app-shell .form-grid { grid-template-columns: minmax(0, 1fr); }
  body.app-shell :is(.ibx-acts, .hl-sheet-acts) > .btn,
  body.app-shell .ibx-acts > form.inline {
    flex: 1 1 9rem;
    min-width: 0;
  }
  body.app-shell .ibx-acts > form.inline > .btn { width: 100%; }
  body.app-shell #msg-log .btn-row > label { min-height: 44px; }
  body.app-shell :is(.btn-row, .actions, .form-cta, .ibx-acts, .hl-sheet-acts,
      .jm-desk, .jm-lic, .jm-later-row) .btn {
    min-height: 44px;
  }
  body.app-shell details.addform > summary { min-height: 44px; line-height: 1.5; }
  body.app-shell #msg-body { height: 18rem; padding: 12px; }
  body.app-shell .ms-chip form button { width: 36px; height: 36px; }
  body.app-shell .ms-chip { max-width: 100%; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  body.app-shell .jm-pair.names,
  body.app-shell .jm-lic { grid-template-columns: minmax(0, 1fr); }
  body.app-shell .jm-seg label { flex-basis: calc(50% - 2px); }
  body.app-shell .jm-lic-help { grid-column: 1; }
  body.app-shell .jm-later-row > :is(input, .btn) { flex: 1 1 100%; }
  body.app-shell .ibx-row > summary { flex-wrap: wrap; gap: 4px 8px; }
  body.app-shell .ibx-row > summary .ibx-l { flex-basis: calc(100% - 1px); }
  body.app-shell .ibx-t { padding-top: 0; }
  body.app-shell .ms-form > input[type=date] { width: 100%; }
  body.app-shell .ms-form .ms-hours { width: 100%; }
  body.app-shell .ms-form > .btn { flex: 1 1 100%; }
}