/* ============================================================
   AI Chat Widget — Shared Styles
   Used by: Ask-a-Lawyer, DIHAC, Homepage popup
   ============================================================ */

:root {
  --slai-blue: #3470AD;
  --slai-navy: #002954;
  --slai-green: #33BF0A;
  --slai-ink: #0c1420;
  --slai-line: rgba(0, 41, 84, 0.12);
  --slai-bg: #F7F9FB;
}

/* ---- Section / container ---- */
.slai-section { padding: 64px 0; position: relative; }
.slai-section::before { content: ''; position: absolute; top: 0; right: calc(50% - 560px); width: 500px; height: 500px; background: url(/i/gfx/lines1.svg) no-repeat center; background-size: contain; pointer-events: none; z-index: 0; }
.slai-section .slai-section-inner { max-width: 800px; margin: 0 auto; background: var(--slai-blue); border-radius: 20px; padding: 48px 20px; position: relative; z-index: 1; }
.slai-section--dihac { padding: 48px 24px; }
.slai-section--dihac .slai-section-inner { max-width: 800px; }
.slai-section--lite { padding: 48px 24px; max-width: 100%;}

/* ---- Heading area ---- */
.slai-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: #fff; border: 1px solid var(--slai-line);
  border-radius: 20px;
  font: 600 12px/1 'Open Sans', sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--slai-ink); margin-bottom: 16px;
}
.slai-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slai-green); animation: slai-blink 1.8s ease-in-out infinite; }
@keyframes slai-blink { 0%,100% { box-shadow: 0 0 0 0 rgba(51,191,10,0.6); } 50% { box-shadow: 0 0 0 6px rgba(51,191,10,0); } }
.slai-h1 { font-family: 'FreightBigProBook-Regular', Georgia, serif; font-size: 44px; line-height: 52px; font-weight: 400; margin: 0 0 8px; color: #fff; }
.slai-sub { font: 400 17px/26px 'Open Sans', sans-serif; color: rgba(255,255,255,0.85); margin: 0 0 24px; max-width: 640px; }

/* ---- Full-size widget container (DIHAC, homepage popup) ---- */
.slai-widget {
  position: relative; background: #fff; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 41, 84, 0.18), 0 4px 16px rgba(0, 41, 84, 0.06);
  overflow: hidden; display: flex; flex-direction: column; margin: 0 auto;
  font-family: 'Open Sans', sans-serif; color: var(--slai-ink);
}
.slai-widget--ask  { width: 100%; max-width: 980px; height: 600px; }
.slai-widget--dihc { width: 100%; max-width: 760px; height: 680px; }
.slai-widget--grid { width: 100%; max-width: 1100px; }

/* ---- Compact "lite" widget (Ask-a-Lawyer inline) ---- */
.slai-lite-shell {
  background: #fff; border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 41, 84, 0.10), 0 2px 8px rgba(0, 41, 84, 0.06);
  border: 1px solid var(--slai-line);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  position: relative;
}
.slai-lite-shell-wrap {
  position: relative; max-width: 760px; margin: 0 auto; margin-top: 64px;
}
.slai-lite-avatar {
  position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 100px; z-index: 10;
}
.slai-lite-shell.expanded {
  box-shadow: 0 24px 64px rgba(0, 41, 84, 0.18), 0 4px 16px rgba(0, 41, 84, 0.06);
}
.slai-lite-intro {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--slai-line);
  background: linear-gradient(180deg, #ffffff 0%, #fafcfe 100%);
}
.slai-lite-intro .av {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #002954 0%, #3470AD 100%);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.slai-lite-intro .av img { width: 100px; height: 100px; }
.slai-lite-intro-text strong {
  display: block; font-size: 16px; font-weight: 700; color: var(--slai-ink); line-height: 20px;
}
.slai-lite-intro-text span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: #6b7c8e; line-height: 18px;
}
.slai-lite-intro-text span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--slai-green); animation: slai-blink 1.8s ease-in-out infinite; }
.slai-book-btn {
  margin-left: auto; padding: 10px 20px;
  background: var(--slai-green); color: #fff; border: none; border-radius: 20px;
  font: 600 14px/1 'Open Sans', sans-serif; text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0;
}
.slai-book-btn:hover { background: #2ba008; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(51,191,10,0.25); }

.slai-lite-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 14px 20px;
}
.slai-lite-input {
  flex: 1; padding: 12px 0;
  border: none; background: transparent;
  font: 16px 'Open Sans', sans-serif; outline: none; color: #000;
}
.slai-lite-input::placeholder { color: #000; }

.slai-lite-chat {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--slai-bg);
  background-image: radial-gradient(circle at 100% 0%, rgba(52,112,173,0.05) 0%, transparent 50%), radial-gradient(circle at 0% 100%, rgba(51,191,10,0.04) 0%, transparent 50%);
}
.slai-lite-shell.expanded .slai-lite-chat { max-height: 440px; }
.slai-lite-shell.calendly-inline .slai-lite-chat { max-height: 80vh; overflow-y: auto; scroll-behavior: smooth; }
.slai-lite-chat-inner {
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  height: 440px; overflow-y: auto; scroll-behavior: smooth;
}
.slai-lite-shell.calendly-inline .slai-lite-chat-inner { height: auto; overflow-y: visible; }

