/* ────────────────────────────────────────────────────────────────────────── * pepita support chat — APP-ONLY layer (app.pepita.dev) * * Loaded AFTER the shared skin (`pepita-chat.css`), which it assumes and never * contradicts. Everything here is true only of the app, because the app does * NOT use the widget's own floating trigger. `app.html` mounts the widget with * * data-parent-chat="#pepita-chat-anchor" * data-parent-trigger="#pepita-chat-trigger" ← that div is `hidden` * * so the widget's trigger never shows. The app's own launchers — the floating * bubble (`+layout.svelte`) and the editor-header button * (`sites/[slug]/editor/+page.svelte`) — call `window.PepitaChat.toggle()`, and * the hidden widget trigger only carries the `data-pending` unread signal, * which `+layout.svelte` mirrors onto ``. * * The app's floating bubble deliberately also carries `.pepita-trigger`, so it * inherits the round accent skin from the shared file; only its POSITION and * its BADGE are app business, and both live here. * * Rule of thumb: nothing in this file may migrate into the shared skin, and the * shared skin must never be edited to accommodate the app. * ────────────────────────────────────────────────────────────────────────── */ /* ---- window placement: the widget mounts the window into #pepita-chat-anchor; position comes from , set per-route in +layout.svelte: "float" (every non-editor page) → bottom-right, above the floating launcher "editor" → popover top-right, under the header ---- */ #pepita-chat-anchor .pepita-window { position: fixed; right: 22px; bottom: 90px; z-index: 2147483000; } :root[data-pepita-chat="editor"] #pepita-chat-anchor .pepita-window { top: 58px; right: 14px; bottom: auto; } :root[data-pepita-chat="editor"] #pepita-chat-anchor .pepita-window--open { transform-origin: top right; animation: pc-pop-down 0.16s ease-out; } @keyframes pc-pop-down { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Floating launcher (non-editor pages): the app's own `.pepita-trigger` bubble pinned to the bottom-right corner. In the editor it isn't rendered (the header button is). Selector carries BOTH classes so `position: fixed` outranks the shared skin's later `.pepita-trigger { position: relative }` (equal single-class specificity would otherwise let `relative` win on source order → the bubble fell into page flow offscreen). */ .pepita-trigger.pepita-float-launch { position: fixed; right: 22px; bottom: 22px; z-index: 2147483000; } /* ---- unread badge on the app's OWN launchers ------------------------------- * The shared skin badges the widget's trigger off its `data-pending`; here that * trigger is hidden, so `+layout.svelte` mirrors the signal onto * `` and we draw the dot on whichever app launcher is * visible: * • floating bubble (non-editor pages) — the 56px `.pepita-trigger`, big dot; * • editor-header launcher — a compact 22px uikit IconButton (`.ib`), smaller. * Visibility is driven only by the root attribute. --- */ :root[data-chat-unread] .pepita-trigger.pepita-chat-launch::after { content: ""; /* Pin the box model: the app loads Tailwind, whose reset sets `::after { box-sizing: border-box }` (border eats inward → smaller dot). Force content-box so the badge matches the shared skin's size. */ box-sizing: content-box; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-radius: 50%; background: var(--pc-error); border: 2.5px solid var(--pc-bg); } /* Editor-header launcher: the IconButton isn't positioned, so anchor the dot to it; shrink the dot for the smaller control. Sits at the top-right corner. */ :root[data-chat-unread] .pepita-chat-launch.ib { position: relative; /* This launcher is a uikit IconButton (.ib), NOT a .pepita-trigger, so it does NOT inherit the shared skin's --pc-* tokens (those are scoped to the widget's own elements). Define the two the badge needs straight from the app's Rosé Pine theme tokens, or the dot's background/border resolve to nothing. */ --pc-error: var(--error, #eb6f92); --pc-bg: var(--bg, #191724); } :root[data-chat-unread] .pepita-chat-launch.ib::after { content: ""; /* Same box-model pin as the bubble badge — Tailwind makes ::after border-box, which shrank the visible dot to ~5px (read as "no badge"). content-box + a real 10px dot: clearly visible, but smaller than the bubble's 14px dot. */ box-sizing: content-box; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--pc-error); border: 2px solid var(--pc-bg); } /* ---- small screens: the anchored window becomes a near-full-width sheet ---- */ @media (max-width: 460px) { #pepita-chat-anchor .pepita-window { left: 12px; right: 12px; width: auto; max-width: none; } } /* ---- respect reduced-motion -------------------------------------------------- * The shared skin's `.pepita-window--open { animation: none }` is a single-class * selector, so the editor popover rule above (id + attribute) outranks it and * would keep animating. Repeat the opt-out at matching specificity. --- */ @media (prefers-reduced-motion: reduce) { :root[data-pepita-chat="editor"] #pepita-chat-anchor .pepita-window--open { animation: none; } }