/* ═══════════════════════════════════════════════════════════════════════ CLARIFY — Design Tokens Change colours, radii, shadows here and they flow everywhere. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Brand */ --color-primary: #6366f1; --color-primary-dark: #4f46e5; --color-primary-light: #818cf8; --color-primary-subtle: rgba(99, 102, 241, 0.12); --color-secondary: #8b5cf6; /* Auth gradient */ --color-gradient-start: #4338ca; --color-gradient-mid: #6366f1; --color-gradient-end: #8b5cf6; /* Sidebar / app bar */ --color-surface-dark: #1e293b; --color-surface-dark-2: #2d3f54; /* Page backgrounds */ --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-hover: #f1f5f9; --color-surface-muted: #f8fafc; /* Borders */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; /* Text */ --color-text: #0f172a; --color-text-secondary: #64748b; --color-text-muted: #94a3b8; --color-text-placeholder: #94a3b8; /* Semantic */ --color-success: #16a34a; --color-success-bg: #f0fdf4; --color-success-border: #bbf7d0; --color-warning: #d97706; --color-warning-light: #f59e0b; --color-warning-bg: #fffbeb; --color-warning-border: #fde68a; --color-error: #dc2626; --color-error-dark: #991b1b; --color-error-bg: #fef2f2; --color-error-border: #fecaca; --color-info: #0ea5e9; --color-info-bg: #f0f9ff; --color-info-border: #bae6fd; --color-purple: #8b5cf6; --color-purple-bg: #f5f3ff; --color-purple-border: #ddd6fe; --color-error-light: #fee2e2; --color-error-darker: #7f1d1d; --color-error-border-strong:#fca5a5; --color-warning-dark: #92400e; --color-warning-lightest: #fef9c3; --color-orange: #ea580c; --color-orange-bg: #fff7ed; --color-orange-border: #fed7aa; --color-pink: #ec4899; --color-purple-light: #ede9fe; --color-success-light-bg: #dcfce7; --color-primary-bg: #eef2ff; --color-facebook: #1877f2; --color-facebook-bg: #e7f0ff; /* Own-comment / page reply */ --color-own-comment: #0891b2; --color-own-comment-bg: #ecfeff; --color-own-comment-border: #a5f3fc; /* Drawer / sidebar tokens — change these to retheme the entire sidebar */ --color-drawer-text: #0f172a; --color-drawer-text-dim: #475569; --color-drawer-text-muted: #64748b; --color-drawer-icon-muted: #94a3b8; --color-drawer-text-faint: #a0aabb; --color-drawer-border: #eceef3; --color-drawer-hover-bg: rgba(99,102,241,0.06); --color-drawer-active-bg: linear-gradient(135deg, rgba(99,102,241,0.13), rgba(139,92,246,0.09)); --color-drawer-active-border: rgba(99,102,241,0.18); --color-drawer-brand-icon-bg: rgba(99,102,241,0.12); --color-drawer-brand-icon-border:rgba(99,102,241,0.25); /* Misc */ --color-text-label: var(--color-text-label); /* Radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-md: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06); --shadow-lg: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05); /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 0.6875rem; --font-size-sm: 0.8125rem; --font-size-base: 0.875rem; --font-size-lg: 1rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.375rem; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; } /* ─── Reset & Base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── App Bar ───────────────────────────────────────────────────────── */ .clarify-appbar { background: transparent !important; border-bottom: 1px solid var(--color-drawer-border) !important; box-shadow: 0 1px 16px -8px rgba(15,23,42,0.18) !important; } /* Frost lives on a pseudo-element so the appbar itself doesn't become a containing block for position:fixed descendants (e.g. the command palette). */ .clarify-appbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.72); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); pointer-events: none; } .appbar-username { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; margin: 0 4px 0 8px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .appbar-icon-btn { color: var(--color-text-secondary) !important; transition: color 0.15s ease, background 0.15s ease !important; } .appbar-icon-btn:hover { color: var(--color-text) !important; background: var(--color-surface-hover) !important; } /* Avatar in the appbar — indigo gradient with a soft ring */ .clarify-appbar .mud-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 2px 8px -2px rgba(99,102,241,0.6), 0 0 0 2px rgba(99,102,241,0.12) !important; } /* Thin divider before the user cluster */ .tenant-plan { display: flex; justify-content: center; margin: 5px 0 2px; } /* Plan / licence tier badge — a soft tinted pill with a leading dot in the tier colour */ .plan-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; border: 1px solid transparent; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; line-height: 1.5; transition: filter 0.12s, box-shadow 0.12s; } .plan-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .plan-badge:hover { filter: brightness(1.03); } .plan-badge--starter { background: rgba(100,116,139,0.12); color: #64748b; border-color: rgba(100,116,139,0.22); } .plan-badge--pro { background: rgba(99,102,241,0.12); color: #6366f1; border-color: rgba(99,102,241,0.28); } .plan-badge--agency { background: rgba(245,158,11,0.14); color: #b45309; border-color: rgba(245,158,11,0.32); } /* Trial adds a faint warm ring so it reads as "temporary" without a second colour */ .plan-badge--trial { box-shadow: 0 0 0 2px rgba(245,158,11,0.10); } /* Reverse-surfacing callout on the account panel — peer intel from other workspaces in the org */ .acct-peer-callout { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; font-size: 0.82rem; line-height: 1.45; } .acct-peer-callout.is-threat { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .acct-peer-names { margin-top: 4px; font-size: 0.76rem; opacity: 0.85; } /* "Org portal" jump in the moderation drawer, sits under the workspace/plan switcher */ .drawer-org-btn { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 16px 10px; padding: 9px 12px; border-radius: 9px; background: var(--color-primary); color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: filter 0.12s; } .drawer-org-btn:hover { filter: brightness(1.08); } .clarify-appbar .appbar-divider { width: 1px; height: 22px; background: var(--color-drawer-border); margin: 0 10px 0 6px; flex-shrink: 0; } /* ─── Drawer ────────────────────────────────────────────────────────── */ .clarify-drawer .mud-drawer-content { position: relative; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(185deg, #ffffff 0%, #fafbff 55%, #f6f7fe 100%); border-right: 1px solid var(--color-drawer-border); box-shadow: 1px 0 0 rgba(99,102,241,0.04), 4px 0 24px -12px rgba(15,23,42,0.06); } /* nav links scroll when the viewport is too short to show them all, while the brand stays pinned at the top and the footer at the bottom */ .drawer-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.25) transparent; } .drawer-nav::-webkit-scrollbar { width: 6px; } .drawer-nav::-webkit-scrollbar-track { background: transparent; } .drawer-nav::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.22); border-radius: var(--radius-full); } .drawer-nav:hover::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.38); } /* one-time entrance for the brand + nav cluster */ .drawer-brand { animation: railFadeIn 0.5s ease both; } .tenant-switcher{ animation: railFadeIn 0.5s ease 0.06s both; } .nav-section-label, .mud-nav-link { animation: railFadeIn 0.5s ease 0.1s both; } @keyframes railFadeIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .drawer-brand, .tenant-switcher, .nav-section-label, .mud-nav-link { animation: none !important; } } /* soft indigo halo behind the brand at the top of the rail */ .clarify-drawer .mud-drawer-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: radial-gradient(125% 70% at 50% -10%, rgba(99,102,241,0.13), rgba(139,92,246,0.05) 45%, transparent 72%); pointer-events: none; } .drawer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--space-6) var(--space-4) var(--space-5); margin-bottom: var(--space-2); position: relative; } /* subtle gradient hairline under the brand */ .drawer-brand::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-drawer-border) 20%, var(--color-drawer-border) 80%, transparent); } .drawer-logo { height: 58px; width: auto; display: block; border-radius: 16px; box-shadow: 0 6px 18px -6px rgba(99,102,241,0.28), 0 0 0 1px rgba(99,102,241,0.10); transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s ease; } .drawer-brand:hover .drawer-logo { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 26px -8px rgba(99,102,241,0.40), 0 0 0 1px rgba(99,102,241,0.18); } .drawer-footer { margin-top: auto; padding: var(--space-3) var(--space-4) var(--space-4); position: relative; } .drawer-footer::before { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-drawer-border) 20%, var(--color-drawer-border) 80%, transparent); } /* ─── Tenant Switcher ─────────────────────────────────────────────────── */ .tenant-switcher { position: relative; /* Lift the whole switcher (and its open dropdown) above the nav below it — the nav links establish their own stacking, and without this the section labels paint over the dropdown, making the options unclickable. */ z-index: 60; padding: 0 var(--space-3) var(--space-2); } .tenant-current { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; border-radius: 10px; background: linear-gradient(135deg, rgba(99,102,241,0.07), rgba(139,92,246,0.05)); border: 1px solid var(--color-drawer-active-border); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); text-align: left; cursor: default; line-height: 1.4; } .tenant-current--clickable { cursor: pointer; transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } .tenant-current--clickable:hover { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08)); box-shadow: 0 4px 14px -8px rgba(99,102,241,0.5); } .tenant-icon { display: flex; align-items: center; color: var(--color-primary); flex-shrink: 0; } .tenant-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; } .tenant-dropdown { position: absolute; top: calc(100% - 4px); left: var(--space-3); right: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1300; overflow: hidden; } .tenant-option { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: var(--font-size-sm); color: var(--color-text); text-decoration: none; transition: background 0.12s; } .tenant-option:hover { background: var(--color-bg-hover); } /* non-clickable hint shown when a super user has no other workspaces to switch to */ .tenant-option--empty { color: var(--color-text-muted); font-style: italic; cursor: default; } .tenant-option--empty:hover { background: transparent; } .tenant-backdrop { position: fixed; inset: 0; z-index: 1299; } .drawer-footer-text { color: var(--color-drawer-text-faint) !important; font-size: var(--font-size-xs) !important; } .drawer-footer-links { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.65rem; color: var(--color-drawer-text-faint); } .drawer-footer-links a { color: var(--color-drawer-text-faint); text-decoration: none; } .drawer-footer-links a:hover { color: var(--color-primary-light); text-decoration: underline; } /* Legal links pinned to the bottom of the auth panel (the panel is a centered flexbox, so these are absolutely positioned rather than flowed). */ .auth-legal-links { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 0.72rem; color: #94a3b8; z-index: 1; } .auth-legal-links a { color: #94a3b8; text-decoration: none; } .auth-legal-links a:hover { color: var(--color-primary-dark); text-decoration: underline; } /* ─── Nav Menu ──────────────────────────────────────────────────────── */ .nav-section-label { padding: var(--space-3) 22px var(--space-1); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-drawer-text-faint); } .nav-divider { height: 1px; background: var(--color-drawer-border); margin: var(--space-3) var(--space-4); } .mud-nav-link { position: relative !important; color: var(--color-drawer-text-dim) !important; border-radius: 9px !important; margin: 2px var(--space-3) !important; padding: 9px var(--space-3) !important; font-size: var(--font-size-base) !important; font-weight: 500 !important; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important; } .mud-nav-link .mud-nav-link-icon { color: var(--color-drawer-icon-muted) !important; font-size: 1.15rem !important; transition: color 0.18s ease, transform 0.18s ease !important; } .mud-nav-link:hover { color: var(--color-drawer-text) !important; background: var(--color-drawer-hover-bg) !important; text-decoration: none !important; transform: translateX(3px); } .mud-nav-link:hover .mud-nav-link-icon { color: var(--color-primary) !important; transform: scale(1.08); } .mud-nav-link.nav-active, .mud-nav-link.active { color: #4338ca !important; background: var(--color-drawer-active-bg) !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 0 var(--color-primary), inset 0 0 0 1px var(--color-drawer-active-border), 0 4px 14px -6px rgba(99,102,241,0.45) !important; } .mud-nav-link.nav-active .mud-nav-link-icon, .mud-nav-link.active .mud-nav-link-icon { color: var(--color-primary) !important; } /* ─── Main Content ──────────────────────────────────────────────────── */ .clarify-main { background: var(--color-bg); min-height: 100vh; } .page-content { padding: var(--space-8) var(--space-8) 48px; max-width: 1400px; } /* Dismissible "AI can make mistakes" reminder (app-wide, above page content) */ .ai-notice { display: flex; align-items: center; gap: 10px; margin: var(--space-6) var(--space-8) 0; padding: 10px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius-md, 10px); color: #92400e; font-size: 0.82rem; line-height: 1.5; } .ai-notice-icon { font-size: 1.05rem; color: #d97706; flex-shrink: 0; } .ai-notice-text { flex: 1; min-width: 0; } .ai-notice-text strong { color: #78350f; } .ai-notice-dismiss { flex-shrink: 0; border: none; background: none; color: #b45309; cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; } .ai-notice-dismiss:hover { background: #fef3c7; color: #78350f; } @media (max-width: 768px) { .ai-notice { margin: var(--space-4) var(--space-4) 0; } } /* ─── Public docs portal (/help) — self-contained, mirrors the /welcome look ─── */ .help-page { --lp-ink: #0f172a; --lp-muted: #475569; --lp-primary: #6366f1; --lp-primary-dark: #4f46e5; --lp-violet: #8b5cf6; font-family: 'Inter', system-ui, sans-serif; color: var(--lp-ink); background: #fff; line-height: 1.6; } .help-header { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 1.1rem 1.5rem; } .help-logo { height: 34px; } .help-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 0.9rem; font-weight: 500; } .help-nav a { color: var(--lp-muted); text-decoration: none; } .help-nav a:hover { color: var(--lp-primary-dark); } .help-nav-signin { padding: 7px 18px; border: 1.5px solid #e2e8f0; border-radius: 99px; color: var(--lp-ink) !important; } .help-nav-signin:hover { border-color: var(--lp-primary); } .help-hero { text-align: center; padding: 3.5rem 1.5rem 1.5rem; max-width: 760px; margin: 0 auto; } .help-hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 0.8rem; } .help-hero p { color: var(--lp-muted); font-size: 1.02rem; margin: 0 0 1.5rem; } .help-search { width: 100%; max-width: 460px; padding: 11px 16px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 0.95rem; font-family: inherit; } .help-search:focus { outline: none; border-color: var(--lp-primary); } .help-shot { max-width: 940px; margin: 1rem auto 0; padding: 0 1.5rem; } .help-shot img { width: 100%; height: auto; display: block; border: 1px solid #e9edf5; border-radius: 16px; box-shadow: 0 24px 50px -28px rgba(15, 23, 42, 0.4); } .help-index { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .help-section-card { border: 1px solid #e9edf5; border-radius: 16px; padding: 1.4rem 1.6rem; background: #fbfcfe; } .help-section-card h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.8rem; } .help-section-card ul { list-style: none; margin: 0; padding: 0; } .help-section-card li { padding: 5px 0; } .help-section-card a { color: var(--lp-muted); text-decoration: none; font-size: 0.92rem; } .help-section-card a:hover { color: var(--lp-primary-dark); } .help-empty, .help-no-results { grid-column: 1 / -1; text-align: center; color: var(--lp-muted); } .help-empty a, .help-no-results a { color: var(--lp-primary-dark); } .help-layout { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; } .help-sidebar { position: sticky; top: 1.5rem; align-self: start; } .help-sidebar-section { margin-bottom: 1.2rem; } .help-sidebar-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0 0 0.4rem; } .help-sidebar-link { display: block; padding: 4px 0; color: var(--lp-muted); text-decoration: none; font-size: 0.88rem; line-height: 1.45; } .help-sidebar-link:hover { color: var(--lp-primary-dark); } .help-sidebar-link.active { color: var(--lp-primary-dark); font-weight: 700; } .help-article { min-width: 0; } .help-back { display: inline-block; color: var(--lp-muted); text-decoration: none; font-size: 0.85rem; margin-bottom: 1rem; } .help-back:hover { color: var(--lp-primary-dark); } .help-content { color: var(--lp-ink); } .help-content h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1rem; } .help-content h2 { font-size: 1.3rem; font-weight: 700; margin: 1.8rem 0 0.6rem; } .help-content h3 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 0.5rem; } .help-content p, .help-content li { font-size: 0.95rem; color: #334155; line-height: 1.7; } .help-content p { margin: 0 0 0.9rem; } .help-content ul, .help-content ol { margin: 0 0 0.9rem; padding-left: 1.4rem; } .help-content li { margin: 0.3rem 0; } .help-content a { color: var(--lp-primary-dark); text-decoration: none; } .help-content a:hover { text-decoration: underline; } .help-content strong { color: var(--lp-ink); } .help-content code { background: #f1f5f9; border-radius: 5px; padding: 1px 5px; font-size: 0.86em; } .help-content pre { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px; overflow: auto; } .help-content blockquote { margin: 0 0 0.9rem; padding: 0.6rem 1rem; border-left: 3px solid #c7d2fe; background: #f8faff; color: #475569; } .help-content table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.9rem; } .help-content th, .help-content td { border: 1px solid #e2e8f0; padding: 8px 10px; text-align: left; } .help-content th { background: #f8fafc; font-weight: 700; } .help-content img { max-width: 100%; border-radius: 10px; } .help-feedback { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid #eef2f7; } .help-feedback-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; color: var(--lp-muted); } .help-fb-btn { border: 1.5px solid #e2e8f0; background: #fff; color: var(--lp-ink); font-weight: 600; font-size: 0.82rem; padding: 5px 16px; border-radius: 99px; cursor: pointer; } .help-fb-btn:hover { border-color: var(--lp-primary); } .help-fb-thanks { color: var(--lp-primary-dark); font-weight: 600; } .help-feedback-foot { font-size: 0.85rem; color: #94a3b8; margin: 0.9rem 0 0; } .help-feedback-foot a { color: var(--lp-primary-dark); text-decoration: none; } .help-footer { text-align: center; padding: 2.6rem 1.5rem 2.2rem; border-top: 1px solid #eef2f7; } .help-footer-logo { height: 28px; opacity: 0.85; margin-bottom: 1rem; } .help-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.4rem; font-size: 0.85rem; margin-bottom: 0.9rem; } .help-footer-links a { color: var(--lp-muted); text-decoration: none; } .help-footer-links a:hover { color: var(--lp-primary-dark); } .help-footer-copy { font-size: 0.75rem; color: #94a3b8; margin: 0; } @media (max-width: 760px) { .help-layout { grid-template-columns: 1fr; gap: 1.2rem; } .help-sidebar { position: static; } .help-nav { gap: 1rem; } } /* (.page-content.page-enter is defined with the page-transition rules below) */ /* ─── Cards / Paper ─────────────────────────────────────────────────── */ .mud-paper { border: 1px solid var(--color-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md) !important; } .mud-paper.mud-elevation-0 { box-shadow: none !important; border: 1px solid var(--color-border) !important; } /* ─── Stat Card ──────────────────────────────────────────────────────── */ .stat-card { padding: 20px var(--space-6); position: relative; overflow: hidden; } .stat-card-label { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-2); } .stat-card-value { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--color-text); } .stat-card-icon { position: absolute; top: var(--space-4); right: var(--space-4); width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } /* ─── Page Header ───────────────────────────────────────────────────── */ .page-header { margin-bottom: var(--space-6); } .page-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 5px; } .page-subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; font-weight: 450; } /* ─── Buttons ───────────────────────────────────────────────────────── */ .mud-button-root { font-family: var(--font-sans) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: var(--radius-md) !important; font-size: var(--font-size-sm) !important; } /* ─── Tables ─────────────────────────────────────────────────────────── */ .mud-table-root { border-radius: var(--radius-lg) !important; overflow: hidden; } .mud-table-head .mud-table-cell { font-size: var(--font-size-xs) !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--color-text-secondary) !important; background: var(--color-surface-muted) !important; border-bottom: 1px solid var(--color-border) !important; padding: 10px var(--space-4) !important; } .mud-table-body .mud-table-row:hover td { background: var(--color-surface-hover) !important; } .mud-table-body .mud-table-cell { font-size: var(--font-size-base); padding: var(--space-3) var(--space-4) !important; border-bottom: 1px solid var(--color-surface-hover) !important; color: var(--color-text); } /* --- Auth Layout --- */ @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(18px, -24px) scale(1.08); } 66% { transform: translate(-12px, 16px) scale(0.94); } } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-spin { to { transform: rotate(360deg); } } .auth-layout { display: flex; min-height: 100vh; font-family: var(--font-sans); } /* -- Left panel -- */ .auth-panel-left { width: 440px; flex-shrink: 0; background: linear-gradient(-45deg, #4338ca, #7c3aed, #2563eb, #6d28d9, #4f46e5); background-size: 400% 400%; animation: gradient-shift 14s ease infinite; display: flex; flex-direction: column; padding: 48px 44px; position: relative; overflow: hidden; } .auth-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(50px); } .auth-orb-1 { width: 320px; height: 320px; top: -100px; right: -100px; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%); animation: orb-float 9s ease-in-out infinite; } .auth-orb-2 { width: 220px; height: 220px; bottom: 15%; left: -70px; background: radial-gradient(circle, rgba(167,139,250,0.35) 0%, transparent 70%); animation: orb-float 12s ease-in-out infinite; animation-delay: -4s; } .auth-orb-3 { width: 160px; height: 160px; bottom: 60px; right: 10%; background: radial-gradient(circle, rgba(96,165,250,0.3) 0%, transparent 70%); animation: orb-float 10s ease-in-out infinite; animation-delay: -7s; } .auth-left-content { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; } .auth-logo { margin-bottom: 44px; } .auth-logo-card { display: inline-flex; align-items: center; background: rgba(255,255,255,0.97); border-radius: 14px; padding: 12px 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12); } .auth-logo-img { height: 52px; width: auto; display: block; } .auth-hero-title { font-size: 1.55rem; font-weight: 750; color: #ffffff; line-height: 1.32; letter-spacing: -0.03em; margin: 0 0 14px; } .auth-hero-sub { font-size: 0.9375rem; color: rgba(255,255,255,0.7); line-height: 1.72; margin: 0 0 32px; } .auth-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .auth-features li { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; color: rgba(255,255,255,0.85); line-height: 1.5; } .auth-feature-icon { flex-shrink: 0; width: 22px; height: 22px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .auth-quote-card { margin-top: 32px; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 18px 20px; } .auth-quote-mark { display: block; font-size: 2rem; line-height: 0.6; font-family: Georgia, serif; color: rgba(255,255,255,0.45); margin-bottom: 8px; } .auth-quote-text { font-size: 0.875rem; color: rgba(255,255,255,0.9); line-height: 1.65; margin: 0 0 10px; font-style: italic; } .auth-quote-attr { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85); margin: 0; } .auth-quote-role { display: block; font-size: 0.7rem; font-weight: 400; color: rgba(255,255,255,0.5); margin-top: 2px; } .auth-left-footer { font-size: 0.7rem; color: rgba(255,255,255,0.35); position: relative; z-index: 1; margin-top: 32px; } /* -- Right panel -- */ @keyframes aurora-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes btn-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .auth-panel-right { flex: 1; background: linear-gradient(-55deg, #ede9fe, #f5f3ff, #eef2ff, #fdf4ff, #f0f9ff, #ede9fe, #fce7f3); background-size: 600% 600%; animation: aurora-shift 20s ease infinite; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6); position: relative; overflow: hidden; } .auth-right-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(99,102,241,0.25) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%); opacity: 0.45; } .auth-right-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(110px); animation: orb-float 12s ease-in-out infinite; } .auth-right-orb-1 { width: 580px; height: 580px; top: -180px; right: -100px; background: radial-gradient(circle, rgba(167,139,250,0.55) 0%, transparent 65%); animation-duration: 15s; } .auth-right-orb-2 { width: 480px; height: 480px; bottom: -140px; left: -80px; background: radial-gradient(circle, rgba(99,102,241,0.45) 0%, transparent 65%); animation-duration: 12s; animation-delay: -5s; } .auth-right-orb-3 { width: 340px; height: 340px; top: 42%; right: 5%; background: radial-gradient(circle, rgba(236,72,153,0.3) 0%, transparent 65%); animation-duration: 10s; animation-delay: -8s; } .auth-form-card { width: 100%; max-width: 420px; background: rgba(255,255,255,0.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.95); border-radius: 22px; box-shadow: 0 0 0 1px rgba(99,102,241,0.08), 0 32px 80px -8px rgba(99,102,241,0.16), 0 8px 32px rgba(0,0,0,0.06); padding: 40px; position: relative; z-index: 1; animation: fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Mobile-only brand logo above the form (left panel is hidden on small screens). */ .auth-mobile-brand { display: none; } .auth-mobile-logo-card { display: inline-flex; align-items: center; background: rgba(255,255,255,0.97); border-radius: 13px; padding: 11px 20px; box-shadow: 0 8px 28px rgba(99,102,241,0.18), 0 2px 8px rgba(0,0,0,0.08); } .auth-mobile-logo-card img { height: 36px; width: auto; display: block; } /* --- Auth Form Elements --- */ .auth-heading { margin-bottom: 28px; } .auth-heading h1 { font-size: 1.75rem; font-weight: 750; color: var(--color-text); letter-spacing: -0.035em; margin: 0 0 6px; } .auth-heading p { font-size: var(--font-size-base); color: var(--color-text-secondary); margin: 0; } .auth-field { display: flex; flex-direction: column; margin-bottom: var(--space-4); } .auth-field label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-label); margin-bottom: var(--space-1); } .auth-field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); } .auth-field-row label { margin-bottom: 0; } .auth-input-wrapper { position: relative; display: flex; align-items: center; } .auth-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; line-height: 0; z-index: 1; } .auth-input-wrapper .auth-input { padding-left: 40px; } .auth-input { width: 100%; padding: 12px 14px; font-family: var(--font-sans); font-size: var(--font-size-base); color: var(--color-text); background: #ffffff; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-appearance: none; } .auth-input:focus { background: #fafaff; border-color: var(--color-primary); box-shadow: 0 0 0 3.5px rgba(99,102,241,0.14); } .auth-input::placeholder { color: var(--color-text-placeholder); } .auth-field-error { font-size: 0.75rem; color: var(--color-error); margin-top: var(--space-1); } .auth-validation-summary { background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--font-size-sm); color: var(--color-error-dark); margin-bottom: var(--space-4); list-style: none; } .auth-remember { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 20px; } .auth-remember label { font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; user-select: none; } .auth-checkbox { width: 15px; height: 15px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); accent-color: var(--color-primary); cursor: pointer; } .auth-btn-primary { width: 100%; padding: 12px var(--space-4); font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: 600; color: #ffffff; background: linear-gradient(100deg, #818cf8, #6366f1 40%, #4f46e5 60%, #6366f1 80%, #818cf8); background-size: 200% auto; border: none; border-radius: var(--radius-md); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.1s ease; letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.15); animation: btn-shimmer 3s linear infinite; } .auth-btn-primary:hover { opacity: 0.9; box-shadow: 0 8px 24px rgba(99,102,241,0.5); transform: translateY(-1px); } .auth-btn-primary:active { transform: translateY(0); } .auth-btn-primary:disabled, .auth-btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; transform: none; } .auth-btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: auth-spin 0.6s linear infinite; vertical-align: middle; margin-right: 7px; } .auth-btn-secondary .auth-btn-spinner { border-color: rgba(99,102,241,0.25); border-top-color: var(--color-primary); } .auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: 20px 0; color: var(--color-text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .auth-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px var(--space-4); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-label); background: #ffffff; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; text-align: center; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .auth-btn-secondary:hover { background: #fafaff; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); color: var(--color-text-label); text-decoration: none; } .auth-footer-link { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 20px 0 0; } /* Secondary line directly under a footer link — sits close but never overlaps. */ .auth-footer-note { margin-top: 6px; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5; } .auth-link { color: var(--color-primary); text-decoration: none; transition: color 0.15s ease; } .auth-link:hover { color: var(--color-primary-dark); text-decoration: underline; } .auth-link-sm { font-size: var(--font-size-sm); } .auth-section-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid var(--color-border); } .auth-textarea { resize: vertical; min-height: 76px; line-height: 1.5; } .auth-link { color: var(--color-primary); font-weight: 500; text-decoration: none; } .auth-link:hover { color: var(--color-primary-dark); text-decoration: underline; } .auth-link-sm { font-size: var(--font-size-sm); } .auth-success-card { background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); border-radius: 12px; padding: 28px 24px 20px; text-align: center; margin-bottom: 24px; } .auth-success-icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, rgba(139,92,246,0.14) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--color-primary); } .auth-success-text { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.65; margin: 0; } /* ─── Validation ────────────────────────────────────────────────────── */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); } .invalid { outline: 1px solid var(--color-error); } .validation-message { color: var(--color-error); font-size: var(--font-size-sm); } .darker-border-checkbox.form-check-input { border-color: var(--color-text-muted); } /* ─── Blazor Error ──────────────────────────────────────────────────── */ .blazor-error-boundary { background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-error-dark); font-family: var(--font-sans); font-size: var(--font-size-base); } /* ─── Scrollbar ─────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ─── Comment Queue ─────────────────────────────────────────────────── */ .queue-filters { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .queue-filter-top { display: flex; align-items: center; gap: var(--space-3); } .queue-filter-bottom { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .queue-search { flex: 1; min-width: 180px; max-width: 340px; } .queue-post-select { width: 220px; flex-shrink: 0; } .queue-date-select { width: 150px; flex-shrink: 0; } .queue-filter-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; } .filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px var(--space-3); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .filter-chip-count { font-size: var(--font-size-xs); font-weight: 600; opacity: 0.8; } /* Queue split layout */ .queue-split { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; min-height: 480px; } .queue-list-panel { flex: 1; min-width: 0; overflow-y: auto; max-height: calc(100vh - 260px); } .queue-detail-panel { width: 420px; flex-shrink: 0; border-left: 1px solid var(--color-border); overflow-y: auto; max-height: calc(100vh - 260px); display: flex; flex-direction: column; } /* Comment rows */ .comment-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px var(--space-4) 14px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background 0.1s ease; position: relative; } .comment-row:last-child { border-bottom: none; } .comment-row:hover { background: var(--color-surface-hover); } .comment-row.is-selected { background: var(--color-primary-subtle); } .comment-row-indicator { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 2px 2px 0; } .comment-row-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm); font-weight: 700; flex-shrink: 0; margin-top: 1px; } .comment-row-body { flex: 1; min-width: 0; } .comment-row-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: 3px; } .comment-row-author { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comment-row-time { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .comment-row-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; margin-bottom: var(--space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .comment-row-footer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } /* Category badges */ .category-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.02em; } .category-badge.unclassified { background: var(--color-surface-hover); color: var(--color-text-muted); } .confidence-text { font-size: var(--font-size-xs); color: var(--color-text-muted); } .reaction-counts { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; } .reaction-pill { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--color-surface-hover); font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.6; } .reaction-pill-pending { opacity: 0.55; font-style: italic; } .reaction-total { font-size: var(--font-size-xs); color: var(--color-text-muted); padding-left: 2px; } .detail-reactions { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); margin-top: var(--space-2); } .reply-status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; } .reply-status-badge.approved { background: rgba(22,163,74,0.12); color: var(--color-success); } /* View toggle */ .view-toggle { display: flex; gap: 2px; background: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 2px; margin-left: auto; flex-shrink: 0; } .view-toggle-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-muted); transition: all 0.15s ease; } .view-toggle-btn.active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); } /* Platform chips */ .queue-platform-chips { display: flex; gap: var(--space-2); /* The post-topic chips can number in the dozens — without wrapping they widen the whole page into horizontal scroll (mobile overrides this with its own scroller). */ flex-wrap: wrap; } .platform-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .platform-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .platform-chip.active { background: var(--color-primary-subtle); border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; } .platform-chip-sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 2px 2px; flex-shrink: 0; } /* Pagination */ .queue-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); } .pagination-info { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } /* Post group headers */ /* ── Post accordion ───────────────────────────────────────── */ .post-accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); overflow: hidden; } .post-accordion-header { display: flex; align-items: stretch; border-left: 4px solid var(--post-accent, #94a3b8); background: color-mix(in srgb, var(--post-accent, #94a3b8) 10%, var(--color-surface-muted)); cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 1; transition: background 0.12s; } .post-accordion-header:hover { background: color-mix(in srgb, var(--post-accent, #94a3b8) 18%, var(--color-surface-muted)); } /* Thumbnail */ .post-header-thumb { width: 82px; flex-shrink: 0; object-fit: cover; display: block; border-right: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); } .post-header-thumb-empty { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--post-accent, #94a3b8) 6%, var(--color-surface)); color: var(--color-text-muted); } /* Main content */ .post-header-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 10px 14px; gap: 7px; } /* Row 1: caption + meta */ .post-header-top { display: flex; align-items: flex-start; gap: 10px; } .post-header-caption { flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-header-no-caption { font-style: italic; font-weight: 400; opacity: 0.45; } .post-header-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 1px; } .post-header-date { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } .post-header-fb-link { display: inline-flex; align-items: center; color: var(--color-text-muted); opacity: 0.5; transition: opacity 0.12s, color 0.12s; text-decoration: none; } .post-header-fb-link:hover { opacity: 1; color: var(--color-primary); } /* Row 2: reactions | sep | stats | spacer | count | expand | actions */ .post-header-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; } .post-header-reactions { display: flex; gap: 3px; flex-shrink: 0; } .post-header-sep { width: 1px; height: 13px; background: var(--color-border); flex-shrink: 0; opacity: 0.7; } .post-header-stats { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; } /* Stat chips */ .post-stat-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--radius-full); font-size: 0.67rem; font-weight: 600; white-space: nowrap; line-height: 1.4; } .post-stat-chip.chip-info { background: color-mix(in srgb, var(--color-info) 16%, transparent); color: var(--color-info); } .post-stat-chip.chip-warn { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #d97706; } .post-stat-chip.chip-danger { background: color-mix(in srgb, var(--color-error) 16%, transparent); color: var(--color-error); } .post-stat-chip.chip-pink { background: color-mix(in srgb, #ec4899 16%, transparent); color: #db2777; } .post-stat-chip.chip-purple { background: color-mix(in srgb, var(--color-purple) 16%, transparent); color: var(--color-purple); } .post-header-spacer { flex: 1; min-width: 0; } .post-header-count { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } /* Unified action buttons */ .post-header-actions { display: flex; align-items: center; gap: 1px; flex-shrink: 0; margin-left: 2px; } .post-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--radius-full); border: none; background: none; color: var(--color-text-muted); font-size: 0.7rem; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: color 0.12s, background 0.12s; } .post-action-btn:hover:not(:disabled) { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); } .post-action-btn:disabled { opacity: 0.4; cursor: default; } .post-action-btn.is-active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); } .post-action-btn.action-success { color: var(--color-success); } .post-action-btn.action-success:hover:not(:disabled) { background: color-mix(in srgb, var(--color-success) 10%, transparent); } .post-action-btn.action-done { color: var(--color-success); opacity: 0.65; } .post-action-btn.action-done:hover:not(:disabled) { opacity: 1; background: color-mix(in srgb, var(--color-success) 10%, transparent); } .post-action-badge { font-size: 0.65rem; font-weight: 700; line-height: 1; } .post-accordion-preview { padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); background: color-mix(in srgb, var(--color-surface-muted) 50%, transparent); border-bottom: 1px solid var(--color-border); line-height: 1.6; white-space: pre-wrap; } .post-accordion-body { border-top: 1px solid var(--color-border); } .post-accordion-empty { padding: 0.85rem 1rem; font-size: 0.8rem; color: var(--color-text-muted); font-style: italic; } /* post-refresh-btn / post-reactivate-btn replaced by .post-action-btn */ .comment-moderate-btn { display: inline-flex; align-items: center; margin-left: auto; padding: 1px 6px; border-radius: var(--radius-full); border: none; background: none; color: var(--color-text-muted); font-size: 0.65rem; cursor: pointer; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s; } .comment-row:hover .comment-moderate-btn, .comment-moderate-btn.is-moderated { opacity: 1; } .comment-moderate-btn:hover:not(.is-moderated) { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 7%, transparent); } .comment-moderate-btn.is-moderated { color: var(--color-success); } .comment-moderate-btn.is-disabled { opacity: 0; cursor: not-allowed; color: #94a3b8; } .comment-row:hover .comment-moderate-btn.is-disabled { opacity: 1; } .comment-review-btn { display: inline-flex; align-items: center; margin-left: 4px; padding: 2px 6px; font-size: 0.68rem; font-weight: 500; border: none; border-radius: 4px; background: transparent; color: var(--color-error); cursor: pointer; opacity: 0; transition: opacity 0.12s, color 0.12s, background 0.12s; } .comment-row:hover .comment-review-btn { opacity: 1; } .comment-review-btn:hover { background: color-mix(in srgb, var(--color-error) 7%, transparent); } .comment-reviewed-badge { display: inline-flex; align-items: center; margin-left: 4px; padding: 2px 6px; font-size: 0.68rem; font-weight: 500; color: var(--color-success); background: color-mix(in srgb, var(--color-success) 7%, transparent); border-radius: 4px; } /* clickable variant — toggles the review state back off */ button.comment-reviewed-badge.is-toggle { border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } button.comment-reviewed-badge.is-toggle:hover { background: color-mix(in srgb, var(--color-error) 9%, transparent); color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 25%, transparent); } /* post-moderate-btn replaced by .post-action-btn.action-done */ .post-accordion.is-moderated { opacity: 0.65; } /* Post topic category badge */ .post-topic-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); } /* post-bulk-btn / post-gen-btn replaced by .post-action-btn */ /* Bulk hide panel */ .bulk-hide-panel { display: flex; flex-direction: column; } .bulk-panel-header { padding: 14px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .bulk-panel-title { font-size: 0.82rem; font-weight: 700; line-height: 1.2; } .bulk-panel-post { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bulk-cat-chips { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; flex-shrink: 0; } .bulk-cat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; cursor: pointer; border: 1px solid color-mix(in srgb, var(--cat-color) 45%, transparent); background: color-mix(in srgb, var(--cat-color) 12%, transparent); color: var(--cat-color); transition: background 0.12s, opacity 0.12s; } .bulk-cat-chip.none-sel { opacity: 0.35; } .bulk-cat-chip.part-sel { background: color-mix(in srgb, var(--cat-color) 6%, transparent); } .bulk-cat-chip:hover { background: color-mix(in srgb, var(--cat-color) 22%, transparent); opacity: 1; } .bulk-cat-chip-count { font-size: 0.68rem; opacity: 0.75; } .bulk-select-all-row { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer; background: var(--color-surface-muted); flex-shrink: 0; user-select: none; } .bulk-select-all-row:hover { background: var(--color-border); } .bulk-panel-list { flex: 1; overflow-y: auto; } .bulk-candidate-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--color-border); transition: background 0.1s; user-select: none; } .bulk-candidate-row:hover { background: var(--color-surface-muted); } .bulk-candidate-row.is-selected { background: color-mix(in srgb, var(--color-warning-light) 6%, var(--color-surface)); } .bulk-candidate-check { flex-shrink: 0; width: 15px; height: 15px; margin-top: 3px; cursor: pointer; accent-color: var(--color-warning); } .bulk-candidate-body { flex: 1; min-width: 0; } .bulk-candidate-author { font-size: 0.8rem; font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } /* Full comment text, wrapping — moderators judge hide/reply decisions on the whole comment, so truncating to one ellipsised line forced them back to Facebook. */ .bulk-candidate-text { font-size: 0.78rem; color: var(--color-text-muted); white-space: pre-line; overflow-wrap: anywhere; } .bulk-candidate-thumb { margin-top: 6px; } .bulk-candidate-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: block; } .bulk-panel-footer { padding: 12px 16px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; flex-shrink: 0; /* Sticky: inside the post wizard the whole panel sits in the wizard's scrolling body, so without this the Hide/Generate button scrolls away beneath dozens of comments. In the queue side panel (non-scrolling parent) sticky is a no-op. */ position: sticky; bottom: 0; background: var(--color-surface); z-index: 2; } .bulk-hide-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1; padding: 7px 14px; border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 600; cursor: pointer; background: color-mix(in srgb, var(--color-warning-light) 15%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning-light) 40%, transparent); transition: background 0.12s, color 0.12s; } .bulk-hide-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-warning-light) 25%, transparent); color: #b45309; } .bulk-hide-btn:disabled { opacity: 0.4; cursor: default; } .bulk-reply-config { flex: 1; padding: 16px; overflow-y: auto; } .bulk-reply-config-label { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 10px; } .bulk-reply-cat-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; border-bottom: 1px solid var(--color-border); user-select: none; } .bulk-reply-cat-row:last-child { border-bottom: none; } .bulk-reply-cat-row:hover { opacity: 0.85; } .bulk-reply-log { flex: 1; overflow-y: auto; padding: 12px 16px; font-size: 0.78rem; display: flex; flex-direction: column; gap: 3px; } .bulk-reply-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1; padding: 7px 14px; border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 600; cursor: pointer; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); transition: background 0.12s; } .bulk-reply-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--color-primary) 22%, transparent); } .bulk-reply-btn:disabled { opacity: 0.4; cursor: default; } .bulk-reply-btn.done { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); } .bulk-reply-btn.done:hover { background: color-mix(in srgb, var(--color-success) 22%, transparent); } /* Bulk reply review list */ .bulk-reply-review-list { flex: 1; overflow-y: auto; } .bulk-reply-item { padding: 12px 16px; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 7px; transition: background 0.1s; } .bulk-reply-item.is-approved { background: color-mix(in srgb, var(--color-success) 4%, var(--color-surface)); } .bulk-reply-item.is-posted { background: color-mix(in srgb, var(--color-info) 4%, var(--color-surface)); } .bulk-reply-item-header { display: flex; align-items: center; gap: 7px; } .bulk-reply-item-author { font-size: 0.8rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Full wrapped comment text — see .bulk-candidate-text; you can't draft a reply to a comment you can only see the first line of. */ .bulk-reply-item-comment { font-size: 0.75rem; color: var(--color-text-muted); white-space: pre-line; overflow-wrap: anywhere; } .bulk-reply-draft { width: 100%; box-sizing: border-box; resize: vertical; padding: 7px 10px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--mud-palette-text-primary); font-size: 0.78rem; line-height: 1.5; font-family: inherit; transition: border-color 0.12s; } .bulk-reply-draft:focus { outline: none; border-color: var(--color-primary); } .bulk-reply-draft:disabled { opacity: 0.6; cursor: default; resize: none; } .bulk-reply-item-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bulk-action-btn { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background 0.12s; } .bulk-action-btn.approve { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); } .bulk-action-btn.approve:hover { background: color-mix(in srgb, var(--color-success) 22%, transparent); } .bulk-action-btn.post { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); } .bulk-action-btn.post:hover { background: color-mix(in srgb, var(--color-primary) 22%, transparent); } .post-show-more-btn { display: flex; align-items: center; width: 100%; padding: 8px var(--space-4); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-muted); background: none; border: none; border-top: 1px solid var(--color-border); cursor: pointer; text-align: left; transition: color 0.12s, background 0.12s; } .post-show-more-btn:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, transparent); } /* ── Reply threads ────────────────────────────────────────── */ .reply-thread { border-left: 2px solid var(--color-border); margin-left: 52px; margin-bottom: 2px; } .reply-toggle-btn { display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px; font-size: var(--font-size-xs); color: var(--color-primary); background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s; } .reply-toggle-btn:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); } .reply-toggle-btn:disabled { opacity: 0.5; cursor: default; } .comment-row.reply-row { padding-left: 10px; background: color-mix(in srgb, var(--color-surface) 60%, var(--color-background)); } .comment-row.reply-row .comment-row-avatar { width: 28px; height: 28px; font-size: 0.7rem; } /* ── FB-style post card ───────────────────────────────────── */ .fb-post-card { margin: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; background: var(--color-surface); box-shadow: 0 1px 4px rgba(0,0,0,0.07); display: flex; min-height: 90px; } /* ── Media panel (left column) ── */ .fb-post-media { flex-shrink: 0; width: 160px; border-right: 1px solid var(--color-border); overflow: hidden; background: #000; } .fb-post-image-thumb { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 90px; max-height: 200px; } .fb-post-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-border); height: 100%; } .fb-post-gallery-img { width: 100%; height: 88px; object-fit: cover; display: block; } /* ── Text panel (right column) ── */ .fb-post-body { flex: 1; min-width: 0; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .fb-post-caption { flex: 1; font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.6; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .fb-post-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); padding-top: var(--space-2); border-top: 1px solid var(--color-border); margin-top: auto; flex-shrink: 0; } .fb-post-link { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary); text-decoration: none; margin-left: auto; } .fb-post-link:hover { text-decoration: underline; color: var(--color-primary); } .reaction-pill.sm { font-size: 0.7rem; padding: 1px 5px; } .reaction-pill.xs { font-size: 0.65rem; padding: 1px 4px; } .post-group-link { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 600; color: var(--color-primary); text-decoration: none; padding: 2px 7px; border-radius: 5px; background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); white-space: nowrap; transition: background 0.15s; flex-shrink: 0; } .post-group-link:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); text-decoration: none; } .comment-row-post-link { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 500; color: var(--color-primary); text-decoration: none; margin-left: auto; opacity: 0.8; white-space: nowrap; } .comment-row-post-link:hover { opacity: 1; text-decoration: underline; color: var(--color-primary); } .comment-row-post-label { font-size: 0.68rem; color: var(--color-text-muted); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* Tracked account badge */ .tracked-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--color-error); background: var(--color-error-bg); border: 1px solid var(--color-error-border); padding: 1px 6px; border-radius: var(--radius-full); vertical-align: middle; line-height: 1.4; } .own-comment-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--color-own-comment); background: color-mix(in srgb, var(--color-own-comment) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-own-comment) 27%, transparent); padding: 1px 6px; border-radius: var(--radius-full); vertical-align: middle; line-height: 1.4; } .comment-row-author-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } /* Queue empty state */ .queue-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: 80px var(--space-8); color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; } /* Detail panel */ .detail-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); z-index: 1; } .detail-author-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-base); font-weight: 700; flex-shrink: 0; } .detail-author-info { flex: 1; min-width: 0; } .detail-author-name { font-size: var(--font-size-base); font-weight: 600; color: var(--color-text); } .detail-author-id { font-size: var(--font-size-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .detail-close { background: none; border: none; padding: var(--space-1); cursor: pointer; color: var(--color-text-muted); border-radius: var(--radius-sm); display: flex; align-items: center; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .detail-close:hover { background: var(--color-surface-hover); color: var(--color-text); } .detail-ext-link { color: var(--mud-palette-text-secondary); opacity: 0.7; text-decoration: none; transition: opacity 0.15s; } .detail-ext-link:hover { opacity: 1; } .detail-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; } .detail-comment-block { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); } /* ── Reply thread context in the detail panel ─────────────────────────────── */ .detail-thread { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); max-height: 280px; overflow-y: auto; } .detail-thread-title { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px; } .detail-thread-row { padding: 6px 8px; border-radius: var(--radius-sm); } .detail-thread-reply { margin-left: 14px; border-left: 2px solid var(--color-border); } .detail-thread-row--current { background: rgba(99,102,241,0.08); border-left-color: var(--color-primary); } .detail-thread-row--missing { font-size: 0.8rem; color: var(--color-text-muted); } .detail-thread-row--missing a { color: var(--color-primary); font-weight: 600; } .detail-thread-author { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.76rem; font-weight: 600; color: var(--color-text-secondary); } .detail-thread-time { font-weight: 400; color: var(--color-text-muted); font-size: 0.72rem; } .detail-thread-own, .detail-thread-this { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: var(--radius-full); background: rgba(99,102,241,0.12); color: var(--color-primary); } .detail-thread-this { background: var(--color-primary); color: #fff; } .detail-thread-text { font-size: 0.82rem; color: var(--color-text-primary); margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; } .detail-comment-text { font-size: var(--font-size-base); color: var(--color-text); line-height: 1.7; margin-bottom: var(--space-2); } .detail-comment-media { margin-bottom: var(--space-3); border-radius: var(--radius-md); overflow: hidden; max-width: 100%; } .detail-comment-media img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--radius-md); background: var(--color-surface); } .comment-row-media { margin-top: var(--space-1); margin-bottom: var(--space-2); } .comment-row-media img { display: block; max-height: 80px; max-width: 120px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .detail-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); } .detail-classification { border: 1px solid; border-radius: var(--radius-md); padding: var(--space-4); } .detail-class-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .detail-confidence { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 500; } .detail-reclassify-btn { margin-left: auto; } .detail-reclassify-btn button { min-width: 0 !important; padding: 2px 6px !important; } .detail-reason { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; margin: 0; } .detail-section-label { font-size: var(--font-size-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); } .detail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--color-border); } /* ─── Mobile Auth ───────────────────────────────────────────────────── */ @media (max-width: 768px) { .auth-panel-left { display: none; } .auth-panel-right { padding: 28px var(--space-4) var(--space-5); justify-content: flex-start; overflow-y: auto; } .auth-form-card { box-shadow: 0 16px 48px rgba(99,102,241,0.12); padding: var(--space-6) var(--space-5); flex-shrink: 0; /* don't let a short viewport squash the card */ } .auth-mobile-brand { display: flex; justify-content: center; margin-bottom: 20px; flex-shrink: 0; } .auth-mode-tabs { flex-shrink: 0; } .auth-heading { margin-bottom: 22px; } .auth-heading h1 { font-size: 1.45rem; } /* 16px inputs stop iOS Safari from zooming the whole page on focus */ .auth-input { font-size: 16px; } /* Flow the legal links under the card instead of pinning them to the panel, where they overlap the form once the page scrolls. */ .auth-legal-links { position: static; margin-top: auto; padding-top: 24px; flex-wrap: wrap; flex-shrink: 0; } .page-content { padding: var(--space-4) var(--space-4) var(--space-8); } } /* ─── Settings ───────────────────────────────────────────────────────── */ .settings-section-label { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin-bottom: var(--space-3); } .settings-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); overflow: hidden; } .settings-card-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); } .settings-platform-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); flex-shrink: 0; } .settings-card-meta { flex: 1; min-width: 0; } .settings-card-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); } .settings-card-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; } .settings-status-badge { font-size: var(--font-size-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; } .settings-status-badge.configured { background: rgba(22,163,74,0.1); color: var(--color-success); } .settings-status-badge.unconfigured { background: var(--color-surface-hover); color: var(--color-text-muted); } .settings-card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); } .settings-field { width: 100%; } .settings-field-row { display: flex; gap: var(--space-3); } .settings-field-row .settings-field { flex: 1; } .settings-connected-list { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); } .settings-connected-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); } .settings-connected-name { font-weight: 500; color: var(--color-text); } .settings-connected-id { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-left: var(--space-2); } .settings-connected-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); margin-left: auto; } .settings-platform-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 900px) { .settings-platform-grid { grid-template-columns: 1fr 1fr; } } .settings-nav { display: flex; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-1); margin-bottom: var(--space-6); width: fit-content; } .settings-nav-item { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: none; transition: color 0.15s, background 0.15s; white-space: nowrap; } .settings-nav-item:hover { color: var(--color-text); background: var(--color-surface-hover); text-decoration: none; } .settings-nav-item.active { color: var(--color-primary); background: rgba(99,102,241,0.08); font-weight: 600; } /* ── Account Tracker ─────────────────────────────────────────────────── */ .accounts-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; } .accounts-title { font-size: 1.5rem; font-weight: 700; color: var(--mud-palette-text-primary); margin: 0 0 2px; } .accounts-subtitle { font-size: 0.85rem; color: var(--mud-palette-text-secondary); margin: 0; } .accounts-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* Four tiles don't fit a phone width — let them grid up 2x2 instead of the last (Blocked) tile spilling off the edge. */ @media (max-width: 600px) { .acct-stat { flex: 1 1 40%; } } .acct-stat { display: flex; flex-direction: column; align-items: center; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 10px 18px; min-width: 72px; } .acct-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1; } .acct-stat-label { font-size: 0.72rem; color: var(--mud-palette-text-secondary); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; } .accounts-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: 64px 24px; color: var(--mud-palette-text-secondary); text-align: center; } .accounts-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-4); } .accounts-list { display: flex; flex-direction: column; gap: var(--space-3); } .acct-card { display: flex; gap: var(--space-3); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: var(--space-4); transition: box-shadow 0.15s; } .acct-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .acct-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 700; flex-shrink: 0; } .acct-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .acct-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .acct-name { font-weight: 600; font-size: 0.95rem; color: var(--mud-palette-text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .acct-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; } .acct-badge.esafety { background: color-mix(in srgb, var(--color-error) 13%, transparent); color: var(--color-error); } .acct-badge.signal { background: color-mix(in srgb, var(--color-warning-light) 13%, transparent); color: var(--color-warning); } .acct-meta-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .acct-score-bar-wrap { width: 80px; height: 6px; background: var(--mud-palette-lines-default); border-radius: 3px; overflow: hidden; } .acct-score-bar { height: 100%; border-radius: 3px; transition: width 0.3s ease; } .acct-score-pct { font-size: 0.8rem; font-weight: 700; min-width: 36px; text-align: right; } .acct-sub { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--mud-palette-text-secondary); } .acct-platform-badge { background: var(--mud-palette-background-grey); padding: 1px 7px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; color: var(--mud-palette-text-secondary); } .acct-id { font-family: monospace; font-size: 0.78rem; color: var(--mud-palette-text-secondary); } .acct-footer { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.77rem; color: var(--mud-palette-text-secondary); } .acct-signals { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; } .acct-signal-detail { font-size: 0.78rem; color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--color-warning-light) 5%, transparent); border-left: 2px solid var(--color-warning-light); padding: 4px 8px; border-radius: 0 4px 4px 0; } /* ── Account Tracker — split panel + new views ──────────────────────── */ .acct-view-toggle { display: flex; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; overflow: hidden; } .acct-view-btn { display: flex; align-items: center; padding: 7px 14px; font-size: 0.85rem; font-weight: 500; background: none; border: none; cursor: pointer; color: var(--mud-palette-text-secondary); transition: background 0.15s, color 0.15s; } .acct-view-btn.active { background: var(--mud-palette-primary); color: #fff; } .acct-view-btn:not(.active):hover { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-primary); } /* Split panel (mirrors queue-split) */ .acct-split { display: grid; grid-template-columns: 1fr; gap: var(--space-3); min-height: 0; } @media (min-width: 900px) { .acct-split.has-detail { grid-template-columns: 340px 1fr; } } /* List panel */ .acct-list-panel { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: calc(100vh - 200px); } /* Account/Group row button */ .acct-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 10px 12px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; cursor: pointer; text-align: left; transition: box-shadow 0.12s, border-color 0.12s; } .acct-row:hover { border-color: var(--mud-palette-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.07); } .acct-row.selected { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); } .acct-row-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; flex-shrink: 0; } .acct-row-avatar.group-avatar { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); } .acct-row-body { flex: 1; min-width: 0; } .acct-row-name { font-size: 0.88rem; font-weight: 600; color: var(--mud-palette-text-primary); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .acct-row-sub { display: flex; align-items: center; gap: 4px; font-size: 0.77rem; color: var(--mud-palette-text-secondary); margin-top: 2px; } .acct-row-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .acct-row-score { font-size: 0.82rem; font-weight: 700; flex-shrink: 0; } /* Detail panel */ .acct-detail-panel { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 200px); } .acct-detail-panel .detail-header { padding: 16px 20px; border-bottom: 1px solid var(--mud-palette-lines-default); display: flex; align-items: flex-start; gap: 12px; } .acct-detail-panel .detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } .acct-detail-panel .detail-body > * { flex-shrink: 0; } /* Score row */ .acct-detail-score-row { display: flex; align-items: center; gap: 10px; } .acct-detail-score-label { font-size: 0.78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; } /* Meta row */ .acct-detail-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.77rem; color: var(--mud-palette-text-secondary); padding: 8px 0; border-top: 1px solid var(--mud-palette-lines-default); border-bottom: 1px solid var(--mud-palette-lines-default); } /* Threat type badge */ .acct-threat-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } /* Group membership chip */ .acct-group-chip { display: flex; align-items: center; gap: 6px; background: var(--mud-palette-background-grey); border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; font-weight: 500; } .acct-group-change { background: none; border: 1px solid var(--mud-palette-lines-default); border-radius: 5px; padding: 1px 8px; font-size: 0.72rem; cursor: pointer; color: var(--mud-palette-text-secondary); margin-left: auto; transition: background 0.12s; } .acct-group-change:hover { background: var(--mud-palette-background); } /* Group form */ .acct-group-form { background: var(--mud-palette-background-grey); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; } /* Member row inside group detail */ .acct-group-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); } .acct-group-member-row:last-child { border-bottom: none; } /* Threat flag dot on avatar */ .acct-threat-dot { position: absolute; bottom: 0; right: 0; width: 9px; height: 9px; background: #dc2626; border-radius: 50%; border: 2px solid var(--mud-palette-surface); } /* Risk badge on account rows */ .acct-risk-badge { flex-shrink: 0; } /* Per-flag chips in account row sub-line */ .acct-flag-chip { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 600; padding: 1px 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; } .acct-sub-platform { color: var(--color-text-muted); white-space: nowrap; } .acct-sub-total { color: var(--color-text-muted); font-size: 0.72rem; white-space: nowrap; } /* Filter divider */ .filter-divider { width: 1px; height: 22px; background: var(--mud-palette-lines-default); margin: 0 2px; } /* Search box */ .acct-search-wrap { display: flex; align-items: center; gap: 6px; background: var(--color-surface-muted); border: 1.5px solid var(--color-border); border-radius: 20px; padding: 3px 10px; min-width: 180px; max-width: 260px; transition: border-color 0.15s; } .acct-search-wrap:focus-within { border-color: var(--color-primary); } .acct-search-input { flex: 1; border: none; background: transparent; font-size: 0.8rem; color: var(--color-text); outline: none; min-width: 0; } .acct-search-input::placeholder { color: var(--color-text-muted); } .acct-search-clear { display: flex; align-items: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--color-text-muted); flex-shrink: 0; } .acct-search-clear:hover { color: var(--color-text); } /* Pagination row */ .acct-pagination { display: flex; align-items: center; gap: 12px; padding: 10px 16px 6px; border-top: 1px solid var(--color-border); margin-top: 4px; } .acct-pagination-label { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; } /* Activity filter select */ .acct-filter-select { font-size: 0.8rem; padding: 4px 10px; border: 1.5px solid var(--color-border-strong); border-radius: 20px; background: transparent; color: var(--color-text); cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } /* Post group in activity feed */ .acct-post-group { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .acct-post-header { display: flex; align-items: center; gap: 6px; background: var(--mud-palette-background-grey); padding: 8px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: 0.78rem; } .acct-post-caption { flex: 1; min-width: 0; color: var(--color-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-post-date { color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } /* Reply context line */ .acct-reply-context { display: flex; align-items: baseline; gap: 4px; padding: 6px 12px 0; font-size: 0.74rem; color: var(--color-text-muted); } .acct-reply-parent-name { font-weight: 600; color: var(--color-text-secondary); flex-shrink: 0; } .acct-reply-parent-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Notes area */ .acct-notes-row { margin-bottom: 4px; } .acct-notes-field { width: 100%; } /* Comment rows in detail panels */ .acct-comment-row { background: transparent; padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; position: relative; } .acct-comment-row:not(:last-child) { border-bottom: 1px solid var(--mud-palette-lines-default); } .acct-comment-row.is-reply { padding-left: 22px; background: rgba(99,102,241,0.02); } .acct-comment-row.timing-cluster { border-left: 3px solid var(--color-warning-light); padding-left: 10px; } .acct-comment-author { font-size: 0.75rem; font-weight: 600; color: var(--mud-palette-text-secondary); } .acct-comment-body { font-size: 0.82rem; color: var(--mud-palette-text-primary); line-height: 1.4; } .acct-comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--mud-palette-text-secondary); } /* ── AI Analysis ──────────────────────────────────────────────────── */ .ai-analysis-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 14px 18px; margin-bottom: var(--space-4); flex-wrap: wrap; } .ai-analysis-title { font-size: 0.88rem; font-weight: 600; color: var(--mud-palette-text-primary); display: block; } .ai-analysis-sub { font-size: 0.78rem; color: var(--mud-palette-text-secondary); display: block; margin-top: 2px; } .ai-suggestions-panel { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 14px; padding: 16px 20px; margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: 10px; } .ai-suggestions-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: 10px; border-bottom: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; } .ai-suggestion-empty { font-size: 0.82rem; color: var(--mud-palette-text-secondary); margin: 0; } .ai-suggestion-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; transition: opacity 0.2s; } .ai-suggestion-card.dismissed { opacity: 0.4; } .ai-suggestion-card.applied { border-color: color-mix(in srgb, var(--color-success) 25%, transparent); background: color-mix(in srgb, var(--color-success) 3%, transparent); } .ai-suggestion-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--mud-palette-background-grey); border-radius: 8px; flex-shrink: 0; color: var(--mud-palette-secondary); } .ai-suggestion-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ai-suggestion-type { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mud-palette-secondary); } .ai-suggestion-name { font-size: 0.88rem; font-weight: 600; color: var(--mud-palette-text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ai-suggestion-desc { font-size: 0.8rem; color: var(--mud-palette-text-primary); line-height: 1.4; } .ai-suggestion-reasoning { font-size: 0.78rem; color: var(--mud-palette-text-secondary); font-style: italic; line-height: 1.4; } .ai-suggestion-members { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 0.77rem; color: var(--mud-palette-text-secondary); } .ai-member-chip { background: var(--mud-palette-background-grey); border-radius: 5px; padding: 1px 7px; font-size: 0.75rem; font-weight: 500; } /* Archive */ .acct-archived-banner { display: flex; align-items: center; gap: 4px; background: #94a3b212; border: 1px solid #94a3b230; border-radius: 8px; padding: 8px 12px; font-size: 0.8rem; color: #64748b; } /* Mute + Block actions sit on one row */ .acct-action-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; } .acct-action-mute { display: inline-flex; align-items: center; gap: 2px; } .acct-archive-form { background: var(--mud-palette-background-grey); border-radius: 10px; padding: 12px; } .ai-reasoning-block { background: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent); border-radius: 8px; padding: 10px 12px; } .ai-reasoning-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mud-palette-secondary); margin-bottom: 5px; } .ai-reasoning-text { font-size: 0.8rem; color: var(--mud-palette-text-primary); line-height: 1.5; margin: 0; font-style: italic; } .ai-suggestion-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } /* Timing cluster badge */ .timing-cluster-badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 600; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning-light) 9%, transparent); border-radius: 4px; padding: 2px 6px; margin-bottom: 4px; align-self: flex-start; } /* Suspected coordinator block */ .coordinator-block { background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; } .coordinator-header { display: flex; align-items: center; margin-bottom: 5px; } .coordinator-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-error); } .coordinator-identity { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; } .coordinator-name { font-size: 0.88rem; font-weight: 700; color: var(--color-error-dark); } .coordinator-id { font-size: 0.75rem; color: #b91c1c; opacity: 0.8; } .coordinator-reason { font-size: 0.78rem; color: #7f1d1d; line-height: 1.5; margin: 0; font-style: italic; } /* Generate Report button */ .report-btn { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, transparent); border-radius: 5px; padding: 3px 8px; text-decoration: none; transition: background 0.15s; } .report-btn:hover { background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent); text-decoration: none; color: var(--mud-palette-primary); } /* ── Group Report page ─────────────────────────────────────── */ .report-page { max-width: 800px; margin: 0 auto; padding: 40px 32px; font-family: var(--mud-typography-default-family); color: var(--mud-palette-text-primary); } .report-header { border-bottom: 2px solid #e5e7eb; padding-bottom: 24px; margin-bottom: 32px; } .report-org { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mud-palette-text-secondary); margin-bottom: 4px; } .report-title { font-size: 1.7rem; font-weight: 800; color: var(--mud-palette-text-primary); margin: 0 0 4px; } .report-subtitle { font-size: 0.88rem; color: var(--mud-palette-text-secondary); margin: 0; } .report-meta-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; font-size: 0.82rem; color: var(--mud-palette-text-secondary); } .report-meta-item strong { color: var(--mud-palette-text-primary); margin-right: 4px; } .report-section { margin-bottom: 32px; } .report-section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mud-palette-text-secondary); border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; margin-bottom: 14px; } .report-description { font-size: 0.9rem; line-height: 1.65; color: var(--mud-palette-text-primary); margin: 0 0 12px; } .report-ai-box { background: color-mix(in srgb, var(--mud-palette-secondary) 6%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent); border-radius: 8px; padding: 12px 14px; font-size: 0.84rem; line-height: 1.6; font-style: italic; color: var(--mud-palette-text-primary); margin-bottom: 12px; } .report-coordinator-box { background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: 8px; padding: 14px 16px; } .report-coordinator-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-error); margin-bottom: 6px; } .report-coordinator-name { font-size: 1rem; font-weight: 700; color: var(--color-error-dark); margin-bottom: 4px; } .report-coordinator-reason { font-size: 0.83rem; color: #7f1d1d; line-height: 1.55; margin: 0; font-style: italic; } .report-member-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; } .report-member-name { font-size: 0.95rem; font-weight: 700; color: var(--mud-palette-text-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .report-member-meta { font-size: 0.78rem; color: var(--mud-palette-text-secondary); margin-bottom: 6px; } .report-member-signals { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .report-timeline-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 0.83rem; } .report-timeline-row:last-child { border-bottom: none; } .report-timeline-time { width: 130px; flex-shrink: 0; color: var(--mud-palette-text-secondary); font-size: 0.75rem; padding-top: 2px; } .report-timeline-body { flex: 1; min-width: 0; } .report-timeline-author { font-weight: 600; color: var(--mud-palette-text-primary); margin-bottom: 3px; } .report-timeline-text { color: var(--mud-palette-text-primary); line-height: 1.5; margin-bottom: 4px; } .report-timeline-tags { display: flex; gap: 6px; flex-wrap: wrap; } .report-timing-badge { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning-light) 9%, transparent); border-radius: 4px; padding: 1px 5px; } .report-print-btn { position: fixed; bottom: 32px; right: 32px; z-index: 100; } @media print { .report-print-btn, .mud-drawer, nav, .mud-appbar, .mud-layout-drawer { display: none !important; } .report-page { padding: 0; max-width: 100%; } body { background: white !important; } .report-member-card, .report-coordinator-box, .report-ai-box { break-inside: avoid; } } /* ── Dashboard ─────────────────────────────────────────────── */ .dash-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .dash-title { font-size: 1.5rem; font-weight: 800; color: var(--mud-palette-text-primary); margin: 0 0 2px; } .dash-subtitle { font-size: 0.82rem; color: var(--mud-palette-text-secondary); margin: 0; } .dash-queue-btn { display: inline-flex; align-items: center; background: var(--color-primary); color: #fff; font-size: 0.83rem; font-weight: 600; padding: 8px 16px; border-radius: 8px; text-decoration: none; transition: background 0.15s; } .dash-queue-btn:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; } .dash-queue-badge { background: #fff; color: var(--color-primary); font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: 8px; } /* Stat cards row */ .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } @media (max-width: 900px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .dash-stats { grid-template-columns: 1fr; } } .dash-stat-card { background: var(--mud-palette-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); } .dash-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-stat-body { min-width: 0; } .dash-stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--mud-palette-text-primary); } .dash-stat-label { font-size: 0.73rem; color: var(--mud-palette-text-secondary); margin-top: 3px; } /* Main content grid */ .dash-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; } @media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } } /* min-width: 0 — grid items default to min-width:auto, so wide intrinsic content (the ApexCharts svg, topic bars) stops the 1fr column shrinking on mobile and stretches the whole page horizontally. */ .dash-col-main, .dash-col-side { display: flex; flex-direction: column; gap: 0; min-width: 0; } /* Cards */ .dash-card { background: var(--mud-palette-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden; } /* ApexCharts sizes its svg at render time; never let it push past the card. */ .dash-card .apexcharts-canvas, .dash-card .apexcharts-canvas svg { max-width: 100%; } .dash-card-alert { background: var(--color-error-bg); border-color: var(--color-error-border); } /* Scan button */ .dash-scan-btn { display: inline-flex; align-items: center; background: var(--color-surface); color: var(--mud-palette-text-primary); font-size: 0.83rem; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--color-border); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .dash-scan-btn:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-border-strong); } .dash-scan-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* Scan progress log */ .dash-scan-log { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 0.78rem; color: var(--mud-palette-text-secondary); display: flex; flex-direction: column; gap: 3px; } .dash-scan-log-line { display: flex; align-items: center; gap: 4px; } .dash-scan-log-close { align-self: flex-end; margin-top: 6px; font-size: 0.72rem; font-weight: 600; color: var(--mud-palette-text-secondary); background: none; border: none; cursor: pointer; padding: 2px 0; } .dash-scan-log-close:hover { color: var(--mud-palette-text-primary); } .dash-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .dash-card-title { font-size: 0.88rem; font-weight: 700; color: var(--mud-palette-text-primary); } .dash-card-sub { font-size: 0.73rem; color: var(--mud-palette-text-secondary); } .dash-card-link { font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; } .dash-card-link:hover { text-decoration: underline; color: var(--color-primary-dark); } /* Empty state */ .dash-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 0; color: var(--mud-palette-text-secondary); font-size: 0.82rem; } .dash-empty p { margin: 0; } /* Shared component */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; color: var(--mud-palette-text-secondary); } .empty-state-icon { font-size: 2.4rem; color: var(--mud-palette-text-disabled); margin-bottom: 10px; } .empty-state-title { font-size: 0.95rem; font-weight: 600; color: var(--mud-palette-text-primary); } .empty-state-desc { margin-top: 4px; font-size: 0.82rem; max-width: 380px; } .empty-state-actions { margin-top: 16px; } /* Shared component */ .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 0; } .loading-state-msg { font-size: 0.82rem; color: var(--mud-palette-text-secondary); } /* ───────────────────────────────────────────────────────────────────────── Account settings (ASP.NET Identity Manage pages) ───────────────────────────────────────────────────────────────────────── */ /* Clickable username in the app bar */ .appbar-user { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; padding: 4px 8px; border-radius: var(--radius-full); transition: background 0.15s ease; } .appbar-user:hover { background: var(--color-surface-hover); } .appbar-user .appbar-username { color: var(--color-text); } .acct-settings { max-width: 920px; margin: 0 auto; padding: 8px 4px 48px; } .acct-settings-header { margin-bottom: 24px; } .acct-settings-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--color-text); margin: 0; } .acct-settings-sub { margin: 4px 0 0; font-size: 0.875rem; color: var(--color-text-secondary); } .acct-settings-body { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; } @media (max-width: 720px) { .acct-settings-body { grid-template-columns: 1fr; } } /* Sidebar nav */ .acct-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; } .acct-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .acct-nav-link:hover { background: var(--color-surface-hover); color: var(--color-text); } .acct-nav-link.active { background: var(--color-primary-bg); color: var(--color-primary-dark); font-weight: 600; } .acct-nav-link.active .acct-nav-icon { color: var(--color-primary); } .acct-nav-icon { font-size: 1.1rem !important; color: var(--color-text-muted); } .acct-nav-link--muted { color: var(--color-text-muted); } .acct-nav-divider { height: 1px; background: var(--color-border); margin: 8px 4px; } /* Content card */ .acct-settings-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); } .acct-section-title { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 0 0 4px; } .acct-section-sub { margin: 0 0 20px; font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.6; } /* App-styled form controls + buttons inside the settings area (covers the Bootstrap-classed Identity pages we don't restyle individually). */ .acct-settings-content h1, .acct-settings-content h2, .acct-settings-content h3, .acct-settings-content h4 { font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; } .acct-settings-content h1 { font-size: 1.25rem; } .acct-settings-content h2 { font-size: 1.05rem; } .acct-settings-content h3 { font-size: 1.05rem; } .acct-settings-content hr { border-color: var(--color-border); opacity: 1; margin: 16px 0; } .acct-field { margin-bottom: 16px; } .acct-field > label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-text); margin-bottom: 6px; } .acct-input, .acct-settings-content .form-control { width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 10px 12px; font-size: 0.875rem; color: var(--color-text); background: var(--color-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .acct-input:focus, .acct-settings-content .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-subtle); } .acct-input::placeholder { color: var(--color-text-placeholder); } .acct-settings-content .form-floating > label { color: var(--color-text-muted); } .acct-btn-primary, .acct-settings-content .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); padding: 10px 18px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; text-decoration: none; } .acct-btn-primary:hover, .acct-settings-content .btn-primary:hover { background: var(--color-primary-dark); color: #fff; } .acct-settings-content .btn-danger { background: var(--color-error); border: none; border-radius: var(--radius-md); font-weight: 600; } .acct-settings-content .btn-danger:hover { background: var(--color-error-dark); } .acct-field-error, .acct-validation, .acct-settings-content .text-danger { color: var(--color-error); font-size: 0.8125rem; } .acct-field-error { display: block; margin-top: 6px; } .acct-settings-content .alert { border-radius: var(--radius-md); border: 1px solid var(--color-border); font-size: 0.85rem; padding: 12px 14px; } .acct-settings-content .alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: #166534; } .acct-settings-content .alert-danger { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error-dark); } .acct-settings-content .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .acct-settings-content .alert-info { background: var(--color-primary-bg); border-color: #c7d2fe; color: var(--color-primary-dark); } /* Info banner (e.g. why 2FA is enforced) */ .acct-info-banner { display: flex; gap: 12px; align-items: flex-start; background: var(--color-primary-bg); border: 1px solid #c7d2fe; border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 20px; font-size: 0.83rem; color: var(--color-text-secondary); line-height: 1.6; } .acct-info-banner strong { color: var(--color-primary-dark); font-weight: 600; } .acct-info-banner-icon { color: var(--color-primary) !important; font-size: 1.25rem !important; flex-shrink: 0; margin-top: 1px; } /* 2FA setup steps */ .acct-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .acct-steps > li { display: flex; gap: 14px; } .acct-step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary-bg); color: var(--color-primary-dark); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .acct-step-body { flex: 1; min-width: 0; } .acct-step-body strong { font-size: 0.9rem; color: var(--color-text); } .acct-step-body p { margin: 2px 0 10px; font-size: 0.83rem; color: var(--color-text-secondary); line-height: 1.6; } .acct-2fa-qr { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 12px; } .acct-2fa-qr img { display: block; } .acct-2fa-key { display: flex; flex-direction: column; gap: 4px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 12px; max-width: 320px; } .acct-2fa-key-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .acct-2fa-key code { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--color-text); word-break: break-all; } .acct-2fa-form { max-width: 280px; } /* 2FA completed + recovery codes */ .acct-2fa-done { text-align: center; max-width: 460px; margin: 0 auto; } .acct-2fa-done-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: var(--radius-full); background: var(--color-success-bg); color: var(--color-success); display: flex; align-items: center; justify-content: center; } .acct-recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 24px; text-align: left; } .acct-recovery-code { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--color-text); } /* Recent flags feed */ .dash-flag-row { display: flex; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background 0.1s; border-radius: 6px; margin: 0 -8px; } .dash-flag-row:last-child { border-bottom: none; } .dash-flag-row:hover { background: var(--color-surface-hover); } .dash-flag-row.selected { background: var(--color-primary-subtle); } .dash-flag-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); } .dash-flag-full-body { font-size: 0.83rem; color: var(--mud-palette-text-primary); line-height: 1.55; margin-bottom: 8px; white-space: pre-wrap; } .dash-flag-detail-meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--mud-palette-text-secondary); } .dash-flag-reason { font-style: italic; color: var(--mud-palette-text-secondary); } .dash-flag-action-btn { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent); border-radius: 5px; padding: 3px 8px; text-decoration: none; transition: background 0.15s; } .dash-flag-action-btn:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); text-decoration: none; } .dash-flag-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; } .dash-flag-body { flex: 1; min-width: 0; } .dash-flag-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; } .dash-flag-author { font-size: 0.8rem; font-weight: 600; color: var(--mud-palette-text-primary); } .dash-flag-time { font-size: 0.72rem; color: var(--mud-palette-text-secondary); margin-left: auto; } .dash-flag-text { font-size: 0.8rem; color: var(--mud-palette-text-secondary); line-height: 1.45; } /* Category breakdown */ .dash-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .dash-cat-row:last-child { margin-bottom: 0; } .dash-cat-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--mud-palette-text-primary); width: 110px; flex-shrink: 0; } .dash-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dash-cat-bar-wrap { flex: 1; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; } .dash-cat-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; min-width: 2px; } .dash-cat-count { font-size: 0.75rem; font-weight: 600; color: var(--mud-palette-text-secondary); width: 28px; text-align: right; flex-shrink: 0; } /* Threat groups */ .dash-group-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border); text-decoration: none; transition: background 0.1s; cursor: pointer; } .dash-group-row:last-child { border-bottom: none; } .dash-group-row:hover { opacity: 0.8; } .dash-group-avatar { width: 32px; height: 32px; border-radius: 8px; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-group-body { flex: 1; min-width: 0; } .dash-group-name { font-size: 0.82rem; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-group-sub { font-size: 0.72rem; color: var(--mud-palette-text-secondary); } /* Post chart legend */ .dash-post-chart-legend { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; border-top: 1px solid var(--color-border); padding-top: 10px; } .dash-post-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; text-decoration: none; transition: background 0.12s; } .dash-post-row:hover { background: var(--color-hover); text-decoration: none; } .dash-post-row.high-risk { background: #fee2e220; border-left: 3px solid var(--color-error); padding-left: 10px; } .dash-post-row.medium-risk { background: #fef3c720; border-left: 3px solid var(--color-warning); padding-left: 10px; } .dash-post-row-label { font-size: 0.78rem; color: var(--mud-palette-text-primary); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-post-row-stat { font-size: 0.73rem; font-weight: 600; flex-shrink: 0; } .dash-post-row-pct { font-size: 0.72rem; font-weight: 700; flex-shrink: 0; margin-left: auto; } /* ─── Reply sources ────────────────────────────────────────────────── */ .reply-sources { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; background: color-mix(in srgb, var(--color-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent); border-radius: var(--radius-sm); } .reply-sources-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); margin-bottom: 2px; } .reply-source-link { font-size: 0.75rem; color: var(--color-primary-dark); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .reply-source-link:hover { text-decoration: underline; color: var(--color-primary); } /* ─── Web search toggle ─────────────────────────────────────────────── */ .web-search-toggle { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 0.75rem; font-weight: 500; border: 1.5px solid var(--color-border-strong); border-radius: 999px; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; } .web-search-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } .web-search-toggle.is-active { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary); } /* ─── Comment queue skeleton loader ────────────────────────────────── */ .queue-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; } .queue-skeleton-row { height: 64px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-hover) 50%, var(--color-border) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Navigation progress bar ──────────────────────────────────────── */ #nav-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary-light)); box-shadow: 0 0 12px rgba(99,102,241,0.7), 0 1px 4px rgba(99,102,241,0.45); opacity: 0; z-index: 9999; pointer-events: none; border-radius: 0 4px 4px 0; } /* glowing leading cap */ #nav-progress::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 80px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55)); border-radius: 0 4px 4px 0; } /* ─── Page transition ───────────────────────────────────────────────── */ /* Page-level transitions are opacity-ONLY by design. transform/filter on .page-content would make it a containing block for position:fixed elements, trapping modals (case modal, post wizard) inside it — below the app bar. Inner content gets its motion from .contentReveal on sibling containers. */ .page-content.content-navigating { opacity: 0.5; pointer-events: none; transition: opacity 0.18s ease; } .page-content.page-enter { animation: pageEnter 0.4s ease both; } @keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } } /* Content reveal — when a page's loader is replaced by real data, the content container is freshly created, so this animation plays on the swap. */ @keyframes contentReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .queue-split, .post-board-cards, .acct-split, .case-board, .dash-grid, .activity-list { animation: contentReveal 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; } /* Loaders ease in instead of popping */ @keyframes loaderFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes loaderIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } } /* opacity-only on the spinner so we never fight MudBlazor's rotation transform */ .mud-progress-circular { animation: loaderFadeIn 0.3s ease both; } .queue-skeleton, .acct-loading-center { animation: loaderIn 0.35s ease both; } @media (prefers-reduced-motion: reduce) { .page-content.page-enter, .mud-progress-circular, .queue-skeleton, .acct-loading-center { animation: none !important; } .page-content.content-navigating { filter: none; transform: none; } } /* ─── UI micro-animations ───────────────────────────────────────────── */ /* Detail / bulk panel slides in from the right */ @keyframes panelEnter { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } .queue-detail-panel { animation: panelEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1) both; } /* Accordion body + post card fade down when expanded */ @keyframes accordionEnter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .post-accordion-body { animation: accordionEnter 0.18s ease both; } /* Comment row: smooth bg transition covers hover AND is-selected */ .comment-row { transition: background 0.15s ease !important; } /* Filter / platform chip active state pops in */ .filter-chip, .platform-chip { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease !important; } .filter-chip:active, .platform-chip:active { transform: scale(0.96); } /* ─── Hamburger nav toggle ──────────────────────────────────────────── */ .clarify-nav-toggle { background: transparent; border: none; color: var(--mud-palette-appbar-text, #1e293b); cursor: pointer; padding: 8px; border-radius: 50%; display: none; /* desktop: sidebar is always open, so the toggle is hidden */ align-items: center; justify-content: center; margin-right: 4px; flex-shrink: 0; transition: background 0.15s; } .clarify-nav-toggle:hover { background: rgba(0, 0, 0, 0.06); } /* ─── Nav link instant press feedback ──────────────────────────────── */ .mud-nav-link:active { opacity: 0.7 !important; transform: scale(0.98) !important; transition: opacity 0.05s, transform 0.05s !important; } /* ═══════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE (≤ 768px) ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ─── Drawer: CSS-driven overlay (layout is static SSR) ────── */ .mud-drawer.mud-drawer-persistent { position: fixed !important; top: 0 !important; left: 0 !important; width: 260px !important; /* pin width so zeroing the CSS variable can't collapse it */ height: 100vh !important; z-index: 1300 !important; transform: translateX(-100%) !important; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: none !important; } body.mobile-nav-open .mud-drawer.mud-drawer-persistent { transform: translateX(0) !important; box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important; } /* Backdrop — blocks content, tap to close */ .mobile-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1299; cursor: pointer; } body.mobile-nav-open .mobile-nav-backdrop { display: block; } /* Content always full width — drawer no longer pushes it */ /* Zero the CSS variable MudBlazor reads for drawer spacing */ .mud-layout { --mud-drawer-width-left: 0px !important; } /* Belt-and-suspenders: override inline padding regardless of source */ html body .mud-layout .mud-main-content, html body .mud-main-content, .mud-main-content { padding-left: 0 !important; margin-left: 0 !important; } /* Full-height drawer (ClipMode.Never) offsets the appbar on desktop; on mobile the drawer is an overlay, so the header must span full width */ .clarify-appbar, .mud-appbar { left: 0 !important; width: 100% !important; } /* ─── Page chrome ───────────────────────────────────────────── */ /* Hide the username text in the header on small screens — avatar stays */ .appbar-username--hide-mobile { display: none !important; } /* The hamburger toggle is only needed on mobile, where the drawer is an overlay */ .clarify-nav-toggle { display: inline-flex !important; } .page-content { padding: var(--space-4) var(--space-4) var(--space-8); } /* Page header: title + action button stack vertically */ .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .page-header > button, .page-header > a, .dash-scan-btn { width: 100%; justify-content: center; } /* ─── Comment queue filters ─────────────────────────────────── */ /* Mobile filter: row1 = search + toggle, row2 = posts + date */ .queue-filter-top { flex-wrap: wrap; gap: var(--space-2); } .queue-search { max-width: 100% !important; flex: 1 1 0; min-width: 0; order: 1; } .view-toggle { order: 2; flex-shrink: 0; } .queue-post-select { flex: 1 1 0; width: auto !important; min-width: 0; order: 3; } .queue-date-select { flex: 0 0 130px; width: auto !important; order: 4; } /* Category + platform chips scroll horizontally */ .queue-filter-bottom { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; gap: var(--space-3); align-items: flex-start; flex-direction: column; } .queue-filter-chips, .queue-platform-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; width: 100%; } .queue-filter-chips::-webkit-scrollbar, .queue-platform-chips::-webkit-scrollbar { display: none; } /* ─── Queue split panel ─────────────────────────────────────── */ .queue-split { flex-direction: column; min-height: unset; } /* List panel: full height, natural scroll */ .queue-list-panel { max-height: none; overflow-y: visible; } /* Detail / bulk panels: full width, stacked below list */ .queue-detail-panel { width: 100% !important; border-left: none; border-top: 1px solid var(--color-border); max-height: none; } /* When a panel is open hide the list — "full-screen" detail experience */ .queue-split.has-detail .queue-list-panel { display: none; } .queue-split.has-detail .queue-detail-panel { border-top: none; } /* ─── Comment rows ──────────────────────────────────────────── */ .comment-row { padding: var(--space-3) var(--space-3); } /* Larger touch target for avatar */ .comment-row-avatar { width: 34px; height: 34px; font-size: 0.8rem; } /* Footer: hide post label (redundant in grouped view), let rest wrap */ .comment-row-footer { gap: 4px; flex-wrap: wrap; } .comment-row-post-label { display: none; } /* ─── Post accordions ───────────────────────────────────────── */ /* Thumbnail narrower on mobile */ .post-header-thumb { width: 62px; } /* Reactions and separator hidden on small screens */ .post-header-reactions { display: none; } /* Stats wrap onto new line */ .post-header-bottom { flex-wrap: wrap; gap: 4px; } /* Larger touch targets for action buttons */ .post-action-btn { min-width: 36px; height: 36px; } /* ─── Detail panel ──────────────────────────────────────────── */ .detail-actions { flex-wrap: wrap; } .detail-actions .mud-button { flex: 1 1 auto; min-width: 0; } /* ─── Bulk panels ───────────────────────────────────────────── */ .bulk-panel-list { max-height: 50vh; } .bulk-reply-review-list { max-height: 60vh; } /* ─── Touch targets — minimum 44 px tall ────────────────────── */ .filter-chip, .platform-chip, .web-search-toggle { min-height: 36px; padding: 6px 12px; } .bulk-action-btn { min-height: 40px; } .post-action-btn { min-width: 36px; min-height: 36px; } } /* ═══════════════════════════════════════════════════════════════════════ DESKTOP DRAWER TOGGLE (hamburger collapses drawer on wide screens) ═══════════════════════════════════════════════════════════════════════ */ @media (min-width: 769px) { /* Smooth width collapse on the drawer */ .mud-drawer.mud-drawer-persistent { transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow: hidden; } /* Smooth content shift */ .mud-main-content { transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Collapsed state */ body.desktop-nav-closed .mud-drawer.mud-drawer-persistent { width: 0 !important; min-width: 0 !important; overflow: hidden !important; } body.desktop-nav-closed .mud-layout { --mud-drawer-width-left: 0px; } body.desktop-nav-closed .mud-main-content { padding-left: 0 !important; } } /* ── Notification Bell ─────────────────────────────────────── */ .notif-bell-wrapper { position: relative; display: flex; align-items: center; } .notif-bell-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; border-radius: 8px; color: var(--color-text-secondary); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; margin-right: 4px; } .notif-bell-btn:hover { background: #f1f5f9; color: var(--color-text-primary); } .notif-bell-btn.has-unread { color: var(--color-error); } .notif-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-error); color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; } .notif-backdrop { position: fixed; inset: 0; z-index: 1299; } .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 480px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1300; display: flex; flex-direction: column; overflow: hidden; animation: notifDropIn 0.15s ease both; } @keyframes notifDropIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* On phones the 340px absolute dropdown anchored to the bell runs off the left edge of the screen — pin it to the viewport under the app bar instead. */ @media (max-width: 600px) { .notif-dropdown { position: fixed; top: calc(var(--mud-appbar-height, 56px) + 8px); left: 12px; right: 12px; width: auto; max-height: 70vh; } } .notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; } .notif-dropdown-title { font-size: 0.8125rem; font-weight: 600; color: #0f172a; } .notif-mark-all-btn { font-size: 0.75rem; color: #6366f1; background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; font-weight: 500; } .notif-mark-all-btn:hover { background: #f0f0ff; } .notif-list { overflow-y: auto; flex: 1; } .notif-empty { padding: 32px 16px; text-align: center; font-size: 0.8125rem; color: #94a3b8; } .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f8fafc; transition: background 0.1s ease; position: relative; } .notif-item:hover { background: #f8fafc; } .notif-item.is-unread { background: var(--color-error-bg); } .notif-item.is-unread:hover { background: #fee2e2; } .notif-item-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: var(--color-error-bg); display: flex; align-items: center; justify-content: center; margin-top: 1px; } .notif-item-body { flex: 1; min-width: 0; } .notif-item-title { font-size: 0.8rem; font-weight: 600; color: #0f172a; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-item-msg { font-size: 0.75rem; color: #475569; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .notif-item-time { font-size: 0.7rem; color: #94a3b8; margin-top: 4px; } .notif-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-error); flex-shrink: 0; margin-top: 6px; } /* ── Threat Alert Banner ────────────────────────────────────── */ .threat-alert-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 12px; background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: 8px; color: var(--color-error); font-size: 0.8125rem; line-height: 1.5; } .threat-alert-banner strong { font-weight: 700; } /* ── Notification Preferences ───────────────────────────────── */ .notif-pref-grid { display: grid; gap: 2px; margin-bottom: 16px; } .notif-pref-header { display: grid; grid-template-columns: 1fr 80px 80px; align-items: center; padding: 4px 8px; } .notif-pref-col-label { font-size: 0.7rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; } .notif-pref-row { display: grid; grid-template-columns: 1fr 80px 80px; align-items: center; padding: 6px 8px; border-radius: 6px; } .notif-pref-row:hover { background: #f8fafc; } .notif-pref-type { font-size: 0.8125rem; color: #334155; font-weight: 500; } /* Threat filter chip — make it pop with red accent */ .filter-chip[data-key="threat"].active, .queue-filter-chips .filter-chip:nth-child(2).active { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error-border); } /* ── Facebook OAuth connect ──────────────────────────────────── */ /* Scan-in-progress chip (ScanStatusChip.razor) */ .scan-status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); white-space: nowrap; animation: scan-chip-pulse 2s ease-in-out infinite; } @keyframes scan-chip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Phones: spinner-only pill — the full "X/Y comments" text pushed the bell and logout buttons out of the top bar. */ @media (max-width: 768px) { .scan-status-chip-label { display: none; } .scan-status-chip { padding: 4px 6px; } } .fb-connect-btn { display: inline-flex; align-items: center; padding: 8px 16px; background: #1877f2; color: #ffffff; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; white-space: nowrap; } .fb-connect-btn:hover { background: #166fe5; color: #fff; } /* TikTok variant of the connect button — same shape, TikTok's black brand colour */ .tt-connect-btn { display: inline-flex; align-items: center; padding: 8px 16px; background: #010101; color: #ffffff; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; white-space: nowrap; } .tt-connect-btn:hover { background: #2b2b2b; color: #fff; } /* ── Dashboard connect CTA ───────────────────────────────────── */ .dash-connect-cta { display: flex; align-items: center; gap: 16px; background: #eff6ff; border: 1.5px solid #bfdbfe; border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; flex-wrap: wrap; } .dash-connect-cta-icon { width: 48px; height: 48px; background: #dbeafe; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-connect-cta-body { flex: 1; min-width: 0; } .dash-connect-cta-title { font-weight: 600; font-size: 0.9375rem; color: #1e40af; margin-bottom: 2px; } .dash-connect-cta-sub { font-size: 0.8rem; color: #3b82f6; } /* ── Dashboard unreviewed threats widget ─────────────────────── */ .dash-threat-widget { background: #fff; border: 1.5px solid var(--color-error-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); } .dash-threat-widget-header { display: flex; align-items: center; gap: 8px; padding: var(--space-3) var(--space-5); background: var(--color-error-bg); border-bottom: 1px solid var(--color-error-border); } .dash-threat-widget-title { font-weight: 700; font-size: 0.875rem; color: var(--color-error-dark); } .dash-threat-widget-count { background: var(--color-error); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; flex-shrink: 0; } .dash-threat-widget-sub { font-size: 0.775rem; color: #b91c1c; margin-left: auto; } .dash-threat-row { display: flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-error-bg); transition: background 0.12s; } .dash-threat-row:last-child { border-bottom: none; } .dash-threat-row:hover { background: #fffbfb; } .dash-threat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-error); flex-shrink: 0; } .dash-threat-body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .dash-threat-author { font-size: 0.8rem; font-weight: 600; color: #0f172a; flex-shrink: 0; } .dash-threat-text { font-size: 0.8rem; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-threat-time { font-size: 0.72rem; color: #94a3b8; flex-shrink: 0; } .dash-threat-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .dash-threat-review-btn { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; color: var(--color-error); background: #fee2e2; border-radius: var(--radius-md); text-decoration: none; transition: background 0.12s; } .dash-threat-review-btn:hover { background: var(--color-error-border); } .dash-threat-dismiss-btn { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 0.75rem; font-weight: 500; color: #64748b; background: #f1f5f9; border: none; border-radius: var(--radius-md); cursor: pointer; transition: background 0.12s; } .dash-threat-dismiss-btn:hover:not(:disabled) { background: #e2e8f0; } .dash-threat-dismiss-btn:disabled { opacity: 0.5; cursor: not-allowed; } .dash-threat-toggle { display: flex; align-items: center; justify-content: center; width: 100%; padding: 8px var(--space-5); font-size: 0.78rem; font-weight: 600; color: #b91c1c; background: none; border: none; border-top: 1px solid var(--color-error-bg); cursor: pointer; transition: background 0.12s; } .dash-threat-toggle:hover { background: #fffbfb; } /* ── Comment review workflow (/reviews + detail-panel request form) ───────── */ .detail-review-pending { margin-top: 10px; padding: 8px 12px; font-size: 0.78rem; color: #7c3aed; background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.25); border-radius: var(--radius-md); } .detail-review-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); } .detail-review-select, .detail-review-note, .review-card-resolution { width: 100%; padding: 7px 10px; font-size: 0.82rem; font-family: inherit; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); } .review-filter-row { display: flex; gap: 6px; margin-bottom: 14px; } .review-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 12px; } /* Deep-linked card (?comment=/?post=) — a pulse that fades so it points without shouting. */ .review-card.highlight { animation: reviewCardPulse 2.6s ease-out; } @keyframes reviewCardPulse { 0% { box-shadow: 0 0 0 3px rgba(99,102,241,0.55); border-color: var(--color-primary); } 60% { box-shadow: 0 0 0 3px rgba(99,102,241,0.25); } 100% { box-shadow: 0 0 0 3px rgba(99,102,241,0); } } .review-card-head { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--color-text-secondary); } .review-card-time { margin-left: auto; font-size: 0.72rem; color: var(--color-text-muted); } .review-card-note { margin-top: 6px; font-size: 0.82rem; font-style: italic; color: var(--color-text-secondary); } .review-card-comment { margin-top: 10px; padding: 10px 12px; background: var(--color-surface-muted); border-left: 3px solid var(--color-border); border-radius: var(--radius-md); } .review-card-comment-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.8rem; } .review-card-comment-body { margin-top: 6px; font-size: 0.85rem; color: var(--color-text-primary); white-space: pre-line; overflow-wrap: anywhere; } .review-card-media img { max-width: 180px; max-height: 140px; border-radius: 8px; margin-top: 8px; } .review-card-comment-foot { margin-top: 8px; font-size: 0.74rem; color: var(--color-text-muted); } .review-card-comment-foot a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .review-card-draft { margin-top: 10px; padding: 9px 12px; font-size: 0.8rem; white-space: pre-line; overflow-wrap: anywhere; background: rgba(99,102,241,0.06); border: 1px dashed rgba(99,102,241,0.35); border-radius: var(--radius-md); } .review-card-draft-label { display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); margin-bottom: 4px; } .review-card-draft-edit { width: 100%; padding: 7px 10px; font-size: 0.82rem; font-family: inherit; border: 1px solid rgba(99,102,241,0.35); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); resize: vertical; } .review-card-draft-edit:disabled { opacity: 0.7; } .review-card-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; } .review-card-actions .review-card-resolution { flex: 1; } .review-thread { margin-top: 12px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); } .review-thread-msg { padding: 5px 0; border-bottom: 1px dashed var(--color-border); } .review-thread-msg:last-of-type { border-bottom: none; } .review-thread-author { font-size: 0.76rem; font-weight: 700; color: var(--color-text-secondary); } .review-thread-time { font-size: 0.7rem; color: var(--color-text-muted); margin-left: 6px; } .review-thread-body { font-size: 0.82rem; white-space: pre-line; overflow-wrap: anywhere; } .review-thread-input { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .review-thread-input .review-card-resolution { flex: 1; } /* The framed "this is what will go out" preview — the part under review is the hero of the card. */ .review-hero { margin-top: 10px; padding: 12px 14px; background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.35); border-radius: var(--radius-md); } .review-media-strip { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; } .review-media-video { max-width: 280px; max-height: 180px; border-radius: 8px; background: #000; /* letterbox bars instead of transparent gaps */ } .review-media-strip img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); cursor: zoom-in; } .review-media-thumb-ph { width: 84px; height: 84px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface-muted); display: flex; align-items: center; justify-content: center; } .review-first-comment { margin-top: 8px; font-size: 0.8rem; color: var(--color-text-secondary); white-space: pre-line; overflow-wrap: anywhere; } .review-hero-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.76rem; color: var(--color-text-muted); } .review-hero-targets { display: inline-flex; align-items: center; gap: 4px; } .review-hero-foot a { color: var(--color-primary); font-weight: 600; text-decoration: none; } /* Discussion drawer: the back-and-forth on one request, popped out beside the queue. */ .review-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.35); z-index: 1300; } .review-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 94vw); background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: -12px 0 32px rgba(15,23,42,0.18); z-index: 1301; display: flex; flex-direction: column; animation: review-drawer-in 0.18s ease; } @keyframes review-drawer-in { from { transform: translateX(30px); opacity: 0; } } .review-drawer-head { display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); } .review-drawer-title { font-weight: 700; font-size: 0.92rem; margin: 0; } .review-drawer-sub { font-size: 0.74rem; color: var(--color-text-muted); margin: 2px 0 0; } .review-drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; } .review-drawer-foot { padding: 12px 16px; border-top: 1px solid var(--color-border); } .review-done-section { margin-top: 20px; } .review-done-toggle { background: none; border: none; cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--color-text-secondary); padding: 6px 0; } .review-done-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); opacity: 0.75; } .review-done-main { min-width: 0; } .review-done-excerpt { display: block; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .review-done-meta { font-size: 0.72rem; color: var(--color-text-muted); } /* ── Activity chart range chips ───────────────────────────────────────────── */ .dash-trend-ranges { display: flex; gap: 4px; margin-left: auto; } .dash-trend-range { padding: 3px 10px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; } .dash-trend-range:hover { border-color: var(--color-primary); color: var(--color-primary); } .dash-trend-range.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ── Dashboard reauth warning banner ────────────────────────── */ .dash-reauth-banner { display: flex; align-items: center; gap: 10px; background: #fee2e2; border: 1.5px solid var(--color-error-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.8125rem; color: var(--color-error-dark); font-weight: 500; } /* ── Connect pages picker ────────────────────────────────────── */ .connect-page-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1.5px solid var(--color-border); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .connect-page-row:hover { background: var(--color-surface-hover); } .connect-page-row.selected { border-color: #6366f1; background: rgba(99,102,241,0.04); } /* ── Risk by post topic chart ───────────────────────────────── */ .dash-topic-chart { display: flex; flex-direction: column; gap: 7px; padding: 4px 0 10px; } .dash-topic-row { display: flex; align-items: center; gap: 10px; } .dash-topic-label { width: 120px; flex-shrink: 0; font-size: 0.76rem; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-topic-bar-wrap { flex: 1; height: 16px; background: var(--color-surface); border-radius: 4px; overflow: hidden; } .dash-topic-bar { height: 100%; display: flex; border-radius: 4px; overflow: hidden; min-width: 4px; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); } .dash-topic-bar > div { height: 100%; } .dash-topic-seg { height: 100%; position: relative; cursor: default; } .dash-topic-seg::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1e293b; color: #f8fafc; font-size: 0.7rem; font-weight: 500; padding: 3px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 200; } .dash-topic-seg:hover::after { opacity: 1; } .dash-topic-total { width: 26px; flex-shrink: 0; text-align: right; font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted); } .dash-topic-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--color-border); font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500; } .dash-topic-legend span { display: flex; align-items: center; gap: 5px; } .dash-topic-legend-item { position: relative; cursor: default; } .dash-topic-legend-item::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1e293b; color: #f8fafc; font-size: 0.7rem; font-weight: 500; padding: 3px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 200; } .dash-topic-legend-item:hover::after { opacity: 1; } .dash-topic-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ── Tooltip ────────────────────────────────────────────────── */ .clarify-tip { position: fixed; background: #1e293b; color: #f8fafc; font-size: 0.72rem; font-weight: 500; line-height: 1.6; padding: 5px 10px; border-radius: 6px; pointer-events: none; z-index: 9999; white-space: pre-line; opacity: 0; transition: opacity 0.15s ease; max-width: 200px; } .clarify-tip.visible { opacity: 1; } /* ── JS Toast notifications ─────────────────────────────────── */ #clarify-toast-container { position: fixed; top: 16px; right: 16px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .clarify-toast { padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 8px; max-width: 360px; opacity: 0; transform: translateX(20px); transition: opacity 0.2s ease, transform 0.2s ease; } .clarify-toast.visible { opacity: 1; transform: translateX(0); } .clarify-toast-icon { font-size: 0.9rem; flex-shrink: 0; } /* ── Activity Log ───────────────────────────────────────────── */ .activity-list { display: flex; flex-direction: column; gap: 2px; } .activity-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border); transition: background 0.15s; } .activity-row:hover { background: var(--color-surface-hover, #f8fafc); } .activity-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; } .activity-icon-wrap { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity-body { flex: 1; min-width: 0; font-size: 0.85rem; } .activity-user { font-weight: 600; color: var(--color-text); margin-right: 5px; } .activity-desc { color: var(--color-text-muted); } .activity-time { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .activity-empty { text-align: center; padding: 60px 0; color: var(--color-text-muted); font-size: 0.9rem; } .activity-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .activity-search { padding: 7px 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.85rem; background: var(--color-surface); color: var(--color-text); outline: none; min-width: 200px; transition: border-color 0.15s; } .activity-search:focus { border-color: var(--color-primary, #6366f1); } .activity-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; } .activity-chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .activity-chip:hover { background: var(--color-surface-hover, #f8fafc); } .activity-chip.active { background: var(--color-primary-subtle, #eef2ff); color: var(--color-primary, #6366f1); border-color: var(--color-primary-border, #a5b4fc); } .activity-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; } .activity-page-info { font-size: 0.82rem; color: var(--color-text-muted); min-width: 80px; text-align: center; } .activity-link-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--color-text-muted); flex-shrink: 0; transition: background 0.15s, color 0.15s; text-decoration: none; } .activity-link-btn:hover { background: var(--color-surface-hover, #f8fafc); color: var(--color-primary, #6366f1); } /* ── Accounts centred loader ───────────────────────────────────────── */ .acct-loading-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 60vh; color: var(--color-text-secondary); font-size: 0.88rem; } /* ── Dismiss threat flag button ────────────────────────────────────── */ .acct-clear-threat-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 600; padding: 1px 7px; margin-left: 6px; border-radius: 4px; border: 1px solid rgba(220,38,38,0.35); color: #dc2626; background: rgba(220,38,38,0.07); cursor: pointer; vertical-align: middle; transition: background 0.15s; } .acct-clear-threat-btn:hover:not(:disabled) { background: rgba(220,38,38,0.14); } .acct-clear-threat-btn:disabled { opacity: 0.5; cursor: not-allowed; } .acct-raise-threat-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 600; padding: 1px 7px; margin-left: 6px; border-radius: 4px; border: 1px solid rgba(220,38,38,0.25); color: #dc2626; background: transparent; cursor: pointer; vertical-align: middle; transition: background 0.15s; } .acct-raise-threat-btn:hover:not(:disabled) { background: rgba(220,38,38,0.07); } .acct-raise-threat-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Account Detail – Tabs ─────────────────────────────────────────── */ .acct-detail-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--color-border); margin: 14px 0 0; } .acct-detail-tab { display: flex; align-items: center; gap: 4px; padding: 7px 14px; font-size: 0.82rem; font-weight: 500; color: var(--color-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1.5px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .acct-detail-tab:hover { color: var(--color-text); } .acct-detail-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .acct-tab-count { font-size: 0.7rem; font-weight: 700; background: var(--color-primary-subtle); color: var(--color-primary); border-radius: 10px; padding: 0 5px; min-width: 16px; text-align: center; } /* ── Account Notes ─────────────────────────────────────────────────── */ .acct-notes-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; } .acct-notes-generate-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 6px; border: 1.5px solid var(--color-primary); color: var(--color-primary); background: var(--color-primary-subtle); cursor: pointer; transition: background 0.15s; } .acct-notes-generate-btn:hover:not(:disabled) { background: rgba(99,102,241,0.18); } .acct-notes-generate-btn:disabled { opacity: 0.55; cursor: not-allowed; } .acct-note-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--color-surface); } .acct-note-card.ai { border-left: 3px solid var(--color-primary); background: var(--color-primary-subtle); } .acct-note-card.user { border-left: 3px solid var(--color-border-strong); } .acct-note-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .acct-note-source { font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; display: inline-flex; align-items: center; } .acct-note-source.ai { background: rgba(99,102,241,0.15); color: var(--color-primary); } .acct-note-source.user { background: var(--color-surface-muted); color: var(--color-text-secondary); } .acct-note-date { font-size: 0.72rem; color: var(--color-text-muted); margin-left: auto; } .acct-note-meta { font-size: 0.7rem; color: var(--color-text-muted); } .acct-note-body { font-size: 0.82rem; color: var(--color-text); line-height: 1.55; margin: 0; white-space: pre-wrap; } .acct-note-add { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); } /* ── AI settings — voice examples ───────────────────────────── */ .ai-examples-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .ai-example-row { position: relative; background: var(--color-surface-alt, #f8f9fa); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 36px 10px 12px; } .ai-example-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .ai-example-label { font-size: 0.82rem; font-weight: 600; color: var(--color-text); } .ai-example-date { font-size: 0.73rem; color: var(--color-text-muted); } .ai-example-preview { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; white-space: pre-wrap; } .ai-example-delete { position: absolute; top: 8px; right: 8px; background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 2px; border-radius: 4px; display: flex; align-items: center; line-height: 1; } .ai-example-delete:hover { color: #dc2626; background: rgba(220,38,38,0.08); } .ai-example-add { padding-top: 12px; border-top: 1px solid var(--color-border); } /* ── AI settings — source domains ───────────────────────────── */ .source-domains-mode-toggle { display: flex; gap: 6px; margin-bottom: 14px; } .source-domains-mode-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--color-border); background: transparent; color: var(--mud-palette-text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .source-domains-mode-btn:hover { border-color: var(--mud-palette-text-secondary); color: var(--mud-palette-text-primary); } .source-domains-mode-btn.active.allow { background: #dcfce7; border-color: #16a34a; color: #15803d; } .source-domains-mode-btn.active.block { background: #fee2e2; border-color: #dc2626; color: #b91c1c; } .source-domains-mode-hint { font-size: 0.8rem; color: var(--mud-palette-text-secondary); margin: 0 0 12px; } .source-domains-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .source-domain-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 0.78rem; font-weight: 500; border: 1px solid #bbf7d0; } .source-domain-chip--blocked { background: #fee2e2; color: #b91c1c; border-color: #fecaca; } .source-domain-delete { background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; opacity: 0.6; color: inherit; line-height: 1; } .source-domain-delete:hover { opacity: 1; } .source-domain-add-row { display: flex; align-items: flex-start; gap: 8px; } .source-domain-add-row .mud-input-control { flex: 1; } /* ── Team settings — member permissions ─────────────────────── */ .team-member-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 10px var(--space-5); gap: 12px; transition: background 0.1s; } .team-member-row--editing { background: var(--color-bg-subtle, #f8fafc); } .team-member-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .team-member-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .team-member-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .team-role-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; } .team-role-badge--owner { color: var(--color-primary); background: var(--color-primary-bg); } .team-role-badge--you { color: var(--mud-palette-text-secondary); background: var(--color-border); } .team-perm-chips { display: flex; flex-wrap: wrap; gap: 4px; } .team-perm-chip { font-size: 0.68rem; padding: 1px 6px; border-radius: 999px; border: 1px solid; } .team-perm-chip--on { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .team-perm-chip--none { background: #f1f5f9; color: var(--mud-palette-text-secondary); border-color: var(--color-border); } /* Inline permissions editor */ .team-perm-editor { margin: 0 var(--space-5) 12px; padding: 14px 16px; background: var(--color-bg-subtle, #f8fafc); border: 1px solid var(--color-border); border-radius: 8px; } .team-perm-editor-label { font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 0 0 10px; } .team-perm-editor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; } .team-perm-toggle { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 6px; border: 1.5px solid var(--color-border); cursor: pointer; background: var(--mud-palette-background); transition: border-color 0.1s, background 0.1s; } .team-perm-toggle input { display: none; } .team-perm-toggle.on { border-color: #6366f1; background: #f0f0ff; } .team-perm-toggle-name { font-size: 0.8rem; font-weight: 600; color: var(--mud-palette-text-primary); } .team-perm-toggle.on .team-perm-toggle-name { color: #4f46e5; } .team-perm-toggle-desc { font-size: 0.72rem; color: var(--mud-palette-text-secondary); } .team-perm-editor-actions { display: flex; align-items: center; gap: 8px; } /* Transfer ownership dialog */ .team-dialog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1000; display: flex; align-items: center; justify-content: center; } .team-dialog { background: var(--mud-palette-background); border-radius: 12px; padding: 24px; max-width: 400px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .team-dialog-title { font-size: 1rem; font-weight: 700; margin: 0 0 8px; color: var(--mud-palette-text-primary); } .team-dialog-body { font-size: 0.875rem; color: var(--mud-palette-text-secondary); margin: 0 0 20px; line-height: 1.5; } .team-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } /* ── Post Moderation Board ──────────────────────────────────── */ .post-board-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .post-board-start-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: var(--color-primary); color: #fff; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s; flex-shrink: 0; } .post-board-start-btn:hover { background: var(--color-primary-dark); } .post-board-start-btn:disabled { opacity: 0.5; cursor: default; } .post-board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } .post-mod-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s; } .post-mod-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .post-mod-card-body { padding: 0; flex: 1; } .post-mod-card-body .fb-post-card { border-radius: 0; border: none; margin: 0; } .post-mod-card-stats { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 14px; border-top: 1px solid var(--color-border); background: var(--color-surface-muted); } .post-mod-stat-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 20px; font-size: 0.69rem; font-weight: 600; border: 1px solid transparent; } .post-mod-card-checklist { padding: 10px 14px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 5px; } .checklist-item { display: flex; align-items: center; gap: 8px; font-size: 0.79rem; color: var(--color-text-muted); } .checklist-item.needs-action { color: var(--color-text); font-weight: 500; } .checklist-item.ok { color: var(--color-success); } .checklist-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--color-border-strong); } .checklist-item.needs-action .checklist-dot { background: var(--color-warning); } .checklist-item.ok .checklist-dot { background: var(--color-success); } .post-mod-card-footer { padding: 10px 14px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; justify-content: flex-end; } .post-mod-btn-view { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 0.78rem; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; text-decoration: none; transition: background 0.1s; } .post-mod-btn-view:hover { background: var(--color-surface-hover); color: var(--color-text); } .post-mod-btn-wizard { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 0.78rem; font-weight: 600; border: none; border-radius: 6px; background: var(--color-primary); color: #fff; cursor: pointer; transition: background 0.15s; } .post-mod-btn-wizard:hover { background: var(--color-primary-dark); } .post-board-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .post-board-search { flex: 1; min-width: 200px; max-width: 360px; } .post-board-date-select { width: 140px; flex-shrink: 0; } .post-mod-moderated-banner { display: flex; align-items: center; gap: 7px; background: var(--color-success-bg); color: var(--color-success); font-size: 0.75rem; font-weight: 600; padding: 7px 14px; border-bottom: 1px solid var(--color-success-border); } .post-mod-card.is-moderated { opacity: 0.7; } .post-mod-card.is-moderated:hover { opacity: 1; } .post-board-threat-alert { display: flex; align-items: flex-start; gap: 10px; background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: 8px; padding: 12px 16px; font-size: 0.82rem; color: var(--color-error); line-height: 1.5; margin-bottom: 20px; } .post-mod-threat-banner { display: flex; align-items: center; gap: 7px; background: var(--color-error-bg); color: var(--color-error); font-size: 0.75rem; font-weight: 600; padding: 7px 14px; border-bottom: 1px solid var(--color-error-border); } .post-mod-card.has-threat { border-color: var(--color-error-border); box-shadow: 0 0 0 1px var(--color-error-border); } /* ── Post Wizard overlay ────────────────────────────────────── */ .wizard-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; } .wizard-modal { background: var(--color-surface); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.25); width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .wizard-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; gap: 12px; } .wizard-post-counter { display: inline-block; font-size: 0.7rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-subtle); padding: 1px 8px; border-radius: 20px; margin-bottom: 4px; } .wizard-title { font-size: 0.95rem; font-weight: 700; color: var(--color-text); margin: 0 0 2px; } .wizard-post-snippet { font-size: 0.74rem; color: var(--color-text-muted); max-width: 480px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wizard-close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; flex-shrink: 0; transition: color 0.1s; } .wizard-close:hover { color: var(--color-text); } .wizard-stepper { display: flex; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; overflow-x: auto; gap: 0; } .wizard-step { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .wizard-step-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700; flex-shrink: 0; border: 2px solid var(--color-border-strong); color: var(--color-text-muted); background: var(--color-surface); transition: all 0.2s; } .wizard-step.active .wizard-step-dot { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-subtle); } .wizard-step.past .wizard-step-dot { border-color: var(--color-success); background: var(--color-success); color: #fff; } .wizard-step-label { font-size: 0.7rem; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; } .wizard-step.active .wizard-step-label { color: var(--color-primary); font-weight: 600; } .wizard-step.past .wizard-step-label { color: var(--color-success); } .wizard-step-line { flex: 1; min-width: 12px; height: 2px; background: var(--color-border); margin: 0 5px; transition: background 0.2s; } .wizard-step-line.done { background: var(--color-success); } .wizard-body { flex: 1; overflow-y: auto; min-height: 0; } /* Embedded panels fill the wizard body */ .wizard-body .queue-detail-panel { width: 100%; max-width: 100%; border-left: none; max-height: none; border-radius: 0; box-shadow: none; } /* ── Wizard: Disclaimer step ── */ .wizard-disclaimer { padding: 28px 24px 24px; text-align: center; } .wizard-disclaimer-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--color-warning-bg); color: var(--color-warning); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .wizard-disclaimer-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0 0 14px; } .wizard-disclaimer-body { text-align: left; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.6; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; } .wizard-disclaimer-body p { margin: 0 0 8px; } .wizard-disclaimer-body p:last-child { margin-bottom: 0; } .wizard-disclaimer-body ul { margin: 6px 0 8px; padding-left: 18px; } .wizard-disclaimer-body li { margin-bottom: 4px; } /* ── Wizard: Re-open note ── */ .wizard-reopen-note { display: flex; align-items: flex-start; gap: 8px; background: var(--color-info-bg); border: 1px solid var(--color-info-border); border-radius: 8px; padding: 10px 14px; font-size: 0.78rem; color: var(--color-info); line-height: 1.5; margin-bottom: 20px; text-align: left; } /* ── Wizard: Overview step ── */ .wizard-overview { padding: 20px; } .wizard-overview-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .wizard-stat-block { display: flex; flex-direction: column; align-items: center; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--color-border); min-width: 70px; text-align: center; } .wizard-stat-number { font-size: 1.4rem; font-weight: 700; line-height: 1; margin-bottom: 4px; } .wizard-stat-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; } .wizard-overview-actions { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; } .wizard-action-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: 0.82rem; color: var(--color-text-secondary); } .wizard-action-row:last-child { border-bottom: none; } .wizard-action-row.warn .wizard-action-text { color: var(--color-text); font-weight: 500; } .wizard-action-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wizard-action-row.complete .wizard-action-icon { background: var(--color-success-bg); color: var(--color-success); } .wizard-action-row.warn .wizard-action-icon { background: var(--color-warning-bg); color: var(--color-warning); } .wizard-action-row.info .wizard-action-icon { background: var(--color-primary-bg); color: var(--color-primary); } .wizard-action-text { flex: 1; } .wizard-start-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; margin-top: 16px; border: none; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .wizard-start-btn:hover { background: var(--color-primary-dark); } /* ── Wizard: Threats step ── */ .wizard-threats { padding: 0; } .wizard-threats-header { display: flex; align-items: flex-start; gap: 8px; background: var(--color-error-bg); border-bottom: 1px solid var(--color-error-border); color: var(--color-error); font-size: 0.8rem; font-weight: 500; padding: 12px 16px; line-height: 1.5; } .wizard-threats-empty { padding: 40px; text-align: center; color: var(--color-text-muted); font-size: 0.82rem; } .wizard-threat-list { display: flex; flex-direction: column; } .wizard-threat-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); transition: background 0.1s; } .wizard-threat-row:last-child { border-bottom: none; } .wizard-threat-row.is-reviewed { opacity: 0.55; background: var(--color-surface-muted); } .wizard-threat-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-error-bg); color: var(--color-error); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; border: 1px solid var(--color-error-border); } .wizard-threat-body { flex: 1; min-width: 0; } .wizard-threat-author { font-size: 0.8rem; font-weight: 600; color: var(--color-text); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; } .wizard-threat-reviewed-badge { font-size: 0.65rem; font-weight: 600; color: var(--color-success); background: var(--color-success-bg); border: 1px solid var(--color-success-border); padding: 1px 6px; border-radius: 20px; } .wizard-threat-text { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.5; word-break: break-word; } .wizard-threat-reason { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 4px; font-style: italic; } .wizard-threat-review-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--color-error-border); border-radius: 6px; background: var(--color-error-bg); color: var(--color-error); cursor: pointer; flex-shrink: 0; transition: opacity 0.1s; white-space: nowrap; } .wizard-threat-review-btn:hover { opacity: 0.8; } .wizard-threat-review-btn:disabled { opacity: 0.5; cursor: default; } .wizard-threat-all-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 32px); margin: 12px 16px; padding: 9px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--color-error-border); border-radius: 8px; background: var(--color-error-bg); color: var(--color-error); cursor: pointer; transition: opacity 0.15s; } .wizard-threat-all-btn:hover { opacity: 0.8; } .wizard-threat-all-btn:disabled { opacity: 0.5; cursor: default; } /* ── Wizard: Draft step ── */ .wizard-draft { padding: 20px; } .wizard-draft-help { font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 12px; line-height: 1.5; } .wizard-draft-textarea { width: 100%; min-height: 160px; padding: 10px 12px; font-size: 0.85rem; border: 1px solid var(--color-border-strong); border-radius: 8px; resize: vertical; font-family: inherit; line-height: 1.55; color: var(--color-text); background: var(--color-surface); box-sizing: border-box; } .wizard-draft-textarea:focus { outline: none; border-color: var(--color-primary); } .wizard-draft-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .wizard-draft-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; font-size: 0.8rem; font-weight: 500; border-radius: 6px; cursor: pointer; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); transition: background 0.1s; } .wizard-draft-btn:hover { background: var(--color-surface-hover); } .wizard-draft-btn:disabled { opacity: 0.5; cursor: default; } .wizard-draft-btn.primary { background: var(--color-primary); color: #fff; border-color: transparent; } .wizard-draft-btn.primary:hover { background: var(--color-primary-dark); } .wizard-draft-btn.success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); } .wizard-draft-btn.success:hover { opacity: 0.85; } /* ── Wizard: Done step ── */ .wizard-done { padding: 40px 20px; text-align: center; } .wizard-done-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .wizard-done-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; color: var(--color-text); } .wizard-done-subtitle { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 24px; line-height: 1.5; } .wizard-done-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 24px; font-size: 0.88rem; font-weight: 600; border: none; border-radius: 8px; background: var(--color-success); color: #fff; cursor: pointer; transition: opacity 0.15s; } .wizard-done-btn:hover { opacity: 0.9; } .wizard-done-btn:disabled { opacity: 0.5; cursor: default; } /* ── Wizard: footer nav ── */ .wizard-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-top: 1px solid var(--color-border); flex-shrink: 0; } .wizard-btn-back { background: none; border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); padding: 6px 14px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: background 0.1s; } .wizard-btn-back:hover { background: var(--color-surface-hover); } .wizard-btn-skip { background: none; border: none; color: var(--color-text-muted); font-size: 0.8rem; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 2px; } .wizard-btn-skip:hover { color: var(--color-text-secondary); } .wizard-btn-next { background: var(--color-primary); color: #fff; border: none; padding: 7px 16px; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .wizard-btn-next:hover { background: var(--color-primary-dark); } /* ── Cases: Kanban board ────────────────────────────────────── */ .case-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; } /* Four 220px-minimum columns need ~930px — below that, scroll the board sideways instead of stretching the whole page. */ @media (max-width: 960px) { .case-board { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } } .case-column { background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; min-height: 120px; display: flex; flex-direction: column; } .case-column-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-top: 3px solid var(--color-border-strong); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .case-column-title { font-size: 0.78rem; font-weight: 700; color: var(--color-text); } .case-column-count { font-size: 0.68rem; font-weight: 700; background: var(--color-surface-muted); color: var(--color-text-muted); border-radius: 20px; padding: 1px 8px; } .case-column-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 80px; } .case-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px; cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s; } .case-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.08); border-color: var(--color-border-strong); } .case-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .case-card-ref { font-size: 0.66rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.02em; } .case-card-priority { font-size: 0.62rem; font-weight: 700; padding: 1px 7px; border-radius: 20px; text-transform: uppercase; } .case-card-title { font-size: 0.83rem; font-weight: 600; color: var(--color-text); line-height: 1.3; margin-bottom: 5px; } .case-card-meta { font-size: 0.72rem; color: var(--color-text-secondary); margin-bottom: 7px; } .case-card-footer { display: flex; align-items: center; gap: 10px; font-size: 0.7rem; color: var(--color-text-secondary); } /* MudBlazor drop-zone drag states */ .mud-drop-item-preview { opacity: 0.4; } .case-column-body.mud-drop-zone-drag-block-target { background: var(--color-primary-subtle); } /* ── Cases: detail modal ────────────────────────────────────── */ .case-modal { background: var(--color-surface); border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,0.25); width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } /* Keep the case modal clear of the app bar (top-aligned with breathing room) */ .case-overlay { align-items: flex-start; padding-top: 78px; } .case-overlay .case-modal { max-height: calc(100vh - 98px); } @media (max-width: 768px) { .case-overlay { padding-top: 64px; } .case-overlay .case-modal { max-height: calc(100vh - 80px); } } .case-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--color-border); } .case-modal-ref { font-size: 0.7rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0.03em; } .case-modal-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 2px 0; } .case-modal-sub { font-size: 0.78rem; color: var(--color-text-secondary); } .case-modal-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); flex-wrap: wrap; } .case-modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 0; } .case-report-meta { font-size: 0.74rem; color: var(--color-text-muted); margin-bottom: 12px; } .case-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 14px 0 5px; } .case-section-text { font-size: 0.86rem; line-height: 1.55; color: var(--color-text); margin: 0; } .case-no-report { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 28px 20px; background: var(--color-surface-muted); border: 1px dashed var(--color-border-strong); border-radius: 10px; } .case-no-report p { font-size: 0.82rem; color: var(--color-text-secondary); margin: 0; max-width: 420px; line-height: 1.5; } .case-evidence-list { display: flex; flex-direction: column; gap: 6px; } .case-evidence-row { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: var(--color-surface-muted); } .case-evidence-body { flex: 1; min-width: 0; } .case-evidence-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .case-evidence-type { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); } .case-evidence-date { font-size: 0.68rem; color: var(--color-text-muted); } .case-evidence-text { font-size: 0.82rem; color: var(--color-text); line-height: 1.4; word-break: break-word; } .case-evidence-note { font-size: 0.72rem; font-style: italic; color: var(--color-text-muted); margin-top: 2px; } .case-evidence-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 2px; border-radius: 4px; flex-shrink: 0; display: flex; } .case-evidence-remove:hover { color: var(--color-error); background: var(--color-error-bg); } .case-add-evidence { margin-top: 14px; } .case-modal-footer { padding: 10px 20px; border-top: 1px solid var(--color-border); display: flex; } .case-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; font-size: 0.78rem; font-weight: 500; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); cursor: pointer; text-decoration: none; transition: background 0.1s; } .case-btn:hover { background: var(--color-surface-hover); } .case-btn:disabled { opacity: 0.5; cursor: default; } .case-btn.primary { background: var(--color-primary); color: #fff; border-color: transparent; } .case-btn.primary:hover { background: var(--color-primary-dark); } .case-btn.danger { color: var(--color-error); border-color: var(--color-error-border); } .case-btn.danger:hover { background: var(--color-error-bg); } .case-evidence-link { display: inline-flex; align-items: center; margin-top: 4px; font-size: 0.72rem; color: var(--color-primary); text-decoration: none; font-weight: 500; } .case-evidence-link:hover { text-decoration: underline; } /* ── Command palette trigger (header) ───────────────────────── */ .cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--color-drawer-border); border-radius: 10px; background: rgba(255,255,255,0.6); color: var(--color-text-muted); cursor: pointer; font-size: 0.8rem; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; min-width: 340px; } .cmdk-trigger:hover { background: #fff; border-color: var(--color-drawer-active-border); box-shadow: 0 6px 18px -8px rgba(99,102,241,0.55); color: var(--color-text-secondary); } /* Snazzy: centre the command bar over the content area */ .clarify-appbar .mud-toolbar { position: relative; } .clarify-appbar .cmdk-trigger { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .clarify-appbar .cmdk-trigger:hover { transform: translate(-50%, -50%) translateY(-1px); } .cmdk-trigger-label { font-weight: 500; } .cmdk-trigger-kbd { margin-left: auto; display: inline-flex; gap: 3px; } .cmdk-trigger-kbd kbd, .cmdk-footer kbd, .cmdk-esc { font-family: var(--font-sans); font-size: 0.65rem; font-weight: 600; line-height: 1; color: var(--color-text-muted); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 5px; padding: 3px 5px; min-width: 18px; text-align: center; } /* ── Command palette modal ──────────────────────────────────── */ .cmdk-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(15,23,42,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: cmdkFade 0.15s ease both; } .cmdk-panel { width: 100%; max-width: 560px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 32px 80px -16px rgba(15,23,42,0.45), 0 0 0 1px rgba(99,102,241,0.06); overflow: hidden; animation: cmdkPop 0.2s cubic-bezier(0.2,0.8,0.2,1) both; } @keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } } @keyframes cmdkPop { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: none; } } .cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--color-border); } .cmdk-input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 1rem; color: var(--color-text); } .cmdk-input::placeholder { color: var(--color-text-placeholder); } .cmdk-results { max-height: 56vh; overflow-y: auto; padding: 8px; } .cmdk-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: transparent; color: var(--color-text); cursor: pointer; text-align: left; transition: background 0.1s; } .cmdk-item.active { background: var(--color-drawer-active-bg); } .cmdk-item-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--color-surface-muted); color: var(--color-text-secondary); flex-shrink: 0; transition: background 0.1s, color 0.1s; } .cmdk-item.active .cmdk-item-icon { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; box-shadow: 0 4px 12px -4px rgba(99,102,241,0.6); } .cmdk-item-label { font-size: 0.88rem; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk-item-hint { font-size: 0.74rem; color: var(--color-text-muted); flex-shrink: 0; } .cmdk-group { padding: 10px 12px 4px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .cmdk-group:first-child { padding-top: 2px; } .cmdk-item-enter { margin-left: auto; color: var(--color-primary); opacity: 0; transition: opacity 0.1s; } .cmdk-item.active .cmdk-item-enter { opacity: 1; } .cmdk-empty { padding: 28px 16px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } .cmdk-footer { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--color-border); background: var(--color-surface-muted); font-size: 0.7rem; color: var(--color-text-muted); } .cmdk-footer span { display: inline-flex; align-items: center; gap: 4px; } .cmdk-esc { margin-left: 2px; } @media (max-width: 768px) { .cmdk-trigger, .clarify-appbar .cmdk-trigger { min-width: 0; padding: 0 10px; position: static; transform: none; } .clarify-appbar .cmdk-trigger:hover { transform: none; } .cmdk-trigger-label, .cmdk-trigger-kbd { display: none; } .cmdk-overlay { padding-top: 8vh; } } /* ── Existing-case chips (account / group panels) ───────────── */ .acct-case-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .acct-case-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); text-decoration: none; color: var(--color-text); transition: background 0.12s, box-shadow 0.12s, transform 0.12s; } .acct-case-chip:hover { background: var(--color-surface-hover); box-shadow: 0 3px 10px -5px rgba(15,23,42,0.3); transform: translateY(-1px); } .acct-case-ref { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; } .acct-case-status { font-size: 0.62rem; font-weight: 600; padding: 1px 6px; border-radius: 20px; white-space: nowrap; } /* ── Dashboard cockpit ──────────────────────────────────────── */ .dash-newflag-pill { display: inline-flex; align-items: center; margin-left: 10px; padding: 2px 9px; border-radius: 20px; background: var(--color-primary-subtle); color: var(--color-primary-dark); font-size: 0.72rem; font-weight: 600; } /* Today action center */ .dash-today { background: linear-gradient(135deg, #ffffff, #f7f8ff); border: 1px solid var(--color-drawer-active-border); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; box-shadow: 0 8px 30px -16px rgba(99,102,241,0.4); } .dash-today.is-clear { background: linear-gradient(135deg, #ffffff, #f3fcf6); border-color: var(--color-success-border); box-shadow: 0 8px 30px -16px rgba(22,163,74,0.35); } .dash-today-head { display: flex; align-items: center; gap: 13px; } .dash-today-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(99,102,241,0.7); } .dash-today.is-clear .dash-today-icon { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 6px 16px -6px rgba(22,163,74,0.6); } .dash-today-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; } .dash-today-sub { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 1px; } .dash-today-cta { display: inline-flex; align-items: center; gap: 5px; padding: 9px 16px; background: var(--color-primary); color: #fff; border-radius: 9px; font-size: 0.83rem; font-weight: 600; text-decoration: none; flex-shrink: 0; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 6px 16px -8px rgba(99,102,241,0.8); } .dash-today-cta:hover { background: var(--color-primary-dark); transform: translateY(-1px); } .dash-today-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; } .dash-todo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); text-decoration: none; color: var(--color-text); transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; } .dash-todo:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(15,23,42,0.35); } .dash-todo .mud-icon-root { opacity: 0.55; } .dash-todo-num { font-size: 1.45rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin-top: 4px; } .dash-todo-label { font-size: 0.72rem; color: var(--color-text-secondary); font-weight: 500; } .dash-todo.alert { border-color: var(--color-error-border); } .dash-todo.alert .dash-todo-num, .dash-todo.alert .mud-icon-root { color: var(--color-error); opacity: 1; } .dash-todo.warn .dash-todo-num, .dash-todo.warn .mud-icon-root { color: var(--color-warning); } .dash-todo.info .dash-todo-num, .dash-todo.info .mud-icon-root { color: var(--color-info); } .dash-todo.case .dash-todo-num, .dash-todo.case .mud-icon-root { color: var(--color-secondary); } .dash-todo.done { opacity: 0.65; } .dash-todo.done .dash-todo-num { color: var(--color-success); } /* Stat card deltas */ .dash-stat-delta { margin-top: 6px; font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; } .dash-stat-delta.neutral { color: var(--color-text-muted); } .dash-stat-delta.good { color: var(--color-success); } .dash-stat-delta.bad { color: var(--color-error); } /* Community health ring */ .dash-health { display: flex; align-items: center; gap: 18px; padding: 8px 4px; } .dash-health-ring { width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--ring) calc(var(--pct) * 1%), #e9edf3 0); display: flex; align-items: center; justify-content: center; transition: background 0.4s ease; } .dash-health-ring-inner { width: 78px; height: 78px; border-radius: 50%; background: var(--color-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--color-border); } .dash-health-pct { font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; } .dash-health-state { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: 3px; } .dash-health-legend { font-size: 0.78rem; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 5px; } .dash-health-legend > div { display: flex; align-items: center; gap: 6px; } .dash-health-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; } .dash-health-note { font-size: 0.68rem !important; color: var(--color-text-muted) !important; margin-top: 2px; } /* Cases widget */ .dash-cases-summary { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--color-text-secondary); padding: 4px 0 10px; } .dash-cases-summary strong { color: var(--color-text); font-size: 0.95rem; } .dash-cases-await { color: var(--color-secondary); font-weight: 600; } .dash-case-row { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-top: 1px solid var(--color-border); text-decoration: none; transition: background 0.1s; } .dash-case-row:hover { background: var(--color-surface-hover); border-radius: 8px; } .dash-case-pri { font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 20px; text-transform: uppercase; flex-shrink: 0; } .dash-case-body { flex: 1; min-width: 0; } .dash-case-title { font-size: 0.82rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-case-sub { font-size: 0.7rem; color: var(--color-text-muted); } .dash-case-status { font-size: 0.62rem; font-weight: 600; padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; } @media (max-width: 768px) { .dash-today-items { grid-template-columns: repeat(2, 1fr); } .dash-today-head { flex-wrap: wrap; } .dash-today-cta { width: 100%; justify-content: center; } } /* ── Dashboard AI daily brief ───────────────────────────────── */ .dash-brief { position: relative; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(99,102,241,0.07), rgba(139,92,246,0.05)), var(--color-surface); border: 1px solid var(--color-drawer-active-border); box-shadow: 0 8px 30px -18px rgba(99,102,241,0.5); overflow: hidden; } .dash-brief::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #6366f1, #8b5cf6); } .dash-brief-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; } .dash-brief-badge { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(99,102,241,0.7); } .dash-brief-title { font-size: 0.92rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; } .dash-brief-meta { font-size: 0.72rem; color: var(--color-text-muted); } .dash-brief-refresh { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s, color 0.12s, transform 0.3s; } .dash-brief-refresh:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-primary); } .dash-brief-refresh:active { transform: rotate(180deg); } .dash-brief-refresh:disabled { opacity: 0.6; cursor: default; } .dash-brief-headline { font-size: 0.92rem; font-weight: 600; color: var(--color-text); line-height: 1.5; margin: 0 0 8px; } .dash-brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .dash-brief-list li { display: flex; align-items: flex-start; gap: 6px; font-size: 0.84rem; color: var(--color-text-secondary); line-height: 1.45; } .dash-brief-list li .mud-icon-root { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; } .dash-brief-empty { font-size: 0.82rem; color: var(--color-text-muted); } .dash-brief-loading { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; } .dash-brief-shimmer { height: 12px; width: 100%; border-radius: 6px; background: linear-gradient(90deg, #eef0f6 25%, #f7f8fc 50%, #eef0f6 75%); background-size: 200% 100%; animation: briefShimmer 1.3s ease-in-out infinite; } @keyframes briefShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Wizard threat step — raise-case + case chips */ .wizard-threat-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; } .wizard-threat-case-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--color-drawer-active-border); border-radius: 6px; background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(139,92,246,0.07)); color: var(--color-primary-dark); cursor: pointer; white-space: nowrap; transition: background 0.12s, transform 0.12s; } .wizard-threat-case-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.12)); } .wizard-threat-case-btn:disabled { opacity: 0.6; cursor: default; } .wizard-threat-cases { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } /* ── Threat Log ─────────────────────────────────────────────── */ .threatlog-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .threatlog-search { flex: 1; min-width: 200px; max-width: 320px; } .threatlog-date { width: 160px; flex-shrink: 0; } .threatlog-chips { display: flex; gap: 6px; } .threatlog-list { display: flex; flex-direction: column; gap: 10px; } .threatlog-row { display: flex; gap: 12px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-error); border-radius: 10px; padding: 13px 15px; transition: box-shadow 0.12s; } .threatlog-row:hover { box-shadow: 0 4px 18px -10px rgba(15,23,42,0.3); } .threatlog-row.is-reviewed { border-left-color: var(--color-success); } .threatlog-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-error-bg); color: var(--color-error); font-weight: 700; font-size: 0.8rem; border: 1px solid var(--color-error-border); } .threatlog-row.is-reviewed .threatlog-avatar { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); } .threatlog-body { flex: 1; min-width: 0; } .threatlog-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .threatlog-author { font-size: 0.86rem; font-weight: 700; color: var(--color-text); } .threatlog-badges { display: inline-flex; gap: 4px; } .threatlog-badge { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700; padding: 1px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.03em; } .threatlog-badge.unrev { background: var(--color-error-bg); color: var(--color-error); } .threatlog-badge.rev { background: var(--color-success-bg); color: var(--color-success); } .threatlog-badge.mod { background: var(--color-surface-muted); color: var(--color-text-secondary); } .threatlog-badge.hid { background: var(--color-purple-bg); color: var(--color-purple); } .threatlog-time { font-size: 0.72rem; color: var(--color-text-muted); margin-left: auto; } .threatlog-text { font-size: 0.86rem; color: var(--color-text); line-height: 1.45; word-break: break-word; } .threatlog-meta { font-size: 0.74rem; color: var(--color-text-secondary); margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .threatlog-conf { color: var(--color-text-muted); } .threatlog-reason { font-size: 0.74rem; font-style: italic; color: var(--color-text-muted); margin-top: 4px; } .threatlog-cases { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .threatlog-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; } .threatlog-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 11px; font-size: 0.74rem; font-weight: 500; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.1s, color 0.1s; } .threatlog-btn:hover { background: var(--color-surface-hover); color: var(--color-text); } .threatlog-btn:disabled { opacity: 0.6; cursor: default; } .threatlog-btn.primary { background: var(--color-primary); color: #fff; border-color: transparent; } .threatlog-btn.primary:hover { background: var(--color-primary-dark); color: #fff; } .threatlog-btn.rev { color: var(--color-success); border-color: var(--color-success-border); } .threatlog-truncated { text-align: center; font-size: 0.78rem; color: var(--color-text-muted); padding: 18px; } /* ── Auto-hide: settings warning + review queue ─────────────── */ .autohide-warning { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 8px; background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error-border); font-size: 0.8rem; line-height: 1.45; } .autohide-warning a { color: inherit; font-weight: 600; text-decoration: underline; } .autohide-intro { display: flex; gap: 9px; align-items: flex-start; padding: 10px 13px; margin-bottom: 14px; border-radius: 8px; background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: 0.8rem; line-height: 1.45; } .autohide-intro a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .autohide-intro a:hover { text-decoration: underline; } .autohide-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; margin-bottom: 10px; border-radius: 8px; background: var(--color-surface-muted); border: 1px solid var(--color-border); } .autohide-selectall { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 0.8rem; font-weight: 500; color: var(--color-text-secondary); } .autohide-list { display: flex; flex-direction: column; gap: 10px; } .autohide-card { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong); /* fallback; overridden per-card by category colour */ border-radius: 10px; padding: 13px 15px; transition: box-shadow 0.12s; } .autohide-card:hover { box-shadow: 0 4px 18px -10px rgba(15,23,42,0.28); } .autohide-card.is-confirmed { opacity: 0.85; } .autohide-card.is-selected { box-shadow: 0 0 0 1.5px var(--color-primary) inset; } .autohide-card-check { flex: 0 0 auto; margin: -2px 0 0 -4px; } .autohide-card-body { min-width: 0; flex: 1 1 auto; } .autohide-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 6px; } .autohide-author { font-weight: 600; font-size: 0.84rem; color: var(--color-text); margin-bottom: 2px; } .autohide-card-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; } @media (max-width: 768px) { .autohide-card { flex-direction: column; } .autohide-card-actions { flex-direction: row; flex-wrap: wrap; width: 100%; } } @media (max-width: 768px) { .threatlog-row { flex-wrap: wrap; } .threatlog-actions { flex-direction: row; flex-wrap: wrap; width: 100%; margin-top: 8px; } .threatlog-date { margin-left: 0 !important; } } /* ── Threat Log: grouped by account ─────────────────────────── */ .threatacct-list { display: flex; flex-direction: column; gap: 10px; } .threatacct-card { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong); border-radius: 10px; overflow: hidden; transition: box-shadow 0.12s; } .threatacct-card:hover { box-shadow: 0 4px 18px -10px rgba(15,23,42,0.28); } .threatacct-card.has-unrev { border-left-color: var(--color-error); } .threatacct-card.repeat:not(.has-unrev) { border-left-color: var(--color-warning); } .threatacct-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 15px; cursor: pointer; background: none; border: none; text-align: left; transition: background 0.1s; } .threatacct-head:hover { background: var(--color-surface-hover); } .threatacct-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-surface-muted); color: var(--color-text-secondary); font-weight: 700; font-size: 0.85rem; border: 1px solid var(--color-border); } .threatacct-card.has-unrev .threatacct-avatar { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error-border); } .threatacct-id { flex: 1; min-width: 0; } .threatacct-name { font-size: 0.92rem; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .threatacct-repeat-badge { display: inline-flex; align-items: center; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 20px; background: var(--color-warning-bg); color: var(--color-warning-dark); border: 1px solid var(--color-warning-border); } .threatacct-sub { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .threatacct-count { font-weight: 700; color: var(--color-text); } .threatacct-unrev { color: var(--color-error); font-weight: 600; } .threatacct-dot { opacity: 0.4; } .threatacct-cases { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .threatacct-head-actions { display: flex; gap: 6px; flex-shrink: 0; } .threatacct-chevron { color: var(--color-text-muted); flex-shrink: 0; } .threatacct-threats { border-top: 1px solid var(--color-border); background: var(--color-surface-muted); display: flex; flex-direction: column; } .threatacct-threat { display: flex; gap: 12px; align-items: flex-start; padding: 12px 15px 12px 18px; border-bottom: 1px solid var(--color-border); } .threatacct-threat:last-child { border-bottom: none; } .threatacct-threat.is-reviewed { opacity: 0.72; } .threatacct-threat-body { flex: 1; min-width: 0; } .threatacct-threat-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .threatacct-threat-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: stretch; } @media (max-width: 768px) { .threatacct-head { flex-wrap: wrap; } .threatacct-head-actions { width: 100%; margin-top: 6px; } .threatacct-threat { flex-wrap: wrap; } .threatacct-threat-actions { flex-direction: row; width: 100%; margin-top: 6px; } .threatlog-date { margin-left: 0 !important; } } /* Nav link badge (e.g. unreviewed threat count) */ .nav-link-label { display: flex; align-items: center; flex: 1; min-width: 0; } .nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-error); color: #fff; font-size: 0.64rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px -2px rgba(220,38,38,0.6); } /* Dashboard simple/full view toggle */ .dash-view-toggle { display: inline-flex; align-items: center; padding: 7px 13px; font-size: 0.82rem; font-weight: 600; border: 1px solid var(--color-border-strong); border-radius: 8px; background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .dash-view-toggle:hover { background: var(--color-surface-hover); color: var(--color-text); } .dash-view-toggle.simple { background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.08)); border-color: var(--color-drawer-active-border); color: var(--color-primary-dark); } /* Case archived states */ .case-card.is-archived { opacity: 0.62; background: var(--color-surface-muted); } .case-card.is-archived:hover { opacity: 0.85; } .case-card-archived { display: inline-flex; align-items: center; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 20px; background: var(--color-surface-muted); color: var(--color-text-muted); border: 1px solid var(--color-border); } .case-archived-tag { display: inline-flex; align-items: center; font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted); } /* Auth submit button loading state */ .auth-btn-primary.is-loading { opacity: 0.85; cursor: default; } .auth-btn-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; vertical-align: -2px; animation: auth-spin 0.7s linear infinite; } /* ════════════════════════════════════════════════════════════════════════════ Composer + Schedule calendar ════════════════════════════════════════════════════════════════════════════ */ /* ── New-post button ─────────────────────────────────────────────────────── */ .composer-new-btn { display: inline-flex; align-items: center; padding: 8px 16px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: filter 0.15s, transform 0.05s; } .composer-new-btn:hover { filter: brightness(1.08); } .composer-new-btn:active { transform: translateY(1px); } /* ── Calendar toolbar ────────────────────────────────────────────────────── */ .cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .cal-nav { display: flex; align-items: center; gap: 4px; } .cal-month-label { font-size: 1.05rem; font-weight: 700; color: var(--color-text); min-width: 168px; text-align: center; } .cal-today-btn { margin-left: 8px; padding: 5px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 0.76rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: background 0.15s; } .cal-today-btn:hover { background: var(--color-surface-hover); } .cal-tz { font-size: 0.74rem; color: var(--color-text-muted); } .cal-tz-picker { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 0.74rem; } .cal-tz-picker select { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 5px 8px; font-size: 0.74rem; font-family: inherit; color: var(--color-text); background: var(--color-surface); max-width: 220px; cursor: pointer; } .cal-tz-picker select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); } /* ── Month grid ──────────────────────────────────────────────────────────── */ .cal-grid-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--color-surface-muted); } .cal-weekday { padding: 8px 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); text-align: left; border-bottom: 1px solid var(--color-border); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-cell { min-height: 104px; padding: 6px 6px 8px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: background 0.12s; /* Grid items default to min-width:auto, so a wide chip would widen its whole column and knock the day numbers out of line with the header row — pin them to the 1fr track. */ min-width: 0; overflow: hidden; } .cal-cell:nth-child(7n) { border-right: none; } .cal-cell:hover { background: var(--color-surface-hover); } .cal-cell.out { background: var(--color-surface-muted); } .cal-cell.out .cal-cell-date { color: var(--color-text-muted); opacity: 0.6; } .cal-cell-date { font-size: 0.76rem; font-weight: 600; color: var(--color-text); padding: 1px 3px; } .cal-cell.today .cal-cell-date { background: var(--color-primary); color: #fff; border-radius: var(--radius-full); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .cal-cell-posts { flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 24px; min-width: 0; } /* Post chips on a day */ .cal-post { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: var(--radius-sm); background: #eef2ff; border-left: 3px solid var(--color-primary); font-size: 0.7rem; cursor: pointer; overflow: hidden; transition: transform 0.05s, box-shadow 0.12s; min-width: 0; max-width: 100%; } .cal-post:hover { box-shadow: 0 2px 6px rgba(15,23,42,0.12); transform: translateY(-1px); } .cal-post-thumb { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; flex-shrink: 0; } .cal-post-time { font-weight: 700; color: var(--color-primary); white-space: nowrap; flex-shrink: 0; } .cal-post-icons { display: inline-flex; align-items: center; gap: 1px; flex-shrink: 0; } /* flex:1 + min-width:0 is what lets the ellipsis actually engage instead of overflowing. */ .cal-post-text { flex: 1 1 0; min-width: 0; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-post.published { background: #ecfdf5; border-left-color: var(--color-success); } .cal-post.published .cal-post-time { color: var(--color-success); } .cal-post.partial { background: #fffbeb; border-left-color: #d97706; } .cal-post.partial .cal-post-time { color: #b45309; } .cal-post.failed { background: #fef2f2; border-left-color: #dc2626; } .cal-post.failed .cal-post-time { color: #b91c1c; } .cal-post.publishing { background: #f1f5f9; border-left-color: var(--color-text-muted); } /* Awaiting approval — orange: distinct from the indigo primary that scheduled chips already use, and from published green. */ .cal-post.pending-approval { background: #fff7ed; border-left-color: #ea580c; } .cal-post.pending-approval .cal-post-time { color: #c2410c; } /* Mud drop visuals while dragging */ .mud-drop-item-preview .cal-post { box-shadow: 0 6px 18px rgba(15,23,42,0.18); } .cal-cell-posts.mud-drop-zone-drag-block-target, .cal-cell.mud-drop-zone-drag-block-target { background: #eef2ff !important; } /* ── Drafts strip ────────────────────────────────────────────────────────── */ .cal-drafts { margin-top: 16px; } .cal-drafts-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 8px; } .cal-drafts-list { display: flex; flex-wrap: wrap; gap: 8px; } .cal-draft-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 7px 12px; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-full); font-size: 0.78rem; color: var(--color-text); cursor: pointer; transition: background 0.15s; } .cal-draft-chip:hover { background: var(--color-surface-hover); } .cal-draft-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-draft-delete { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; flex-shrink: 0; border: none; background: transparent; border-radius: var(--radius-full); color: var(--color-text-muted); cursor: pointer; transition: background 0.12s, color 0.12s; } .cal-draft-delete:hover { background: var(--color-error-bg, #fef2f2); color: #b91c1c; } /* ════════════════════════════════════════════════════════════════════════════ Composer slide-over ════════════════════════════════════════════════════════════════════════════ */ .composer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 1400; animation: composer-fade 0.15s ease; } @keyframes composer-fade { from { opacity: 0; } to { opacity: 1; } } .composer-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--color-surface); z-index: 1401; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(15,23,42,0.18); animation: composer-slide 0.22s cubic-bezier(0.16,1,0.3,1); } @keyframes composer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } } .composer-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border); } .composer-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 0; } .composer-sub { font-size: 0.78rem; color: var(--color-text-muted); margin: 2px 0 0; } .composer-body { flex: 1; overflow-y: auto; padding: 18px 20px; } .composer-textarea { width: 100%; resize: vertical; min-height: 120px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; font-size: 0.9rem; font-family: inherit; color: var(--color-text); line-height: 1.5; transition: border-color 0.15s, box-shadow 0.15s; } .composer-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); } .composer-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .composer-rewrite-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .composer-rewrite-web { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: #fff; font-size: 0.74rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; user-select: none; transition: color 0.15s, border-color 0.15s, background 0.15s; } .composer-rewrite-web:hover { border-color: var(--color-border-strong); } .composer-rewrite-web.on { color: var(--color-primary); border-color: var(--color-primary); background: #f5f3ff; } .composer-rewrite-web input { width: 13px; height: 13px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } .composer-rewrite-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: linear-gradient(90deg, #eef2ff, #faf5ff); font-size: 0.74rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: filter 0.15s, opacity 0.15s; } .composer-rewrite-btn:hover:not(:disabled) { filter: brightness(0.97); } .composer-rewrite-btn:disabled { opacity: 0.5; cursor: not-allowed; } .composer-count { font-size: 0.74rem; color: var(--color-text-muted); white-space: nowrap; } .composer-count.over { color: #b91c1c; font-weight: 600; } .composer-count-warn { color: #b91c1c; font-weight: 600; } .composer-media-soon { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 0.78rem; cursor: help; } /* Media attach + thumbnails */ .composer-media-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .composer-media-item { position: relative; width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface-muted); } .composer-media-item img { width: 100%; height: 100%; object-fit: cover; } /* Video tiles get a 16:9 playable player — 72px squares can't fit controls. */ .composer-media-item.video { width: 176px; height: 99px; background: #000; } .composer-media-item.video video { width: 100%; height: 100%; } .composer-media-remove { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.7); color: #fff; border: none; border-radius: var(--radius-full); cursor: pointer; padding: 0; } .composer-media-remove:hover { background: rgba(15,23,42,0.9); } .composer-attach { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 14px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: background 0.15s; } .composer-attach:hover { background: var(--color-surface-hover); } .composer-attach.busy { opacity: 0.7; cursor: progress; } .composer-attach input[type=file] { display: none; } .composer-retention { font-size: 0.72rem; color: var(--color-text-muted); margin: 8px 0 0; line-height: 1.45; } .composer-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 20px 0 8px; } .composer-optional { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.75; } .composer-hint { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 8px; line-height: 1.5; } .composer-empty-accounts { font-size: 0.8rem; color: var(--color-text-muted); padding: 10px 12px; background: var(--color-surface-muted); border-radius: var(--radius-md); } .composer-empty-accounts a { color: var(--color-primary); font-weight: 600; } /* Instagram framing preview */ .composer-ig-hint { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.5; } .composer-ig-list { display: flex; flex-direction: column; gap: 12px; } .composer-ig-item { display: flex; gap: 12px; align-items: flex-start; } .composer-ig-frame { flex: 0 0 120px; width: 120px; max-height: 150px; background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .composer-ig-frame img { width: 100%; height: 100%; display: block; } .composer-ig-controls { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; } .composer-ig-chips, .composer-ig-fit { display: flex; flex-wrap: wrap; gap: 5px; } .composer-ig-chip { border: 1px solid var(--color-border, #e2e8f0); background: var(--color-surface, #fff); color: var(--color-text-secondary, #475569); font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: 9999px; cursor: pointer; } .composer-ig-chip.on { background: var(--color-primary, #6366f1); border-color: var(--color-primary, #6366f1); color: #fff; } .composer-targets { display: flex; flex-direction: column; gap: 8px; } /* No account ticked yet — outline the picker so the "why is Schedule greyed out" answer is visible. */ .composer-targets.none-selected { border: 1px dashed rgba(245,158,11,0.6); border-radius: var(--radius-md); padding: 8px; } .composer-target-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; color: #b45309; } .composer-target { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.84rem; color: var(--color-text); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .composer-target:hover:not(.disabled) { border-color: var(--color-border-strong); } .composer-target.selected { border-color: var(--color-primary); background: #eef2ff; } .composer-target.disabled { opacity: 0.55; cursor: not-allowed; } .composer-target-name { flex: 1; font-weight: 600; } .composer-target-reason { font-size: 0.72rem; color: var(--color-text-muted); font-weight: 500; } .composer-when { display: flex; gap: 8px; } .composer-radio { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .composer-radio.active { border-color: var(--color-primary); background: #eef2ff; color: var(--color-primary); } .composer-radio input { display: none; } .composer-datetime { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .composer-input { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.84rem; font-family: inherit; color: var(--color-text); } .composer-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); } .composer-tz { font-size: 0.74rem; color: var(--color-text-muted); } .composer-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--color-border); } /* Read-only delivery results */ .results-content { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5; color: var(--color-text); padding: 12px 14px; background: var(--color-surface-muted); border-radius: var(--radius-md); } .results-log { display: flex; flex-direction: column; gap: 6px; } .results-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .results-row-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .results-row-name { font-size: 0.84rem; font-weight: 600; color: var(--color-text); } .results-row-meta { font-size: 0.72rem; color: var(--color-text-muted); } .results-row-error { font-size: 0.72rem; color: #b91c1c; } .results-pill { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-full); white-space: nowrap; } .results-pill.ok { background: #ecfdf5; color: #047857; } .results-pill.fail { background: #fef2f2; color: #b91c1c; } .results-pill.skip { background: #f1f5f9; color: #64748b; } .results-pill.pending { background: #eff6ff; color: #2563eb; } .results-unpublish { flex: 0 0 auto; border: 1px solid var(--border, #e2e8f0); background: #fff; color: #b91c1c; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full); cursor: pointer; white-space: nowrap; transition: background 0.12s, border-color 0.12s; } .results-unpublish:hover:not(:disabled) { background: #fef2f2; border-color: #fecaca; } .results-unpublish:disabled { opacity: 0.5; cursor: default; } /* ── Publishing dashboard ───────────────────────────────────────────────── */ .pub-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 20px; } .pub-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px); } .pub-card-num { font-size: 1.7rem; font-weight: 750; line-height: 1.1; color: #0f172a; } .pub-card-label { font-size: 0.8rem; color: #64748b; } .pub-card-foot { font-size: 0.72rem; color: #b91c1c; margin-top: 2px; } .pub-card-link { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); text-decoration: none; align-self: center; margin: auto 0; } .pub-card-link:hover { text-decoration: underline; } /* Top-post hero */ .pub-hero { --p: #6366f1; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--p) 14%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--p) 30%, #e2e8f0); border-radius: var(--radius-lg, 14px); padding: 18px; margin-bottom: 14px; } .pub-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pub-hero-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--p); } .pub-hero-react { font-size: 0.95rem; font-weight: 750; color: #0f172a; white-space: nowrap; } .pub-hero-text { font-size: 1.02rem; line-height: 1.5; color: #1e293b; margin: 0; font-weight: 500; } .pub-hero-link { align-self: flex-start; font-size: 0.82rem; font-weight: 700; color: var(--p); text-decoration: none; } .pub-hero-link:hover { text-decoration: underline; } /* Reaction mix */ .pub-mix-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; background: #f1f5f9; } .pub-mix-bar > div { min-width: 4px; transition: width 0.4s ease; } .pub-mix-list { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; } .pub-mix-item { font-size: 0.82rem; color: #475569; display: inline-flex; align-items: center; gap: 5px; } .pub-mix-item strong { color: #0f172a; } .pub-mix-emoji { font-size: 1rem; line-height: 1; } /* Clickable post rows */ .pub-recent-link { text-decoration: none; color: inherit; cursor: pointer; transition: background 0.12s; border-radius: 8px; } .pub-recent-link:hover { background: #f8fafc; } .pub-recent-link:hover .pub-recent-text { color: var(--color-primary); } .pub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .pub-panel { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px); padding: 16px 18px; margin-bottom: 14px; } .pub-panel-title { font-size: 0.92rem; font-weight: 700; color: #0f172a; margin: 0 0 12px; } .pub-panel-sub { font-size: 0.72rem; font-weight: 500; color: #94a3b8; margin-left: 4px; } .pub-muted { font-size: 0.82rem; color: #94a3b8; margin: 6px 0 0; } /* Per-platform bars */ .pub-bar-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 10px; margin-bottom: 9px; } .pub-bar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #334155; font-weight: 500; } .pub-bar-track { height: 9px; background: #f1f5f9; border-radius: var(--radius-full, 999px); overflow: hidden; } .pub-bar-fill { height: 100%; border-radius: var(--radius-full, 999px); min-width: 3px; transition: width 0.4s ease; } .pub-bar-num { font-size: 0.82rem; font-weight: 600; color: #0f172a; white-space: nowrap; } .pub-bar-fail { font-size: 0.72rem; font-weight: 500; color: #b91c1c; margin-left: 3px; } /* Activity sparkline */ .pub-spark { display: flex; align-items: flex-end; gap: 2px; height: 90px; } .pub-spark-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; } .pub-spark-bar { width: 100%; background: var(--primary, #6366f1); border-radius: 2px 2px 0 0; min-height: 2px; transition: height 0.3s ease; } .pub-spark-bar.empty { background: #e2e8f0; } .pub-spark-foot { margin-top: 8px; } /* Recent list */ .pub-recent { display: flex; flex-direction: column; } .pub-recent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #f1f5f9; } .pub-recent-row:first-child { border-top: none; } .pub-recent-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pub-recent-text { font-size: 0.86rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pub-recent-meta { font-size: 0.74rem; color: #94a3b8; } .pub-status { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-full, 999px); white-space: nowrap; } .pub-status.ok { background: #ecfdf5; color: #047857; } .pub-status.warn { background: #fffbeb; color: #b45309; } .pub-status.fail { background: #fef2f2; color: #b91c1c; } .pub-status.pending { background: #eff6ff; color: #2563eb; } .pub-note { display: flex; align-items: center; font-size: 0.78rem; color: #94a3b8; margin: 6px 2px 24px; } .pub-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 56px 20px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px); margin-top: 18px; } .pub-empty-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 6px 0 0; } .pub-empty-sub { font-size: 0.85rem; color: #64748b; margin: 0 0 10px; } /* AI insights */ .pub-insight { background: linear-gradient(135deg, color-mix(in srgb, #6366f1 9%, #fff), #fff); border: 1px solid color-mix(in srgb, #6366f1 22%, #e2e8f0); } .pub-insight-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .pub-insight-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #4f46e5; } .pub-insight-refresh { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full, 999px); cursor: pointer; transition: background 0.15s ease; } .pub-insight-refresh:hover:not(:disabled) { background: #f8fafc; } .pub-insight-refresh:disabled { opacity: 0.55; cursor: default; } .pub-insight-summary { font-size: 0.95rem; line-height: 1.55; color: #1e293b; margin: 0 0 14px; font-weight: 500; } .pub-insight-group { margin-top: 12px; } .pub-insight-group-title { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 7px; } .pub-insight-group.good .pub-insight-group-title { color: #047857; } .pub-insight-group.watch .pub-insight-group-title { color: #b45309; } .pub-insight-item { padding: 8px 0; border-top: 1px solid color-mix(in srgb, #6366f1 9%, #eef2f7); } .pub-insight-item:first-of-type { border-top: none; } .pub-insight-cat { font-size: 0.85rem; font-weight: 700; color: #0f172a; } .pub-insight-note { font-size: 0.85rem; line-height: 1.5; color: #334155; margin: 1px 0 0; } .pub-insight-tip { font-size: 0.82rem; line-height: 1.5; color: #475569; margin: 5px 0 0; padding-left: 10px; border-left: 2px solid color-mix(in srgb, #f59e0b 45%, #fff); } .pub-insight-tip strong { color: #92400e; font-weight: 700; } .pub-insight-loading { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #64748b; } /* ── Media listening (/listening) ─────────────────────────────── */ .lst-upsell { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 56px 20px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px); margin-top: 18px; } .lst-upsell-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 6px 0 0; } .lst-upsell-sub { font-size: 0.85rem; color: #64748b; margin: 0 0 10px; max-width: 440px; line-height: 1.55; } .lst-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .lst-field-label { display: block; font-size: 0.82rem; font-weight: 600; color: #334155; margin: 4px 0 6px; } .lst-textarea, .lst-input { width: 100%; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 9px 11px; font-size: 0.86rem; color: #1e293b; font-family: inherit; background: #fff; resize: vertical; } .lst-textarea:focus, .lst-input:focus { outline: none; border-color: #6366f1; } .lst-field-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .lst-btn-ghost { display: inline-flex; align-items: center; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 0.8rem; font-weight: 600; padding: 7px 13px; border-radius: 9px; cursor: pointer; } .lst-btn-ghost:hover:not(:disabled) { background: #f8fafc; } .lst-btn-ghost:disabled { opacity: 0.55; cursor: default; } .lst-sources { display: flex; flex-direction: column; gap: 2px; } .lst-source-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f1f5f9; } .lst-source-row:first-child { border-top: none; } .lst-source-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } .lst-source-name { font-size: 0.86rem; font-weight: 600; color: #0f172a; } .lst-source-sub { font-size: 0.74rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lst-source-err { color: #b91c1c; } .lst-icon-btn { flex: 0 0 auto; border: none; background: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; } .lst-icon-btn:hover { background: #f1f5f9; color: #475569; } .lst-add-source { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .lst-add-source .lst-input { flex: 1; min-width: 140px; } .lst-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lst-chip { border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 0.76rem; font-weight: 600; padding: 4px 11px; border-radius: 9999px; cursor: pointer; } .lst-chip.on { background: #6366f1; border-color: #6366f1; color: #fff; } .lst-search { border: 1px solid var(--border, #e2e8f0); border-radius: 9999px; padding: 4px 12px; font-size: 0.78rem; font-family: inherit; color: #1e293b; background: #fff; min-width: 150px; } .lst-search:focus { outline: none; border-color: #6366f1; } .lst-mentions { display: flex; flex-direction: column; } .lst-mention { padding: 12px 0; border-top: 1px solid #f1f5f9; } .lst-mention:first-child { border-top: none; } .lst-mention.read { opacity: 0.62; } .lst-mention.highlight { background: #eef2ff; box-shadow: inset 3px 0 0 #6366f1; border-radius: 8px; padding-left: 12px; padding-right: 8px; opacity: 1; animation: lst-mention-flash 1.6s ease-out 1; } @keyframes lst-mention-flash { 0% { background: #c7d2fe; } 100% { background: #eef2ff; } } .lst-mention-top { display: flex; align-items: baseline; gap: 8px; } .lst-sentiment { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 9999px; } .lst-mention-title { font-size: 0.92rem; font-weight: 600; color: #0f172a; text-decoration: none; line-height: 1.4; } .lst-mention-title:hover { color: #4f46e5; text-decoration: underline; } .lst-mention-summary { font-size: 0.85rem; color: #334155; line-height: 1.5; margin: 4px 0 0; } .lst-mention-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 0.74rem; color: #94a3b8; margin-top: 5px; } .lst-mark-read { border: none; background: none; color: #6366f1; font-size: 0.74rem; font-weight: 600; cursor: pointer; padding: 0; margin-left: 2px; } .lst-mark-read:hover { text-decoration: underline; } /* On-demand full-article AI read */ .lst-article-btn { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid #e2e8f0; background: #fff; color: #4f46e5; font-size: 0.76rem; font-weight: 600; padding: 4px 11px; border-radius: 9999px; cursor: pointer; } .lst-article-btn:hover:not(:disabled) { background: #eef2ff; border-color: #c7d2fe; } .lst-article-btn:disabled { opacity: 0.6; cursor: default; } .lst-article { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, #6366f1 6%, #fff); border: 1px solid color-mix(in srgb, #6366f1 16%, #e2e8f0); } .lst-article-label { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #4f46e5; } .lst-article-text { margin: 0; font-size: 0.85rem; line-height: 1.55; color: #334155; } .lst-article-err { margin: 7px 0 0; font-size: 0.78rem; color: #b45309; } .lst-article-err a { color: #4f46e5; text-decoration: none; margin-left: 4px; } .lst-article-err a:hover { text-decoration: underline; } .lst-info { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: #475569; line-height: 1.5; background: color-mix(in srgb, #6366f1 6%, #fff); border: 1px solid color-mix(in srgb, #6366f1 18%, #e2e8f0); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; } .lst-retention { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .lst-select { width: auto; padding: 6px 10px; cursor: pointer; } /* Watch-term tags */ .lst-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 7px 9px; background: #fff; } .lst-tags:focus-within { border-color: #6366f1; } .lst-tag { display: inline-flex; align-items: center; gap: 5px; background: #eef2ff; color: #4338ca; font-size: 0.8rem; font-weight: 600; padding: 3px 4px 3px 10px; border-radius: 9999px; } .lst-tag-x { border: none; background: none; color: #6366f1; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; border-radius: 9999px; } .lst-tag-x:hover { background: #c7d2fe; color: #312e81; } .lst-tag-input { flex: 1; min-width: 120px; border: none; outline: none; background: none; font-family: inherit; font-size: 0.85rem; color: #1e293b; padding: 4px 2px; } .lst-dismiss { margin-left: auto; } .lst-mention-top { align-items: center; } .lst-loadmore { display: flex; justify-content: center; margin-top: 12px; } /* Dashboard latest-mentions widget */ .dash-mentions { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 14px); padding: 16px 18px; margin-bottom: 16px; } .dash-mentions-all { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: #4f46e5; text-decoration: none; white-space: nowrap; } .dash-mentions-all:hover { text-decoration: underline; } .dash-mentions-list { display: flex; flex-direction: column; margin-top: 6px; } .dash-mention { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f1f5f9; text-decoration: none; } .dash-mention:first-child { border-top: none; } .dash-mention-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 9999px; } .dash-mention-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dash-mention-title { font-size: 0.85rem; font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-mention:hover .dash-mention-title { color: #4f46e5; } .dash-mention-sub { font-size: 0.74rem; color: #94a3b8; } @media (max-width: 900px) { .pub-cards { grid-template-columns: repeat(2, 1fr); } .pub-grid { grid-template-columns: 1fr; } } /* Tablet */ @media (max-width: 768px) { .cal-cell { min-height: 88px; padding: 5px 4px 6px; } .cal-weekday { padding: 7px 6px; } .cal-month-label { min-width: 120px; font-size: 0.95rem; } .composer-new-btn { padding: 7px 13px; font-size: 0.78rem; } } /* Phone */ @media (max-width: 540px) { /* Composer takes the full screen; its body scrolls between sticky header/footer. */ .composer-panel { width: 100vw; } .composer-header, .composer-footer { position: sticky; background: var(--color-surface); z-index: 1; } .composer-header { top: 0; } .composer-footer { bottom: 0; } .composer-body { padding: 14px 16px; } .composer-target { padding: 12px; } /* bigger touch targets */ .composer-radio { padding: 11px; } .composer-datetime { flex-wrap: wrap; } .composer-input { flex: 1; min-width: 130px; } /* Calendar: compact day cells; chips show time + platform icons (text hidden) and stay tappable — tapping a post opens the editor, where date/time can be changed (drag is desktop-first, editing is the mobile path to reschedule). */ .cal-toolbar { gap: 6px; } .cal-tz { width: 100%; order: 3; } .cal-cell { min-height: 64px; padding: 4px 2px 5px; } .cal-cell-date { font-size: 0.72rem; } .cal-weekday { padding: 6px 3px; font-size: 0.62rem; } .cal-post { padding: 2px 3px; gap: 2px; } .cal-post-text { display: none; } .cal-post-time { font-size: 0.62rem; } .cal-draft-chip { max-width: 100%; } } /* ─── Digital card (public /c/ link hub) ─────────────────────────────────── */ .dcard-page { --dcard-accent: #6366f1; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 16px 28px; background: radial-gradient(1100px 520px at 50% -8%, color-mix(in srgb, var(--dcard-accent) 32%, #fff), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--dcard-accent) 10%, #f8fafc), #f1f5f9); font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); } .dcard { width: 100%; max-width: 460px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 26px; padding: 28px 24px 18px; box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--dcard-accent) 45%, transparent), 0 4px 14px rgba(15, 23, 42, 0.06); text-align: center; } .dcard-logo { max-height: 34px; max-width: 60%; object-fit: contain; margin: 0 auto 14px; display: block; } .dcard-avatar-wrap { display: flex; justify-content: center; margin-bottom: 14px; } .dcard-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--dcard-accent), 0 10px 24px -8px color-mix(in srgb, var(--dcard-accent) 60%, transparent); } .dcard-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 700; color: #fff; letter-spacing: 0.5px; background: linear-gradient(150deg, var(--dcard-accent), color-mix(in srgb, var(--dcard-accent) 55%, #000)); } .dcard-name { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.01em; } .dcard-title { font-size: 0.9rem; font-weight: 600; color: var(--dcard-accent); margin: 4px 0 0; } .dcard-bio { font-size: 0.9rem; color: #475569; margin: 12px 4px 0; line-height: 1.55; } .dcard-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 20px auto 4px; padding: 12px 22px; border-radius: var(--radius-full, 999px); background: var(--dcard-accent); color: #fff; font-size: 0.9rem; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--dcard-accent) 70%, transparent); transition: transform 0.12s ease, box-shadow 0.12s ease; } .dcard-save:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--dcard-accent) 75%, transparent); } .dcard-save svg { width: 17px; height: 17px; } .dcard-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .dcard-link { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 15px; background: #fff; border: 1px solid #e9edf3; color: #0f172a; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .dcard-link:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--dcard-accent) 45%, #e9edf3); box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.25); } .dcard-link-icon { display: inline-flex; flex-shrink: 0; } .dcard-link-icon svg { width: 20px; height: 20px; } .dcard-link-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dcard-link-chev { color: #cbd5e1; font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .dcard-team { margin-top: 24px; padding-top: 18px; border-top: 1px solid #eef2f7; } .dcard-team-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; } .dcard-team-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 12px; } .dcard-team-member { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; width: 64px; } .dcard-team-member img, .dcard-team-fallback { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 2px #e2e8f0; } .dcard-team-fallback { display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; color: #fff; background: linear-gradient(150deg, var(--dcard-accent), color-mix(in srgb, var(--dcard-accent) 55%, #000)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dcard-accent) 30%, #e2e8f0); } .dcard-team-name { font-size: 0.72rem; font-weight: 600; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; } .dcard-made { display: inline-flex; align-items: center; gap: 5px; margin-top: 22px; font-size: 0.74rem; font-weight: 600; color: #94a3b8; text-decoration: none; } .dcard-made:hover { color: var(--dcard-accent); } .dcard-made-spark { font-size: 0.8rem; } .dcard-missing { justify-content: center; } .dcard-missing-box { text-align: center; color: #475569; } .dcard-missing-box h1 { font-size: 1.3rem; color: #0f172a; margin: 0 0 6px; } /* ─── Digital card manager + editor ──────────────────────────────────────── */ .cards-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 56px 20px; background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-lg, 14px); margin-top: 18px; } .cards-empty-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 6px 0 0; } .cards-empty-sub { font-size: 0.85rem; color: #64748b; margin: 0 0 12px; max-width: 380px; } .cards-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .cards-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px; } .cards-row-avatar { --dcard-accent: #6366f1; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.95rem; background: linear-gradient(150deg, var(--dcard-accent), color-mix(in srgb, var(--dcard-accent) 55%, #000)); } .cards-row-avatar img { width: 100%; height: 100%; object-fit: cover; } .cards-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cards-row-name { font-size: 0.92rem; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 8px; } .cards-row-draft { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b45309; background: #fffbeb; padding: 1px 7px; border-radius: 999px; } .cards-row-slug { font-size: 0.78rem; color: #64748b; text-decoration: none; } .cards-row-slug:hover { color: var(--color-primary); } .cards-row-stats { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .cards-row-stats span { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 600; color: #64748b; white-space: nowrap; } .cards-row-actions { display: flex; align-items: center; gap: 6px; } @media (max-width: 640px) { .cards-row-stats { display: none; } } .cards-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 999px; background: #fff; font-size: 0.78rem; font-weight: 600; color: #334155; cursor: pointer; text-decoration: none; transition: background 0.12s, border-color 0.12s; } .cards-btn:hover { background: #f8fafc; border-color: var(--color-border-strong, #cbd5e1); } .cards-btn.danger { color: #b91c1c; } .cards-btn.danger:hover { background: #fef2f2; border-color: #fecaca; } /* Editor */ .cards-editor { display: grid; grid-template-columns: 1fr 380px; gap: 22px; margin-top: 16px; align-items: start; } .cards-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .cards-form-section { background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px; padding: 16px 18px; } .cards-field-label { font-size: 0.8rem; font-weight: 700; color: #0f172a; margin: 4px 0 8px; } .cards-field-hint { font-weight: 500; color: #94a3b8; } .cards-uploads { display: flex; gap: 18px; margin-bottom: 14px; } .cards-upload { display: flex; flex-direction: column; align-items: center; gap: 5px; } .cards-upload-label { font-size: 0.74rem; font-weight: 600; color: #64748b; } .cards-upload-drop { width: 72px; height: 72px; border-radius: 50%; border: 2px dashed var(--color-border-strong, #cbd5e1); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; background: #f8fafc; transition: border-color 0.12s; } .cards-upload-drop.logo { border-radius: 12px; width: 110px; } .cards-upload-drop:hover { border-color: var(--color-primary); } .cards-upload-drop.busy { opacity: 0.6; } .cards-upload-drop img { width: 100%; height: 100%; object-fit: cover; } .cards-upload-drop :is(input[type=file]) { display: none; } .cards-upload-clear { background: none; border: none; color: #94a3b8; font-size: 0.72rem; cursor: pointer; } .cards-upload-clear:hover { color: #b91c1c; } .cards-slug { display: flex; align-items: center; gap: 0; margin-top: 12px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; overflow: hidden; } .cards-slug-prefix { padding: 9px 4px 9px 12px; font-size: 0.82rem; color: #94a3b8; white-space: nowrap; background: #f8fafc; } .cards-slug-input { flex: 1; min-width: 0; border: none; outline: none; padding: 9px 10px; font-size: 0.86rem; } .cards-slug-state { padding: 0 12px; font-size: 0.74rem; font-weight: 700; } .cards-slug-state.free { color: #16a34a; } .cards-slug-state.taken { color: #b91c1c; } .cards-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cards-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; cursor: pointer; padding: 0; } .cards-swatch.on { box-shadow: 0 0 0 2px var(--color-primary); } .cards-swatch-custom { width: 30px; height: 30px; padding: 0; border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; background: none; cursor: pointer; } .cards-links-edit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .cards-link-edit { display: flex; align-items: center; gap: 10px; } .cards-link-edit-icon { flex-shrink: 0; display: inline-flex; } .cards-link-edit-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .cards-link-input { width: 100%; box-sizing: border-box; border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; padding: 7px 10px; font-size: 0.82rem; outline: none; } .cards-link-input:focus { border-color: var(--color-primary); } .cards-link-edit-actions { display: flex; gap: 3px; flex-shrink: 0; } .cards-icon-btn { width: 26px; height: 26px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 7px; background: #fff; color: #64748b; cursor: pointer; font-size: 0.85rem; line-height: 1; } .cards-icon-btn:hover:not(:disabled) { background: #f1f5f9; } .cards-icon-btn:disabled { opacity: 0.35; cursor: default; } .cards-icon-btn.danger:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; } .cards-presets { display: flex; flex-wrap: wrap; gap: 6px; } .cards-preset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--color-border, #e2e8f0); border-radius: 999px; background: #fff; font-size: 0.78rem; font-weight: 600; color: #334155; cursor: pointer; } .cards-preset:hover { background: #f8fafc; border-color: var(--color-border-strong, #cbd5e1); } .cards-preset svg { width: 15px; height: 15px; } .cards-share { display: flex; align-items: center; gap: 16px; } .cards-qr { width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--color-border, #e2e8f0); padding: 6px; background: #fff; } .cards-share-actions { display: flex; flex-direction: column; gap: 8px; } .cards-stats { display: flex; gap: 10px; margin-top: 16px; } .cards-stat { flex: 1; text-align: center; padding: 12px 8px; background: #f8fafc; border-radius: 10px; } .cards-stat-num { display: block; font-size: 1.3rem; font-weight: 750; color: #0f172a; } .cards-stat-label { font-size: 0.72rem; color: #64748b; } .cards-toplinks { margin-top: 14px; } .cards-toplink { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 5px 0; border-top: 1px solid #f1f5f9; } .cards-toplink-n { font-weight: 700; color: var(--color-primary); } .cards-editor-footer { display: flex; align-items: center; gap: 10px; padding-top: 4px; } .cards-publish { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: #334155; } .cards-preview-wrap { position: sticky; top: 16px; } .cards-phone { background: linear-gradient(180deg, #f1f5f9, #e2e8f0); border-radius: 30px; padding: 16px; border: 1px solid var(--color-border, #e2e8f0); } .cards-phone .dcard { box-shadow: 0 10px 30px -16px rgba(15,23,42,0.4); border-radius: 22px; } @media (max-width: 880px) { .cards-editor { grid-template-columns: 1fr; } .cards-preview-wrap { position: static; order: -1; max-width: 460px; margin: 0 auto; } } /* ════════════════════════════════════════════════════════════════════════ Organisation portal — dark, read-only intelligence layer ════════════════════════════════════════════════════════════════════════ */ .org-shell { --org-bg: #0b1120; --org-surface: #131c2e; --org-surface-2: #1a2438; --org-border: rgba(148,163,184,0.14); --org-text: #e8edf6; --org-muted: #93a1b8; /* Clarify HQ runs a teal/emerald accent — a deliberate break from Clarify's indigo so the org portal reads as its own environment, not a dark reskin of the app. */ --org-accent: #14b8a6; --org-accent-2: #34d399; display: flex; min-height: 100vh; background: var(--org-bg); color: var(--org-text); } .org-sidebar { width: 248px; flex: 0 0 248px; background: linear-gradient(180deg, #0e1626 0%, #0b1120 100%); border-right: 1px solid var(--org-border); display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; } .org-brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 16px; } .org-logo { height: 26px; filter: brightness(0) invert(1); opacity: 0.95; } /* "HQ" mark next to the Clarify logo in the org sidebar — the portal's own wordmark */ .org-hq-badge { background: var(--org-accent); color: #04211f; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.09em; padding: 2px 7px; border-radius: 6px; } /* Persistent "which world" marker in the top bar */ .org-topbar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--org-accent-2); } .org-topbar-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--org-accent); box-shadow: 0 0 0 3px rgba(20,184,166,0.18); } .org-current { display: flex; align-items: center; gap: 10px; background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 12px; padding: 10px 12px; margin-bottom: 18px; } .org-current-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: #fff; background: linear-gradient(135deg, var(--org-accent), var(--org-accent-2)); } .org-current-meta { min-width: 0; flex: 1; } .org-current-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-current-sub { font-size: 0.68rem; color: var(--org-muted); } .org-nav { display: flex; flex-direction: column; gap: 3px; } .org-navlink { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--org-muted); text-decoration: none; font-size: 0.86rem; font-weight: 500; transition: all 0.12s; } .org-navlink:hover { background: var(--org-surface); color: var(--org-text); } .org-navlink-active { background: rgba(20,184,166,0.16); color: #fff; } .org-navicon { font-size: 1.05rem !important; } .org-sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--org-border); display: flex; align-items: center; gap: 8px; } .org-user { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-decoration: none; color: var(--org-text); } .org-user-avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--org-surface-2); color: var(--org-text); font-size: 0.72rem; font-weight: 600; } .org-user-name { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--org-muted); } .org-logout { background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 8px; color: var(--org-muted); padding: 6px; cursor: pointer; display: flex; transition: all 0.12s; } .org-logout:hover { color: #fff; border-color: var(--org-accent); } .org-exit { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 9px; border-radius: 9px; background: var(--org-surface); border: 1px solid var(--org-border); color: var(--org-muted); text-decoration: none; font-size: 0.78rem; font-weight: 500; transition: all 0.12s; } .org-exit:hover { color: #fff; border-color: var(--org-accent); } .org-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .org-main-body { flex: 1; min-width: 0; padding: 30px 36px; } /* Org top bar (mirrors the Clarify app bar — bell, account, and a reserved search slot) */ .org-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 24px; min-height: 56px; background: var(--org-surface); border-bottom: 1px solid var(--org-border); backdrop-filter: blur(6px); } .org-topbar-search { flex: 1; min-width: 0; } .org-topbar-actions { display: flex; align-items: center; gap: 8px; } .org-topbar-divider { width: 1px; height: 22px; background: var(--org-border); margin: 0 2px; } .org-topbar-user { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 4px 8px; border-radius: 8px; } .org-topbar-user:hover { background: var(--org-surface-2); } /* Bell sits on the dark top bar — light the icon; dropdown opens downward (default), which is fine here. */ .org-topbar .notif-bell-btn { color: var(--org-muted); } .org-topbar .notif-bell-btn:hover { background: var(--org-surface-2); color: var(--org-text); } /* Mobile nav controls — hidden on desktop, activated in the ≤860 media query below */ .org-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .org-nav-burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 2px; border-radius: 9px; color: var(--org-muted); cursor: pointer; flex: 0 0 auto; } .org-nav-burger:hover { background: var(--org-surface-2); color: var(--org-text); } .org-nav-scrim { display: none; } .org-page { max-width: 1100px; margin: 0 auto; } .org-page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .org-h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .org-sub { color: var(--org-muted); font-size: 0.88rem; margin: 6px 0 0; max-width: 620px; } .org-access-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 999px; padding: 7px 14px; font-size: 0.8rem; color: var(--org-muted); } .org-loading { display: flex; justify-content: center; padding: 80px; } .org-quiet { color: var(--org-muted); font-size: 0.86rem; padding: 6px 2px; } .org-empty { text-align: center; padding: 70px 20px; color: var(--org-muted); } .org-empty h2 { color: var(--org-text); font-size: 1.1rem; margin: 14px 0 6px; } .org-empty p { max-width: 380px; margin: 0 auto 18px; font-size: 0.86rem; } .org-grid { display: flex; flex-direction: column; gap: 18px; } .org-card { background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 16px; padding: 20px 22px; } .org-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .org-card-head h2 { font-size: 1rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; } .org-card-ico { font-size: 1.1rem !important; color: var(--org-accent); } .org-card-note { font-size: 0.72rem; color: var(--org-muted); text-transform: uppercase; letter-spacing: 0.04em; } .org-leaderboard { display: flex; flex-direction: column; gap: 12px; } .org-lb-row { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 14px; } .org-lb-name { font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .org-lb-bar-wrap { background: var(--org-surface-2); border-radius: 999px; height: 8px; overflow: hidden; } .org-lb-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #ef4444); min-width: 4px; } .org-lb-stats { display: flex; gap: 5px; flex: 0 0 auto; } .org-chip { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--org-surface-2); color: var(--org-muted); white-space: nowrap; } .org-chip-threat { background: rgba(239,68,68,0.16); color: #fca5a5; } .org-chip-bully { background: rgba(236,72,153,0.16); color: #f9a8d4; } .org-chip-misinfo { background: rgba(139,92,246,0.16); color: #c4b5fd; } .org-chip-pending { background: rgba(245,158,11,0.16); color: #fcd34d; } .org-offenders { display: flex; flex-direction: column; gap: 10px; } .org-offender { display: flex; gap: 13px; padding: 12px; background: var(--org-surface-2); border-radius: 12px; } .org-offender-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #64748b, #475569); } .org-offender-avatar.is-threat { background: linear-gradient(135deg, #ef4444, #b91c1c); } .org-offender-body { min-width: 0; flex: 1; } .org-offender-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; } .org-offender-name { font-weight: 600; font-size: 0.9rem; } .org-offender-plat { font-size: 0.7rem; color: var(--org-muted); } .org-offender-sub { font-size: 0.78rem; color: var(--org-muted); margin-bottom: 7px; } .org-offender-sub strong { color: var(--org-text); } .org-offender-mps { display: flex; flex-wrap: wrap; gap: 5px; } .org-mp-tag { font-size: 0.68rem; background: rgba(20,184,166,0.14); color: #99f6e4; padding: 2px 8px; border-radius: 6px; } .org-btn-primary { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--org-accent), var(--org-accent-2)); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-size: 0.84rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: filter 0.12s; } .org-btn-primary:hover { filter: brightness(1.08); } .org-btn-sm { background: var(--org-surface-2); border: 1px solid var(--org-border); color: var(--org-text); border-radius: 8px; padding: 6px 12px; font-size: 0.78rem; cursor: pointer; } .org-btn-sm-primary { background: var(--org-accent); border-color: transparent; color: #fff; font-weight: 600; } .org-btn-sm:hover { border-color: var(--org-accent); } .org-search { display: flex; align-items: center; gap: 8px; background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 11px; padding: 10px 14px; margin-bottom: 18px; } .org-search-ico { color: var(--org-muted); font-size: 1.1rem !important; } .org-search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--org-text); font-size: 0.9rem; } .org-search-input::placeholder { color: var(--org-muted); } .org-tenant-list, .org-member-list { display: flex; flex-direction: column; gap: 8px; } .org-tenant-row, .org-member-row { display: flex; align-items: center; gap: 12px; background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 11px; padding: 11px 14px; } .org-tenant-avatar, .org-member-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; font-size: 0.8rem; background: linear-gradient(135deg, var(--org-accent), var(--org-accent-2)); } .org-tenant-name, .org-member-email { flex: 1; font-weight: 500; font-size: 0.88rem; } .org-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; } .org-status-ok { color: #6ee7b7; } .org-status-pending { color: #fcd34d; } .org-member-pending { opacity: 0.8; } .org-pending-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--org-muted); margin: 16px 0 8px; } .org-invite-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .org-input { background: var(--org-surface-2); border: 1px solid var(--org-border); border-radius: 9px; padding: 9px 12px; color: var(--org-text); font-size: 0.86rem; outline: none; min-width: 240px; } .org-input::placeholder { color: var(--org-muted); } .org-input-light { background: #fff; border: 1px solid var(--color-border-strong); color: var(--color-text); } .org-input-sm { min-width: 180px; padding: 6px 10px; font-size: 0.8rem; } .org-role-select { max-width: 150px; } .org-invite-link { margin-top: 14px; font-size: 0.78rem; color: var(--org-muted); } .org-invite-link code { display: block; margin-top: 6px; background: var(--org-surface-2); padding: 9px 12px; border-radius: 8px; color: #c7d2fe; word-break: break-all; } .org-invite-link-light code { background: var(--color-surface-muted); color: var(--color-primary); } /* Linked-workspaces (connection links) */ .org-card { background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 13px; padding: 18px; margin-bottom: 16px; } .org-card-title { font-size: 0.92rem; font-weight: 600; color: var(--org-text); margin-bottom: 4px; } .org-card-sub { font-size: 0.82rem; color: var(--org-muted); margin: 0 0 14px; } .org-link-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .org-link-form .org-search-input, .org-link-row .org-search-input { flex: 1; min-width: 240px; background: var(--org-surface-2); border: 1px solid var(--org-border); border-radius: 9px; padding: 9px 12px; color: var(--org-text); font-size: 0.86rem; } .org-link-result { margin-top: 14px; } .org-link-row { display: flex; gap: 10px; align-items: center; } .org-link-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; background: rgba(252, 211, 77, 0.08); border: 1px solid rgba(252, 211, 77, 0.25); border-radius: 10px; padding: 12px 14px; font-size: 0.8rem; line-height: 1.5; color: var(--org-text); } .org-link-warn .mud-icon-root { color: #fcd34d; flex: 0 0 auto; margin-top: 1px; } .org-tenant-meta { display: block; font-size: 0.74rem; font-weight: 400; color: var(--org-muted); margin-top: 2px; } /* Org switcher — native
dropdown (works in the static-SSR layout, no popover provider needed) */ .org-switcher { position: relative; } .org-switcher-btn { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--org-muted); } .org-switcher-btn::-webkit-details-marker { display: none; } .org-switcher-btn::marker { content: ""; } .org-switcher-btn:hover { background: var(--org-surface-2); color: var(--org-text); } .org-switcher-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--org-surface-2); border: 1px solid var(--org-border); border-radius: 10px; padding: 6px; z-index: 50; box-shadow: 0 12px 30px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 2px; } .org-switcher-item { padding: 8px 10px; border-radius: 7px; color: var(--org-text); text-decoration: none; font-size: 0.84rem; } .org-switcher-item:hover { background: var(--org-surface); } .org-switcher-item.is-active { color: var(--org-accent); font-weight: 600; } .org-switcher-new { border-top: 1px solid var(--org-border); margin-top: 4px; padding-top: 10px; color: var(--org-muted); } /* Settings tab strip (org portal) */ .org-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--org-border); margin-bottom: 20px; } .org-tab { padding: 9px 14px; font-size: 0.86rem; color: var(--org-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .org-tab:hover { color: var(--org-text); } .org-tab.is-active { color: var(--org-text); border-bottom-color: var(--org-accent); font-weight: 600; } /* Nav badge (New escalations) */ .org-nav-badge { margin-left: auto; background: var(--org-accent); color: #fff; font-size: 0.68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } /* Escalations inbox */ .org-esc-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .org-esc-filter { background: var(--org-surface); border: 1px solid var(--org-border); color: var(--org-muted); border-radius: 999px; padding: 5px 14px; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .org-esc-filter.is-active { background: var(--org-accent); border-color: transparent; color: #fff; } .org-esc-filter-n { background: rgba(255,255,255,0.25); border-radius: 8px; padding: 0 6px; font-size: 0.7rem; font-weight: 700; } .org-esc-list { display: flex; flex-direction: column; gap: 10px; } .org-esc-row { display: flex; gap: 12px; background: var(--org-surface); border: 1px solid var(--org-border); border-left: 3px solid var(--org-border); border-radius: 12px; padding: 14px 16px; } .org-esc-new { border-left-color: var(--org-accent); } .org-esc-reviewing { border-left-color: #fcd34d; } .org-esc-actioned { border-left-color: #6ee7b7; } .org-esc-dismissed { opacity: 0.6; } .org-esc-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; background: var(--org-surface-2); display: flex; align-items: center; justify-content: center; color: var(--org-muted); } .org-esc-main { flex: 1; min-width: 0; } .org-esc-title { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .org-esc-kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--org-muted); } .org-esc-meta { font-size: 0.78rem; color: var(--org-muted); margin-top: 2px; } .org-esc-note { font-size: 0.84rem; color: var(--org-text); margin-top: 6px; font-style: italic; } .org-esc-status { flex: 0 0 auto; } .org-esc-select { background: var(--org-surface-2); border: 1px solid var(--org-border); color: var(--org-text); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; } .org-esc-case { margin-top: 12px; background: var(--org-surface-2); border: 1px solid var(--org-border); border-radius: 10px; padding: 14px; } .org-esc-case-head { font-size: 0.88rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .org-esc-case-sec { margin-top: 10px; font-size: 0.84rem; line-height: 1.5; } .org-esc-case-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--org-muted); margin-bottom: 3px; } .org-esc-evidence { display: flex; flex-direction: column; gap: 8px; } .org-esc-ev { background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 8px; padding: 9px 11px; } .org-esc-ev-snap { font-size: 0.82rem; } .org-esc-ev-note { font-size: 0.76rem; color: var(--org-muted); margin-top: 4px; } .org-esc-ev-link { font-size: 0.76rem; color: var(--org-accent); text-decoration: none; margin-top: 4px; display: inline-block; } .org-esc-case-foot { font-size: 0.74rem; color: var(--org-muted); margin: 12px 0 0; } /* Escalations Kanban board */ .org-kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: start; } .org-kanban-col { background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 12px; padding: 10px; min-height: 120px; } .org-kanban-colhead { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; } .org-kanban-colname { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .org-kanban-new { color: var(--org-accent); } .org-kanban-reviewing { color: #fcd34d; } .org-kanban-actioned { color: #6ee7b7; } .org-kanban-dismissed { color: var(--org-muted); } .org-kanban-count { margin-left: auto; background: var(--org-surface-2); color: var(--org-muted); font-size: 0.72rem; font-weight: 700; border-radius: 8px; padding: 1px 8px; } .org-kanban-cards { display: flex; flex-direction: column; gap: 8px; } .org-kanban-card { background: var(--org-surface-2); border: 1px solid var(--org-border); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color 0.12s, transform 0.06s; } .org-kanban-card:hover { border-color: var(--org-accent); } .org-kanban-card.is-open { border-color: var(--org-accent); box-shadow: 0 0 0 1px var(--org-accent); } .org-kanban-card-top { display: flex; align-items: center; gap: 6px; color: var(--org-muted); margin-bottom: 6px; } .org-kanban-kind { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; } .org-kanban-card-title { font-size: 0.86rem; font-weight: 600; color: var(--org-text); line-height: 1.35; } .org-kanban-card-meta { font-size: 0.74rem; color: var(--org-muted); margin-top: 4px; } .org-kanban-empty { text-align: center; color: var(--org-border); font-size: 1.2rem; padding: 8px 0; } /* Escalation detail drawer */ .org-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; animation: fadeIn 0.12s ease; } .org-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw; z-index: 91; background: var(--org-bg, #14161f); border-left: 1px solid var(--org-border); display: flex; flex-direction: column; animation: drawerIn 0.16s ease both; } @keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .org-drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--org-border); } .org-drawer-title { display: flex; align-items: center; gap: 8px; font-size: 0.98rem; font-weight: 600; color: var(--org-text); flex: 1; min-width: 0; } .org-drawer-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .org-drawer-close { background: transparent; border: none; color: var(--org-muted); cursor: pointer; padding: 4px; border-radius: 7px; } .org-drawer-close:hover { background: var(--org-surface); color: var(--org-text); } .org-drawer-body { padding: 16px 18px; overflow-y: auto; flex: 1; } .org-drawer-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; font-size: 0.84rem; color: var(--org-text); } .org-drawer-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--org-muted); margin-bottom: 2px; } .org-drawer-status { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .org-drawer-note { background: var(--org-surface); border: 1px solid var(--org-border); border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; font-style: italic; margin-bottom: 14px; } .org-drawer-section-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--org-muted); margin: 16px 0 8px; } @media (max-width: 900px) { .org-kanban { grid-template-columns: repeat(2, minmax(180px, 1fr)); } } /* Insights */ .org-ins-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .org-ins-table { display: flex; flex-direction: column; } .org-ins-thead, .org-ins-row { display: grid; grid-template-columns: 2fr 0.8fr 1.1fr 1fr 0.9fr 1fr; align-items: center; gap: 8px; } .org-ins-thead { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--org-muted); padding: 0 0 8px; } .org-ins-row { padding: 10px 0; border-top: 1px solid var(--org-border); font-size: 0.86rem; color: var(--org-text); } .org-ins-name { font-weight: 600; } .org-ins-flagged { color: #fca5a5; font-weight: 700; } .org-ins-backlash { font-size: 0.78rem; color: var(--org-muted); } .org-ins-backlash.hot { color: #fca5a5; font-weight: 700; } .org-ins-bar-fill.harm { background: linear-gradient(90deg, #f87171, #fca5a5); } .org-ins-bars { display: flex; flex-direction: column; gap: 10px; } .org-ins-bar-row { display: grid; grid-template-columns: 1.4fr 3fr auto; align-items: center; gap: 10px; } .org-ins-bar-label { font-size: 0.82rem; color: var(--org-text); } .org-ins-bar-n { color: var(--org-muted); font-size: 0.72rem; margin-left: 4px; } .org-ins-bar-track { height: 8px; background: var(--org-surface-2); border-radius: 5px; overflow: hidden; } .org-ins-bar-fill { height: 100%; background: linear-gradient(90deg, var(--org-accent), var(--org-accent-2, #22d3ee)); border-radius: 5px; } .org-ins-bar-val { font-size: 0.82rem; font-weight: 600; color: var(--org-text); min-width: 34px; text-align: right; } .org-ins-posts { display: flex; flex-direction: column; gap: 8px; } .org-ins-post { background: var(--org-surface-2); border: 1px solid var(--org-border); border-radius: 10px; padding: 10px 12px; } .org-ins-post-cap { font-size: 0.85rem; color: var(--org-text); line-height: 1.4; } .org-ins-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.74rem; color: var(--org-muted); } .org-ins-post-stat { color: var(--org-text); font-weight: 600; } .org-ins-post-angry { color: #fca5a5; font-weight: 600; } .org-ins-post-link { color: var(--org-accent); text-decoration: none; } /* Raise-to-organisation (workspace side, light theme) */ .raise-org-panel { margin-top: 8px; background: var(--color-surface-muted, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); border-radius: 10px; padding: 12px; max-width: 360px; display: flex; flex-direction: column; gap: 4px; } .raise-org-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #64748b); margin-top: 4px; } .raise-org-input { width: 100%; background: #fff; border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; padding: 7px 10px; font-size: 0.85rem; color: var(--color-text, #0f172a); font-family: inherit; box-sizing: border-box; } .raise-org-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; } /* Escalation discussion thread (theme-neutral — used on both the light workspace side and dark org portal) */ .esc-thread { margin-top: 10px; } .esc-thread-empty { font-size: 0.8rem; opacity: 0.6; margin: 0 0 8px; } .esc-thread-msgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 340px; overflow-y: auto; } .esc-msg { align-self: flex-start; max-width: 82%; background: rgba(128,128,128,0.1); border: 1px solid rgba(128,128,128,0.18); border-radius: 10px; padding: 8px 11px; } .esc-msg-mine { align-self: flex-end; background: rgba(99,102,241,0.14); border-color: rgba(99,102,241,0.3); } .esc-msg-meta { font-size: 0.68rem; opacity: 0.6; margin-bottom: 3px; } .esc-msg-body { font-size: 0.84rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .esc-compose { display: flex; gap: 8px; align-items: flex-end; } .esc-compose-input { flex: 1; background: rgba(128,128,128,0.08); border: 1px solid rgba(128,128,128,0.25); border-radius: 8px; padding: 8px 10px; font-size: 0.84rem; color: inherit; font-family: inherit; resize: vertical; box-sizing: border-box; } .esc-compose-send { background: var(--org-accent, #6366f1); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .esc-compose-send:disabled { opacity: 0.5; cursor: default; } /* Case referral panel (workspace-side, on the case detail) */ .case-referral { margin-top: 12px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; padding: 12px 14px; } .case-referral-head { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: #3730a3; margin-bottom: 10px; } .case-referral-status { margin-left: auto; background: #6366f1; color: #fff; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; } /* Org notification preferences grid */ .org-notif-grid { display: flex; flex-direction: column; } .org-notif-head { display: grid; grid-template-columns: 1fr 70px 70px; align-items: center; padding: 0 0 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--org-muted); } .org-notif-head span:not(:first-child) { text-align: center; } .org-notif-row { display: grid; grid-template-columns: 1fr 70px 70px; align-items: center; padding: 12px 0; border-top: 1px solid var(--org-border); } .org-notif-title { font-size: 0.88rem; font-weight: 500; color: var(--org-text); } .org-notif-desc { font-size: 0.78rem; color: var(--org-muted); margin-top: 2px; } .org-notif-check { display: flex; justify-content: center; } .org-notif-check input { width: 17px; height: 17px; accent-color: var(--org-accent); cursor: pointer; } @media (max-width: 860px) { /* Sidebar becomes an off-canvas drawer toggled by the burger — nav, switcher, exit all stay reachable. */ .org-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 268px; height: auto; overflow-y: auto; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 0 0 40px rgba(0,0,0,0.5); } .org-nav-toggle:checked ~ .org-sidebar { transform: translateX(0); } .org-nav-toggle:checked ~ .org-nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,0.55); animation: fadeIn 0.12s ease; } .org-nav-burger { display: inline-flex; } .org-topbar-label { display: none; } .org-user-name { display: none; } .org-main-body { padding: 20px 16px; } .org-topbar { padding: 8px 12px; } .org-lb-row { grid-template-columns: 1fr; gap: 6px; } } @media (max-width: 560px) { .org-kanban { grid-template-columns: 1fr; } .org-page-head { flex-direction: column; align-items: stretch; gap: 10px; } /* Cohort activity table scrolls sideways rather than crushing six columns onto a phone */ .org-ins-table { overflow-x: auto; } .org-ins-thead, .org-ins-row { min-width: 520px; } /* Let member/tenant rows wrap so the role select + buttons don't overflow */ .org-tenant-row, .org-member-row { flex-wrap: wrap; } .org-drawer { width: 100%; max-width: 100%; } .org-invite-form .org-input, .org-link-form .org-search-input { flex: 1 1 100%; } } /* MP-side settings: org access requests (light theme) */ .org-req-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 600; margin: 4px 0 8px; } .org-req-row, .org-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 8px; } .org-req-pending { background: rgba(245,158,11,0.05); border-color: rgba(245,158,11,0.25); } .org-req-info, .org-admin-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .org-req-name { font-weight: 600; font-size: 0.88rem; } .org-req-type { font-size: 0.7rem; color: var(--color-primary); font-weight: 600; } .org-req-when { font-size: 0.74rem; color: var(--color-text-muted); } .org-req-actions { display: flex; gap: 8px; flex: 0 0 auto; } .org-admin-invite { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; } /* Login: Clarify / Organisation tabs + org theming */ .auth-mode-tabs { display: flex; width: 100%; max-width: 340px; margin: 0 auto 24px; gap: 4px; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.18); border-radius: 12px; padding: 4px; } .auth-mode-tab { flex: 1; text-align: center; padding: 9px 14px; border-radius: 9px; font-size: 0.84rem; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .auth-mode-tab:hover { color: var(--color-text-primary); } .auth-mode-tab.active { background: #fff; color: var(--color-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.1); } .auth-layout--org .auth-panel-left { background: linear-gradient(160deg, #0b1120 0%, #0f3d3a 100%); } .auth-layout--org .auth-mode-tabs { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); } .auth-layout--org .auth-mode-tab { color: #94a3b8; } .auth-layout--org .auth-mode-tab.active { background: #115e59; color: #99f6e4; box-shadow: 0 1px 6px rgba(0,0,0,0.35); } /* Clarify HQ wordmark on the org login */ .auth-hq-badge { display: inline-flex; align-items: center; background: #14b8a6; color: #04211f; font-weight: 800; font-size: 0.6rem; letter-spacing: 0.09em; padding: 3px 8px; border-radius: 6px; margin-left: 8px; vertical-align: middle; } /* ── Data dictionary (/admin/data-dictionary, support-only) ─────────────────── */ .dd-header-link { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); text-decoration: none; align-self: center; } .dd-summary { display: flex; gap: 18px; font-size: 0.85rem; color: var(--color-text); margin: 4px 0 2px; } .dd-muted { font-size: 0.78rem; color: var(--color-text-muted); margin: 4px 0 12px; } .dd-muted-inline { font-size: 0.75rem; color: var(--color-text-muted); } .dd-search { width: 100%; max-width: 420px; margin-bottom: 14px; } .dd-table { border-bottom: 1px solid var(--color-border); } .dd-table:last-child { border-bottom: none; } .dd-table-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 4px; background: none; border: none; cursor: pointer; text-align: left; } .dd-table-head:hover { background: var(--color-surface-muted); } .dd-table-name { font-size: 0.84rem; font-weight: 600; color: var(--color-text); background: none; } .dd-table-meta { margin-left: auto; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; } .dd-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; } .dd-badge-tenant { background: #eef2ff; color: #4f46e5; } .dd-table-detail { padding: 4px 8px 14px 28px; } .dd-table-summary { font-size: 0.8rem; color: var(--color-text); margin: 2px 0 10px; line-height: 1.5; } .dd-cols { width: 100%; border-collapse: collapse; font-size: 0.78rem; } .dd-cols th { text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding: 4px 10px 4px 0; border-bottom: 1px solid var(--color-border); } .dd-cols td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--color-surface-muted); vertical-align: top; } .dd-cols code { font-size: 0.76rem; background: none; } .dd-type { color: var(--color-text-muted); white-space: nowrap; } .dd-key { white-space: nowrap; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); } .dd-desc { color: var(--color-text-muted); line-height: 1.45; } .dd-subhead { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 12px 0 4px; } .dd-list { margin: 0; padding-left: 18px; font-size: 0.78rem; color: var(--color-text); } .dd-list li { margin: 2px 0; } .dd-list a { color: var(--color-primary); text-decoration: none; font-weight: 600; } /* ============================================================================ Diary calendar layer on /schedule (see docs/design/calendar-drive-drafting.md) Three visual grammars, one meaning each: solid chip (.cal-post) = will publish / was published — colour = status dashed chip (phase 3) = proposed draft awaiting review thin line (.cal-event) = diary context — always the same muted neutral, never draggable, never editable ============================================================================ */ .cal-toolbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Layer filter — checkbox pills */ .cal-layers { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cal-layer { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; user-select: none; background: var(--color-surface); transition: border-color 0.12s, color 0.12s; } .cal-layer:hover { border-color: var(--color-border-strong); } .cal-layer.on { color: var(--color-text); border-color: var(--color-border-strong); } .cal-layer input { display: none; } .cal-layer-mark { display: inline-flex; width: 10px; justify-content: center; font-size: 0.7rem; } .cal-layer-mark.diary { color: var(--color-secondary); } .cal-layer-mark.scheduled::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-primary); } .cal-layer-mark.published::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--color-success); } .cal-layer-mark.approvals::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #ea580c; } .cal-layer-mark.drafts::before { content: ""; width: 8px; height: 8px; border-radius: 2px; border: 1.5px dashed var(--color-border-strong); } .cal-layer:not(.on) .cal-layer-mark { opacity: 0.35; } .cal-layer:not(.on) { text-decoration: line-through; text-decoration-color: var(--color-text-muted); } .cal-filtered-pill { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-warning-bg, #fffbeb); color: #b45309; border: 1px solid #fcd34d; } .cal-connect-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); text-decoration: none; padding: 3px 9px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-full); } .cal-connect-link:hover { color: var(--color-primary); border-color: var(--color-primary); } /* Diary lane — pinned above the posts drop zone, visually recessed */ .cal-diary-lane { display: flex; flex-direction: column; gap: 1px; margin: 1px 4px 2px; } .cal-event { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 0.66rem; line-height: 1.5; color: var(--color-text-muted); cursor: pointer; border-radius: 4px; padding: 0 3px; } .cal-event:hover { background: var(--color-surface-muted); color: var(--color-text-secondary); } .cal-event-mark { color: var(--color-secondary); font-size: 0.62rem; flex-shrink: 0; } .cal-event-time { font-weight: 600; flex-shrink: 0; } .cal-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-event-more .cal-event-title { font-style: italic; } /* Event peek dialog */ .cal-peek { max-width: 460px; width: min(460px, calc(100vw - 32px)); } .cal-peek-list { display: flex; flex-direction: column; gap: 12px; max-height: 55vh; overflow-y: auto; margin: 10px 0 4px; } .cal-peek-event { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); } .cal-peek-when { flex-shrink: 0; width: 76px; font-size: 0.72rem; font-weight: 600; color: var(--color-text-secondary); display: flex; flex-direction: column; } .cal-peek-until { font-weight: 400; color: var(--color-text-muted); } .cal-peek-main { flex: 1; min-width: 0; } .cal-peek-title { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--color-text); } .cal-peek-loc { margin: 2px 0 0; font-size: 0.72rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 3px; } .cal-peek-desc { margin: 4px 0 0; font-size: 0.74rem; color: var(--color-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cal-peek-linked { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .cal-peek-linked-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: 0.68rem; font-weight: 600; color: var(--color-text-secondary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 2px 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-peek-linked-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .cal-peek-draft { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-bg, #eef2ff); border: 1px solid transparent; border-radius: var(--radius-full); padding: 5px 11px; cursor: pointer; } .cal-peek-draft:hover { border-color: var(--color-primary); } /* Drafts: strip → grouped cards */ .cal-drafts-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: 0.66rem; font-weight: 700; } .cal-draft-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 12px; } .cal-draft-card { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; min-width: 0; transition: border-color 0.12s, box-shadow 0.12s; } .cal-draft-card:hover { border-color: var(--color-primary); box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .cal-draft-card-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface-muted); } .cal-draft-card-thumb.ph { display: flex; align-items: center; justify-content: center; } .cal-draft-card-body { flex: 1; min-width: 0; } .cal-draft-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; } .cal-draft-ai { font-size: 0.64rem; font-weight: 700; color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 10%, transparent); border-radius: var(--radius-full); padding: 1px 7px; } .cal-draft-event { font-size: 0.64rem; font-weight: 600; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 1px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .cal-draft-event.removed { text-decoration: line-through; opacity: 0.75; } .cal-draft-card-text { margin: 0; font-size: 0.76rem; color: var(--color-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cal-draft-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .cal-draft-card-age { font-size: 0.66rem; color: var(--color-text-muted); } .cal-draft-card .cal-draft-delete { position: absolute; top: 6px; right: 6px; } /* Composer provenance banner */ .composer-event-banner { display: flex; align-items: center; gap: 7px; padding: 8px 12px; margin-bottom: 10px; background: color-mix(in srgb, var(--color-secondary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-secondary) 25%, transparent); border-radius: var(--radius-lg); font-size: 0.76rem; color: var(--color-text-secondary); } .composer-event-banner strong { color: var(--color-text); font-weight: 600; } .composer-event-banner.removed { border-style: dashed; } .composer-event-banner.removed em { color: var(--color-error, #dc2626); font-style: normal; } @media (max-width: 720px) { .cal-toolbar-right { width: 100%; justify-content: space-between; } .cal-draft-cards { grid-template-columns: 1fr; } .cal-peek-when { width: 60px; } } /* ── Event peek: notes + media (phase 2) ─────────────────────────────────── */ .cal-peek-notes { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; } .cal-peek-note { padding: 6px 9px; border-radius: 8px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.73rem; line-height: 1.45; } .cal-peek-note-meta { display: block; font-size: 0.66rem; color: var(--color-text-muted); margin-bottom: 1px; } .cal-peek-note-meta strong { color: var(--color-text-secondary); font-weight: 600; } .cal-peek-note-body { color: var(--color-text); white-space: pre-wrap; } .cal-peek-note-add { display: flex; gap: 5px; margin-top: 7px; } .cal-peek-note-add input { flex: 1; min-width: 0; padding: 6px 9px; font-size: 0.74rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); } .cal-peek-note-add input:focus { outline: none; border-color: var(--color-primary); } .cal-peek-note-add button { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; cursor: pointer; } .cal-peek-note-add button:disabled { opacity: 0.4; cursor: default; } .cal-peek-media { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .cal-peek-media-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); } .cal-peek-media-thumb.ph { display: flex; align-items: center; justify-content: center; } .cal-peek-media-more { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); } .cal-peek-media-actions { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; } .cal-peek-upload { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.72rem; font-weight: 600; color: var(--color-primary); padding: 4px 10px; border: 1px dashed var(--color-primary); border-radius: var(--radius-full); } .cal-peek-upload input[type="file"] { display: none; } .cal-peek-upload.busy { opacity: 0.65; cursor: progress; } .cal-peek-folder-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted); text-decoration: none; } .cal-peek-folder-link:hover { color: var(--color-primary); } /* Composer: from-event-folder picker */ .composer-attach-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .composer-folder-btn.on { border-color: var(--color-primary); color: var(--color-primary); } .composer-folder { margin-top: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); } .composer-folder-empty { margin: 0; font-size: 0.74rem; color: var(--color-text-muted); } .composer-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; } .composer-folder-item { position: relative; display: flex; flex-direction: column; gap: 3px; cursor: pointer; border-radius: var(--radius-sm); min-width: 0; } .composer-folder-item img, .composer-folder-ph { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); } .composer-folder-ph { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); } .composer-folder-item:hover img, .composer-folder-item:hover .composer-folder-ph { border-color: var(--color-primary); } .composer-folder-item.busy { opacity: 0.6; } .composer-folder-name { font-size: 0.62rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Settings: media library grant instructions */ .settings-grant-cmd { margin: 5px 0 0; padding: 8px 10px; border-radius: 8px; overflow-x: auto; background: #0f172a; color: #e2e8f0; font-size: 0.68rem; line-height: 1.6; font-family: ui-monospace, Consolas, monospace; white-space: pre; } /* Settings: copyable grant values */ .settings-copy-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; min-width: 0; } .settings-copy-value { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 5px 9px; border-radius: 6px; font-size: 0.68rem; background: var(--color-surface-muted); border: 1px solid var(--color-border); color: var(--color-text-secondary); } .settings-copy-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text-secondary); font-size: 0.7rem; font-weight: 600; cursor: pointer; } .settings-copy-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .settings-copy-btn.wide { padding: 6px 12px; border-radius: var(--radius-full); } /* Event peek: AI draft + manual compose actions */ .cal-peek-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; } .cal-peek-compose { border: none; background: none; cursor: pointer; padding: 2px; font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted); text-decoration: underline; } .cal-peek-compose:hover { color: var(--color-primary); } .cal-peek-draft:disabled { opacity: 0.6; cursor: progress; } /* Settings: media library setup choice (OneDrive quick vs SharePoint office-owned) */ .settings-med-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .settings-med-option p { font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.5; margin: 7px 0 0; } .settings-med-option .tt-connect-btn { width: 100%; justify-content: center; } @media (max-width: 720px) { .settings-med-options { grid-template-columns: 1fr; } } /* Settings: section divider between social platforms and integrations */ .settings-section-divider { margin: 28px 0 14px; padding-top: 18px; border-top: 1px solid var(--color-border); } .settings-section-title { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.05em; } .settings-section-sub { margin: 3px 0 0; font-size: 0.74rem; color: var(--color-text-muted); } /* Drafts toolbar + sort control */ .cal-drafts-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .cal-drafts-heading { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; } .cal-drafts-sort { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 600; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 3px 10px; } .cal-drafts-sort select { border: none; background: none; color: var(--color-text); font-size: 0.72rem; font-weight: 600; cursor: pointer; outline: none; } /* AI quick draft: ghost header button + dialog */ .composer-new-btn.ghost { background: var(--color-surface); color: var(--color-secondary); border: 1px solid var(--color-border-strong); } .composer-new-btn.ghost:hover { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 6%, transparent); } .cal-quick { max-width: 520px; width: min(520px, calc(100vw - 32px)); } /* Composer: tag accounts chip input */ .composer-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); min-height: 38px; } .composer-tag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px 2px 9px; border-radius: var(--radius-full); background: var(--color-primary-bg, #eef2ff); color: var(--color-primary); font-size: 0.74rem; font-weight: 600; } .composer-tag-chip button { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-primary); cursor: pointer; padding: 1px; border-radius: 50%; } .composer-tag-chip button:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); } .composer-tag-input { flex: 1; min-width: 120px; border: none; outline: none; background: none; font-size: 0.82rem; color: var(--color-text); } .composer-tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .composer-tag-suggest-btn { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-full); background: none; padding: 2px 9px; cursor: pointer; } .composer-tag-suggest-btn:hover { color: var(--color-primary); border-color: var(--color-primary); } /* Event peek: no-library media hint */ .cal-peek-nolib { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; font-size: 0.7rem; color: var(--color-text-muted); } .cal-peek-nolib a { color: var(--color-primary); text-decoration: none; font-weight: 600; } /* Contextual help: a "?" button in a page header opening the article in a slide-over */ .help-hint-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: color 0.12s, border-color 0.12s; } .help-hint-btn:hover { color: var(--color-primary); border-color: var(--color-primary); } .help-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 1400; animation: composer-fade 0.15s ease; } .help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--color-surface); z-index: 1401; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(15,23,42,0.18); animation: composer-slide 0.22s cubic-bezier(0.16,1,0.3,1); } .help-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .help-drawer-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .help-drawer-body { flex: 1; overflow-y: auto; padding: 6px 20px 20px; } /* Tighten the article's own H1 inside the compact drawer. */ .help-drawer-body.help-content h1 { font-size: 1.25rem; margin-top: 12px; } .help-drawer-foot { flex-shrink: 0; padding: 12px 20px; border-top: 1px solid var(--color-border); font-size: 0.8rem; } .help-drawer-foot a { color: var(--color-primary); text-decoration: none; font-weight: 600; } @media (max-width: 720px) { .help-drawer { width: 100vw; } } /* ── Drafts triage: filter chips, status pills, richer cards ─────────────── */ .cal-draft-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .cal-draft-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.74rem; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; } .cal-draft-filter:hover { border-color: var(--color-border-strong); } .cal-draft-filter-n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 0.64rem; font-weight: 700; } .cal-draft-filter.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .cal-draft-filter.on .cal-draft-filter-n { background: rgba(255,255,255,0.25); color: #fff; } .cal-draft-filter.needs-media.on { background: #b45309; border-color: #b45309; } .cal-draft-filter.attention.on { background: var(--color-error, #dc2626); border-color: var(--color-error, #dc2626); } .cal-drafts-empty { font-size: 0.8rem; color: var(--color-text-muted); padding: 14px 4px; } .cal-link-btn { border: none; background: none; color: var(--color-primary); font-weight: 600; cursor: pointer; padding: 0; font-size: inherit; } /* Status pill on a draft card */ .cal-draft-pill { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--radius-full); } .cal-draft-pill.ready { background: var(--color-success-bg, #ecfdf5); color: #047857; } .cal-draft-pill.needs-media { background: #fffbeb; color: #b45309; } .cal-draft-pill.passed { background: var(--color-surface-muted); color: var(--color-text-muted); } .cal-draft-pill.cancelled { background: #fef2f2; color: #b91c1c; } /* Event line on a draft card */ .cal-draft-card-event { display: flex; align-items: center; gap: 4px; margin: 3px 0 0; font-size: 0.68rem; color: var(--color-text-secondary); min-width: 0; } .cal-draft-card-event .mud-icon-root { color: var(--color-secondary); } .cal-draft-card-event-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-draft-card-event-when { color: var(--color-text-muted); flex-shrink: 0; } .cal-draft-card-event.removed { text-decoration: line-through; opacity: 0.7; } .cal-draft-addmedia { display: inline-flex; align-items: center; gap: 3px; border: 1px solid #f59e0b; background: #fffbeb; color: #b45309; border-radius: var(--radius-full); padding: 1px 8px; font-size: 0.66rem; font-weight: 600; cursor: pointer; } .cal-draft-addmedia:hover { background: #fef3c7; } .cal-draft-card-meta { flex-wrap: wrap; } /* ── Event peek: roomier, vertical layout, full-width action footer ──────── */ .cal-peek { max-width: 540px; width: min(540px, calc(100vw - 24px)); } .cal-peek-list { gap: 14px; } .cal-peek-event { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); } .cal-peek-head { display: flex; align-items: baseline; gap: 10px; } .cal-peek-time { flex-shrink: 0; font-size: 0.76rem; font-weight: 700; color: var(--color-primary); min-width: 62px; } .cal-peek-titlewrap { flex: 1; min-width: 0; } .cal-peek-title { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--color-text); line-height: 1.3; } .cal-peek-loc { margin: 3px 0 0; } .cal-peek-main { display: flex; flex-direction: column; gap: 9px; } .cal-peek-main:empty { display: none; } .cal-peek-desc { margin: 0; } .cal-peek-notes { margin-top: 0; } .cal-peek-media { margin-top: 0; } /* actions become a full-width footer row instead of a cramped side column */ .cal-peek-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--color-border); } .cal-peek-draft { padding: 6px 14px; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .cal-draft-cards { grid-template-columns: 1fr; } .cal-draft-filters { gap: 5px; } .cal-peek, .cal-quick { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 14px 14px 0 0; } .cal-peek-head { flex-direction: column; gap: 2px; } .cal-peek-time { min-width: 0; } .cal-peek-list { max-height: 70vh; } /* Dialogs sit at the bottom like a sheet, easier to reach on a phone. */ .team-dialog-backdrop { align-items: flex-end; } .composer-panel { width: 100vw; } .cal-toolbar { flex-wrap: wrap; gap: 8px; } .cal-toolbar-right { width: 100%; justify-content: space-between; } .cal-layers { width: 100%; } } /* ─── Ask Clarify (/ask) ─────────────────────────────────────────────────── */ .ask-box { display: flex; align-items: center; gap: 10px; } .ask-input { flex: 1; min-width: 0; border: 1px solid var(--border, #e2e8f0); border-radius: 9999px; padding: 10px 16px; font-size: 0.9rem; color: #1e293b; font-family: inherit; background: #fff; } .ask-input:focus { outline: none; border-color: #6366f1; } .ask-input:disabled { background: #f8fafc; color: #94a3b8; } .ask-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ask-chip { border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 0.78rem; font-weight: 500; padding: 5px 12px; border-radius: 9999px; cursor: pointer; text-align: left; } .ask-chip:hover { border-color: #6366f1; color: #4f46e5; } .ask-working { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #64748b; } .ask-answer-para { font-size: 0.9rem; color: #1e293b; line-height: 1.6; margin: 0 0 10px; } .ask-meta { font-size: 0.75rem; color: #94a3b8; margin: 2px 0 0; } .ask-refine { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .ask-cite { padding: 11px 0; border-top: 1px solid #f1f5f9; } .ask-cite:first-of-type { border-top: none; padding-top: 2px; } .ask-cite-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ask-cite-author { font-size: 0.82rem; font-weight: 600; color: #334155; } .ask-cite-time { font-size: 0.74rem; color: #94a3b8; } .ask-cite-link { font-size: 0.74rem; font-weight: 600; color: #6366f1; text-decoration: none; margin-left: auto; } .ask-cite-link:hover { text-decoration: underline; } .ask-cite-body { font-size: 0.85rem; color: #475569; line-height: 1.5; margin: 5px 0 0; } .ask-cite-foot { font-size: 0.75rem; color: #94a3b8; margin: 5px 0 0; } .ask-topics { display: flex; flex-wrap: wrap; gap: 8px; } .ask-topic { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2e8f0; background: #fff; border-radius: 9999px; padding: 6px 13px; cursor: pointer; } .ask-topic:hover { border-color: #6366f1; } .ask-topic-name { font-size: 0.82rem; font-weight: 600; color: #334155; } .ask-topic-count { font-size: 0.72rem; font-weight: 700; color: #4f46e5; background: #eef2ff; border-radius: 9999px; padding: 1px 7px; } @media (max-width: 640px) { .ask-box { flex-wrap: wrap; } .ask-cite-link { margin-left: 0; } }