/* =====================================================================
   IIR LIVEAGENT CHAT  —  "Live Chat"
   Loaded via liveAgent_chat.jsp / liveAgent_chat_analytics.jsp.

   Two buttons, never shown at the same time:

   1. ONLINE  — injected by LiveAgent's track.js (createButton). Its markup
      (.squareChatButton*) is generated by LiveAgent and can't be edited
      here, so it's RESTYLED via the overrides in the ONLINE section below.
      The Font Awesome icon is injected with a ::before pseudo-element
      because we can't add an <i> tag to LiveAgent's output.

   2. OFFLINE — the fallback built in createOfflineButton(). Fully owned
      here as .iir-chat-btn.

   Both render as the same: orange accent bar + "Live Chat" text
   + teal icon tile.
   ===================================================================== */

/* Shared palette */
:root {
  --iir-chat-bg-a: #0c2740;
  --iir-chat-bg-b: #061a2e;
  --iir-chat-orange: var(--logo-orange, #f88d2a);
  /* message-captions icon (white stroke), used as a background image */
  --iir-chat-svg: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f88d2a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"/%3E%3Cline x1="7" y1="9" x2="17" y2="9"/%3E%3Cline x1="7" y1="12.5" x2="13" y2="12.5"/%3E%3C/svg%3E');
}

/* =====================================================================
   ONLINE BUTTON  (restyle LiveAgent's generated .squareChatButton markup)
   Class names come from LiveAgent — do not rename. !important is required
   to win over LiveAgent's inline styles.
   ===================================================================== */

/* Pill container */
.squareChatButton {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: max-content !important;
  height: 3.5rem !important;
  border-top: 1px solid #0a3358;
  border-right: 1px solid #0a3358;
  border-bottom: 1px solid #0a3358;
  border-left: 2px solid var(--iir-chat-orange, #f88d2a);
  border-radius: 0.55rem !important;
  background: #002034 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease !important;
}

/* Match offline hover: lift + colored glow */
.squareChatButton:hover {
  box-shadow: -8px 15px 26px rgb(25, 79, 144) !important;
  transform: translateY(-1px) !important;
}

/* Left text panel */
.squareChatButtonLeft {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  height: auto !important;
  float: none !important;
}

/* "Live Chat" text — COLLAPSED by default (like offline) */
.squareChatButtonText {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0.85rem 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition:
    max-width 0.35s ease,
    padding 0.35s ease,
    opacity 0.25s ease !important;
}

/* Slide open on hover */
.squareChatButton:hover .squareChatButtonText {
  max-width: 16rem !important;
  padding: 0.85rem 1.1rem !important;
  opacity: 1 !important;
}

/* Right icon tile */
.squareChatButton > .squareChatButtonRight,
.squareChatButton:hover .squareChatButtonRight {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: auto !important;
  float: none !important;
  background: linear-gradient(180deg, #0a4a6e 0%, #001828 50%, #0a4a6e 100%) !important;
}

/* Replace LiveAgent's webp icon with an inline message-captions SVG.
   NOTE: stroke changed to orange (%23f88d2a) to match the offline icon. */
.squareChatButtonIcon,
.squareChatButton:hover > .squareChatButtonRight > .squareChatButtonIcon {
  width: 100% !important;
  height: 100% !important;
  background-color: transparent !important;
  background-image: var(--iir-chat-svg) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 26px 26px !important;
  position: static !important;
}
html
  body
  #main_container
  ~ div
  .squareChatButton:hover
  .squareChatButtonRight
  .squareChatButtonIcon {
  background-image: var(--iir-chat-svg) !important;
}
/* LiveAgent's little arrow — not part of this design */
.squareChatButtonArrow {
  display: none !important;
}

/* =====================================================================
   OFFLINE BUTTON  ("Contact Us" — fully owned here)
   ===================================================================== */
.iir-chat-btn {
  position: fixed;
  right: 11px;
  bottom: 12px;
  z-index: 10000;
  width: auto !important;
  max-width: max-content;
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  height: 3.5rem;
  border-top: 1px solid #0a3358;
  border-right: 1px solid #0a3358;
  border-bottom: 1px solid #0a3358;
  border-left: 2px solid var(--iir-chat-orange, #f88d2a);
  border-radius: 0.55rem;
  background: #002034;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.iir-chat-btn:hover,
.iir-chat-btn:focus-visible {
  box-shadow: -8px 15px 26px rgb(25, 79, 144);
  transform: translateY(-1px);
  outline: none;
}

.iir-chat-btn__label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 0;
  padding: 0.85rem 0;
  overflow: hidden;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.35s ease,
    padding 0.35s ease,
    opacity 0.25s ease;
}

/* Slide open on hover */
.iir-chat-btn:hover .iir-chat-btn__label,
.iir-chat-btn:focus-visible .iir-chat-btn__label,
.iir-chat-btn:focus-within .iir-chat-btn__label {
  max-width: 16rem;
  padding: 0.85rem 1.1rem;
  opacity: 1;
}

.iir-chat-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  align-self: stretch;
  background: linear-gradient(180deg, #0a4a6e 0%, #001828 50%, #0a4a6e 100%);
  color: var(--iir-chat-orange, #f88d2a);
  font-size: 1.35rem;
}

/* Entrance animation (offline button appears dynamically) */
.iir-chat-btn--animate {
  animation: iir-chat-btn-in 1s both;
}

iframe[src*='industrialinfo.ladesk.com'] {
  height: 550px !important;
}

@keyframes iir-chat-btn-in {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(-30px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* =====================================================================
   RESPONSIVE + MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .iir-chat-btn--animate {
    animation: none;
  }
  .iir-chat-btn:hover,
  .iir-chat-btn:focus-visible {
    transform: none;
  }
}

/* Small screens: collapse both buttons to icon-only to save space */
@media (max-width: 575.98px) {
  .iir-chat-btn__label,
  .squareChatButtonText {
    display: none !important;
  }
}

@media print {
  .iir-chat-btn,
  .squareChatButton {
    display: none !important;
  }
}