/* ═══════════════════════════════════════════════════════════════════════
   FORRE-BOTEN — pulse-bot.css (2026-09-26, prefix fb-)
   ───────────────────────────────────────────────────────────────────────
   KARTA
     Skalet ... themes/forre_pulse/views/partials/pulse-bot.php
     Motorn ... themes/forre_pulse/js/pulse-bot.js
     Kunskap .. app/Helpers/BotKunskap.php (FAQ + sidregistret + changelog)

   FRISTÅENDE MED FLIT. Alla färger går via --fb-* nedan, och varje --fb-*
   faller tillbaka på ett fast värde när pulse-tokenen saknas. Boten ser alltså
   rätt ut även på en yta som inte laddar forre_pulse.css. Kentas ord
   2026-09-26: "botten måste funka på andra teman".

   REGLER SOM GÄLLER HÄR (Kentas, bindande)
     · Inga lodräta färgade linjer. Ton ligger på HELA ytan (.fb-note).
     · Ingen glow/halo. Djup = skugga, valör och kant.
     · Inga mörka plattor på ljus bakgrund i ljust läge (spotlight-etiketten är
       ett kort, inte en svart lapp).
     · Roboto, bara Roboto. Bootstrap Icons (bi-), inga emojis som ikoner.
   ═══════════════════════════════════════════════════════════════════════ */

.fb{
  --fb-card:var(--card,#fff); --fb-inset:var(--inset,#f5f6f8); --fb-zebra:var(--zebra,#f6f7f9);
  --fb-ink:var(--ink,#0b0f14); --fb-ink2:var(--ink2,#465361); --fb-dim:var(--dim,#646e7b); --fb-faint:var(--faint,#7e8794);
  --fb-line:var(--line,#e4e7eb); --fb-line2:var(--line2,#d8dce1);
  --fb-acc:var(--accent,#2796f2); --fb-acc-ink:var(--accent-ink,#1268c9); --fb-wash:var(--accent-wash,#eaf4fe);
  --fb-live:var(--live,#1aa64b); --fb-live-wash:var(--live-wash,#e7f6ec);
  --fb-gold:var(--gold,#9d6d00); --fb-danger:var(--danger,#e0245e); --fb-danger-fill:var(--danger-fill,#e0245e);
  --fb-r:var(--r,6px); --fb-rs:var(--r-sm,4px);
  --fb-on-acc:#fff;
  --fb-e1:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.10);
  --fb-e3:0 2px 6px rgba(16,24,40,.06),0 18px 48px rgba(16,24,40,.16);
  font-family:'Roboto',system-ui,sans-serif;
  color:var(--fb-ink);
}
[data-theme="dark"] .fb{
  --fb-on-acc:#06121f;
  --fb-e1:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
  --fb-e3:0 2px 6px rgba(0,0,0,.4),0 18px 48px rgba(0,0,0,.55);
}
.fb *,.fb *::before,.fb *::after{box-sizing:border-box}
.fb button{font:inherit;color:inherit;cursor:pointer}
.fb [hidden]{display:none!important}

/* ── Launchern ─────────────────────────────────────────────────────────── */
.fb-fab{position:fixed;left:16px;bottom:16px;z-index:1090;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--fb-card);border:1px solid var(--fb-line);
  box-shadow:var(--fb-e1);color:var(--fb-ink2);font-size:19px;padding:0;
  transition:transform .14s ease-out,color .14s ease-out,border-color .14s ease-out}
.fb-fab:hover{transform:translateY(-1px);color:var(--fb-acc-ink);border-color:var(--fb-line2)}
.fb-fab:focus-visible{outline:2px solid var(--fb-acc);outline-offset:2px}
.fb-fab-dot{position:absolute;top:1px;right:1px;width:11px;height:11px;border-radius:50%;
  background:var(--fb-danger-fill);box-shadow:0 0 0 2px var(--fb-card);display:none}
.fb-fab.has-unread .fb-fab-dot{display:block}
.fb.is-open .fb-fab{opacity:0;pointer-events:none;transform:scale(.9)}

/* ── Nudgen (bubblan ovanför launchern) ────────────────────────────────── */
.fb-nudge{position:fixed;left:16px;bottom:72px;z-index:1091;width:300px;display:flex;gap:10px;align-items:flex-start;
  padding:12px 34px 12px 12px;background:var(--fb-card);border:1px solid var(--fb-line);border-radius:var(--fb-r);
  box-shadow:var(--fb-e3);cursor:pointer;animation:fb-in .18s ease-out}
.fb-nudge .fb-av{width:28px;height:28px;font-size:14px}
.fb-nudge-txt{font-size:13px;line-height:1.45;color:var(--fb-ink2)}
.fb-nudge-txt b{color:var(--fb-ink);font-weight:600}
.fb-nudge-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;background:none;border-radius:var(--fb-rs);
  color:var(--fb-faint);display:grid;place-items:center;font-size:12px}
.fb-nudge-x:hover{background:var(--fb-inset);color:var(--fb-ink)}

/* ── Panelen ───────────────────────────────────────────────────────────── */
.fb-panel{position:fixed;left:16px;bottom:16px;z-index:1100;width:392px;height:min(648px,calc(100dvh - 96px));
  display:none;flex-direction:column;background:var(--fb-card);border:1px solid var(--fb-line);
  border-radius:var(--fb-r);box-shadow:var(--fb-e3);overflow:hidden}
.fb.is-open .fb-panel{display:flex;animation:fb-in .16s ease-out}
@keyframes fb-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.fb-hd{display:flex;align-items:center;gap:10px;height:56px;padding:0 8px 0 12px;border-bottom:1px solid var(--fb-line);flex:0 0 auto}
.fb-av{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--fb-wash);color:var(--fb-acc-ink);font-size:17px}
.fb-av.is-on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--fb-live);box-shadow:0 0 0 2px var(--fb-card)}
.fb-hd-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fb-hd-t b{font-size:14.5px;font-weight:600;color:var(--fb-ink)}
.fb-hd-t span{font-size:12px;color:var(--fb-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-ib{flex:0 0 auto;width:32px;height:32px;border:0;background:none;border-radius:var(--fb-rs);display:grid;place-items:center;
  color:var(--fb-dim);font-size:15px;transition:background .12s,color .12s}
.fb-ib:hover{background:var(--fb-inset);color:var(--fb-ink)}
.fb-ib:focus-visible{outline:2px solid var(--fb-acc);outline-offset:-2px}
.fb-ib.is-muted{color:var(--fb-danger)}

.fb-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 8px;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--fb-line2) transparent;display:flex;flex-direction:column;gap:10px}

