/* FitSphere Abiline chat widget — extracted from the production design. */
:root {
    --mint: #29c0b1;
    --teal: #1e9a8e;
    --teal-dk: #178b80;
    --ink: #1c2b29;
    --muted: #8a9897;
    --line: #ececec;
    --page-bg: #ffffff;
    --bot-bubble: #ffffff;
    --bot-border: #ededed;
    --user-bubble: #d4f4f0;
    --chat-bg: #f7f7f7;
    --gold: #fbbc04;
    --brand: #2ac4b5;
    --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ============ CHAT WIDGET ============ */
  .fs-widget { position: fixed; right: 30px; bottom: 30px; width: 400px; z-index: 9999; font-family: var(--sans); pointer-events: none; }
  /* Align the widget's right edge with the page content's right edge.
     The site content lives in a centered Tailwind .container whose max-width
     steps up per breakpoint (640/720/920/1080/1296) with 1rem inner padding,
     so the content's right edge sits at (100vw - containerWidth)/2 + 1rem.
     Mirror that here so the chatbox shares the same right margin as the page. */
  @media (min-width:  640px) { .fs-widget { right: calc((100vw -  640px) / 2 + 1rem); } }
  @media (min-width:  768px) { .fs-widget { right: calc((100vw -  720px) / 2 + 1rem); } }
  @media (min-width: 1024px) { .fs-widget { right: calc((100vw -  920px) / 2 + 1rem); } }
  @media (min-width: 1280px) { .fs-widget { right: calc((100vw - 1080px) / 2 + 1rem); } }
  @media (min-width: 1536px) { .fs-widget { right: calc((100vw - 1296px) / 2 + 1rem); } }
  .fs-panel, .fs-fab { pointer-events: auto; }

  /* Inline SVG icons */
  .fs-ic, .fs-star-img { display: block; flex: none; }
  .fs-logo-img { display: block; flex: none; }

  /* Launcher (FAB) — collapsed pulsing circle, slides open on hover */
  .fs-fab {
    position: absolute; right: 0; bottom: 0; z-index: 1; overflow: hidden; width: 64px;
    display: inline-flex; align-items: center; padding: 0 8px;
    height: 64px; border: none; cursor: pointer; border-radius: 32px; color: #fff;
    background: linear-gradient(110deg, var(--mint) 0%, var(--teal) 100%);
    box-shadow: 0 14px 34px -8px rgba(21,147,138,0.5), 0 4px 10px rgba(0,0,0,0.1);
    transition: width 0.42s cubic-bezier(.22,1,.36,1), box-shadow 0.25s, opacity 0.2s, transform 0.2s;
    transform-origin: bottom right;
  }
  .fs-fab:hover, .fs-fab.peek { width: var(--fab-w, 190px); box-shadow: 0 20px 42px -8px rgba(21,147,138,0.58); }
  .fs-fab.hide { opacity: 0; transform: scale(0.55) translateY(10px); pointer-events: none; }
  .fs-fab-ic { width: 48px; height: 64px; flex: none; display: grid; place-items: center; }
  .fs-fab-lbl { white-space: nowrap; font-weight: 600; font-size: 17px; padding: 0 8px 0 14px; }
  .fs-fab-pulse {
    position: absolute; right: 0; bottom: 0; width: 64px; height: 64px; border-radius: 50%; z-index: 0;
    pointer-events: none; box-shadow: 0 0 0 0 rgba(41,192,177,0.55); animation: fsPulse 2.4s infinite;
    transition: opacity 0.2s;
  }
  .fs-fab:hover ~ .fs-fab-pulse, .fs-fab.hide ~ .fs-fab-pulse, .fs-fab.peek ~ .fs-fab-pulse { opacity: 0; }
  @keyframes fsPulse { 0%{box-shadow:0 0 0 0 rgba(41,192,177,0.5);} 70%{box-shadow:0 0 0 18px rgba(41,192,177,0);} 100%{box-shadow:0 0 0 0 rgba(41,192,177,0);} }

  /* Panel */
  .fs-panel {
    position: absolute; right: 0; bottom: 0; width: 400px;
    height: min(680px, calc(100vh - 56px));
    background: #fff; border-radius: 26px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px -20px rgba(16,40,38,0.4), 0 10px 26px rgba(0,0,0,0.08);
    opacity: 0; transform: translateY(16px) scale(0.97); transform-origin: bottom right;
    pointer-events: none; transition: opacity 0.26s ease, transform 0.32s cubic-bezier(.22,1,.36,1);
  }
  .fs-panel.open { opacity: 1; transform: none; pointer-events: auto; }

  /* Header */
  .fs-head {
    background: var(--teal);
    color: #fff; padding: 16px 12px 16px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
  }
  .fs-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .fs-name { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; min-width: 0; }
  .fs-name-brand { font-weight: 600; font-size: 18px; letter-spacing: -0.2px; white-space: nowrap; }
  .fs-name-sub { font-weight: 600; font-size: 18px; letter-spacing: -0.2px; white-space: nowrap; opacity: 0.96; }
  .fs-head-act { display: flex; align-items: center; gap: 2px; }
  .fs-icon { position: relative; width: 38px; height: 38px; border: none; background: transparent; color: #fff;
    border-radius: 10px; display: grid; place-items: center; cursor: pointer; opacity: 0.95;
    transition: background 0.15s, opacity 0.15s; }
  .fs-icon:hover { background: rgba(255,255,255,0.16); opacity: 1; }
  .fs-icon::after { content: attr(data-tip); position: absolute; top: calc(100% + 9px); right: 2px;
    background: #16242e; color: #fff; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 7px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 6; }
  .fs-icon:hover::after { opacity: 1; }

  /* Language menu */
  .fs-lang { position: relative; }
  .fs-lang-btn { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 9px;
    background: rgba(255,255,255,0.18); border: none; color: #fff; border-radius: 10px; cursor: pointer;
    font-family: var(--sans); transition: background 0.15s; }
  .fs-lang-btn:hover { background: rgba(255,255,255,0.28); }
  .fs-lang-code { font-size: 16px; font-weight: 600; letter-spacing: 0.3px; }
  .fs-caret { transition: transform 0.18s; opacity: 0.9; }
  .fs-caret.flip { transform: rotate(180deg); }
  .fs-lang-pop { position: absolute; top: 46px; right: 0; width: 84px; background: #fff; color: var(--ink);
    border-radius: 16px; box-shadow: 0 20px 46px -12px rgba(16,40,38,0.35), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 8px; z-index: 7; animation: fsPop 0.16s ease; }
  @keyframes fsPop { from{opacity:0; transform: translateY(-6px);} to{opacity:1; transform:none;} }
  .fs-lang-item { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
    border: none; background: transparent; padding: 7px 10px; border-radius: 10px; cursor: pointer;
    font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; }
  .fs-lang-name { min-width: 1.7em; }
  .fs-lang-tick { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; }
  .fs-lang-item:hover { background: #f1f1f1; }
  .fs-lang-item.on { color: var(--teal); }
  .fs-lang-item.on svg { color: var(--teal); }

  /* Body */
  .fs-body { flex: 1; overflow-y: auto; background: var(--chat-bg); padding: 22px 18px 14px;
    display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; }
  .fs-body::-webkit-scrollbar { width: 7px; }
  .fs-body::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 8px; }

  .fs-row { display: flex; gap: 10px; align-items: flex-end; animation: fsIn 0.3s ease; }
  .fs-row.user { justify-content: flex-end; }
  @keyframes fsIn { from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
  .fs-ava { width: 34px; height: 34px; flex: none; display: grid; place-items: center; margin-bottom: 2px; }

  .fs-bubble { max-width: 78%; padding: 13px 16px; font-size: 15px; line-height: 1.5; border-radius: 16px;
    font-family: var(--sans); }
  .fs-bubble.bot { background: var(--bot-bubble); color: var(--ink); border: 1px solid var(--bot-border);
    border-bottom-left-radius: 0; box-shadow: 0 1px 3px rgba(16,40,38,0.05); }
  .fs-bubble.user { background: var(--user-bubble); color: #16322e; font-weight: 500;
    border-bottom-right-radius: 0; }
  /* Defensive: the host theme (Tailwind preflight + global typography) resets/inflates p, ol, ul,
     li, a, strong. Re-assert the widget's own rendering with !important so bot replies stay tight
     and lists keep their markers no matter what the surrounding page does. */
  .fs-bubble .fs-p { margin: 0 0 9px !important; padding: 0 !important; font-size: 15px !important;
    line-height: 1.5 !important; color: inherit !important; font-family: var(--sans) !important; }
  .fs-bubble .fs-p:last-child { margin-bottom: 0 !important; }
  .fs-bubble ol.fs-ol { list-style: decimal !important; }
  .fs-bubble ul.fs-ol { list-style: disc !important; }
  .fs-bubble .fs-ol { margin: 7px 0 9px !important; padding: 0 0 0 22px !important; display: block !important;
    font-size: 15px !important; line-height: 1.5 !important; }
  .fs-bubble .fs-ol li { margin: 0 0 4px 0 !important; padding: 0 0 0 3px !important; display: list-item !important;
    list-style: inherit !important; color: inherit !important; font-family: var(--sans) !important; }
  .fs-bubble .fs-ol li:last-child { margin-bottom: 0 !important; }
  .fs-bubble a { color: var(--teal) !important; font-weight: 500; text-decoration: none; }
  .fs-bubble a:hover { text-decoration: underline; }
  .fs-bubble strong { font-weight: 700 !important; color: inherit !important; }

  /* Typing */
  .fs-typing { display: flex; gap: 4px; align-items: center; padding: 15px 16px; }
  .fs-typing span { width: 7px; height: 7px; border-radius: 50%; background: #c2c2c2; animation: fsDot 1.2s infinite; }
  .fs-typing span:nth-child(2){ animation-delay: .18s; } .fs-typing span:nth-child(3){ animation-delay: .36s; }
  @keyframes fsDot { 0%,60%,100%{transform: translateY(0); opacity:.5;} 30%{transform: translateY(-4px); opacity:1;} }

  /* End chat — inactive until hover */
  .fs-end { align-self: center; display: inline-flex; align-items: center; margin: 2px 0;
    background: var(--chat-bg); border: 1.6px solid #DCDCDC; color: #7F7F7F;
    font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 11px 30px; border-radius: 28px;
    cursor: pointer; transition: all 0.15s; }
  .fs-end:hover { background: var(--chat-bg); border-color: var(--brand); color: var(--brand); }

  /* Composer */
  .fs-foot { padding: 14px 16px 16px; background: #fff; }
  .fs-foot-empty { min-height: 40px; }

  /* Lead-capture form */
  .fs-lead { align-self: stretch; background: #fff; border: 1px solid var(--bot-border); border-radius: 20px;
    padding: 22px 20px; margin: 2px 0; display: flex; flex-direction: column;
    box-shadow: 0 4px 16px rgba(16,40,38,0.05); animation: fsIn 0.3s ease; }
  .fs-lead-label { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
  .fs-lead-hint { font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
  .fs-lead-input { width: 100%; box-sizing: border-box; height: 46px; border: none; background: #f1f1f1;
    border-radius: 12px; padding: 0 15px; font-family: var(--sans); font-size: 15px; color: var(--ink);
    outline: none; margin-bottom: 18px; transition: box-shadow 0.15s, background 0.15s; }
  .fs-lead-input:focus { background: #fff; box-shadow: 0 0 0 1.6px var(--mint); }
  .fs-lead-btn { width: 100%; height: 50px; border: none; border-radius: 14px; cursor: pointer; color: #fff;
    background: #cfcfcf; font-family: var(--sans); font-size: 16px; font-weight: 700; margin-top: 2px;
    transition: all 0.15s; }
  .fs-lead-btn.active { background: linear-gradient(135deg, var(--mint), var(--teal)); }
  .fs-lead-btn.active:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(21,147,138,0.55); }
  .fs-lead-btn:disabled { cursor: default; }
  .fs-input-wrap { display: flex; align-items: center; gap: 8px; background: #fff;
    border: 1.6px solid #e7e7e7; border-radius: 16px; padding: 7px 14px;
    transition: border-color 0.15s; }
  .fs-input-wrap:focus-within { border-color: var(--mint); }
  .fs-attach { width: 36px; height: 36px; flex: none; border: none; background: transparent; color: #9a9a9a;
    border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: color 0.15s, background 0.15s; }
  .fs-attach:hover { color: var(--teal); background: #eef6f5; }
  .fs-ta { flex: 1; border: none; outline: none; background: transparent; resize: none; font-family: var(--sans);
    font-size: 15.5px; line-height: 1.4; color: var(--ink); padding: 9px 2px; max-height: 110px; }
  .fs-ta::placeholder { color: #a3a3a3; }
  .fs-send { width: 46px; height: 46px; flex: none; border: none; border-radius: 14px; cursor: pointer;
    display: grid; place-items: center; background: #e4e4e4; transition: background 0.18s, transform 0.12s; }
  .fs-send.active { background: linear-gradient(135deg, var(--mint), var(--teal)); }
  .fs-send.active:hover { transform: translateY(-1px); }

  /* Restart footer */
  .fs-restart { width: 100%; height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 1.6px solid var(--teal); background: #fff; color: var(--teal); font-family: var(--sans);
    font-size: 17px; font-weight: 600; border-radius: 18px; cursor: pointer; transition: all 0.15s; }
  .fs-restart:hover { background: #eef6f5; }

  /* Feedback card */
  .fs-fb { align-self: stretch; background: #fff; border: 1px solid var(--bot-border); border-radius: 20px;
    padding: 22px 18px; margin: 2px 0; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 4px 16px rgba(16,40,38,0.05); animation: fsIn 0.3s ease; }
  .fs-fb-title { font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 16px; }
  .fs-stars { display: flex; gap: 8px; margin-bottom: 18px; }
  .fs-star { background: transparent; border: none; padding: 1px; cursor: pointer; line-height: 0; color: #d9d9d9; transition: transform 0.12s; }
  .fs-star svg { fill: currentColor; transition: color 0.12s; }
  .fs-star.on { color: var(--gold); }
  .fs-star:hover { transform: scale(1.15); }
  .fs-fb-comment { width: 100%; box-sizing: border-box; resize: none; border: 1.6px solid #e3e3e3;
    border-radius: 14px; padding: 13px 15px; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    outline: none; transition: border-color 0.15s; background: #fff; }
  .fs-fb-comment:focus { border-color: var(--mint); }
  .fs-fb-comment::placeholder { color: #b0b0b0; }
  .fs-fb-btns { display: flex; gap: 12px; margin-top: 16px; width: 100%; }
  .fs-fb-submit { flex: 1; height: 50px; border: none; border-radius: 14px; cursor: pointer; color: #fff;
    background: #cfcfcf; font-family: var(--sans); font-size: 15.5px; font-weight: 600; transition: all 0.15s; }
  .fs-fb-submit.active { background: linear-gradient(135deg, var(--mint), var(--teal)); }
  .fs-fb-submit.active:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(21,147,138,0.55); }
  .fs-fb-submit:disabled { cursor: default; }
  .fs-fb-skip { height: 50px; padding: 0 26px; border: 1.6px solid #e3e3e3; background: #fff; color: var(--muted);
    border-radius: 14px; cursor: pointer; font-family: var(--sans); font-size: 15.5px; font-weight: 500; transition: all 0.15s; }
  .fs-fb-skip:hover { border-color: #cfcfcf; color: var(--ink); }

  /* Thank-you */
  .fs-thanks { padding: 30px 18px; }
  .fs-thanks-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--mint), var(--teal)); margin-bottom: 16px;
    box-shadow: 0 8px 20px -6px rgba(21,147,138,0.5); animation: fsPopIn 0.45s cubic-bezier(.22,1.4,.36,1); }
  @keyframes fsPopIn { from{ transform: scale(0.4); opacity:0; } to{ transform: scale(1); opacity:1; } }
  .fs-thanks-sub { font-size: 14.5px; color: var(--muted); text-align: center; margin-top: 6px; line-height: 1.5; }

  @media (max-width: 520px) {
    /* width:auto so left+right define the box. Otherwise the base width:400px
       wins, the widget overflows a ~390px screen, and the header icons get
       clipped at the right edge. The desktop breakpoint overrides above all
       use min-width >= 640px, so they never apply here. */
    .fs-widget { width: auto; left: 14px; right: 14px; bottom: 14px; }
    /* Fit the panel to the *visible* viewport. Mobile browsers report 100vh as
       the toolbar-hidden height, so an 88vh panel overflowed whenever the URL
       bar / bottom toolbar were showing — either the header (top) or the
       composer (bottom) ended up off-screen. svh sizes to the small (toolbars-
       visible) viewport, so header and bottom button are always on screen
       together. 100vh stays as the fallback for browsers without svh. */
    .fs-panel {
      width: auto; left: 0; right: 0;
      height: calc(100vh - 28px);
      height: calc(100svh - 28px);
    }
  }

  /* Image attachments (backend parity) */
  .fs-msg-imgs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
  .fs-msg-img { max-width: 130px; max-height: 130px; border-radius: 10px; display: block; }
  .fs-attach-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 2px 10px; }
  .fs-attach-chip { position: relative; cursor: pointer; line-height: 0; }
  .fs-attach-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
  .fs-attach-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
    background: #16242e; color: #fff; font-size: 11px; display: grid; place-items: center; }
  .fs-ta:disabled { opacity: 0.6; }