@charset "UTF-8"; /* * @argentum/ui — design tokens. * * Two layers, on purpose: * 1. PRIMITIVES — raw scales (`--ag-neutral-500`, `--ag-space-4`). Theme-agnostic, * never referenced directly by components. * 2. SEMANTIC — role tokens (`--ag-surface`, `--ag-text`, `--ag-accent`). * Components read ONLY these, so a theme swap is a remap of this file, never a * component edit. * * Dark is the base theme (`:root`); `[data-theme='light']` remaps the semantic layer. * `ThemeProvider` writes `data-theme` onto . Palette identity: liquid silver * ("argentum") neutrals + an aurora-cyan accent + a holographic gradient for NFT * surfaces. */ :root { color-scheme: dark; /* ---- primitives: neutral (cool graphite / silver) ---- */ --ag-neutral-0: #ffffff; --ag-neutral-25: #f6f7fa; --ag-neutral-50: #eceff4; --ag-neutral-100: #dde1ea; --ag-neutral-200: #c2c8d6; --ag-neutral-300: #9ba3b7; --ag-neutral-350: #8b93a8; --ag-neutral-400: #757e95; --ag-neutral-500: #565f75; --ag-neutral-600: #3f4759; --ag-neutral-700: #2c3341; --ag-neutral-800: #1e232e; --ag-neutral-850: #171b24; --ag-neutral-900: #11141c; --ag-neutral-950: #0c0e15; --ag-neutral-1000: #06070c; /* ---- primitives: accent (aurora cyan) ---- */ --ag-accent-100: #cbf6ff; --ag-accent-200: #9deeff; --ag-accent-300: #63e2fb; --ag-accent-400: #34d3f2; --ag-accent-500: #1cbfe0; --ag-accent-600: #12a0be; --ag-accent-700: #127e97; --ag-accent-800: #155f72; /* ---- primitives: holographic partners (for gradients / NFT sheen) ---- */ --ag-holo-violet: #a78bfa; --ag-holo-magenta: #f472b6; --ag-holo-cyan: #34d3f2; --ag-holo-gold: #f4d58d; /* ---- primitives: status ---- */ --ag-green-400: #4bd6a0; --ag-green-500: #2bbd86; --ag-green-700: #14795a; --ag-green-800: #0b5b42; --ag-amber-400: #f5c05a; --ag-amber-500: #eaa63c; --ag-amber-700: #9a6a12; --ag-amber-800: #744708; --ag-red-400: #f97a72; --ag-red-500: #ef5a51; --ag-red-600: #d5392f; --ag-red-700: #a02b26; --ag-blue-400: #64a8ff; --ag-blue-500: #4088f0; --ag-blue-600: #2f6fd0; --ag-blue-700: #1f549e; /* ---- spacing scale (4px base) ---- */ --ag-space-0: 0; --ag-space-1: 0.25rem; --ag-space-2: 0.5rem; --ag-space-3: 0.75rem; --ag-space-4: 1rem; --ag-space-5: 1.25rem; --ag-space-6: 1.5rem; --ag-space-8: 2rem; --ag-space-10: 2.5rem; --ag-space-12: 3rem; --ag-space-16: 4rem; --ag-space-20: 5rem; --ag-space-24: 6rem; /* ---- radii ---- */ --ag-radius-xs: 4px; --ag-radius-sm: 6px; --ag-radius-md: 10px; --ag-radius-lg: 14px; --ag-radius-xl: 20px; --ag-radius-2xl: 28px; --ag-radius-full: 999px; /* ---- typography ---- */ --ag-font-sans: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ag-font-mono: 'Ubuntu Mono', ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace; --ag-text-2xs: 0.6875rem; /* 11px */ --ag-text-xs: 0.75rem; /* 12px */ --ag-text-sm: 0.875rem; /* 14px */ --ag-text-md: 1rem; /* 16px */ --ag-text-lg: 1.125rem; /* 18px */ --ag-text-xl: 1.375rem; /* 22px */ --ag-text-2xl: 1.75rem; /* 28px */ --ag-text-3xl: 2.25rem; /* 36px */ --ag-text-4xl: 3rem; /* 48px */ --ag-weight-regular: 400; --ag-weight-medium: 500; --ag-weight-semibold: 500; --ag-weight-bold: 700; --ag-leading-tight: 1.15; --ag-leading-snug: 1.35; --ag-leading-normal: 1.55; --ag-tracking-tight: -0.01em; --ag-tracking-normal: 0; --ag-tracking-wide: 0.02em; --ag-tracking-widest: 0.18em; /* ---- borders ---- */ --ag-border-width: 1px; /* ---- motion ---- */ --ag-duration-fast: 120ms; --ag-duration-base: 200ms; --ag-duration-slow: 360ms; --ag-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ag-ease-emphasized: cubic-bezier(0.3, 0.7, 0, 1); /* ---- z-index scale ---- */ --ag-z-base: 1; --ag-z-sticky: 100; --ag-z-dropdown: 1000; --ag-z-overlay: 1100; --ag-z-modal: 1200; --ag-z-popover: 1300; --ag-z-toast: 1400; /* ================= semantic layer — DARK (default) ================= */ /* surfaces */ --ag-bg: var(--ag-neutral-950); --ag-bg-subtle: var(--ag-neutral-900); --ag-surface: var(--ag-neutral-850); --ag-surface-raised: var(--ag-neutral-800); --ag-surface-sunken: var(--ag-neutral-950); --ag-surface-hover: color-mix(in srgb, var(--ag-neutral-700) 45%, transparent); --ag-overlay: color-mix(in srgb, var(--ag-neutral-1000) 72%, transparent); /* borders */ --ag-border: color-mix(in srgb, var(--ag-neutral-100) 12%, transparent); --ag-border-strong: color-mix(in srgb, var(--ag-neutral-100) 22%, transparent); --ag-border-subtle: color-mix(in srgb, var(--ag-neutral-100) 7%, transparent); /* text */ --ag-text: var(--ag-neutral-50); --ag-text-muted: var(--ag-neutral-300); --ag-text-subtle: var(--ag-neutral-350); --ag-text-inverted: var(--ag-neutral-950); /* accent */ --ag-accent: var(--ag-accent-500); --ag-accent-hover: var(--ag-accent-400); --ag-accent-active: var(--ag-accent-600); --ag-accent-contrast: var(--ag-neutral-1000); --ag-accent-soft: color-mix(in srgb, var(--ag-accent-500) 16%, transparent); --ag-accent-border: color-mix(in srgb, var(--ag-accent-500) 40%, transparent); --ag-accent-text: var(--ag-accent-300); /* status: success */ --ag-success: var(--ag-green-500); --ag-success-contrast: var(--ag-neutral-1000); --ag-success-soft: color-mix(in srgb, var(--ag-green-500) 16%, transparent); --ag-success-border: color-mix(in srgb, var(--ag-green-500) 38%, transparent); --ag-success-text: var(--ag-green-400); /* status: warning */ --ag-warning: var(--ag-amber-500); --ag-warning-contrast: var(--ag-neutral-1000); --ag-warning-soft: color-mix(in srgb, var(--ag-amber-500) 16%, transparent); --ag-warning-border: color-mix(in srgb, var(--ag-amber-500) 38%, transparent); --ag-warning-text: var(--ag-amber-400); /* status: danger */ --ag-danger: var(--ag-red-600); --ag-danger-hover: var(--ag-red-700); --ag-danger-active: var(--ag-red-700); --ag-danger-contrast: var(--ag-neutral-0); --ag-danger-soft: color-mix(in srgb, var(--ag-red-500) 16%, transparent); --ag-danger-border: color-mix(in srgb, var(--ag-red-500) 40%, transparent); --ag-danger-text: var(--ag-red-400); /* status: info */ --ag-info: var(--ag-blue-600); --ag-info-contrast: var(--ag-neutral-0); --ag-info-soft: color-mix(in srgb, var(--ag-blue-500) 16%, transparent); --ag-info-border: color-mix(in srgb, var(--ag-blue-500) 38%, transparent); --ag-info-text: var(--ag-blue-400); /* focus ring */ --ag-focus-ring: color-mix(in srgb, var(--ag-accent-400) 55%, transparent); --ag-focus-ring-width: 3px; /* fields */ --ag-field-bg: color-mix(in srgb, var(--ag-neutral-1000) 40%, var(--ag-neutral-900)); --ag-field-border: var(--ag-border-strong); --ag-field-placeholder: var(--ag-neutral-500); /* elevation shadows (tuned for dark) */ --ag-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ag-shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.55); --ag-shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.65); --ag-shadow-xl: 0 32px 70px -20px rgba(0, 0, 0, 0.72); --ag-shadow-focus: 0 0 0 var(--ag-focus-ring-width) var(--ag-focus-ring); --ag-glow-accent: 0 0 0 1px var(--ag-accent-border), 0 8px 30px -8px color-mix(in srgb, var(--ag-accent-500) 55%, transparent); /* signature gradients */ --ag-gradient-accent: linear-gradient(135deg, var(--ag-accent-400), var(--ag-accent-600)); --ag-gradient-holo: linear-gradient( 120deg, var(--ag-holo-cyan) 0%, var(--ag-holo-violet) 45%, var(--ag-holo-magenta) 70%, var(--ag-holo-gold) 100% ); --ag-gradient-silver: linear-gradient( 135deg, #e9edf5 0%, #aab4c6 22%, #6f7a90 48%, #c7cfdd 62%, #838ea3 82%, #d8deea 100% ); --ag-gradient-surface: linear-gradient( 160deg, color-mix(in srgb, var(--ag-neutral-700) 45%, var(--ag-surface)) 0%, var(--ag-surface) 55% ); } /* ================= semantic layer — LIGHT ================= */ [data-theme=light] { color-scheme: light; --ag-bg: var(--ag-neutral-25); --ag-bg-subtle: var(--ag-neutral-50); --ag-surface: var(--ag-neutral-0); --ag-surface-raised: var(--ag-neutral-0); --ag-surface-sunken: var(--ag-neutral-50); --ag-surface-hover: color-mix(in srgb, var(--ag-neutral-500) 8%, transparent); --ag-overlay: color-mix(in srgb, var(--ag-neutral-700) 32%, transparent); --ag-border: color-mix(in srgb, var(--ag-neutral-900) 12%, transparent); --ag-border-strong: color-mix(in srgb, var(--ag-neutral-900) 20%, transparent); --ag-border-subtle: color-mix(in srgb, var(--ag-neutral-900) 7%, transparent); --ag-text: var(--ag-neutral-900); --ag-text-muted: var(--ag-neutral-500); --ag-text-subtle: var(--ag-neutral-500); --ag-text-inverted: var(--ag-neutral-0); --ag-accent: var(--ag-accent-600); --ag-accent-hover: var(--ag-accent-500); --ag-accent-active: var(--ag-accent-700); --ag-accent-contrast: var(--ag-neutral-1000); --ag-accent-soft: color-mix(in srgb, var(--ag-accent-500) 14%, transparent); --ag-accent-border: color-mix(in srgb, var(--ag-accent-600) 42%, transparent); --ag-accent-text: var(--ag-accent-800); --ag-success: var(--ag-green-500); --ag-success-text: var(--ag-green-800); --ag-success-soft: color-mix(in srgb, var(--ag-green-500) 14%, transparent); --ag-success-border: color-mix(in srgb, var(--ag-green-500) 38%, transparent); --ag-warning: var(--ag-amber-500); --ag-warning-text: var(--ag-amber-800); --ag-warning-soft: color-mix(in srgb, var(--ag-amber-500) 16%, transparent); --ag-warning-border: color-mix(in srgb, var(--ag-amber-500) 40%, transparent); --ag-danger: var(--ag-red-600); --ag-danger-text: var(--ag-red-700); --ag-danger-soft: color-mix(in srgb, var(--ag-red-500) 12%, transparent); --ag-danger-border: color-mix(in srgb, var(--ag-red-500) 38%, transparent); --ag-info: var(--ag-blue-600); --ag-info-text: var(--ag-blue-700); --ag-info-soft: color-mix(in srgb, var(--ag-blue-500) 12%, transparent); --ag-info-border: color-mix(in srgb, var(--ag-blue-500) 36%, transparent); --ag-field-bg: var(--ag-neutral-0); --ag-field-border: var(--ag-border-strong); --ag-field-placeholder: var(--ag-neutral-400); --ag-shadow-sm: 0 1px 2px rgba(19, 23, 34, 0.08); --ag-shadow-md: 0 8px 20px -8px rgba(19, 23, 34, 0.16); --ag-shadow-lg: 0 20px 44px -16px rgba(19, 23, 34, 0.22); --ag-shadow-xl: 0 32px 70px -22px rgba(19, 23, 34, 0.26); --ag-gradient-surface: linear-gradient(160deg, var(--ag-neutral-0) 0%, var(--ag-neutral-50) 100%); } /* Honour a reduced-motion preference for every transition/animation the kit ships. */ @media (prefers-reduced-motion: reduce) { :root { --ag-duration-fast: 0ms; --ag-duration-base: 0ms; --ag-duration-slow: 0ms; } } /* * @argentum/ui — base layer. * * Minimal, low-specificity reset + document defaults driven by the tokens. Selectors * use `:where()` (specificity 0) so nothing here ever out-ranks a component rule or a * consumer override — the only exception is `body`, which is meant to set the page's * ground truth (font, colour, background) from the active theme. */ *, *::before, *::after { box-sizing: border-box; } /* * Direction axis: +1 in LTR, -1 in RTL. The kit is built on logical properties * (`padding-inline`, `inset-inline-*`, `text-align: start`) so most of it mirrors for * free under `dir="rtl"`; this var flips the few genuinely physical `translateX` * transforms (Switch thumb, SegmentedControl highlight) that logical props can't. */ :root { --ag-dir: 1; } [dir=rtl] { --ag-dir: -1; } /* Directional glyphs (arrows, horizontal chevrons) carry `data-flip-rtl` and mirror * under RTL so a "next" arrow points the reading direction. */ [dir=rtl] [data-flip-rtl] { transform: scaleX(-1); } /* Numbers, phone numbers and codes always read left-to-right, even inside an RTL * paragraph — without this, bidi reorders "482 913" into "913 482". */ .ag-ltr-nums { direction: ltr; unicode-bidi: isolate; } :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--ag-font-sans); font-size: var(--ag-text-md); font-weight: var(--ag-weight-regular); line-height: var(--ag-leading-normal); color: var(--ag-text); background-color: var(--ag-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scrollbar-color: var(--ag-neutral-600) transparent; } ::selection { background: var(--ag-accent-soft); color: var(--ag-text); } :where(h1, h2, h3, h4, h5, h6) { line-height: var(--ag-leading-tight); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-tight); } :where(a) { color: var(--ag-accent-text); text-decoration: none; } :where(a:hover) { text-decoration: underline; } :where(button, input, select, textarea, optgroup) { font: inherit; letter-spacing: inherit; color: inherit; } :where(code, pre, kbd, samp) { font-family: var(--ag-font-mono); font-size: 0.9em; } :where(img, svg, video, canvas) { display: block; max-width: 100%; } :where(ul, ol) { margin: 0; } /* Screen-reader-only content that stays in the accessibility tree. */ .ag-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* * Under Windows High Contrast / forced-colors the OS strips box-shadow, which is how * most of the kit paints focus rings — so keyboard focus would vanish exactly for the * users who most need it. Restore a system-coloured outline as a floor for every * focusable element; component box-shadow rings still apply everywhere else. */ @media (forced-colors: active) { :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } } /* * @argentum/ui — accent palettes ("skins"). * * A design here is just an accent ramp + its text contrast. Every semantic accent token * (`--ag-accent`, `-hover`, `-soft`, `-border`, `-text`), the `--ag-gradient-accent` * button fill, `--ag-glow-accent`, and `--ag-focus-ring` all derive from * `--ag-accent-100..800`, so overriding the ramp reskins buttons, links, focus rings, * switches, tabs, the countdown ring — everything — with zero component changes. * * `ThemeProvider` writes `data-accent` onto . The default (no attribute, or * `argent`) is the aurora-cyan defined in tokens.css. Imported AFTER tokens.css so an * overlay's `--ag-accent-contrast` wins over the theme layer in both light and dark. * * Contrast is chosen per palette so the primary button/badge (accent fill) clears WCAG * AA in BOTH themes: light hues (amber/emerald) take dark text; deep hues * (violet/rose) take white. */ [data-accent=amber] { --ag-accent-100: #ffe8c7; --ag-accent-200: #ffd39a; --ag-accent-300: #ffb866; --ag-accent-400: #ff9e3d; --ag-accent-500: #f5851b; --ag-accent-600: #db6f0c; --ag-accent-700: #a85307; --ag-accent-800: #7c3d08; --ag-accent-contrast: var(--ag-neutral-1000); } [data-accent=emerald] { --ag-accent-100: #d1fae5; --ag-accent-200: #a7f3d0; --ag-accent-300: #6ee7b7; --ag-accent-400: #34d399; --ag-accent-500: #10b981; --ag-accent-600: #059669; --ag-accent-700: #047857; --ag-accent-800: #065f46; --ag-accent-contrast: var(--ag-neutral-1000); } [data-accent=violet] { --ag-accent-100: #ede9fe; --ag-accent-200: #ddd6fe; --ag-accent-300: #c4b5fd; --ag-accent-400: #a78bfa; --ag-accent-500: #8b5cf6; --ag-accent-600: #7c3aed; --ag-accent-700: #6d28d9; --ag-accent-800: #5b21b6; --ag-accent-contrast: var(--ag-neutral-0); } [data-accent=rose] { --ag-accent-100: #ffe4e6; --ag-accent-200: #fecdd3; --ag-accent-300: #fda4af; --ag-accent-400: #fb7185; --ag-accent-500: #e11d48; --ag-accent-600: #be123c; --ag-accent-700: #9f1239; --ag-accent-800: #881337; --ag-accent-contrast: var(--ag-neutral-0); } [data-accent=ubuntu] { --ag-accent-100: #fde4d8; --ag-accent-200: #fac6ae; --ag-accent-300: #f5a17b; --ag-accent-400: #ef7a49; --ag-accent-500: #e95420; --ag-accent-600: #d8541f; --ag-accent-700: #b23e12; --ag-accent-800: #8a2f0e; --ag-accent-contrast: var(--ag-neutral-1000); } .ag-attach-menu { min-width: 14rem; } .ag-audio-msg { display: flex; align-items: center; gap: var(--ag-space-3); min-width: 240px; max-width: 320px; color: inherit; } /* ---- toggle: plain round IconButton (no cover art) ---- */ .ag-audio-msg__toggle.ag-btn { --ag-btn-height: 2.75rem; --ag-btn-radius: var(--ag-radius-full); flex: none; } /* ---- toggle: cover art with a play/pause overlay ---- */ .ag-audio-msg__cover { position: relative; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--ag-radius-full); overflow: hidden; background: var(--ag-surface-sunken); color: var(--ag-neutral-0); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ag-audio-msg__cover:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-audio-msg__cover:disabled { cursor: not-allowed; opacity: 0.6; } .ag-audio-msg__cover-image { display: block; width: 100%; height: 100%; object-fit: cover; } .ag-audio-msg__cover-play { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ag-neutral-1000) 35%, transparent); color: var(--ag-neutral-0); transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-audio-msg__cover:hover:not(:disabled) .ag-audio-msg__cover-play { background: color-mix(in srgb, var(--ag-neutral-1000) 50%, transparent); } /* ---- title / performer / seek stack ---- */ .ag-audio-msg__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ag-audio-msg__title { overflow: hidden; color: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .ag-audio-msg__performer { overflow: hidden; color: var(--ag-text-subtle); font-size: var(--ag-text-xs); text-overflow: ellipsis; white-space: nowrap; } .ag-audio-msg__seek-row { display: flex; align-items: center; gap: var(--ag-space-2); margin-top: 2px; } .ag-audio-msg__track { position: relative; display: flex; align-items: center; flex: 1; height: var(--ag-space-4); cursor: pointer; touch-action: none; border-radius: var(--ag-radius-full); } .ag-audio-msg__track[role=slider]:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-audio-msg__track[data-disabled] { cursor: default; } .ag-audio-msg__track-bg { position: absolute; inset-inline: 0; height: 3px; border-radius: var(--ag-radius-full); background: color-mix(in srgb, currentColor 20%, transparent); } .ag-audio-msg__track-fill { position: absolute; inset-inline-start: 0; height: 3px; border-radius: var(--ag-radius-full); background: var(--ag-accent); transition: width var(--ag-duration-fast) var(--ag-ease-standard); } .ag-audio-msg__track[data-disabled] .ag-audio-msg__track-fill { background: color-mix(in srgb, currentColor 32%, transparent); } .ag-audio-msg__track-thumb { position: absolute; inset-inline-start: 0; width: var(--ag-space-3); height: var(--ag-space-3); margin-inline-start: calc(var(--ag-space-3) / -2); border-radius: var(--ag-radius-full); background: var(--ag-accent); box-shadow: var(--ag-shadow-sm); transition: inset-inline-start var(--ag-duration-fast) var(--ag-ease-standard), transform var(--ag-duration-fast) var(--ag-ease-standard); pointer-events: none; } .ag-audio-msg__track[role=slider]:hover .ag-audio-msg__track-thumb, .ag-audio-msg__track[role=slider]:focus-visible .ag-audio-msg__track-thumb, .ag-audio-msg__track[data-dragging] .ag-audio-msg__track-thumb { transform: scale(1.2); } .ag-audio-msg__time { flex: none; color: var(--ag-text-subtle); font-size: var(--ag-text-2xs); font-variant-numeric: tabular-nums; } .ag-chat-header { display: flex; align-items: center; gap: var(--ag-space-3); min-block-size: 3.75rem; padding-inline: var(--ag-space-4); padding-block: var(--ag-space-2); border-block-end: var(--ag-border-width) solid var(--ag-border); background: var(--ag-surface); } .ag-chat-header__back { flex: none; } .ag-chat-header__avatar { display: inline-flex; flex: none; } .ag-chat-header__identity { display: flex; flex: 1; flex-direction: column; justify-content: center; min-inline-size: 0; } .ag-chat-header__title { overflow: hidden; color: var(--ag-text); font-size: var(--ag-text-md); font-weight: var(--ag-weight-semibold); line-height: var(--ag-leading-snug); text-overflow: ellipsis; white-space: nowrap; } .ag-chat-header__subtitle { overflow: hidden; color: var(--ag-text-muted); font-size: var(--ag-text-xs); line-height: var(--ag-leading-snug); text-overflow: ellipsis; white-space: nowrap; } .ag-chat-header__actions { display: flex; flex: none; align-items: center; gap: var(--ag-space-1); } .ag-chat-list { display: flex; flex-direction: column; gap: var(--ag-space-1); padding: var(--ag-space-2); min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ag-border-strong) transparent; } .ag-chat-list::-webkit-scrollbar { width: 6px; } .ag-chat-list::-webkit-scrollbar-track { background: transparent; } .ag-chat-list::-webkit-scrollbar-thumb { background: var(--ag-border-strong); border-radius: var(--ag-radius-full); } .ag-chat-list::-webkit-scrollbar-thumb:hover { background: var(--ag-text-subtle); } /* The listitem wrapper is a11y-only: `display: contents` keeps `role="listitem"` in the * accessibility tree (list > listitem > button) while leaving the row button as the real * flex child, so gap/layout are unchanged. */ .ag-chat-list__row { display: contents; } .ag-chat-item { position: relative; display: flex; align-items: center; gap: var(--ag-space-3); padding-block: var(--ag-space-3); padding-inline: var(--ag-space-3); overflow: hidden; border-radius: var(--ag-radius-md); background: transparent; color: var(--ag-text); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard), transform var(--ag-duration-fast) var(--ag-ease-standard); } .ag-chat-item:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-chat-item:hover { background: var(--ag-surface-hover); } .ag-chat-item:active { transform: translateY(0.5px) scale(0.99); } .ag-chat-item[data-selected] { background: var(--ag-gradient-accent); } .ag-chat-item[data-selected]:hover { filter: brightness(1.04); } /* ---- avatar ---- */ .ag-chat-item__avatar { flex: none; display: inline-flex; } /* ---- body: two stacked rows, vertically centred against the avatar ---- */ .ag-chat-item__body { display: flex; flex-direction: column; justify-content: center; gap: var(--ag-space-1); flex: 1 1 auto; min-width: 0; } .ag-chat-item__row { display: flex; align-items: center; gap: var(--ag-space-2); min-width: 0; } .ag-chat-item__title-group { display: flex; align-items: center; gap: var(--ag-space-1); flex: 1 1 auto; min-width: 0; } .ag-chat-item__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); color: var(--ag-text); } .ag-chat-item__icon { flex: none; display: inline-flex; color: var(--ag-text-subtle); } .ag-chat-item__icon--verified { color: var(--ag-accent-text); } .ag-chat-item__time { flex: none; font-size: var(--ag-text-xs); color: var(--ag-text-subtle); font-variant-numeric: tabular-nums; } /* ---- preview row ---- */ .ag-chat-item__preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-regular); color: var(--ag-text-muted); } .ag-chat-item__preview[data-variant=typing] { color: var(--ag-accent-text); } .ag-chat-item__sender { font-weight: var(--ag-weight-medium); } .ag-chat-item__draft-label { color: var(--ag-danger-text); font-weight: var(--ag-weight-medium); } .ag-chat-item__badge { flex: none; } .ag-chat-item__ticks { flex: none; display: inline-flex; color: var(--ag-text-subtle); } .ag-chat-item__ticks[data-status=read] { color: var(--ag-accent-text); } .ag-chat-item__ticks[data-status=error] { color: var(--ag-danger-text); } /* ---- selected: solid accent fill, so every child needs to invert for contrast ---- */ .ag-chat-item[data-selected] .ag-chat-item__title, .ag-chat-item[data-selected] .ag-chat-item__time, .ag-chat-item[data-selected] .ag-chat-item__preview, .ag-chat-item[data-selected] .ag-chat-item__sender, .ag-chat-item[data-selected] .ag-chat-item__draft-label, .ag-chat-item[data-selected] .ag-chat-item__icon, .ag-chat-item[data-selected] .ag-chat-item__ticks { color: var(--ag-accent-contrast); } /* * Two plain grid tracks, declared with no explicit `left`/`right` placement — CSS * Grid always lays track 1 at the container's inline-start, so under `dir="rtl"` * the sidebar moves to the right and the main column fills the remaining space on * the left with zero extra rules here. */ .ag-chat-shell { --ag-chat-shell-sidebar-width: clamp(280px, 26vw, 360px); display: grid; grid-template-columns: var(--ag-chat-shell-sidebar-width) minmax(0, 1fr); block-size: 100%; min-block-size: 0; overflow: hidden; background: var(--ag-bg); } .ag-chat-shell__sidebar { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; overflow: hidden; border-inline-end: var(--ag-border-width) solid var(--ag-border); background: var(--ag-surface); } .ag-chat-shell__main { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; overflow: hidden; background: var(--ag-bg-subtle); } /* * Narrow viewports: one column, one visible pane. Both panes stay mounted — this * only toggles `display`, so a hidden pane is also removed from the accessibility * tree for free, with no viewport-detection JS in the component itself. */ @media (max-width: 48rem) { .ag-chat-shell { grid-template-columns: minmax(0, 1fr); } .ag-chat-shell__sidebar { display: none; } .ag-chat-shell__main { display: flex; } .ag-chat-shell[data-view=list] .ag-chat-shell__sidebar { display: flex; } .ag-chat-shell[data-view=list] .ag-chat-shell__main { display: none; } } .ag-composer { display: flex; flex-direction: column; gap: var(--ag-space-2); padding: var(--ag-space-3); background: var(--ag-surface); border-block-start: var(--ag-border-width) solid var(--ag-border); } /* ---- reply / edit context bar ---- */ .ag-composer__context { display: flex; align-items: center; gap: var(--ag-space-2); padding: var(--ag-space-2) var(--ag-space-3); border-radius: var(--ag-radius-md); background: var(--ag-surface-raised); border-inline-start: 3px solid var(--ag-accent); } .ag-composer__context[data-state=edit] { border-inline-start-color: var(--ag-warning); } .ag-composer__context-icon { display: inline-flex; flex: none; color: var(--ag-accent-text); } .ag-composer__context[data-state=edit] .ag-composer__context-icon { color: var(--ag-warning-text); } .ag-composer__context-body { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ag-text); font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); text-overflow: ellipsis; white-space: nowrap; } .ag-composer__context-close { flex: none; } /* ---- input row ---- */ .ag-composer__row { display: flex; align-items: flex-end; gap: var(--ag-space-1); padding: var(--ag-space-1); border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-xl); background: var(--ag-field-bg); transition: border-color var(--ag-duration-fast) var(--ag-ease-standard), box-shadow var(--ag-duration-fast) var(--ag-ease-standard); } .ag-composer__row:focus-within { border-color: var(--ag-accent); box-shadow: var(--ag-shadow-focus); } .ag-composer__action { flex: none; align-self: flex-end; } .ag-composer__textarea { flex: 1 1 auto; min-width: 0; max-height: 9.5rem; padding: var(--ag-space-2) var(--ag-space-1); overflow-y: auto; border: 0; background: transparent; color: var(--ag-text); font-family: inherit; font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); resize: none; } .ag-composer__textarea::placeholder { color: var(--ag-field-placeholder); } .ag-composer__textarea:focus-visible { outline: none; } /* ---- send button pop-in (mounts fresh each time it swaps in for the mic button) ---- */ @keyframes ag-composer-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ag-composer__send { animation: ag-composer-pop var(--ag-duration-base) var(--ag-ease-emphasized); } @media (prefers-reduced-motion: reduce) { .ag-composer__send { animation: none; } } .ag-contact-msg { display: flex; align-items: center; gap: var(--ag-space-3); min-width: 220px; color: inherit; } .ag-contact-msg__avatar { flex: none; } .ag-contact-msg__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ag-contact-msg__name { overflow: hidden; color: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } .ag-contact-msg__phone { overflow: hidden; color: var(--ag-text-subtle); font-size: var(--ag-text-xs); text-overflow: ellipsis; white-space: nowrap; } .ag-contact-msg__action { display: inline-flex; flex: none; } .ag-date-separator { position: sticky; top: var(--ag-space-2); z-index: var(--ag-z-sticky); display: flex; justify-content: center; width: 100%; padding-block: var(--ag-space-2); pointer-events: none; } .ag-date-separator__pill { padding: var(--ag-space-1) var(--ag-space-3); border-radius: var(--ag-radius-full); background: var(--ag-overlay); color: var(--ag-text); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); box-shadow: var(--ag-shadow-sm); pointer-events: auto; } .ag-file-msg { display: flex; align-items: center; gap: var(--ag-space-3); min-width: 220px; max-width: 320px; color: inherit; } .ag-file-msg__glyph { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--ag-space-10); height: var(--ag-space-10); border-radius: var(--ag-radius-md); background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-bold); letter-spacing: var(--ag-tracking-wide); text-transform: uppercase; } .ag-file-msg__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ag-file-msg__name { overflow: hidden; color: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .ag-file-msg__meta { overflow: hidden; color: var(--ag-text-subtle); font-size: var(--ag-text-xs); text-overflow: ellipsis; white-space: nowrap; } .ag-file-msg__download { flex: none; } .ag-file-msg__ring { position: relative; display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; color: inherit; } .ag-file-msg__ring-svg { grid-area: 1/1; transform: rotate(-90deg); } .ag-file-msg__ring-track { fill: none; stroke: color-mix(in srgb, currentColor 20%, transparent); } .ag-file-msg__ring-arc { fill: none; stroke: var(--ag-accent); stroke-linecap: round; transition: stroke-dashoffset var(--ag-duration-slow) var(--ag-ease-standard); } .ag-file-msg__ring-value { grid-area: 1/1; font-size: 8px; font-weight: var(--ag-weight-semibold); font-variant-numeric: tabular-nums; } .ag-folder-tabs { position: relative; display: flex; align-items: center; gap: var(--ag-space-1); padding-block-end: var(--ag-space-2); border-block-end: var(--ag-border-width) solid var(--ag-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--ag-border-strong) transparent; } .ag-folder-tabs::-webkit-scrollbar { height: 6px; } .ag-folder-tabs::-webkit-scrollbar-track { background: transparent; } .ag-folder-tabs::-webkit-scrollbar-thumb { background: var(--ag-border-strong); border-radius: var(--ag-radius-full); } .ag-folder-tabs::-webkit-scrollbar-thumb:hover { background: var(--ag-text-subtle); } /* `left: 0` (physical, not `inset-inline-start`) is deliberate: the JS-measured `offsetLeft`/`translateX` driving this indicator is already a physical pixel value that the browser computes correctly per-direction (verified — flex reverses tab order under `dir="rtl"` and `offsetLeft` mirrors with it), so no `--ag-dir` flip is needed here; anchoring with a logical property would double-flip it. */ .ag-folder-tabs__indicator { position: absolute; left: 0; inset-block-end: 0; height: 2px; border-radius: var(--ag-radius-full); background: var(--ag-accent); pointer-events: none; transition: transform var(--ag-duration-base) var(--ag-ease-standard), width var(--ag-duration-base) var(--ag-ease-standard); } .ag-folder-tabs__tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--ag-space-2); height: 2.25rem; padding-inline: var(--ag-space-3); border: 0; border-radius: var(--ag-radius-md); background: transparent; color: var(--ag-text-muted); font-family: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-folder-tabs__tab:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-folder-tabs__tab:hover:not([data-selected]) { color: var(--ag-text); background: var(--ag-surface-hover); } .ag-folder-tabs__tab[data-selected] { color: var(--ag-accent-text); } .ag-folder-tabs__label { display: inline-flex; align-items: center; } .ag-folder-tabs__count { flex: none; } .ag-gif-picker { display: flex; flex-direction: column; width: 20rem; max-height: 26rem; padding: var(--ag-space-2); gap: var(--ag-space-2); background: var(--ag-surface-raised); border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-lg); box-shadow: var(--ag-shadow-md); } .ag-gif-picker__search { flex: none; } .ag-gif-picker__body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ag-border-strong) transparent; } .ag-gif-picker__body::-webkit-scrollbar { width: 6px; } .ag-gif-picker__body::-webkit-scrollbar-track { background: transparent; } .ag-gif-picker__body::-webkit-scrollbar-thumb { background: var(--ag-border-strong); border-radius: var(--ag-radius-full); } .ag-gif-picker__body::-webkit-scrollbar-thumb:hover { background: var(--ag-text-subtle); } .ag-gif-picker__status { display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: var(--ag-space-4); text-align: center; } /* A CSS-columns "masonry" — items stack top-to-bottom per column instead of syncing row heights across columns, so each GIF keeps its own aspect ratio without gaps. */ .ag-gif-picker__grid { columns: 2; column-gap: var(--ag-space-2); } .ag-gif-picker__item { display: block; width: 100%; margin-block-end: var(--ag-space-2); padding: 0; border: 0; border-radius: var(--ag-radius-md); background: var(--ag-surface-sunken); overflow: hidden; break-inside: avoid; cursor: pointer; transition: transform var(--ag-duration-fast) var(--ag-ease-emphasized), box-shadow var(--ag-duration-fast) var(--ag-ease-standard); } .ag-gif-picker__item:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-gif-picker__item:hover { transform: scale(1.02); } .ag-gif-picker__item:active { transform: scale(0.98); } .ag-gif-picker__image { display: block; width: 100%; height: auto; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .ag-gif-picker__item { transition: none; } .ag-gif-picker__item:hover, .ag-gif-picker__item:active { transform: none; } } .ag-link-preview { position: relative; display: flex; gap: var(--ag-space-3); max-width: 360px; padding-inline-start: var(--ag-space-3); color: inherit; } .ag-link-preview__bar { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; border-radius: var(--ag-radius-full); background: var(--ag-accent); } .ag-link-preview__thumb { flex: none; overflow: hidden; inline-size: 56px; block-size: 56px; border-radius: var(--ag-radius-md); background: var(--ag-surface-sunken); } .ag-link-preview__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .ag-link-preview__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; padding-block: var(--ag-space-1) 0; } .ag-link-preview__site { overflow: hidden; color: var(--ag-accent-text); font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-wide); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .ag-link-preview__title { color: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); line-height: var(--ag-leading-snug); } .ag-link-preview__link { color: inherit; text-decoration: none; } .ag-link-preview__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ag-radius-md); } .ag-link-preview__link:focus-visible { outline: none; } .ag-link-preview__link:focus-visible::after { box-shadow: var(--ag-shadow-focus); } .ag-link-preview__description { display: -webkit-box; overflow: hidden; margin: 0; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ag-text-subtle); font-size: var(--ag-text-xs); line-height: var(--ag-leading-snug); } .ag-media-viewer { position: fixed; inset: 0; z-index: var(--ag-z-modal); --ag-text: var(--ag-neutral-0); --ag-text-muted: var(--ag-neutral-200); --ag-surface-raised: color-mix(in srgb, var(--ag-neutral-1000) 45%, transparent); --ag-border-strong: color-mix(in srgb, var(--ag-neutral-0) 20%, transparent); } .ag-media-viewer__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ag-neutral-1000) 92%, transparent); animation: ag-media-viewer-backdrop-in var(--ag-duration-base) var(--ag-ease-standard); } .ag-media-viewer__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; inline-size: 100%; block-size: 100%; padding: var(--ag-space-6) var(--ag-space-6) var(--ag-space-5); outline: none; } .ag-media-viewer__close { position: absolute; top: var(--ag-space-4); inset-inline-end: var(--ag-space-4); z-index: 2; } .ag-media-viewer__stage { position: relative; display: flex; flex: 1; min-block-size: 0; align-items: center; justify-content: center; } .ag-media-viewer__nav { position: absolute; inset-block: 0; margin-block: auto; z-index: 1; } .ag-media-viewer__nav--prev { inset-inline-start: var(--ag-space-2); } .ag-media-viewer__nav--next { inset-inline-end: var(--ag-space-2); } .ag-media-viewer__media { display: flex; max-inline-size: min(100%, 1200px); max-block-size: 100%; } .ag-media-viewer__image, .ag-media-viewer__video { max-inline-size: 100%; max-block-size: 100%; border-radius: var(--ag-radius-md); box-shadow: var(--ag-shadow-xl); } .ag-media-viewer__footer { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--ag-space-1); padding-block-start: var(--ag-space-4); text-align: center; } .ag-media-viewer__caption { max-inline-size: 40rem; color: var(--ag-text); font-size: var(--ag-text-sm); } .ag-media-viewer__counter { color: var(--ag-text-muted); font-size: var(--ag-text-xs); letter-spacing: var(--ag-tracking-wide); } @keyframes ag-media-viewer-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ag-media-viewer__backdrop { animation: none; } } .ag-msg { --ag-msg-bg: var(--ag-surface-raised); --ag-msg-author-2: var(--ag-holo-violet); --ag-msg-author-6: var(--ag-holo-magenta); position: relative; display: flex; flex-direction: column; gap: var(--ag-space-1); width: fit-content; max-width: min(34rem, 82%); margin-inline-end: auto; padding: var(--ag-space-2) var(--ag-space-3); border-radius: var(--ag-radius-lg); background: var(--ag-msg-bg); color: var(--ag-text); font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); overflow-wrap: anywhere; } [data-theme=light] .ag-msg { /* the raw holo primitives are theme-invariant and too light for AA text contrast on a white bubble, so darken them toward the near-black neutral for the light theme only */ --ag-msg-author-2: color-mix(in srgb, var(--ag-holo-violet) 70%, var(--ag-neutral-1000)); --ag-msg-author-6: color-mix(in srgb, var(--ag-holo-magenta) 70%, var(--ag-neutral-1000)); } .ag-msg[data-direction=out] { --ag-msg-bg: var(--ag-accent-soft); margin-inline-start: auto; margin-inline-end: 0; } /* ---- tail ---- */ .ag-msg[data-direction=in][data-tail] { border-end-start-radius: var(--ag-radius-xs); } .ag-msg[data-direction=out][data-tail] { border-end-end-radius: var(--ag-radius-xs); } .ag-msg[data-tail]::after { content: ""; position: absolute; bottom: 0; width: 8px; height: 12px; background: var(--ag-msg-bg); } .ag-msg[data-direction=in][data-tail]::after { inset-inline-start: -7px; clip-path: polygon(100% 0, 100% 100%, 0% 100%); } .ag-msg[data-direction=out][data-tail]::after { inset-inline-end: -7px; clip-path: polygon(0% 0%, 100% 100%, 0% 100%); } /* ---- reply quote slot ---- */ .ag-msg__reply { margin-bottom: var(--ag-space-1); } /* ---- forwarded-from slot ---- */ .ag-msg__forwarded { display: flex; align-items: center; gap: var(--ag-space-1); margin-bottom: 2px; color: var(--ag-accent-text); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-medium); } /* ---- author slot ---- */ .ag-msg__author { color: var(--ag-accent-text); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); line-height: var(--ag-leading-tight); } .ag-msg__author[data-author-color="0"] { color: var(--ag-danger-text); } .ag-msg__author[data-author-color="1"] { color: var(--ag-warning-text); } .ag-msg__author[data-author-color="2"] { color: var(--ag-msg-author-2); } .ag-msg__author[data-author-color="3"] { color: var(--ag-success-text); } .ag-msg__author[data-author-color="4"] { color: var(--ag-accent-text); } .ag-msg__author[data-author-color="5"] { color: var(--ag-info-text); } .ag-msg__author[data-author-color="6"] { color: var(--ag-msg-author-6); } /* ---- content ---- */ .ag-msg__content { white-space: pre-wrap; } /* ---- reactions slot ---- */ .ag-msg__reactions { display: flex; flex-wrap: wrap; gap: var(--ag-space-1); margin-top: var(--ag-space-1); } /* ---- meta row ---- */ .ag-msg__meta { display: flex; align-self: flex-end; align-items: center; gap: var(--ag-space-1); margin-top: 2px; color: var(--ag-text-subtle); font-size: var(--ag-text-2xs); line-height: 1; } .ag-msg__edited { font-style: italic; } .ag-msg__time { display: inline-block; } .ag-message-context-menu { display: flex; flex-direction: column; min-inline-size: 14rem; } .ag-message-context-menu__reactions { display: flex; align-items: center; gap: var(--ag-space-1); padding: var(--ag-space-1); } .ag-message-context-menu__reaction { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--ag-radius-md); background: transparent; font-size: var(--ag-text-xl); line-height: 1; cursor: pointer; transition: transform var(--ag-duration-fast) var(--ag-ease-emphasized), background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-message-context-menu__reaction:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-message-context-menu__reaction:hover { background: var(--ag-surface-hover); transform: scale(1.2); } .ag-message-context-menu__reaction:active { transform: scale(1.05); } .ag-msg-group { display: flex; align-items: flex-end; gap: var(--ag-space-2); width: 100%; } .ag-msg-group__avatar { flex: none; align-self: flex-end; } .ag-msg-group__stack { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--ag-space-1); min-width: 0; } .ag-msg-text { display: inline; overflow-wrap: anywhere; white-space: pre-wrap; } .ag-msg-text [data-part=bold] { font-weight: var(--ag-weight-bold); } .ag-msg-text [data-part=italic] { font-style: italic; } .ag-msg-text [data-part=underline] { text-decoration: underline; text-underline-offset: 2px; } .ag-msg-text [data-part=strikethrough] { text-decoration: line-through; } .ag-msg-text__code { padding: 0.05em 0.35em; border-radius: var(--ag-radius-xs); background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font-family: var(--ag-font-mono); font-size: 0.9em; white-space: pre-wrap; } .ag-msg-text__pre { display: block; overflow-x: auto; margin-block: var(--ag-space-1); padding: var(--ag-space-2) var(--ag-space-3); border: var(--ag-border-width) solid var(--ag-border-subtle); border-radius: var(--ag-radius-sm); background: var(--ag-surface-sunken); color: inherit; font-family: var(--ag-font-mono); font-size: 0.9em; line-height: var(--ag-leading-normal); white-space: pre-wrap; overflow-wrap: anywhere; } /* A `code` entity nested inside a `pre` entity (fenced code block) shouldn't double up the inline-code chip styling — the `pre` block already supplies the monospace treatment. */ .ag-msg-text__pre .ag-msg-text__code { padding: 0; background: none; } .ag-msg-text__link { color: var(--ag-accent-text); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--ag-radius-xs); } .ag-msg-text__link:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-msg-text__link:hover { text-decoration-thickness: 2px; } .ag-msg-text__mention, .ag-msg-text__hashtag { display: inline; margin: 0; padding: 0; border: 0; border-radius: var(--ag-radius-xs); background: none; color: var(--ag-accent-text); font: inherit; cursor: pointer; } .ag-msg-text__mention:focus-visible, .ag-msg-text__hashtag:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-msg-text__mention:hover, .ag-msg-text__hashtag:hover { text-decoration: underline; } .ag-msg-ticks { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--ag-text-muted); line-height: 0; } .ag-msg-ticks[data-status=read] { color: var(--ag-accent-text); } .ag-msg-ticks[data-status=error] { color: var(--ag-danger-text); } .ag-photo-msg { display: block; margin: 0; max-width: 100%; color: inherit; } .ag-photo-msg__frame { position: relative; overflow: hidden; width: 100%; border-radius: var(--ag-radius-lg); background: var(--ag-surface-sunken); } .ag-photo-msg__image { display: block; width: 100%; height: 100%; object-fit: cover; } .ag-photo-msg__overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ag-neutral-1000) 35%, transparent); color: var(--ag-neutral-0); } .ag-photo-msg__caption { padding-block-start: var(--ag-space-2); color: inherit; font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); } .ag-pinned-bar { display: flex; align-items: stretch; gap: var(--ag-space-3); min-block-size: 2.75rem; padding-inline-end: var(--ag-space-2); border-block-end: var(--ag-border-width) solid var(--ag-border); background: var(--ag-surface); } .ag-pinned-bar__accent { flex: none; inline-size: var(--ag-space-1); margin-block: var(--ag-space-2); margin-inline-start: var(--ag-space-3); border-radius: var(--ag-radius-full); background: var(--ag-accent); } .ag-pinned-bar__content { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: var(--ag-space-1); min-inline-size: 0; padding-block: var(--ag-space-1); border: 0; background: transparent; text-align: start; } button.ag-pinned-bar__content { cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } button.ag-pinned-bar__content:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } button.ag-pinned-bar__content:hover { background: var(--ag-surface-hover); } .ag-pinned-bar__label { overflow: hidden; color: var(--ag-accent-text); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } .ag-pinned-bar__snippet { overflow: hidden; color: var(--ag-text-muted); font-size: var(--ag-text-sm); text-overflow: ellipsis; white-space: nowrap; } .ag-pinned-bar__close { flex: none; align-self: center; } .ag-poll { display: flex; flex-direction: column; gap: var(--ag-space-3); min-width: 240px; color: inherit; } .ag-poll__question { color: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); line-height: var(--ag-leading-snug); } .ag-poll__options { display: flex; flex-direction: column; gap: var(--ag-space-2); margin: 0; padding: 0; list-style: none; } .ag-poll__option { display: flex; flex-direction: column; gap: var(--ag-space-1); padding: var(--ag-space-2); border: var(--ag-border-width) solid transparent; border-radius: var(--ag-radius-md); transition: border-color var(--ag-duration-fast) var(--ag-ease-standard), background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-poll__option[data-chosen] { background: color-mix(in srgb, var(--ag-accent-500) 10%, transparent); border-color: var(--ag-accent-border); } .ag-poll__option[data-correct] { background: color-mix(in srgb, var(--ag-success) 12%, transparent); border-color: var(--ag-success-border); } .ag-poll__option[data-incorrect] { background: color-mix(in srgb, var(--ag-danger) 12%, transparent); border-color: var(--ag-danger-border); } .ag-poll__option-row { display: flex; align-items: center; gap: var(--ag-space-2); } .ag-poll__option-text { flex: 1; min-width: 0; color: inherit; font-size: var(--ag-text-sm); } .ag-poll__option-marker { display: inline-flex; flex: none; align-items: center; color: var(--ag-accent-text); } .ag-poll__option[data-correct] .ag-poll__option-marker { color: var(--ag-success-text); } .ag-poll__option[data-incorrect] .ag-poll__option-marker { color: var(--ag-danger-text); } .ag-poll__option-percent { flex: none; color: inherit; font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); font-variant-numeric: tabular-nums; } .ag-poll__option-bar { position: relative; overflow: hidden; block-size: 6px; border-radius: var(--ag-radius-full); background: color-mix(in srgb, currentColor 12%, transparent); } .ag-poll__option-fill { block-size: 100%; border-radius: var(--ag-radius-full); background: var(--ag-accent); transition: inline-size var(--ag-duration-slow) var(--ag-ease-standard); } .ag-poll__option[data-correct] .ag-poll__option-fill { background: var(--ag-success); } .ag-poll__option[data-incorrect] .ag-poll__option-fill { background: var(--ag-danger); } .ag-poll__total { color: var(--ag-text-subtle); font-size: var(--ag-text-xs); } .ag-reaction-picker { display: flex; align-items: center; gap: var(--ag-space-1); padding: var(--ag-space-1); } .ag-reaction-picker__item { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--ag-radius-md); background: transparent; font-size: var(--ag-text-xl); line-height: 1; cursor: pointer; transition: transform var(--ag-duration-fast) var(--ag-ease-emphasized), background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-reaction-picker__item:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-reaction-picker__item:hover { background: var(--ag-surface-hover); transform: scale(1.2); } .ag-reaction-picker__item:active { transform: scale(1.05); } .ag-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ag-space-1); } .ag-reaction-chip { position: relative; display: inline-flex; align-items: center; gap: var(--ag-space-1); height: 1.75rem; padding-inline: var(--ag-space-2); overflow: hidden; border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-full); background: var(--ag-surface-raised); color: var(--ag-text); font-family: inherit; font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); line-height: 1; cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), border-color var(--ag-duration-fast) var(--ag-ease-standard), transform var(--ag-duration-fast) var(--ag-ease-standard); } .ag-reaction-chip:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-reaction-chip:hover { border-color: var(--ag-border-strong); background: var(--ag-surface-hover); } .ag-reaction-chip:active { transform: scale(0.96); } .ag-reaction-chip[data-chosen] { border-color: var(--ag-accent-border); background: var(--ag-accent-soft); color: var(--ag-accent-text); } .ag-reaction-chip__emoji { display: inline-flex; font-size: var(--ag-text-sm); line-height: 1; } .ag-reaction-chip__count { font-variant-numeric: tabular-nums; } .ag-reply-preview { position: relative; display: flex; align-items: stretch; gap: var(--ag-space-2); min-width: 0; padding-block: var(--ag-space-1); border-radius: var(--ag-radius-xs); text-align: start; cursor: default; } .ag-reply-preview[role=button] { cursor: pointer; } .ag-reply-preview[role=button]:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-reply-preview[role=button]:hover { background: var(--ag-surface-hover); } .ag-reply-preview__bar { flex: none; width: 2px; border-radius: var(--ag-radius-full); background: var(--ag-accent); } .ag-reply-preview__body { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .ag-reply-preview__author { overflow: hidden; color: var(--ag-accent-text); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } .ag-reply-preview__snippet { overflow: hidden; color: var(--ag-text-muted); font-size: var(--ag-text-xs); text-overflow: ellipsis; white-space: nowrap; } .ag-scroll-bottom { position: relative; display: inline-flex; opacity: 1; transform: scale(1); transition: opacity var(--ag-duration-base) var(--ag-ease-standard), transform var(--ag-duration-base) var(--ag-ease-emphasized); } .ag-scroll-bottom[data-hidden] { opacity: 0; transform: scale(0.7); pointer-events: none; } button.ag-scroll-bottom__button.ag-btn { border-radius: var(--ag-radius-full); box-shadow: var(--ag-shadow-lg); } button.ag-scroll-bottom__button.ag-btn:hover:not(:disabled) { box-shadow: var(--ag-shadow-xl); } .ag-scroll-bottom__badge { position: absolute; inset-block-start: -2px; inset-inline-end: -2px; box-shadow: 0 0 0 2px var(--ag-surface); } .ag-selection-toolbar { display: flex; align-items: center; gap: var(--ag-space-3); min-block-size: 3.75rem; padding-inline: var(--ag-space-4); padding-block: var(--ag-space-2); background: var(--ag-surface-raised); box-shadow: var(--ag-shadow-sm); } .ag-selection-toolbar__clear { flex: none; } .ag-selection-toolbar__count { flex: 1; color: var(--ag-text); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); } .ag-selection-toolbar__actions { display: flex; flex: none; align-items: center; gap: var(--ag-space-1); } .ag-service-message { display: flex; justify-content: center; width: 100%; padding-block: var(--ag-space-1); } .ag-service-message__pill { max-width: 80%; padding: var(--ag-space-1) var(--ag-space-3); border-radius: var(--ag-radius-full); background: var(--ag-overlay); color: var(--ag-text-muted); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-medium); text-align: center; line-height: var(--ag-leading-snug); overflow-wrap: anywhere; } .ag-spoiler { position: relative; display: inline; border-radius: var(--ag-radius-xs); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ag-spoiler:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-spoiler__content { display: inline; filter: blur(6px); transition: filter var(--ag-duration-base) var(--ag-ease-standard); user-select: none; } /* Speckle overlay — a dotted texture drifting over the blurred content. Lives on the OUTER element (never the blurred `__content` span) so the filter that blurs the hidden text doesn't also blur the overlay meant to sit crisply on top of it. */ .ag-spoiler::before { content: ""; position: absolute; inset: -2px -3px; border-radius: var(--ag-radius-xs); background-image: radial-gradient(circle, currentColor 1px, transparent 1.4px); background-position: 0 0; background-size: 5px 5px; color: var(--ag-text); opacity: 0.55; transition: opacity var(--ag-duration-base) var(--ag-ease-standard); animation: ag-spoiler-drift 6s linear infinite; pointer-events: none; } .ag-spoiler[data-revealed] .ag-spoiler__content { filter: none; user-select: text; } .ag-spoiler[data-revealed]::before { opacity: 0; } @keyframes ag-spoiler-drift { from { background-position: 0 0; } to { background-position: 20px 12px; } } @media (prefers-reduced-motion: reduce) { .ag-spoiler::before { animation: none; } .ag-spoiler__content, .ag-spoiler::before { transition: none; } } .ag-sticker-msg { display: block; object-fit: contain; background: transparent; filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--ag-neutral-1000) 25%, transparent)); } .ag-sticker-picker { display: flex; width: 20rem; height: 22rem; background: var(--ag-surface-raised); border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-lg); box-shadow: var(--ag-shadow-md); overflow: hidden; } .ag-sticker-picker__rail { display: flex; flex: none; flex-direction: column; align-items: center; width: 3.25rem; padding-block: var(--ag-space-2); gap: var(--ag-space-1); border-inline-end: var(--ag-border-width) solid var(--ag-border); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; } .ag-sticker-picker__rail::-webkit-scrollbar { display: none; } .ag-sticker-picker__pack-tab { flex: none; } .ag-sticker-picker__panels { display: flex; flex: 1; min-width: 0; } .ag-sticker-picker__grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr)); align-content: start; gap: var(--ag-space-1); padding: var(--ag-space-2); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ag-border-strong) transparent; } /* Author `display: grid` beats the UA stylesheet's `[hidden] { display: none }` unless we restate it — restore the hide (same gotcha `Tabs.scss` documents for `.ag-tabs__panel`). */ .ag-sticker-picker__grid[hidden] { display: none; } .ag-sticker-picker__grid::-webkit-scrollbar { width: 6px; } .ag-sticker-picker__grid::-webkit-scrollbar-track { background: transparent; } .ag-sticker-picker__grid::-webkit-scrollbar-thumb { background: var(--ag-border-strong); border-radius: var(--ag-radius-full); } .ag-sticker-picker__grid::-webkit-scrollbar-thumb:hover { background: var(--ag-text-subtle); } .ag-sticker-picker__sticker { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: var(--ag-space-1); border: 0; border-radius: var(--ag-radius-md); background: transparent; cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-sticker-picker__sticker:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-sticker-picker__sticker:hover { background: var(--ag-surface-hover); } .ag-sticker-picker__sticker-image { display: block; width: 100%; height: 100%; object-fit: contain; } .ag-typing { display: inline-flex; align-items: center; gap: 4px; padding: var(--ag-space-1) var(--ag-space-2); } .ag-typing__dot { width: 6px; height: 6px; border-radius: var(--ag-radius-full); background: var(--ag-accent); animation: ag-typing-bounce 1.2s ease-in-out infinite; } .ag-typing__dot:nth-child(2) { animation-delay: 0.15s; } .ag-typing__dot:nth-child(3) { animation-delay: 0.3s; } .ag-typing[data-size=sm] .ag-typing__dot { width: 4px; height: 4px; } .ag-typing[data-size=lg] .ag-typing__dot { width: 8px; height: 8px; } @keyframes ag-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ag-typing__dot { animation: none; opacity: 1; } } .ag-unread-divider { display: flex; align-items: center; gap: var(--ag-space-3); width: 100%; padding-block: var(--ag-space-1); color: var(--ag-accent-text); font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-wide); text-transform: uppercase; } .ag-unread-divider::before, .ag-unread-divider::after { flex: 1 1 0; height: var(--ag-border-width); background: var(--ag-accent-border); content: ""; } .ag-unread-divider__label { flex: none; white-space: nowrap; } .ag-video-msg { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--ag-radius-lg); overflow: hidden; background: var(--ag-surface-sunken); color: var(--ag-neutral-0); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ag-video-msg:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-video-msg__poster { display: block; width: 100%; height: auto; } .ag-video-msg__play { position: absolute; inset: 0; margin: auto; display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--ag-space-16); height: var(--ag-space-16); border-radius: var(--ag-radius-full); background: color-mix(in srgb, var(--ag-neutral-1000) 45%, transparent); color: var(--ag-neutral-0); transition: transform var(--ag-duration-fast) var(--ag-ease-standard), background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-video-msg:hover .ag-video-msg__play { background: color-mix(in srgb, var(--ag-neutral-1000) 60%, transparent); transform: scale(1.06); } .ag-video-msg:active .ag-video-msg__play { transform: scale(0.98); } .ag-video-msg__duration { position: absolute; inset-block-end: var(--ag-space-2); inset-inline-end: var(--ag-space-2); padding: var(--ag-space-1) var(--ag-space-2); border-radius: var(--ag-radius-sm); background: color-mix(in srgb, var(--ag-neutral-1000) 55%, transparent); color: var(--ag-neutral-0); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-medium); font-variant-numeric: tabular-nums; line-height: 1; } .ag-voice-msg { display: flex; align-items: center; gap: var(--ag-space-3); min-width: 220px; color: inherit; } .ag-voice-msg__toggle { flex: none; } .ag-voice-msg__wave { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; height: var(--ag-space-8); } .ag-voice-msg__wave[data-seekable] { cursor: pointer; } .ag-voice-msg__bar { flex: 1 0 auto; width: 3px; min-width: 2px; max-width: 3px; border-radius: var(--ag-radius-full); background: color-mix(in srgb, currentColor 28%, transparent); transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-voice-msg__bar[data-played] { background: var(--ag-accent); } .ag-voice-msg__duration { flex: none; color: var(--ag-text-subtle); font-size: var(--ag-text-xs); font-variant-numeric: tabular-nums; } .ag-voice-msg__unread { flex: none; width: var(--ag-space-2); height: var(--ag-space-2); border-radius: var(--ag-radius-full); background: var(--ag-accent); } .ag-voice-msg__speed { flex: none; padding: 2px var(--ag-space-2); border: 0; border-radius: var(--ag-radius-full); background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-semibold); font-variant-numeric: tabular-nums; line-height: 1.4; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-voice-msg__speed:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-voice-msg__speed:hover { background: color-mix(in srgb, currentColor 22%, transparent); } .ag-voice-msg__speed:active { transform: scale(0.96); } .ag-alert { --ag-alert-accent: var(--ag-info); --ag-alert-soft: var(--ag-info-soft); --ag-alert-border: var(--ag-info-border); --ag-alert-text: var(--ag-info-text); display: flex; align-items: flex-start; gap: var(--ag-space-3); padding: var(--ag-space-3) var(--ag-space-4); border-radius: var(--ag-radius-md); border: var(--ag-border-width) solid var(--ag-alert-border); background: var(--ag-alert-soft); color: var(--ag-text); font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); } .ag-alert[data-tone=success] { --ag-alert-accent: var(--ag-success); --ag-alert-soft: var(--ag-success-soft); --ag-alert-border: var(--ag-success-border); --ag-alert-text: var(--ag-success-text); } .ag-alert[data-tone=warning] { --ag-alert-accent: var(--ag-warning); --ag-alert-soft: var(--ag-warning-soft); --ag-alert-border: var(--ag-warning-border); --ag-alert-text: var(--ag-warning-text); } .ag-alert[data-tone=danger] { --ag-alert-accent: var(--ag-danger); --ag-alert-soft: var(--ag-danger-soft); --ag-alert-border: var(--ag-danger-border); --ag-alert-text: var(--ag-danger-text); } .ag-alert[data-tone=neutral] { --ag-alert-accent: var(--ag-text-muted); --ag-alert-soft: var(--ag-surface-raised); --ag-alert-border: var(--ag-border); --ag-alert-text: var(--ag-text); } .ag-alert__icon { display: inline-flex; flex: none; margin-top: 1px; color: var(--ag-alert-text); } .ag-alert__content { display: flex; flex-direction: column; gap: var(--ag-space-1); min-width: 0; flex: 1; } .ag-alert__title { font-weight: var(--ag-weight-semibold); color: var(--ag-text); } .ag-alert__body { color: var(--ag-text-muted); } .ag-alert__body :where(a) { color: var(--ag-alert-text); text-decoration: underline; text-underline-offset: 2px; } .ag-alert__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.75rem; height: 1.75rem; margin: -0.25rem; margin-inline-start: 0; padding: 0; border: 0; border-radius: var(--ag-radius-sm); background: transparent; color: var(--ag-text-muted); cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-alert__close:hover { background: var(--ag-surface-hover); color: var(--ag-text); } .ag-alert__close:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-avatar { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--ag-avatar-size, var(--ag-space-10)); height: var(--ag-avatar-size, var(--ag-space-10)); overflow: hidden; border-radius: var(--ag-radius-full); background: var(--ag-surface-raised); color: var(--ag-text-muted); font-weight: var(--ag-weight-semibold); user-select: none; } .ag-avatar[data-size=xs] { --ag-avatar-size: var(--ag-space-6); font-size: var(--ag-text-2xs); } .ag-avatar[data-size=sm] { --ag-avatar-size: var(--ag-space-8); font-size: var(--ag-text-xs); } .ag-avatar[data-size=md] { --ag-avatar-size: var(--ag-space-10); font-size: var(--ag-text-sm); } .ag-avatar[data-size=lg] { --ag-avatar-size: var(--ag-space-12); font-size: var(--ag-text-md); } .ag-avatar[data-size=xl] { --ag-avatar-size: var(--ag-space-16); font-size: var(--ag-text-xl); } .ag-avatar__image { width: 100%; height: 100%; object-fit: cover; } .ag-avatar__initials { line-height: 1; letter-spacing: var(--ag-tracking-wide); } .ag-avatar__icon { display: inline-flex; width: 55%; height: 55%; } .ag-avatar__icon svg { width: 100%; height: 100%; } .ag-avatar__status { position: absolute; inset-inline-end: -1px; bottom: -1px; width: 32%; height: 32%; min-width: 8px; min-height: 8px; border-radius: var(--ag-radius-full); border: 2px solid var(--ag-surface); background: var(--ag-text-subtle); } .ag-avatar__status[data-status=online] { background: var(--ag-success); } .ag-avatar__status[data-status=busy] { background: var(--ag-danger); } .ag-avatar__status[data-status=away] { background: var(--ag-warning); } .ag-avatar__status[data-status=offline] { background: var(--ag-text-subtle); } .ag-avatar-group { display: inline-flex; align-items: center; } .ag-avatar-group[data-size=xs] { --ag-avatar-size: var(--ag-space-6); } .ag-avatar-group[data-size=sm] { --ag-avatar-size: var(--ag-space-8); } .ag-avatar-group[data-size=md] { --ag-avatar-size: var(--ag-space-10); } .ag-avatar-group[data-size=lg] { --ag-avatar-size: var(--ag-space-12); } .ag-avatar-group[data-size=xl] { --ag-avatar-size: var(--ag-space-16); } .ag-avatar-group__item { position: relative; display: inline-flex; flex: none; border-radius: var(--ag-radius-full); box-shadow: 0 0 0 2px var(--ag-surface); } .ag-avatar-group__item:not(:first-child) { margin-inline-start: calc(-1 * var(--ag-space-3)); } .ag-avatar-group__overflow { display: inline-flex; align-items: center; justify-content: center; width: var(--ag-avatar-size, var(--ag-space-10)); height: var(--ag-avatar-size, var(--ag-space-10)); background: var(--ag-surface-raised); color: var(--ag-text-muted); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); } .ag-badge { --ag-badge-accent: var(--ag-text-muted); --ag-badge-soft: var(--ag-surface-raised); --ag-badge-border: var(--ag-border); --ag-badge-text: var(--ag-text); --ag-badge-contrast: var(--ag-text-inverted); position: relative; display: inline-flex; align-items: center; gap: var(--ag-space-1); border-radius: var(--ag-radius-full); border: var(--ag-border-width) solid transparent; font-family: inherit; font-weight: var(--ag-weight-medium); line-height: 1; white-space: nowrap; vertical-align: middle; } .ag-badge[data-tone=accent] { --ag-badge-accent: var(--ag-accent); --ag-badge-soft: var(--ag-accent-soft); --ag-badge-border: var(--ag-accent-border); --ag-badge-text: var(--ag-accent-text); --ag-badge-contrast: var(--ag-accent-contrast); } .ag-badge[data-tone=success] { --ag-badge-accent: var(--ag-success); --ag-badge-soft: var(--ag-success-soft); --ag-badge-border: var(--ag-success-border); --ag-badge-text: var(--ag-success-text); --ag-badge-contrast: var(--ag-success-contrast); } .ag-badge[data-tone=warning] { --ag-badge-accent: var(--ag-warning); --ag-badge-soft: var(--ag-warning-soft); --ag-badge-border: var(--ag-warning-border); --ag-badge-text: var(--ag-warning-text); --ag-badge-contrast: var(--ag-warning-contrast); } .ag-badge[data-tone=danger] { --ag-badge-accent: var(--ag-danger); --ag-badge-soft: var(--ag-danger-soft); --ag-badge-border: var(--ag-danger-border); --ag-badge-text: var(--ag-danger-text); --ag-badge-contrast: var(--ag-danger-contrast); } .ag-badge[data-tone=info] { --ag-badge-accent: var(--ag-info); --ag-badge-soft: var(--ag-info-soft); --ag-badge-border: var(--ag-info-border); --ag-badge-text: var(--ag-info-text); --ag-badge-contrast: var(--ag-info-contrast); } .ag-badge[data-variant=soft] { background: var(--ag-badge-soft); color: var(--ag-badge-text); } .ag-badge[data-variant=solid] { background: var(--ag-badge-accent); color: var(--ag-badge-contrast); } .ag-badge[data-variant=outline] { background: transparent; border-color: var(--ag-badge-border); color: var(--ag-badge-text); } .ag-badge[data-size=sm] { height: 1.25rem; padding-inline: var(--ag-space-2); font-size: var(--ag-text-2xs); letter-spacing: var(--ag-tracking-wide); } .ag-badge[data-size=md] { height: 1.5rem; padding-inline: var(--ag-space-3); font-size: var(--ag-text-xs); } .ag-badge__dot { width: 6px; height: 6px; flex: none; border-radius: var(--ag-radius-full); background: currentColor; } .ag-badge__label { overflow: hidden; text-overflow: ellipsis; } .ag-btn { --ag-btn-height: 2.5rem; --ag-btn-pad-x: var(--ag-space-4); --ag-btn-gap: var(--ag-space-2); --ag-btn-radius: var(--ag-radius-md); --ag-btn-font: var(--ag-text-sm); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ag-btn-gap); min-width: var(--ag-btn-height); height: var(--ag-btn-height); padding-inline: var(--ag-btn-pad-x); border: var(--ag-border-width) solid transparent; border-radius: var(--ag-btn-radius); font-family: inherit; font-size: var(--ag-btn-font); font-weight: var(--ag-weight-semibold); line-height: 1; letter-spacing: var(--ag-tracking-wide); white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), border-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard), box-shadow var(--ag-duration-fast) var(--ag-ease-standard), transform var(--ag-duration-fast) var(--ag-ease-standard); } .ag-btn:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.99); } .ag-btn:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; } /* keep loading buttons at full opacity — the spinner already signals state */ .ag-btn[data-loading] { cursor: progress; opacity: 1; } .ag-btn__icon { display: inline-flex; flex: none; } .ag-btn__label { display: inline-flex; align-items: center; } /* ---- sizes ---- */ .ag-btn[data-size=sm] { --ag-btn-height: 2rem; --ag-btn-pad-x: var(--ag-space-3); --ag-btn-font: var(--ag-text-xs); --ag-btn-gap: var(--ag-space-1); } .ag-btn[data-size=lg] { --ag-btn-height: 3rem; --ag-btn-pad-x: var(--ag-space-6); --ag-btn-radius: var(--ag-radius-lg); --ag-btn-font: var(--ag-text-md); --ag-btn-gap: var(--ag-space-3); } .ag-btn[data-full-width] { width: 100%; } .ag-btn[data-icon-only] { padding-inline: 0; width: var(--ag-btn-height); } /* ---- variant: primary ---- */ .ag-btn[data-variant=primary] { color: var(--ag-accent-contrast); background: var(--ag-gradient-accent); box-shadow: var(--ag-shadow-sm); } .ag-btn[data-variant=primary]:hover:not(:disabled) { box-shadow: var(--ag-glow-accent); filter: brightness(1.05); } /* ---- variant: secondary ---- */ .ag-btn[data-variant=secondary] { color: var(--ag-text); background: var(--ag-surface-raised); border-color: var(--ag-border-strong); } .ag-btn[data-variant=secondary]:hover:not(:disabled) { border-color: var(--ag-accent-border); background: color-mix(in srgb, var(--ag-accent-500) 8%, var(--ag-surface-raised)); } /* ---- variant: ghost ---- */ .ag-btn[data-variant=ghost] { color: var(--ag-text); background: transparent; } .ag-btn[data-variant=ghost]:hover:not(:disabled) { background: var(--ag-surface-hover); } /* ---- variant: subtle (accent-tinted) ---- */ .ag-btn[data-variant=subtle] { color: var(--ag-accent-text); background: var(--ag-accent-soft); } .ag-btn[data-variant=subtle]:hover:not(:disabled) { background: color-mix(in srgb, var(--ag-accent-500) 26%, transparent); } /* ---- variant: danger ---- */ .ag-btn[data-variant=danger] { color: var(--ag-danger-contrast); background: var(--ag-danger); } .ag-btn[data-variant=danger]:hover:not(:disabled) { background: var(--ag-danger-hover); box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--ag-danger) 70%, transparent); } /* ---- variant: link ---- */ .ag-btn[data-variant=link] { height: auto; min-width: 0; padding-inline: 0; color: var(--ag-accent-text); background: transparent; letter-spacing: var(--ag-tracking-normal); } .ag-btn[data-variant=link]:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; } .ag-card { position: relative; display: flex; flex-direction: column; border-radius: var(--ag-radius-lg); background: var(--ag-surface); color: var(--ag-text); border: var(--ag-border-width) solid var(--ag-border); } .ag-card[data-variant=elevated] { box-shadow: var(--ag-shadow-md); } .ag-card[data-variant=outline] { background: transparent; border-color: var(--ag-border-strong); } .ag-card[data-variant=subtle] { background: var(--ag-bg-subtle); border-color: var(--ag-border-subtle); } .ag-card[data-interactive] { cursor: pointer; transition: transform var(--ag-duration-base) var(--ag-ease-standard), border-color var(--ag-duration-base) var(--ag-ease-standard), box-shadow var(--ag-duration-base) var(--ag-ease-standard); } .ag-card[data-interactive]:hover { transform: translateY(-2px); border-color: var(--ag-accent-border); box-shadow: var(--ag-shadow-lg); } .ag-card[data-interactive]:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-card__header { display: flex; flex-direction: column; gap: var(--ag-space-1); padding: var(--ag-space-5) var(--ag-space-5) 0; } .ag-card__body { display: flex; flex-direction: column; gap: var(--ag-space-4); padding: var(--ag-space-5); } .ag-card__footer { display: flex; align-items: center; gap: var(--ag-space-3); padding: 0 var(--ag-space-5) var(--ag-space-5); } .ag-card__title { margin: 0; font-size: var(--ag-text-lg); font-weight: var(--ag-weight-semibold); } .ag-card__description { margin: 0; color: var(--ag-text-muted); font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); } .ag-checkbox { position: relative; display: inline-flex; align-items: flex-start; gap: var(--ag-space-2); cursor: pointer; user-select: none; } .ag-checkbox__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ag-checkbox__box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.25rem; height: 1.25rem; border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-sm); background: var(--ag-field-bg); color: transparent; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), border-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-checkbox:hover .ag-checkbox__box { border-color: var(--ag-border-strong); } .ag-checkbox__input:checked ~ .ag-checkbox__box { background: var(--ag-accent); border-color: var(--ag-accent); color: var(--ag-accent-contrast); } .ag-checkbox__input:focus-visible ~ .ag-checkbox__box { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-checkbox__input:disabled ~ .ag-checkbox__box { opacity: 0.6; } .ag-checkbox[data-disabled] { cursor: not-allowed; } .ag-checkbox[data-invalid] .ag-checkbox__box { border-color: var(--ag-danger); } .ag-checkbox__text { display: flex; flex-direction: column; gap: var(--ag-space-1); } .ag-checkbox__label { font-size: var(--ag-text-sm); color: var(--ag-text); line-height: var(--ag-leading-snug); } .ag-checkbox__description { font-size: var(--ag-text-xs); color: var(--ag-text-muted); line-height: var(--ag-leading-snug); } .ag-code { font-family: var(--ag-font-mono); font-size: 0.9em; color: var(--ag-text); background: var(--ag-surface-sunken); border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-xs); padding: 0.15em 0.4em; } .ag-code--block { display: block; padding: var(--ag-space-4); border-radius: var(--ag-radius-md); line-height: var(--ag-leading-normal); overflow-x: auto; } .ag-code--block > code { padding: 0; border: none; border-radius: 0; background: none; font-size: var(--ag-text-sm); } .ag-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.375rem; border-radius: var(--ag-radius-full); background: var(--ag-accent); color: var(--ag-accent-contrast); font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; } .ag-counter[data-muted] { background: var(--ag-text-subtle); color: var(--ag-surface); } .ag-counter[data-active] { background: var(--ag-neutral-0); color: var(--ag-accent); } .ag-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--ag-space-2); padding: var(--ag-space-10) var(--ag-space-6); color: var(--ag-text-muted); text-align: center; } .ag-empty-state__illustration { display: inline-flex; align-items: center; justify-content: center; width: var(--ag-space-20); height: var(--ag-space-20); margin-bottom: var(--ag-space-2); border-radius: var(--ag-radius-full); background: var(--ag-surface-raised); color: var(--ag-text-subtle); } .ag-empty-state__illustration svg { width: var(--ag-space-8); height: var(--ag-space-8); } .ag-empty-state__title { margin: 0; color: var(--ag-text); font-size: var(--ag-text-lg); font-weight: var(--ag-weight-semibold); } .ag-empty-state__description { max-width: 32rem; margin: 0; font-size: var(--ag-text-sm); line-height: var(--ag-leading-normal); } .ag-empty-state__action { margin-top: var(--ag-space-3); } .ag-field { display: flex; flex-direction: column; gap: var(--ag-space-2); } .ag-field__label { display: inline-flex; align-items: center; gap: var(--ag-space-1); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); color: var(--ag-text); } .ag-field__required { color: var(--ag-danger-text); } .ag-field__message { margin: 0; font-size: var(--ag-text-xs); line-height: var(--ag-leading-snug); color: var(--ag-text-muted); } .ag-field__message[data-tone=error] { color: var(--ag-danger-text); } .ag-field[data-disabled] .ag-field__label { opacity: 0.6; } .ag-heading { margin: 0; font-family: var(--ag-font-sans); font-weight: var(--ag-weight-semibold); line-height: var(--ag-leading-tight); letter-spacing: var(--ag-tracking-tight); color: var(--ag-text); } .ag-heading[data-size=xs] { font-size: var(--ag-text-xs); } .ag-heading[data-size=sm] { font-size: var(--ag-text-sm); } .ag-heading[data-size=md] { font-size: var(--ag-text-md); } .ag-heading[data-size=lg] { font-size: var(--ag-text-lg); } .ag-heading[data-size=xl] { font-size: var(--ag-text-xl); } .ag-heading[data-size="2xl"] { font-size: var(--ag-text-2xl); } .ag-heading[data-size="3xl"] { font-size: var(--ag-text-3xl); } .ag-heading[data-size="4xl"] { font-size: var(--ag-text-4xl); } .ag-heading[data-tone=muted] { color: var(--ag-text-muted); } .ag-heading[data-tone=accent] { color: var(--ag-accent-text); } .ag-input { --ag-input-height: 2.5rem; --ag-input-pad-x: var(--ag-space-3); --ag-input-font: var(--ag-text-sm); display: block; width: 100%; height: var(--ag-input-height); padding-inline: var(--ag-input-pad-x); font-family: inherit; font-size: var(--ag-input-font); color: var(--ag-text); background: var(--ag-field-bg); border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-md); transition: border-color var(--ag-duration-fast) var(--ag-ease-standard), box-shadow var(--ag-duration-fast) var(--ag-ease-standard); } .ag-input[data-size=sm] { --ag-input-height: 2rem; --ag-input-font: var(--ag-text-xs); } .ag-input[data-size=lg] { --ag-input-height: 3rem; --ag-input-font: var(--ag-text-md); --ag-input-pad-x: var(--ag-space-4); } .ag-input::placeholder { color: var(--ag-field-placeholder); } .ag-input:hover:not(:disabled):not([data-disabled]) { border-color: var(--ag-border-strong); } .ag-input:focus-visible, .ag-input:focus-within { outline: none; border-color: var(--ag-accent); box-shadow: var(--ag-shadow-focus); } .ag-input:disabled { cursor: not-allowed; opacity: 0.6; } .ag-input[data-invalid] { border-color: var(--ag-danger); } .ag-input[data-invalid]:focus-visible, .ag-input[data-invalid]:focus-within { box-shadow: 0 0 0 var(--ag-focus-ring-width) var(--ag-danger-soft); } /* ---- adorned (prefix/suffix) ---- */ .ag-input--adorned { display: flex; align-items: center; gap: var(--ag-space-2); } .ag-input--adorned[data-disabled] { cursor: not-allowed; opacity: 0.6; } .ag-input__affix { display: inline-flex; align-items: center; flex: none; color: var(--ag-text-subtle); } .ag-input__field { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; } .ag-input__field:focus { outline: none; } .ag-input__field::placeholder { color: var(--ag-field-placeholder); } .ag-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; padding: 0.15em 0.5em; font-family: var(--ag-font-mono); font-size: 0.85em; line-height: 1; color: var(--ag-text-muted); background: var(--ag-surface-raised); border: var(--ag-border-width) solid var(--ag-border-strong); border-bottom-width: 2px; border-radius: var(--ag-radius-xs); box-shadow: var(--ag-shadow-sm); } .ag-link { display: inline-flex; align-items: center; gap: var(--ag-space-1); color: var(--ag-accent-text); text-decoration: none; text-underline-offset: 0.2em; border-radius: var(--ag-radius-xs); } .ag-link[data-tone=muted] { color: var(--ag-text-muted); } .ag-link:hover, .ag-link:focus-visible { text-decoration: underline; } .ag-link:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-link__icon { flex-shrink: 0; } .ag-list-item { position: relative; display: flex; align-items: center; gap: var(--ag-space-3); min-height: 3rem; padding-block: var(--ag-space-2); padding-inline: var(--ag-space-3); border-radius: var(--ag-radius-md); color: var(--ag-text); text-align: start; } .ag-list-item:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-list-item[data-interactive] { overflow: hidden; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-list-item[data-interactive]:hover { background: var(--ag-surface-hover); } .ag-list-item[data-interactive]:active { background: var(--ag-accent-soft); } .ag-list-item[data-active] { background: var(--ag-accent-soft); } .ag-list-item[data-danger] .ag-list-item__title { color: var(--ag-danger-text); } .ag-list-item__leading { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--ag-text-subtle); } .ag-list-item__body { display: flex; flex: 1; flex-direction: column; min-width: 0; } .ag-list-item__title { overflow: hidden; color: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); text-overflow: ellipsis; white-space: nowrap; } .ag-list-item__subtitle { overflow: hidden; color: var(--ag-text-muted); font-size: var(--ag-text-xs); text-overflow: ellipsis; white-space: nowrap; } .ag-list-item__trailing { display: inline-flex; flex: none; align-items: center; gap: var(--ag-space-2); color: var(--ag-text-subtle); font-size: var(--ag-text-sm); } .ag-menu__list { display: flex; flex-direction: column; } .ag-menu__item { position: relative; display: flex; align-items: center; gap: var(--ag-space-3); height: 2.25rem; padding-inline: var(--ag-space-3); overflow: hidden; border: 0; border-radius: var(--ag-radius-sm); background: transparent; color: var(--ag-text); font-family: inherit; font-size: var(--ag-text-sm); text-align: start; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-menu__item:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-menu__item:hover:not(:disabled) { background: var(--ag-surface-hover); } .ag-menu__item:active:not(:disabled) { background: var(--ag-accent-soft); } .ag-menu__item:disabled { cursor: not-allowed; opacity: 0.5; } .ag-menu__item[data-danger] { color: var(--ag-danger-text); } .ag-menu__item[data-danger]:hover:not(:disabled) { background: var(--ag-danger-soft); } .ag-menu__item-icon { display: inline-flex; flex: none; color: var(--ag-text-subtle); } .ag-menu__item[data-danger] .ag-menu__item-icon { color: inherit; } .ag-menu__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-menu__item-shortcut { flex: none; color: var(--ag-text-subtle); font-size: var(--ag-text-xs); letter-spacing: var(--ag-tracking-wide); } .ag-menu__separator { height: var(--ag-border-width); flex: none; margin-block: var(--ag-space-1); margin-inline: var(--ag-space-2); background: var(--ag-border); } .ag-menu__label { padding-block: var(--ag-space-2) var(--ag-space-1); padding-inline: var(--ag-space-3); color: var(--ag-text-subtle); font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-widest); text-transform: uppercase; } .ag-modal { position: fixed; inset: 0; z-index: var(--ag-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--ag-space-4); } .ag-modal__backdrop { position: absolute; inset: 0; background: var(--ag-overlay); animation: ag-modal-backdrop-in var(--ag-duration-base) var(--ag-ease-standard); } .ag-modal__content { --ag-modal-width: 560px; position: relative; z-index: 1; display: flex; flex-direction: column; width: min(var(--ag-modal-width), 100%); max-height: min(680px, 100vh - var(--ag-space-8)); background: var(--ag-surface-raised); color: var(--ag-text); border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-xl); box-shadow: var(--ag-shadow-xl); overflow: hidden; animation: ag-modal-content-in var(--ag-duration-slow) var(--ag-ease-emphasized); } .ag-modal__content:focus-visible { outline: none; box-shadow: var(--ag-shadow-xl), var(--ag-shadow-focus); } .ag-modal__content[data-size=sm] { --ag-modal-width: 400px; } .ag-modal__content[data-size=lg] { --ag-modal-width: 800px; } .ag-modal__header { display: flex; flex-direction: column; gap: var(--ag-space-1); padding-block: var(--ag-space-5) 0; padding-inline: var(--ag-space-5) var(--ag-space-10); } .ag-modal__title { margin: 0; font-size: var(--ag-text-lg); font-weight: var(--ag-weight-semibold); line-height: var(--ag-leading-tight); } .ag-modal__description { margin: 0; color: var(--ag-text-muted); font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); } .ag-modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ag-space-5); display: flex; flex-direction: column; gap: var(--ag-space-4); color: var(--ag-text-muted); } .ag-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--ag-space-3); padding: var(--ag-space-4) var(--ag-space-5); border-top: var(--ag-border-width) solid var(--ag-border); } .ag-modal__close { position: absolute; top: var(--ag-space-3); inset-inline-end: var(--ag-space-3); } @keyframes ag-modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ag-modal-content-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } .ag-popover { position: fixed; z-index: var(--ag-z-popover); min-width: 8rem; max-width: min(92vw, 22rem); padding: var(--ag-space-1); border-radius: var(--ag-radius-lg); background: var(--ag-surface-raised); border: var(--ag-border-width) solid var(--ag-border); box-shadow: var(--ag-shadow-lg); outline: none; transform-origin: var(--ag-popover-origin, top center); animation: ag-popover-in var(--ag-duration-fast) var(--ag-ease-emphasized); } .ag-popover[data-placement^=top] { --ag-popover-origin: bottom center; } @keyframes ag-popover-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .ag-popover { animation: none; } } .ag-progress { display: block; width: 100%; } .ag-progress__track { position: relative; width: 100%; height: var(--ag-space-2); overflow: hidden; border-radius: var(--ag-radius-full); background: var(--ag-surface-raised); } .ag-progress__indicator { height: 100%; border-radius: var(--ag-radius-full); background: var(--ag-accent); transition: width var(--ag-duration-base) var(--ag-ease-standard); } .ag-progress[data-tone=success] .ag-progress__indicator { background: var(--ag-success); } .ag-progress[data-tone=warning] .ag-progress__indicator { background: var(--ag-warning); } .ag-progress[data-tone=danger] .ag-progress__indicator { background: var(--ag-danger); } .ag-progress[data-tone=info] .ag-progress__indicator { background: var(--ag-info); } .ag-progress[data-indeterminate] .ag-progress__indicator { position: absolute; top: 0; inset-inline-start: 0; width: 40%; animation: ag-progress-indeterminate 1.4s ease-in-out infinite; } @keyframes ag-progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } [dir=rtl] .ag-progress[data-indeterminate] .ag-progress__indicator { animation-name: ag-progress-indeterminate-rtl; } @keyframes ag-progress-indeterminate-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-350%); } } @media (prefers-reduced-motion: reduce) { .ag-progress[data-indeterminate] .ag-progress__indicator { position: static; width: 100%; animation: none; opacity: 0.5; } } .ag-radio-group { display: flex; flex-direction: column; gap: var(--ag-space-3); } .ag-radio-group[data-invalid] .ag-radio__circle { border-color: var(--ag-danger); } .ag-radio { position: relative; display: inline-flex; align-items: flex-start; gap: var(--ag-space-2); cursor: pointer; user-select: none; } .ag-radio__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ag-radio__circle { position: relative; display: inline-flex; flex: none; width: 1.25rem; height: 1.25rem; border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-full); background: var(--ag-field-bg); transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), border-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-radio__circle::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0.5rem; height: 0.5rem; border-radius: var(--ag-radius-full); background: var(--ag-accent-contrast); transform: scale(0); transition: transform var(--ag-duration-fast) var(--ag-ease-standard); } .ag-radio:hover .ag-radio__circle { border-color: var(--ag-border-strong); } .ag-radio__input:checked ~ .ag-radio__circle { border-color: var(--ag-accent); background: var(--ag-accent); } .ag-radio__input:checked ~ .ag-radio__circle::after { transform: scale(1); } .ag-radio__input:focus-visible ~ .ag-radio__circle { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-radio__input:disabled ~ .ag-radio__circle { opacity: 0.6; } .ag-radio[data-disabled] { cursor: not-allowed; } .ag-radio__text { display: flex; flex-direction: column; gap: var(--ag-space-1); } .ag-radio__label { font-size: var(--ag-text-sm); color: var(--ag-text); line-height: var(--ag-leading-snug); } .ag-radio__description { font-size: var(--ag-text-xs); color: var(--ag-text-muted); line-height: var(--ag-leading-snug); } .ag-ripple { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; } .ag-ripple__wave { position: absolute; border-radius: var(--ag-radius-full); background: color-mix(in srgb, currentColor 22%, transparent); transform: scale(0); opacity: 0.6; animation: ag-ripple-expand var(--ag-ease-standard) forwards; } @keyframes ag-ripple-expand { to { transform: scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ag-ripple__wave { animation: none; display: none; } } .ag-search { display: flex; align-items: center; gap: var(--ag-space-2); height: 2.5rem; padding-inline: var(--ag-space-3); border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-full); background: var(--ag-field-bg); transition: border-color var(--ag-duration-fast) var(--ag-ease-standard), box-shadow var(--ag-duration-fast) var(--ag-ease-standard); } .ag-search:hover:not([data-disabled]) { border-color: var(--ag-border-strong); } .ag-search:focus-within { border-color: var(--ag-accent); box-shadow: var(--ag-shadow-focus); } .ag-search[data-disabled] { cursor: not-allowed; opacity: 0.6; } .ag-search__icon { display: inline-flex; flex: none; color: var(--ag-text-subtle); } .ag-search__field { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; appearance: none; background: transparent; color: inherit; font: inherit; font-size: var(--ag-text-sm); } .ag-search__field:focus { outline: none; } .ag-search__field::placeholder { color: var(--ag-field-placeholder); } /* SearchInput ships its own `ag-search__clear` — drop the native WebKit/Edge ones. */ .ag-search__field::-webkit-search-cancel-button, .ag-search__field::-webkit-search-decoration { appearance: none; } .ag-search__clear { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--ag-radius-full); background: transparent; color: var(--ag-text-subtle); cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-search__clear:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-search__clear:hover { background: var(--ag-surface-hover); color: var(--ag-text); } .ag-segmented { --ag-segmented-item-height: 2.25rem; --ag-segmented-font: var(--ag-text-sm); position: relative; display: inline-flex; padding: var(--ag-space-1); border-radius: var(--ag-radius-md); background: var(--ag-surface-sunken); border: var(--ag-border-width) solid var(--ag-border); } .ag-segmented[data-size=sm] { --ag-segmented-item-height: 1.75rem; --ag-segmented-font: var(--ag-text-xs); } .ag-segmented[data-size=lg] { --ag-segmented-item-height: 2.75rem; --ag-segmented-font: var(--ag-text-md); } .ag-segmented[data-disabled] { opacity: 0.6; } .ag-segmented[data-invalid] { border-color: var(--ag-danger); } .ag-segmented__indicator { position: absolute; top: var(--ag-space-1); bottom: var(--ag-space-1); inset-inline-start: var(--ag-space-1); z-index: 0; border-radius: var(--ag-radius-sm); background: var(--ag-surface-raised); box-shadow: var(--ag-shadow-sm); transition: transform var(--ag-duration-base) var(--ag-ease-standard); pointer-events: none; } .ag-segmented__item { position: relative; z-index: 1; display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: var(--ag-space-2); height: var(--ag-segmented-item-height); padding-inline: var(--ag-space-3); border: none; border-radius: var(--ag-radius-sm); background: transparent; color: var(--ag-text-muted); font-family: inherit; font-size: var(--ag-segmented-font); font-weight: var(--ag-weight-medium); white-space: nowrap; cursor: pointer; transition: color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-segmented__item:hover:not([data-selected]):not(:disabled) { color: var(--ag-text); } .ag-segmented__item[data-selected] { color: var(--ag-text); } .ag-segmented__item:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-segmented__item:disabled { cursor: not-allowed; } .ag-segmented__icon { display: inline-flex; flex: none; } .ag-segmented__label { display: inline-flex; align-items: center; } .ag-select { --ag-select-height: 2.5rem; --ag-select-font: var(--ag-text-sm); position: relative; display: block; width: 100%; } .ag-select[data-size=sm] { --ag-select-height: 2rem; --ag-select-font: var(--ag-text-xs); } .ag-select[data-size=lg] { --ag-select-height: 3rem; --ag-select-font: var(--ag-text-md); } .ag-select__control { appearance: none; display: block; width: 100%; height: var(--ag-select-height); padding-inline: var(--ag-space-3); padding-inline-end: var(--ag-space-8); font-family: inherit; font-size: var(--ag-select-font); color: var(--ag-text); background: var(--ag-field-bg); border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-md); cursor: pointer; transition: border-color var(--ag-duration-fast) var(--ag-ease-standard), box-shadow var(--ag-duration-fast) var(--ag-ease-standard); } .ag-select__control:hover:not(:disabled) { border-color: var(--ag-border-strong); } .ag-select__control:focus-visible { outline: none; border-color: var(--ag-accent); box-shadow: var(--ag-shadow-focus); } .ag-select__control:disabled { cursor: not-allowed; opacity: 0.6; } .ag-select[data-invalid] .ag-select__control { border-color: var(--ag-danger); } .ag-select[data-invalid] .ag-select__control:focus-visible { box-shadow: 0 0 0 var(--ag-focus-ring-width) var(--ag-danger-soft); } .ag-select__indicator { position: absolute; top: 50%; inset-inline-end: var(--ag-space-3); transform: translateY(-50%); display: inline-flex; color: var(--ag-text-subtle); pointer-events: none; } .ag-select[data-disabled] .ag-select__indicator { opacity: 0.6; } .ag-skeleton { display: block; border-radius: var(--ag-radius-xs); background-image: linear-gradient(90deg, var(--ag-surface-raised) 25%, var(--ag-surface-hover) 37%, var(--ag-surface-raised) 63%); background-size: 400% 100%; background-position: 100% 50%; animation: ag-skeleton-shimmer 1.6s ease-in-out infinite; } .ag-skeleton[data-variant=text] { width: 100%; height: var(--ag-space-4); } .ag-skeleton[data-variant=text][data-last] { width: 60%; } .ag-skeleton[data-variant=rect] { width: 100%; height: var(--ag-space-16); border-radius: var(--ag-radius-md); } .ag-skeleton[data-variant=circle] { width: var(--ag-space-10); height: var(--ag-space-10); border-radius: var(--ag-radius-full); aspect-ratio: 1; } .ag-skeleton-lines { display: flex; flex-direction: column; gap: var(--ag-space-2); } @keyframes ag-skeleton-shimmer { to { background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce) { .ag-skeleton { animation: none; } } .ag-skip-link { position: fixed; top: var(--ag-space-3); inset-inline-start: var(--ag-space-3); z-index: var(--ag-z-toast); padding: var(--ag-space-2) var(--ag-space-4); font-size: var(--ag-text-sm); font-weight: var(--ag-weight-semibold); color: var(--ag-text); background: var(--ag-surface-raised); border: var(--ag-border-width) solid var(--ag-accent-border); border-radius: var(--ag-radius-md); box-shadow: var(--ag-shadow-lg); text-decoration: none; transform: translateY(-150%); opacity: 0; pointer-events: none; transition: transform var(--ag-duration-base) var(--ag-ease-emphasized), opacity var(--ag-duration-base) var(--ag-ease-standard); } .ag-skip-link:focus-visible, .ag-skip-link:focus { transform: translateY(0); opacity: 1; pointer-events: auto; outline: none; text-decoration: none; box-shadow: var(--ag-shadow-lg), var(--ag-shadow-focus); } .ag-spinner { display: inline-flex; color: currentColor; } .ag-spinner[data-size=sm] { --ag-spinner-size: 16px; } .ag-spinner[data-size=md] { --ag-spinner-size: 20px; } .ag-spinner[data-size=lg] { --ag-spinner-size: 30px; } .ag-spinner__svg { width: var(--ag-spinner-size); height: var(--ag-spinner-size); animation: ag-spinner-rotate 0.7s linear infinite; } .ag-spinner__track { stroke: currentColor; stroke-width: 2.5; opacity: 0.2; } .ag-spinner__head { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: 40; } @keyframes ag-spinner-rotate { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ag-spinner__svg { animation-duration: 1.6s; } } .ag-stat { display: flex; flex-direction: column; gap: var(--ag-space-1); } .ag-stat__label { color: var(--ag-text-muted); font-size: var(--ag-text-sm); } .ag-stat__value { color: var(--ag-text); font-size: var(--ag-text-3xl); font-weight: var(--ag-weight-bold); font-variant-numeric: tabular-nums; line-height: var(--ag-leading-tight); letter-spacing: var(--ag-tracking-tight); } .ag-stat__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ag-space-2); color: var(--ag-text-muted); font-size: var(--ag-text-xs); } .ag-stat__trend { display: inline-flex; align-items: center; gap: var(--ag-space-1); font-weight: var(--ag-weight-medium); } .ag-stat__trend[data-direction=up] { color: var(--ag-success-text); } .ag-stat__trend[data-direction=down] { color: var(--ag-danger-text); } .ag-stat__trend-icon { display: inline-flex; } .ag-stat__hint { color: var(--ag-text-subtle); } .ag-switch { display: inline-flex; align-items: center; gap: var(--ag-space-2); } .ag-switch[data-disabled] .ag-switch__label { opacity: 0.6; } .ag-switch__control { --ag-switch-width: 2.75rem; --ag-switch-height: 1.5rem; --ag-switch-thumb-size: 1.25rem; --ag-switch-thumb-inset: 2px; position: relative; display: inline-flex; align-items: center; flex: none; width: var(--ag-switch-width); height: var(--ag-switch-height); padding: 0; border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-full); background: var(--ag-field-bg); cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), border-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-switch__control:hover:not(:disabled) { border-color: var(--ag-border-strong); } .ag-switch__control:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-switch__control:disabled { cursor: not-allowed; opacity: 0.6; } .ag-switch__control[data-invalid] { border-color: var(--ag-danger); } .ag-switch__control[data-state=checked] { border-color: var(--ag-accent); background: var(--ag-accent); } .ag-switch__thumb { width: var(--ag-switch-thumb-size); height: var(--ag-switch-thumb-size); margin-inline-start: var(--ag-switch-thumb-inset); border-radius: var(--ag-radius-full); background: var(--ag-text-subtle); transition: transform var(--ag-duration-base) var(--ag-ease-standard), background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-switch__control[data-state=checked] .ag-switch__thumb { background: var(--ag-accent-contrast); transform: translateX(calc((var(--ag-switch-width) - var(--ag-switch-thumb-size) - 2 * var(--ag-switch-thumb-inset) - 2 * var(--ag-border-width)) * var(--ag-dir, 1))); } .ag-switch__label { font-size: var(--ag-text-sm); color: var(--ag-text); line-height: var(--ag-leading-snug); } .ag-table-container { overflow: auto; border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-lg); } .ag-table-container:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-table { width: 100%; border-collapse: collapse; color: var(--ag-text); font-size: var(--ag-text-sm); } .ag-table__head { background: var(--ag-surface-raised); } .ag-table__column-header { padding: var(--ag-space-3) var(--ag-space-4); border-bottom: var(--ag-border-width) solid var(--ag-border); color: var(--ag-text-muted); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-wide); text-align: start; text-transform: uppercase; white-space: nowrap; } .ag-table[data-sticky-header] .ag-table__column-header { position: sticky; top: 0; z-index: var(--ag-z-sticky); background: var(--ag-surface-raised); } .ag-table__cell { padding: var(--ag-space-3) var(--ag-space-4); border-bottom: var(--ag-border-width) solid var(--ag-border-subtle); vertical-align: middle; } .ag-table__body .ag-table__row:last-child .ag-table__cell { border-bottom: none; } .ag-table__body .ag-table__row:nth-child(even) { background: var(--ag-surface-sunken); } .ag-table__body .ag-table__row:hover { background: var(--ag-surface-hover); } .ag-table__row[data-selected], .ag-table__row[data-selected]:hover { background: var(--ag-accent-soft); } .ag-tabs { display: flex; flex-direction: column; gap: var(--ag-space-4); } .ag-tabs__list { display: inline-flex; align-items: center; gap: var(--ag-space-1); max-width: 100%; padding: var(--ag-space-1); border-radius: var(--ag-radius-lg); background: var(--ag-surface-sunken); border: var(--ag-border-width) solid var(--ag-border); overflow-x: auto; } .ag-tabs__tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ag-space-2); flex: none; height: 2.25rem; padding-inline: var(--ag-space-4); border: 0; border-radius: var(--ag-radius-md); background: transparent; color: var(--ag-text-muted); font-family: inherit; font-size: var(--ag-text-sm); font-weight: var(--ag-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-tabs__tab:hover:not(:disabled) { color: var(--ag-text); background: var(--ag-surface-hover); } .ag-tabs__tab:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-tabs__tab:disabled { cursor: not-allowed; opacity: 0.5; } .ag-tabs__tab[data-state=active] { background: var(--ag-surface-raised); color: var(--ag-text); box-shadow: var(--ag-shadow-sm); } .ag-tabs__panel { display: flex; flex-direction: column; gap: var(--ag-space-3); color: var(--ag-text); } .ag-tabs__panel:focus-visible { outline: none; border-radius: var(--ag-radius-sm); box-shadow: var(--ag-shadow-focus); } /* Author `display` beats the UA stylesheet's `[hidden] { display: none }` unless we restate it — restore the hide. */ .ag-tabs__panel[hidden] { display: none; } .ag-tag { --ag-tag-accent: var(--ag-text-muted); --ag-tag-soft: var(--ag-surface-raised); --ag-tag-border: var(--ag-border); --ag-tag-text: var(--ag-text); --ag-tag-contrast: var(--ag-text-inverted); position: relative; display: inline-flex; align-items: center; gap: var(--ag-space-1); border-radius: var(--ag-radius-sm); border: var(--ag-border-width) solid transparent; font-family: inherit; font-weight: var(--ag-weight-medium); line-height: 1; white-space: nowrap; vertical-align: middle; } .ag-tag[data-tone=accent] { --ag-tag-accent: var(--ag-accent); --ag-tag-soft: var(--ag-accent-soft); --ag-tag-border: var(--ag-accent-border); --ag-tag-text: var(--ag-accent-text); --ag-tag-contrast: var(--ag-accent-contrast); } .ag-tag[data-tone=success] { --ag-tag-accent: var(--ag-success); --ag-tag-soft: var(--ag-success-soft); --ag-tag-border: var(--ag-success-border); --ag-tag-text: var(--ag-success-text); --ag-tag-contrast: var(--ag-success-contrast); } .ag-tag[data-tone=warning] { --ag-tag-accent: var(--ag-warning); --ag-tag-soft: var(--ag-warning-soft); --ag-tag-border: var(--ag-warning-border); --ag-tag-text: var(--ag-warning-text); --ag-tag-contrast: var(--ag-warning-contrast); } .ag-tag[data-tone=danger] { --ag-tag-accent: var(--ag-danger); --ag-tag-soft: var(--ag-danger-soft); --ag-tag-border: var(--ag-danger-border); --ag-tag-text: var(--ag-danger-text); --ag-tag-contrast: var(--ag-danger-contrast); } .ag-tag[data-tone=info] { --ag-tag-accent: var(--ag-info); --ag-tag-soft: var(--ag-info-soft); --ag-tag-border: var(--ag-info-border); --ag-tag-text: var(--ag-info-text); --ag-tag-contrast: var(--ag-info-contrast); } .ag-tag[data-variant=soft] { background: var(--ag-tag-soft); color: var(--ag-tag-text); } .ag-tag[data-variant=solid] { background: var(--ag-tag-accent); color: var(--ag-tag-contrast); } .ag-tag[data-variant=outline] { background: transparent; border-color: var(--ag-tag-border); color: var(--ag-tag-text); } .ag-tag[data-size=sm] { height: 1.25rem; padding-inline: var(--ag-space-2); font-size: var(--ag-text-2xs); } .ag-tag[data-size=sm] .ag-tag__remove { width: 1rem; height: 1rem; margin-inline-end: calc(-1 * var(--ag-space-1)); } .ag-tag[data-size=md] { height: 1.5rem; padding-inline: var(--ag-space-2); font-size: var(--ag-text-xs); } .ag-tag[data-size=md] .ag-tag__remove { width: 1.125rem; height: 1.125rem; margin-inline-end: calc(-1 * var(--ag-space-1)); } .ag-tag__icon { display: inline-flex; flex: none; } .ag-tag__label { overflow: hidden; text-overflow: ellipsis; } .ag-tag__remove { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 0; border-radius: var(--ag-radius-full); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), opacity var(--ag-duration-fast) var(--ag-ease-standard); opacity: 0.7; } .ag-tag__remove:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); } .ag-tag__remove:focus-visible { outline: none; opacity: 1; box-shadow: var(--ag-shadow-focus); } .ag-text { margin: 0; font-family: var(--ag-font-sans); line-height: var(--ag-leading-normal); color: var(--ag-text); } .ag-text[data-size="2xs"] { font-size: var(--ag-text-2xs); } .ag-text[data-size=xs] { font-size: var(--ag-text-xs); } .ag-text[data-size=sm] { font-size: var(--ag-text-sm); } .ag-text[data-size=md] { font-size: var(--ag-text-md); } .ag-text[data-size=lg] { font-size: var(--ag-text-lg); } .ag-text[data-size=xl] { font-size: var(--ag-text-xl); } .ag-text[data-weight=regular] { font-weight: var(--ag-weight-regular); } .ag-text[data-weight=medium] { font-weight: var(--ag-weight-medium); } .ag-text[data-weight=semibold] { font-weight: var(--ag-weight-semibold); } .ag-text[data-weight=bold] { font-weight: var(--ag-weight-bold); } .ag-text[data-tone=default] { color: var(--ag-text); } .ag-text[data-tone=muted] { color: var(--ag-text-muted); } .ag-text[data-tone=subtle] { color: var(--ag-text-subtle); } .ag-text[data-tone=accent] { color: var(--ag-accent-text); } .ag-text[data-tone=success] { color: var(--ag-success-text); } .ag-text[data-tone=danger] { color: var(--ag-danger-text); } .ag-text[data-truncate] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-textarea { display: block; width: 100%; min-height: 5rem; padding: var(--ag-space-2) var(--ag-space-3); font-family: inherit; font-size: var(--ag-text-sm); line-height: var(--ag-leading-snug); color: var(--ag-text); background: var(--ag-field-bg); border: var(--ag-border-width) solid var(--ag-field-border); border-radius: var(--ag-radius-md); resize: vertical; transition: border-color var(--ag-duration-fast) var(--ag-ease-standard), box-shadow var(--ag-duration-fast) var(--ag-ease-standard); } .ag-textarea::placeholder { color: var(--ag-field-placeholder); } .ag-textarea:hover:not(:disabled) { border-color: var(--ag-border-strong); } .ag-textarea:focus-visible { outline: none; border-color: var(--ag-accent); box-shadow: var(--ag-shadow-focus); } .ag-textarea:disabled { cursor: not-allowed; opacity: 0.6; resize: none; } .ag-textarea[data-invalid] { border-color: var(--ag-danger); } .ag-textarea[data-invalid]:focus-visible { box-shadow: 0 0 0 var(--ag-focus-ring-width) var(--ag-danger-soft); } .ag-toaster { position: fixed; z-index: var(--ag-z-toast); display: flex; flex-direction: column; padding: var(--ag-space-4); pointer-events: none; max-width: min(24rem, 100vw - var(--ag-space-8)); } .ag-toaster[data-position=top-left] { top: 0; left: 0; align-items: flex-start; } .ag-toaster[data-position=top-center] { top: 0; left: 50%; transform: translateX(-50%); align-items: center; } .ag-toaster[data-position=top-right] { top: 0; right: 0; align-items: flex-end; } .ag-toaster[data-position=bottom-left] { bottom: 0; left: 0; align-items: flex-start; } .ag-toaster[data-position=bottom-center] { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; } .ag-toaster[data-position=bottom-right] { bottom: 0; right: 0; align-items: flex-end; } .ag-toaster__region { display: flex; flex-direction: inherit; width: 100%; } /* Spacing lives on the items/regions themselves (not a parent `gap`) so an always-mounted but currently-empty live region — kept in the DOM for reliable AT announcements — never contributes a stray blank gap. */ .ag-toast + .ag-toast { margin-top: var(--ag-space-3); } .ag-toaster__region:not(:empty) + .ag-toaster__region:not(:empty) { margin-top: var(--ag-space-3); } .ag-toast { --ag-toast-accent: var(--ag-info); --ag-toast-soft: var(--ag-info-soft); --ag-toast-border: var(--ag-info-border); --ag-toast-text: var(--ag-info-text); pointer-events: auto; display: flex; align-items: flex-start; gap: var(--ag-space-3); width: 100%; padding: var(--ag-space-3) var(--ag-space-4); border-radius: var(--ag-radius-lg); border: var(--ag-border-width) solid var(--ag-toast-border); background: var(--ag-toast-soft); color: var(--ag-text); font-size: var(--ag-text-sm); box-shadow: var(--ag-shadow-lg); animation: ag-toast-in var(--ag-duration-base) var(--ag-ease-emphasized); } .ag-toast[data-tone=success] { --ag-toast-accent: var(--ag-success); --ag-toast-soft: var(--ag-success-soft); --ag-toast-border: var(--ag-success-border); --ag-toast-text: var(--ag-success-text); } .ag-toast[data-tone=warning] { --ag-toast-accent: var(--ag-warning); --ag-toast-soft: var(--ag-warning-soft); --ag-toast-border: var(--ag-warning-border); --ag-toast-text: var(--ag-warning-text); } .ag-toast[data-tone=danger] { --ag-toast-accent: var(--ag-danger); --ag-toast-soft: var(--ag-danger-soft); --ag-toast-border: var(--ag-danger-border); --ag-toast-text: var(--ag-danger-text); } .ag-toast[data-tone=neutral] { --ag-toast-accent: var(--ag-text-muted); --ag-toast-soft: var(--ag-surface-raised); --ag-toast-border: var(--ag-border); --ag-toast-text: var(--ag-text); } .ag-toast__icon { display: inline-flex; flex: none; margin-top: 1px; color: var(--ag-toast-text); } .ag-toast__content { display: flex; flex-direction: column; gap: var(--ag-space-1); min-width: 0; flex: 1; } .ag-toast__title { font-weight: var(--ag-weight-semibold); color: var(--ag-text); } .ag-toast__description { color: var(--ag-text-muted); line-height: var(--ag-leading-snug); } .ag-toast__action { align-self: flex-start; margin-top: var(--ag-space-1); padding: var(--ag-space-1) var(--ag-space-3); border: var(--ag-border-width) solid var(--ag-toast-border); border-radius: var(--ag-radius-sm); background: transparent; color: var(--ag-toast-text); font-family: inherit; font-size: var(--ag-text-xs); font-weight: var(--ag-weight-semibold); cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-toast__action:hover { background: var(--ag-surface-hover); } .ag-toast__action:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-toast__close { flex: none; } @keyframes ag-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } .ag-tooltip-wrapper { position: relative; display: inline-flex; } .ag-tooltip { position: absolute; z-index: var(--ag-z-popover); max-width: 16rem; padding: var(--ag-space-1) var(--ag-space-3); border: var(--ag-border-width) solid var(--ag-border-strong); border-radius: var(--ag-radius-sm); background: var(--ag-surface-raised); color: var(--ag-text); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-medium); line-height: var(--ag-leading-snug); white-space: normal; box-shadow: var(--ag-shadow-lg); opacity: 0; scale: 0.96; pointer-events: none; transition: opacity var(--ag-duration-fast) var(--ag-ease-standard), scale var(--ag-duration-fast) var(--ag-ease-standard); } .ag-tooltip[data-state=open] { opacity: 1; scale: 1; } .ag-tooltip[data-placement=top] { bottom: 100%; left: 50%; margin-bottom: var(--ag-space-2); translate: -50% 0; } .ag-tooltip[data-placement=bottom] { top: 100%; left: 50%; margin-top: var(--ag-space-2); translate: -50% 0; } .ag-tooltip[data-placement=left] { top: 50%; right: 100%; margin-right: var(--ag-space-2); translate: 0 -50%; } .ag-tooltip[data-placement=right] { top: 50%; left: 100%; margin-left: var(--ag-space-2); translate: 0 -50%; } .ag-center { display: grid; place-items: center; } .ag-container { width: 100%; margin-inline: auto; padding-inline: var(--ag-space-4); } .ag-container[data-size=sm] { max-width: 40rem; } .ag-container[data-size=md] { max-width: 48rem; } .ag-container[data-size=lg] { max-width: 64rem; } .ag-container[data-size=xl] { max-width: 80rem; } .ag-container[data-size=full] { max-width: none; } /* Full `--ag-space-6` padding once there's room to spare; tighter on narrow viewports. */ @media (min-width: 40rem) { .ag-container { padding-inline: var(--ag-space-6); } } .ag-divider { flex-shrink: 0; border: 0; } .ag-divider[data-orientation=horizontal] { width: 100%; height: var(--ag-border-width); background: var(--ag-border); } .ag-divider[data-orientation=vertical] { align-self: stretch; width: var(--ag-border-width); height: 100%; background: var(--ag-border); } .ag-divider[data-labelled] { display: flex; align-items: center; height: auto; background: none; gap: var(--ag-space-3); color: var(--ag-text-muted); font-size: var(--ag-text-xs); font-weight: var(--ag-weight-medium); letter-spacing: var(--ag-tracking-wide); text-transform: uppercase; } .ag-divider[data-labelled]::before, .ag-divider[data-labelled]::after { flex: 1 1 0; height: var(--ag-border-width); background: var(--ag-border); content: ""; } .ag-divider__label { white-space: nowrap; } .ag-grid { display: grid; gap: var(--ag-grid-gap); grid-template-columns: var(--ag-grid-columns); } .ag-inline { display: flex; flex-direction: row; gap: var(--ag-inline-gap); } .ag-inline[data-wrap] { flex-wrap: wrap; } .ag-inline[data-align=start] { align-items: flex-start; } .ag-inline[data-align=center] { align-items: center; } .ag-inline[data-align=end] { align-items: flex-end; } .ag-inline[data-align=stretch] { align-items: stretch; } .ag-inline[data-justify=start] { justify-content: flex-start; } .ag-inline[data-justify=center] { justify-content: center; } .ag-inline[data-justify=end] { justify-content: flex-end; } .ag-inline[data-justify=between] { justify-content: space-between; } .ag-inline[data-justify=around] { justify-content: space-around; } .ag-stack { display: flex; flex-direction: column; gap: var(--ag-stack-gap); } .ag-stack[data-align=start] { align-items: flex-start; } .ag-stack[data-align=center] { align-items: center; } .ag-stack[data-align=end] { align-items: flex-end; } .ag-stack[data-align=stretch] { align-items: stretch; } .ag-stack[data-justify=start] { justify-content: flex-start; } .ag-stack[data-justify=center] { justify-content: center; } .ag-stack[data-justify=end] { justify-content: flex-end; } .ag-stack[data-justify=between] { justify-content: space-between; } .ag-stack[data-justify=around] { justify-content: space-around; } .ag-code-display { position: relative; display: flex; align-items: center; gap: var(--ag-space-4); padding: var(--ag-space-4) var(--ag-space-5); border-radius: var(--ag-radius-lg); border: var(--ag-border-width) solid var(--ag-border); background: var(--ag-surface-raised); overflow: hidden; } .ag-code-display::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ag-gradient-holo); } .ag-code-display__code { flex: 1 1 auto; min-width: 0; font-family: var(--ag-font-mono); font-size: var(--ag-text-3xl); font-weight: var(--ag-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--ag-tracking-wide); color: var(--ag-accent-text); line-height: var(--ag-leading-tight); overflow-wrap: anywhere; } .ag-code-display__timer { flex: none; } .ag-code-display__copy { flex: none; align-self: center; } .ag-countdown-ring { --ag-ring-color: var(--ag-accent); position: relative; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: var(--ag-radius-full); color: var(--ag-text); box-shadow: var(--ag-glow-accent); transition: box-shadow var(--ag-duration-base) var(--ag-ease-standard); } .ag-countdown-ring[data-state=low] { --ag-ring-color: var(--ag-warning); box-shadow: 0 0 0 1px var(--ag-warning-border), 0 8px 24px -10px color-mix(in srgb, var(--ag-warning) 55%, transparent); } .ag-countdown-ring__svg { grid-area: 1/1; display: block; transform: rotate(-90deg); } .ag-countdown-ring__track { fill: none; stroke: var(--ag-border-strong); } .ag-countdown-ring__arc { fill: none; stroke: var(--ag-ring-color); stroke-linecap: round; transition: stroke-dashoffset var(--ag-duration-slow) var(--ag-ease-standard), stroke var(--ag-duration-base) var(--ag-ease-standard); } .ag-countdown-ring__content { grid-area: 1/1; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--ag-space-1); font-variant-numeric: tabular-nums; font-weight: var(--ag-weight-semibold); font-size: var(--ag-text-sm); line-height: 1; text-align: center; } .ag-identicon { display: block; flex-shrink: 0; } .ag-number-card { isolation: isolate; overflow: hidden; } /* Gradient border sheen — a 1px silver ring carved with a mask, never a fill behind text. */ .ag-number-card::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; background: var(--ag-gradient-silver); opacity: 0.5; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; transition: opacity var(--ag-duration-base) var(--ag-ease-standard); } .ag-number-card:hover::before, .ag-number-card:focus-visible::before { opacity: 0.9; } .ag-number-card[data-interactive]:hover { box-shadow: var(--ag-glow-accent), var(--ag-shadow-lg); } .ag-number-card__body { position: relative; z-index: 2; gap: var(--ag-space-3); } .ag-number-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ag-space-3); } .ag-number-card__status { display: inline-flex; align-items: center; gap: var(--ag-space-1); flex-shrink: 0; padding: var(--ag-space-1) var(--ag-space-2); border: var(--ag-border-width) solid transparent; border-radius: var(--ag-radius-full); font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-wide); text-transform: uppercase; line-height: 1; white-space: nowrap; } .ag-number-card__status[data-tone=success] { background: var(--ag-success-soft); border-color: var(--ag-success-border); color: var(--ag-success-text); } .ag-number-card__status[data-tone=accent] { background: var(--ag-accent-soft); border-color: var(--ag-accent-border); color: var(--ag-accent-text); } .ag-number-card__status[data-tone=danger] { background: var(--ag-danger-soft); border-color: var(--ag-danger-border); color: var(--ag-danger-text); } .ag-number-card__phone { font-family: var(--ag-font-mono); font-size: var(--ag-text-xl); font-weight: var(--ag-weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: var(--ag-tracking-tight); color: var(--ag-text); overflow-wrap: anywhere; } .ag-number-card__meta { font-size: var(--ag-text-sm); color: var(--ag-text-muted); } .ag-number-card__serial { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--ag-space-1); font-family: var(--ag-font-mono); font-size: var(--ag-text-2xs); color: var(--ag-text-subtle); } .ag-accent-picker { display: inline-flex; gap: 6px; padding: 4px; background: var(--ag-surface-sunken); border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-full); } .ag-accent-picker__swatch { width: 1.25rem; height: 1.25rem; padding: 0; border: 2px solid transparent; border-radius: var(--ag-radius-full); background: var(--ag-swatch); cursor: pointer; transition: transform var(--ag-duration-fast) var(--ag-ease-standard), box-shadow var(--ag-duration-fast) var(--ag-ease-standard); } .ag-accent-picker__swatch:hover { transform: scale(1.12); } .ag-accent-picker__swatch[data-active] { box-shadow: 0 0 0 2px var(--ag-surface-sunken), 0 0 0 4px var(--ag-swatch); } .ag-accent-picker__swatch:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-dir-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--ag-surface-sunken); border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-full); } .ag-dir-toggle__btn { display: inline-flex; align-items: center; justify-content: center; height: 1.9rem; padding-inline: var(--ag-space-3); border: 0; border-radius: var(--ag-radius-full); background: transparent; color: var(--ag-text-subtle); font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-wide); cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-dir-toggle__btn:hover { color: var(--ag-text); } .ag-dir-toggle__btn[data-active] { background: var(--ag-surface-raised); color: var(--ag-accent-text); box-shadow: var(--ag-shadow-sm); } .ag-dir-toggle__btn:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-theme-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--ag-surface-sunken); border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-full); } .ag-theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: var(--ag-radius-full); background: transparent; color: var(--ag-text-subtle); cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard), color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-theme-toggle__btn:hover { color: var(--ag-text); } .ag-theme-toggle__btn[data-active] { background: var(--ag-surface-raised); color: var(--ag-accent-text); box-shadow: var(--ag-shadow-sm); } .ag-theme-toggle__btn:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-emoji-picker { display: flex; flex-direction: column; width: 20rem; max-width: 100%; border: var(--ag-border-width) solid var(--ag-border); border-radius: var(--ag-radius-lg); background: var(--ag-surface-raised); box-shadow: var(--ag-shadow-md); overflow: hidden; } .ag-emoji-picker__search { flex: none; padding: var(--ag-space-2); } .ag-emoji-picker__categories { display: flex; flex: none; align-items: center; gap: var(--ag-space-1); padding-inline: var(--ag-space-2); padding-block-end: var(--ag-space-2); border-block-end: var(--ag-border-width) solid var(--ag-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--ag-border-strong) transparent; } .ag-emoji-picker__categories::-webkit-scrollbar { height: 6px; } .ag-emoji-picker__categories::-webkit-scrollbar-track { background: transparent; } .ag-emoji-picker__categories::-webkit-scrollbar-thumb { background: var(--ag-border-strong); border-radius: var(--ag-radius-full); } .ag-emoji-picker__category { display: flex; flex: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--ag-radius-md); background: transparent; font-size: var(--ag-text-lg); line-height: 1; cursor: pointer; transition: background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-emoji-picker__category:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-emoji-picker__category:hover { background: var(--ag-surface-hover); } .ag-emoji-picker__body { flex: 1; min-height: 0; height: 20rem; display: flex; flex-direction: column; gap: var(--ag-space-3); padding: var(--ag-space-2); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ag-border-strong) transparent; } .ag-emoji-picker__body::-webkit-scrollbar { width: 6px; } .ag-emoji-picker__body::-webkit-scrollbar-track { background: transparent; } .ag-emoji-picker__body::-webkit-scrollbar-thumb { background: var(--ag-border-strong); border-radius: var(--ag-radius-full); } .ag-emoji-picker__section { display: flex; flex-direction: column; gap: var(--ag-space-1); } .ag-emoji-picker__heading { padding-inline: var(--ag-space-1); color: var(--ag-text-subtle); font-size: var(--ag-text-2xs); font-weight: var(--ag-weight-semibold); letter-spacing: var(--ag-tracking-widest); text-transform: uppercase; } .ag-emoji-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--ag-space-1); } .ag-emoji-picker__emoji { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 0; border-radius: var(--ag-radius-md); background: transparent; font-size: var(--ag-text-xl); line-height: 1; cursor: pointer; transition: transform var(--ag-duration-fast) var(--ag-ease-emphasized), background-color var(--ag-duration-fast) var(--ag-ease-standard); } .ag-emoji-picker__emoji:focus-visible { outline: none; box-shadow: var(--ag-shadow-focus); } .ag-emoji-picker__emoji:hover { background: var(--ag-surface-hover); transform: scale(1.15); } .ag-emoji-picker__emoji:active { transform: scale(1.02); } .ag-emoji-picker__empty { margin: auto; padding: var(--ag-space-6) var(--ag-space-4); color: var(--ag-text-muted); font-size: var(--ag-text-sm); text-align: center; }