/*
 * Support Helper: answers sit at the top, and list rows that look like buttons
 * behave like them. Sheet row 5 (9 Oct).
 *
 * Kept in its own file and loaded after dpd-modal.css (it depends on that handle),
 * so the rules below win on load order without growing the shared stylesheets.
 */

/* "There's a large blank gap above 'Which did you mean?'". The thread was a
   flex column set to grow and justify to the END, a chat-app layout from when
   earlier turns stacked above the answer. Those turns were removed (25 Aug), so
   a short answer was pushed to the bottom of a tall, empty panel. */
html body .dpd-modal-shell--support-chat .dpd-support-chat-thread {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

/* "The Support route box is clipped". The drawer hid its overflow and its body
   scrolled inside a capped height, inside a panel that already scrolls. The
   Helper uses one scroll context (the modal body); the drawer just grows. */
html body .dpd-modal-shell--support-chat .dpd-support-chat-drawer {
  overflow: visible !important;
}

html body .dpd-modal-shell--support-chat .dpd-support-chat-drawer__body {
  max-height: none !important;
  overflow: visible !important;
}

/* A row title that opens a ticket, asks a choice, or expands an answer. Same
   type as a linked row title; it only gains the affordance. */
html body .dpd-helper-card__item-button {
  background: none !important;
  border: 0 !important;
  color: inherit !important;
  cursor: pointer !important;
  display: inline !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-transform: inherit !important;
  text-underline-offset: 3px !important;
}

html body .dpd-helper-card__item-button:hover,
html body .dpd-helper-card__item-button:focus-visible {
  text-decoration-thickness: 2px !important;
}

html body .dpd-helper-card__item-button:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}

html body .dpd-helper-card__item-details > summary {
  display: list-item !important;
  list-style: disclosure-closed inside !important;
}

html body .dpd-helper-card__item-details[open] > summary {
  list-style-type: disclosure-open !important;
}

html body .dpd-helper-card__item-details > .dpd-helper-card__text {
  margin: 8px 0 0 !important;
  text-transform: none !important;
}

/* "Large blank area after the ticket list" (9 Oct, follow-up). The session was
   stretched to the full height of the panel, which left a tall empty band under
   a short answer. It is as tall as its content now; the Create Ticket row and
   the empty Support route drawer under each answer are gone (Create request and
   Contact Page live in the footer). */
html body .dpd-modal-shell--support-chat .dpd-support-chat-session {
  min-height: 0 !important;
}

/* "Big blank area on the Help tab" (9 Oct). With nothing to show -- just the
   Resume ticket banner, or an empty conversation -- the answer area still
   stretched to fill a fixed-height dialog, leaving a tall grey block above
   Create Ticket + Ask. dpd-modal.js now paints one short line there, marked
   data-dpd-support-empty; while that marker is on the active Help panel the
   answer area and the dialog size to their content, so the footer sits right
   under it. Anything else (an answer, a page card, loading, the Activity tab)
   keeps the fixed height, so the dialog does not jump while it loads. */
html body .dpd-modal-shell--support-chat .dpd-support-chat-empty {
  color: #5d6975 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  text-align: center !important;
}

@media (min-width: 641px) {
  html body .dpd-modal-shell--support-chat .dpd-modal-dialog:has([data-dpd-support-panel="answers"].is-active [data-dpd-support-empty]) {
    height: auto !important;
  }

  html body .dpd-modal-shell--support-chat .dpd-modal-dialog:has([data-dpd-support-panel="answers"].is-active [data-dpd-support-empty]) .dpd-modal-body,
  html body .dpd-modal-shell--support-chat .dpd-modal-dialog:has([data-dpd-support-panel="answers"].is-active [data-dpd-support-empty]) .dpd-modal-module--contact,
  html body .dpd-modal-shell--support-chat .dpd-modal-dialog:has([data-dpd-support-panel="answers"].is-active [data-dpd-support-empty]) .dpd-support-workspace__main {
    height: auto !important;
    min-height: 0 !important;
  }

  html body .dpd-modal-shell--support-chat [data-dpd-support-panel="answers"].is-active:has([data-dpd-support-empty]) .dpd-support-conversation-card,
  html body .dpd-modal-shell--support-chat [data-dpd-support-panel="answers"].is-active:has([data-dpd-support-empty]) .dpd-support-assistant__result {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  html body .dpd-modal-shell--support-chat [data-dpd-support-panel="answers"].is-active:has([data-dpd-support-empty]) .dpd-support-assistant__result {
    padding-bottom: 14px !important;
    padding-top: 14px !important;
  }

  html body .dpd-modal-shell--support-chat [data-dpd-support-panel="answers"].is-active:has([data-dpd-support-empty]) .dpd-support-search-card {
    margin-top: 0 !important;
  }
}