/* ── Startvyn ──────────────────────────────────────────────────────────── */
.fb-hi h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--fb-ink)}
.fb-hi p{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--fb-dim)}
.fb-sec{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.fb-sl{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600;color:var(--fb-ink2)}
.fb-sl a,.fb-sl button{font-size:12px;font-weight:500;color:var(--fb-dim);text-decoration:none;background:none;border:0;padding:0}
.fb-sl a:hover,.fb-sl button:hover{color:var(--fb-acc-ink)}

.fb-list{border:1px solid var(--fb-line);border-radius:var(--fb-r);overflow:hidden;background:var(--fb-card)}
.fb-row{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:8px 10px;border:0;background:none;
  text-align:left;text-decoration:none;color:inherit;transition:background .12s}
.fb-row+.fb-row{box-shadow:0 -1px 0 var(--fb-line)}
.fb-row:hover{background:var(--fb-zebra)}
.fb-row:focus-visible{outline:2px solid var(--fb-acc);outline-offset:-2px}
.fb-tile{flex:0 0 auto;width:30px;height:30px;border-radius:var(--fb-rs);display:grid;place-items:center;font-size:15px;
  background:var(--fb-inset);color:var(--fb-ink2)}
.fb-tile.t-live{background:var(--fb-live-wash);color:var(--fb-live)}
.fb-tile.t-acc{background:var(--fb-wash);color:var(--fb-acc-ink)}
.fb-tile.t-gold{background:color-mix(in srgb,var(--fb-gold) 12%,var(--fb-card));color:var(--fb-gold)}
.fb-rw{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fb-rw b{font-size:13.5px;font-weight:500;color:var(--fb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-rw small{font-size:12px;color:var(--fb-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-rt{flex:0 0 auto;font-size:12px;color:var(--fb-dim);font-variant-numeric:tabular-nums}
.fb-rt.is-hot{color:var(--fb-danger);font-weight:600}
.fb-row>.bi-chevron-right{flex:0 0 auto;color:var(--fb-faint);font-size:11px}

.fb-topics{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fb-topic{display:flex;align-items:center;gap:8px;min-height:40px;padding:7px 9px;border:1px solid var(--fb-line);
  border-radius:var(--fb-r);background:var(--fb-card);text-align:left;transition:border-color .12s,background .12s}
.fb-topic:hover{border-color:var(--fb-line2);background:var(--fb-zebra)}
.fb-topic i{color:var(--fb-dim);font-size:14px;flex:0 0 auto}
.fb-topic span{flex:1;min-width:0;font-size:12.5px;font-weight:500;line-height:1.25;color:var(--fb-ink)}
.fb-topic em{font-style:normal;font-size:11.5px;color:var(--fb-faint);font-variant-numeric:tabular-nums}

.fb-skel{height:46px;border-radius:var(--fb-r);background:var(--fb-inset);animation:fb-skel 1.1s ease-in-out infinite alternate}
@keyframes fb-skel{from{opacity:.55}to{opacity:1}}

/* ── Samtalet ──────────────────────────────────────────────────────────── */
.fb-u{align-self:flex-end;max-width:84%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--fb-acc);
  color:var(--fb-on-acc);font-size:13.5px;line-height:1.45;word-wrap:break-word}
.fb-b{align-self:flex-start;max-width:100%;font-size:13.5px;line-height:1.5;color:var(--fb-ink2)}
.fb-b b,.fb-b strong{color:var(--fb-ink);font-weight:600}
.fb-say{padding:9px 12px;border-radius:14px 14px 14px 4px;background:var(--fb-inset);max-width:92%}

.fb-a{width:100%;padding:12px;border-radius:var(--fb-r);background:var(--fb-inset);border:1px solid var(--fb-line)}
.fb-k{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--fb-dim)}
.fb-k i{font-size:12px}
.fb-a h3{margin:3px 0 6px;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--fb-ink)}
.fb-a p{margin:0 0 6px}
.fb-a p:last-child{margin-bottom:0}
.fb-a ol{margin:4px 0 6px;padding-left:20px}
.fb-a li{margin:2px 0}
.fb-a pre{margin:6px 0;padding:9px 10px;border:1px solid var(--fb-line);border-radius:var(--fb-rs);background:var(--fb-card);
  font:12.5px/1.5 'Roboto',system-ui,sans-serif;color:var(--fb-ink);white-space:pre-wrap}
.fb-tip{display:flex;gap:8px;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--fb-ink2)}
.fb-tip i{color:var(--fb-gold);font-size:13px;margin-top:1px}
.fb-more{border:0;background:none;padding:0;font-size:12.5px;font-weight:500;color:var(--fb-acc-ink)}
.fb-more:hover{text-decoration:underline}

.fb-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fb-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--fb-line);
  border-radius:var(--fb-rs);background:var(--fb-card);color:var(--fb-ink);font-size:12.5px;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:border-color .12s,color .12s,background .12s}
.fb-chip i{color:var(--fb-dim);font-size:13px}
.fb-chip:hover{border-color:var(--fb-acc);color:var(--fb-acc-ink)}
.fb-chip:hover i{color:var(--fb-acc-ink)}
.fb-chip.is-p{background:var(--fb-acc);border-color:var(--fb-acc);color:var(--fb-on-acc)}
.fb-chip.is-p i{color:var(--fb-on-acc)}
.fb-chip.is-p:hover{background:var(--fb-acc-ink);border-color:var(--fb-acc-ink);color:var(--fb-on-acc)}
.fb-chip:focus-visible{outline:2px solid var(--fb-acc);outline-offset:1px}

.fb-rel{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:2px}
.fb-rel>span{font-size:12px;color:var(--fb-dim);margin:2px 0 2px 2px}
.fb-rel button{display:flex;align-items:flex-start;gap:8px;width:100%;padding:6px 8px;border:0;background:none;border-radius:var(--fb-rs);
  text-align:left;font-size:13px;line-height:1.35;color:var(--fb-ink2)}
.fb-rel button i{color:var(--fb-faint);font-size:12px;margin-top:2px}
.fb-rel button:hover{background:var(--fb-inset);color:var(--fb-acc-ink)}

/* Ton på HELA ytan — aldrig en list i kanten (Kentas regel §0.5). */
.fb-note{width:100%;padding:10px 12px;border-radius:var(--fb-r);font-size:13.5px;line-height:1.5;color:var(--fb-ink2);
  background:color-mix(in srgb,var(--fb-acc) 5%,var(--fb-card));border:1px solid color-mix(in srgb,var(--fb-acc) 20%,var(--fb-line))}
.fb-note.t-live{background:color-mix(in srgb,var(--fb-live) 5%,var(--fb-card));border-color:color-mix(in srgb,var(--fb-live) 22%,var(--fb-line))}
.fb-note.t-gold{background:color-mix(in srgb,var(--fb-gold) 6%,var(--fb-card));border-color:color-mix(in srgb,var(--fb-gold) 24%,var(--fb-line))}
.fb-note.t-danger{background:color-mix(in srgb,var(--fb-danger) 4%,var(--fb-card));border-color:color-mix(in srgb,var(--fb-danger) 22%,var(--fb-line))}
[data-theme="dark"] .fb-note{background:color-mix(in srgb,var(--fb-acc) 9%,var(--fb-card))}
[data-theme="dark"] .fb-note.t-live{background:color-mix(in srgb,var(--fb-live) 9%,var(--fb-card))}
[data-theme="dark"] .fb-note.t-gold{background:color-mix(in srgb,var(--fb-gold) 9%,var(--fb-card))}
[data-theme="dark"] .fb-note.t-danger{background:color-mix(in srgb,var(--fb-danger) 8%,var(--fb-card))}
.fb-note b{color:var(--fb-ink);font-weight:600}

/* Boten gör något: "Tar dig till Topplistan …  Avbryt" */
.fb-do{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px 9px 12px;border-radius:var(--fb-r);
  background:var(--fb-inset);border:1px solid var(--fb-line);font-size:13px;color:var(--fb-ink2)}
.fb-do i.bi{color:var(--fb-acc-ink);font-size:14px}
.fb-do span{flex:1;min-width:0}
.fb-do button{border:0;background:none;padding:4px 6px;border-radius:var(--fb-rs);font-size:12.5px;font-weight:500;color:var(--fb-dim)}
.fb-do button:hover{background:var(--fb-card);color:var(--fb-ink)}
.fb-do.is-done i.bi{color:var(--fb-live)}

.fb-typing{align-self:flex-start;display:flex;gap:4px;padding:11px 12px;border-radius:14px 14px 14px 4px;background:var(--fb-inset)}
.fb-typing span{width:6px;height:6px;border-radius:50%;background:var(--fb-faint);animation:fb-dot 1s ease-in-out infinite}
.fb-typing span:nth-child(2){animation-delay:.15s}.fb-typing span:nth-child(3){animation-delay:.3s}
@keyframes fb-dot{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-2px)}}

