/* Finsherpa chat widget — matches v2 brand (Onest, navy/paper/red, pills, 24px cards). */
.fs-chat, .fs-chat *{box-sizing:border-box;}
.fs-chat{
  --c-night:oklch(0.26 0.055 262);
  --c-night2:oklch(0.32 0.07 262);
  --c-paper:oklch(0.965 0.008 85);
  --c-card:#ffffff;
  --c-ink:oklch(0.28 0.05 262);
  --c-soft:oklch(0.50 0.03 262);
  --c-line:oklch(0.90 0.012 85);
  --c-red:oklch(0.55 0.185 27);
  --c-red-deep:oklch(0.46 0.16 27);
  --c-ice:oklch(0.88 0.035 245);
  --c-wa:#25d366;
  --c-ease:cubic-bezier(0.16,1,0.3,1);
  font-family:"Onest",system-ui,-apple-system,sans-serif;
  position:fixed; right:22px; bottom:22px; z-index:2147483000;
}
@media (max-width:520px){.fs-chat{right:14px; bottom:14px;}}

/* launcher */
.fs-launch{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--c-red); color:#fdf9f4; border:none;
  padding:13px 20px 13px 16px; border-radius:999px;
  font-family:inherit; font-weight:600; font-size:15px;
  box-shadow:0 12px 30px -8px oklch(0.55 0.185 27 / .5);
  transition:transform .2s var(--c-ease), background .2s var(--c-ease);
}
.fs-launch:hover{transform:translateY(-2px); background:var(--c-red-deep);}
.fs-launch svg{width:22px; height:22px; flex:0 0 auto;}
.fs-launch .fs-dot{
  position:absolute; top:8px; right:10px; width:10px; height:10px; border-radius:50%;
  background:var(--c-wa); border:2px solid #fdf9f4;
}
@media (prefers-reduced-motion: no-preference){
  .fs-launch::before{
    content:""; position:absolute; inset:0; border-radius:999px;
    box-shadow:0 0 0 0 oklch(0.55 0.185 27 / .45); animation:fsPulse 2.6s infinite;
  }
  @keyframes fsPulse{0%{box-shadow:0 0 0 0 oklch(0.55 0.185 27 / .45);} 70%{box-shadow:0 0 0 16px oklch(0.55 0.185 27 / 0);} 100%{box-shadow:0 0 0 0 oklch(0.55 0.185 27 / 0);}}
}
.fs-chat.open .fs-launch{display:none;}

/* panel — padding:0 and margin:0 defend against the site's global `section{padding}` /
   `section{margin}` rules leaking in (the panel is a <section>). */
.fs-panel{
  display:none; flex-direction:column; overflow:hidden;
  width:min(400px, calc(100vw - 24px)); height:min(660px, calc(100dvh - 24px));
  padding:0; margin:0; box-sizing:border-box;
  background:var(--c-paper); border-radius:24px;
  box-shadow:0 40px 90px -20px oklch(0.15 0.04 262 / .5), 0 0 0 1px oklch(0.90 0.012 85 / .8);
}
/* On phones, give the chat almost the full screen so messages have room. */
@media (max-width:520px){
  .fs-panel{width:calc(100vw - 20px); height:calc(100dvh - 84px); border-radius:20px;}
}
.fs-chat.open .fs-panel{display:flex; animation:fsUp .35s var(--c-ease);}
@keyframes fsUp{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}}

/* header */
.fs-head{
  background:linear-gradient(150deg, var(--c-night), var(--c-night2));
  color:#fdf9f4; padding:18px 18px 16px; display:flex; align-items:center; gap:12px;
}
.fs-head .fs-avatar{
  width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:oklch(1 0 0 / .1); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; color:var(--c-red);
}
.fs-head .fs-avatar .peak{color:var(--c-red); font-size:20px;}
.fs-head b{display:block; font-size:16px; font-weight:700;}
.fs-head .fs-status{font-size:12.5px; color:var(--c-ice); display:flex; align-items:center; gap:6px;}
.fs-head .fs-status i{width:7px; height:7px; border-radius:50%; background:var(--c-wa); display:inline-block;}
.fs-head .fs-x{
  margin-left:auto; background:none; border:none; color:var(--c-ice); cursor:pointer;
  font-size:22px; line-height:1; padding:4px 6px; border-radius:8px;
}
.fs-head .fs-x:hover{background:oklch(1 0 0 / .1); color:#fdf9f4;}

/* messages */
.fs-body{flex:1; overflow-y:auto; padding:18px 16px 8px; display:flex; flex-direction:column; gap:12px;}
.fs-msg{max-width:84%; font-size:14.5px; line-height:1.5; padding:11px 14px; border-radius:16px; white-space:pre-wrap; word-wrap:break-word;}
.fs-msg a{color:var(--c-red); font-weight:600;}
.fs-msg.bot{background:var(--c-card); color:var(--c-ink); align-self:flex-start; border-bottom-left-radius:5px; box-shadow:0 2px 10px -4px oklch(0.28 0.05 262 / .14);}
.fs-msg.user{background:var(--c-night); color:#fdf9f4; align-self:flex-end; border-bottom-right-radius:5px;}
.fs-msg.user a{color:var(--c-ice);}
.fs-chips{display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; max-width:100%;}
.fs-chip{
  background:var(--c-card); color:var(--c-ink); border:1px solid var(--c-line);
  font-family:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
  padding:8px 14px; border-radius:999px; transition:border-color .15s, background .15s;
}
.fs-chip:hover{border-color:var(--c-red); color:var(--c-red);}
.fs-chip.wa{background:var(--c-wa); color:#fff; border-color:var(--c-wa); display:inline-flex; align-items:center; gap:7px;}
.fs-chip.wa:hover{filter:brightness(.95); color:#fff;}
.fs-chip.wa svg{width:16px; height:16px;}
.fs-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:var(--c-card); border-radius:16px; border-bottom-left-radius:5px;}
.fs-typing span{width:7px; height:7px; border-radius:50%; background:var(--c-soft); opacity:.5; animation:fsBlink 1.2s infinite;}
.fs-typing span:nth-child(2){animation-delay:.2s;} .fs-typing span:nth-child(3){animation-delay:.4s;}
@keyframes fsBlink{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}

/* composer */
.fs-foot{padding:10px 12px 12px; border-top:1px solid var(--c-line); background:var(--c-paper);}
.fs-form{display:flex; gap:8px; align-items:flex-end;}
.fs-input{
  flex:1; resize:none; max-height:96px; min-height:44px;
  font-family:inherit; font-size:14.5px; line-height:1.4; color:var(--c-ink);
  border:1px solid var(--c-line); border-radius:14px; padding:12px 14px; background:var(--c-card);
}
.fs-input:focus{outline:2px solid var(--c-ice); outline-offset:1px; border-color:var(--c-ice);}
.fs-send{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; border:none; cursor:pointer;
  background:var(--c-red); color:#fdf9f4; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.fs-send:hover{background:var(--c-red-deep);}
.fs-send svg{width:20px; height:20px;}
.fs-legal{margin:9px 2px 0; font-size:11px; color:var(--c-soft); text-align:center;}
.fs-legal a{color:var(--c-soft); text-decoration:underline;}
:focus-visible{outline:2px solid var(--c-ice); outline-offset:2px;}