/* theme-quento.css — Quento brand layer on top of Web Awesome defaults. * Loaded after styles/themes/default.css so these overrides win. * * Goals: warm amber brand, cream-tinted surfaces, slightly softer radii, * Outfit throughout (no script accent — too playful). Layout uses CSS grid * with a JS-free checkbox-toggled mobile drawer, so the shell renders fully * before any Web Awesome JS loads. */ /* Outfit — vendored locally under assets/static/fonts/outfit/ (no CDN * runtime dep). Single variable-font woff2 per subset covers weights * 300/400/500/600/700; the unicode-range values match Google's official * subsetting so the browser only loads what the page needs. */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/outfit/outfit-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/outfit/outfit-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Shell layout sizes — theme-independent, referenced by the grid layout. */ :root { --shell-sidebar-width: 240px; --shell-header-height: 64px; } /* Quento MVP theme — layered on top of the WA base. Selected when * . Other theme classes (wa-theme-default, * wa-theme-awesome, wa-theme-shoelace) bypass this block entirely. * * Brand palette + typography are mode-independent and live on the theme * class directly. Surface tokens differ between light and dark, so they * live in mode-scoped blocks below. */ @layer wa-theme { .wa-theme-quento-mvp { /* Brand palette — warm amber/honey scale in OKLCH. */ --wa-color-brand-05: oklch(20% 0.07 65); --wa-color-brand-10: oklch(28% 0.09 65); --wa-color-brand-20: oklch(36% 0.11 65); --wa-color-brand-30: oklch(46% 0.13 65); --wa-color-brand-40: oklch(57% 0.15 65); --wa-color-brand-50: oklch(67% 0.16 65); --wa-color-brand-60: oklch(74% 0.15 65); --wa-color-brand-70: oklch(82% 0.12 70); --wa-color-brand-80: oklch(89% 0.08 72); --wa-color-brand-90: oklch(94% 0.05 75); --wa-color-brand-95: oklch(97% 0.025 78); /* Warm neutral palette — slightly biased toward cream/clay. */ --wa-color-neutral-05: oklch(18% 0.012 60); --wa-color-neutral-10: oklch(25% 0.012 60); --wa-color-neutral-20: oklch(34% 0.012 60); --wa-color-neutral-30: oklch(44% 0.010 60); --wa-color-neutral-40: oklch(55% 0.010 60); --wa-color-neutral-50: oklch(65% 0.008 60); --wa-color-neutral-60: oklch(73% 0.008 60); --wa-color-neutral-70: oklch(82% 0.006 65); --wa-color-neutral-80: oklch(89% 0.006 70); --wa-color-neutral-90: oklch(94% 0.005 75); --wa-color-neutral-95: oklch(97% 0.005 78); /* Typography — Outfit throughout, no script accent. */ --wa-font-family-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --wa-font-family-heading: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --wa-font-family-code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --wa-font-weight-heading: 600; --wa-font-weight-body: 400; /* Slightly more rounded than default — feels less corporate. */ --wa-border-radius-scale: 1.4; /* Looser spacing for the operator app — items breathe. */ --wa-space-scale: 1.05; } /* Light-mode surfaces: cream-tinted, warm "paper" feel. */ .wa-theme-quento-mvp.wa-light { --wa-color-surface-default: oklch(99% 0.006 78); --wa-color-surface-raised: oklch(99.5% 0.004 78); --wa-color-surface-lowered: oklch(96% 0.008 75); --wa-color-surface-border: oklch(89% 0.012 70); } /* Dark-mode surfaces: warm near-black with subtle amber bias. * Brand/text tokens cascade through from .wa-dark in the base theme. */ .wa-theme-quento-mvp.wa-dark { --wa-color-surface-default: oklch(18% 0.014 65); --wa-color-surface-raised: oklch(22% 0.016 65); --wa-color-surface-lowered: oklch(13% 0.012 60); --wa-color-surface-border: oklch(28% 0.014 62); } } * { box-sizing: border-box; } body { font-family: var(--wa-font-family-body); background: var(--wa-color-surface-default); color: var(--wa-color-text-normal); margin: 0; min-height: 100vh; } /* ---- Layout (desktop-first, mobile drawer via checkbox) ----------------- */ .shell-drawer__toggle { position: absolute; opacity: 0; pointer-events: none; } .shell-layout { display: grid; height: 100vh; grid-template-columns: var(--shell-sidebar-width) 1fr; grid-template-rows: var(--shell-header-height) 1fr; grid-template-areas: "header header" "sidebar main"; } .shell-header { grid-area: header; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--wa-space-l); padding: 0 var(--wa-space-l); background: linear-gradient( 90deg, var(--wa-color-brand-40), var(--wa-color-brand-50) ); color: white; box-shadow: 0 1px 0 oklch(0% 0 0 / 0.08); } .shell-header__menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--wa-border-radius-m); cursor: pointer; color: white; transition: background 75ms ease; } .shell-header__menu-toggle:hover { background: oklch(100% 0 0 / 0.15); } .shell-header__brand { display: flex; align-items: center; gap: var(--wa-space-s); color: inherit; text-decoration: none; font-weight: 600; } .shell-header__title { font-size: var(--wa-font-size-l); letter-spacing: -0.01em; } .shell-header__spacer { flex: 1; } .shell-header__profile { display: flex; align-items: center; gap: var(--wa-space-s); } .shell-header__profile wa-avatar { --size: 36px; --background-color: oklch(99% 0.006 78 / 0.2); --color: white; } .shell-header__profile-text { display: none; flex-direction: column; line-height: 1.15; } @media (min-width: 768px) { .shell-header__profile-text { display: flex; } } .shell-header__profile-name { font-size: 0.875rem; font-weight: 600; } .shell-header__profile-email { font-size: 0.75rem; opacity: 0.8; } .shell-header__profile wa-button::part(base) { color: white; } .theme-picker wa-button::part(base) { color: white; } /* ---- Sidebar ------------------------------------------------------------ */ .shell-sidebar { grid-area: sidebar; background: var(--wa-color-surface-lowered); border-right: 1px solid var(--wa-color-surface-border); overflow-y: auto; } .shell-nav { display: flex; flex-direction: column; gap: var(--wa-space-l); padding: var(--wa-space-l) var(--wa-space-s); } .shell-nav__group { display: flex; flex-direction: column; gap: 2px; } .shell-nav__group-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wa-color-text-quiet); padding: 0 var(--wa-space-m) var(--wa-space-2xs); } .shell-nav__link { display: flex; align-items: center; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-m); border-radius: var(--wa-border-radius-m); color: var(--wa-color-text-normal); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: background 75ms ease, color 75ms ease; } .shell-nav__link:hover { background: var(--wa-color-brand-95); color: var(--wa-color-brand-30); } .shell-nav__link--active { background: var(--wa-color-brand-90); color: var(--wa-color-brand-20); } .shell-nav__link wa-tag { margin-left: auto; } /* Pill tags: WA's default 0.75em side-padding leaves text visually kissing * the curve once the radius goes full-pill. Add breathing room. */ wa-tag[pill] { padding-inline: 1em; } .wa-icon { width: 20px; height: 20px; flex-shrink: 0; } /* ---- Overlay (mobile) --------------------------------------------------- */ .shell-overlay { display: none; position: fixed; inset: 0; background: oklch(0% 0 0 / 0.4); z-index: 25; cursor: pointer; } /* ---- Main content ------------------------------------------------------- */ .shell-main { grid-area: main; /* min-* zero unlocks h-full / overflow-internal children (e.g. /chat's * two-pane layout expects to fill the row and manage its own scroll). */ min-width: 0; min-height: 0; overflow: hidden; } /* ---- Responsive: collapse to drawer on mobile --------------------------- */ @media (max-width: 767px) { .shell-layout { grid-template-columns: 1fr; grid-template-areas: "header" "main"; } .shell-header__menu-toggle { display: inline-flex; } .shell-sidebar { position: fixed; top: var(--shell-header-height); left: 0; bottom: 0; width: var(--shell-sidebar-width); max-width: 80vw; z-index: 30; transform: translateX(-100%); transition: transform 180ms ease; box-shadow: 4px 0 12px oklch(0% 0 0 / 0.1); } .shell-drawer__toggle:checked ~ .shell-layout .shell-sidebar { transform: translateX(0); } .shell-drawer__toggle:checked ~ .shell-layout .shell-overlay { display: block; } } /* ---- Placeholder pages -------------------------------------------------- */ .placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--wa-space-xl); gap: var(--wa-space-s); color: var(--wa-color-text-quiet); } .placeholder__icon { width: 88px; height: 88px; color: var(--wa-color-brand-60); opacity: 0.5; margin-bottom: var(--wa-space-s); } .placeholder__title { margin: 0; font-size: var(--wa-font-size-2xl); font-weight: 600; letter-spacing: -0.02em; color: var(--wa-color-text-normal); } .placeholder__hint { margin: 0; max-width: 36rem; font-size: var(--wa-font-size-m); } /* ---- Pedidos inbox ------------------------------------------------------ */ /* Scroll-surface + max-width/centering come from the shared `.app-page` class (quento-app.css); only page-specific padding lives here. */ .inbox { padding: var(--wa-space-xl); } @media (max-width: 767px) { .inbox { padding: var(--wa-space-m); } } .inbox__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--wa-space-l); margin-bottom: var(--wa-space-xl); } .inbox__title { font-size: var(--wa-font-size-2xl); font-weight: 600; letter-spacing: -0.02em; margin: 0; } .inbox__title-accent { color: var(--wa-color-brand-40); font-weight: 500; margin-left: 0.2em; } .inbox__subtitle { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-m); margin: var(--wa-space-2xs) 0 0; } .inbox__actions { display: flex; align-items: center; gap: var(--wa-space-s); flex-wrap: wrap; } .inbox__actions wa-input { min-width: 280px; } .inbox__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--wa-space-l); } /* ---- Empty inbox -------------------------------------------------------- */ .inbox__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--wa-space-3xl) var(--wa-space-l); color: var(--wa-color-text-quiet); text-align: center; border: 1px dashed var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-default); } .inbox__empty-icon { width: 56px; height: 56px; color: var(--wa-color-brand-60); opacity: 0.6; margin-bottom: var(--wa-space-m); } .inbox__empty-title { font-size: var(--wa-font-size-l); font-weight: 600; margin: 0 0 var(--wa-space-2xs); color: var(--wa-color-text-normal); } .inbox__empty-hint { font-size: var(--wa-font-size-s); margin: 0; } /* ---- Draft card --------------------------------------------------------- */ .inbox-card { --spacing: var(--wa-space-m); } .inbox-card--empty::part(base) { border-left: 3px solid var(--wa-color-warning-border-loud); } .inbox-card::part(base) { transition: transform 120ms ease, box-shadow 120ms ease; } .inbox-card:hover::part(base) { transform: translateY(-1px); box-shadow: var(--wa-shadow-m); } .inbox-card--needs-review::part(base) { border-left: 3px solid var(--wa-color-warning-border-loud); } .inbox-card--low-confidence::part(base) { border-left: 3px solid var(--wa-color-danger-border-loud); } .inbox-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--wa-space-m); width: 100%; } .inbox-card__head-left { display: flex; align-items: center; gap: var(--wa-space-s); min-width: 0; } .inbox-card__customer { font-weight: 600; font-size: var(--wa-font-size-l); letter-spacing: -0.01em; line-height: 1.2; } .inbox-card__meta { font-size: 0.8rem; color: var(--wa-color-text-quiet); margin-top: 2px; } .inbox-card__lines { width: 100%; border-collapse: collapse; margin: var(--wa-space-2xs) 0; } .inbox-card__lines tr { border-top: 1px solid var(--wa-color-surface-border); } .inbox-card__lines tr:first-child { border-top: 0; } .inbox-card__lines td { padding: var(--wa-space-xs) var(--wa-space-2xs); font-size: 0.9rem; vertical-align: middle; } .inbox-card__qty { width: 3ch; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wa-color-brand-30); } .inbox-card__product { font-weight: 500; } .inbox-card__unit { color: var(--wa-color-text-quiet); font-size: 0.8rem; text-align: right; white-space: nowrap; } .inbox-card__note { margin-top: var(--wa-space-s); } .inbox-card__footer { display: flex; justify-content: space-between; align-items: center; gap: var(--wa-space-s); width: 100%; flex-wrap: wrap; } .inbox-card__footer-right { display: flex; align-items: center; gap: var(--wa-space-s); margin-left: auto; } .inbox-card__hint { font-size: 0.75rem; color: var(--wa-color-text-quiet); font-style: italic; } .inbox-card__note-label { font-weight: 600; margin-right: var(--wa-space-2xs); } /* ---- Confidence ring ---------------------------------------------------- */ .confidence { position: relative; width: 44px; height: 44px; flex-shrink: 0; } .confidence__ring { width: 100%; height: 100%; transform: rotate(-90deg); } .confidence__track, .confidence__fill { fill: none; stroke-width: 3; stroke-linecap: round; } .confidence__track { stroke: var(--wa-color-surface-border); } .confidence--ok .confidence__fill { stroke: var(--wa-color-success-fill-loud); } .confidence--warn .confidence__fill { stroke: var(--wa-color-warning-fill-loud); } .confidence--low .confidence__fill { stroke: var(--wa-color-danger-fill-loud); } .confidence__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wa-color-text-normal); } /* ---- Order draft detail page (Spec-0014) -------------------------------- */ .detail { padding: var(--wa-space-l, 1.25rem); display: flex; flex-direction: column; gap: var(--wa-space-l, 1.25rem); } .detail__back { display: inline-block; font-size: 0.875rem; color: var(--wa-color-text-quiet); text-decoration: none; margin-bottom: var(--wa-space-2xs, 0.25rem); } .detail__back:hover { color: var(--wa-color-text-normal); } .detail__title { margin: 0; display: flex; align-items: center; gap: var(--wa-space-s, 0.5rem); font-size: 1.5rem; } .detail__meta { margin: var(--wa-space-2xs, 0.25rem) 0 0; color: var(--wa-color-text-quiet); font-size: 0.875rem; } .detail__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--wa-space-m, 0.75rem); flex-wrap: wrap; } .detail__actions { display: flex; gap: var(--wa-space-s, 0.5rem); flex-wrap: wrap; } .detail__actions-terminal { color: var(--wa-color-text-quiet); font-style: italic; } .detail__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--wa-space-l, 1.25rem); } @media (max-width: 900px) { .detail__grid { grid-template-columns: 1fr; } } .detail__col { display: flex; flex-direction: column; gap: var(--wa-space-m, 0.75rem); min-width: 0; } .detail-block { background: var(--wa-color-surface-default); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m, 0.5rem); padding: var(--wa-space-m, 0.75rem); } .detail-block__title { margin: 0 0 var(--wa-space-s, 0.5rem); font-size: 1.125rem; } .detail-block__subtitle { margin: var(--wa-space-m, 0.75rem) 0 var(--wa-space-2xs, 0.25rem); font-size: 0.875rem; color: var(--wa-color-text-quiet); text-transform: uppercase; letter-spacing: 0.05em; } .detail-lines { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .detail-lines th, .detail-lines td { padding: var(--wa-space-2xs, 0.25rem) var(--wa-space-s, 0.5rem); text-align: left; border-bottom: 1px solid var(--wa-color-surface-border); } .detail-lines th { font-weight: 600; color: var(--wa-color-text-quiet); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .detail-line__qty { font-variant-numeric: tabular-nums; font-weight: 600; } .detail-unidentified__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--wa-space-2xs, 0.25rem); } .detail-unidentified__item { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s, 0.5rem); padding: var(--wa-space-2xs, 0.25rem); background: var(--wa-color-surface-raised); border-radius: var(--wa-border-radius-s, 0.25rem); } .detail-customer__name { font-weight: 600; font-size: 1rem; } .detail-customer__channel, .detail-customer__address { color: var(--wa-color-text-quiet); font-size: 0.875rem; } /* Spec-0020: the order-detail conversation thread shares the chat-page * styling (lowered-surface background, bubble alignment, speech-bubble * tail). The shared selectors live further down — see the * `.chat-thread__body, .detail-thread .msg…` rules. */ .detail-thread { display: flex; flex-direction: column; gap: var(--wa-space-2xs, 0.25rem); max-height: 600px; overflow-y: auto; background: var(--wa-color-surface-lowered); border-radius: var(--wa-border-radius-m, 0.5rem); padding: var(--wa-space-s, 0.5rem); } .detail-empty { color: var(--wa-color-text-quiet); font-style: italic; } .detail-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--wa-space-2xs, 0.25rem); } .detail-activity__row { display: grid; grid-template-columns: 7rem 6rem 1fr; gap: var(--wa-space-s, 0.5rem); padding: var(--wa-space-2xs, 0.25rem); border-bottom: 1px solid var(--wa-color-surface-border); font-size: 0.875rem; } .detail-activity__time { color: var(--wa-color-text-quiet); font-variant-numeric: tabular-nums; } .detail-activity__actor { font-weight: 600; } /* ---- Conversation bubbles (Spec-0014 §C.5) ----------------------------- */ .msg { border: 1px solid var(--wa-color-surface-border); padding: var(--wa-space-s, 0.5rem); border-radius: var(--wa-border-radius-m, 0.5rem); background: var(--wa-color-surface-raised); } .msg--out { background: var(--wa-color-brand-fill-quiet, #eef2ff); } .msg__meta { display: flex; align-items: center; gap: var(--wa-space-s, 0.5rem); font-size: 0.75rem; color: var(--wa-color-text-quiet); margin-bottom: var(--wa-space-2xs, 0.25rem); } .msg__media { max-width: 100%; border-radius: var(--wa-border-radius-s, 0.25rem); } /* Spec-0014 §C.5: in-draft accent (3px brand-color left border). */ .message--in-draft { border-left: 3px solid var(--wa-color-brand-fill-loud); } .inbox-card__link { text-decoration: none; color: inherit; display: block; } /* ---- Detail page additions (Spec-0014 follow-up) ----------------------- */ .detail-conversation__contact { display: flex; flex-wrap: wrap; gap: var(--wa-space-xs, 0.4rem); align-items: baseline; margin-bottom: var(--wa-space-s, 0.5rem); font-size: 0.875rem; color: var(--wa-color-text-quiet); } .detail-conversation__channel { font-weight: 600; color: var(--wa-color-text-normal); } .detail-conversation__address { font-variant-numeric: tabular-nums; } .detail-line__input--qty { width: 5.5rem; } .detail-sku { margin-top: var(--wa-space-s, 0.5rem); } .detail-sku__hint { font-size: 0.85rem; color: var(--wa-color-text-quiet); margin: 0 0 var(--wa-space-2xs, 0.25rem); } .detail-sku__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--wa-space-2xs, 0.25rem); max-height: 320px; overflow-y: auto; } .detail-sku__pick { width: 100%; text-align: left; } .detail-sku__pick::part(base) { /* Web Awesome buttons expose ::part(base) for the inner clickable area. */ justify-content: flex-start; width: 100%; } .detail-sku__pick-sku { margin-right: var(--wa-space-s, 0.5rem); font-variant-numeric: tabular-nums; } .detail-sku__pick-name { flex: 1; } .detail-sku__pick-unit { margin-left: var(--wa-space-s, 0.5rem); color: var(--wa-color-text-quiet); font-size: 0.85rem; } .detail-sku__empty { color: var(--wa-color-text-quiet); font-style: italic; } /* ---- Chat page (Spec-0017) ------------------------------------------------- * Named classes for /chat (internal/views/chat.go). Replaces DaisyUI's * base-100/200/300 semantic colours and `chat`/`chat-bubble`/`btn`/`alert` * components with WA tokens + WA components. The bubble look reuses the * existing `.msg` system above so /chat and /orders/{id}'s conversation * block render the same. */ .chat-sidebar { background: var(--wa-color-surface-raised); border-right: 1px solid var(--wa-color-surface-border); } .chat-sidebar__header { background: var(--wa-color-surface-raised); border-bottom: 1px solid var(--wa-color-surface-border); } .chat-list { background: var(--wa-color-surface-raised); } .chat-list > * + * { border-top: 1px solid var(--wa-color-surface-border); } .chat-list__item { color: inherit; text-decoration: none; transition: background 120ms ease; } .chat-list__item:hover { background: var(--wa-color-surface-lowered); } .chat-list__item--active { background: var(--wa-color-surface-lowered); } .chat-thread__header { background: var(--wa-color-surface-raised); border-bottom: 1px solid var(--wa-color-surface-border); } .chat-thread__body { background: var(--wa-color-surface-lowered); display: flex; flex-direction: column; gap: var(--wa-space-2xs, 0.25rem); } .chat-reply { background: var(--wa-color-surface-raised); border-top: 1px solid var(--wa-color-surface-border); } .chat-reply__input { width: 100%; resize: none; padding: var(--wa-space-s, 0.5rem); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-s, 0.25rem); background: var(--wa-color-surface-default); color: var(--wa-color-text-normal); font: inherit; line-height: 1.4; } .chat-reply__input:focus { outline: 2px solid var(--wa-color-brand-fill-loud); outline-offset: -1px; } .chat-muted { color: var(--wa-color-text-quiet); } .chat-link { color: var(--wa-color-brand-on-quiet); text-decoration: underline; } /* Bubble alignment + speech-bubble tail. Three surfaces share the rules * via :is() — the chat thread (/chat), the per-draft group wrapper inside * it (Spec-0020), and the order-detail conversation panel (also Spec-0020). * All three are flex columns so `align-self` resolves on the bubble. */ .msg { max-width: 70ch; } :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--in { align-self: flex-start; } :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--out { align-self: flex-end; } /* Speech-bubble tail — two stacked pseudo-elements: ::before is the * border-colored triangle (larger), ::after is the background-colored * triangle (1px inside it), so the tail inherits the bubble's 1px border * seamlessly. */ :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg { position: relative; } :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--in::before, :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--in::after, :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--out::before, :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--out::after { content: ""; position: absolute; bottom: 8px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--in::before { left: -9px; border-right: 9px solid var(--wa-color-surface-border); } :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--in::after { left: -8px; border-top-width: 6px; border-bottom-width: 6px; border-right: 8px solid var(--wa-color-surface-raised); } :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--out::before { right: -9px; border-left: 9px solid var(--wa-color-surface-border); } :is(.chat-thread__body, .chat-draft-group, .detail-thread) .msg--out::after { right: -8px; border-top-width: 6px; border-bottom-width: 6px; border-left: 8px solid var(--wa-color-brand-fill-quiet, #eef2ff); } /* --------------------------------------------------------------------------- * "En curso" live indicator — sonar halo + animated ellipsis. Applied to the * open-status pill on both the orders list and the order detail page to * signal that the order is still receiving updates. * ------------------------------------------------------------------------- */ /* Sonar halo around the tag. The wrapper carries the ripple so it sits * outside the wa-tag shadow root. */ .live-halo-wrap { position: relative; display: inline-block; } .live-halo-wrap::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.55); animation: live-halo 2s ease-out infinite; pointer-events: none; } @keyframes live-halo { 0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(234, 179, 8, 0); } } /* Animated ellipsis after the label. Fixed width so the tag does not reflow * between frames. */ .live-ellipsis::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: live-ellipsis 1.2s steps(4, end) infinite; } @keyframes live-ellipsis { 0% { content: ""; } 25% { content: " ."; } 50% { content: " .."; } 75% { content: " ..."; } 100% { content: ""; } } @media (prefers-reduced-motion: reduce) { .live-halo-wrap::after, .live-ellipsis::after { animation: none; } } /* ---- Spec-0018 live-update animations ---------------------------------- * * Three transient classes — `--enter`, `--glow`, `--leaving` — are attached * server-side by the SSE handler for the duration of the animation, then * dropped on the next patch (or, in the leaving case, the element is * removed after the fade). * * The classes sit on the outer ``, NOT on the * inner ``: Web Awesome's wa-card clips its `::part(base)`, so an * `outline` / `box-shadow` rendered inside the shadow DOM gets cut off, and * idiomorph's in-place class swap doesn't always restart a shadow-DOM * animation. The link is plain HTML; both concerns go away. Keep the * durations in sync with the timeouts in internal/web/orders_sse.go * (0.4s / 2s / 3s). */ .inbox-card__link { display: block; border-radius: var(--wa-border-radius-m); } @keyframes inbox-card-enter { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .inbox-card__link.inbox-card--enter { animation: inbox-card-enter 0.45s cubic-bezier(.2,.7,.3,1) both; } /* Outline pulses outward without affecting layout and doesn't get clipped * by the wa-card's shadow-DOM overflow. */ @keyframes inbox-card-glow { 0% { outline: 0 solid transparent; } 20% { outline: 4px solid var(--wa-color-brand-fill-loud); outline-offset: 2px; } 100% { outline: 0 solid transparent; outline-offset: 0; } } .inbox-card__link.inbox-card--glow { animation: inbox-card-glow 2s ease-out both; } /* Leaving: glow for ~1s, then collapse + fade. The SSE handler removes the * element from the DOM after this animation finishes. */ @keyframes inbox-card-leaving { 0% { opacity: 1; transform: scale(1); outline: 0 solid transparent; } 25% { opacity: 1; transform: scale(1); outline: 4px solid var(--wa-color-danger-fill-loud); outline-offset: 2px; } 60% { opacity: 1; transform: scale(1); outline: 4px solid var(--wa-color-danger-fill-loud); outline-offset: 2px; } 100% { opacity: 0; transform: scale(0.95); outline: 0 solid transparent; } } .inbox-card__link.inbox-card--leaving { animation: inbox-card-leaving 3s ease-in-out both; pointer-events: none; } /* Detail-page equivalent: same outline pulse on the affected block. */ @keyframes detail-block-glow { 0% { outline: 0 solid transparent; } 20% { outline: 3px solid var(--wa-color-brand-fill-loud); outline-offset: 2px; } 100% { outline: 0 solid transparent; outline-offset: 0; } } .detail-block--glow { animation: detail-block-glow 2s ease-out both; border-radius: var(--wa-border-radius-m); } .detail-status--glow { display: inline-block; animation: detail-block-glow 2s ease-out both; border-radius: 999px; } @media (prefers-reduced-motion: reduce) { .inbox-card__link.inbox-card--enter, .inbox-card__link.inbox-card--glow, .inbox-card__link.inbox-card--leaving, .detail-block--glow, .detail-status--glow { animation: none; } }