/* ── Inmatningen + förslagen ───────────────────────────────────────────── */
.fb-in{position:relative;flex:0 0 auto;display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--fb-line);margin:0}
.fb-field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border:1px solid var(--fb-line);
  border-radius:var(--fb-r);background:var(--fb-inset);transition:border-color .12s,background .12s}
.fb-field:focus-within{border-color:var(--fb-acc);background:var(--fb-card)}
.fb-field i{color:var(--fb-dim);font-size:14px}
.fb-field input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font:14px/1 'Roboto',system-ui,sans-serif;color:var(--fb-ink)}
.fb-field input::placeholder{color:var(--fb-dim)}
.fb-send{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:var(--fb-r);display:grid;place-items:center;font-size:16px;
  background:var(--fb-acc);color:var(--fb-on-acc);transition:background .12s,opacity .12s}
.fb-send:hover{background:var(--fb-acc-ink)}
.fb-send:disabled{background:var(--fb-inset);color:var(--fb-faint);cursor:default}
.fb-sug{position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);z-index:2;padding:4px;background:var(--fb-card);
  border:1px solid var(--fb-line);border-radius:var(--fb-r);box-shadow:var(--fb-e1)}
.fb-sug button{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:6px 8px;border:0;background:none;
  border-radius:var(--fb-rs);text-align:left;font-size:13px;line-height:1.3;color:var(--fb-ink)}
