/* ============================================================
   SARGEANTS WALLAN, Chat Widget Styles
   Theme: brand navy (#1C2473, dark #434981, soft #8A96C0,
   tint #DEE3F1), matched to site.css design tokens.
   Ported from the Nationwide Shopfitting chatbot (nsa- -> sw-).
   Desktop only: hidden at <= 820px, where the sticky
   call/quote bar owns the bottom of the screen.
   ============================================================ */

.sw-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  color: #313131;
  -webkit-font-smoothing: antialiased;
}

.sw-chat-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1C2473;
  color: #FFFFFF;
  border: 2px solid #8A96C0;
  border-radius: 30px;
  padding: 10px 18px 10px 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(28, 36, 115, 0.30);
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.sw-chat-launcher:hover {
  /* stay on the brand navy when expanded: the old lighter tone plus the pale
     periwinkle ring read as a washed, semi-transparent pill over busy photos */
  background: #151B5C;
  border-color: #151B5C;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28, 36, 115, 0.45);
}

.sw-chat-launcher:active { transform: translateY(0); }

.sw-launcher-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  color: #1C2473; flex-shrink: 0; position: relative;
}
.sw-launcher-icon svg { width: 18px; height: 18px; fill: currentColor; }
.sw-launcher-pulse {
  position: absolute; top: -2px; right: -2px; width: 10px; height: 10px;
  background: #8A96C0; border: 2px solid #1C2473; border-radius: 50%;
}
.sw-launcher-text { display: flex; flex-direction: column; text-align: left; }
.sw-launcher-title {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.1; color: #FFFFFF;
}
.sw-launcher-sub { font-size: 0.72rem; color: #DEE3F1; line-height: 1.2; }

.sw-chat-box {
  position: fixed; bottom: 86px; right: 24px; width: 380px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 110px); background: #FFFFFF; border-radius: 2px;
  box-shadow: 0 16px 40px rgba(28, 36, 115, 0.22), 0 0 0 1px rgba(28, 36, 115, 0.08);
  display: flex; flex-direction: column; overflow: hidden; opacity: 0;
  transform: translateY(20px) scale(0.96); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10000;
}
.sw-chat-box.sw-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.sw-chat-header {
  background: #1C2473; color: #FFFFFF; padding: 14px 16px; display: flex;
  align-items: center; justify-content: space-between; border-bottom: 3px solid #8A96C0;
}
.sw-header-info { display: flex; align-items: center; gap: 10px; }
.sw-header-avatar {
  width: 36px; height: 36px; background: #FFFFFF; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #1C2473;
}
.sw-header-titles h4 {
  margin: 0; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 0.2px; color: #FFFFFF; line-height: 1.1;
}
.sw-header-status { font-size: 0.72rem; color: #C9CDE2; display: flex; align-items: center; gap: 5px; }
.sw-status-dot { width: 6px; height: 6px; background: #8A96C0; border-radius: 50%; display: inline-block; }
.sw-header-actions { display: flex; align-items: center; gap: 6px; }
.sw-btn-icon {
  background: transparent; border: none; color: #C9CDE2; cursor: pointer; padding: 6px;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.sw-btn-icon:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.sw-btn-back { gap: 4px; font-size: 0.78rem; font-weight: 700; line-height: 1; }

.sw-chat-body {
  flex: 1; padding: 16px; overflow-y: auto; background: #F6F6F6; display: flex;
  flex-direction: column; gap: 12px; scroll-behavior: smooth;
}
.sw-msg { display: flex; flex-direction: column; max-width: 86%; animation: swFadeIn 0.25s ease-out; }
@keyframes swFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sw-msg.sw-bot { align-self: flex-start; }
.sw-msg.sw-user { align-self: flex-end; }
.sw-msg-bubble { padding: 10px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.45; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.sw-msg.sw-bot .sw-msg-bubble { background: #DEE3F1; color: #313131; border-bottom-left-radius: 2px; border: 1px solid #C9CDE2; }
.sw-msg.sw-user .sw-msg-bubble { background: #1C2473; color: #FFFFFF; border-bottom-right-radius: 2px; }

.sw-options-container { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; animation: swFadeIn 0.25s ease-out; }
.sw-option-btn {
  background: #FFFFFF; border: 1.5px solid #E2E2E2; border-radius: 2px; padding: 10px 12px;
  font-size: 0.85rem; font-weight: 600; color: #1C2473; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.sw-option-btn:hover { border-color: #1C2473; background: #DEE3F1; color: #1C2473; transform: translateX(3px); }

.sw-call-card { background: #F6F6F6; border: 1.5px solid #1C2473; border-radius: 2px; padding: 12px 14px; margin: 6px 0; text-align: center; }
.sw-call-card h5 { margin: 0 0 4px; color: #1C2473; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 0.9rem; text-transform: uppercase; }
.sw-call-card p { margin: 0 0 10px; font-size: 0.8rem; color: #666666; }
.sw-call-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: #1C2473; color: #fff; font-weight: 700; font-size: 0.92rem; padding: 10px 14px;
  border-radius: 2px; text-decoration: none; transition: background 0.15s ease;
}
.sw-call-btn:hover { background: #434981; color: #fff; }

.sw-form-card { background: #FFFFFF; border: 1px solid #E2E2E2; border-radius: 2px; padding: 14px; }
.sw-form-card form { display: flex; flex-direction: column; gap: 10px; }
.sw-input-field { display: flex; flex-direction: column; gap: 4px; }
.sw-input-field label { font-size: 0.75rem; font-weight: 600; color: #666666; text-transform: uppercase; letter-spacing: 0.5px; }
.sw-input-field input, .sw-input-field select, .sw-input-field textarea {
  width: 100%; border: 1.5px solid #E2E2E2; border-radius: 2px; padding: 8px 10px;
  font-size: 0.86rem; font-family: inherit; color: #313131; background: #FFFFFF;
  transition: border-color 0.15s ease; box-sizing: border-box;
}
.sw-input-field input:focus, .sw-input-field select:focus, .sw-input-field textarea:focus { outline: none; border-color: #1C2473; }
.sw-submit-btn {
  background: #1C2473; color: #FFFFFF; border: none; border-radius: 2px; padding: 10px 14px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; margin-top: 4px;
}
.sw-submit-btn:hover { background: #434981; color: #fff; }
.sw-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.sw-success-card { background: #EDEFF7; border: 1.5px solid #1C2473; border-radius: 2px; padding: 14px; text-align: center; }
.sw-success-icon {
  width: 38px; height: 38px; background: #1C2473; color: #FFFFFF; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.sw-success-card h5 { margin: 0 0 4px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 0.95rem; color: #1C2473; }
.sw-success-card p { margin: 0; font-size: 0.82rem; color: #434981; line-height: 1.4; }

.sw-chat-footer { padding: 8px 14px; background: #FFFFFF; border-top: 1px solid #E2E2E2; text-align: center; font-size: 0.72rem; color: #666666; }
.sw-chat-footer a { color: #1C2473; text-decoration: none; font-weight: 600; }

/* Desktop (above the mobile breakpoint): compact circular bubble by default,
   expands to the full launcher on hover/focus so it does not cover content. */
@media (min-width: 821px) {
  .sw-chat-launcher{ width:58px; height:58px; padding:0; border-radius:50%; justify-content:center; gap:0; }
  .sw-chat-launcher .sw-launcher-text{ display:none; }
  .sw-launcher-icon{ width:38px; height:38px; }
  .sw-chat-launcher:hover, .sw-chat-launcher:focus-visible{ width:auto; padding:10px 18px 10px 14px; border-radius:30px; justify-content:flex-start; gap:10px; }
  .sw-chat-launcher:hover .sw-launcher-text, .sw-chat-launcher:focus-visible .sw-launcher-text{ display:flex; }
}

/* ---------------------------------------------------------------------------
   Desktop only. The sticky mobile call/quote bar owns the bottom of the screen
   at <= 820px, so the chat widget is hidden there entirely.
   --------------------------------------------------------------------------- */
@media (max-width: 820px){
  .sw-chat-widget{ display:none !important; }
}