/* * Stetworth /app — the support chat widget (floating launcher + * panel, bottom-right), cut from style.css's "Support chat widget" * section unchanged and in the original order. */ /* * Load order is load-bearing: the /app shell links every split sheet * BEFORE style.css. That keeps both source-order contracts intact — * a rule kept behind in style.css still beats its shared group there * by file order, and the responsive tail at the end of style.css * still overrides this sheet's base rules at equal specificity. * This sheet declares no design-token block of its own and carries * no media block of any kind — every width, motion and paged * override for these rules lives in style.css's responsive tail * (docs/APP.md#the-split-stylesheets). */ /* ============================================================ * Support chat widget (floating launcher + panel, bottom-right) * * Mounted on , outside #app, so it survives route re-renders. * Launcher (z-index 90) and panel (95) both sit below the modal * overlay (100) so real dialogs always stack on top. * ============================================================ */ /* A labelled pill, not a bare icon: the SVG plus the visible "Support" label (matching the panel header) is the launcher's accessible name. The 56px height is load-bearing geometry: the panel's resting offset and the phone-block launcher-lift offsets (docs/APP.md#browser-floor) add exactly 56px of launcher, so the pill widens but never grows taller. */ .support-chat-launcher { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-launcher); width: auto; height: 56px; display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0 var(--s-4) 0 var(--s-3); color: var(--c-paper); background: var(--c-oxblood); border: 1px solid var(--c-oxblood); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--fs-ui); font-weight: 500; cursor: pointer; box-shadow: var(--sh-float); transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast); } .support-chat-launcher:hover { background: var(--c-oxblood-deep); border-color: var(--c-oxblood-deep); } .support-chat-launcher:active { transform: translateY(1px); } .support-chat-launcher:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--sh-float); } .support-chat-launcher svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; } .support-chat-panel { position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + 56px + var(--s-3)); z-index: var(--z-panel); width: 340px; max-width: calc(100vw - 2 * var(--s-5)); max-height: min(480px, calc(100vh - 8rem)); display: flex; flex-direction: column; background: var(--c-paper); border: 1px solid var(--c-rule-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-overlay); animation: fade-in var(--t-base) ease-out both; } .support-chat-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--c-paper-soft); border-bottom: 1px solid var(--c-rule); } .support-chat-title { font-family: var(--font-accent); font-weight: 400; font-size: var(--fs-title); color: var(--c-ink); margin: 0; } .support-chat-messages { list-style: none; margin: 0; padding: var(--s-4); flex: 1; min-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-2); } .support-chat-message { max-width: 85%; padding: var(--s-2) var(--s-3); font-size: var(--fs-body); line-height: 1.45; color: var(--c-ink-soft); border: 1px solid var(--c-rule); border-radius: var(--radius); overflow-wrap: break-word; } .support-chat-message-support { align-self: flex-start; background: var(--c-paper); border-bottom-left-radius: var(--radius-sm); } .support-chat-message-user { align-self: flex-end; background: var(--c-paper-soft); border-bottom-right-radius: var(--radius-sm); } .support-chat-form { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-rule); background: var(--c-paper); } .support-chat-input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-rule-strong); border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); box-shadow: var(--sh-well); } .support-chat-input::placeholder { color: var(--c-ink-muted); } .support-chat-input:focus { outline: none; border-color: var(--c-burnished); box-shadow: var(--sh-well), var(--focus-ring); }