/* ============================================================================
   LiveAgents Webchat Widget — Skin
   ----------------------------------------------------------------------------
   This file is intentionally self-contained so it can be themed per-site.
   To re-skin: override the CSS variables in the `.la-widget` block below.
   All colours/sizing are driven by these variables.
   ========================================================================== */

.la-widget {
  /* ---- Brand / theme tokens (GDF — Garage Doors Fixed) ---- */
  --la-primary:        #7990a5;   /* accent: buttons, customer bubbles, launcher */
  --la-primary-hover:  #67808f;
  --la-on-primary:     #ffffff;
  --la-header-bg:      #212529;   /* panel header background (brand secondary) */
  --la-header-accent:  #7990a5;   /* thin accent line under the header */
  --la-on-header:      #ffffff;

  --la-panel-bg:       #ffffff;
  --la-log-bg:         #f5f6f8;
  --la-agent-bg:       #ffffff;
  --la-agent-text:     #1f2937;
  --la-agent-border:   #e5e7eb;
  --la-customer-bg:    var(--la-primary);
  --la-customer-text:  var(--la-on-primary);
  --la-meta:           #9aa3ad;
  --la-status-online:  #22c55e;

  /* ---- Layout tokens ---- */
  --la-offset-right:   20px;
  --la-offset-bottom:  20px;      /* nudge up if it clashes with a sticky bar */
  --la-panel-width:    360px;
  --la-panel-height:   520px;
  --la-radius:         16px;
  --la-z:              2147483000;
  --la-font:           var(--font-primary, "D-DIN", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* ---------------------------------------------------------------------------
   Launcher bubble (a floating chat bubble, bottom-right)
   ----------------------------------------------------------------------------
   Hidden by default because this site already opens the chat from the header
   button, the sticky action banner and the contact page (all call
   window.toggleLiveChat()). To show the floating bubble instead, just delete
   this `display:none` rule (or add the class `la-show-launcher` to the widget).
   ------------------------------------------------------------------------- */
.la-launcher { display: none; }
.la-widget.la-show-launcher .la-launcher { display: inline-flex; }

.la-launcher {
  position: fixed;
  right: var(--la-offset-right);
  bottom: var(--la-offset-bottom);
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 22px 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--la-primary);
  color: var(--la-on-primary);
  font-family: var(--la-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  z-index: var(--la-z);
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.la-launcher:hover {
  background: var(--la-primary-hover);
  transform: translateY(-2px);
}
.la-launcher-icon { flex: 0 0 auto; }

/* Hide the launcher while the panel is open */
.la-widget[data-open="true"] .la-launcher {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

/* ---------------------------------------------------------------------------
   Panel
   ------------------------------------------------------------------------- */
.la-panel {
  position: fixed;
  right: var(--la-offset-right);
  bottom: var(--la-offset-bottom);
  width: var(--la-panel-width);
  max-width: calc(100vw - 32px);
  height: var(--la-panel-height);
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  background: var(--la-panel-bg);
  border-radius: var(--la-radius);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  font-family: var(--la-font);
  z-index: var(--la-z);

  /* hidden by default; animated in when open */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.la-widget[data-open="true"] .la-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ---- Header ---- */
.la-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--la-header-bg);
  border-bottom: 3px solid var(--la-header-accent);
  color: var(--la-on-header);
}
.la-head-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.la-head-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  flex: 0 0 auto;
}
.la-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.la-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.la-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.3;
}
.la-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--la-status-online);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  flex: 0 0 auto;
}

.la-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--la-on-header);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s ease;
}
.la-icon-btn:hover { background: rgba(255, 255, 255, 0.24); }

/* ---- Message log ---- */
.la-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px;
  background: var(--la-log-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

.la-msg {
  position: relative;
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.42;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  margin: 4px 0;
}
.la-msg .la-meta {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--la-meta);
}

.la-msg.la-customer {
  margin-left: auto;
  background: var(--la-customer-bg);
  color: var(--la-customer-text);
  border-bottom-right-radius: 4px;
}
.la-msg.la-customer .la-meta { color: rgba(255, 255, 255, 0.75); }

.la-msg.la-agent {
  margin-right: auto;
  background: var(--la-agent-bg);
  color: var(--la-agent-text);
  border: 1px solid var(--la-agent-border);
  border-bottom-left-radius: 4px;
}

/* Links inside agent messages */
.la-msg a {
  color: inherit;
  text-decoration: underline;
}
.la-msg.la-agent a { color: var(--la-primary); }

/* Empty / connecting hint */
.la-hint {
  margin: auto;
  padding: 8px 14px;
  color: var(--la-meta);
  font-size: 13px;
  text-align: center;
}

/* ---- Composer ---- */
.la-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--la-agent-border);
  background: var(--la-panel-bg);
}
.la-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--la-agent-border);
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  color: #1f2937;
  outline: none;
  background: #fff;
  transition: border-color 0.15s ease;
}
.la-input:focus { border-color: var(--la-primary); }

.la-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--la-primary);
  color: var(--la-on-primary);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.la-send:hover:not(:disabled) { background: var(--la-primary-hover); }
.la-send:active:not(:disabled) { transform: scale(0.92); }
.la-send:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- Typing indicator ---- */
.la-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.la-typing .la-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--la-primary);
  opacity: 0.5;
  animation: la-bounce 1.2s infinite ease-in-out;
}
.la-typing .la-dot:nth-child(2) { animation-delay: 0.15s; }
.la-typing .la-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes la-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .la-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .la-launcher-label { display: none; }
  .la-launcher { padding: 0; width: 56px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .la-panel, .la-launcher, .la-send { transition: none; }
  .la-typing .la-dot { animation: none; }
}