emitted by ExplorerPanel
between two non-empty sections; theme-aware border token so it adapts to dark
mode. Vertical margin gives the sections breathing room without item padding. */
.arco-dropdown-menu.explorer-context-menu .explorer-context-menu-divider {
height: 1px;
margin: 4px 8px;
background-color: var(--color-border-2);
}
/* Provider group titles pin to the top of the inner scroll container. It has no
* top padding, so top:0 hugs the edge with no gap for items to peek through.
* Only relevant for the grouped (aionrs) list; harmless for flat lists. */
.dropdown-search-scroll .arco-dropdown-menu-group-title {
position: sticky;
top: 0;
z-index: 2;
margin-top: 0;
padding-top: 6px;
padding-bottom: 2px;
background-color: var(--color-bg-popup);
}
/* Letopis palette: Arco primary ramp (RGB triplets), light mode only */
body:not([arco-theme='dark']) {
--primary-1: 255 244 236;
--primary-2: 253 235 226;
--primary-3: 251 217 199;
--primary-4: 248 191 160;
--primary-5: 245 154 108;
--primary-6: 255 98 27;
--primary-7: 230 83 18;
--primary-8: 184 65 15;
--link-6: 255 98 27;
}
/* Theme System Entry Point */
/* Base styles (theme-independent) */
/* Base styles - theme-independent */
:root {
--app-min-width: 360px;
--titlebar-height: 36px;
}
.app-shell {
min-height: 0;
}
html,
body,
#root,
.layout,
.layout-content {
min-width: var(--app-min-width); /* prevent layout collapse on very small screens */
}
/*
* icon-park 图标修正：其外层 `span.i-icon` 默认为 inline，SVG 按文字基线排布、
* 底部留基线间隙，导致图标视觉整体偏上（尤其在 flex 容器里与文字/其它元素并排时）。
* 统一改为居中的 inline-flex，让图标真正垂直居中，不再上飘。全局一处修，治本。
*/
.i-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.loading {
animation: loading 1s linear infinite;
}
.bg-animate {
animation: bg-animate 1s alternate infinite;
}
/* Mobile base: prevent text size adjustment */
@media (max-width: 767px) {
html {
-webkit-text-size-adjust: 100%;
}
}
@keyframes bg-animate {
0% {
background-color: var(--bg-2);
}
100% {
background-color: var(--bg-3);
}
}
@keyframes team-tab-breathe {
0%,
100% {
opacity: 1;
background-color: transparent;
box-shadow: none;
}
50% {
opacity: 0.85;
background-color: color-mix(in srgb, var(--color-primary-6) 18%, transparent);
box-shadow:
0 0 8px 2px color-mix(in srgb, var(--color-primary-6) 30%, transparent),
inset 0 0 6px 0 color-mix(in srgb, var(--color-primary-6) 15%, transparent);
}
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 团队 warmup 进度条：无确定进度时来回扫动 */
@keyframes team-warmup-sweep {
0% {
width: 20%;
margin-inline-start: 0;
}
50% {
width: 60%;
margin-inline-start: 40%;
}
100% {
width: 20%;
margin-inline-start: 0;
}
}
.team-warmup-sweep {
animation: team-warmup-sweep 1.4s ease-in-out infinite;
}
/* 团队 warmup 头像「唤醒中」：pending 成员轻柔呼吸 */
@keyframes team-warmup-breathe {
0%,
100% {
opacity: 0.55;
}
50% {
opacity: 0.9;
}
}
.team-warmup-breathe {
animation: team-warmup-breathe 1.6s ease-in-out infinite;
}
.collapsed {
.collapsed-hidden {
display: none;
}
.\!collapsed-hidden {
display: none !important;
}
}
/* Safe area utilities for mobile devices */
/* iOS 17+ Chrome, Safari need env() in CSS, not inline styles */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.safe-area-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-area-top {
padding-top: env(safe-area-inset-top, 0px);
}
}
/* Custom scrollbar styles */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px;
transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Hide scrollbar while keeping scroll behavior */
.scrollbar-hide {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
*:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
}
[data-theme='dark'] *:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
}
/* Color Schemes */
/* Default Color Scheme - Letopis (peach/orange) Theme */
/* Light Mode */
:root,
[data-color-scheme='default'] {
/* AOU Brand Colors - Light Mode */
--aou-1: #fff4ec;
--aou-2: #fdebe2;
--aou-3: #fbd9c7;
--aou-4: #f8bfa0;
--aou-5: #f59a6c;
--aou-6: #ff621b;
--aou-7: #e65312;
--aou-8: #b8410f;
--aou-9: #7a2b0a;
--aou-10: #3a1505;
/* Background Colors - Light Mode */
--bg-base: #ffffff; /* bg-0 - 主背景 */
--bg-1: #fefaf7; /* 次级背景 */
--bg-2: #fdf3ea; /* 三级背景 */
--bg-3: #eee2d5; /* 边框/分隔 */
--bg-4: #dfd0c1;
--bg-5: #b9aaa0;
--bg-6: #94867b; /* 禁用/次要文字 */
--bg-8: #625851;
--bg-9: #26211f;
--bg-10: #1a1512;
/* Interactive State Colors - Light Mode */
--bg-hover: #fbeadf; /* 悬停背景 - 在 bg-1 和 bg-2 之间 */
--bg-active: #f6e9dc; /* 激活/按下背景 */
/* Text Colors - Light Mode */
--text-primary: #26211f; /* 主要文字 */
--color-text-1: #26211f; /* Arco 主文字 — 与 --text-primary 对齐 */
--text-secondary: #625851; /* 次要文字 — 加深至 ~7.5:1 对比度 */
--text-disabled: #b9aaa0; /* 禁用文字 */
/* Semantic Colors - Light Mode */
--primary: #ff621b;
--success: #178a6a;
--warning: #d98200;
--danger: #b9382b;
--info: #ff621b;
/* Border Colors - Light Mode */
--border-base: #eee2d5; /* 基础边框 */
--border-light: #f6ede4; /* 浅色边框 */
/* Brand Colors - Light Mode */
--brand: #ff621b; /* 品牌色 */
--brand-light: #fdebe2; /* 品牌浅色背景 */
--brand-hover: #e65312; /* 品牌色悬停 */
/* Message & UI Component Colors - Light Mode */
--message-user-bg: #fdebe2; /* 用户消息背景（浅蓝） */
--message-tips-bg: #fff0df; /* 提示信息背景（浅蓝） */
--workspace-btn-bg: #f6e9dc; /* 工作区按钮背景 */
--thought-gradient: linear-gradient(90deg, #fff0df 0%, #fefaf7 100%); /* 思考面板背景渐变 */
/* Special Colors - Light Mode */
--fill: #fdf8f4; /* 填充色 */
--inverse: #ffffff; /* 反色（黑白切换）*/
/* Custom Colors - Light Mode */
--dialog-fill-0: #ffffff; /* 对话框填充色 */
--text-0: #26211f; /* 纯黑文字色 */
--text-white: #ffffff; /* 纯白文字色 */
--fill-0: #ffffff; /* 填充色 0 */
--fill-white-to-black: #ffffff; /* 白到黑填充色 */
--border-special: var(--bg-3); /* 特殊边框色 */
--color-guid-agent-bar: #fdebe2; /* 首页 Agent 选择条背景 - 亮色 */
}
/* Dark Mode */
[data-color-scheme='default'][data-theme='dark'] {
/* AOU Brand Colors - Dark Mode */
--aou-1: #2a2a2a;
--aou-2: #3d4150;
--color-guid-agent-bar: var(--aou-2); /* 首页 Agent 选择条背景 - 暗色沿用 aou-2 */
--aou-3: #525a77;
--aou-4: #6a749b;
--aou-5: #838fba;
--aou-6: #a1aacb;
--aou-7: #b5bcd6;
--aou-8: #d1d5e5;
--aou-9: #e5e7f0;
--aou-10: #eff0f6;
/* Background Colors - Dark Mode */
--bg-base: #0e0e0e; /* 主背景 */
--bg-1: #1a1a1a; /* 次级背景 */
--bg-2: #262626; /* 三级背景 */
--bg-3: #333333; /* 边框/分隔 */
--bg-4: #404040;
--bg-5: #4d4d4d;
--bg-6: #5a5a5a; /* 禁用/次要文字 */
--bg-8: #737373;
--bg-9: #a6a6a6;
--bg-10: #d9d9d9;
/* Interactive State Colors - Dark Mode */
--bg-hover: #1f1f1f; /* 悬停背景 */
--bg-active: #2d2d2d; /* 激活/按下背景 */
/* Text Colors - Dark Mode */
--text-primary: #ffffff; /* 主要文字 */
--color-text-1: #ffffff; /* Arco 主文字 — 与 --text-primary 对齐 */
--text-secondary: #ced3da; /* 次要文字 — 提亮至 ~11:1 对比度 */
--text-disabled: #737373; /* 禁用文字 */
/* Semantic Colors - Dark Mode */
--primary: #4d9fff;
--success: #23c343;
--warning: #ff9a2e;
--danger: #f76560;
--info: #4d9fff;
/* Border Colors - Dark Mode */
--border-base: #333333; /* 基础边框 */
--border-light: #262626; /* 浅色边框 */
/* Brand Colors - Dark Mode */
--brand: #a1aacb; /* 品牌色 */
--brand-light: #3d4150; /* 品牌深色背景 */
--brand-hover: #6a749b; /* 品牌色悬停 */
/* Message & UI Component Colors - Dark Mode */
--message-user-bg: #1e2a3a; /* 用户消息背景（深蓝灰） */
--message-tips-bg: #1a2333; /* 提示信息背景（深蓝灰） */
--workspace-btn-bg: #1f1f1f; /* 工作区按钮背景 */
--thought-gradient: linear-gradient(135deg, #464767 0%, #323232 100%); /* 思考面板背景渐变 */
/* Special Colors - Dark Mode */
--fill: #1a1a1a; /* 填充色 */
--inverse: #ffffff; /* 反色（黑白切换）*/
/* Custom Colors - Dark Mode */
--dialog-fill-0: #333333; /* 对话框填充色 */
--text-0: #ffffff; /* 纯黑文字色（暗色模式下为白色） */
--text-white: #ffffff; /* 纯白文字色 */
--fill-0: rgba(255, 255, 255, 0.08); /* 填充色 0 - 暗色模式下为半透明白色 */
--fill-white-to-black: #000000; /* 白到黑填充色（暗色模式下为黑色） */
--border-special: #60677e; /* 特殊边框色 */
}
/**
* Shared markdown content styles.
* Scoped under `.aionui-markdown`. Colors/fonts use semantic CSS variables only,
* so light/dark and any future color scheme adapt automatically (no hardcoded colors).
* Content mirrors the chat-side ShadowView markdown styles for visual consistency.
*/
.aionui-markdown {
color: var(--text-primary);
/* Markdown-region font; inherits the app/global font until a Markdown font is chosen. */
font-family: var(--md-font-family, inherit);
/* Markdown-region weight; inherits the surrounding weight until one is chosen. */
font-weight: var(--md-font-weight, inherit);
/* Comfortable reading size for the rendered preview (source editor is 13px mono). */
font-size: var(--md-font-size, 15px);
line-height: 1.7;
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
.aionui-markdown :where(p) {
margin-block-start: 16px;
margin-block-end: 16px;
}
.aionui-markdown > :where(p):first-child {
margin-top: 0;
}
.aionui-markdown > :where(p):last-child {
margin-bottom: 0;
}
.aionui-markdown :where(h1, h2, h3, h4, h5, h6) {
font-weight: bold;
color: var(--text-primary);
}
.aionui-markdown :where(h1) {
font-size: 24px;
line-height: 32px;
margin-top: 24px;
margin-bottom: 16px;
}
.aionui-markdown :where(h2, h3, h4, h5, h6) {
font-size: 16px;
line-height: 24px;
margin-top: 20px;
margin-bottom: 12px;
}
.aionui-markdown :where(a) {
color: var(--primary);
text-decoration: none;
cursor: pointer;
word-break: break-all;
overflow-wrap: anywhere;
}
.aionui-markdown :where(a):hover {
text-decoration: underline;
}
.aionui-markdown :where(strong) {
font-weight: 600;
color: var(--text-primary);
}
.aionui-markdown :where(ol, ul) {
padding-inline-start: 24px;
}
.aionui-markdown :where(li) {
margin-block-start: 6px;
margin-block-end: 6px;
}
.aionui-markdown :where(hr) {
border: none;
border-top: 1px solid var(--bg-3);
margin: 28px 0;
}
.aionui-markdown :where(blockquote) {
border-inline-start: 3px solid var(--bg-3);
padding-inline-start: 12px;
color: var(--text-primary);
margin: 16px 0;
}
/* Inline code (not inside a highlighted code block) */
.aionui-markdown :where(code):not(:where(pre code)) {
background: var(--bg-3);
color: var(--text-primary);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.875em;
font-family: var(--font-mono);
font-weight: var(--font-mono-weight);
word-break: break-word;
overflow-wrap: anywhere;
}
/* Code blocks (Shiki output lives inside pre) */
.aionui-markdown :where(pre) {
max-width: 100%;
overflow-x: auto;
margin-block-start: 8px;
margin-block-end: 8px;
border-radius: 8px;
font-size: var(--code-font-size, 13px);
line-height: 1.5;
}
.aionui-markdown :where(pre) :where(code) {
font-family: var(--font-mono);
font-weight: var(--font-mono-weight);
}
/* Code block scrollbar — blends with surface */
.aionui-markdown :where(pre) {
scrollbar-width: thin;
}
.aionui-markdown :where(pre)::-webkit-scrollbar {
height: 6px;
background: transparent;
}
.aionui-markdown :where(pre)::-webkit-scrollbar-thumb {
background-color: rgba(127, 127, 127, 0.35);
border-radius: 3px;
}
.aionui-markdown :where(img) {
max-width: 100%;
height: auto;
}
.aionui-markdown :where(table) {
border-collapse: collapse;
max-width: 100%;
}
.aionui-markdown :where(th) {
padding: 8px;
border: 1px solid var(--bg-3);
background-color: var(--bg-1);
font-weight: bold;
/* Without this the UA default (text-align: center) applies and the header row
is centred while every body row is start-aligned. GFM alignment markers
(:---, :---:, ---:) still win: remark-gfm emits them as an inline style,
which outranks this rule. */
text-align: start;
}
.aionui-markdown :where(td) {
padding: 8px;
border: 1px solid var(--bg-3);
min-width: 120px;
}
/* KaTeX uses its own line-height for fractions/superscripts */
.aionui-markdown :where(.katex, .katex *) {
line-height: normal;
}
.aionui-markdown :where(.katex-display) {
overflow-x: auto;
overflow-y: hidden;
padding: 0.5em 0;
}
/* Streamdown/Shiki dual-theme: Shiki puts light colors in inline color/background and
dark colors in inline custom properties (--shiki-dark / --shiki-dark-bg). Streamdown
ships no CSS and relies on Tailwind `dark:` classes (this app uses UnoCSS, so those
classes have no backing). Activate the dark palette ourselves under data-theme='dark'.
The code block
carries data-streamdown="code-block-body"; tokens are descendant spans. */
[data-theme='dark'] .aionui-markdown [data-streamdown='code-block-body'] {
/* --shiki-dark-bg lives on per-token spans, not reliably on ; fall back to an app
dark surface so the code block container is never a light box in dark mode. */
background-color: var(--shiki-dark-bg, var(--bg-2)) !important;
color: var(--shiki-dark, inherit) !important;
}
[data-theme='dark'] .aionui-markdown [data-streamdown='code-block-body'] span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
}
/* Streamdown native code block chrome. Streamdown ships no CSS and styles the header/buttons
with Tailwind classes UnoCSS does not back. Render a clean bordered block with no language
label, no download button, and a single styled copy button. Selectors use stable
data-streamdown hooks (not Tailwind class names). */
.aionui-markdown [data-streamdown='code-block'] {
margin-block: 12px;
border: 1px solid var(--bg-3);
border-radius: 8px;
overflow: hidden;
}
.aionui-markdown [data-streamdown='code-block-header'] {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 30px;
padding: 2px 6px;
background: var(--bg-2);
border-bottom: 1px solid var(--bg-3);
}
/* hide the language label (first in the header) */
.aionui-markdown [data-streamdown='code-block-header'] > span:first-child {
display: none;
}
/* hide the download button (no per-button control in this Streamdown version) */
.aionui-markdown [data-streamdown='code-block-download-button'] {
display: none;
}
/* style the copy button */
.aionui-markdown [data-streamdown='code-block-copy-button'] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
border: none;
background: transparent;
border-radius: 4px;
color: var(--text-secondary);
cursor: pointer;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.aionui-markdown [data-streamdown='code-block-copy-button']:hover {
background: var(--bg-3);
color: var(--text-primary);
}
/* code body lives inside the wrapper, which owns border/radius/margin */
.aionui-markdown [data-streamdown='code-block-body'] {
margin: 0;
border-radius: 0;
padding: 12px 16px;
}
/* Mermaid diagrams expose Streamdown's pan/zoom controls (zoom in/out, reset,
copy, download) enabled via the viewer's `controls` prop; fullscreen is off
(its Streamdown overlay ships only unbacked Tailwind classes). The block must
receive pointer events so the control buttons are clickable and the diagram
can be dragged. Wheel-zoom over a diagram is suppressed in MarkdownViewer
(capture-phase listener) so scrolling the doc scrolls the page; use the zoom
buttons to scale. */
.aionui-markdown [data-streamdown='mermaid-block'] {
pointer-events: auto;
}
/* Mermaid download dropdown (SVG / PNG / MMD). Streamdown styles the menu with
Tailwind classes (`min-w-[120px] border bg-background shadow-lg`, items
`w-full px-3 py-2`) that UnoCSS never emits — node_modules isn't scanned — so
the menu collapses to ~1ch wide and the labels wrap one character per line.
Back the box + items by class name (Streamdown is version-pinned; the menu
exposes no data-streamdown hook). */
.aionui-markdown [class~='min-w-[120px]'] {
min-width: 120px;
overflow: hidden;
border: 1px solid var(--bg-3);
border-radius: 6px;
background: var(--bg-1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.aionui-markdown [class~='min-w-[120px]'] > button {
display: block;
width: 100%;
padding: 6px 12px;
border: none;
background: transparent;
color: var(--text-primary);
text-align: start;
white-space: nowrap;
cursor: pointer;
}
.aionui-markdown [class~='min-w-[120px]'] > button:hover {
background: var(--bg-2);
}
/**
* @license
* Copyright 2025 AionUi (aionui.com)
* SPDX-License-Identifier: Apache-2.0
*/
/* 统一搜索框样式 —— 基准取自会话标题搜索面板 (ConversationTitleMinimap) */
._searchbar_b52bw_9 {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 11px;
border: 1px solid var(--color-border-2);
border-radius: 12px;
background: linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-fill-1) 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition:
border-color 0.16s ease,
background-color 0.16s ease,
box-shadow 0.16s ease;
}
._searchbar_b52bw_9:hover {
border-color: var(--color-neutral-4);
background: linear-gradient(180deg, var(--color-bg-2) 0%, var(--color-fill-2) 100%);
}
._searchbar_b52bw_9:focus-within {
border-color: rgb(var(--primary-6));
background: var(--color-bg-2);
box-shadow:
0 0 0 3px rgba(var(--primary-6), 0.1),
0 4px 12px rgba(15, 23, 42, 0.06);
}
._icon_b52bw_39 {
flex-shrink: 0;
line-height: 0;
color: var(--color-text-3);
}
._input_b52bw_45 {
flex: 1;
min-width: 0;
height: 100%;
border: none;
background: transparent;
color: var(--text-primary);
font-size: 13px;
outline: none;
}
._input_b52bw_45::placeholder {
color: var(--color-text-3);
}
._input_b52bw_45:focus,
._input_b52bw_45:focus-visible {
outline: none;
}
._clearBtn_b52bw_65 {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
border: none;
border-radius: 999px;
color: var(--text-secondary);
background: transparent;
cursor: pointer;
transition:
background-color 0.16s ease,
color 0.16s ease;
}
._clearBtn_b52bw_65:hover {
background: var(--fill-2);
color: var(--text-primary);
}
._clearBtn_b52bw_65:focus-visible {
outline: 2px solid rgba(var(--primary-6), 0.42);
outline-offset: 1px;
}
._clearBtn_b52bw_65 svg {
display: block;
}
/**
* @license
* Copyright 2025 AionUi (aionui.com)
* SPDX-License-Identifier: Apache-2.0
*/
/* 下拉列表专用搜索框 —— 样式基准取自首页 Project 选择下拉曾用的搜索框：
浅灰填充、无边框、8px 圆角，柔和紧凑。 */
._searchbar_d8uph_10 {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 8px;
background: var(--color-fill-2);
}
._icon_d8uph_20 {
flex-shrink: 0;
line-height: 0;
color: var(--color-text-3);
}
._input_d8uph_26 {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: var(--color-text-1);
font-size: 12px;
font-family: inherit;
}
._input_d8uph_26::placeholder {
color: var(--color-text-4);
}
._input_d8uph_26:focus,
._input_d8uph_26:focus-visible {
outline: none;
}
.conversation-search-modal {
--conversation-search-mask-bg: rgba(15, 23, 42, 0.1);
--conversation-search-panel-bg: rgba(255, 255, 255, 0.72);
--conversation-search-panel-inner-bg: rgba(255, 255, 255, 0.82);
--conversation-search-panel-border: rgba(229, 230, 235, 0.92);
--conversation-search-panel-shadow: 0 14px 34px rgba(29, 33, 41, 0.14);
--conversation-search-panel-outline: rgba(255, 255, 255, 0.64);
--conversation-search-surface-bg: rgba(247, 248, 250, 0.92);
--conversation-search-input-bg: rgba(255, 255, 255, 0.94);
--conversation-search-input-border: rgba(196, 201, 209, 0.78);
--conversation-search-input-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 14px rgba(15, 23, 42, 0.05);
--conversation-search-divider: rgba(229, 230, 235, 0.72);
--conversation-search-hover-bg: rgba(243, 244, 246, 0.74);
--conversation-search-highlight-fg: #2563eb;
}
.conversation-search-trigger-full {
appearance: none;
-webkit-appearance: none;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent;
}
.conversation-search-trigger-full:hover {
background: var(--color-fill-3) !important;
}
.conversation-search-trigger-full:active {
background: var(--color-fill-4) !important;
}
.conversation-search-trigger-full:focus,
.conversation-search-trigger-full:focus-visible {
border: none !important;
outline: none !important;
box-shadow: 0 0 0 2px color-mix(in srgb, rgb(var(--primary-6)) 24%, transparent) !important;
}
[data-theme='dark'] .conversation-search-modal,
body[arco-theme='dark'] .conversation-search-modal {
--conversation-search-mask-bg: color-mix(in srgb, var(--color-bg-5) 58%, transparent);
--conversation-search-panel-bg: color-mix(in srgb, var(--color-bg-2) 76%, transparent);
--conversation-search-panel-inner-bg: color-mix(in srgb, var(--color-bg-3) 82%, transparent);
--conversation-search-panel-border: var(--color-border-2);
--conversation-search-panel-shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
--conversation-search-panel-outline: color-mix(in srgb, var(--color-border-3) 56%, transparent);
--conversation-search-surface-bg: color-mix(in srgb, var(--color-fill-2) 88%, transparent);
--conversation-search-input-bg: color-mix(in srgb, var(--color-fill-2) 92%, transparent);
--conversation-search-input-border: var(--color-border-2);
--conversation-search-input-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.18);
--conversation-search-divider: var(--color-border-2);
--conversation-search-hover-bg: var(--color-fill-2);
--conversation-search-highlight-fg: #93c5fd;
}
.conversation-search-modal.aionui-modal .arco-modal,
.conversation-search-modal.aionui-modal .arco-modal-content,
.conversation-search-modal.aionui-modal .arco-modal-header,
.conversation-search-modal.aionui-modal .arco-modal-body,
.conversation-search-modal.aionui-modal .arco-modal-footer,
.conversation-search-modal .aionui-modal-wrapper,
.conversation-search-modal .aionui-modal-body-content {
background: transparent !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.conversation-search-modal.aionui-modal .arco-modal-content,
.conversation-search-modal .arco-modal-content {
position: relative;
background: var(--conversation-search-panel-bg) !important;
border: 1px solid var(--conversation-search-panel-border) !important;
border-radius: 24px !important;
box-shadow: var(--conversation-search-panel-shadow) !important;
outline: 1px solid var(--conversation-search-panel-outline);
outline-offset: -1px;
backdrop-filter: blur(10px) saturate(115%);
-webkit-backdrop-filter: blur(10px) saturate(115%);
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.conversation-search-modal .aionui-modal-body-content {
padding: 0 !important;
}
.conversation-search-modal__panel {
background: var(--conversation-search-panel-inner-bg) !important;
backdrop-filter: blur(2px) saturate(106%);
-webkit-backdrop-filter: blur(2px) saturate(106%);
border: none;
box-shadow: none;
padding: 24px 24px 22px;
}
.conversation-search-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 2px 2px 14px;
border-bottom: none;
}
.conversation-search-modal__header-main {
min-width: 0;
flex: 1;
}
.conversation-search-modal__title {
font-size: 17px;
font-weight: 600;
line-height: 26px;
color: var(--text-primary);
}
.conversation-search-modal__result-title-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.conversation-search-modal__result-title {
min-width: 0;
flex: 1;
}
.conversation-search-modal__description {
margin-top: 2px;
}
.conversation-search-modal__close-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
color: var(--text-secondary);
background: transparent;
cursor: pointer;
flex-shrink: 0;
transition:
background-color 0.16s ease,
color 0.16s ease;
}
.conversation-search-modal__close-btn:hover {
background: var(--fill-0);
color: var(--text-primary);
}
.conversation-search-modal__input-wrap {
width: 100%;
margin: 4px 0 14px;
}
.conversation-search-modal__searchbar {
height: 38px;
display: flex;
align-items: center;
gap: 8px;
background: var(--conversation-search-input-bg) !important;
border: 1px solid var(--conversation-search-input-border) !important;
box-shadow: none !important;
border-radius: 10px;
padding-block: 0;
padding-inline-start: 12px;
padding-inline-end: 10px;
}
.conversation-search-modal__searchbar:focus-within {
border-color: rgba(var(--primary-6), 0.58) !important;
box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.12) !important;
}
.conversation-search-modal__search-icon {
color: var(--text-secondary);
line-height: 0;
flex-shrink: 0;
}
.conversation-search-modal__search-input {
flex: 1;
min-width: 0;
height: 100%;
border: none;
background: transparent;
color: var(--text-primary);
font-size: 14px;
outline: none;
}
.conversation-search-modal__search-input::placeholder {
color: var(--text-secondary);
}
.conversation-search-modal__clear-btn {
width: 26px;
height: 26px;
border: none;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
background: transparent;
cursor: pointer;
flex-shrink: 0;
transition:
background-color 0.16s ease,
color 0.16s ease;
}
.conversation-search-modal__clear-btn:hover {
background: var(--fill-2);
color: var(--text-primary);
}
.conversation-search-modal__clear-btn:focus-visible {
outline: 2px solid rgba(var(--primary-6), 0.42);
outline-offset: 1px;
}
.conversation-search-modal__clear-btn svg {
display: block;
}
.conversation-search-modal__search-input:focus,
.conversation-search-modal__search-input:focus-visible {
outline: none !important;
}
.conversation-search-modal__results {
background: transparent;
border: none;
border-radius: 20px;
overflow: hidden;
box-shadow: none;
}
.conversation-search-modal__state {
min-height: 168px;
border: 1px dashed var(--conversation-search-divider);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px;
color: var(--text-secondary);
background: color-mix(in srgb, var(--conversation-search-surface-bg) 76%, transparent);
box-shadow: none;
}
.conversation-search-modal__state-content {
width: 100%;
max-width: 560px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.conversation-search-modal__recent-wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.conversation-search-modal__recent-chip {
max-width: 220px;
border: 1px solid color-mix(in srgb, var(--conversation-search-input-border) 86%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--conversation-search-input-bg) 88%, var(--conversation-search-surface-bg));
color: var(--text-secondary);
padding: 6px 14px;
font-size: 13px;
line-height: 20px;
font-weight: 500;
letter-spacing: 0.1px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 1px 2px rgba(15, 23, 42, 0.06);
transition:
color 0.16s ease,
border-color 0.16s ease,
background-color 0.16s ease,
transform 0.16s ease,
box-shadow 0.16s ease;
}
.conversation-search-modal__recent-chip:hover {
color: var(--conversation-search-highlight-fg);
border-color: rgba(var(--primary-6), 0.48);
background: color-mix(in srgb, var(--conversation-search-input-bg) 74%, rgba(var(--primary-6), 0.18));
transform: translateY(-1px);
box-shadow:
0 0 0 1px rgba(var(--primary-6), 0.1),
0 3px 8px rgba(15, 23, 42, 0.1);
}
.conversation-search-modal__recent-chip:active {
transform: translateY(0);
box-shadow:
0 0 0 1px rgba(var(--primary-6), 0.16),
0 1px 3px rgba(15, 23, 42, 0.1);
}
.conversation-search-modal__result {
padding: 16px 18px;
background: transparent;
border: none;
border-bottom: 1px solid var(--conversation-search-divider);
}
.conversation-search-modal__snippet {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.conversation-search-modal__result:hover,
.conversation-search-modal__result:focus {
background: var(--conversation-search-hover-bg);
}
.conversation-search-modal__result:last-child {
border-bottom: none;
}
.conversation-search-modal__highlight {
padding: 0;
border-radius: 0;
background: transparent;
color: var(--conversation-search-highlight-fg);
font-weight: 700;
line-height: inherit;
box-shadow: none;
}
/* Titlebar + window controls */
.app-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
height: var(--titlebar-height);
min-height: var(--titlebar-height);
line-height: var(--titlebar-height);
user-select: none;
position: relative;
z-index: 10;
}
.app-titlebar--desktop {
-webkit-app-region: drag;
}
.app-titlebar--mobile {
height: 48px;
min-height: 48px;
padding: 0 8px;
}
.app-titlebar--mobile-conversation {
background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) !important;
border-bottom: none !important;
}
.app-titlebar--mac {
height: 45px;
min-height: 36px;
/* Reserve space for macOS traffic light buttons (left side) */
padding-right: 12px;
}
/* Windows/Linux desktop: taller titlebar so 36px buttons have breathing room,
and a bit of left padding so the first button isn't glued to the window edge. */
.app-titlebar--desktop:not(.app-titlebar--mac) {
height: 42px;
min-height: 42px;
padding-left: 16px;
/* Let the right-side toolbar stretch edge-to-edge so system window controls
(minimize/maximize/close) go full height like native Windows chrome. */
align-items: stretch;
}
/* Only the menu group stays vertically centered in the taller titlebar. */
.app-titlebar--desktop:not(.app-titlebar--mac) .app-titlebar__menu,
.app-titlebar--desktop:not(.app-titlebar--mac) .app-titlebar__brand {
align-self: center;
}
.app-titlebar__brand {
font-weight: 600;
font-size: 13px;
letter-spacing: 0.2px;
color: var(--text-primary);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
}
.app-titlebar--mobile .app-titlebar__brand {
position: static;
flex: 1 1 auto;
justify-content: flex-start;
text-align: left;
min-width: 0;
margin: 0 8px;
}
.app-titlebar--mobile .app-titlebar__brand--centered {
position: absolute;
left: 50%;
transform: translateX(calc(-50% + var(--app-titlebar-mobile-center-offset, 0px)));
max-width: calc(100% - 180px);
text-align: center;
margin: 0;
}
.app-titlebar__brand-mobile {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 6px;
min-width: 0;
white-space: nowrap;
}
.app-titlebar__brand-text {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 1;
color: inherit;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.app-titlebar__brand-icon {
display: inline-flex;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 0;
color: var(--text-primary);
}
.app-titlebar__menu {
-webkit-app-region: no-drag;
display: flex;
align-items: center;
}
.app-titlebar__toolbar {
display: flex;
align-items: center;
gap: 4px;
-webkit-app-region: no-drag;
margin-left: auto;
min-height: var(--titlebar-height);
}
/* Mobile slot for chat-header actions (model picker, cron, etc.). */
.app-titlebar__actions-slot {
display: inline-flex;
align-items: center;
gap: 6px;
}
.app-titlebar__actions-slot:empty {
display: none;
}
.app-titlebar__button {
-webkit-app-region: no-drag;
width: var(--titlebar-height);
height: var(--titlebar-height);
border: none;
border-radius: 6px;
background-color: transparent;
color: var(--text-primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease;
}
.app-titlebar__button:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.app-titlebar__button:active {
background-color: rgba(0, 0, 0, 0.14);
}
[data-theme='dark'] .app-titlebar__button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .app-titlebar__button:active {
background-color: rgba(255, 255, 255, 0.16);
}
.app-titlebar__button:disabled,
.app-titlebar__button[disabled] {
opacity: 0.35;
cursor: default;
background-color: transparent;
}
/* Migration invite capsule (discontinued build only): a pill-shaped button in
the titlebar toolbar, colored with the theme warning token so it reads as an
"update available" notice. Clicking re-opens the migration invite dialog. */
.app-titlebar__migration-capsule {
-webkit-app-region: no-drag;
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 12px;
border: none;
border-radius: 12px;
background-color: var(--warning);
color: var(--text-white);
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
filter 0.2s ease,
transform 0.2s ease;
}
.app-titlebar__migration-capsule:hover {
filter: brightness(1.08);
}
.app-titlebar__migration-capsule:active {
filter: brightness(0.94);
}
.app-titlebar__migration-capsule-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--text-white);
flex-shrink: 0;
}
/* Optical alignment: arrow icons have their visual weight pulled upward by
the V tip; nudge them down 1px to sit on the same centerline as the
sidebar rectangle icon (which has a solid, symmetric visual weight). */
.app-titlebar__button--nav svg {
transform: translateY(1px);
}
.app-titlebar__button:disabled:hover,
.app-titlebar__button[disabled]:hover {
background-color: transparent;
}
.app-titlebar__button--mobile {
width: 32px;
height: 32px;
border-radius: 8px;
}
.app-titlebar__button--mobile svg {
width: 18px !important;
height: 18px !important;
}
.app-window-controls {
display: flex;
align-items: stretch;
align-self: stretch;
-webkit-app-region: no-drag;
}
.app-window-controls__button {
width: 40px;
/* Match the parent titlebar height so system buttons go edge-to-edge
like native Windows chrome. */
height: 100%;
align-self: stretch;
border: none;
background: transparent;
color: var(--text-primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.18s ease;
}
.app-window-controls__button:hover {
background-color: rgba(128, 128, 128, 0.2);
}
.app-window-controls__button:active {
background-color: rgba(128, 128, 128, 0.3);
}
.app-window-controls__button--close:hover {
background-color: #e81123;
color: #fff;
}
.app-window-controls__button--close:active {
background-color: #c10f1f;
color: #fff;
}
/* Preview panel animation */
@media (prefers-reduced-motion: reduce) {
.preview-panel {
transition: none !important;
animation: none !important;
}
}
.preview-panel {
animation: preview-panel-enter 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
will-change: opacity, transform;
}
@keyframes preview-panel-enter {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Layout-level styles: sidebar, sider animations, message positioning */
/* Sticky section labels in the sider (team / cron / projects / timeline). */
.sider-section-label {
background-color: var(--bg-2);
}
/* Sidebar row action buttons (more / plus) — use opaque tokens so text
underneath never bleeds through (Arco's fill tokens are semi-transparent
in dark mode). Light tier stays lighter than the row hover fill-3;
hover lightens one more step. */
.sider-action-btn {
background-color: var(--bg-2);
}
.sider-action-btn:hover {
background-color: var(--bg-1);
}
[data-theme='dark'] .sider-action-btn {
background-color: var(--bg-5);
}
[data-theme='dark'] .sider-action-btn:hover {
background-color: var(--bg-6);
}
/* Section title text — light mode uses text-t-tertiary (#86909c).
In dark mode, the tertiary token (#5a5a5a) is too dim on #0e0e0e,
while --text-secondary (#ced3da) is too bright; pick a mid-gray
shared by sidebar section titles and settings group headers. */
[data-theme='dark'] .sider-section-title,
[data-theme='dark'] .settings-sider__group-header {
color: #9098a1;
}
/* Layout sider base styles */
.layout-sider {
overflow-x: hidden;
box-shadow: none !important;
border-inline-end: 1px solid var(--border-base);
}
/* Arco Layout inner container needs flex layout so Header + Content + Footer
stack vertically and Content fills the remaining space (avoids a fixed
calc() that breaks when header height changes). */
.layout-sider > .arco-layout-sider-children {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-height: 0 !important;
height: 100% !important;
}
.layout-sider-header {
flex-shrink: 0 !important;
}
.layout-sider-content {
flex: 1 !important;
min-height: 0 !important;
height: auto !important;
}
.layout-sider.collapsed .arco-layout-sider-children,
.layout-sider.arco-layout-sider-collapsed .arco-layout-sider-children {
overflow-x: hidden;
}
/* Disable transition during drag for smooth dragging */
.layout-sider--dragging {
transition: none !important;
}
/* Sidebar item transitions (shared by chat-history and settings-sider) */
.chat-history__item,
.settings-sider__item {
transition:
padding 0.2s ease,
margin 0.2s ease,
background-color 0.2s ease;
}
.chat-history__item-name,
.chat-history__item-editor,
.settings-sider__item-label {
transition:
opacity 0.25s ease,
transform 0.25s ease;
transform-origin: left center;
}
.chat-history__item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.settings-sider__item-label {
display: block;
}
.chat-history__placeholder,
.chat-history__section {
transition:
opacity 0.3s ease,
max-height 0.3s ease,
margin 0.3s ease,
padding 0.3s ease;
}
.chat-history__placeholder {
max-height: 140px;
}
.chat-history__section {
max-height: 60px; /* Increase height for zoom scaling to prevent text clipping */
}
.chat-history--collapsed .chat-history__placeholder,
.chat-history--collapsed .chat-history__section {
opacity: 0;
max-height: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.chat-history--collapsed .chat-history__item-name,
.chat-history--collapsed .chat-history__item-editor {
opacity: 0;
transform: translateX(-8px);
}
.settings-sider--collapsed .settings-sider__item-label {
opacity: 0;
transform: translateX(-8px);
}
@media (prefers-reduced-motion: reduce) {
.chat-history,
.chat-history__item,
.chat-history__item-name,
.chat-history__item-editor,
.settings-sider,
.settings-sider__item,
.settings-sider__item-label,
.chat-history__placeholder,
.chat-history__section {
transition: none;
}
}
/* Message component positioning - center in conversation area (exclude left sider) */
/* Use padding-inline-start offset while keeping inner message centered */
.arco-message-wrapper {
inset-inline-start: 0 !important;
width: 100% !important;
padding-inline-start: 266px;
box-sizing: border-box;
z-index: 10001 !important;
}
/* Default background for select and input components */
.arco-select-view,
.arco-select-addbefore,
.arco-input,
.arco-input-inner-wrapper,
.arco-input-group-addafter,
.arco-input-group-addbefore {
background-color: var(--fill-0) !important;
}
/* Grouped inputs should share one surface across the field and its add-ons. */
.arco-input-inner-wrapper > .arco-input,
.arco-input-group-addafter .arco-input,
.arco-input-group-addbefore .arco-input,
.arco-input-inner-wrapper .arco-input-group-prefix,
.arco-input-inner-wrapper .arco-input-group-suffix,
.arco-select-suffix,
.arco-input-group-addafter .arco-select .arco-select-view,
.arco-input-group-addbefore .arco-select .arco-select-view {
background-color: transparent !important;
}
/* Mobile sidebar positioning */
/* Use dvh for better mobile browser support (iOS Chrome/Safari) */
@media (max-width: 767px) {
.sider-tooltip-popup {
display: none !important;
pointer-events: none !important;
}
.layout-sider {
/* Fixed positioning from top */
top: 0 !important;
/* dvh automatically accounts for browser chrome on mobile */
height: 100vh !important;
height: 100dvh !important;
/* Use flex layout to manage internal space */
display: flex !important;
flex-direction: column !important;
/* Use padding for safe areas instead of height adjustment */
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
box-sizing: border-box !important;
}
.layout-sider-header--mobile {
min-height: 56px !important;
padding-top: 10px !important;
padding-bottom: 8px !important;
gap: 8px !important;
}
/* Mobile-only: clip overflow instead of allowing scroll */
.layout-sider-content {
overflow: hidden !important;
}
/* Footer stays at bottom with extra padding as fallback */
.sider-footer {
flex-shrink: 0 !important;
/* Extra padding as fallback for iOS Chrome */
padding-bottom: 20px;
}
/* Match the mobile sider top buttons to the conversation row height (34px)
so the new-chat / search / footer rows form one consistent vertical rhythm. */
.sider-action-btn-mobile {
height: 34px !important;
gap: 8px !important;
padding-inline: 10px !important;
border-radius: 8px !important;
}
.sider-action-icon-btn-mobile {
width: 34px !important;
height: 34px !important;
border-radius: 8px !important;
}
.sider-footer-btn-mobile {
min-height: 34px !important;
padding: 6px 10px !important;
border-radius: 8px !important;
}
/* Mobile: remove left padding for message wrapper */
.arco-message-wrapper {
padding-inline-start: 0;
}
/* Sidebar conversation title + secondary timeline text */
.chat-history__item-name {
font-size: 15px !important;
line-height: 24px !important;
}
.chat-history__section {
font-size: 14px !important;
line-height: 20px !important;
}
}
/* Direction-implying icons (chevrons meaning "enter/forward") must mirror under RTL. */
[dir='rtl'] .rtl-mirror {
transform: scaleX(-1);
}
/* LTR islands (paths, file names) inside an RTL layout: pin the text to the
page's reading edge. LTR pages keep the island's natural left alignment. */
[dir='rtl'] .rtl-text-right {
text-align: right;
}
/* Letopis brand: 1M logo in the sider header */
.layout-brand-mark {
display: grid;
place-items: center;
background: var(--primary);
color: var(--text-white);
font-weight: 800;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.layout-brand-title {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.15;
}
.layout-brand-title b {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.layout-brand-title small {
margin-top: 2px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--bg-6);
}
/* Sider icons use the primary (orange) accent */
.layout-sider svg {
color: var(--primary);
}
/* GPU-friendly: transform applies to the + SVG only (see Sider.tsx), not the padded row or icon frame */
._newChatTrigger_14ap0_3 {
position: relative;
}
._newChatIcon_14ap0_7 {
transform: translateZ(0);
transition: transform 0.14s cubic-bezier(0.33, 1, 0.68, 1);
}
._newChatTrigger_14ap0_3:hover ._newChatIcon_14ap0_7 {
transform: scale(0.92) translateZ(0);
}
._newChatTrigger_14ap0_3:active ._newChatIcon_14ap0_7 {
transform: scale(0.84) translateZ(0);
}
@media (prefers-reduced-motion: reduce) {
._newChatIcon_14ap0_7 {
transition: none;
}
._newChatTrigger_14ap0_3:hover ._newChatIcon_14ap0_7,
._newChatTrigger_14ap0_3:active ._newChatIcon_14ap0_7 {
transform: translateZ(0);
}
}
/* Overlay-style scroll area: scrollbar takes zero layout width so icons in the
fixed top nav and the scrollable list stay on the same vertical center line.
Mimics macOS native overlay scrollbars. */
._scrollArea_14ap0_34 {
scrollbar-width: none; /* Firefox */
}
._scrollArea_14ap0_34::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Pinned sidebar row — reserve a dedicated 28px slot on the right for the
pushpin indicator so it never overlaps the row title. When the row is
hovered, the three-dot menu takes over that slot and the text reclaims
the gap (18px), matching non-pinned rows. */
._pinnedTextSlot_14ap0_47 {
padding-inline-end: 28px;
}
.group:hover ._pinnedTextSlot_14ap0_47 {
padding-inline-end: 18px;
}