.fb-sug button i{color:var(--fb-dim);font-size:13px;flex:0 0 auto}
.fb-sug button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-sug button em{font-style:normal;font-size:11.5px;color:var(--fb-faint)}
.fb-sug button.is-on,.fb-sug button:hover{background:var(--fb-inset)}

/* ── Spotlight + "boten trycker" ───────────────────────────────────────── */
.fb-spot{position:fixed;z-index:1300;pointer-events:none;border:2px solid var(--fb-acc);border-radius:8px;
  animation:fb-spot 1.2s ease-in-out infinite}
@keyframes fb-spot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.6}}
.fb-spot-l{position:fixed;z-index:1301;pointer-events:none;transform:translate(-50%,-100%);padding:6px 10px;
  background:var(--fb-card);color:var(--fb-ink);border:1px solid var(--fb-line);border-radius:var(--fb-rs);
  box-shadow:var(--fb-e1);font:500 12.5px/1.2 'Roboto',system-ui,sans-serif;white-space:nowrap;opacity:0;transition:opacity .15s}
.fb-spot-l.is-below{transform:translate(-50%,0)}
.fb-spot-l.is-in{opacity:1}
.fb-tap{position:fixed;z-index:1302;pointer-events:none;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:2px solid var(--fb-acc);animation:fb-tap .5s ease-out forwards}
@keyframes fb-tap{from{transform:scale(.4);opacity:1}to{transform:scale(1.8);opacity:0}}

/* ── Mobil: ett ark nerifrån. Launchern bor i menyn ("Boten"). ────────── */
@media (max-width:820px){
  .fb-fab,.fb-nudge{display:none!important}
  .fb-panel{left:0;right:0;bottom:0;width:auto;height:min(86dvh,700px);z-index:1250;border-radius:12px 12px 0 0;
    border-width:1px 0 0}
  .fb.is-open .fb-panel{animation:fb-up .2s ease-out}
  .fb-in{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .fb-field input{font-size:16px} /* iOS zoomar in under 16 px */
}
@keyframes fb-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
  .fb-panel,.fb-nudge,.fb-spot,.fb-tap,.fb-typing span,.fb-skel{animation:none!important}
  .fb-body{scroll-behavior:auto}
}