/*
 * Support ticket widget: launcher pill + dialog panel, bottom-left.
 *
 * Bottom-LEFT is deliberate and the only free corner: Tidio's chat bubble and
 * accessiBe's trigger both sit bottom-right, and BreezeTask's bar
 * (.bt-pl-outer-container) spans the bottom edge below 768px -- which is what
 * --support-ticket-offset clears.
 */

.support-ticket {
  --support-ticket-blue: #2768ac;
  --support-ticket-blue-dark: #1d5288;
  --support-ticket-head: #38a1da;
  --support-ticket-offset: 20px;
  --support-ticket-gutter: 20px;

  position: fixed;
  bottom: var(--support-ticket-offset);
  left: var(--support-ticket-gutter);
  /* Under .top-header (9999) so the fixed header always wins, above content. */
  z-index: 9000;
  font-family: Roboto-Regular, Roboto, Arial, sans-serif;
}

/* page-inner.css and page-home.css both carry bare `h1/h2/p { text-align:
   center }` element rules, so every heading and paragraph in this panel would
   otherwise be centred. A class beats an element selector, so the module
   states the alignment of its own text blocks. */
.support-ticket__title,
.support-ticket__intro,
.support-ticket__field,
.support-ticket__status {
  text-align: left;
}

/* --- launcher --- */

.support-ticket__launcher {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 22px;
  background: var(--support-ticket-blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;

  &:hover,
  &:focus-visible {
    background: var(--support-ticket-blue-dark);
    color: #fff;
    text-decoration: none;
  }

  &:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }

  &:active {
    transform: translateY(1px);
  }
}

.support-ticket__icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Server-side suppression, for when another widget owns the trigger and drives
   the panel through window.supportTicket. The panel itself stays usable. */
.support-ticket[data-launcher="hidden"] .support-ticket__launcher {
  display: none;
}

/* Nothing to anchor to once the launcher is gone and the panel is closed, so
   the wrapper must not sit there as an invisible click target. */
.support-ticket[data-launcher="hidden"]:not(.is-open) {
  pointer-events: none;
}

.support-ticket.is-open .support-ticket__launcher {
  visibility: hidden;
}

/* --- panel --- */

.support-ticket__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(360px, calc(100vw - (2 * var(--support-ticket-gutter))));
  max-height: min(560px, calc(100vh - (2 * var(--support-ticket-offset))));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 28px rgb(0 0 0 / 30%);
  animation: support-ticket-in 0.18s ease-out;

  &[hidden] {
    display: none;
  }
}

@keyframes support-ticket-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.support-ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--support-ticket-head);
  color: #fff;
}

.support-ticket__title {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.support-ticket__close {
  display: flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;

  & svg {
    width: 18px;
    height: 18px;
  }

  &:hover,
  &:focus-visible {
    background: rgb(255 255 255 / 20%);
  }

  &:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
  }
}

.support-ticket__intro {
  margin: 0;
  padding: 14px 16px 0;
  color: #5c6670;
  font-size: 13px;
  line-height: 1.45;
}

/* --- form --- */

.support-ticket__form {
  padding: 14px 16px 18px;
}

.support-ticket__field {
  display: flex;
  flex-direction: column;
  margin: 0 0 12px;

  & label {
    margin-bottom: 4px;
    color: #33383d;
    font-size: 13px;
    font-weight: 500;
  }

  & input,
  & textarea {
    width: 100%;
    /* common.css carries a bare `input[type="text"]` rule setting height: 40px,
       margin-bottom: 20px and max-width: 400px. It matches the name field and
       nothing else here -- email is type="email", the message is a textarea --
       which left a 20px wider gap under Name and made it 1px shorter. State all
       three, so the fields cannot drift apart again. The rest of that rule
       (border, background, colour, padding) is already beaten on source order,
       but only because this file loads after common.css. */
    height: auto;
    max-width: none;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #c8ced4;
    border-radius: 4px;
    background: #fff;
    color: #33383d;
    font: inherit;
    font-size: 14px;
  }

  & textarea {
    min-height: 92px;
    max-height: 220px;
    resize: vertical;
  }

  & input:focus,
  & textarea:focus {
    border-color: var(--support-ticket-head);
    outline: 2px solid rgb(56 161 218 / 35%);
    outline-offset: 0;
  }

  /* Set by the script after a failed validation pass, not by :invalid -- that
     would go red while someone is still typing their first character. */
  & .is-invalid {
    border-color: #c0392b;
  }
}

.support-ticket__count {
  margin-top: 4px;
  color: #8a939b;
  font-size: 11px;
  text-align: right;
}

.support-ticket__submit {
  width: 100%;
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: var(--support-ticket-blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.15s ease;

  &:hover:not(:disabled),
  &:focus-visible:not(:disabled) {
    background: var(--support-ticket-blue-dark);
    color: #fff;
    text-decoration: none;
  }

  &:disabled {
    opacity: 0.65;
    cursor: default;
  }
}

.support-ticket__status {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;

  &:empty {
    display: none;
  }

  &.is-error {
    color: #c0392b;
  }

  &.is-success {
    color: #1d7a4c;
  }
}

/* --- phone: full-width bottom sheet, clear of the BreezeTask bar --- */

@media (max-width: 767px) {
  .support-ticket {
    /* .bt-pl-outer-container is bottom:0 and ~48px tall on this breakpoint. */
    --support-ticket-offset: 60px;
    --support-ticket-gutter: 12px;

    right: var(--support-ticket-gutter);
  }

  .support-ticket__panel {
    width: 100%;
    max-height: calc(100vh - var(--support-ticket-offset) - 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-ticket__launcher,
  .support-ticket__submit {
    transition: none;
  }

  .support-ticket__panel {
    animation: none;
  }
}