/* Dark/neon platform-wide restyle (28-08-2026): "gerichte polish op de bestaande structuur" -- geen layout-herbouw, alleen kleur/typografie/ paneelstijl. Eén stylesheet, dus deze verandering geldt automatisch voor elke pagina die base.html gebruikt. Het dashboard krijgt een sterkere accentkleur/glow op de grote widgets (zie .widget-groot), verder blijft de intensiteit bewust rustiger elders (leesbaarheid van tabellen/formulieren gaat voor). */ :root { --hosi-bg: #0a0e16; --hosi-bg-elevated: #121a26; --hosi-bg-elevated-2: #0f1620; --hosi-primary: #2ee3f5; --hosi-primary-ink: #04141a; --hosi-accent: #b18bfa; --hosi-border: rgba(126, 168, 201, 0.22); --hosi-text: #eaf1f7; --hosi-text-muted: #93a5b8; --hosi-success: #4fd68c; --hosi-warning: #f5b942; --hosi-danger: #f2678e; --font-display: "Chakra Petch", "Arial Narrow", sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } /* Personalisatie (28-08-2026): elke gebruiker kiest zijn eigen accentkleur, toegepast als klasse op (zie base.html). Alleen --hosi-primary wisselt -- --hosi-accent (paars) blijft het platform's vaste secundaire merkaccent, ongeacht de keuze. --hosi-primary-ink blijft bewust één donkere tint voor alle varianten: elke kandidaat- kleur is licht/fel genoeg dat donkere knoptekst overal goed leesbaar blijft (geen bright-on-bright-probleem zoals wit-op-cyaan zou geven). */ .accent-cyaan { --hosi-primary: #2ee3f5; } .accent-paars { --hosi-primary: #b18bfa; } .accent-roze { --hosi-primary: #f2678e; } .accent-amber { --hosi-primary: #f5b942; } .accent-groen { --hosi-primary: #4fd68c; } * { box-sizing: border-box; } html { background: var(--hosi-bg); } body { font-family: var(--font-body); margin: 0; background: var(--hosi-bg); color: var(--hosi-text); } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; text-wrap: balance; } a { color: var(--hosi-primary); } a:visited { color: var(--hosi-accent); } nav { background: var(--hosi-bg-elevated); border-bottom: 1px solid color-mix(in srgb, var(--hosi-primary) 45%, transparent); padding: 0.75rem 1.5rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; } nav a { color: var(--hosi-text); text-decoration: none; font-weight: 500; } nav a:hover, nav a:focus-visible { color: var(--hosi-primary); } nav a.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--hosi-primary); text-shadow: 0 0 12px color-mix(in srgb, var(--hosi-primary) 55%, transparent); } nav .spacer { flex: 1; } /* US-4.4.5 §Platform-Architectuur (27-08-2026): gecategoriseerde nav i.p.v. één platte lijst met tientallen links. Puur CSS, geen JS -- consistent met de rest van dit project. */ .nav-dropdown { position: relative; } .nav-dropdown-label { color: var(--hosi-text); font-weight: 500; cursor: pointer; padding: 0.25rem 0; display: inline-block; } .nav-dropdown-label::after { content: " ▾"; font-size: 0.75em; color: var(--hosi-primary); } .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--hosi-bg-elevated); border: 1px solid color-mix(in srgb, var(--hosi-primary) 45%, transparent); border-radius: 4px; box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.55), 0 0 20px -8px color-mix(in srgb, var(--hosi-primary) 25%, transparent); padding: 0.5rem 0; min-width: 220px; z-index: 20; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: flex; flex-direction: column; } /* .nav-dropdown-menu--mega gebruikt CSS columns i.p.v. flex-column voor de layout (zie hieronder) -- moet block zijn, columns werkt niet op een flex-container. */ .nav-dropdown:hover .nav-dropdown-menu--mega, .nav-dropdown:focus-within .nav-dropdown-menu--mega { display: block; } .nav-dropdown-menu a { color: var(--hosi-text-muted); padding: 0.4rem 1rem; white-space: nowrap; } .nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: var(--hosi-bg-elevated-2); color: var(--hosi-primary); } /* Nav opschonen (31-08-2026): één "Meer"-mega-menu i.p.v. 9 losse dropdowns -- te veel sub-groepen voor de bestaande verticale flex-column-menu, dus een eigen multi-kolom variant. Elke sub-groep krijgt break-inside: avoid zodat een kop nooit los van zijn links over kolommen wordt gesplitst. */ .nav-dropdown-menu--mega { columns: 3 220px; column-gap: 1.5rem; max-width: calc(100vw - 2rem); max-height: 80vh; overflow-y: auto; padding: 0.75rem 1rem; } .nav-dropdown-menu--mega .nav-dropdown-group { break-inside: avoid; margin-bottom: 0.9rem; } .nav-dropdown-group-label { display: block; color: var(--hosi-primary); font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.15rem; } .nav-dropdown-menu--mega a { padding: 0.25rem 0; } .vestiging-switcher select { background: var(--hosi-bg-elevated-2); color: var(--hosi-text); } main { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; } /* Mobiel (28-08-2026, ontdekt bij het testen van de restyle): de platte flex-wrap-nav werd op smalle schermen een onleesbare, samen- geknepen rij -- geen hamburger/JS, wél een stapelend, aftikbaar menu. De dropdown-labels krijgen tabindex="0" in base.html zodat :focus-within ook op een tik reageert, niet alleen op hover. */ @media (max-width: 720px) { nav { flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.75rem 1rem; } nav .spacer { display: none; } .nav-dropdown-menu { position: static; box-shadow: none; min-width: 0; width: 100%; padding-left: 0.75rem; } .nav-dropdown-menu--mega { columns: 1; max-width: 100%; max-height: none; overflow-y: visible; padding: 0.5rem 0 0.5rem 0.75rem; } main { padding: 0 1rem; } } .flash { background: color-mix(in srgb, var(--hosi-warning) 14%, var(--hosi-bg-elevated)); border: 1px solid color-mix(in srgb, var(--hosi-warning) 45%, transparent); color: var(--hosi-text); padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; } .flash-warning { border-color: color-mix(in srgb, var(--hosi-danger) 45%, transparent); } /* Kaarten en widget-tegels delen dezelfde donkere paneelstijl. De hoekige "cut corner" zit alleen op .card en .widget-groot (de prominente elementen) -- kleine tegels blijven eenvoudig, dat onderscheid versterkt zelf al welke widgets "groot" zijn. De afsnijding (10px) past ruim binnen de padding, dus er wordt nooit echte inhoud weggeknipt. */ .card, .widget-tile { /* min-width: 0 overschrijft grid/flex-items' default "auto" -- zonder dit negeert een kaart zijn eigen overflow-x: auto en duwt een brede tabel de hele kaart (en daarmee de pagina) breder, i.p.v. zelf horizontaal te scrollen. Ontdekt bij het mobiel-testen (28-08-2026), geen zichtbaar probleem op desktop-breedte. */ min-width: 0; background: linear-gradient(155deg, var(--hosi-bg-elevated), var(--hosi-bg-elevated-2)); border: 1px solid var(--hosi-border); border-radius: 4px; padding: 1.25rem; margin-bottom: 1rem; overflow-x: auto; } .card { clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); } .row-danger { color: var(--hosi-danger); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1rem; } .stat-grid .card { text-align: center; } .stat-grid .value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 700; color: var(--hosi-primary); text-shadow: 0 0 16px color-mix(in srgb, var(--hosi-primary) 35%, transparent); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--hosi-border); } th { color: var(--hosi-text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; } td { font-variant-numeric: tabular-nums; } form.inline { display: inline; } input, select, button, textarea { font: inherit; padding: 0.5rem; border: 1px solid var(--hosi-border); border-radius: 4px; background: var(--hosi-bg-elevated-2); color: var(--hosi-text); } input::placeholder, textarea::placeholder { color: var(--hosi-text-muted); } input:focus, select:focus, textarea:focus, button:focus-visible { outline: none; border-color: var(--hosi-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hosi-primary) 25%, transparent); } button { background: var(--hosi-primary); color: var(--hosi-primary-ink); border: none; font-weight: 600; cursor: pointer; } button:hover { background: color-mix(in srgb, var(--hosi-primary) 85%, white); } label { display: block; margin-top: 0.75rem; font-weight: 500; } .status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-weight: 700; color: white; } .status-groen { background: #2e7d32; } .status-oranje { background: #ed6c02; } .status-rood { background: #c62828; } /* ---------- Adaptief dashboard (28-08-2026) ---------- */ /* Gegroepeerde landingspagina (29-08-2026): sectiekop per categorie i.p.v. één platte grid -- de kop moet duidelijk minder zwaar wegen dan een echte pagina-titel (

), maar wel een rustpunt geven tussen categorieën. / .dashboard-categorie { margin-bottom: 1.5rem; } .dashboard-categorie-titel { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hosi-text-muted); border-bottom: 1px solid color-mix(in srgb, var(--hosi-primary) 25%, transparent); padding-bottom: 0.35rem; margin: 0 0 0.75rem; } / Week-raster + weer (29-08-2026): "Running — deze week" op de ondernemer-Agenda-pagina, 7 dagkolommen i.p.v. een platte lijst. / .week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0.6rem; } .week-dag { background: linear-gradient(155deg, var(--hosi-bg-elevated), var(--hosi-bg-elevated-2)); border: 1px solid var(--hosi-border); border-radius: 4px; padding: 0.65rem 0.75rem; min-height: 90px; } .week-dag-vandaag { border-color: color-mix(in srgb, var(--hosi-primary) 55%, transparent); } .week-dag-kop { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hosi-text-muted); margin-bottom: 0.4rem; display: flex; justify-content: space-between; gap: 0.4rem; } .week-dag-weer { white-space: nowrap; } .week-dag ul { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; } .week-dag-leeg { color: var(--hosi-text-muted); font-size: 0.78rem; } / Lunch/Diner/Groepen-indeling per dag (31-08-2026) -- zelfde label-stijl als .widget-cat, hergebruikt voor consistentie. / .week-dag-categorie { margin-bottom: 0.5rem; } .week-dag-categorie:last-child { margin-bottom: 0; } .week-dag-categorie-label { display: block; font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hosi-primary); font-weight: 700; margin-bottom: 0.1rem; } .widget-groot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; } .widget-klein-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0.75rem; margin-bottom: 1rem; } .widget-klein { padding: 0.75rem 1rem; } / Het dashboard mag er meer uitspringen dan de rest van het platform (afgesproken tijdens de designrichting) -- alleen de grote widgets krijgen de hoekige vorm + een merkbaar fellere randkleur. / .widget-groot { clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); border-color: color-mix(in srgb, var(--hosi-primary) 45%, transparent); } .widget-groot .widget-tile-head h3, .widget-groot summary strong { font-size: 1.1rem; } .widget-cat { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hosi-primary); font-weight: 700; margin-right: 0.5rem; } .widget-tile summary { cursor: pointer; list-style: none; } .widget-tile summary::-webkit-details-marker { display: none; } .widget-tile summary::after { content: " ▾"; color: var(--hosi-primary); } .widget-tile details[open] summary::after { content: " ▴"; } .widget-teaser { display: block; margin-top: 0.25rem; color: var(--hosi-text-muted); font-size: 0.88rem; } .widget-detail { margin-top: 0.75rem; } .widget-tile-head h3 { margin: 0.25rem 0 0.5rem; font-size: 1.05rem; } .widget-open-btn { display: inline-block; margin-top: 0.25rem; padding: 0.35rem 0.85rem; background: var(--hosi-primary); color: var(--hosi-primary-ink); font-weight: 600; border-radius: 4px; text-decoration: none; font-size: 0.9rem; } .widget-open-btn:hover { background: color-mix(in srgb, var(--hosi-primary) 85%, white); } .dashboard-instellingen-form fieldset { border: 1px solid var(--hosi-border); border-radius: 4px; margin-top: 0.75rem; } .dashboard-instellingen-form label { margin-top: 0.4rem; font-weight: 400; } / Extra ambient glow, alleen op /dashboard/ -- zie de body_class-hook in base.html. Puur decoratief, geen invloed op leesbaarheid elders. / .dashboard-page { background-image: radial-gradient(ellipse 900px 480px at 15% -8%, color-mix(in srgb, var(--hosi-primary) 8%, transparent), transparent 60%), radial-gradient(ellipse 700px 480px at 100% 6%, color-mix(in srgb, var(--hosi-accent) 7%, transparent), transparent 55%); background-attachment: fixed; } / ---------- Personalisatie: accentkleur-kiezer ---------- / .accent-swatches { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; } .accent-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--hosi-border); cursor: pointer; padding: 0; } .accent-swatch[aria-pressed="true"] { border-color: var(--hosi-text); box-shadow: 0 0 0 2px var(--hosi-bg), 0 0 0 4px var(--hosi-text); } .accent-swatch.accent-swatch-cyaan { background: #2ee3f5; } .accent-swatch.accent-swatch-paars { background: #b18bfa; } .accent-swatch.accent-swatch-roze { background: #f2678e; } .accent-swatch.accent-swatch-amber { background: #f5b942; } .accent-swatch.accent-swatch-groen { background: #4fd68c; } / ---------- Personalisatie: chat-avatar-kiezer (29-08-2026) ---------- / .avatar-swatches { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; } .avatar-swatch { width: 46px; height: 46px; border-radius: 50%; background: var(--hosi-bg-elevated-2); border: 2px solid var(--hosi-border); color: var(--hosi-primary); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; } .avatar-swatch svg { width: 100%; height: 100%; } .avatar-swatch:hover { background: var(--hosi-bg-elevated); } .avatar-swatch[aria-pressed="true"] { border-color: var(--hosi-text); box-shadow: 0 0 0 2px var(--hosi-bg), 0 0 0 4px var(--hosi-text); } / ---------- Zwevend personeels-chat-widget (29-08-2026) ---------- static/chat_widget.js. z-index 1000: ruim boven het hoogste bestaande waarde in dit bestand (.nav-dropdown-menu op 20), zodat het widget nooit onder een ander paneel verdwijnt. / .chat-widget-root { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1000; font-family: var(--font-body); } / [hidden] normally means display:none via the browser's own UA stylesheet, but several rules below set `display` on the same elements (panel, attachment chip, mic button via .chat-widget-icon-btn) -- an AUTHOR rule always wins over the UA default regardless of selector specificity, so without this override those elements would stay visible even with the hidden attribute set. Scoped to the widget only. / .chat-widget-root [hidden] { display: none !important; } .chat-widget-toggle { width: 58px; height: 58px; border-radius: 50%; background: var(--hosi-bg-elevated); border: 1px solid color-mix(in srgb, var(--hosi-primary) 55%, transparent); box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.55), 0 0 22px -6px color-mix(in srgb, var(--hosi-primary) 35%, transparent); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } .chat-widget-toggle:hover { background: var(--hosi-bg-elevated-2); } .chat-widget-toggle svg { width: 34px; height: 34px; } .chat-widget-avatar-svg { color: var(--hosi-primary); } .chat-widget-panel { position: absolute; right: 0; bottom: 70px; width: min(360px, calc(100vw - 2.5rem)); height: min(520px, calc(100vh - 7rem)); display: flex; flex-direction: column; background: linear-gradient(155deg, var(--hosi-bg-elevated), var(--hosi-bg-elevated-2)); border: 1px solid var(--hosi-border); border-radius: 8px; box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.55), 0 0 22px -6px color-mix(in srgb, var(--hosi-primary) 25%, transparent); overflow: hidden; } .chat-widget-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--hosi-border); background: var(--hosi-bg-elevated-2); } .chat-widget-header svg { width: 24px; height: 24px; flex-shrink: 0; } .chat-widget-header-text { flex: 1; } .chat-widget-header-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; } .chat-widget-header-subtitle { font-size: 0.72rem; color: var(--hosi-text-muted); } .chat-widget-close { background: transparent; border: none; color: var(--hosi-text-muted); font-size: 1.1rem; line-height: 1; padding: 0.25rem 0.4rem; cursor: pointer; } .chat-widget-close:hover { color: var(--hosi-text); background: transparent; } .chat-widget-messages { flex: 1; overflow-y: auto; padding: 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; } .chat-widget-bubble { max-width: 85%; padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .chat-widget-bubble-user { align-self: flex-end; background: var(--hosi-primary); color: var(--hosi-primary-ink); border-bottom-right-radius: 2px; } .chat-widget-bubble-agent { align-self: flex-start; background: var(--hosi-bg-elevated-2); border: 1px solid var(--hosi-border); color: var(--hosi-text); border-bottom-left-radius: 2px; } .chat-widget-typing { color: var(--hosi-text-muted); font-style: italic; } / AI Hardening Fase 1 (07-09-2026): 👍/👎 onder een AI-antwoord. / .chat-widget-feedback { display: flex; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.78rem; color: var(--hosi-text-muted); } .chat-widget-feedback-btn { background: none; border: 1px solid transparent; border-radius: 4px; padding: 0.1rem 0.3rem; font-size: 0.9rem; line-height: 1; cursor: pointer; } .chat-widget-feedback-btn:hover:not(:disabled) { border-color: var(--hosi-border); background: var(--hosi-bg-elevated); } .chat-widget-feedback-btn:disabled { opacity: 0.5; cursor: default; } / Tier-1-actie-tools (29-08-2026): een voorstel dat expliciet bevestigd moet worden -- duidelijk visueel anders dan een gewone antwoord-bubbel (accentkleur-rand + eigen knoppenrij) zodat het nooit met een normaal antwoord verward wordt. */ .chat-widget-bubble-pending { align-self: stretch; max-width: 100%; background: var(--hosi-bg-elevated-2); border: 1px solid color-mix(in srgb, var(--hosi-primary) 55%, transparent); } .chat-widget-pending-preview { margin: 0 0 0.5rem; } .chat-widget-pending-actions { display: flex; gap: 0.5rem; } .chat-widget-pending-confirm, .chat-widget-pending-cancel { flex: 1; padding: 0.4rem 0.6rem; font-size: 0.82rem; border-radius: 4px; } .chat-widget-pending-confirm { background: var(--hosi-primary); color: var(--hosi-primary-ink); border: none; } .chat-widget-pending-confirm:hover { background: color-mix(in srgb, var(--hosi-primary) 85%, white); } .chat-widget-pending-cancel { background: transparent; color: var(--hosi-text-muted); border: 1px solid var(--hosi-border); } .chat-widget-pending-cancel:hover { color: var(--hosi-text); background: var(--hosi-bg-elevated); } .chat-widget-pending-confirm:disabled, .chat-widget-pending-cancel:disabled { opacity: 0.6; cursor: wait; } .chat-widget-error { margin: 0 0.85rem 0.5rem; padding: 0.5rem 0.65rem; border-radius: 6px; font-size: 0.8rem; background: color-mix(in srgb, var(--hosi-danger) 16%, var(--hosi-bg-elevated)); border: 1px solid color-mix(in srgb, var(--hosi-danger) 45%, transparent); color: var(--hosi-text); } .chat-widget-attachment-chip { margin: 0 0.85rem 0.5rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 6px; background: var(--hosi-bg-elevated-2); border: 1px solid var(--hosi-border); font-size: 0.78rem; color: var(--hosi-text-muted); } .chat-widget-attachment-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-widget-attachment-remove { background: transparent; border: none; color: var(--hosi-text-muted); cursor: pointer; padding: 0 0.25rem; font-size: 0.9rem; } .chat-widget-attachment-remove:hover { color: var(--hosi-danger); background: transparent; } .chat-widget-form { display: flex; align-items: flex-end; gap: 0.4rem; padding: 0.65rem 0.85rem; border-top: 1px solid var(--hosi-border); } .chat-widget-input { flex: 1; resize: none; max-height: 140px; min-height: 38px; font-size: 0.88rem; } .chat-widget-icon-btn { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--hosi-bg-elevated-2); color: var(--hosi-text); border: 1px solid var(--hosi-border); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } .chat-widget-icon-btn:hover { background: var(--hosi-bg-elevated); } .chat-widget-icon-btn svg { width: 18px; height: 18px; } .chat-widget-send { background: var(--hosi-primary); color: var(--hosi-primary-ink); border: none; } .chat-widget-send:hover { background: color-mix(in srgb, var(--hosi-primary) 85%, white); } .chat-widget-send[aria-busy="true"] { opacity: 0.6; cursor: wait; } .chat-widget-mic-listening { background: var(--hosi-danger); color: white; animation: chat-widget-pulse 1.4s ease-in-out infinite; } @keyframes chat-widget-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hosi-danger) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } @media (prefers-reduced-motion: reduce) { .chat-widget-mic-listening { animation: none; } } @media (max-width: 480px) { .chat-widget-root { right: 0.75rem; bottom: 0.75rem; } .chat-widget-panel { width: calc(100vw - 1.5rem); } }