/* ============================================================ LT.digital Market Intelligence — Design System Brand: #014D87 primary, #D56103 orange, #FBEF58 yellow, #6AB443 green, #707071 gray. Architecture ──────────── 1. Design tokens (light) — single source of truth for colour, type, geometry, motion, and z-index. 2. Dark theme overrides — flipped on by `` (toggled by app.js / theme-init via localStorage). Re-binds the same token names so component CSS never branches on the theme. 3. Reset 4. Components — nav, drawer, user menu, cards, buttons, forms, tabs, tables, chat, alerts, badges, modals, etc. 5. Helpers + responsive — utilities and breakpoints. The legacy token names (--white, --gray-lighter, --text, --border…) are intentionally re-bound in dark mode so existing inline styles like `background: var(--white)` continue to render the correct surface without a sweeping refactor. ============================================================ */ /* ── Design tokens — light ───────────────────────────────────── */ :root { color-scheme: light; /* Brand palette (constant across themes) */ --brand-primary: #014D87; --brand-orange: #D56103; --brand-yellow: #FBEF58; --brand-green: #6AB443; --brand-gray: #707071; /* Themed primary */ --primary: #014D87; --primary-dark: #013a66; --primary-light: #1a6dab; --primary-soft: rgba(1, 77, 135, 0.10); --primary-ring: rgba(1, 77, 135, 0.28); --orange: #D56103; --yellow: #FBEF58; --green: #6AB443; --gray: #707071; --danger: #dc2626; --danger-dark: #b91c1c; /* Neutral / surface tokens. `--white` doubles as "elevated surface"; in dark mode it re-binds to a dark elevated surface so `background: var(--white)` reads correctly in both themes without changing call sites. */ --white: #ffffff; --surface: #ffffff; --surface-2: #f8fafc; --page-bg: #f3f4f6; --gray-lighter: #f3f4f6; --gray-light: #e5e7eb; --gray-dark: #374151; --text: #111827; --text-muted: #6b7280; --text-strong: #0f172a; --border: #d1d5db; --border-strong: #9ca3af; /* Semantic accents (for inline-style refactors) */ --info-bg: #eff6ff; --info-border: #bfdbfe; --info-text: #1e40af; --warn-bg: #fef9c3; --warn-border: #fde68a; --warn-text: #854d0e; --success-bg: #f0fdf4; --success-border:#bbf7d0; --success-text: #166534; --error-bg: #fef2f2; --error-border: #fecaca; --error-text: #b91c1c; /* Shadows */ --shadow: 0 1px 3px rgba(0,0,0,0.10); --shadow-md: 0 4px 12px rgba(0,0,0,0.12); --shadow-lg: 0 10px 30px rgba(0,0,0,0.18); /* Radii */ --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-xl: 14px; /* Geometry */ --nav-height: 56px; --sidebar-width: 260px; /* Type */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* Motion */ --t-fast: 120ms; --t-base: 180ms; --t-slow: 260ms; --ease-out: cubic-bezier(.2,.7,.3,1); /* Focus rings */ --focus-ring: 0 0 0 3px rgba(1,77,135,0.45); --focus-ring-on-primary: 0 0 0 3px rgba(255,255,255,0.6); /* Z-index layers */ --z-nav: 100; --z-drawer: 140; --z-overlay: 200; --z-modal: 500; --z-toast: 9999; } /* ── Dark theme overrides ───────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --primary: #2f8fd8; --primary-dark: #207bc1; --primary-light: #5fa9e3; --primary-soft: rgba(47, 143, 216, 0.18); --primary-ring: rgba(95, 169, 227, 0.55); --white: #1e293b; --surface: #1e293b; --surface-2: #182234; --page-bg: #0f172a; --gray-lighter: #182234; --gray-light: #2a3548; --gray-dark: #e5e7eb; --text: #f3f4f6; --text-muted: #9ca3af; --text-strong: #ffffff; --border: #334155; --border-strong: #475569; --info-bg: rgba(47,143,216,0.14); --info-border: rgba(47,143,216,0.45); --info-text: #93c5fd; --warn-bg: rgba(251,239,88,0.10); --warn-border: rgba(251,239,88,0.45); --warn-text: #fde68a; --success-bg: rgba(106,180,67,0.12); --success-border:rgba(106,180,67,0.45); --success-text: #86efac; --error-bg: rgba(220,38,38,0.12); --error-border: rgba(220,38,38,0.45); --error-text: #fca5a5; --shadow: 0 1px 3px rgba(0,0,0,0.55); --shadow-md: 0 4px 14px rgba(0,0,0,0.55); --shadow-lg: 0 10px 30px rgba(0,0,0,0.65); --focus-ring: 0 0 0 3px rgba(95,169,227,0.6); } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; } body { font-family: var(--font-sans); color: var(--text); background: var(--page-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; } button { cursor: pointer; font: inherit; border: none; background: transparent; color: inherit; } input, textarea, select { font: inherit; color: inherit; } img { max-width: 100%; } hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } code { font-family: var(--font-mono); font-size: 0.85em; background: var(--gray-lighter); padding: 0.1em 0.35em; border-radius: 3px; } /* Universal focus ring for interactive controls. */ :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Honour reduced-motion preference globally. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Top nav ────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--primary); color: #fff; display: flex; align-items: center; padding: 0 0.85rem; z-index: var(--z-nav); box-shadow: var(--shadow-md); gap: 0.5rem; } .nav-hamburger { display: none; /* shown only at narrow widths */ width: 38px; height: 38px; border-radius: var(--radius); align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: background var(--t-fast) var(--ease-out); } .nav-hamburger:hover { background: rgba(255,255,255,0.14); } .nav-hamburger:focus-visible { box-shadow: var(--focus-ring-on-primary); } .nav-hamburger svg { width: 22px; height: 22px; } .nav-brand { font-weight: 700; font-size: 1.05rem; color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0.3rem 0.4rem; border-radius: var(--radius); } .nav-brand:hover { text-decoration: none; } .nav-brand:focus-visible { box-shadow: var(--focus-ring-on-primary); } .nav-brand span:first-child { color: var(--yellow); } .nav-links { display: flex; align-items: center; gap: 0.15rem; } .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; font-size: 0.85rem; font-weight: 500; color: #fff; border-radius: var(--radius); transition: background var(--t-fast) var(--ease-out); } .nav-link:hover { background: rgba(255,255,255,0.14); text-decoration: none; } .nav-link:focus-visible { outline: none; box-shadow: var(--focus-ring-on-primary); } .nav-link.active { background: rgba(255,255,255,0.20); } .nav-link .nav-link-icon { font-size: 1rem; line-height: 1; } .nav-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; margin-left: auto; } /* Legacy alias used by older inline scripts that may still set `.nav-user`. Kept as a no-op so removed markup stays harmless. */ .nav-user { font-size: 0.85rem; opacity: 0.85; } /* ── User menu (avatar dropdown) ────────────────────────────── */ .user-menu { position: relative; } .user-menu-trigger { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.65rem 0.3rem 0.35rem; height: 38px; background: rgba(255,255,255,0.10); border-radius: 99px; color: #fff; font-size: 0.85rem; font-weight: 500; flex-shrink: 0; transition: background var(--t-fast) var(--ease-out); } .user-menu-trigger:hover { background: rgba(255,255,255,0.20); } .user-menu-trigger:focus-visible { box-shadow: var(--focus-ring-on-primary); } .user-menu-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; line-height: 1; } .user-menu-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-caret { font-size: 0.7rem; opacity: 0.85; } .user-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 244px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.4rem; z-index: calc(var(--z-nav) + 10); display: none; } .user-menu.open .user-menu-panel { display: block; animation: fadeInDown var(--t-fast) var(--ease-out); } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .user-menu-header { padding: 0.6rem 0.7rem 0.55rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; } .user-menu-header-name { font-weight: 600; font-size: 0.92rem; color: var(--text); } .user-menu-header-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; } .user-menu-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.5rem 0.65rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; color: var(--text); text-align: left; background: transparent; transition: background var(--t-fast) var(--ease-out); } .user-menu-item:hover { background: var(--gray-lighter); text-decoration: none; color: var(--text); } .user-menu-item:focus-visible { box-shadow: var(--focus-ring); outline: none; } .user-menu-item.danger { color: var(--danger); } .user-menu-item.danger:hover { background: rgba(220,38,38,0.10); color: var(--danger); } .user-menu-divider { height: 1px; background: var(--border); margin: 0.35rem 0; } /* Theme picker (lives inside user menu) */ .theme-picker { padding: 0.45rem 0.65rem 0.6rem; } .theme-picker-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; } .theme-picker-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; } .theme-picker-btn { padding: 0.4rem 0.4rem; font-size: 0.75rem; font-weight: 500; background: var(--gray-lighter); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; cursor: pointer; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .theme-picker-btn:hover { border-color: var(--primary); } .theme-picker-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .theme-picker-btn[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } /* ── Mobile slide-out drawer ────────────────────────────────── */ .nav-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: var(--z-drawer); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-out); } .nav-drawer-backdrop.open { opacity: 1; pointer-events: auto; } .nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 320px; background: var(--surface); z-index: calc(var(--z-drawer) + 1); box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform var(--t-base) var(--ease-out); display: flex; flex-direction: column; overflow: hidden; } .nav-drawer.open { transform: translateX(0); } .nav-drawer-header { padding: 1rem 1rem 0.85rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .nav-drawer-header-title { font-weight: 700; font-size: 1rem; color: var(--primary); } .nav-drawer-header-title span { color: var(--orange); } .nav-drawer-header-close { width: 36px; height: 36px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.1rem; } .nav-drawer-header-close:hover { background: var(--gray-lighter); color: var(--text); } .nav-drawer-body { flex: 1; overflow-y: auto; padding: 0.5rem; } .nav-drawer-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.75rem; border-radius: var(--radius); color: var(--text); font-size: 0.95rem; font-weight: 500; margin-bottom: 0.15rem; background: transparent; text-align: left; width: 100%; } .nav-drawer-link:hover { background: var(--gray-lighter); text-decoration: none; color: var(--text); } .nav-drawer-link.active { background: var(--primary-soft); color: var(--primary); } .nav-drawer-link .nav-drawer-icon { font-size: 1.1rem; line-height: 1; } .nav-drawer-divider { height: 1px; background: var(--border); margin: 0.5rem 0.5rem; } /* ── Layout ─────────────────────────────────────────────────── */ .page-body { padding-top: var(--nav-height); min-height: 100vh; } .container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem; } .container-narrow { max-width: 520px; margin: 0 auto; padding: 1.5rem 1rem; } .split-layout { display: flex; height: calc(100vh - var(--nav-height)); } .sidebar { width: var(--sidebar-width); min-width: 200px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .main-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--page-bg); min-width: 0; } /* ── Cards ──────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.75rem; flex-wrap: wrap; } .card-title { font-size: 1rem; font-weight: 600; color: var(--primary); } /* ── Dashboard hero (greeting + at-a-glance stats) ──────────── */ .dash-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; margin-bottom: 0.5rem; animation: dashFadeIn var(--t-slow) var(--ease-out) both; } .dash-hero-text { min-width: 0; } .dash-hero-greeting { font-size: 1.6rem; font-weight: 700; color: var(--text-strong); line-height: 1.2; letter-spacing: -0.01em; } .dash-hero-sub { font-size: 0.92rem; color: var(--text-muted); margin-top: 0.25rem; } .dash-stats { display: flex; gap: 0.6rem; flex-wrap: wrap; } .dash-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.55rem 0.95rem; min-width: 110px; display: flex; flex-direction: column; gap: 0.1rem; box-shadow: var(--shadow); } .dash-stat-value { font-size: 1.2rem; font-weight: 700; color: var(--primary); line-height: 1.1; font-variant-numeric: tabular-nums; } .dash-stat-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .dash-section-title { margin-top: 1.5rem; margin-bottom: 0; color: var(--primary); font-size: 1.05rem; font-weight: 600; } /* Tool grid (dashboard) */ .tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 0.85rem; } .tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; animation: dashCardIn 360ms var(--ease-out) both; } .tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary); text-decoration: none; } .tool-card:hover .tool-card-icon { transform: scale(1.08); } .tool-card:focus-visible { box-shadow: var(--focus-ring); outline: none; border-color: var(--primary); } .tool-card-icon { font-size: 2.5rem; line-height: 1; transition: transform var(--t-base) var(--ease-out); } .tool-card-name { font-size: 1.1rem; font-weight: 700; color: var(--primary); } .tool-card-desc { font-size: 0.85rem; color: var(--text-muted); } /* ── Dashboard recent activity ──────────────────────────────── */ .dash-recent { margin-top: 1.75rem; animation: dashFadeIn var(--t-slow) var(--ease-out) both; } .dash-recent-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .dash-recent-header .dash-section-title { margin-top: 0; } .dash-recent-all { font-size: 0.82rem; font-weight: 500; color: var(--primary); } .dash-recent-list { display: flex; flex-direction: column; gap: 0.4rem; list-style: none; padding: 0; margin: 0; } .dash-recent-item { animation: dashCardIn 320ms var(--ease-out) both; } .dash-recent-row { display: flex; align-items: stretch; gap: 0.4rem; } .dash-recent-row .dash-recent-link { flex: 1; min-width: 0; } .dash-recent-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .dash-recent-link:hover { border-color: var(--primary); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-1px); } .dash-recent-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--primary); } /* Per-row caret toggle for the expandable actions panel. Sized to match the row height visually; rotates 180° when the panel is open. Hover/focus mirror the row link's primary-color treatment so the two controls feel cohesive. */ .dash-recent-toggle { flex-shrink: 0; width: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-muted); cursor: pointer; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .dash-recent-toggle:hover { border-color: var(--primary); color: var(--primary); } .dash-recent-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--primary); } .dash-recent-toggle[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } .dash-recent-toggle .dash-caret { display: inline-block; font-size: 0.85rem; line-height: 1; transition: transform var(--t-fast) var(--ease-out); } .dash-recent-toggle[aria-expanded="true"] .dash-caret { transform: rotate(180deg); } /* Expanded actions panel — wraps below the row, holds the per-doc download / open / share / QR buttons. Reuses the .btn-xs sizing used on the My Documents page so the controls stay compact. */ .dash-recent-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.55rem 0.85rem; margin-top: 0.35rem; background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius-lg); animation: dashFadeIn var(--t-base) var(--ease-out) both; } .dash-recent-actions[hidden] { display: none; } .dash-recent-actions-empty { color: var(--text-muted); font-size: 0.82rem; padding: 0.15rem 0.25rem; } .dash-recent-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; } .dash-recent-main { flex: 1; min-width: 0; } .dash-recent-title { font-weight: 600; font-size: 0.92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-recent-meta { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; font-size: 0.78rem; color: var(--text-muted); min-width: 0; } .dash-recent-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .dash-recent-time { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; } .dash-recent-empty { padding: 1.25rem 1rem; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-muted); font-size: 0.9rem; } .dash-recent-empty-icon { font-size: 1.6rem; opacity: 0.85; margin-bottom: 0.4rem; } @keyframes dashFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes dashCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 36px; transition: background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--gray-lighter); border-color: var(--border-strong); } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover:not(:disabled) { background: var(--danger-dark); border-color: var(--danger-dark); } .btn-warning { background: var(--orange); color: #fff; border-color: var(--orange); } .btn-warning:hover:not(:disabled) { background: #b85203; border-color: #b85203; } .btn-orange { background: var(--orange); color: #fff; border-color: var(--orange); } .btn-orange:hover:not(:disabled) { background: #b85202; border-color: #b85202; } .btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; min-height: 30px; } .btn-xs { padding: 0.22rem 0.55rem; font-size: 0.75rem; min-height: 26px; } .btn-full { width: 100%; } .btn-icon { padding: 0.4rem; background: transparent; color: var(--text-muted); border-radius: var(--radius); min-height: 36px; min-width: 36px; } .btn-icon:hover { background: var(--gray-lighter); color: var(--text); } /* ── Expandable action rows (My Documents + Admin docs tables) ── Replaces the old floating "Actions ▾" popup with an unfold-below details row, mirroring the Dashboard Recent Activity pattern. */ .row-actions-toggle { white-space: nowrap; } .row-actions-toggle .caret { display: inline-block; font-size: 0.8em; line-height: 1; transition: transform var(--t-fast) var(--ease-out); } .row-actions-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); } /* The details row's cell carries no padding/border of its own so it collapses to nothing while hidden; the panel supplies its own spacing and surface when shown. */ .row-actions-cell { padding: 0 !important; border-bottom: 0 !important; } tr:hover .row-actions-cell { background: transparent; } .row-actions-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; background: var(--surface-2, var(--surface)); border-bottom: 1px solid var(--gray-light); animation: dashFadeIn var(--t-base) var(--ease-out) both; } .row-actions-panel[hidden] { display: none; } /* ── Button-menu (design-language pattern) ────────────────────────── Standard pattern for any button whose options should unfold. Instead of a floating card, a `.menu-toggle` button reveals an adjacent sibling `.button-menu` that unfolds as its own full-width row inside the surrounding flex action panel (pushed to the bottom of the row via `order`). No fixed positioning, never clipped or off-screen, and the options wrap on narrow/mobile widths. Reuse these classes for future button-menus rather than re-implementing the interaction. */ .menu-toggle { white-space: nowrap; } .menu-toggle .caret { display: inline-block; font-size: 0.7rem; opacity: 0.85; margin-left: 0.15rem; line-height: 1; transition: transform var(--t-fast) var(--ease-out); } .menu-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); } .button-menu { order: 1; /* always unfolds after the action buttons */ flex-basis: 100%; /* occupies its own full-width row */ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.1rem; animation: unfoldRow var(--t-fast) var(--ease-out); } .button-menu[hidden] { display: none; } .button-menu-item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); font: inherit; font-size: 0.8rem; color: var(--text); text-align: left; cursor: pointer; white-space: nowrap; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .button-menu-item:hover { background: var(--gray-lighter); border-color: var(--gray-light); } .button-menu-item:focus-visible { box-shadow: var(--focus-ring); outline: none; } .button-menu-item .dim { color: var(--text-muted); font-size: 0.78em; white-space: nowrap; } @keyframes unfoldRow { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ── Forms ──────────────────────────────────────────────────── */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--gray-dark); } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.9rem; background: var(--surface); color: var(--text); font-family: inherit; min-height: 38px; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: 0.85; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; } .form-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; } .form-error { font-size: 0.82rem; color: var(--danger); margin-top: 0.25rem; } input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--primary); } input[type="date"] { color-scheme: light; } [data-theme="dark"] input[type="date"] { color-scheme: dark; } /* ── Dropzone ────────────────────────────────────────────────── */ .dropzone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); background: var(--gray-lighter); } .dropzone:hover, .dropzone.drag-over { border-color: var(--primary); background: var(--primary-soft); } .dropzone.has-file { border-color: var(--green); background: rgba(106,180,67,0.08); } .dropzone-icon { font-size: 1.75rem; margin-bottom: 0.5rem; color: var(--text-muted); } .dropzone-label { font-size: 0.85rem; color: var(--text-muted); } .dropzone-filename { font-size: 0.85rem; font-weight: 600; color: var(--green); margin-top: 0.25rem; } /* ── Tabs ────────────────────────────────────────────────────── */ .tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.1rem; overflow-x: auto; } .tab-btn { padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; background: transparent; border: none; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--t-fast), border-color var(--t-fast); white-space: nowrap; min-height: 38px; cursor: pointer; } .tab-btn:hover { color: var(--primary); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .tab-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* ── Tables ──────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; color: var(--text); } th, td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid var(--gray-light); vertical-align: top; } th { background: var(--gray-lighter); font-weight: 600; color: var(--gray-dark); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } tr:hover td { background: var(--surface-2); } /* ── Chat UI ─────────────────────────────────────────────────── */ .conv-list { flex: 1; overflow-y: auto; padding: 0.5rem; } .conv-item { padding: 0.6rem 0.75rem; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text); transition: background var(--t-fast); } .conv-item:hover { background: var(--gray-lighter); } .conv-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; } .conv-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-delete { opacity: 0; font-size: 0.8rem; color: var(--text-muted); transition: opacity var(--t-fast); padding: 0.2rem; } .conv-item:hover .conv-delete, .conv-item:focus-within .conv-delete { opacity: 1; } .conv-sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .messages-area { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .message { display: flex; gap: 0.75rem; max-width: 85%; } .message.user { align-self: flex-end; flex-direction: row-reverse; } .message.assistant { align-self: flex-start; } .msg-bubble { padding: 0.7rem 0.95rem; border-radius: var(--radius-lg); font-size: 0.92rem; line-height: 1.55; word-break: break-word; white-space: pre-wrap; } .chat-message-text { white-space: pre-wrap; word-break: break-word; } .suggestion-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; } .suggestion-pill { background: var(--primary-soft); border: 1px solid var(--border); color: var(--primary); border-radius: 999px; padding: 0.32rem 0.85rem; font-size: 0.8rem; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); white-space: normal; text-align: left; } .suggestion-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .suggestion-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); } .message.user .msg-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; } .message.assistant .msg-bubble { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .msg-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; color: #fff; } .message.user .msg-avatar { background: var(--primary-dark); } .message.assistant .msg-avatar { background: var(--orange); } .input-bar { border-top: 1px solid var(--border); padding: 0.75rem 1rem; background: var(--surface); } .input-bar-controls { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; align-items: center; } .input-row { display: flex; gap: 0.5rem; align-items: flex-end; } .chat-input { flex: 1; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.92rem; resize: none; background: var(--surface); color: var(--text); max-height: 140px; min-height: 44px; font-family: inherit; line-height: 1.5; } .chat-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } /* ── Alerts / Toasts ─────────────────────────────────────────── */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 1rem; border: 1px solid transparent; } .alert-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text); } .alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } .alert-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); } #toast-container { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 0.5rem; } .toast { padding: 0.75rem 1.1rem; border-radius: var(--radius); font-size: 0.875rem; box-shadow: var(--shadow-md); min-width: 220px; max-width: 360px; color: #fff; animation: slideIn var(--t-base) var(--ease-out); } .toast-success { background: var(--green); } .toast-error { background: var(--danger); } .toast-info { background: var(--primary); } @keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } } /* ── Toggle switch ───────────────────────────────────────────── */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 24px; transition: background var(--t-base); } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; left: 3px; top: 3px; background: #fff; transition: transform var(--t-base); box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .toggle-switch input:checked + .toggle-slider { background: var(--green); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } .toggle-switch input:focus-visible + .toggle-slider { box-shadow: var(--focus-ring); } /* ── Badges ──────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 99px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.4; } .badge-green { background: rgba(106,180,67,0.18); color: #14532d; } .badge-red { background: rgba(220,38,38,0.16); color: #991b1b; } .badge-gray { background: var(--gray-light); color: var(--gray-dark); } .badge-blue { background: var(--primary-soft); color: var(--primary); } .badge-orange { background: rgba(213,97,3,0.16); color: #9a4a00; } [data-theme="dark"] .badge-green { color: #86efac; } [data-theme="dark"] .badge-red { color: #fca5a5; } [data-theme="dark"] .badge-orange { color: #fdba74; } /* ── Loading ─────────────────────────────────────────────────── */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } .spinner-lg { width: 36px; height: 36px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } .btn-spinner { width: 0.95em; height: 0.95em; border-width: 2px; border-color: currentColor; border-top-color: transparent; vertical-align: middle; } .btn.is-loading { display: inline-flex; align-items: center; justify-content: center; } .loading-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; color: var(--text-muted); } .loading-row[hidden] { display: none; } /* ── Section headers ─────────────────────────────────────────── */ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.75rem; flex-wrap: wrap; } .section-title { font-size: 1rem; font-weight: 600; color: var(--text); } /* ── Folder file tree ────────────────────────────────────────── */ .folder-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; background: var(--surface); } .folder-row-name { flex: 1; font-weight: 500; } .folder-expanded { padding: 0.5rem 0.75rem 0.75rem 1.5rem; } .file-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius); font-size: 0.85rem; } .file-row:hover { background: var(--gray-lighter); } .file-row-name { flex: 1; } /* ── Usage bar ───────────────────────────────────────────────── */ .token-bar { height: 6px; border-radius: 3px; background: var(--primary); min-width: 2px; max-width: 200px; } /* ── Login page ──────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-primary) 0%, #013a66 100%); padding: 1rem; } [data-theme="dark"] .login-wrap { background: linear-gradient(135deg, #082c4f 0%, #050d18 100%); } .login-card { background: var(--surface); color: var(--text); border-radius: var(--radius-lg); padding: 2.25rem 1.75rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .login-logo { text-align: center; margin-bottom: 1.75rem; } .login-logo-text { font-size: 1.5rem; font-weight: 800; color: var(--primary); } .login-logo-text span { color: var(--orange); } .login-logo-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; } .auth-toggle { display: flex; gap: 0; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--gray-lighter); } .auth-toggle-btn { flex: 1; padding: 0.6rem; font-size: 0.875rem; font-weight: 500; background: transparent; border: none; color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); cursor: pointer; } .auth-toggle-btn:hover { color: var(--text); } .auth-toggle-btn.active { background: var(--primary); color: #fff; } .auth-toggle-btn:focus-visible { outline: none; box-shadow: inset var(--focus-ring); } /* ── Result panel ────────────────────────────────────────────── */ .result-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.5rem; } .result-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; } /* ── Misc helpers ────────────────────────────────────────────── */ .hidden { display: none !important; } .text-muted { color: var(--text-muted); } .text-sm { font-size: 0.85rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .justify-between { justify-content: space-between; } .font-bold { font-weight: 700; } .text-right { text-align: right; } /* ── Document picker modal (chat references) ─────────────────── */ .doc-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 1rem; } .doc-picker-modal { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .doc-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem 0.75rem; border-bottom: 1px solid var(--border); } .doc-picker-title { font-weight: 600; font-size: 1rem; color: var(--primary); } .doc-picker-search { margin: 0.75rem 1.25rem; width: calc(100% - 2.5rem); } .doc-picker-list { flex: 1; overflow-y: auto; padding: 0 0.75rem 0.75rem; } .doc-picker-item { padding: 0.65rem 0.75rem; border-radius: var(--radius); cursor: pointer; transition: background var(--t-fast); } .doc-picker-item:hover { background: var(--gray-lighter); } .doc-picker-item.active { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); } .doc-picker-item.active .doc-picker-item-name::after { content: " ✓"; color: var(--primary); font-weight: 700; } .ref-picker-group-header { padding: 0.6rem 0.75rem 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .ref-picker-group-header + .doc-picker-item { margin-top: 0.1rem; } .doc-picker-list .ref-picker-group-header:not(:first-child) { margin-top: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.7rem; } .doc-picker-item-name { font-weight: 500; font-size: 0.9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-picker-item-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Inline edit fields */ .inline-edit { display: none; align-items: center; gap: 0.4rem; } .inline-edit.visible { display: flex; } .inline-edit input { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; background: var(--surface); color: var(--text); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 900px) { .nav-links { display: none; } .nav-hamburger { display: inline-flex; } .user-menu-name { display: none; } } @media (max-width: 768px) { html { font-size: 14.5px; } .container { padding: 1rem 0.85rem; } .tool-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .tool-card { padding: 1.4rem 0.75rem; } .tool-card-icon { font-size: 2rem; } .tool-card-name { font-size: 1rem; } .split-layout { flex-direction: column; height: auto; min-height: calc(100vh - var(--nav-height)); } .sidebar { width: 100%; max-height: 240px; border-right: none; border-bottom: 1px solid var(--border); } .main-pane { height: auto; min-height: 60vh; } .tabs { gap: 0; } .tab-btn { padding: 0.55rem 0.7rem; font-size: 0.78rem; } .message { max-width: 92%; } .card { padding: 1rem; } .card-header { gap: 0.5rem; } } @media (max-width: 480px) { .tool-grid { grid-template-columns: 1fr; } .nav { padding: 0 0.5rem; gap: 0.35rem; } .nav-brand { font-size: 0.95rem; } .user-menu-trigger { padding: 0.3rem 0.45rem 0.3rem 0.3rem; } .user-menu-trigger .user-menu-caret { display: none; } .user-menu-panel { right: -0.4rem; min-width: 220px; } #toast-container { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; } .toast { min-width: 0; max-width: 100%; } } @media print { .nav, .nav-drawer, .nav-drawer-backdrop, #toast-container { display: none !important; } body { background: #fff; color: #000; } } /* ── Task #259: invite dialog, FAB, my-agents, agent-onboard ──────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .modal { background: var(--bg, #fff); color: var(--text, #111); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.25); width: 100%; max-width: 520px; max-height: calc(100vh - 2rem); overflow: auto; display: flex; flex-direction: column; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-lighter, #eee); } .modal-body { padding: 1.25rem; } .fab { position: fixed; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--primary, #014D87); color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; z-index: 900; transition: transform 0.15s ease, box-shadow 0.15s ease; } .fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.3); } .fab:focus-visible { outline: 3px solid var(--primary, #014D87); outline-offset: 3px; } .fab-bottom-left { left: 1.5rem; bottom: 1.5rem; } /* Second FAB stacked directly above the lower-left "+" (56px button + gap). */ .fab-bottom-left-2 { left: 1.5rem; bottom: calc(1.5rem + 56px + 0.75rem); } .fab svg { width: 24px; height: 24px; } .agent-pick-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 50vh; overflow: auto; } .agent-pick-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.75rem; border: 1px solid var(--gray-lighter, #ddd); background: var(--bg, #fff); color: var(--text, #111); border-radius: 8px; cursor: pointer; text-align: left; font: inherit; transition: background 0.1s, border-color 0.1s; } .agent-pick-item:hover { background: var(--gray-lighter, #f4f4f4); border-color: var(--primary, #014D87); } .agent-pick-icon { font-size: 1.25rem; flex: 0 0 auto; } .agent-pick-name { flex: 1; font-weight: 500; } .agent-pick-meta { color: var(--gray, #777); font-size: 0.85rem; } .agent-pick-new { border-style: dashed; } .agent-card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .agent-card { border: 1px solid var(--gray-lighter, #e5e5e5); border-radius: 12px; padding: 1rem; background: var(--bg, #fff); display: flex; flex-direction: column; gap: 0.75rem; } .agent-card-header { display: flex; gap: 0.75rem; align-items: center; } .agent-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--gray-lighter, #eee); flex: 0 0 64px; display: flex; align-items: center; justify-content: center; } .agent-photo img { width: 100%; height: 100%; object-fit: cover; } .agent-photo-fallback { font-weight: 700; color: var(--primary, #014D87); font-size: 1.25rem; } .agent-card-title { flex: 1; min-width: 0; } .agent-name { font-weight: 600; } .agent-card-body { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; } .agent-card-body > div { display: flex; gap: 0.5rem; } .agent-card-body dt { color: var(--gray, #777); flex: 0 0 70px; } .agent-card-body dd { margin: 0; word-break: break-word; } .agent-social { margin-right: 0.5rem; } .agent-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--gray-lighter, #eee); } .crop-box { width: 240px; height: 240px; border-radius: 50%; background-color: var(--gray-lighter, #eee); border: 2px solid var(--primary, #014D87); cursor: grab; touch-action: none; user-select: none; margin: 0 auto; overflow: hidden; } .crop-box:active { cursor: grabbing; }