/* ========================================================================== Mentions UI – THEME-AWARE Drop-in replacement for mentions.css Add a wrapper class: .theme-default, .theme-light, .theme-ocean, .theme-dark ========================================================================== */ /* ------------------------------ Base (theme-agnostic) tokens These default to your existing app vars when present. ------------------------------ */ :root { /* New, namespaced tokens (safe to search/override) */ --mentions_bg: var(--bg-forminput, #ffffff); --mentions_text: var(--text-color, #111827); --mentions_placeholder: var(--placeholder-color, #9ba3af); --mentions_border: var(--border-color, #d0d7de); --mentions_focus: var(--accent-color, #2684ff); /* focus ring + border on focus */ --mentions_accent: var(--accent-color, #2563eb); /* base accent for links/mentions */ --mentions_chip_text: var(--mentions_accent); --mentions_chip_bg: rgba(37, 99, 235, 0.10); /* fallback if theme doesn't override */ --mentions_menu_bg: var(--containerbackground, #ffffff); --mentions_menu_shadow: 0 12px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08); --mentions_menu_hover_bg: #d0d7de; --mentions_link_color: var(--mentions_accent); --mentions_link_bg: rgba(37, 99, 235, 0.10); } /* ========================================= THEME OVERRIDES (apply on a wrapper like ) ========================================= */ /* Default (light) — alias to Light */ .theme-default, .theme-light { --mentions_bg: var(--bg-forminput, #ffffff); --mentions_text: var(--text-color, #111); --mentions_placeholder: var(--placeholder-color, #777); --mentions_border: var(--border-color, #ddd); --mentions_focus: var(--accent-color, #667eea); --mentions_accent: var(--accent-color, #667eea); --mentions_chip_text: var(--mentions_accent); --mentions_chip_bg: rgba(102, 126, 234, 0.15); /* #667eea @ 15% */ --mentions_menu_bg: var(--containerbackground, #fff); --mentions_menu_shadow: 0 12px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08); --mentions_menu_hover_bg:#f1f5f9; --mentions_link_color: var(--mentions_accent); --mentions_link_bg: rgba(102, 126, 234, 0.15); } /* Ocean — darker surface with ocean accent */ .theme-ocean { /* If your global theme sets bg image/overlay, we just adapt the component colors */ --mentions_bg: rgba(15, 23, 42, 0.9); /* slate-900 with slight translucency */ --mentions_text: #e5e7eb; /* slate-200 */ --mentions_placeholder: #94a3b8; /* slate-400 */ --mentions_border: rgba(148,163,184,0.25); --mentions_focus: #38bdf8; /* sky-400 */ --mentions_accent: #38bdf8; /* ocean/sky */ --mentions_chip_text: var(--mentions_accent); --mentions_chip_bg: rgba(56, 189, 248, 0.18); --mentions_menu_bg: rgba(2, 6, 23, 0.92); /* near-black with translucency */ --mentions_menu_shadow: 0 12px 28px rgba(2,6,23,.45), 0 2px 6px rgba(2,6,23,.35); --mentions_menu_hover_bg:rgba(148,163,184,0.12); --mentions_link_color: var(--mentions_accent); --mentions_link_bg: rgba(56, 189, 248, 0.18); } /* Dark — high-contrast dark mode */ .theme-dark { --mentions_bg: #0f172a; /* slate-900 */ --mentions_text: #e5e7eb; /* slate-200 */ --mentions_placeholder: #94a3b8; /* slate-400 */ --mentions_border: rgba(148,163,184,0.25); --mentions_focus: #60a5fa; /* blue-400 */ --mentions_accent: #60a5fa; --mentions_chip_text: var(--mentions_accent); --mentions_chip_bg: rgba(96, 165, 250, 0.18); --mentions_menu_bg: #0b1220; --mentions_menu_shadow: 0 12px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45); --mentions_menu_hover_bg:rgba(148,163,184,0.12); --mentions_link_color: var(--mentions_accent); --mentions_link_bg: rgba(96, 165, 250, 0.18); } .theme-deeppurple { --mentions_bg: #1a1a2e; /* slate-900 */ --mentions_text: #e5e7eb; /* slate-200 */ --mentions_placeholder: #94a3b8; /* slate-400 */ --mentions_border: rgba(148,163,184,0.25); --mentions_focus: #60a5fa; /* blue-400 */ --mentions_accent: #60a5fa; --mentions_chip_text: var(--mentions_accent); --mentions_chip_bg: rgba(96, 165, 250, 0.18); --mentions_menu_bg: #0b1220; --mentions_menu_shadow: 0 12px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45); --mentions_menu_hover_bg:rgba(148,163,184,0.12); --mentions_link_color: var(--mentions_accent); --mentions_link_bg: rgba(96, 165, 250, 0.18); } /* ========================================= COMPONENTS (use the tokens above) ========================================= */ .chat-input-wrap { position: relative; width: 100%; /* max-width: 760px; */ margin: 16px 0; overflow: visible !important; } /* Editor styled like a textarea */ .chat-input { min-height: 48px; max-height: 240px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--mentions_border); border-radius: 10px; background: var(--mentions_bg); color: var(--mentions_text); line-height: 1.45; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; white-space: pre-wrap; word-break: break-word; } .chat-input:focus { outline: 2px solid color-mix(in srgb, var(--mentions_focus), transparent 85%); border-color: var(--mentions_focus); } /* Placeholder */ .chat-input:empty:before { content: attr(data-placeholder); color: var(--mentions_placeholder); pointer-events: none; } /* Mention chip (inline) */ .mention { color: var(--mentions_chip_text); background: var(--mentions_chip_bg); padding: 0 2px; border-radius: 4px; } /* Floating mention menu */ .mention-menu { position: fixed; z-index: 100000; min-width: 220px; max-width: 320px; max-height: 240px; overflow-y: auto; background: var(--mentions_menu_bg); border: 1px solid var(--mentions_border); border-radius: 10px; box-shadow: var(--mentions_menu_shadow); padding: 6px; color: var(--mentions_text); inset: auto auto auto auto; /* reset */ scroll-behavior: smooth; } .mention-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px;; } .mention-item:hover, .mention-item[aria-selected="true"] { background: var(--mentions_menu_hover_bg); } .mention-id { color: color-mix(in srgb, var(--mentions_text), transparent 45%); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-left: 6px; } /* Demo buttons / cards (optional; can remove if you don't use the demo UI) */ .actions { display: flex; gap: 8px; margin: 8px 0 16px; } button { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--mentions_border); background: var(--mentions_bg); color: var(--mentions_text); cursor: pointer; } button:hover { background: var(--mentions_menu_hover_bg); } pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .preview { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; max-width: 760px; } .card { border: 1px solid var(--mentions_border); border-radius: 10px; padding: 12px; background: var(--mentions_bg); color: var(--mentions_text); } .card h3 { margin: 0 0 8px; font-size: 14px; color: var(--mentions_text); } /* Style agent links in rendered markdown to look like mentions */ .message-body a[href^="/agents/"] { color: var(--mentions_link_color); background: var(--mentions_link_bg); padding: 0 2px; border-radius: 4px; text-decoration: none; } .message-body a[href^="/agents/"]:hover { text-decoration: underline; } /* Fallback if color-mix is unsupported (older browsers) */ @supports not (color: color-mix(in srgb, #000, #fff)) { .chat-input:focus { outline-color: rgba(38, 132, 255, .22); } .mention-id { color: #94a3b8; } }