/* LiveChat Module — Shared Widget CSS
 * Loaded via ClientAreaHeadOutput on all client area pages.
 *
 * The widgets carry inline styles for their own look, but inline styles only
 * cover the properties they declare. The surrounding WHMCS client theme
 * (Bootstrap + theme.css) still cascades onto the widget's <div>, <label>,
 * <textarea>, <button> and <p> elements — overriding box-sizing, line-height,
 * margins, float/column layout, and form-control sizing. That bleed is what
 * collapses the textarea and stacks the pre-chat fields sideways.
 *
 * The rules below isolate everything inside the widget boxes from the host
 * theme. They are intentionally scoped to #lcSupBox / #lcSBox so they never
 * affect the rest of the client area.
 */

/* ── Reset host-theme bleed inside the widget boxes ───────────────────────── */
#lcSupBox, #lcSupBox *,
#lcSBox,  #lcSBox * {
  box-sizing: border-box !important;
  float: none !important;
  max-width: none !important;
  min-width: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}

/* Block-level containers must stack, not sit in a theme grid/row */
#lcSupBox > div, #lcSupBox form,
#lcSBox  > div, #lcSBox  form {
  display: block;
  width: 100%;
  margin: 0;
  clear: both;
}

/* Labels: the theme often makes these inline-block with fixed widths.
   Force them full-width block elements so fields sit beneath their label. */
#lcSupBox label,
#lcSBox  label {
  display: block !important;
  width: 100% !important;
  float: none !important;
  margin: 0 0 3px 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Form fields: the theme's .form-control / input / textarea sizing fights the
   inline width:100%. Pin them to full width and a sane height. */
#lcSupBox input, #lcSupBox textarea,
#lcSBox  input, #lcSBox  textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}

#lcSupBox textarea,
#lcSBox  textarea {
  min-height: 64px !important;   /* keep the multi-line box from collapsing */
  resize: none !important;
}

/* The message-input textarea is single-row and must stay short + flexible */
#lcSupInput textarea, #lcSInput textarea {
  min-height: 36px !important;
  height: 36px !important;
}

/* Buttons: stop the theme adding its own block margins / widths */
#lcSupBox button,
#lcSBox  button {
  font-family: inherit !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  width: auto;
}
/* Full-width primary action buttons keep their inline width:100% */
#lcSupStart, #lcSupNewChat,
#lcSStart,  #lcSNewChat {
  width: 100% !important;
  display: block !important;
}

#lcSupBox p,
#lcSBox  p {
  margin: 0 0 8px 0 !important;
}

/* The pre-chat panels are shown by JS via display:flex. Without a direction
   they become a horizontal row and squash the label + textarea side by side
   (the broken layout in the client area). Force them to stack vertically. */
#lcSupPrechat, #lcSPrechat {
  flex-direction: column !important;
}

/* Keep the message-input row horizontal (textarea + send button) */
#lcSupInput > div:first-child,
#lcSInput  > div:first-child {
  display: flex !important;
}
#lcSupInput > div:first-child textarea,
#lcSInput  > div:first-child textarea {
  flex: 1 1 auto !important;
}
#lcSupInput > div:first-child button,
#lcSInput  > div:first-child button {
  flex: 0 0 auto !important;
}

/* ── Open animation ───────────────────────────────────────────────────────── */
#lcSBox,
#lcSupBox {
  animation: lcFadeUp .18s ease-out;
}

@keyframes lcFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Launcher hover */
#lcSLauncher:hover,
#lcSupLauncher:hover {
  transform: scale(1.08) !important;
}

/* Responsive on very small screens */
@media (max-width: 400px) {
  #lcSBox,
  #lcSupBox {
    width: calc(100vw - 20px) !important;
    right: 10px !important;
    left: 10px !important;
  }
}