/* ---- Chat header (full-size widget) ---- */
.slai-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, var(--slai-navy) 0%, var(--slai-blue) 100%); color: #fff; }
.slai-header-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slai-header-text strong { display: block; font-size: 15px; font-weight: 700; line-height: 20px; }
.slai-header-text span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.85; }
.slai-header-text span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--slai-green); }
.slai-header-spacer { flex: 1; }
.slai-header-step { display: flex; gap: 6px; align-items: center; }
.slai-header-step .seg { width: 28px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); transition: background 0.3s ease; }
.slai-header-step .seg.done { background: var(--slai-green); }
.slai-header-step .seg.active { background: #fff; }

/* ---- Messages area (shared by all widgets) ---- */
.slai-messages {
  flex: 1; overflow-y: auto; padding: 24px 20px; background: var(--slai-bg);
  background-image: radial-gradient(circle at 100% 0%, rgba(52,112,173,0.05) 0%, transparent 50%), radial-gradient(circle at 0% 100%, rgba(51,191,10,0.04) 0%, transparent 50%);
  display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth;
}
.slai-msg { display: flex; gap: 10px; max-width: 88%; animation: slai-fade-in 0.3s ease; }
.slai-msg-bot { align-self: flex-start; }
.slai-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.slai-msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--slai-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slai-msg-user .slai-msg-avatar { background: var(--slai-blue); border-color: var(--slai-blue); color: #fff; }
.slai-bubble { padding: 12px 16px; border-radius: 14px; font-size: 16px; line-height: 24px; color: #000; background: #fff; border: 1px solid var(--slai-line); box-shadow: 0 1px 2px rgba(0,41,84,0.04); word-wrap: break-word; max-width: 100%; }
.slai-msg-user .slai-bubble { background: var(--slai-blue); color: #fff; border-color: var(--slai-blue); }
.slai-bubble strong { font-weight: 700; }
.slai-bubble a { color: inherit; text-decoration: underline; }

/* ---- Pills / source links ---- */
.slai-pills-label { margin-left: 42px; margin-top: 8px; font: 600 11px/1 'Open Sans', sans-serif; letter-spacing: 0.5px; text-transform: uppercase; color: #8898aa; }
.slai-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-left: 42px; margin-top: 4px; animation: slai-fade-in 0.3s ease; max-width: calc(100% - 42px); }
.slai-pills--cat { gap: 10px; }
.slai-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border: 1px solid var(--slai-line); border-radius: 24px; font: 500 13px 'Open Sans', sans-serif; color: var(--slai-ink); cursor: pointer; transition: all 0.15s ease; text-align: left; text-decoration: none; }
.slai-pill:hover { border-color: var(--slai-blue); background: var(--slai-blue); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52,112,173,0.12); }
.slai-pill .arrow { color: var(--slai-blue); flex-shrink: 0; }
.slai-pill--selected { border-color: var(--slai-blue); background: var(--slai-blue); color: #fff; cursor: default; }
.slai-pill--dimmed { opacity: 0.4; cursor: default; pointer-events: none; }
.slai-pill--cat { flex-direction: column; align-items: flex-start; padding: 16px; border-radius: 12px; min-width: 200px; flex: 1 1 calc(33.333% - 10px); box-shadow: 0 1px 2px rgba(0,41,84,0.04); }
.slai-pill--cat strong { font-size: 14px; font-weight: 700; color: var(--slai-ink); margin-bottom: 2px; }
.slai-pill--cat span { font-size: 12px; color: #6b7c8e; font-weight: 400; }

/* ---- Typing indicator ---- */
.slai-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.slai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--slai-blue); opacity: 0.4; animation: slai-bounce 1.2s ease-in-out infinite; }
.slai-typing span:nth-child(2) { animation-delay: 0.15s; }
.slai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes slai-bounce { 0%,80%,100% { opacity: 0.4; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes slai-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---- CTA button ---- */
.slai-cta-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; margin-left: 42px; padding: 10px 18px; background: #fff; color: var(--slai-blue) !important; border: 1.5px solid var(--slai-blue); border-radius: 24px; font: 600 13px 'Open Sans', sans-serif; text-decoration: none !important; cursor: pointer; transition: all 0.15s ease; }
.slai-cta-btn:hover { background: var(--slai-blue); color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52,112,173,0.2); }

/* ---- Input area (full-size widget) ---- */
.slai-input-area { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border-top: 1px solid var(--slai-line); }
.slai-input { flex: 1; padding: 12px 16px; background: var(--slai-bg); border: 1px solid var(--slai-line); border-radius: 24px; font: 14px 'Open Sans', sans-serif; outline: none; transition: border-color 0.15s ease, background 0.15s ease; }
.slai-input:focus { border-color: var(--slai-blue); background: #fff; }
.slai-send { width: 44px; height: 44px; border-radius: 50%; background: var(--slai-blue); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease, transform 0.15s ease; }
.slai-send:hover:not(:disabled) { background: var(--slai-navy); transform: scale(1.05); }

/* ---- Disclaimer ---- */
.slai-disclaimer {
  text-align: center; font-size: 14px; line-height: 20px; color: #000; padding: 8px 20px;
  border-top: 1px solid var(--slai-line); background: #fff;
  font-family: 'Open Sans', sans-serif;
}
.slai-footnote { text-align: center; font-size: 12px; color: #6b7c8e; margin-top: 12px; font-family: 'Open Sans', sans-serif; }

/* ---- Calendly inline embed ---- */
.slai-calendly-inline {
  width: 100%; overflow: hidden;
  animation: slai-fade-in 0.3s ease;
}
.slai-calendly-inline .calendly-inline-widget { width: 100%; min-width: unset; margin: 0; padding: 0; }
.slai-calendly-inline iframe { margin: 0 !important; }
.slai-intake-exit { margin-left: 42px; margin-top: 6px; }
.slai-exit-btn {
  background: none; border: none; color: #8898aa;
  font: 400 12px 'Open Sans', sans-serif; cursor: pointer;
  padding: 4px 0; text-decoration: underline; transition: color 0.15s ease;
}
.slai-exit-btn:hover { color: var(--slai-blue); }

/* ---- Contact form (inline) ---- */
.slai-contact-form-wrap {
  margin-left: 42px; margin-top: 8px; max-width: calc(100% - 42px);
  animation: slai-fade-in 0.3s ease;
}
.slai-contact-form-wrap form {
  background: #fff; border: 1px solid var(--slai-line); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.slai-form-row { display: flex; gap: 12px; }
.slai-form-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.slai-form-label {
  font: 600 11px/1 'Open Sans', sans-serif; letter-spacing: 0.3px;
  text-transform: uppercase; color: #6b7c8e;
}
.slai-form-field input, .slai-form-field textarea {
  padding: 10px 12px; border: 1px solid var(--slai-line); border-radius: 8px;
  font: 14px 'Open Sans', sans-serif; color: var(--slai-ink); outline: none;
  transition: border-color 0.15s ease; background: #fff;
}
.slai-form-field input:focus, .slai-form-field textarea:focus { border-color: var(--slai-blue); }
.slai-field-error input, .slai-field-error textarea { border-color: #e53e3e; }
.slai-field-error .slai-form-label { color: #e53e3e; }
.slai-form-title {
  font: 700 15px/1.3 'Open Sans', sans-serif; color: var(--slai-ink); margin: 0;
}
.slai-form-subtitle {
  font: 400 13px/1.4 'Open Sans', sans-serif; color: #4a5568; margin: 0;
}
.slai-form-subtitle a { color: var(--slai-blue); font-weight: 700; text-decoration: none; }
.slai-form-subtitle a:hover { text-decoration: underline; }
.slai-form-checkbox {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
}
.slai-form-checkbox input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0; accent-color: var(--slai-blue);
}
.slai-form-checkbox span {
  font: 400 12px/1.5 'Open Sans', sans-serif; color: #6b7c8e;
}
.slai-form-errmsg {
  font: 400 11px/1.3 'Open Sans', sans-serif; color: #e53e3e;
  display: none; margin-top: 2px;
}
.slai-field-error .slai-form-errmsg { display: block; }
.slai-form-submit {
  padding: 10px 20px; background: var(--slai-blue); color: #fff; border: none;
  border-radius: 24px; font: 600 13px 'Open Sans', sans-serif;
  cursor: pointer; transition: all 0.15s ease; align-self: flex-start;
}
.slai-form-submit:hover:not(:disabled) { background: var(--slai-navy); transform: translateY(-1px); }
.slai-form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.slai-form-field select {
  padding: 10px 12px; border: 1px solid var(--slai-line); border-radius: 8px;
  font: 14px 'Open Sans', sans-serif; color: var(--slai-ink); outline: none;
  transition: border-color 0.15s ease; background: #fff; width: 100%;
}
.slai-form-field select:focus { border-color: var(--slai-blue); }
.slai-field-error select { border-color: #e53e3e; }

/* ---- Full-width success message ---- */
.slai-success-full {
  width: 100%; padding: 16px; background: #fff; border: 1px solid var(--slai-line);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(0,41,84,0.04);
  font-size: 14px; line-height: 22px; color: var(--slai-ink);
  animation: slai-fade-in 0.3s ease;
}

/* ---- Guide offer ---- */
.slai-guide-offer-wrap {
  margin-top: 16px; max-width: 100%;
  animation: slai-fade-in 0.3s ease;
}
.slai-guide-offer {
  background: #fff; border: 1px solid var(--slai-line); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.slai-guide-offer .slai-form-title { color: var(--slai-blue); }

/* ---- Search-first variant (variation 2) ---- */
.slai-search-card {
  background: #fff; border-radius: 16px; padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(0, 41, 84, 0.18), 0 4px 16px rgba(0, 41, 84, 0.06);
  display: flex; flex-direction: column; gap: 28px;
}
.slai-search-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 22px;
  background: var(--slai-bg);
  border: 2px solid var(--slai-line); border-radius: 36px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.slai-search-row:focus-within { border-color: var(--slai-blue); background: #fff; }
.slai-search-row svg { flex-shrink: 0; color: #6b7c8e; }
.slai-search-input {
  flex: 1; border: none; background: transparent; padding: 14px 0;
  font: 16px 'Open Sans', sans-serif; outline: none; color: var(--slai-ink);
}
.slai-search-row .slai-send { width: 52px; height: 52px; }
.slai-suggest {
  position: relative; margin-top: -16px;
  background: #fff; border: 1px solid var(--slai-line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,41,84,0.08);
  display: none; flex-direction: column; overflow: hidden;
}
.slai-suggest.open { display: flex; }
.slai-suggest a {
  padding: 12px 18px; font-size: 14px; color: var(--slai-ink); text-decoration: none;
  border-bottom: 1px solid var(--slai-line);
  display: flex; align-items: center; gap: 10px;
}
.slai-suggest a:last-child { border-bottom: none; }
.slai-suggest a:hover { background: #f0f7ff; color: var(--slai-blue); }
.slai-suggest a span.match { background: rgba(255, 235, 110, 0.6); padding: 0 1px; border-radius: 2px; }
.slai-trending h3 {
  font: 700 12px/1 'Open Sans', sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
  color: #6b7c8e; margin: 0 0 14px;
}
.slai-trending-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.slai-trending-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--slai-bg);
  border: 1px solid var(--slai-line); border-radius: 12px;
  font-size: 14px; color: var(--slai-ink); text-decoration: none;
  transition: all 0.15s ease;
}
.slai-trending-list a:hover { border-color: var(--slai-blue); background: #f0f7ff; transform: translateY(-1px); }
.slai-trending-list .arrow { color: var(--slai-blue); flex-shrink: 0; }
.slai-quick-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.slai-quick-cat {
  padding: 8px 14px; background: #fff; border: 1px solid var(--slai-line);
  border-radius: 20px; font-size: 13px; color: var(--slai-ink);
  cursor: pointer; transition: all 0.15s ease;
}
.slai-quick-cat:hover, .slai-quick-cat.active { background: var(--slai-blue); color: #fff; border-color: var(--slai-blue); }

/* ---- Category grid variant (variation 3) ---- */
.slai-grid-card {
  background: #fff; border-radius: 16px; padding: 28px;
  box-shadow: 0 24px 64px rgba(0, 41, 84, 0.18), 0 4px 16px rgba(0, 41, 84, 0.06);
}
.slai-grid-greeting {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 20px; background: var(--slai-bg); border-radius: 12px; margin-bottom: 24px;
}
.slai-grid-greeting .av { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--slai-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.slai-grid-greeting strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--slai-ink); }
.slai-grid-greeting p { margin: 0; font-size: 14px; color: #4a5b6d; line-height: 22px; }
.slai-cats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px;
}
.slai-cat-card {
  background: #fff; border: 1px solid var(--slai-line); border-radius: 12px;
  overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.slai-cat-card:hover { border-color: var(--slai-blue); box-shadow: 0 4px 12px rgba(52,112,173,0.08); }
.slai-cat-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  cursor: pointer; user-select: none; background: #fff;
  transition: background 0.15s ease;
}
.slai-cat-head:hover { background: #f0f7ff; }
.slai-cat-card.open .slai-cat-head { background: #f0f7ff; border-bottom: 1px solid var(--slai-line); }
.slai-cat-icon {
  width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, #EAF1F8 0%, #d6e4f1 100%);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--slai-blue);
  font: 700 14px 'Open Sans', sans-serif;
}
.slai-cat-info { flex: 1; }
.slai-cat-info strong { display: block; font-size: 14px; font-weight: 700; color: var(--slai-ink); }
.slai-cat-info span { font-size: 12px; color: #6b7c8e; }
.slai-cat-chev {
  width: 24px; height: 24px; transition: transform 0.2s ease; color: #6b7c8e; flex-shrink: 0;
}
.slai-cat-card.open .slai-cat-chev { transform: rotate(90deg); color: var(--slai-blue); }
.slai-cat-questions {
  display: none; flex-direction: column;
  padding: 8px 0;
}
.slai-cat-card.open .slai-cat-questions { display: flex; animation: slai-fade-in 0.3s ease; }
.slai-cat-questions a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; font-size: 13px; line-height: 18px;
  color: var(--slai-ink); text-decoration: none;
  border-top: 1px solid rgba(0, 41, 84, 0.06);
}
.slai-cat-questions a:first-child { border-top: none; }
.slai-cat-questions a:hover { background: #f0f7ff; color: var(--slai-blue); }
.slai-cat-questions .arrow { color: var(--slai-blue); flex-shrink: 0; }
.slai-grid-input {
  margin-top: 24px; display: flex; gap: 10px; align-items: center;
  padding: 8px 8px 8px 22px;
  background: var(--slai-bg);
  border: 1px solid var(--slai-line); border-radius: 36px;
}
.slai-grid-input:focus-within { border-color: var(--slai-blue); background: #fff; }
.slai-grid-input input {
  flex: 1; border: none; background: transparent; padding: 12px 0;
  font: 14px 'Open Sans', sans-serif; outline: none;
}

/* ---- Homepage popup widget ---- */
.slai-chatbot {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  position: fixed; bottom: 24px; right: 24px; z-index: 99999;
  width: auto; height: auto;
}
.slai-chatbot-fab {
  width: 60px; height: 60px; border-radius: 50%; background: var(--slai-green); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: transform 0.2s, box-shadow 0.2s;
  position: absolute; bottom: 0; right: 0; color: #fff;
}
/* On small screens the footer "Ask" button is the chat entry point, so hide the
   floating popup there to avoid two overlapping icons in the bottom-right. */
@media (max-width: 599px) {
  .slai-chatbot { display: none; }
}
/* Pages that opt out of the floating Shari popup (e.g. the Ask-a-Lawyer video pages). */
body.hide-shari-popup .slai-chatbot { display: none; }
.slai-chatbot-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(52,112,173,0.4); }
/* Shari-photo variant of the floating button: the avatar fills the circle, ringed
   by an on-brand blue border. The blue background shows when the chat is open and
   the photo is swapped for the close (✕) icon. */
.slai-chatbot-fab--avatar {
  overflow: hidden; padding: 0; box-sizing: border-box;
  background: var(--slai-blue);
  border: 3px solid var(--slai-blue);
  /* Glow a few times on load to signal it's interactive, then rest. */
  animation: slai-fab-glow 1.6s ease-in-out 3;
}
.slai-chatbot-fab--avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
@keyframes slai-fab-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0 rgba(52,112,173,0.55); }
  50%      { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 12px rgba(52,112,173,0); }
}
@media (prefers-reduced-motion: reduce) {
  .slai-chatbot-fab--avatar { animation: none; }
}
@keyframes slai-fab-pulse {
  0% { box-shadow: 0 4px 16px rgba(0,41,84,0.4); }
  50% { box-shadow: 0 4px 24px rgba(0,41,84,0.7); }
  100% { box-shadow: 0 4px 16px rgba(0,41,84,0.4); }
}
.slai-chatbot-fab--pulse { animation: slai-fab-pulse 2s ease-in-out 3; }
.slai-chatbot-window {
  position: absolute; bottom: 72px; right: 0;
  width: 460px; max-width: calc(100vw - 48px);
  max-height: min(680px, calc(100vh - 120px));
  background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  display: none; flex-direction: column; overflow: hidden;
  animation: slai-slide-up 0.25s ease-out;
}
.slai-chatbot-window.is-open { display: flex; }
@keyframes slai-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.slai-chatbot-header {
  background: var(--slai-blue);
  color: #fff; padding: 16px 20px;
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.slai-chatbot-header-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.slai-chatbot-header-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.slai-chatbot-header-info strong { font-size: 14px; font-weight: 700; line-height: 18px; }
.slai-chatbot-header-info span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; opacity: 0.85; line-height: 16px;
}
.slai-chatbot-header-info span::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--slai-green); animation: slai-blink 1.8s ease-in-out infinite;
}
.slai-chatbot-expand {
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0.8; padding: 0 2px; flex-shrink: 0;
  text-decoration: none; cursor: pointer;
}
.slai-chatbot-expand:hover { opacity: 1; }
.slai-chatbot-close {
  background: none; border: none; color: #fff; font-size: 28px;
  cursor: pointer; line-height: 1; padding: 0 4px; opacity: 0.8; flex-shrink: 0;
}
.slai-chatbot-close:hover { opacity: 1; }
.slai-chatbot-messages {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--slai-bg);
  background-image: radial-gradient(circle at 100% 0%, rgba(52,112,173,0.05) 0%, transparent 50%), radial-gradient(circle at 0% 100%, rgba(51,191,10,0.04) 0%, transparent 50%);
  min-height: 280px; max-height: 520px; scroll-behavior: smooth;
}
.slai-chatbot-input-area {
  display: flex; align-items: center; padding: 14px 14px 14px 20px;
  border-top: 1px solid var(--slai-line); background: #fff;
  flex-shrink: 0; gap: 10px;
}
.slai-chatbot-input {
  flex: 1; border: none; background: transparent; padding: 12px 0;
  font: 15px 'Open Sans', sans-serif; outline: none; color: var(--slai-ink);
}
.slai-chatbot-input::placeholder { color: #8898aa; }
.slai-chatbot-input:focus { border-color: transparent; }
.slai-chatbot-send {
  width: 44px; height: 44px; border-radius: 50%; background: var(--slai-blue); border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; transition: background 0.15s ease, transform 0.15s ease;
}
.slai-chatbot-send:hover:not(:disabled) { background: var(--slai-navy); transform: scale(1.05); }
.slai-chatbot-send:disabled { background: #999; cursor: not-allowed; }
.slai-chatbot .slai-disclaimer { border-top: none; }

/* Trigger card */
.slai-trigger-card {
  padding: 20px 16px !important;
  overflow: hidden;
  justify-content: space-between;
  gap: 24px !important;
  cursor: pointer; border: none; font: inherit; color: inherit; text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.slai-trigger-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 41, 84, 0.12); }
.slai-trigger-card__bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; overflow: hidden; pointer-events: none;
  background: url('/i/img/Shari-Background.svg') center/cover no-repeat;
  border-radius: inherit;
}
.slai-trigger-card__pill {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: #fff; border: 1px solid rgba(0, 41, 84, 0.12);
  border-radius: 20px; font: 600 12px/1 'Open Sans', sans-serif; letter-spacing: 0.3px; color: var(--slai-ink);
}
.slai-trigger-card__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--slai-green);
  box-shadow: 0 0 0 0 rgba(51, 191, 10, 0.6); animation: slai-dot-blink 1.8s ease-in-out infinite;
  display: inline-block;
}
@keyframes slai-dot-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(51, 191, 10, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(51, 191, 10, 0); }
}
.slai-trigger-card__icon { position: relative; z-index: 3; width: 126px; height: 126px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.slai-trigger-card__typing {
  position: relative; z-index: 2; display: none; gap: 6px;
  padding: 8px 12px; background: #fff; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 41, 84, 0.06);
}
.slai-trigger-card__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--slai-blue);
  opacity: 0.35; animation: slai-trigger-bounce 1.2s ease-in-out infinite; display: inline-block;
}
.slai-trigger-card__typing span:nth-child(2) { animation-delay: 0.15s; }
.slai-trigger-card__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes slai-trigger-bounce {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-4px); }
}
.slai-trigger-card__subtitle {
  position: relative; z-index: 2; opacity: 0.6; text-align: center; color: #000;
  font-size: 14px; font-family: 'Open Sans', sans-serif; font-weight: 600;
  text-transform: none; line-height: 18px; letter-spacing: 0; width: 100%; margin: 0;
}
.slai-trigger-card__title {
  position: relative; z-index: 2; font-family: 'FreightBigProBook-Regular', Georgia, serif;
  font-size: 26px; line-height: 32px; font-weight: 400; text-transform: none;
  text-align: center; color: #000; margin: 0; width: 100%;
}
.slai-trigger-card__cta {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 12px 12px 16px; background: #fff; width: 100%;
}
.slai-trigger-card__cta span {
  flex: 1; font: 700 16px/28px 'Open Sans', sans-serif; color: #000; text-align: left;
}
.slai-trigger-card__cta svg { flex-shrink: 0; }
.slai-trigger-card__chips { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.slai-trigger-card__chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: #fff; border: 1px solid rgba(0, 41, 84, 0.12);
  border-radius: 10px; font: 400 13px/18px 'Open Sans', sans-serif; color: var(--slai-ink); text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.slai-trigger-card__chip:hover { background: #f5faff; border-color: var(--slai-blue); transform: translateX(2px); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .slai-section { padding: 32px 16px; }
  .slai-section::before { display: none; }
  .slai-section .slai-section-inner { padding: 28px 20px; border-radius: 16px; }
  .slai-h1 { font-size: 32px; line-height: 40px; }
  .slai-widget--ask, .slai-widget--dihc { height: min(80vh, 600px); }
  .slai-pill--cat { flex: 1 1 100%; }
  .slai-pills { margin-left: 0; max-width: 100%; }
  .slai-search-card { padding: 24px 20px; }
  .slai-form-row { flex-direction: column; }
  .slai-contact-form-wrap { margin-left: 0; max-width: 100%; }
  .slai-guide-offer-wrap { margin-left: 0; max-width: 100%; }
  .slai-trigger-card { padding: 16px 14px; }
  .slai-trigger-card__typing { display: inline-flex; }
  .slai-lite-intro { flex-wrap: wrap; gap: 10px; }
  .slai-lite-intro-text { flex: 1 1 0; min-width: 0; }
  .slai-book-btn { margin-left: 0; width: 100%; text-align: center; padding: 10px 16px; }
  .slai-section--dihac { padding: 0; }
  .slai-section--dihac .slai-section-inner { padding: 28px 0; border-radius: 0; }
  .slai-section--dihac .slai-lite-shell { max-width: 100%; border-radius: 0; border-left: none; border-right: none; }
  .slai-section--lite { padding: 0; }
  .slai-section--lite .slai-section-inner { padding: 28px 0; border-radius: 0; background: #3674b4; }
  .slai-section--lite .slai-lite-shell { max-width: 100%; border-radius: 0; border-left: none; border-right: none; }
  /* On mobile the eyebrow/heading/subtitle above Shari's photo just repeat what
     her intro message already says, and push the chat below the fold. Hide them
     so the pertinent info (the chat) is visible without scrolling. */
  .slai-section--lite .slai-eyebrow,
  .slai-section--lite .slai-h1,
  .slai-section--lite .slai-sub { display: none; }
  .slai-section--lite .slai-section-inner { padding-top: 12px; }
}
@media (max-width: 480px) {
  .slai-chatbot { bottom: 16px; right: 16px; }
  .slai-chatbot-fab { display: flex; width: 54px; height: 54px; }
  .slai-chatbot-fab svg { width: 24px; height: 24px; }
  .slai-chatbot-window {
    position: fixed; bottom: 0; right: 0; left: 0; top: auto;
    width: 100%; height: 85vh; max-height: none;
    border-radius: 16px 16px 0 0; animation: slai-slide-up-mobile 0.25s ease-out;
  }
  @keyframes slai-slide-up-mobile {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .slai-chatbot-header { padding: 14px 16px; border-radius: 16px 16px 0 0; }
  .slai-chatbot-messages { max-height: none; flex: 1; }
  .slai-chatbot-input-area { padding: 14px 14px 14px 20px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .slai-chatbot-input { font-size: 16px; }
}

/* ============================================================
   "Ask a Lawyer" nav item — plain underlined text link (Shari chat).
   Lives here (globally loaded) so it doesn't require re-minifying core.css.
   Toned down from the previous blue pill so it's less prominent.
   ============================================================ */
.sharelawyers .menu-1 .item.slai-nav-cta,
.sharelawyers .menu-1 .item.slai-nav-cta:hover,
.sharelawyers .menu-1 .item.slai-nav-cta:focus,
.sharelawyers .scrolled .menu-1 .item.slai-nav-cta,
.sharelawyers .scrolled .menu-1 .item.slai-nav-cta:hover,
.sharelawyers .scrolled .menu-1 .item.slai-nav-cta:focus {
  text-decoration: none;
}