@os-legal/ui 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +526 -164
- package/dist/index.d.ts +526 -164
- package/dist/index.js +2064 -0
- package/dist/index.mjs +2055 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { ElementType, ReactNode, ComponentPropsWithoutRef, HTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes, SVGAttributes } from 'react';
|
|
2
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
4
|
|
|
4
5
|
/**
|
|
@@ -171,10 +172,10 @@ interface AppShellHeaderProps extends HTMLAttributes<HTMLElement> {
|
|
|
171
172
|
bordered?: boolean;
|
|
172
173
|
children?: ReactNode;
|
|
173
174
|
}
|
|
174
|
-
declare const AppShell:
|
|
175
|
-
declare const AppShellSidebar:
|
|
176
|
-
declare const AppShellMain:
|
|
177
|
-
declare const AppShellHeader:
|
|
175
|
+
declare const AppShell: React__default.ForwardRefExoticComponent<AppShellProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
176
|
+
declare const AppShellSidebar: React__default.ForwardRefExoticComponent<AppShellSidebarProps & React__default.RefAttributes<HTMLElement>>;
|
|
177
|
+
declare const AppShellMain: React__default.ForwardRefExoticComponent<AppShellMainProps & React__default.RefAttributes<HTMLElement>>;
|
|
178
|
+
declare const AppShellHeader: React__default.ForwardRefExoticComponent<AppShellHeaderProps & React__default.RefAttributes<HTMLElement>>;
|
|
178
179
|
|
|
179
180
|
declare const appShellStyles = "\n/* AppShell - Main Application Container */\n.oc-app-shell {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n background: var(--oc-bg-canvas);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-app-shell--fixed {\n height: 100vh;\n overflow: hidden;\n}\n\n/* AppShell Sidebar */\n.oc-app-shell-sidebar {\n --sidebar-width: 260px;\n position: relative;\n width: var(--sidebar-width);\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-surface);\n transition: width var(--oc-duration-normal) var(--oc-easing-default),\n margin var(--oc-duration-normal) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-app-shell-sidebar--bordered {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-sidebar--closed {\n width: 0;\n margin-left: calc(var(--sidebar-width) * -1);\n}\n\n.oc-app-shell-sidebar__content {\n width: var(--sidebar-width);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* AppShell Main */\n.oc-app-shell-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--oc-bg-canvas);\n}\n\n/* AppShell Header */\n.oc-app-shell-header {\n --header-height: 56px;\n height: var(--header-height);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: 0 var(--oc-spacing-lg);\n background: var(--oc-bg-canvas);\n}\n\n.oc-app-shell-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-header--fixed {\n position: sticky;\n top: 0;\n z-index: var(--oc-z-sticky);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n/* Layout composition helpers */\n.oc-app-shell > .oc-app-shell-header {\n order: -1;\n}\n\n/* Horizontal layout for sidebar + main */\n.oc-app-shell:has(.oc-app-shell-sidebar) {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.oc-app-shell:has(.oc-app-shell-sidebar) > .oc-app-shell-header {\n width: 100%;\n flex-basis: 100%;\n}\n\n/* Dark sidebar variant */\n.oc-app-shell-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n border-right-color: rgba(255, 255, 255, 0.1);\n}\n";
|
|
180
181
|
|
|
@@ -198,7 +199,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
|
|
|
198
199
|
tabs?: ReactNode;
|
|
199
200
|
children?: ReactNode;
|
|
200
201
|
}
|
|
201
|
-
declare const PageHeader:
|
|
202
|
+
declare const PageHeader: React__default.ForwardRefExoticComponent<PageHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
202
203
|
|
|
203
204
|
declare const pageHeaderStyles = "\n/* PageHeader Component */\n.oc-page-header {\n padding: var(--oc-spacing-lg) var(--oc-spacing-xl);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Breadcrumbs */\n.oc-page-header__breadcrumbs {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-breadcrumbs {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--oc-spacing-xs);\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-breadcrumbs__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-breadcrumbs__separator {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-breadcrumbs__link {\n color: var(--oc-fg-secondary);\n text-decoration: none;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n padding: 2px 0;\n}\n\n.oc-breadcrumbs__link:hover {\n color: var(--oc-accent);\n}\n\n.oc-breadcrumbs__current {\n color: var(--oc-fg-primary);\n font-weight: 500;\n}\n\n/* Header Row */\n.oc-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-lg);\n}\n\n.oc-page-header__content {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-md);\n min-width: 0;\n flex: 1;\n}\n\n.oc-page-header__back {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n margin-top: 2px;\n}\n\n.oc-page-header__back:hover {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n color: var(--oc-fg-primary);\n}\n\n.oc-page-header__text {\n min-width: 0;\n}\n\n.oc-page-header__title {\n margin: 0;\n font-size: var(--oc-font-size-2xl);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-page-header__subtitle {\n margin: var(--oc-spacing-xs) 0 0;\n font-size: var(--oc-font-size-md);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-page-header__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n}\n\n/* Tabs */\n.oc-page-header__tabs {\n margin-top: var(--oc-spacing-lg);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* Compact variant */\n.oc-page-header--compact {\n padding: var(--oc-spacing-md) var(--oc-spacing-lg);\n}\n\n.oc-page-header--compact .oc-page-header__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Bordered variant */\n.oc-page-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* With accent bar */\n.oc-page-header--accent {\n position: relative;\n}\n\n.oc-page-header--accent::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--oc-accent);\n}\n";
|
|
204
205
|
|
|
@@ -222,8 +223,8 @@ interface SplitPaneProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
222
223
|
interface PaneProps extends HTMLAttributes<HTMLDivElement> {
|
|
223
224
|
children?: ReactNode;
|
|
224
225
|
}
|
|
225
|
-
declare const SplitPane:
|
|
226
|
-
declare const Pane:
|
|
226
|
+
declare const SplitPane: React__default.ForwardRefExoticComponent<SplitPaneProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
227
|
+
declare const Pane: React__default.ForwardRefExoticComponent<PaneProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
227
228
|
|
|
228
229
|
declare const splitPaneStyles = "\n/* SplitPane Component */\n.oc-split-pane {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-split-pane--horizontal {\n flex-direction: row;\n}\n\n.oc-split-pane--vertical {\n flex-direction: column;\n}\n\n.oc-split-pane--dragging {\n user-select: none;\n}\n\n/* Panes */\n.oc-split-pane__pane {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.oc-split-pane__pane--first {\n flex-shrink: 0;\n}\n\n.oc-split-pane__pane--second {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n\n/* Handle */\n.oc-split-pane__handle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal > .oc-split-pane__handle {\n width: 8px;\n cursor: col-resize;\n}\n\n.oc-split-pane--vertical > .oc-split-pane__handle {\n height: 8px;\n cursor: row-resize;\n}\n\n.oc-split-pane__handle:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n}\n\n.oc-split-pane__handle-bar {\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal .oc-split-pane__handle-bar {\n width: 2px;\n height: 32px;\n}\n\n.oc-split-pane--vertical .oc-split-pane__handle-bar {\n height: 2px;\n width: 32px;\n}\n\n.oc-split-pane__handle:hover .oc-split-pane__handle-bar,\n.oc-split-pane--dragging .oc-split-pane__handle-bar {\n background: var(--oc-accent);\n}\n\n/* Generic Pane */\n.oc-pane {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Panel with header pattern */\n.oc-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-panel__header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm, 8px) var(--oc-spacing-md, 16px);\n border-bottom: 1px solid var(--oc-border-default, #E5E5E5);\n min-height: 48px;\n}\n\n.oc-panel__title {\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-panel__content {\n flex: 1;\n overflow: auto;\n}\n";
|
|
229
230
|
|
|
@@ -253,18 +254,18 @@ interface HStackProps extends Omit<StackProps, 'direction'> {
|
|
|
253
254
|
}
|
|
254
255
|
interface VStackProps extends Omit<StackProps, 'direction'> {
|
|
255
256
|
}
|
|
256
|
-
declare const Stack:
|
|
257
|
+
declare const Stack: React__default.ForwardRefExoticComponent<StackProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
257
258
|
/** Horizontal stack (row direction) */
|
|
258
|
-
declare const HStack:
|
|
259
|
+
declare const HStack: React__default.ForwardRefExoticComponent<HStackProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
259
260
|
/** Vertical stack (column direction) */
|
|
260
|
-
declare const VStack:
|
|
261
|
+
declare const VStack: React__default.ForwardRefExoticComponent<VStackProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
261
262
|
/** Spacer - flexible space that fills available room */
|
|
262
|
-
declare const Spacer:
|
|
263
|
+
declare const Spacer: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
263
264
|
/** Divider - visual separator */
|
|
264
265
|
interface DividerProps extends HTMLAttributes<HTMLDivElement> {
|
|
265
266
|
orientation?: 'horizontal' | 'vertical';
|
|
266
267
|
}
|
|
267
|
-
declare const Divider:
|
|
268
|
+
declare const Divider: React__default.ForwardRefExoticComponent<DividerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
268
269
|
|
|
269
270
|
declare const stackStyles = "\n/* Stack Component */\n.oc-stack {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Spacer */\n.oc-spacer {\n flex: 1;\n}\n\n/* Divider */\n.oc-divider {\n flex-shrink: 0;\n background: var(--oc-border-default, #E5E5E5);\n}\n\n.oc-divider--horizontal {\n height: 1px;\n width: 100%;\n}\n\n.oc-divider--vertical {\n width: 1px;\n align-self: stretch;\n}\n\n/* Box - generic container with padding */\n.oc-box {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-box--padding-none { padding: 0; }\n.oc-box--padding-xs { padding: var(--oc-spacing-xs, 4px); }\n.oc-box--padding-sm { padding: var(--oc-spacing-sm, 8px); }\n.oc-box--padding-md { padding: var(--oc-spacing-md, 16px); }\n.oc-box--padding-lg { padding: var(--oc-spacing-lg, 24px); }\n.oc-box--padding-xl { padding: var(--oc-spacing-xl, 32px); }\n\n/* Center - center content both ways */\n.oc-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Container - max-width constrained container */\n.oc-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--oc-spacing-md, 16px);\n padding-right: var(--oc-spacing-md, 16px);\n}\n\n.oc-container--sm { max-width: 640px; }\n.oc-container--md { max-width: 768px; }\n.oc-container--lg { max-width: 1024px; }\n.oc-container--xl { max-width: 1280px; }\n.oc-container--full { max-width: 100%; }\n";
|
|
270
271
|
|
|
@@ -280,7 +281,7 @@ interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
280
281
|
styled?: boolean;
|
|
281
282
|
children?: ReactNode;
|
|
282
283
|
}
|
|
283
|
-
declare const ScrollArea:
|
|
284
|
+
declare const ScrollArea: React__default.ForwardRefExoticComponent<ScrollAreaProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
284
285
|
|
|
285
286
|
declare const scrollAreaStyles = "\n/* ScrollArea Component */\n.oc-scroll-area {\n position: relative;\n overflow: hidden;\n}\n\n/* Scroll behavior */\n.oc-scroll-area--vertical {\n overflow-y: auto;\n}\n\n.oc-scroll-area--horizontal {\n overflow-x: auto;\n}\n\n.oc-scroll-area--vertical.oc-scroll-area--horizontal {\n overflow: auto;\n}\n\n/* Type variants */\n.oc-scroll-area--auto {\n overflow-y: auto;\n}\n\n.oc-scroll-area--always {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--scroll {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--hover {\n overflow-y: hidden;\n}\n\n.oc-scroll-area--hover:hover {\n overflow-y: auto;\n}\n\n/* Custom styled scrollbars */\n.oc-scroll-area--styled {\n scrollbar-width: thin;\n scrollbar-color: var(--oc-border-strong, #CCCCCC) transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb {\n background: var(--oc-border-strong, #CCCCCC);\n border-radius: 4px;\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb:hover {\n background: var(--oc-fg-tertiary, #9B9B9B);\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Thin scrollbar variant */\n.oc-scroll-area--thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n/* Dark mode scrollbar */\n.oc-scroll-area--dark {\n scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n";
|
|
286
287
|
|
|
@@ -298,10 +299,10 @@ interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
|
|
|
298
299
|
action?: ReactNode;
|
|
299
300
|
children?: ReactNode;
|
|
300
301
|
}
|
|
301
|
-
declare const Card:
|
|
302
|
-
declare const CardHeader:
|
|
303
|
-
declare const CardBody:
|
|
304
|
-
declare const CardFooter:
|
|
302
|
+
declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
303
|
+
declare const CardHeader: React__default.ForwardRefExoticComponent<CardHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
304
|
+
declare const CardBody: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
305
|
+
declare const CardFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
305
306
|
|
|
306
307
|
declare const cardStyles = "\n/* Card Component */\n.oc-card {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Variants */\n.oc-card--elevated {\n box-shadow: var(--oc-shadow-md);\n}\n\n.oc-card--flat {\n box-shadow: none;\n}\n\n.oc-card--outlined {\n box-shadow: none;\n border: 1px solid var(--oc-border-default);\n}\n\n/* Padding */\n.oc-card--padding-none {\n padding: 0;\n}\n\n.oc-card--padding-sm {\n padding: var(--oc-spacing-sm);\n}\n\n.oc-card--padding-md {\n padding: var(--oc-spacing-md);\n}\n\n.oc-card--padding-lg {\n padding: var(--oc-spacing-lg);\n}\n\n/* Interactive */\n.oc-card--interactive {\n cursor: pointer;\n transition: box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n transform var(--oc-duration-fast) var(--oc-easing-default),\n border-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-card--interactive:hover {\n box-shadow: var(--oc-shadow-lg);\n transform: translateY(-2px);\n}\n\n.oc-card--interactive.oc-card--outlined:hover {\n border-color: var(--oc-border-strong);\n}\n\n.oc-card--interactive:active {\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Card Header */\n.oc-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-card-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-card-header__title {\n font-size: var(--oc-font-size-lg);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-card-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-card-header__action {\n flex-shrink: 0;\n}\n\n/* Card Body */\n.oc-card-body {\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Card Footer */\n.oc-card-footer {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n margin-top: var(--oc-spacing-md);\n padding-top: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n}\n";
|
|
307
308
|
|
|
@@ -327,12 +328,12 @@ interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
327
328
|
title?: string;
|
|
328
329
|
children?: ReactNode;
|
|
329
330
|
}
|
|
330
|
-
declare const Sidebar:
|
|
331
|
-
declare const SidebarHeader:
|
|
332
|
-
declare const SidebarNav:
|
|
333
|
-
declare const SidebarSection:
|
|
334
|
-
declare const SidebarItem:
|
|
335
|
-
declare const SidebarFooter:
|
|
331
|
+
declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLElement>>;
|
|
332
|
+
declare const SidebarHeader: React__default.ForwardRefExoticComponent<SidebarHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
333
|
+
declare const SidebarNav: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLElement> & React__default.RefAttributes<HTMLElement>>;
|
|
334
|
+
declare const SidebarSection: React__default.ForwardRefExoticComponent<SidebarSectionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
335
|
+
declare const SidebarItem: React__default.ForwardRefExoticComponent<SidebarItemProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
336
|
+
declare const SidebarFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
336
337
|
|
|
337
338
|
declare const sidebarStyles = "\n/* Sidebar Component */\n.oc-sidebar {\n display: flex;\n flex-direction: column;\n width: 260px;\n height: 100%;\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: width var(--oc-duration-normal) var(--oc-easing-default);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-sidebar--collapsed {\n width: 64px;\n}\n\n/* Sidebar Header */\n.oc-sidebar-header {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n min-height: 56px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-sidebar-header__logo {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-accent);\n border-radius: var(--oc-radius-md);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-header__title {\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n/* Sidebar Nav */\n.oc-sidebar-nav {\n flex: 1;\n overflow-y: auto;\n padding: var(--oc-spacing-sm);\n}\n\n/* Sidebar Section */\n.oc-sidebar-section {\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-sidebar-section:first-child {\n margin-top: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__title {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary);\n padding: var(--oc-spacing-sm);\n margin-bottom: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Sidebar Item */\n.oc-sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n position: relative;\n}\n\n.oc-sidebar-item:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active:hover {\n background: var(--oc-accent-hover);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-sidebar-item--disabled:hover {\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-sidebar-item__icon {\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon,\n.oc-sidebar-item--active:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item__label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-sidebar-item__badge {\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__badge {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Sidebar Footer */\n.oc-sidebar-footer {\n padding: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n margin-top: auto;\n}\n\n/* Dark variant */\n.oc-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-header {\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.oc-sidebar--dark .oc-sidebar-header__title {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-section__title {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.oc-sidebar--dark .oc-sidebar-item {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover {\n background: rgba(255, 255, 255, 0.08);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.oc-sidebar--dark .oc-sidebar-footer {\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n";
|
|
338
339
|
|
|
@@ -374,7 +375,7 @@ interface NavBarProps extends HTMLAttributes<HTMLElement> {
|
|
|
374
375
|
/** Hide user menu */
|
|
375
376
|
hideUserMenu?: boolean;
|
|
376
377
|
}
|
|
377
|
-
declare const NavBar:
|
|
378
|
+
declare const NavBar: React__default.ForwardRefExoticComponent<NavBarProps & React__default.RefAttributes<HTMLElement>>;
|
|
378
379
|
|
|
379
380
|
declare const navBarStyles = "\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n";
|
|
380
381
|
|
|
@@ -397,10 +398,10 @@ interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
|
|
|
397
398
|
interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
398
399
|
children?: ReactNode;
|
|
399
400
|
}
|
|
400
|
-
declare const Modal:
|
|
401
|
-
declare const ModalHeader:
|
|
402
|
-
declare const ModalBody:
|
|
403
|
-
declare const ModalFooter:
|
|
401
|
+
declare const Modal: React__default.ForwardRefExoticComponent<ModalProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
402
|
+
declare const ModalHeader: React__default.ForwardRefExoticComponent<ModalHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
403
|
+
declare const ModalBody: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
404
|
+
declare const ModalFooter: React__default.ForwardRefExoticComponent<ModalFooterProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
404
405
|
|
|
405
406
|
declare const modalStyles = "\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n";
|
|
406
407
|
|
|
@@ -411,7 +412,7 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
|
|
|
411
412
|
delay?: number;
|
|
412
413
|
children: ReactNode;
|
|
413
414
|
}
|
|
414
|
-
declare const Tooltip:
|
|
415
|
+
declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
415
416
|
|
|
416
417
|
declare const tooltipStyles = "\n/* Tooltip Trigger */\n.oc-tooltip-trigger {\n display: inline-flex;\n}\n\n/* Tooltip */\n.oc-tooltip {\n position: absolute;\n z-index: var(--oc-z-tooltip);\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: var(--oc-font-size-xs);\n border-radius: var(--oc-radius-md);\n white-space: nowrap;\n pointer-events: none;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-tooltip--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-tooltip--bottom {\n transform: translateX(-50%);\n}\n\n.oc-tooltip--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-tooltip--right {\n transform: translateY(-50%);\n}\n";
|
|
417
418
|
|
|
@@ -425,7 +426,7 @@ interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
|
|
|
425
426
|
onOpenChange?: (open: boolean) => void;
|
|
426
427
|
children: ReactNode;
|
|
427
428
|
}
|
|
428
|
-
declare const Popover:
|
|
429
|
+
declare const Popover: React__default.ForwardRefExoticComponent<PopoverProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
429
430
|
|
|
430
431
|
declare const popoverStyles = "\n/* Popover Trigger */\n.oc-popover-trigger {\n display: inline-flex;\n}\n\n/* Popover */\n.oc-popover {\n position: absolute;\n z-index: var(--oc-z-popover, 1000);\n min-width: 200px;\n padding: var(--oc-spacing-md);\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1));\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-popover-fade-in 0.15s ease-out;\n}\n\n@keyframes oc-popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Placement */\n.oc-popover--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-popover--bottom {\n transform: translateX(-50%);\n}\n\n.oc-popover--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-popover--right {\n transform: translateY(-50%);\n}\n";
|
|
431
432
|
|
|
@@ -454,10 +455,10 @@ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
454
455
|
size?: AvatarSize;
|
|
455
456
|
children: ReactNode;
|
|
456
457
|
}
|
|
457
|
-
declare const Avatar:
|
|
458
|
-
declare const AvatarGroup:
|
|
458
|
+
declare const Avatar: React__default.ForwardRefExoticComponent<AvatarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
459
|
+
declare const AvatarGroup: React__default.ForwardRefExoticComponent<AvatarGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
459
460
|
/** AI Assistant avatar with animated gradient */
|
|
460
|
-
declare const AIAvatar:
|
|
461
|
+
declare const AIAvatar: React__default.ForwardRefExoticComponent<Omit<AvatarProps, "fallback" | "accent"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
461
462
|
|
|
462
463
|
declare const avatarStyles = "\n/* Avatar Component */\n.oc-avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: linear-gradient(135deg, #E5E5E5 0%, #D4D4D4 100%);\n color: var(--oc-fg-secondary, #6B6B6B);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 600;\n overflow: hidden;\n flex-shrink: 0;\n user-select: none;\n}\n\n.oc-avatar--square {\n border-radius: var(--oc-radius-md, 8px);\n}\n\n/* Sizes */\n.oc-avatar--xs { font-size: 10px; }\n.oc-avatar--sm { font-size: 12px; }\n.oc-avatar--md { font-size: 14px; }\n.oc-avatar--lg { font-size: 16px; }\n.oc-avatar--xl { font-size: 20px; }\n\n/* Accent variant (for AI/system) */\n.oc-avatar--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n/* Image */\n.oc-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Fallback */\n.oc-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n/* Status indicator */\n.oc-avatar__status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n border-radius: 50%;\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n.oc-avatar__status--online {\n background: var(--oc-success, #10B981);\n}\n\n.oc-avatar__status--offline {\n background: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-avatar__status--busy {\n background: var(--oc-error, #EF4444);\n}\n\n.oc-avatar__status--away {\n background: var(--oc-warning, #F59E0B);\n}\n\n/* AI Avatar */\n.oc-avatar--ai {\n background: var(--oc-accent);\n animation: oc-avatar-ai-pulse 3s ease-in-out infinite;\n}\n\n@keyframes oc-avatar-ai-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(8, 145, 178, 0);\n }\n}\n\n.oc-avatar__ai-icon {\n width: 60%;\n height: 60%;\n}\n\n/* Avatar Group */\n.oc-avatar-group {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-avatar-group__item {\n margin-left: -8px;\n}\n\n.oc-avatar-group__item:first-child {\n margin-left: 0;\n}\n\n.oc-avatar-group__item .oc-avatar {\n border: 2px solid white;\n box-sizing: content-box;\n}\n";
|
|
463
464
|
|
|
@@ -485,19 +486,19 @@ interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
485
486
|
static?: boolean;
|
|
486
487
|
children: ReactNode;
|
|
487
488
|
}
|
|
488
|
-
interface ChipGroupProps extends
|
|
489
|
+
interface ChipGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
489
490
|
/** Gap between chips */
|
|
490
491
|
gap?: 'sm' | 'md';
|
|
491
492
|
children: ReactNode;
|
|
492
493
|
}
|
|
493
|
-
declare const Chip:
|
|
494
|
-
declare const ChipGroup:
|
|
494
|
+
declare const Chip: React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
495
|
+
declare const ChipGroup: React__default.ForwardRefExoticComponent<ChipGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
495
496
|
/** Suggestion chip for prompts */
|
|
496
497
|
interface SuggestionChipProps extends Omit<ChipProps, 'variant' | 'color'> {
|
|
497
498
|
/** Prompt icon */
|
|
498
499
|
promptIcon?: boolean;
|
|
499
500
|
}
|
|
500
|
-
declare const SuggestionChip:
|
|
501
|
+
declare const SuggestionChip: React__default.ForwardRefExoticComponent<SuggestionChipProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
501
502
|
/** Filter chip with toggle behavior */
|
|
502
503
|
interface FilterChipProps extends Omit<ChipProps, 'variant'> {
|
|
503
504
|
/** Checked state */
|
|
@@ -505,7 +506,7 @@ interface FilterChipProps extends Omit<ChipProps, 'variant'> {
|
|
|
505
506
|
/** Change handler */
|
|
506
507
|
onCheckedChange?: (checked: boolean) => void;
|
|
507
508
|
}
|
|
508
|
-
declare const FilterChip:
|
|
509
|
+
declare const FilterChip: React__default.ForwardRefExoticComponent<FilterChipProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
509
510
|
|
|
510
511
|
declare const chipStyles = "\n/* Chip Component */\n.oc-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-chip--static {\n cursor: default;\n}\n\n/* Sizes */\n.oc-chip--sm {\n height: 24px;\n padding: 0 10px;\n font-size: 12px;\n}\n\n.oc-chip--md {\n height: 32px;\n padding: 0 14px;\n font-size: 13px;\n}\n\n.oc-chip--lg {\n height: 40px;\n padding: 0 18px;\n font-size: 14px;\n}\n\n/* Icons */\n.oc-chip__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-chip--sm .oc-chip__icon { margin-left: -2px; }\n.oc-chip--md .oc-chip__icon { margin-left: -4px; }\n.oc-chip--lg .oc-chip__icon { margin-left: -4px; }\n\n.oc-chip__icon--end {\n margin-left: 0 !important;\n}\n\n.oc-chip--sm .oc-chip__icon--end { margin-right: -2px; }\n.oc-chip--md .oc-chip__icon--end { margin-right: -4px; }\n.oc-chip--lg .oc-chip__icon--end { margin-right: -4px; }\n\n/* Label */\n.oc-chip__label {\n display: flex;\n align-items: center;\n}\n\n/* Remove button */\n.oc-chip__remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin-left: 2px;\n border: none;\n background: transparent;\n color: inherit;\n opacity: 0.6;\n cursor: pointer;\n border-radius: 50%;\n transition: opacity 0.15s ease, background 0.15s ease;\n}\n\n.oc-chip--sm .oc-chip__remove { margin-right: -4px; width: 16px; height: 16px; }\n.oc-chip--md .oc-chip__remove { margin-right: -6px; width: 20px; height: 20px; }\n.oc-chip--lg .oc-chip__remove { margin-right: -6px; width: 24px; height: 24px; }\n\n.oc-chip__remove:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n/* ========== VARIANTS ========== */\n\n/* Filled */\n.oc-chip--filled.oc-chip--default {\n background: var(--oc-fg-primary, #1A1A1A);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chip--filled.oc-chip--success {\n background: linear-gradient(135deg, var(--oc-success, #10B981) 0%, #059669 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--warning {\n background: linear-gradient(135deg, var(--oc-warning, #F59E0B) 0%, #D97706 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--error {\n background: linear-gradient(135deg, var(--oc-error, #EF4444) 0%, #DC2626 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--info {\n background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);\n color: white;\n}\n\n/* Soft */\n.oc-chip--soft.oc-chip--default {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chip--soft.oc-chip--accent {\n background: rgba(8, 145, 178, 0.1);\n color: var(--oc-accent);\n}\n\n.oc-chip--soft.oc-chip--success {\n background: var(--oc-success-bg, #ECFDF5);\n color: #059669;\n}\n\n.oc-chip--soft.oc-chip--warning {\n background: var(--oc-warning-bg, #FFFBEB);\n color: #B45309;\n}\n\n.oc-chip--soft.oc-chip--error {\n background: var(--oc-error-bg, #FEF2F2);\n color: #DC2626;\n}\n\n.oc-chip--soft.oc-chip--info {\n background: #EFF6FF;\n color: #2563EB;\n}\n\n/* Outlined */\n.oc-chip--outlined {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E5E5E5);\n}\n\n.oc-chip--outlined.oc-chip--default {\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n.oc-chip--outlined.oc-chip--accent {\n box-shadow: inset 0 0 0 1px var(--oc-accent);\n color: var(--oc-accent);\n}\n\n.oc-chip--outlined.oc-chip--success {\n box-shadow: inset 0 0 0 1px var(--oc-success, #10B981);\n color: #059669;\n}\n\n.oc-chip--outlined.oc-chip--warning {\n box-shadow: inset 0 0 0 1px var(--oc-warning, #F59E0B);\n color: #B45309;\n}\n\n.oc-chip--outlined.oc-chip--error {\n box-shadow: inset 0 0 0 1px var(--oc-error, #EF4444);\n color: #DC2626;\n}\n\n.oc-chip--outlined.oc-chip--info {\n box-shadow: inset 0 0 0 1px #3B82F6;\n color: #2563EB;\n}\n\n/* Hover states */\n.oc-chip:not(.oc-chip--static):hover {\n transform: translateY(-1px);\n}\n\n.oc-chip--soft:not(.oc-chip--static):hover {\n filter: brightness(0.95);\n}\n\n.oc-chip--outlined:not(.oc-chip--static):hover {\n background: var(--oc-bg-surface, #F8F8F8);\n}\n\n.oc-chip--filled:not(.oc-chip--static):hover {\n filter: brightness(1.05);\n}\n\n/* Selected state */\n.oc-chip--selected {\n box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);\n}\n\n/* Active state */\n.oc-chip:not(.oc-chip--static):active {\n transform: translateY(0);\n}\n\n/* Chip Group */\n.oc-chip-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.oc-chip-group--gap-sm {\n gap: 6px;\n}\n\n.oc-chip-group--gap-md {\n gap: 10px;\n}\n";
|
|
511
512
|
|
|
@@ -545,9 +546,9 @@ interface SourceListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
545
546
|
count?: number;
|
|
546
547
|
children: ReactNode;
|
|
547
548
|
}
|
|
548
|
-
declare const SourceCard:
|
|
549
|
-
declare const SourcePill:
|
|
550
|
-
declare const SourceList:
|
|
549
|
+
declare const SourceCard: React__default.ForwardRefExoticComponent<SourceCardProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
550
|
+
declare const SourcePill: React__default.ForwardRefExoticComponent<SourcePillProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
551
|
+
declare const SourceList: React__default.ForwardRefExoticComponent<SourceListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
551
552
|
/** Inline citation marker */
|
|
552
553
|
interface CitationProps extends HTMLAttributes<HTMLButtonElement> {
|
|
553
554
|
/** Citation number */
|
|
@@ -555,7 +556,7 @@ interface CitationProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
555
556
|
/** Click handler */
|
|
556
557
|
onClick?: () => void;
|
|
557
558
|
}
|
|
558
|
-
declare const Citation:
|
|
559
|
+
declare const Citation: React__default.ForwardRefExoticComponent<CitationProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
559
560
|
|
|
560
561
|
declare const sourceCardStyles = "\n/* Source Card */\n.oc-source-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-lg, 12px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: all 0.15s ease;\n}\n\n.oc-source-card--clickable {\n cursor: pointer;\n}\n\n.oc-source-card--clickable:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.oc-source-card--inline {\n padding: 8px 12px;\n display: inline-flex;\n gap: 8px;\n}\n\n/* Document icon */\n.oc-source__icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 8px);\n background: linear-gradient(135deg, var(--icon-color, #6B6B6B) 0%, color-mix(in srgb, var(--icon-color, #6B6B6B), black 20%) 100%);\n color: white;\n position: relative;\n}\n\n.oc-source-card--inline .oc-source__icon {\n width: 32px;\n height: 32px;\n}\n\n.oc-source__icon svg {\n opacity: 0.3;\n}\n\n.oc-source__icon-label {\n position: absolute;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.05em;\n}\n\n/* Content */\n.oc-source-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-source-card__header {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-source-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-card__ref {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n white-space: nowrap;\n}\n\n.oc-source-card__excerpt {\n margin: 6px 0 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Score */\n.oc-source-card__score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.oc-source-card__score-bar {\n width: 40px;\n height: 4px;\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-source-card__score-bar::after {\n content: '';\n display: block;\n width: var(--score, 0%);\n height: 100%;\n background: var(--oc-accent);\n border-radius: 2px;\n}\n\n.oc-source-card__score-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Arrow */\n.oc-source-card__arrow {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.15s ease;\n}\n\n.oc-source-card--clickable:hover .oc-source-card__arrow {\n transform: translateX(2px);\n color: var(--oc-accent);\n}\n\n/* Source Pill */\n.oc-source-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 28px;\n padding: 0 10px;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E5E5E5);\n border-radius: var(--oc-radius-md, 8px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-source-pill:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n border-color: var(--pill-color, var(--oc-border-strong, #CCCCCC));\n}\n\n.oc-source-pill__icon {\n display: flex;\n color: var(--pill-color, var(--oc-fg-tertiary, #9B9B9B));\n}\n\n.oc-source-pill__name {\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n max-width: 120px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-pill__ref {\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-weight: 400;\n}\n\n/* Source List */\n.oc-source-list {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-source-list__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.oc-source-list__title {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #6B6B6B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-source-list__count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-source-list__items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n/* Citation marker */\n.oc-citation {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin: 0 2px;\n background: var(--oc-accent);\n color: white;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n font-weight: 600;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n transition: all 0.15s ease;\n box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);\n}\n\n.oc-citation:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4);\n}\n";
|
|
561
562
|
|
|
@@ -579,7 +580,7 @@ interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
579
580
|
/** Message content */
|
|
580
581
|
children: ReactNode;
|
|
581
582
|
}
|
|
582
|
-
declare const ChatMessage:
|
|
583
|
+
declare const ChatMessage: React__default.ForwardRefExoticComponent<ChatMessageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
583
584
|
interface ThinkingBlockProps extends HTMLAttributes<HTMLDivElement> {
|
|
584
585
|
/** Title for the thinking section */
|
|
585
586
|
title?: string;
|
|
@@ -590,12 +591,12 @@ interface ThinkingBlockProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
590
591
|
/** Content of thinking */
|
|
591
592
|
children?: ReactNode;
|
|
592
593
|
}
|
|
593
|
-
declare const ThinkingBlock:
|
|
594
|
+
declare const ThinkingBlock: React__default.ForwardRefExoticComponent<ThinkingBlockProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
594
595
|
interface TypingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
|
|
595
596
|
/** Who is typing */
|
|
596
597
|
label?: string;
|
|
597
598
|
}
|
|
598
|
-
declare const TypingIndicator:
|
|
599
|
+
declare const TypingIndicator: React__default.ForwardRefExoticComponent<TypingIndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
599
600
|
type TaskStatus = 'pending' | 'running' | 'completed' | 'error';
|
|
600
601
|
interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
601
602
|
/** Task title */
|
|
@@ -609,11 +610,11 @@ interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
609
610
|
/** Icon */
|
|
610
611
|
icon?: ReactNode;
|
|
611
612
|
}
|
|
612
|
-
declare const TaskCard:
|
|
613
|
+
declare const TaskCard: React__default.ForwardRefExoticComponent<TaskCardProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
613
614
|
interface MessageActionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
614
615
|
children: ReactNode;
|
|
615
616
|
}
|
|
616
|
-
declare const MessageActions:
|
|
617
|
+
declare const MessageActions: React__default.ForwardRefExoticComponent<MessageActionsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
617
618
|
interface ActionButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
618
619
|
/** Icon */
|
|
619
620
|
icon: ReactNode;
|
|
@@ -622,7 +623,7 @@ interface ActionButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
622
623
|
/** Active state */
|
|
623
624
|
active?: boolean;
|
|
624
625
|
}
|
|
625
|
-
declare const ActionButton:
|
|
626
|
+
declare const ActionButton: React__default.ForwardRefExoticComponent<ActionButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
626
627
|
interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'onSubmit'> {
|
|
627
628
|
/** Current value */
|
|
628
629
|
value?: string;
|
|
@@ -641,12 +642,12 @@ interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement
|
|
|
641
642
|
/** Suggestion chips above input */
|
|
642
643
|
suggestions?: ReactNode;
|
|
643
644
|
}
|
|
644
|
-
declare const ChatInput:
|
|
645
|
+
declare const ChatInput: React__default.ForwardRefExoticComponent<ChatInputProps & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
645
646
|
interface ChatContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
646
647
|
children: ReactNode;
|
|
647
648
|
}
|
|
648
|
-
declare const ChatContainer:
|
|
649
|
-
declare const ChatMessages:
|
|
649
|
+
declare const ChatContainer: React__default.ForwardRefExoticComponent<ChatContainerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
650
|
+
declare const ChatMessages: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
650
651
|
|
|
651
652
|
declare const chatStyles = "\n/* ============ Chat Container ============ */\n.oc-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ============ Chat Message ============ */\n.oc-chat-message {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: oc-message-in 0.3s ease;\n}\n\n@keyframes oc-message-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-chat-message__avatar {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.oc-chat-message__container {\n flex: 1;\n min-width: 0;\n max-width: 720px;\n}\n\n/* User messages */\n.oc-chat-message--user {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message--user .oc-chat-message__container {\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n}\n\n/* Header */\n.oc-chat-message__header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-chat-message--user .oc-chat-message__header {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message__name {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Bubble */\n.oc-chat-message__bubble {\n position: relative;\n padding: 14px 18px;\n border-radius: 18px;\n line-height: 1.6;\n}\n\n.oc-chat-message--assistant .oc-chat-message__bubble {\n background: var(--oc-bg-surface, #F8F8F8);\n border-top-left-radius: 4px;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message--user .oc-chat-message__bubble {\n background: var(--oc-accent);\n border-top-right-radius: 4px;\n color: white;\n box-shadow: 0 2px 12px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chat-message--system .oc-chat-message__bubble {\n background: transparent;\n padding: 8px 0;\n text-align: center;\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-size: 13px;\n}\n\n.oc-chat-message__content {\n font-size: 15px;\n}\n\n.oc-chat-message__content p {\n margin: 0 0 12px;\n}\n\n.oc-chat-message__content p:last-child {\n margin-bottom: 0;\n}\n\n/* Streaming cursor */\n.oc-chat-message__cursor {\n display: inline-block;\n width: 2px;\n height: 1.1em;\n background: var(--oc-accent);\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: oc-cursor-blink 1s ease infinite;\n}\n\n@keyframes oc-cursor-blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Actions */\n.oc-chat-message__actions {\n margin-top: 8px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-chat-message:hover .oc-chat-message__actions {\n opacity: 1;\n}\n\n/* Error state */\n.oc-chat-message__error {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 13px;\n color: var(--oc-error, #EF4444);\n}\n\n/* ============ Typing Indicator ============ */\n.oc-typing-indicator {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0;\n}\n\n.oc-typing-indicator__dots {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: 18px;\n border-top-left-radius: 4px;\n}\n\n.oc-typing-indicator__dot {\n width: 8px;\n height: 8px;\n background: var(--oc-fg-tertiary, #9B9B9B);\n border-radius: 50%;\n animation: oc-typing-bounce 1.4s ease infinite;\n}\n\n.oc-typing-indicator__dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.oc-typing-indicator__dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes oc-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n background: var(--oc-fg-tertiary);\n }\n 30% {\n transform: translateY(-8px);\n background: var(--oc-accent);\n }\n}\n\n.oc-typing-indicator__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n/* ============ Thinking Block ============ */\n.oc-thinking-block {\n background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);\n border: 1px solid rgba(8, 145, 178, 0.15);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n margin: 12px 0;\n}\n\n.oc-thinking-block__header {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n text-align: left;\n}\n\n.oc-thinking-block__indicator {\n display: flex;\n gap: 3px;\n}\n\n.oc-thinking-block__dot {\n width: 6px;\n height: 6px;\n background: var(--oc-accent);\n border-radius: 50%;\n animation: oc-thinking-pulse 1.5s ease infinite;\n}\n\n.oc-thinking-block__dot:nth-child(2) { animation-delay: 0.3s; }\n.oc-thinking-block__dot:nth-child(3) { animation-delay: 0.6s; }\n\n@keyframes oc-thinking-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.2); }\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__dot {\n animation: none;\n opacity: 0.5;\n}\n\n.oc-thinking-block__title {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent);\n}\n\n.oc-thinking-block__chevron {\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.2s ease;\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__chevron {\n transform: rotate(180deg);\n}\n\n.oc-thinking-block__content {\n padding: 0 16px 16px;\n font-size: 13px;\n color: var(--oc-fg-secondary);\n line-height: 1.6;\n border-top: 1px solid rgba(8, 145, 178, 0.1);\n margin-top: 0;\n padding-top: 12px;\n}\n\n/* ============ Task Card ============ */\n.oc-task-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n border-left: 3px solid var(--oc-border-default);\n}\n\n.oc-task-card--running {\n border-left-color: var(--oc-accent);\n background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, var(--oc-bg-surface) 100%);\n}\n\n.oc-task-card--completed {\n border-left-color: var(--oc-success, #10B981);\n}\n\n.oc-task-card--error {\n border-left-color: var(--oc-error, #EF4444);\n}\n\n.oc-task-card__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-task-card--pending .oc-task-card__icon { color: var(--oc-fg-tertiary); }\n.oc-task-card--running .oc-task-card__icon { color: var(--oc-accent); }\n.oc-task-card--completed .oc-task-card__icon { color: var(--oc-success); }\n.oc-task-card--error .oc-task-card__icon { color: var(--oc-error); }\n\n.oc-task-card__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(8, 145, 178, 0.2);\n border-top-color: var(--oc-accent);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n@keyframes oc-spin {\n to { transform: rotate(360deg); }\n}\n\n.oc-task-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-task-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-task-card__desc {\n font-size: 13px;\n color: var(--oc-fg-secondary);\n margin-top: 2px;\n}\n\n.oc-task-card__progress {\n margin-top: 8px;\n height: 4px;\n background: var(--oc-border-default);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-task-card__progress-bar {\n height: 100%;\n width: var(--progress, 0%);\n background: var(--oc-accent);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* ============ Message Actions ============ */\n.oc-message-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-action-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-action-button:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n}\n\n.oc-action-button--active {\n color: var(--oc-accent);\n}\n\n.oc-action-button--active:hover {\n color: var(--oc-accent);\n background: rgba(8, 145, 178, 0.1);\n}\n\n/* ============ Chat Input ============ */\n.oc-chat-input {\n flex-shrink: 0;\n padding: 16px 24px 24px;\n background: var(--oc-bg-canvas);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-chat-input__suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.oc-chat-input__container {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface);\n border-radius: 24px;\n border: 1px solid transparent;\n transition: all 0.2s ease;\n}\n\n.oc-chat-input__container:focus-within {\n background: var(--oc-bg-canvas);\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-chat-input__left,\n.oc-chat-input__right {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-chat-input__textarea {\n flex: 1;\n min-height: 24px;\n max-height: 200px;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n line-height: 1.5;\n color: var(--oc-fg-primary);\n resize: none;\n outline: none;\n}\n\n.oc-chat-input__textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-chat-input__send {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--oc-accent);\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n.oc-chat-input__send:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);\n}\n\n.oc-chat-input__send:disabled {\n background: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n box-shadow: none;\n cursor: not-allowed;\n}\n\n.oc-chat-input__spinner {\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n/* Loading state */\n.oc-chat-input--loading .oc-chat-input__container {\n opacity: 0.7;\n}\n";
|
|
652
653
|
|
|
@@ -669,13 +670,13 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
669
670
|
'aria-label': string;
|
|
670
671
|
children: ReactNode;
|
|
671
672
|
}
|
|
672
|
-
interface ButtonGroupProps extends
|
|
673
|
+
interface ButtonGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
673
674
|
attached?: boolean;
|
|
674
675
|
children?: ReactNode;
|
|
675
676
|
}
|
|
676
|
-
declare const Button:
|
|
677
|
-
declare const IconButton:
|
|
678
|
-
declare const ButtonGroup:
|
|
677
|
+
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
678
|
+
declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
679
|
+
declare const ButtonGroup: React__default.ForwardRefExoticComponent<ButtonGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
679
680
|
|
|
680
681
|
declare const buttonStyles = "\n/* Button */\n.oc-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n border: none;\n border-radius: var(--oc-radius-md);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.oc-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.oc-button--sm {\n height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-button--md {\n height: 36px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-button--lg {\n height: 44px;\n padding: 0 var(--oc-spacing-lg);\n font-size: var(--oc-font-size-md);\n}\n\n/* Primary variant - flat, modern */\n.oc-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n box-shadow: var(--oc-shadow-sm);\n}\n\n.oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-hover);\n box-shadow: var(--oc-shadow-md);\n transform: translateY(-1px);\n}\n\n.oc-button--primary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-active);\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Secondary variant */\n.oc-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-button--secondary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-button--secondary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Ghost variant */\n.oc-button--ghost {\n background: transparent;\n color: var(--oc-fg-primary);\n}\n\n.oc-button--ghost:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n}\n\n.oc-button--ghost:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Danger variant */\n.oc-button--danger {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-button--danger:hover:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.9);\n}\n\n.oc-button--danger:active:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.85);\n}\n\n/* Link variant */\n.oc-button--link {\n background: transparent;\n color: var(--oc-accent);\n padding: 0;\n height: auto;\n}\n\n.oc-button--link:hover:not(:disabled):not(.oc-button--loading) {\n color: var(--oc-accent-hover);\n text-decoration: underline;\n}\n\n/* States */\n.oc-button--full-width {\n width: 100%;\n}\n\n.oc-button--disabled,\n.oc-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-button--loading {\n cursor: wait;\n}\n\n.oc-button--loading .oc-button__label {\n opacity: var(--oc-opacity-loading);\n}\n\n/* Button parts */\n.oc-button__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-button__spinner-icon {\n width: 16px;\n height: 16px;\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n.oc-button__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-button__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-button--lg .oc-button__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton */\n.oc-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-icon-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* IconButton sizes */\n.oc-icon-button--sm {\n width: 28px;\n height: 28px;\n}\n\n.oc-icon-button--md {\n width: 32px;\n height: 32px;\n}\n\n.oc-icon-button--lg {\n width: 40px;\n height: 40px;\n}\n\n.oc-icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-icon-button--lg svg {\n width: 20px;\n height: 20px;\n}\n\n/* IconButton variants */\n.oc-icon-button--ghost:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-icon-button--ghost:active:not(:disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-icon-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-icon-button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover);\n}\n\n.oc-icon-button--primary:active:not(:disabled) {\n background: var(--oc-accent-active);\n}\n\n.oc-icon-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-icon-button--secondary:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-icon-button--danger {\n color: var(--oc-error);\n}\n\n.oc-icon-button--danger:hover:not(:disabled) {\n background: var(--oc-error-bg);\n}\n\n.oc-icon-button--link {\n color: var(--oc-accent);\n}\n\n.oc-icon-button--link:hover:not(:disabled) {\n color: var(--oc-accent-hover);\n}\n\n.oc-icon-button--disabled,\n.oc-icon-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-icon-button--loading {\n cursor: wait;\n}\n\n.oc-icon-button__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* ButtonGroup */\n.oc-button-group {\n display: inline-flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-button-group--attached {\n gap: 0;\n}\n\n.oc-button-group--attached > .oc-button {\n border-radius: 0;\n}\n\n.oc-button-group--attached > .oc-button:first-child {\n border-radius: var(--oc-radius-md) 0 0 var(--oc-radius-md);\n}\n\n.oc-button-group--attached > .oc-button:last-child {\n border-radius: 0 var(--oc-radius-md) var(--oc-radius-md) 0;\n}\n\n.oc-button-group--attached > .oc-button--secondary:not(:first-child) {\n border-left: none;\n}\n";
|
|
681
682
|
|
|
@@ -691,7 +692,7 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>
|
|
|
691
692
|
rightAddon?: ReactNode;
|
|
692
693
|
fullWidth?: boolean;
|
|
693
694
|
}
|
|
694
|
-
declare const Input:
|
|
695
|
+
declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
695
696
|
|
|
696
697
|
declare const inputStyles = "\n/* Input wrapper */\n.oc-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-input-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Input container */\n.oc-input-container {\n display: flex;\n align-items: stretch;\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-input-container:focus-within {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-input-container--error {\n border-color: var(--oc-error);\n}\n\n.oc-input-container--error:focus-within {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-input-container--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-input-container--sm {\n min-height: 32px;\n}\n\n.oc-input-container--md {\n min-height: 36px;\n}\n\n.oc-input-container--lg {\n min-height: 44px;\n}\n\n/* Field wrapper */\n.oc-input-field {\n display: flex;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* Input element */\n.oc-input {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n padding: 0 var(--oc-spacing-sm);\n outline: none;\n}\n\n.oc-input-container--sm .oc-input {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-input-container--lg .oc-input {\n font-size: var(--oc-font-size-md);\n padding: 0 var(--oc-spacing-md);\n}\n\n.oc-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-input:disabled {\n cursor: not-allowed;\n}\n\n.oc-input--has-left-icon {\n padding-left: calc(var(--oc-spacing-sm) + 24px);\n}\n\n.oc-input--has-right-icon {\n padding-right: calc(var(--oc-spacing-sm) + 24px);\n}\n\n/* Icons */\n.oc-input-icon {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n pointer-events: none;\n}\n\n.oc-input-icon--left {\n left: var(--oc-spacing-sm);\n}\n\n.oc-input-icon--right {\n right: var(--oc-spacing-sm);\n}\n\n.oc-input-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Addons */\n.oc-input-addon {\n display: flex;\n align-items: center;\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n border-color: inherit;\n white-space: nowrap;\n}\n\n.oc-input-addon--left {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-input-addon--right {\n border-left: 1px solid var(--oc-border-default);\n}\n\n/* Helper and error text */\n.oc-input-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-input-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
|
|
697
698
|
|
|
@@ -703,7 +704,7 @@ interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
|
703
704
|
maxRows?: number;
|
|
704
705
|
fullWidth?: boolean;
|
|
705
706
|
}
|
|
706
|
-
declare const Textarea:
|
|
707
|
+
declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
707
708
|
|
|
708
709
|
declare const textareaStyles = "\n/* Textarea wrapper */\n.oc-textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-textarea-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-textarea-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Textarea element */\n.oc-textarea {\n width: 100%;\n padding: var(--oc-spacing-sm);\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n line-height: var(--oc-line-height-normal);\n color: var(--oc-fg-primary);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n resize: vertical;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-textarea:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-textarea--error {\n border-color: var(--oc-error);\n}\n\n.oc-textarea--error:focus {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-textarea--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n resize: none;\n}\n\n.oc-textarea--auto-resize {\n resize: none;\n overflow-y: hidden;\n}\n\n/* Helper and error text */\n.oc-textarea-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-textarea-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
|
|
709
710
|
|
|
@@ -735,7 +736,7 @@ interface SelectProps {
|
|
|
735
736
|
className?: string;
|
|
736
737
|
id?: string;
|
|
737
738
|
}
|
|
738
|
-
declare const Select:
|
|
739
|
+
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
739
740
|
|
|
740
741
|
declare const selectStyles = "\n/* Select wrapper */\n.oc-select-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n position: relative;\n}\n\n.oc-select-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-select-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Trigger */\n.oc-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--sm {\n min-height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-select-trigger--md {\n min-height: 36px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-select-trigger--lg {\n min-height: 44px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-md);\n}\n\n.oc-select-trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--error {\n border-color: var(--oc-error);\n}\n\n.oc-select-trigger--error:focus,\n.oc-select-trigger--error.oc-select-trigger--open {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-select-trigger--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Value and placeholder */\n.oc-select-value {\n flex: 1;\n color: var(--oc-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-select-placeholder {\n flex: 1;\n color: var(--oc-fg-tertiary);\n}\n\n/* Search input */\n.oc-select-search {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-select-search::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Indicators */\n.oc-select-indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n}\n\n.oc-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n padding: 0;\n}\n\n.oc-select-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-select-chevron {\n color: var(--oc-fg-tertiary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger--open .oc-select-chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.oc-select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n list-style: none;\n}\n\n/* Option */\n.oc-select-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-option:hover,\n.oc-select-option--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-select-option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-select-option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-select-option--disabled:hover {\n background: transparent;\n}\n\n.oc-select-check {\n flex-shrink: 0;\n color: var(--oc-accent);\n}\n\n/* Option group */\n.oc-select-group {\n list-style: none;\n}\n\n.oc-select-group:not(:first-child) {\n margin-top: var(--oc-spacing-xs);\n padding-top: var(--oc-spacing-xs);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-select-group-label {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-select-group-options {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Empty state */\n.oc-select-empty {\n padding: var(--oc-spacing-md);\n text-align: center;\n color: var(--oc-fg-tertiary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* Helper and error text */\n.oc-select-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-select-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
|
|
741
742
|
|
|
@@ -752,8 +753,8 @@ interface CheckboxGroupProps {
|
|
|
752
753
|
className?: string;
|
|
753
754
|
children?: ReactNode;
|
|
754
755
|
}
|
|
755
|
-
declare const Checkbox:
|
|
756
|
-
declare const CheckboxGroup:
|
|
756
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
757
|
+
declare const CheckboxGroup: React__default.ForwardRefExoticComponent<CheckboxGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
757
758
|
|
|
758
759
|
declare const checkboxStyles = "\n/* Checkbox wrapper */\n.oc-checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-checkbox-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-checkbox-wrapper--error .oc-checkbox-box {\n border-color: var(--oc-error);\n}\n\n/* Checkbox box */\n.oc-checkbox-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-sm);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-checkbox-box--checked,\n.oc-checkbox-box--indeterminate {\n background: var(--oc-accent);\n border-color: var(--oc-accent);\n}\n\n.oc-checkbox-wrapper:hover:not(.oc-checkbox-wrapper--disabled) .oc-checkbox-box:not(.oc-checkbox-box--checked):not(.oc-checkbox-box--indeterminate) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-checkbox-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-checkbox-input:focus-visible + .oc-checkbox-icon,\n.oc-checkbox-box:has(.oc-checkbox-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Check icon */\n.oc-checkbox-icon {\n width: 12px;\n height: 12px;\n color: var(--oc-fg-inverse);\n pointer-events: none;\n}\n\n/* Label */\n.oc-checkbox-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Checkbox group */\n.oc-checkbox-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-checkbox-group--vertical {\n flex-direction: column;\n}\n\n.oc-checkbox-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n";
|
|
759
760
|
|
|
@@ -770,8 +771,8 @@ interface RadioGroupProps {
|
|
|
770
771
|
className?: string;
|
|
771
772
|
children?: ReactNode;
|
|
772
773
|
}
|
|
773
|
-
declare const Radio:
|
|
774
|
-
declare const RadioGroup:
|
|
774
|
+
declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
775
|
+
declare const RadioGroup: React__default.ForwardRefExoticComponent<RadioGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
775
776
|
|
|
776
777
|
declare const radioStyles = "\n/* Radio wrapper */\n.oc-radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-radio-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-radio-wrapper--error .oc-radio-circle {\n border-color: var(--oc-error);\n}\n\n/* Radio circle */\n.oc-radio-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-full);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-radio-circle--checked {\n border-color: var(--oc-accent);\n}\n\n.oc-radio-wrapper:hover:not(.oc-radio-wrapper--disabled) .oc-radio-circle:not(.oc-radio-circle--checked) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-radio-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-radio-circle:has(.oc-radio-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Dot */\n.oc-radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n}\n\n/* Label */\n.oc-radio-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Radio group */\n.oc-radio-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-radio-group--vertical {\n flex-direction: column;\n}\n\n.oc-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n";
|
|
777
778
|
|
|
@@ -782,8 +783,8 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
|
|
|
782
783
|
size?: ToggleSize;
|
|
783
784
|
error?: boolean;
|
|
784
785
|
}
|
|
785
|
-
declare const Toggle:
|
|
786
|
-
declare const Switch:
|
|
786
|
+
declare const Toggle: React__default.ForwardRefExoticComponent<ToggleProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
787
|
+
declare const Switch: React__default.ForwardRefExoticComponent<ToggleProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
787
788
|
|
|
788
789
|
declare const toggleStyles = "\n/* Toggle wrapper */\n.oc-toggle-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-toggle-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Toggle track */\n.oc-toggle-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--oc-border-default);\n border-radius: var(--oc-radius-full);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-toggle-track--sm {\n width: 28px;\n height: 16px;\n}\n\n.oc-toggle-track--md {\n width: 36px;\n height: 20px;\n}\n\n.oc-toggle-track--lg {\n width: 44px;\n height: 24px;\n}\n\n.oc-toggle-track--checked {\n background: var(--oc-accent);\n}\n\n.oc-toggle-track--error {\n background: var(--oc-error);\n}\n\n.oc-toggle-wrapper:hover:not(.oc-toggle-wrapper--disabled) .oc-toggle-track:not(.oc-toggle-track--checked) {\n background: var(--oc-border-strong);\n}\n\n/* Hidden input */\n.oc-toggle-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-toggle-track:has(.oc-toggle-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Toggle thumb */\n.oc-toggle-thumb {\n position: absolute;\n background: var(--oc-fg-inverse);\n border-radius: var(--oc-radius-full);\n box-shadow: var(--oc-shadow-sm);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toggle-track--sm .oc-toggle-thumb {\n width: 12px;\n height: 12px;\n left: 2px;\n}\n\n.oc-toggle-track--md .oc-toggle-thumb {\n width: 16px;\n height: 16px;\n left: 2px;\n}\n\n.oc-toggle-track--lg .oc-toggle-thumb {\n width: 20px;\n height: 20px;\n left: 2px;\n}\n\n.oc-toggle-track--checked.oc-toggle-track--sm .oc-toggle-thumb {\n transform: translateX(12px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--md .oc-toggle-thumb {\n transform: translateX(16px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--lg .oc-toggle-thumb {\n transform: translateX(20px);\n}\n\n/* Content */\n.oc-toggle-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-toggle-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toggle-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n line-height: var(--oc-line-height-tight);\n}\n";
|
|
789
790
|
|
|
@@ -796,7 +797,7 @@ interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
796
797
|
optional?: boolean;
|
|
797
798
|
children?: ReactNode;
|
|
798
799
|
}
|
|
799
|
-
declare const FormField:
|
|
800
|
+
declare const FormField: React__default.ForwardRefExoticComponent<FormFieldProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
800
801
|
|
|
801
802
|
declare const formFieldStyles = "\n/* Form field */\n.oc-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Label */\n.oc-form-field__label {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-form-field__required {\n color: var(--oc-error);\n}\n\n.oc-form-field__optional {\n font-weight: 400;\n color: var(--oc-fg-tertiary);\n}\n\n/* Control */\n.oc-form-field__control {\n display: flex;\n flex-direction: column;\n}\n\n/* Helper text */\n.oc-form-field__helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n/* Error text */\n.oc-form-field__error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
|
|
802
803
|
|
|
@@ -823,7 +824,7 @@ declare const useToast: () => {
|
|
|
823
824
|
info: (title: string, options?: Omit<ToastProps, "id" | "title" | "variant">) => string;
|
|
824
825
|
dismiss: (id: string) => void;
|
|
825
826
|
};
|
|
826
|
-
declare const Toast:
|
|
827
|
+
declare const Toast: React__default.ForwardRefExoticComponent<ToastProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
827
828
|
declare const ToastProvider: ({ position, children }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
|
|
828
829
|
|
|
829
830
|
declare const toastStyles = "\n/* Toast container */\n.oc-toast-container {\n position: fixed;\n z-index: var(--oc-z-tooltip);\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n}\n\n.oc-toast-container--top-right {\n top: 0;\n right: 0;\n}\n\n.oc-toast-container--top-left {\n top: 0;\n left: 0;\n}\n\n.oc-toast-container--bottom-right {\n bottom: 0;\n right: 0;\n}\n\n.oc-toast-container--bottom-left {\n bottom: 0;\n left: 0;\n}\n\n.oc-toast-container--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.oc-toast-container--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* Toast */\n.oc-toast {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n pointer-events: auto;\n animation: oc-slide-up-fade var(--oc-duration-normal) var(--oc-easing-enter);\n}\n\n/* Toast icon */\n.oc-toast__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-toast--success .oc-toast__icon {\n color: var(--oc-success);\n}\n\n.oc-toast--error .oc-toast__icon {\n color: var(--oc-error);\n}\n\n.oc-toast--warning .oc-toast__icon {\n color: var(--oc-warning);\n}\n\n.oc-toast--info .oc-toast__icon {\n color: var(--oc-accent);\n}\n\n/* Toast content */\n.oc-toast__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-toast__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toast__description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n margin-top: 2px;\n}\n\n/* Toast action */\n.oc-toast__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n/* Toast close button */\n.oc-toast__close {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toast__close:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n";
|
|
@@ -836,26 +837,26 @@ interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
836
837
|
width?: number | string;
|
|
837
838
|
height?: number | string;
|
|
838
839
|
}
|
|
839
|
-
declare const Skeleton:
|
|
840
|
+
declare const Skeleton: React__default.ForwardRefExoticComponent<SkeletonProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
840
841
|
interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
|
|
841
842
|
lines?: number;
|
|
842
843
|
lastLineWidth?: string;
|
|
843
844
|
}
|
|
844
|
-
declare const SkeletonText:
|
|
845
|
-
declare const SkeletonAvatar:
|
|
846
|
-
declare const SkeletonButton:
|
|
847
|
-
declare const DocumentCardSkeleton:
|
|
848
|
-
declare const TableRowSkeleton:
|
|
845
|
+
declare const SkeletonText: React__default.ForwardRefExoticComponent<SkeletonTextProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
846
|
+
declare const SkeletonAvatar: React__default.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
847
|
+
declare const SkeletonButton: React__default.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
848
|
+
declare const DocumentCardSkeleton: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
849
|
+
declare const TableRowSkeleton: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
|
|
849
850
|
columns?: number;
|
|
850
|
-
} &
|
|
851
|
-
declare const ChatMessageSkeleton:
|
|
851
|
+
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
852
|
+
declare const ChatMessageSkeleton: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
852
853
|
|
|
853
854
|
declare const skeletonStyles = "\n/* Skeleton base */\n.oc-skeleton {\n background: var(--oc-bg-surface);\n display: block;\n}\n\n/* Variants */\n.oc-skeleton--text {\n height: 1em;\n border-radius: var(--oc-radius-sm);\n transform-origin: 0 55%;\n transform: scale(1, 0.8);\n}\n\n.oc-skeleton--circular {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-skeleton--rectangular {\n border-radius: 0;\n}\n\n.oc-skeleton--rounded {\n border-radius: var(--oc-radius-md);\n}\n\n/* Animations */\n.oc-skeleton--pulse {\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.oc-skeleton--wave {\n position: relative;\n overflow: hidden;\n}\n\n.oc-skeleton--wave::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.5),\n transparent\n );\n animation: oc-skeleton-wave 1.5s linear infinite;\n}\n\n@keyframes oc-skeleton-wave {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* Skeleton text */\n.oc-skeleton-text {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Document card skeleton */\n.oc-skeleton-document-card {\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n width: 200px;\n}\n\n.oc-skeleton-document-card__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm);\n}\n\n/* Table row skeleton */\n.oc-skeleton-table-row {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-skeleton-table-row > .oc-skeleton {\n flex: 1;\n}\n\n/* Chat message skeleton */\n.oc-skeleton-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-skeleton-chat-message__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n flex: 1;\n}\n";
|
|
854
855
|
|
|
855
856
|
interface SearchSuggestion {
|
|
856
857
|
id: string;
|
|
857
858
|
label: string;
|
|
858
|
-
icon?:
|
|
859
|
+
icon?: React__default.ReactNode;
|
|
859
860
|
}
|
|
860
861
|
interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'> {
|
|
861
862
|
shortcut?: string;
|
|
@@ -866,7 +867,7 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
|
|
|
866
867
|
loading?: boolean;
|
|
867
868
|
fullWidth?: boolean;
|
|
868
869
|
}
|
|
869
|
-
declare const SearchInput:
|
|
870
|
+
declare const SearchInput: React__default.ForwardRefExoticComponent<SearchInputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
870
871
|
|
|
871
872
|
declare const searchInputStyles = "\n/* Search input wrapper */\n.oc-search-input-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n\n.oc-search-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Search input container */\n.oc-search-input-container {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n min-height: 36px;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-container--focused {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n/* Search icon */\n.oc-search-input-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* Input field */\n.oc-search-input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n}\n\n.oc-search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Clear button */\n.oc-search-input-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-search-input-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n/* Shortcut badge */\n.oc-search-input-shortcut {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 6px;\n font-family: inherit;\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n}\n\n/* Dropdown */\n.oc-search-input-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 300px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n}\n\n.oc-search-input-dropdown-header {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-search-input-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: var(--oc-spacing-sm);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n text-align: left;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-dropdown-item:hover,\n.oc-search-input-dropdown-item--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-search-input-dropdown-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-dropdown-item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
872
873
|
|
|
@@ -892,9 +893,9 @@ interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
892
893
|
size?: ProgressSize | number;
|
|
893
894
|
color?: string;
|
|
894
895
|
}
|
|
895
|
-
declare const Progress:
|
|
896
|
-
declare const ProgressCircle:
|
|
897
|
-
declare const Spinner:
|
|
896
|
+
declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
897
|
+
declare const ProgressCircle: React__default.ForwardRefExoticComponent<ProgressCircleProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
898
|
+
declare const Spinner: React__default.ForwardRefExoticComponent<SpinnerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
898
899
|
|
|
899
900
|
declare const progressStyles = "\n/* Progress bar */\n.oc-progress {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n}\n\n.oc-progress__track {\n flex: 1;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-full);\n overflow: hidden;\n}\n\n.oc-progress--sm .oc-progress__track {\n height: 4px;\n}\n\n.oc-progress--md .oc-progress__track {\n height: 6px;\n}\n\n.oc-progress--lg .oc-progress__track {\n height: 8px;\n}\n\n.oc-progress__bar {\n height: 100%;\n border-radius: var(--oc-radius-full);\n transition: width var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress--accent .oc-progress__bar {\n background: var(--oc-accent);\n}\n\n.oc-progress--success .oc-progress__bar {\n background: var(--oc-success);\n}\n\n.oc-progress--warning .oc-progress__bar {\n background: var(--oc-warning);\n}\n\n.oc-progress--error .oc-progress__bar {\n background: var(--oc-error);\n}\n\n/* Indeterminate animation */\n.oc-progress--indeterminate .oc-progress__bar {\n width: 30%;\n animation: oc-progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(200%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}\n\n.oc-progress__label {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n min-width: 3ch;\n text-align: right;\n}\n\n/* Progress circle */\n.oc-progress-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-progress-circle__track {\n stroke: var(--oc-bg-surface);\n}\n\n.oc-progress-circle__bar {\n transition: stroke-dashoffset var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress-circle--accent .oc-progress-circle__bar {\n stroke: var(--oc-accent);\n}\n\n.oc-progress-circle--success .oc-progress-circle__bar {\n stroke: var(--oc-success);\n}\n\n.oc-progress-circle--warning .oc-progress-circle__bar {\n stroke: var(--oc-warning);\n}\n\n.oc-progress-circle--error .oc-progress-circle__bar {\n stroke: var(--oc-error);\n}\n\n.oc-progress-circle__label {\n position: absolute;\n font-size: var(--oc-font-size-xs);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Spinner */\n.oc-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-accent);\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n";
|
|
900
901
|
|
|
@@ -907,7 +908,7 @@ interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
907
908
|
secondaryAction?: ReactNode;
|
|
908
909
|
size?: EmptyStateSize;
|
|
909
910
|
}
|
|
910
|
-
declare const EmptyState:
|
|
911
|
+
declare const EmptyState: React__default.ForwardRefExoticComponent<EmptyStateProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
911
912
|
declare const EmptyDocumentIcon: () => react_jsx_runtime.JSX.Element;
|
|
912
913
|
declare const EmptySearchIcon: () => react_jsx_runtime.JSX.Element;
|
|
913
914
|
declare const EmptyFolderIcon: () => react_jsx_runtime.JSX.Element;
|
|
@@ -934,8 +935,8 @@ interface BannerProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
934
935
|
onDismiss?: () => void;
|
|
935
936
|
children?: ReactNode;
|
|
936
937
|
}
|
|
937
|
-
declare const Alert:
|
|
938
|
-
declare const Banner:
|
|
938
|
+
declare const Alert: React__default.ForwardRefExoticComponent<AlertProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
939
|
+
declare const Banner: React__default.ForwardRefExoticComponent<BannerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
939
940
|
|
|
940
941
|
declare const alertStyles = "\n/* Alert */\n.oc-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-radius: var(--oc-radius-md);\n border: 1px solid;\n}\n\n.oc-alert--info {\n background: rgba(8, 145, 178, 0.06);\n border-color: rgba(8, 145, 178, 0.2);\n}\n\n.oc-alert--success {\n background: var(--oc-success-bg);\n border-color: rgba(5, 150, 105, 0.2);\n}\n\n.oc-alert--warning {\n background: var(--oc-warning-bg);\n border-color: rgba(217, 119, 6, 0.2);\n}\n\n.oc-alert--error {\n background: var(--oc-error-bg);\n border-color: rgba(220, 38, 38, 0.2);\n}\n\n.oc-alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-alert--info .oc-alert__icon {\n color: var(--oc-accent);\n}\n\n.oc-alert--success .oc-alert__icon {\n color: var(--oc-success);\n}\n\n.oc-alert--warning .oc-alert__icon {\n color: var(--oc-warning);\n}\n\n.oc-alert--error .oc-alert__icon {\n color: var(--oc-error);\n}\n\n.oc-alert__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-alert__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__description {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__title + .oc-alert__description {\n margin-top: 2px;\n}\n\n.oc-alert__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n.oc-alert__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-alert__dismiss:hover {\n background: rgba(0, 0, 0, 0.05);\n color: var(--oc-fg-primary);\n}\n\n/* Banner */\n.oc-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n width: 100%;\n}\n\n.oc-banner--info {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--success {\n background: var(--oc-success);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--warning {\n background: var(--oc-warning);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--error {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner__content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n justify-content: center;\n}\n\n.oc-banner__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-banner__text {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n}\n\n.oc-banner__action {\n display: flex;\n align-items: center;\n}\n\n.oc-banner__action button,\n.oc-banner__action a {\n color: inherit;\n text-decoration: underline;\n font-weight: 600;\n}\n\n.oc-banner__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n opacity: 0.8;\n transition: opacity var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-banner__dismiss:hover {\n opacity: 1;\n}\n";
|
|
941
942
|
|
|
@@ -965,11 +966,11 @@ interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
965
966
|
value: string;
|
|
966
967
|
children?: ReactNode;
|
|
967
968
|
}
|
|
968
|
-
declare const Tabs:
|
|
969
|
-
declare const TabList:
|
|
970
|
-
declare const Tab:
|
|
971
|
-
declare const TabPanels:
|
|
972
|
-
declare const TabPanel:
|
|
969
|
+
declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
970
|
+
declare const TabList: React__default.ForwardRefExoticComponent<TabListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
971
|
+
declare const Tab: React__default.ForwardRefExoticComponent<TabProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
972
|
+
declare const TabPanels: React__default.ForwardRefExoticComponent<TabPanelsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
973
|
+
declare const TabPanel: React__default.ForwardRefExoticComponent<TabPanelProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
973
974
|
|
|
974
975
|
declare const tabsStyles = "\n/* Tabs container */\n.oc-tabs {\n display: flex;\n flex-direction: column;\n}\n\n.oc-tabs--vertical {\n flex-direction: row;\n}\n\n/* Tab list */\n.oc-tab-list {\n display: flex;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-tabs--horizontal .oc-tab-list {\n flex-direction: row;\n}\n\n.oc-tabs--vertical .oc-tab-list {\n flex-direction: column;\n border-right: 1px solid var(--oc-border-default);\n padding-right: var(--oc-spacing-sm);\n margin-right: var(--oc-spacing-md);\n}\n\n/* Line variant */\n.oc-tabs--line .oc-tab-list {\n border-bottom: 1px solid var(--oc-border-default);\n gap: 0;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab-list {\n border-bottom: none;\n border-right: 1px solid var(--oc-border-default);\n}\n\n/* Tab button */\n.oc-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-tab:hover:not(.oc-tab--disabled) {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--selected {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-tab:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: -2px;\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Line variant tab */\n.oc-tabs--line .oc-tab {\n position: relative;\n border-radius: 0;\n margin-bottom: -1px;\n}\n\n.oc-tabs--line .oc-tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: transparent;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-tabs--line .oc-tab--selected::after {\n background: var(--oc-accent);\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab {\n margin-bottom: 0;\n margin-right: -1px;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab::after {\n bottom: auto;\n left: auto;\n top: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}\n\n/* Enclosed variant */\n.oc-tabs--enclosed .oc-tab-list {\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n padding: var(--oc-spacing-xs);\n}\n\n.oc-tabs--enclosed .oc-tab {\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tabs--enclosed .oc-tab--selected {\n background: var(--oc-bg-canvas);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Pills variant */\n.oc-tabs--pills .oc-tab {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-tabs--pills .oc-tab--selected {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-tabs--pills .oc-tab:hover:not(.oc-tab--disabled):not(.oc-tab--selected) {\n background: var(--oc-bg-surface);\n}\n\n/* Tab panels */\n.oc-tab-panels {\n flex: 1;\n}\n\n.oc-tab-panel {\n padding: var(--oc-spacing-md) 0;\n}\n\n.oc-tabs--vertical .oc-tab-panel {\n padding: 0;\n}\n\n.oc-tab-panel:focus {\n outline: none;\n}\n";
|
|
975
976
|
|
|
@@ -984,14 +985,14 @@ interface ResearchCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
984
985
|
/** Content of the research */
|
|
985
986
|
children: ReactNode;
|
|
986
987
|
}
|
|
987
|
-
declare const ResearchCard:
|
|
988
|
+
declare const ResearchCard: React__default.ForwardRefExoticComponent<ResearchCardProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
988
989
|
interface UserQuestionProps extends HTMLAttributes<HTMLDivElement> {
|
|
989
990
|
/** Avatar element */
|
|
990
991
|
avatar?: ReactNode;
|
|
991
992
|
/** Question text */
|
|
992
993
|
children: ReactNode;
|
|
993
994
|
}
|
|
994
|
-
declare const UserQuestion:
|
|
995
|
+
declare const UserQuestion: React__default.ForwardRefExoticComponent<UserQuestionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
995
996
|
interface AIResponseProps extends HTMLAttributes<HTMLDivElement> {
|
|
996
997
|
/** AI avatar/icon */
|
|
997
998
|
avatar?: ReactNode;
|
|
@@ -1014,7 +1015,7 @@ interface AIResponseProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1014
1015
|
/** Response content */
|
|
1015
1016
|
children?: ReactNode;
|
|
1016
1017
|
}
|
|
1017
|
-
declare const AIResponse:
|
|
1018
|
+
declare const AIResponse: React__default.ForwardRefExoticComponent<AIResponseProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1018
1019
|
interface SourcesBadgeProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1019
1020
|
/** Number of sources */
|
|
1020
1021
|
count: number;
|
|
@@ -1025,14 +1026,14 @@ interface SourcesBadgeProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1025
1026
|
/** Click handler */
|
|
1026
1027
|
onClick?: () => void;
|
|
1027
1028
|
}
|
|
1028
|
-
declare const SourcesBadge:
|
|
1029
|
+
declare const SourcesBadge: React__default.ForwardRefExoticComponent<SourcesBadgeProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1029
1030
|
interface ResearchSectionProps extends HTMLAttributes<HTMLDivElement> {
|
|
1030
1031
|
/** Section heading */
|
|
1031
1032
|
heading?: string;
|
|
1032
1033
|
/** Content */
|
|
1033
1034
|
children: ReactNode;
|
|
1034
1035
|
}
|
|
1035
|
-
declare const ResearchSection:
|
|
1036
|
+
declare const ResearchSection: React__default.ForwardRefExoticComponent<ResearchSectionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1036
1037
|
interface StepItem {
|
|
1037
1038
|
id: string;
|
|
1038
1039
|
label: string;
|
|
@@ -1043,7 +1044,7 @@ interface StepsListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1043
1044
|
/** Steps to display */
|
|
1044
1045
|
steps: StepItem[];
|
|
1045
1046
|
}
|
|
1046
|
-
declare const StepsList:
|
|
1047
|
+
declare const StepsList: React__default.ForwardRefExoticComponent<StepsListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1047
1048
|
|
|
1048
1049
|
declare const researchCardStyles = "\n/* ============ Research Card Container ============ */\n.oc-research-card {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-research-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-research-card__back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.oc-research-card__back:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-research-card__title {\n flex: 1;\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-card__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-research-card__content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n/* ============ User Question ============ */\n.oc-user-question {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.oc-user-question__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-user-question__text {\n flex: 1;\n font-size: 15px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #0F172A);\n padding-top: 4px;\n}\n\n/* ============ AI Response ============ */\n.oc-ai-response {\n margin-bottom: 20px;\n}\n\n.oc-ai-response__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.oc-ai-response__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-ai-response__avatar-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-fg-primary, #0F172A);\n color: white;\n font-size: 14px;\n font-weight: 700;\n}\n\n.oc-ai-response__status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: default;\n transition: all 0.15s ease;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status {\n cursor: pointer;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-ai-response__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-ai-response__status-text {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-ai-response--researching .oc-ai-response__status-text {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-ai-response--error .oc-ai-response__status-text {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-ai-response__chevron {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-ai-response--expanded .oc-ai-response__chevron {\n transform: rotate(180deg);\n}\n\n.oc-ai-response__sources {\n margin-bottom: 16px;\n margin-left: 42px;\n}\n\n.oc-ai-response__content {\n margin-left: 42px;\n}\n\n/* ============ Sources Badge ============ */\n.oc-sources-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n background: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-sources-badge:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-sources-badge__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.oc-sources-badge__icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.oc-sources-badge__text {\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-sources-badge__arrow {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.15s ease;\n}\n\n.oc-sources-badge:hover .oc-sources-badge__arrow {\n transform: translateX(2px);\n}\n\n/* ============ Research Section ============ */\n.oc-research-section {\n margin-bottom: 24px;\n}\n\n.oc-research-section:last-child {\n margin-bottom: 0;\n}\n\n.oc-research-section__heading {\n margin: 0 0 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-section__body {\n font-size: 15px;\n line-height: 1.7;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-research-section__body p {\n margin: 0 0 12px;\n}\n\n.oc-research-section__body p:last-child {\n margin-bottom: 0;\n}\n\n/* ============ Steps List ============ */\n.oc-steps-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n margin-bottom: 16px;\n}\n\n.oc-steps-list__item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px;\n border-radius: var(--oc-radius-sm, 4px);\n}\n\n.oc-steps-list__indicator {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-steps-list__number {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-tertiary, #94A3B8);\n font-size: 11px;\n font-weight: 600;\n}\n\n.oc-steps-list__item--completed .oc-steps-list__indicator {\n color: var(--oc-success, #059669);\n}\n\n.oc-steps-list__item--running .oc-steps-list__indicator {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-steps-list__item--error .oc-steps-list__indicator {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-steps-list__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-steps-list__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-steps-list__label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-steps-list__item--pending .oc-steps-list__label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-steps-list__desc {\n display: block;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n";
|
|
1049
1050
|
|
|
@@ -1062,7 +1063,7 @@ interface ProjectPickerProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1062
1063
|
/** Children (ProjectItem components) */
|
|
1063
1064
|
children: ReactNode;
|
|
1064
1065
|
}
|
|
1065
|
-
declare const ProjectPicker:
|
|
1066
|
+
declare const ProjectPicker: React__default.ForwardRefExoticComponent<ProjectPickerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1066
1067
|
interface ProjectItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
1067
1068
|
/** Project ID */
|
|
1068
1069
|
id: string;
|
|
@@ -1079,7 +1080,7 @@ interface ProjectItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelec
|
|
|
1079
1080
|
/** Selection handler */
|
|
1080
1081
|
onSelect?: (id: string) => void;
|
|
1081
1082
|
}
|
|
1082
|
-
declare const ProjectItem:
|
|
1083
|
+
declare const ProjectItem: React__default.ForwardRefExoticComponent<ProjectItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1083
1084
|
interface ProjectSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1084
1085
|
/** Search value */
|
|
1085
1086
|
value?: string;
|
|
@@ -1088,7 +1089,7 @@ interface ProjectSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
|
|
|
1088
1089
|
/** Placeholder text */
|
|
1089
1090
|
placeholder?: string;
|
|
1090
1091
|
}
|
|
1091
|
-
declare const ProjectSearch:
|
|
1092
|
+
declare const ProjectSearch: React__default.ForwardRefExoticComponent<ProjectSearchProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
1092
1093
|
|
|
1093
1094
|
declare const projectPickerStyles = "\n/* ============ Project Picker Container ============ */\n.oc-project-picker {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-project-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 20px;\n border: none;\n border-bottom: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__header {\n border-bottom-color: var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-picker__header:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-picker__header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-picker__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-project-picker__subtitle {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-picker__chevron {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__chevron {\n transform: rotate(180deg);\n}\n\n.oc-project-picker__list {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n\n/* ============ Project Item ============ */\n.oc-project-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 14px;\n border-radius: var(--oc-radius-md, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.oc-project-item:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-item:focus-visible {\n box-shadow: 0 0 0 2px var(--oc-accent, #0891B2);\n}\n\n.oc-project-item--selected {\n background: var(--oc-bg-surface, #F8FAFC);\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-item--selected:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-project-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-item__name {\n font-size: 15px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__desc {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__icon {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: color 0.15s ease;\n}\n\n.oc-project-item:hover .oc-project-item__icon {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-project-item--selected .oc-project-item__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n/* ============ Project Search ============ */\n.oc-project-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n margin: 8px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-project-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-project-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-project-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n";
|
|
1094
1095
|
|
|
@@ -1102,7 +1103,7 @@ interface SourcesPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1102
1103
|
/** Children content */
|
|
1103
1104
|
children: ReactNode;
|
|
1104
1105
|
}
|
|
1105
|
-
declare const SourcesPanel:
|
|
1106
|
+
declare const SourcesPanel: React__default.ForwardRefExoticComponent<SourcesPanelProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1106
1107
|
interface PanelTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1107
1108
|
/** Active tab value */
|
|
1108
1109
|
value?: string;
|
|
@@ -1113,7 +1114,7 @@ interface PanelTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'
|
|
|
1113
1114
|
/** Children (PanelTab components) */
|
|
1114
1115
|
children: ReactNode;
|
|
1115
1116
|
}
|
|
1116
|
-
declare const PanelTabs:
|
|
1117
|
+
declare const PanelTabs: React__default.ForwardRefExoticComponent<PanelTabsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1117
1118
|
interface PanelTabProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1118
1119
|
/** Tab value */
|
|
1119
1120
|
value: string;
|
|
@@ -1122,7 +1123,7 @@ interface PanelTabProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1122
1123
|
/** Tab label */
|
|
1123
1124
|
children: ReactNode;
|
|
1124
1125
|
}
|
|
1125
|
-
declare const PanelTab:
|
|
1126
|
+
declare const PanelTab: React__default.ForwardRefExoticComponent<PanelTabProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1126
1127
|
interface PanelSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1127
1128
|
/** Search value */
|
|
1128
1129
|
value?: string;
|
|
@@ -1131,12 +1132,12 @@ interface PanelSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
|
|
|
1131
1132
|
/** Placeholder text */
|
|
1132
1133
|
placeholder?: string;
|
|
1133
1134
|
}
|
|
1134
|
-
declare const PanelSearch:
|
|
1135
|
+
declare const PanelSearch: React__default.ForwardRefExoticComponent<PanelSearchProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
1135
1136
|
interface PanelActionListProps extends HTMLAttributes<HTMLDivElement> {
|
|
1136
1137
|
/** Children (PanelAction components) */
|
|
1137
1138
|
children: ReactNode;
|
|
1138
1139
|
}
|
|
1139
|
-
declare const PanelActionList:
|
|
1140
|
+
declare const PanelActionList: React__default.ForwardRefExoticComponent<PanelActionListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1140
1141
|
interface PanelActionProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1141
1142
|
/** Icon */
|
|
1142
1143
|
icon?: ReactNode;
|
|
@@ -1149,14 +1150,14 @@ interface PanelActionProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1149
1150
|
/** Is disabled */
|
|
1150
1151
|
disabled?: boolean;
|
|
1151
1152
|
}
|
|
1152
|
-
declare const PanelAction:
|
|
1153
|
+
declare const PanelAction: React__default.ForwardRefExoticComponent<PanelActionProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1153
1154
|
interface PanelSectionProps extends HTMLAttributes<HTMLDivElement> {
|
|
1154
1155
|
/** Section title */
|
|
1155
1156
|
title?: string;
|
|
1156
1157
|
/** Children content */
|
|
1157
1158
|
children: ReactNode;
|
|
1158
1159
|
}
|
|
1159
|
-
declare const PanelSection:
|
|
1160
|
+
declare const PanelSection: React__default.ForwardRefExoticComponent<PanelSectionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1160
1161
|
declare const UploadIcon: () => react_jsx_runtime.JSX.Element;
|
|
1161
1162
|
declare const FilesIcon: () => react_jsx_runtime.JSX.Element;
|
|
1162
1163
|
declare const PromptsIcon: () => react_jsx_runtime.JSX.Element;
|
|
@@ -1179,14 +1180,14 @@ interface HeroProps extends HTMLAttributes<HTMLElement> {
|
|
|
1179
1180
|
/** Content */
|
|
1180
1181
|
children: ReactNode;
|
|
1181
1182
|
}
|
|
1182
|
-
declare const Hero:
|
|
1183
|
+
declare const Hero: React__default.ForwardRefExoticComponent<HeroProps & React__default.RefAttributes<HTMLElement>>;
|
|
1183
1184
|
interface HeroBadgeProps extends HTMLAttributes<HTMLDivElement> {
|
|
1184
1185
|
/** Icon to display before text */
|
|
1185
1186
|
icon?: ReactNode;
|
|
1186
1187
|
/** Badge text */
|
|
1187
1188
|
children: ReactNode;
|
|
1188
1189
|
}
|
|
1189
|
-
declare const HeroBadge:
|
|
1190
|
+
declare const HeroBadge: React__default.ForwardRefExoticComponent<HeroBadgeProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1190
1191
|
interface HeroTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
1191
1192
|
/** Use gradient text */
|
|
1192
1193
|
gradient?: boolean;
|
|
@@ -1195,12 +1196,12 @@ interface HeroTitleProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
|
1195
1196
|
/** Title text */
|
|
1196
1197
|
children: ReactNode;
|
|
1197
1198
|
}
|
|
1198
|
-
declare const HeroTitle:
|
|
1199
|
+
declare const HeroTitle: React__default.ForwardRefExoticComponent<HeroTitleProps & React__default.RefAttributes<HTMLHeadingElement>>;
|
|
1199
1200
|
interface HeroSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
|
|
1200
1201
|
/** Subtitle text */
|
|
1201
1202
|
children: ReactNode;
|
|
1202
1203
|
}
|
|
1203
|
-
declare const HeroSubtitle:
|
|
1204
|
+
declare const HeroSubtitle: React__default.ForwardRefExoticComponent<HeroSubtitleProps & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
1204
1205
|
interface HeroSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit'> {
|
|
1205
1206
|
/** Input placeholder */
|
|
1206
1207
|
placeholder?: string;
|
|
@@ -1217,31 +1218,31 @@ interface HeroSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange
|
|
|
1217
1218
|
/** Loading state */
|
|
1218
1219
|
loading?: boolean;
|
|
1219
1220
|
}
|
|
1220
|
-
declare const HeroSearch:
|
|
1221
|
+
declare const HeroSearch: React__default.ForwardRefExoticComponent<HeroSearchProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1221
1222
|
interface HeroActionsProps extends HTMLAttributes<HTMLDivElement> {
|
|
1222
1223
|
/** Action buttons/links */
|
|
1223
1224
|
children: ReactNode;
|
|
1224
1225
|
}
|
|
1225
|
-
declare const HeroActions:
|
|
1226
|
+
declare const HeroActions: React__default.ForwardRefExoticComponent<HeroActionsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1226
1227
|
interface HeroActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
1227
1228
|
/** Icon to display */
|
|
1228
1229
|
icon?: ReactNode;
|
|
1229
1230
|
/** Button text */
|
|
1230
1231
|
children: ReactNode;
|
|
1231
1232
|
}
|
|
1232
|
-
declare const HeroAction:
|
|
1233
|
+
declare const HeroAction: React__default.ForwardRefExoticComponent<HeroActionProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1233
1234
|
interface HeroContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
1234
1235
|
/** Content alignment */
|
|
1235
1236
|
align?: 'left' | 'center' | 'right';
|
|
1236
1237
|
/** Content */
|
|
1237
1238
|
children: ReactNode;
|
|
1238
1239
|
}
|
|
1239
|
-
declare const HeroContent:
|
|
1240
|
+
declare const HeroContent: React__default.ForwardRefExoticComponent<HeroContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1240
1241
|
interface HeroMediaProps extends HTMLAttributes<HTMLDivElement> {
|
|
1241
1242
|
/** Media content (image, illustration, etc.) */
|
|
1242
1243
|
children: ReactNode;
|
|
1243
1244
|
}
|
|
1244
|
-
declare const HeroMedia:
|
|
1245
|
+
declare const HeroMedia: React__default.ForwardRefExoticComponent<HeroMediaProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1245
1246
|
declare const SparkleIcon: () => react_jsx_runtime.JSX.Element;
|
|
1246
1247
|
declare const RocketIcon: () => react_jsx_runtime.JSX.Element;
|
|
1247
1248
|
|
|
@@ -1253,7 +1254,7 @@ interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'on
|
|
|
1253
1254
|
/** Current value */
|
|
1254
1255
|
value?: string;
|
|
1255
1256
|
/** Called when value changes */
|
|
1256
|
-
onChange?: (e:
|
|
1257
|
+
onChange?: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
|
|
1257
1258
|
/** Called when search is submitted */
|
|
1258
1259
|
onSubmit?: (value: string) => void;
|
|
1259
1260
|
/** Button text */
|
|
@@ -1271,7 +1272,7 @@ interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'on
|
|
|
1271
1272
|
/** Additional class name */
|
|
1272
1273
|
className?: string;
|
|
1273
1274
|
}
|
|
1274
|
-
declare const SearchBox:
|
|
1275
|
+
declare const SearchBox: React__default.ForwardRefExoticComponent<SearchBoxProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
1275
1276
|
|
|
1276
1277
|
declare const searchBoxStyles = "\n/* ============================================\n SearchBox Component\n ============================================ */\n\n.oc-search-box {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-search-box:focus-within {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Size variants */\n.oc-search-box--sm {\n padding: 8px 12px;\n gap: 10px;\n}\n\n.oc-search-box--sm .oc-search-box__input {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--sm .oc-search-box__button {\n padding: 6px 14px;\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--lg {\n padding: 16px 20px;\n gap: 14px;\n}\n\n.oc-search-box--lg .oc-search-box__input {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-search-box--lg .oc-search-box__button {\n padding: 10px 24px;\n font-size: var(--oc-font-size-md, 15px);\n}\n\n/* Icon */\n.oc-search-box__icon {\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Input */\n.oc-search-box__input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-fg-primary, #1E293B);\n outline: none;\n}\n\n.oc-search-box__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-search-box__input:disabled {\n cursor: not-allowed;\n}\n\n/* Button */\n.oc-search-box__button {\n padding: 8px 20px;\n background: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.oc-search-box__button:hover:not(:disabled) {\n background: #1E293B;\n}\n\n.oc-search-box__button:active:not(:disabled) {\n background: #0F172A;\n}\n\n.oc-search-box__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Loading state */\n.oc-search-box--loading {\n pointer-events: none;\n}\n\n.oc-search-box__spinner {\n animation: oc-spin var(--oc-duration-spin, 0.8s) linear infinite;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-search-box {\n flex-wrap: wrap;\n }\n\n .oc-search-box__input {\n flex: 1 1 100%;\n order: 1;\n }\n\n .oc-search-box__icon {\n order: 0;\n }\n\n .oc-search-box__button {\n order: 2;\n width: 100%;\n margin-top: 8px;\n }\n}\n";
|
|
1277
1278
|
|
|
@@ -1301,7 +1302,7 @@ interface FilterTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange
|
|
|
1301
1302
|
/** Show filter icon before tabs */
|
|
1302
1303
|
showIcon?: boolean;
|
|
1303
1304
|
/** Called when filter icon is clicked */
|
|
1304
|
-
onIconClick?: (e:
|
|
1305
|
+
onIconClick?: (e: React__default.MouseEvent) => void;
|
|
1305
1306
|
/** Additional class name */
|
|
1306
1307
|
className?: string;
|
|
1307
1308
|
}
|
|
@@ -1322,8 +1323,8 @@ interface FilterTabProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1322
1323
|
className?: string;
|
|
1323
1324
|
children: ReactNode;
|
|
1324
1325
|
}
|
|
1325
|
-
declare const FilterTab:
|
|
1326
|
-
declare const FilterTabs:
|
|
1326
|
+
declare const FilterTab: React__default.ForwardRefExoticComponent<FilterTabProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1327
|
+
declare const FilterTabs: React__default.ForwardRefExoticComponent<FilterTabsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1327
1328
|
|
|
1328
1329
|
declare const filterTabsStyles = "\n/* ============================================\n FilterTabs Component\n ============================================ */\n\n.oc-filter-tabs {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n/* Filter icon button */\n.oc-filter-tabs__icon-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-filter-tabs__icon-button:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-secondary, #64748B);\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-filter-tabs__icon-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-filter-tabs__icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tabs--underline {\n gap: 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* FilterTab */\n.oc-filter-tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-filter-tab:hover:not(:disabled) {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #475569);\n}\n\n.oc-filter-tab--active {\n background: #1E293B;\n border-color: #1E293B;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--active:hover:not(:disabled) {\n background: #334155;\n border-color: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-filter-tab--sm {\n padding: 6px 12px;\n font-size: var(--oc-font-size-xs, 12px);\n gap: 4px;\n}\n\n.oc-filter-tab--lg {\n padding: 10px 18px;\n font-size: var(--oc-font-size-md, 15px);\n gap: 8px;\n}\n\n/* Underline variant */\n.oc-filter-tab--underline {\n border: none;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n padding: 12px 16px;\n margin-bottom: -1px;\n}\n\n.oc-filter-tab--underline:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active {\n background: transparent;\n color: var(--oc-accent, #0F766E);\n border-bottom-color: var(--oc-accent, #0F766E);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n/* Icon */\n.oc-filter-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-filter-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tab--sm .oc-filter-tab__icon svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-filter-tab--lg .oc-filter-tab__icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Label */\n.oc-filter-tab__label {\n flex-shrink: 0;\n}\n\n/* Count badge */\n.oc-filter-tab__count {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n.oc-filter-tab--active .oc-filter-tab__count {\n opacity: 0.8;\n}\n";
|
|
1329
1330
|
|
|
@@ -1372,7 +1373,7 @@ interface FilterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChang
|
|
|
1372
1373
|
/** Debounce delay for search in ms */
|
|
1373
1374
|
searchDebounce?: number;
|
|
1374
1375
|
}
|
|
1375
|
-
declare const FilterPanel:
|
|
1376
|
+
declare const FilterPanel: React__default.ForwardRefExoticComponent<FilterPanelProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1376
1377
|
|
|
1377
1378
|
declare const filterPanelStyles = "\n .oc-filter-panel {\n width: 320px;\n max-height: 520px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 8px 16px rgba(15, 23, 42, 0.06));\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .oc-filter-panel__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0;\n }\n\n .oc-filter-panel__clear {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n background: none;\n border: none;\n padding: 4px 8px;\n margin: -4px -8px;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__clear:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__clear:disabled {\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: not-allowed;\n }\n\n .oc-filter-panel__clear:disabled:hover {\n background: transparent;\n }\n\n .oc-filter-panel__body {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .oc-filter-panel__section {\n padding: 8px 20px;\n }\n\n .oc-filter-panel__section:not(:last-child) {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n padding-bottom: 16px;\n margin-bottom: 8px;\n }\n\n .oc-filter-panel__section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin: 0;\n }\n\n .oc-filter-panel__section-count {\n font-size: 11px;\n font-weight: 600;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n padding: 2px 6px;\n border-radius: var(--oc-radius-full, 9999px);\n }\n\n /* Section search input */\n .oc-filter-panel__search {\n position: relative;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n align-items: center;\n }\n\n .oc-filter-panel__search-input {\n width: 100%;\n padding: 8px 32px 8px 32px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__search-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n background: var(--oc-bg-surface, white);\n }\n\n .oc-filter-panel__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border: none;\n border-radius: 50%;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n padding: 0;\n }\n\n .oc-filter-panel__search-clear:hover {\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #475569);\n }\n\n /* Options list */\n .oc-filter-panel__options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n }\n\n .oc-filter-panel__option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px 12px;\n margin: 0 -12px;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .oc-filter-panel__option:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n /* Checkbox styles */\n .oc-filter-panel__checkbox {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__checkbox--checked {\n border-color: var(--oc-accent, #0F766E);\n background: var(--oc-accent, #0F766E);\n }\n\n /* Radio styles */\n .oc-filter-panel__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__radio--checked {\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--oc-accent, #0F766E);\n }\n\n /* Option content */\n .oc-filter-panel__option-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .oc-filter-panel__option-label {\n font-size: 14px;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-description {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Loading state */\n .oc-filter-panel__loading {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__spinner {\n animation: oc-filter-spin 0.8s linear infinite;\n }\n\n @keyframes oc-filter-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Empty state */\n .oc-filter-panel__empty {\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n text-align: center;\n font-style: italic;\n }\n\n /* Show more button */\n .oc-filter-panel__show-more {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n margin: 4px -12px 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__show-more:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__show-more svg {\n transition: transform 0.2s;\n }\n\n /* Date inputs */\n .oc-filter-panel__date-inputs {\n display: flex;\n gap: 12px;\n }\n\n .oc-filter-panel__date-field {\n flex: 1;\n }\n\n .oc-filter-panel__date-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 6px;\n }\n\n .oc-filter-panel__date-input {\n width: 100%;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__date-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n }\n\n /* Footer */\n .oc-filter-panel__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FAFAFA);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__footer-spacer {\n flex: 1;\n }\n\n .oc-filter-panel__active-count {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n }\n\n .oc-filter-panel__active-count strong {\n color: var(--oc-accent, #0F766E);\n font-weight: 600;\n }\n\n /* Buttons */\n .oc-filter-panel__btn {\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .oc-filter-panel__btn--secondary {\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__btn--secondary:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n }\n\n .oc-filter-panel__btn--primary {\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n }\n\n .oc-filter-panel__btn--primary:hover {\n background: var(--oc-accent-hover, #0D9488);\n }\n\n /* Quick filter chips */\n .oc-filter-panel__quick-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__quick-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .oc-filter-panel__quick-chip:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__quick-chip--active {\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.08);\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__quick-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n margin-right: -4px;\n border-radius: 50%;\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n transition: opacity 0.15s;\n }\n\n .oc-filter-panel__quick-chip-remove:hover {\n opacity: 1;\n }\n";
|
|
1378
1379
|
|
|
@@ -1403,8 +1404,8 @@ interface StatGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1403
1404
|
className?: string;
|
|
1404
1405
|
children: ReactNode;
|
|
1405
1406
|
}
|
|
1406
|
-
declare const StatBlock:
|
|
1407
|
-
declare const StatGrid:
|
|
1407
|
+
declare const StatBlock: React__default.ForwardRefExoticComponent<StatBlockProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1408
|
+
declare const StatGrid: React__default.ForwardRefExoticComponent<StatGridProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1408
1409
|
|
|
1409
1410
|
declare const statBlockStyles = "\n/* ============================================\n StatBlock Component\n ============================================ */\n\n.oc-stat-block {\n display: flex;\n gap: 12px;\n}\n\n.oc-stat-block--center {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.oc-stat-block--left {\n align-items: flex-start;\n}\n\n/* Icon */\n.oc-stat-block__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-stat-block__icon svg {\n width: 24px;\n height: 24px;\n}\n\n/* Content */\n.oc-stat-block__content {\n min-width: 0;\n}\n\n/* Value */\n.oc-stat-block__value {\n font-size: 36px;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n font-feature-settings: 'tnum' 1;\n}\n\n.oc-stat-block--default .oc-stat-block__value {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-stat-block--accent .oc-stat-block__value {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-stat-block--muted .oc-stat-block__value {\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Label */\n.oc-stat-block__label {\n font-size: var(--oc-font-size-md, 15px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n/* Sublabel */\n.oc-stat-block__sublabel {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.4;\n}\n\n/* Size variants */\n.oc-stat-block--sm .oc-stat-block__value {\n font-size: 24px;\n}\n\n.oc-stat-block--sm .oc-stat-block__label {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-stat-block--sm .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-xs, 11px);\n}\n\n.oc-stat-block--sm .oc-stat-block__icon {\n width: 36px;\n height: 36px;\n}\n\n.oc-stat-block--sm .oc-stat-block__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-stat-block--lg .oc-stat-block__value {\n font-size: 48px;\n}\n\n.oc-stat-block--lg .oc-stat-block__label {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-stat-block--lg .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-md, 15px);\n}\n\n.oc-stat-block--lg .oc-stat-block__icon {\n width: 56px;\n height: 56px;\n}\n\n.oc-stat-block--lg .oc-stat-block__icon svg {\n width: 28px;\n height: 28px;\n}\n\n/* ============================================\n StatGrid Component\n ============================================ */\n\n.oc-stat-grid {\n display: grid;\n}\n\n/* Columns */\n.oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.oc-stat-grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.oc-stat-grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Gap */\n.oc-stat-grid--gap-sm {\n gap: 16px 24px;\n}\n\n.oc-stat-grid--gap-md {\n gap: 32px 48px;\n}\n\n.oc-stat-grid--gap-lg {\n gap: 48px 64px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-stat-grid--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--cols-3 {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .oc-stat-grid--cols-4,\n .oc-stat-grid--cols-3,\n .oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--gap-md {\n gap: 24px 32px;\n }\n\n .oc-stat-grid--gap-lg {\n gap: 32px 40px;\n }\n\n .oc-stat-block__value {\n font-size: 28px;\n }\n}\n";
|
|
1410
1411
|
|
|
@@ -1438,7 +1439,7 @@ interface CollectionCardProps extends HTMLAttributes<HTMLElement> {
|
|
|
1438
1439
|
/** Context menu content (e.g., dropdown menu) */
|
|
1439
1440
|
menu?: ReactNode;
|
|
1440
1441
|
/** Click handler for built-in kebab menu button */
|
|
1441
|
-
onMenuClick?: (e:
|
|
1442
|
+
onMenuClick?: (e: React__default.MouseEvent) => void;
|
|
1442
1443
|
/** Additional class name */
|
|
1443
1444
|
className?: string;
|
|
1444
1445
|
}
|
|
@@ -1449,8 +1450,8 @@ interface CollectionListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1449
1450
|
className?: string;
|
|
1450
1451
|
children: ReactNode;
|
|
1451
1452
|
}
|
|
1452
|
-
declare const CollectionCard:
|
|
1453
|
-
declare const CollectionList:
|
|
1453
|
+
declare const CollectionCard: React__default.ForwardRefExoticComponent<CollectionCardProps & React__default.RefAttributes<HTMLElement>>;
|
|
1454
|
+
declare const CollectionList: React__default.ForwardRefExoticComponent<CollectionListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1454
1455
|
|
|
1455
1456
|
declare const collectionCardStyles = "\n/* ============================================\n CollectionCard Component\n ============================================ */\n\n.oc-collection-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-collection-card--clickable {\n cursor: pointer;\n}\n\n.oc-collection-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Avatar - uniform circular treatment for icons and images */\n.oc-collection-card__icon,\n.oc-collection-card__image {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.oc-collection-card__icon {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-collection-card__image {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-collection-card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Content */\n.oc-collection-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-collection-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Badge */\n.oc-collection-card__badge {\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Status */\n.oc-collection-card__status {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Title */\n.oc-collection-card__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 6px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-collection-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Stats */\n.oc-collection-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-collection-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-collection-card__stats span:not(:last-child)::after {\n content: '\u2022';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Menu */\n.oc-collection-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-collection-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============================================\n CollectionList Component\n ============================================ */\n\n.oc-collection-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-collection-list--gap-sm {\n gap: 12px;\n}\n\n.oc-collection-list--gap-md {\n gap: 16px;\n}\n\n.oc-collection-list--gap-lg {\n gap: 24px;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-collection-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-collection-card__icon,\n .oc-collection-card__image {\n width: 36px;\n height: 36px;\n }\n\n .oc-collection-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-collection-card__title {\n font-size: 15px;\n }\n\n .oc-collection-card__description {\n font-size: 13px;\n }\n}\n";
|
|
1456
1457
|
|
|
@@ -1511,8 +1512,8 @@ interface ActivityFeedProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1511
1512
|
className?: string;
|
|
1512
1513
|
children?: ReactNode;
|
|
1513
1514
|
}
|
|
1514
|
-
declare const ActivityItem:
|
|
1515
|
-
declare const ActivityFeed:
|
|
1515
|
+
declare const ActivityItem: React__default.ForwardRefExoticComponent<ActivityItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1516
|
+
declare const ActivityFeed: React__default.ForwardRefExoticComponent<ActivityFeedProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1516
1517
|
|
|
1517
1518
|
declare const activityFeedStyles = "\n/* ============================================\n ActivityFeed Component\n ============================================ */\n\n.oc-activity-feed {\n display: flex;\n flex-direction: column;\n}\n\n.oc-activity-feed__list {\n display: flex;\n flex-direction: column;\n}\n\n/* ActivityItem */\n.oc-activity-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 0;\n}\n\n.oc-activity-feed--dividers .oc-activity-item {\n border-bottom: 1px solid var(--oc-bg-subtle, #F1F5F9);\n}\n\n.oc-activity-feed--dividers .oc-activity-item:last-child {\n border-bottom: none;\n}\n\n/* Avatar */\n.oc-activity-item__avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-inverse, #FFFFFF);\n flex-shrink: 0;\n background-size: cover;\n background-position: center;\n}\n\n/* Content */\n.oc-activity-item__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Text */\n.oc-activity-item__text {\n font-size: var(--oc-font-size-sm, 14px);\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n line-height: 1.4;\n}\n\n/* Name */\n.oc-activity-item__name {\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* Target */\n.oc-activity-item__target {\n color: var(--oc-accent, #0F766E);\n text-decoration: none;\n}\n\na.oc-activity-item__target:hover {\n text-decoration: underline;\n}\n\n/* Time */\n.oc-activity-item__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n/* View All Link */\n.oc-activity-feed__view-all {\n display: block;\n text-align: center;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n text-decoration: none;\n padding: 12px;\n margin-top: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-activity-feed__view-all:hover {\n color: var(--oc-accent, #0F766E);\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-activity-item {\n gap: 10px;\n padding: 12px 0;\n }\n\n .oc-activity-item__avatar {\n width: 32px;\n height: 32px;\n font-size: 11px;\n }\n\n .oc-activity-item__text {\n font-size: 13px;\n }\n}\n";
|
|
1518
1519
|
|
|
@@ -1558,8 +1559,8 @@ interface ActionListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1558
1559
|
className?: string;
|
|
1559
1560
|
children?: ReactNode;
|
|
1560
1561
|
}
|
|
1561
|
-
declare const ActionItem:
|
|
1562
|
-
declare const ActionList:
|
|
1562
|
+
declare const ActionItem: React__default.ForwardRefExoticComponent<ActionItemProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1563
|
+
declare const ActionList: React__default.ForwardRefExoticComponent<ActionListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1563
1564
|
|
|
1564
1565
|
declare const actionListStyles = "\n/* ============================================\n ActionList Component\n ============================================ */\n\n.oc-action-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-action-list--card {\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n padding: 8px;\n}\n\n/* ActionItem */\n.oc-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n text-decoration: none;\n width: 100%;\n}\n\n.oc-action-item:hover:not(:disabled) {\n background: rgba(15, 118, 110, 0.05);\n}\n\n.oc-action-item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-action-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-action-item--sm {\n padding: 10px 12px;\n gap: 10px;\n font-size: var(--oc-font-size-sm, 14px);\n}\n\n.oc-action-item--lg {\n padding: 16px 20px;\n gap: 14px;\n font-size: var(--oc-font-size-lg, 16px);\n}\n\n/* Icon */\n.oc-action-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n}\n\n.oc-action-item__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-action-item--sm .oc-action-item__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-action-item--lg .oc-action-item__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-action-item__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n/* Label */\n.oc-action-item__label {\n font-weight: 500;\n}\n\n/* Description */\n.oc-action-item__description {\n font-size: 0.85em;\n color: var(--oc-fg-tertiary, #94A3B8);\n font-weight: 400;\n}\n\n/* Card variant items */\n.oc-action-list--card .oc-action-item {\n padding: 12px 14px;\n}\n\n.oc-action-list--card .oc-action-item:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n";
|
|
1565
1566
|
|
|
@@ -1583,7 +1584,7 @@ interface ThreadViewProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1583
1584
|
onToggleCollapse?: (id: string) => void;
|
|
1584
1585
|
children: ReactNode;
|
|
1585
1586
|
}
|
|
1586
|
-
declare const ThreadView:
|
|
1587
|
+
declare const ThreadView: React__default.ForwardRefExoticComponent<ThreadViewProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1587
1588
|
interface ThreadPostProps extends HTMLAttributes<HTMLDivElement> {
|
|
1588
1589
|
/** Post ID for collapse tracking */
|
|
1589
1590
|
id?: string;
|
|
@@ -1612,7 +1613,7 @@ interface ThreadPostProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1612
1613
|
/** Whether this post is the original/root post */
|
|
1613
1614
|
isRoot?: boolean;
|
|
1614
1615
|
}
|
|
1615
|
-
declare const ThreadPost:
|
|
1616
|
+
declare const ThreadPost: React__default.ForwardRefExoticComponent<ThreadPostProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1616
1617
|
interface ThreadReplyProps extends Omit<ThreadPostProps, 'isRoot' | 'replyCount'> {
|
|
1617
1618
|
/** Nested replies */
|
|
1618
1619
|
replies?: ReactNode;
|
|
@@ -1621,7 +1622,7 @@ interface ThreadReplyProps extends Omit<ThreadPostProps, 'isRoot' | 'replyCount'
|
|
|
1621
1622
|
/** Collapse toggle handler */
|
|
1622
1623
|
onToggleCollapse?: () => void;
|
|
1623
1624
|
}
|
|
1624
|
-
declare const ThreadReply:
|
|
1625
|
+
declare const ThreadReply: React__default.ForwardRefExoticComponent<ThreadReplyProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1625
1626
|
interface MentionProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1626
1627
|
/** User name */
|
|
1627
1628
|
name: string;
|
|
@@ -1632,7 +1633,7 @@ interface MentionProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1632
1633
|
/** Click handler */
|
|
1633
1634
|
onClick?: () => void;
|
|
1634
1635
|
}
|
|
1635
|
-
declare const Mention:
|
|
1636
|
+
declare const Mention: React__default.ForwardRefExoticComponent<MentionProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1636
1637
|
interface LinkedResourceProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1637
1638
|
/** Resource type */
|
|
1638
1639
|
type: ResourceType;
|
|
@@ -1645,13 +1646,13 @@ interface LinkedResourceProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1645
1646
|
/** Click handler */
|
|
1646
1647
|
onClick?: () => void;
|
|
1647
1648
|
}
|
|
1648
|
-
declare const LinkedResource:
|
|
1649
|
+
declare const LinkedResource: React__default.ForwardRefExoticComponent<LinkedResourceProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1649
1650
|
interface ResourceListProps extends HTMLAttributes<HTMLDivElement> {
|
|
1650
1651
|
/** Section label */
|
|
1651
1652
|
label?: string;
|
|
1652
1653
|
children: ReactNode;
|
|
1653
1654
|
}
|
|
1654
|
-
declare const ResourceList:
|
|
1655
|
+
declare const ResourceList: React__default.ForwardRefExoticComponent<ResourceListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1655
1656
|
interface ReactionButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1656
1657
|
/** Reaction type */
|
|
1657
1658
|
reaction: ReactionType;
|
|
@@ -1662,13 +1663,13 @@ interface ReactionButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1662
1663
|
/** Click handler */
|
|
1663
1664
|
onClick?: () => void;
|
|
1664
1665
|
}
|
|
1665
|
-
declare const ReactionButton:
|
|
1666
|
+
declare const ReactionButton: React__default.ForwardRefExoticComponent<ReactionButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1666
1667
|
interface ReactionBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
1667
1668
|
/** Add reaction button */
|
|
1668
1669
|
onAddReaction?: () => void;
|
|
1669
1670
|
children?: ReactNode;
|
|
1670
1671
|
}
|
|
1671
|
-
declare const ReactionBar:
|
|
1672
|
+
declare const ReactionBar: React__default.ForwardRefExoticComponent<ReactionBarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1672
1673
|
interface ThreadActionProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1673
1674
|
/** Action icon */
|
|
1674
1675
|
icon: ReactNode;
|
|
@@ -1677,7 +1678,7 @@ interface ThreadActionProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1677
1678
|
/** Whether action is destructive */
|
|
1678
1679
|
destructive?: boolean;
|
|
1679
1680
|
}
|
|
1680
|
-
declare const ThreadAction:
|
|
1681
|
+
declare const ThreadAction: React__default.ForwardRefExoticComponent<ThreadActionProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1681
1682
|
interface ThreadInputProps extends HTMLAttributes<HTMLDivElement> {
|
|
1682
1683
|
/** Placeholder text */
|
|
1683
1684
|
placeholder?: string;
|
|
@@ -1688,7 +1689,7 @@ interface ThreadInputProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1688
1689
|
/** Input element (render prop or ChatInput) */
|
|
1689
1690
|
children: ReactNode;
|
|
1690
1691
|
}
|
|
1691
|
-
declare const ThreadInput:
|
|
1692
|
+
declare const ThreadInput: React__default.ForwardRefExoticComponent<ThreadInputProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1692
1693
|
interface ThreadMetaProps extends HTMLAttributes<HTMLDivElement> {
|
|
1693
1694
|
/** View count */
|
|
1694
1695
|
views?: number;
|
|
@@ -1699,7 +1700,7 @@ interface ThreadMetaProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1699
1700
|
/** Last activity timestamp */
|
|
1700
1701
|
lastActivity?: string;
|
|
1701
1702
|
}
|
|
1702
|
-
declare const ThreadMeta:
|
|
1703
|
+
declare const ThreadMeta: React__default.ForwardRefExoticComponent<ThreadMetaProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1703
1704
|
|
|
1704
1705
|
declare const threadStyles = "\n/* ============ Thread View Container ============ */\n.oc-thread-view {\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-view__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-view__title {\n flex: 1;\n min-width: 200px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-view__pin,\n.oc-thread-view__status,\n.oc-thread-view__locked {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-view__pin {\n background: rgba(217, 119, 6, 0.1);\n color: var(--oc-warning, #D97706);\n}\n\n.oc-thread-view__status--resolved {\n background: rgba(5, 150, 105, 0.1);\n color: var(--oc-success, #059669);\n}\n\n.oc-thread-view__status--closed {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-view__status--archived {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-view__locked {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-view__content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Pinned thread styling */\n.oc-thread-view--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n}\n\n/* Locked thread */\n.oc-thread-view--locked .oc-thread-view__content {\n opacity: 0.85;\n}\n\n/* ============ Thread Post (Main Post) ============ */\n.oc-thread-post {\n display: flex;\n gap: 14px;\n padding: 20px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n@keyframes oc-thread-fade-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-thread-post--root {\n padding-top: 0;\n}\n\n.oc-thread-post--highlighted {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-thread-post__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-post__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-post__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.oc-thread-post__author {\n font-size: 14px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-post__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__edited {\n font-size: 12px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__body {\n font-size: 15px;\n line-height: 1.65;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__body p {\n margin: 0 0 12px;\n}\n\n.oc-thread-post__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-post__resources {\n margin-top: 14px;\n}\n\n.oc-thread-post__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 14px;\n}\n\n.oc-thread-post__reactions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-thread-post__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-post:hover .oc-thread-post__actions {\n opacity: 1;\n}\n\n.oc-thread-post__reply-count {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-left: auto;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-post__reply-count svg {\n opacity: 0.6;\n}\n\n/* ============ Thread Reply (Nested) ============ */\n.oc-thread-reply {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 24px;\n}\n\n.oc-thread-reply__connector {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n display: flex;\n justify-content: center;\n}\n\n.oc-thread-reply__line {\n width: 2px;\n height: 100%;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: 1px;\n}\n\n.oc-thread-reply:last-child .oc-thread-reply__line {\n height: 32px;\n}\n\n.oc-thread-reply__content {\n display: flex;\n gap: 12px;\n padding: 14px 0;\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__content {\n padding: 10px 0;\n}\n\n.oc-thread-reply--highlighted .oc-thread-reply__content {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin-left: -12px;\n padding-left: 12px;\n border-radius: var(--oc-radius-md, 8px);\n}\n\n.oc-thread-reply__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-reply__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-reply__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__header {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__author {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-reply__time {\n font-size: 11px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__edited {\n font-size: 11px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__body p {\n margin: 0 0 10px;\n}\n\n.oc-thread-reply__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__resources {\n margin-top: 10px;\n}\n\n.oc-thread-reply__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__footer {\n margin-top: 0;\n}\n\n.oc-thread-reply__reactions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-thread-reply__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-reply:hover .oc-thread-reply__actions {\n opacity: 1;\n}\n\n.oc-thread-reply__toggle {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-reply__toggle:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__toggle-icon {\n transition: transform 0.2s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__toggle-icon {\n transform: rotate(-90deg);\n}\n\n.oc-thread-reply__replies {\n margin-top: 4px;\n}\n\n/* Depth indentation limits */\n.oc-thread-reply--depth-1 { padding-left: 24px; }\n.oc-thread-reply--depth-2 { padding-left: 20px; }\n.oc-thread-reply--depth-3 { padding-left: 16px; }\n.oc-thread-reply--depth-4 { padding-left: 12px; }\n\n/* ============ Mention ============ */\n.oc-mention {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n vertical-align: baseline;\n}\n\n.oc-mention:hover {\n background: rgba(15, 118, 110, 0.2);\n color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-mention__avatar {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.oc-mention__at {\n opacity: 0.7;\n}\n\n.oc-mention__name {\n font-weight: 600;\n}\n\n/* ============ Linked Resource ============ */\n.oc-linked-resource {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 13px;\n font-family: inherit;\n color: var(--resource-color, var(--oc-fg-secondary));\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.oc-linked-resource:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--resource-color, var(--oc-border-default));\n transform: translateY(-1px);\n}\n\n.oc-linked-resource__icon {\n display: flex;\n align-items: center;\n opacity: 0.8;\n}\n\n.oc-linked-resource__title {\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.oc-linked-resource__ref {\n font-size: 11px;\n font-weight: 400;\n color: var(--oc-fg-tertiary, #94A3B8);\n padding-left: 6px;\n border-left: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* Resource type colors */\n.oc-linked-resource--document { --resource-color: var(--oc-info, #0891B2); }\n.oc-linked-resource--collection { --resource-color: var(--oc-warning, #D97706); }\n.oc-linked-resource--annotation { --resource-color: var(--oc-accent, #0F766E); }\n.oc-linked-resource--comment { --resource-color: var(--oc-fg-secondary, #475569); }\n.oc-linked-resource--clause { --resource-color: var(--oc-success, #059669); }\n.oc-linked-resource--user { --resource-color: var(--oc-accent, #0F766E); }\n\n/* ============ Resource List ============ */\n.oc-resource-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-resource-list__label {\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-resource-list__items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n/* ============ Reaction Button ============ */\n.oc-reaction-button {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 14px;\n font-family: inherit;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-button:hover {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n transform: scale(1.05);\n}\n\n.oc-reaction-button--active {\n background: rgba(15, 118, 110, 0.1);\n border-color: rgba(15, 118, 110, 0.3);\n}\n\n.oc-reaction-button--active:hover {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-reaction-button__emoji {\n font-size: 14px;\n line-height: 1;\n}\n\n.oc-reaction-button__count {\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-reaction-button--active .oc-reaction-button__count {\n color: var(--oc-accent, #0F766E);\n}\n\n/* ============ Reaction Bar ============ */\n.oc-reaction-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-reaction-bar__add {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px dashed var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-bar__add:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* ============ Thread Action ============ */\n.oc-thread-action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-action:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-action--destructive {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action--destructive:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action__label {\n white-space: nowrap;\n}\n\n/* ============ Thread Input ============ */\n.oc-thread-input {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-input__replying {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n}\n\n.oc-thread-input__replying-label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-input__cancel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-input__cancel:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n/* ============ Thread Meta ============ */\n.oc-thread-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding: 12px 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-meta__item {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.oc-thread-meta__item svg {\n opacity: 0.6;\n}\n\n.oc-thread-meta__participants {\n display: flex;\n align-items: center;\n}\n\n.oc-thread-meta__activity {\n margin-left: auto;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n";
|
|
1705
1706
|
|
|
@@ -1714,7 +1715,7 @@ interface DiscussionAuthor {
|
|
|
1714
1715
|
interface CategoryBadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
1715
1716
|
category: DiscussionCategory;
|
|
1716
1717
|
}
|
|
1717
|
-
declare const CategoryBadge:
|
|
1718
|
+
declare const CategoryBadge: React__default.ForwardRefExoticComponent<CategoryBadgeProps & React__default.RefAttributes<HTMLSpanElement>>;
|
|
1718
1719
|
interface DiscussionItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
1719
1720
|
/** Unique identifier */
|
|
1720
1721
|
id: string;
|
|
@@ -1753,7 +1754,7 @@ interface DiscussionItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1753
1754
|
/** Vote handler */
|
|
1754
1755
|
onVote?: () => void;
|
|
1755
1756
|
}
|
|
1756
|
-
declare const DiscussionItem:
|
|
1757
|
+
declare const DiscussionItem: React__default.ForwardRefExoticComponent<DiscussionItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1757
1758
|
interface DiscussionListProps extends HTMLAttributes<HTMLDivElement> {
|
|
1758
1759
|
/** Visual variant */
|
|
1759
1760
|
variant?: 'card' | 'compact' | 'minimal';
|
|
@@ -1766,7 +1767,7 @@ interface DiscussionListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1766
1767
|
/** Children (DiscussionItem components) */
|
|
1767
1768
|
children?: ReactNode;
|
|
1768
1769
|
}
|
|
1769
|
-
declare const DiscussionList:
|
|
1770
|
+
declare const DiscussionList: React__default.ForwardRefExoticComponent<DiscussionListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1770
1771
|
interface DiscussionFilterOption {
|
|
1771
1772
|
id: string;
|
|
1772
1773
|
label: string;
|
|
@@ -1795,14 +1796,14 @@ interface DiscussionFiltersProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1795
1796
|
/** Search placeholder */
|
|
1796
1797
|
searchPlaceholder?: string;
|
|
1797
1798
|
}
|
|
1798
|
-
declare const DiscussionFilters:
|
|
1799
|
+
declare const DiscussionFilters: React__default.ForwardRefExoticComponent<DiscussionFiltersProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1799
1800
|
interface NewDiscussionButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1800
1801
|
/** Icon to display */
|
|
1801
1802
|
icon?: ReactNode;
|
|
1802
1803
|
/** Button text */
|
|
1803
1804
|
children?: ReactNode;
|
|
1804
1805
|
}
|
|
1805
|
-
declare const NewDiscussionButton:
|
|
1806
|
+
declare const NewDiscussionButton: React__default.ForwardRefExoticComponent<NewDiscussionButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1806
1807
|
interface DiscussionStatsProps extends HTMLAttributes<HTMLDivElement> {
|
|
1807
1808
|
/** Total discussion count */
|
|
1808
1809
|
totalCount?: number;
|
|
@@ -1813,7 +1814,7 @@ interface DiscussionStatsProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1813
1814
|
/** Participants count */
|
|
1814
1815
|
participantCount?: number;
|
|
1815
1816
|
}
|
|
1816
|
-
declare const DiscussionStats:
|
|
1817
|
+
declare const DiscussionStats: React__default.ForwardRefExoticComponent<DiscussionStatsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1817
1818
|
|
|
1818
1819
|
declare const discussionStyles = "\n/* ============ Category Badge ============ */\n.oc-category-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--category-color, var(--oc-fg-secondary, #475569));\n background: color-mix(in srgb, var(--category-color, var(--oc-fg-secondary)) 10%, transparent);\n border-radius: var(--oc-radius-sm, 6px);\n white-space: nowrap;\n}\n\n.oc-category-badge__label {\n line-height: 1;\n}\n\n/* ============ Discussion List ============ */\n.oc-discussion-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n}\n\n.oc-discussion-list--card {\n gap: 12px;\n background: transparent;\n}\n\n.oc-discussion-list--compact,\n.oc-discussion-list--minimal {\n border: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-discussion-list--loading {\n gap: 0;\n}\n\n.oc-discussion-list__loading {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.oc-discussion-list__skeleton {\n height: 80px;\n background: var(--oc-bg-surface, #F8F8F8);\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.oc-discussion-list__skeleton:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.oc-discussion-list__skeleton:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ============ Discussion Item - Card Variant ============ */\n.oc-discussion-item--card {\n display: flex;\n gap: 16px;\n padding: 16px 20px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item--card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));\n transform: translateY(-1px);\n}\n\n.oc-discussion-item--card:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-discussion-item--card.oc-discussion-item--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, transparent 30%);\n}\n\n.oc-discussion-item--card.oc-discussion-item--unread {\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item--card.oc-discussion-item--answered,\n.oc-discussion-item--card.oc-discussion-item--resolved {\n border-left: 3px solid var(--oc-success, #059669);\n}\n\n/* Vote column */\n.oc-discussion-item__votes {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 40px;\n padding-top: 2px;\n}\n\n.oc-discussion-item__vote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item__vote-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-accent, #0F766E);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__vote-btn--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-item__vote-btn--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-discussion-item__vote-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* Main content */\n.oc-discussion-item__main {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-discussion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__status-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-discussion-item__status-icon--resolved {\n color: var(--oc-success, #059669);\n}\n\n.oc-discussion-item__status-icon--pinned {\n color: var(--oc-warning, #D97706);\n}\n\n.oc-discussion-item__activity {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n.oc-discussion-item__title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n.oc-discussion-item--card .oc-discussion-item__title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item--unread .oc-discussion-item__title {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__preview {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: var(--oc-fg-secondary, #475569);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-discussion-item__tag {\n display: inline-block;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-top: 4px;\n}\n\n.oc-discussion-item__author {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-discussion-item__author-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-item__author-badge {\n display: inline-flex;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-discussion-item__created {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item__stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-discussion-item__stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item__stat svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Item - Compact Variant ============ */\n.oc-discussion-item--compact {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--compact:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--compact:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--compact.oc-discussion-item--pinned {\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 20%);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__leading {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__title {\n font-size: 14px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tags {\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tag {\n font-size: 10px;\n padding: 1px 6px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n/* ============ Discussion Item - Minimal Variant ============ */\n.oc-discussion-item--minimal {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--minimal:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--minimal:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__avatar {\n flex-shrink: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__title {\n font-size: 14px;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__byline {\n font-size: 12px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time::before {\n content: '\\00B7';\n margin: 0 6px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-canvas, #FAFAFA);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Filters ============ */\n.oc-discussion-filters {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n margin-bottom: 16px;\n}\n\n.oc-discussion-filters__categories {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.oc-discussion-filters__category {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__category:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-discussion-filters__category--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-filters__category--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-discussion-filters__count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 11px;\n font-weight: 600;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-filters__category--active .oc-discussion-filters__count {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.oc-discussion-filters__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-filters__search {\n position: relative;\n flex: 1;\n min-width: 200px;\n max-width: 400px;\n}\n\n.oc-discussion-filters__search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n pointer-events: none;\n}\n\n.oc-discussion-filters__search-input {\n width: 100%;\n padding: 10px 12px 10px 38px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__search-input:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n.oc-discussion-filters__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-filters__sort {\n padding: 10px 32px 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white) url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\") right 8px center/20px no-repeat;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n appearance: none;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__sort:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* ============ New Discussion Button ============ */\n.oc-new-discussion-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-new-discussion-btn:hover {\n background: var(--oc-accent-hover, #0D9488);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-md, 0 4px 6px rgba(15, 23, 42, 0.05));\n}\n\n.oc-new-discussion-btn:active {\n transform: translateY(0);\n}\n\n.oc-new-discussion-btn:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============ Discussion Stats ============ */\n.oc-discussion-stats {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 12px 0;\n}\n\n.oc-discussion-stats__item {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.oc-discussion-stats__value {\n font-size: 18px;\n font-weight: 700;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-stats__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-stats__item--answered .oc-discussion-stats__value {\n color: var(--oc-success, #059669);\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 768px) {\n .oc-discussion-item--card {\n flex-direction: column;\n gap: 12px;\n }\n\n .oc-discussion-item__votes {\n flex-direction: row;\n min-width: unset;\n gap: 8px;\n order: -1;\n }\n\n .oc-discussion-item__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-discussion-item__stats {\n width: 100%;\n justify-content: flex-start;\n }\n\n .oc-discussion-filters__categories {\n overflow-x: auto;\n flex-wrap: nowrap;\n padding-bottom: 8px;\n margin-bottom: -8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-discussion-filters__category {\n flex-shrink: 0;\n }\n\n .oc-discussion-filters__actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .oc-discussion-filters__search {\n max-width: none;\n }\n\n .oc-discussion-filters__sort {\n width: 100%;\n }\n\n .oc-discussion-stats {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n@media (max-width: 480px) {\n .oc-discussion-item--compact,\n .oc-discussion-item--minimal {\n padding: 10px 12px;\n }\n\n .oc-discussion-item--compact .oc-discussion-item__meta {\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n }\n\n .oc-new-discussion-btn {\n width: 100%;\n justify-content: center;\n }\n}\n";
|
|
1819
1820
|
|
|
@@ -1857,19 +1858,19 @@ interface FileSystemProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1857
1858
|
children: ReactNode;
|
|
1858
1859
|
}
|
|
1859
1860
|
declare const useFileSystem: () => FileSystemContextValue;
|
|
1860
|
-
declare const FileSystem:
|
|
1861
|
+
declare const FileSystem: React__default.ForwardRefExoticComponent<FileSystemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1861
1862
|
interface FileSystemLayoutProps extends HTMLAttributes<HTMLDivElement> {
|
|
1862
1863
|
children: ReactNode;
|
|
1863
1864
|
}
|
|
1864
|
-
declare const FileSystemLayout:
|
|
1865
|
+
declare const FileSystemLayout: React__default.ForwardRefExoticComponent<FileSystemLayoutProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1865
1866
|
interface FileSystemSidebarProps extends HTMLAttributes<HTMLDivElement> {
|
|
1866
1867
|
children: ReactNode;
|
|
1867
1868
|
}
|
|
1868
|
-
declare const FileSystemSidebar:
|
|
1869
|
+
declare const FileSystemSidebar: React__default.ForwardRefExoticComponent<FileSystemSidebarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1869
1870
|
interface FileSystemMainProps extends HTMLAttributes<HTMLDivElement> {
|
|
1870
1871
|
children: ReactNode;
|
|
1871
1872
|
}
|
|
1872
|
-
declare const FileSystemMain:
|
|
1873
|
+
declare const FileSystemMain: React__default.ForwardRefExoticComponent<FileSystemMainProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1873
1874
|
|
|
1874
1875
|
interface FolderTreeProps extends HTMLAttributes<HTMLDivElement> {
|
|
1875
1876
|
/** Root label displayed at top */
|
|
@@ -1881,7 +1882,7 @@ interface FolderTreeProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1881
1882
|
/** Custom render for folder items */
|
|
1882
1883
|
children?: ReactNode;
|
|
1883
1884
|
}
|
|
1884
|
-
declare const FolderTree:
|
|
1885
|
+
declare const FolderTree: React__default.ForwardRefExoticComponent<FolderTreeProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1885
1886
|
interface FolderTreeItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
1886
1887
|
/** The folder item data */
|
|
1887
1888
|
item: FileSystemItem;
|
|
@@ -1890,7 +1891,7 @@ interface FolderTreeItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1890
1891
|
/** Custom icon */
|
|
1891
1892
|
icon?: ReactNode;
|
|
1892
1893
|
}
|
|
1893
|
-
declare const FolderTreeItem:
|
|
1894
|
+
declare const FolderTreeItem: React__default.ForwardRefExoticComponent<FolderTreeItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1894
1895
|
|
|
1895
1896
|
interface FileListProps extends HTMLAttributes<HTMLDivElement> {
|
|
1896
1897
|
/** Items to display */
|
|
@@ -1906,7 +1907,7 @@ interface FileListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1906
1907
|
/** Callback when item is double-clicked (open) */
|
|
1907
1908
|
onItemOpen?: (item: FileSystemItem) => void;
|
|
1908
1909
|
}
|
|
1909
|
-
declare const FileList:
|
|
1910
|
+
declare const FileList: React__default.ForwardRefExoticComponent<FileListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1910
1911
|
interface FileListItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
1911
1912
|
/** The file/folder item */
|
|
1912
1913
|
item: FileSystemItem;
|
|
@@ -1915,7 +1916,7 @@ interface FileListItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1915
1916
|
/** Additional actions */
|
|
1916
1917
|
actions?: ReactNode;
|
|
1917
1918
|
}
|
|
1918
|
-
declare const FileListItem:
|
|
1919
|
+
declare const FileListItem: React__default.ForwardRefExoticComponent<FileListItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1919
1920
|
|
|
1920
1921
|
interface FilePathBreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
|
|
1921
1922
|
/** Root label */
|
|
@@ -1927,7 +1928,7 @@ interface FilePathBreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1927
1928
|
/** Callback when segment is clicked */
|
|
1928
1929
|
onNavigate?: (path: string[]) => void;
|
|
1929
1930
|
}
|
|
1930
|
-
declare const FilePathBreadcrumb:
|
|
1931
|
+
declare const FilePathBreadcrumb: React__default.ForwardRefExoticComponent<FilePathBreadcrumbProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1931
1932
|
|
|
1932
1933
|
interface FileSystemToolbarProps extends HTMLAttributes<HTMLDivElement> {
|
|
1933
1934
|
/** Show view mode toggle */
|
|
@@ -1941,7 +1942,7 @@ interface FileSystemToolbarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1941
1942
|
/** Children for custom layout */
|
|
1942
1943
|
children?: ReactNode;
|
|
1943
1944
|
}
|
|
1944
|
-
declare const FileSystemToolbar:
|
|
1945
|
+
declare const FileSystemToolbar: React__default.ForwardRefExoticComponent<FileSystemToolbarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1945
1946
|
interface ToolbarButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1946
1947
|
/** Button variant */
|
|
1947
1948
|
variant?: 'default' | 'primary';
|
|
@@ -1952,8 +1953,8 @@ interface ToolbarButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
|
1952
1953
|
/** Button type */
|
|
1953
1954
|
type?: 'button' | 'submit' | 'reset';
|
|
1954
1955
|
}
|
|
1955
|
-
declare const ToolbarButton:
|
|
1956
|
-
declare const ToolbarSeparator:
|
|
1956
|
+
declare const ToolbarButton: React__default.ForwardRefExoticComponent<ToolbarButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1957
|
+
declare const ToolbarSeparator: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1957
1958
|
|
|
1958
1959
|
declare const fileSystemStyles = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM CONTAINER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-filesystem {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FAFAFA);\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n.oc-filesystem__layout {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.oc-filesystem__sidebar {\n width: 240px;\n min-width: 240px;\n background: var(--oc-bg-surface, white);\n border-right: 1px solid var(--oc-border-default, #E2E8F0);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-filesystem__main {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree {\n display: flex;\n flex-direction: column;\n padding: 8px;\n overflow-y: auto;\n}\n\n.oc-folder-tree__root {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 4px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n}\n\n.oc-folder-tree__root:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree__root--active {\n background: rgba(15, 118, 110, 0.08);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree__root-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-folder-tree__root-label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree__content {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree-item {\n display: flex;\n flex-direction: column;\n}\n\n.oc-folder-tree-item__row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n border-radius: var(--oc-radius-md, 8px);\n transition: background var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__row:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-folder-tree-item--active > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.08);\n}\n\n.oc-folder-tree-item--in-path > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-folder-tree-item__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-folder-tree-item__toggle:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-folder-tree-item__toggle--hidden {\n visibility: hidden;\n}\n\n.oc-folder-tree-item__chevron--expanded {\n transform: rotate(90deg);\n}\n\n.oc-folder-tree-item__button {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n padding: 6px 8px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n text-align: left;\n border-radius: var(--oc-radius-sm, 6px);\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__button:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__button {\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #F59E0B;\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__icon {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree-item__children {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE PATH BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-breadcrumb {\n display: flex;\n align-items: center;\n}\n\n.oc-file-breadcrumb__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.oc-file-breadcrumb__item {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.oc-file-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-file-breadcrumb__link:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-file-breadcrumb__link--active {\n color: var(--oc-fg-primary, #1E293B);\n cursor: default;\n}\n\n.oc-file-breadcrumb__link--active:hover {\n background: transparent;\n}\n\n.oc-file-breadcrumb__icon {\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-file-breadcrumb__separator {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM TOOLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-fs-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-fs-toolbar__left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-fs-toolbar__center {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-fs-toolbar__right {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.oc-fs-toolbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-fs-toolbar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__nav-btn:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__nav-btn:disabled {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.oc-fs-toolbar__view-toggle {\n display: flex;\n align-items: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-md, 8px);\n padding: 3px;\n}\n\n.oc-fs-toolbar__view-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__view-btn:hover {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-fs-toolbar__view-btn--active {\n background: var(--oc-bg-surface, white);\n color: var(--oc-fg-primary, #1E293B);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-fs-toolbar__button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__button:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__button--primary {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-fs-toolbar__button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-fs-toolbar__button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-fs-toolbar__separator {\n width: 1px;\n height: 24px;\n background: var(--oc-border-default, #E2E8F0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-file-list__header {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FAFAFA);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__header-cell {\n flex-shrink: 0;\n}\n\n.oc-file-list__header-cell--name {\n flex: 1;\n min-width: 0;\n}\n\n.oc-file-list__header-cell--modified {\n width: 140px;\n}\n\n.oc-file-list__header-cell--size {\n width: 100px;\n text-align: right;\n}\n\n.oc-file-list__content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n\n.oc-file-list--list .oc-file-list__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 8px;\n}\n\n.oc-file-list--grid .oc-file-list__content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n padding: 16px;\n}\n\n.oc-file-list__empty {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n}\n\n.oc-file-list__empty-content {\n text-align: center;\n max-width: 300px;\n}\n\n.oc-file-list__empty-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 8px;\n}\n\n.oc-file-list__empty-description {\n font-size: 14px;\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - LIST VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--list {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--list:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-file-list-item--list:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--list.oc-file-list-item--selected {\n background: rgba(15, 118, 110, 0.08);\n border-color: rgba(15, 118, 110, 0.2);\n}\n\n.oc-file-list-item__cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-file-list-item__cell--name {\n flex: 1;\n min-width: 0;\n gap: 12px;\n}\n\n.oc-file-list-item__cell--modified {\n width: 140px;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__cell--size {\n width: 100px;\n justify-content: flex-end;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__name-text {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - GRID VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 16px 12px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--grid:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-file-list-item--grid:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--grid.oc-file-list-item--selected {\n border-color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon {\n width: 48px;\n height: 48px;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__name {\n width: 100%;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE ICONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n}\n\n.oc-file-list-item__icon--folder {\n color: #F59E0B;\n}\n\n.oc-file-list-item__icon--pdf {\n color: #DC2626;\n}\n\n.oc-file-list-item__icon--document {\n color: #2563EB;\n}\n\n.oc-file-list-item__icon--image {\n color: #059669;\n}\n\n.oc-file-list-item__icon--spreadsheet {\n color: #059669;\n}\n\n.oc-file-list-item__icon--presentation {\n color: #EA580C;\n}\n\n.oc-file-list-item__icon--archive {\n color: #7C3AED;\n}\n\n.oc-file-list-item__icon--unknown {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (max-width: 768px) {\n .oc-filesystem__sidebar {\n display: none;\n }\n\n .oc-file-list__header-cell--modified,\n .oc-file-list-item__cell--modified {\n display: none;\n }\n\n .oc-file-list__header-cell--size,\n .oc-file-list-item__cell--size {\n width: 80px;\n }\n\n .oc-file-breadcrumb__list {\n overflow-x: auto;\n flex-wrap: nowrap;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-fs-toolbar {\n padding: 10px 12px;\n gap: 8px;\n }\n}\n";
|
|
1959
1960
|
|
|
@@ -1984,7 +1985,7 @@ interface ExtractCardProps extends HTMLAttributes<HTMLElement> {
|
|
|
1984
1985
|
/** Context menu content */
|
|
1985
1986
|
menu?: ReactNode;
|
|
1986
1987
|
/** Click handler for built-in kebab menu button */
|
|
1987
|
-
onMenuClick?: (e:
|
|
1988
|
+
onMenuClick?: (e: React__default.MouseEvent) => void;
|
|
1988
1989
|
/** Additional class name */
|
|
1989
1990
|
className?: string;
|
|
1990
1991
|
}
|
|
@@ -1997,8 +1998,8 @@ interface ExtractListProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
1997
1998
|
className?: string;
|
|
1998
1999
|
children: ReactNode;
|
|
1999
2000
|
}
|
|
2000
|
-
declare const ExtractCard:
|
|
2001
|
-
declare const ExtractList:
|
|
2001
|
+
declare const ExtractCard: React__default.ForwardRefExoticComponent<ExtractCardProps & React__default.RefAttributes<HTMLElement>>;
|
|
2002
|
+
declare const ExtractList: React__default.ForwardRefExoticComponent<ExtractListProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
2002
2003
|
|
|
2003
2004
|
declare const extractCardStyles = "\n/* ============================================\n ExtractCard Component\n ============================================ */\n\n.oc-extract-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-extract-card--clickable {\n cursor: pointer;\n}\n\n.oc-extract-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Icon */\n.oc-extract-card__icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-extract-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-extract-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Status badge */\n.oc-extract-card__status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n.oc-extract-card__status svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-extract-card__status--pending {\n background: #F1F5F9;\n color: #64748B;\n}\n\n.oc-extract-card__status--queued {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.oc-extract-card__status--running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.oc-extract-card__status--completed {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.oc-extract-card__status--failed {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.oc-extract-card__progress-text {\n font-weight: 500;\n opacity: 0.8;\n}\n\n/* Spinning animation for running status */\n@keyframes oc-extract-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.oc-extract-card__status-icon--spinning {\n animation: oc-extract-spin 1s linear infinite;\n}\n\n/* Corpus badge */\n.oc-extract-card__corpus {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-extract-card__corpus::before {\n content: 'from ';\n opacity: 0.7;\n}\n\n/* Name */\n.oc-extract-card__name {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 4px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-extract-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Progress bar */\n.oc-extract-card__progress-bar {\n height: 4px;\n background: var(--oc-bg-surface-hover, #E2E8F0);\n border-radius: 2px;\n overflow: hidden;\n margin-bottom: 12px;\n}\n\n.oc-extract-card__progress-fill {\n height: 100%;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* Footer */\n.oc-extract-card__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n/* Stats */\n.oc-extract-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-secondary, #64748B);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-extract-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-extract-card__stats span:not(:last-child)::after {\n content: '\\00B7';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Time */\n.oc-extract-card__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Menu */\n.oc-extract-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-extract-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* ============================================\n ExtractList Component\n ============================================ */\n\n.oc-extract-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-extract-list--gap-sm {\n gap: 12px;\n}\n\n.oc-extract-list--gap-md {\n gap: 16px;\n}\n\n.oc-extract-list--gap-lg {\n gap: 24px;\n}\n\n/* Grid layout */\n.oc-extract-list--grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-extract-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-extract-card__icon {\n width: 36px;\n height: 36px;\n }\n\n .oc-extract-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-extract-card__name {\n font-size: 15px;\n }\n\n .oc-extract-card__description {\n font-size: 13px;\n }\n\n .oc-extract-card__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-extract-list--grid {\n grid-template-columns: 1fr;\n }\n}\n";
|
|
2004
2005
|
|
|
@@ -2079,11 +2080,372 @@ interface DataGridProps<T = Record<string, unknown>> extends Omit<HTMLAttributes
|
|
|
2079
2080
|
className?: string;
|
|
2080
2081
|
}
|
|
2081
2082
|
declare const DataGrid: <T extends Record<string, unknown>>(props: DataGridProps<T> & {
|
|
2082
|
-
ref?:
|
|
2083
|
-
}) =>
|
|
2083
|
+
ref?: React__default.ForwardedRef<HTMLDivElement>;
|
|
2084
|
+
}) => React__default.ReactElement;
|
|
2084
2085
|
|
|
2085
2086
|
declare const dataGridStyles = "\n/* ============================================\n DataGrid Component\n ============================================ */\n\n.oc-data-grid {\n position: relative;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: auto;\n}\n\n.oc-data-grid__table {\n width: 100%;\n min-width: max-content;\n border-collapse: collapse;\n font-size: 14px;\n}\n\n/* Header */\n.oc-data-grid__header {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-data-grid--sticky-header .oc-data-grid__header {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.oc-data-grid__th {\n padding: 14px 16px;\n text-align: left;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #64748B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-data-grid__th--sortable {\n cursor: pointer;\n transition: color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-data-grid__th--checkbox,\n.oc-data-grid__th--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__th--center {\n text-align: center;\n}\n\n.oc-data-grid__th--right {\n text-align: right;\n}\n\n.oc-data-grid__th-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-data-grid__sort-icon {\n opacity: 0.5;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover .oc-data-grid__sort-icon {\n opacity: 1;\n}\n\n/* Body */\n.oc-data-grid__body {\n /* Body styles */\n}\n\n.oc-data-grid__row {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n transition: background-color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:last-child {\n border-bottom: none;\n}\n\n.oc-data-grid__row:hover {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid__row--clickable {\n cursor: pointer;\n}\n\n.oc-data-grid__row--selected {\n background: rgba(232, 90, 79, 0.06);\n}\n\n.oc-data-grid__row--selected:hover {\n background: rgba(232, 90, 79, 0.1);\n}\n\n/* Striped */\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even):hover {\n background: #F1F5F9;\n}\n\n/* Cells */\n.oc-data-grid__cell {\n padding: 14px 16px;\n color: var(--oc-fg-primary, #1E293B);\n vertical-align: middle;\n}\n\n.oc-data-grid__cell--checkbox,\n.oc-data-grid__cell--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__cell--center {\n text-align: center;\n}\n\n.oc-data-grid__cell--right {\n text-align: right;\n}\n\n.oc-data-grid__cell--number {\n font-variant-numeric: tabular-nums;\n}\n\n.oc-data-grid__cell-content {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Compact mode */\n.oc-data-grid--compact .oc-data-grid__th {\n padding: 10px 12px;\n}\n\n.oc-data-grid--compact .oc-data-grid__cell {\n padding: 10px 12px;\n}\n\n/* Checkbox styling */\n.oc-data-grid__checkbox-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.oc-data-grid__checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.oc-data-grid__checkbox-custom {\n width: 18px;\n height: 18px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n border-radius: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n transition: all var(--oc-duration-fast, 0.15s);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-data-grid__checkbox-custom::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transform: scale(0);\n transition: transform var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n height: 3px;\n border-radius: 1px;\n}\n\n.oc-data-grid__checkbox:focus-visible + .oc-data-grid__checkbox-custom {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Boolean check */\n.oc-data-grid__boolean-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #D1FAE5;\n color: #065F46;\n}\n\n/* Links */\n.oc-data-grid__link {\n color: var(--oc-accent, #E85A4F);\n text-decoration: none;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__link:hover {\n opacity: 0.8;\n text-decoration: underline;\n}\n\n/* Cell actions */\n.oc-data-grid__cell-action-wrapper {\n position: relative;\n margin-left: auto;\n}\n\n.oc-data-grid__cell-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n opacity: 0;\n transition: all var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:hover .oc-data-grid__cell-action-btn,\n.oc-data-grid__cell-action-btn[aria-expanded=\"true\"] {\n opacity: 1;\n}\n\n.oc-data-grid__cell-action-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Cell menu */\n.oc-data-grid__cell-menu {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 20;\n min-width: 160px;\n margin-top: 4px;\n padding: 6px 0;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.oc-data-grid__cell-menu-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n background: transparent;\n border: none;\n font-size: 14px;\n color: var(--oc-fg-primary, #334155);\n text-align: left;\n cursor: pointer;\n transition: background var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__cell-menu-item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-data-grid__cell-menu-item--danger {\n color: #DC2626;\n}\n\n.oc-data-grid__cell-menu-item--danger:hover {\n background: #FEF2F2;\n}\n\n.oc-data-grid__cell-menu-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n}\n\n/* Empty state */\n.oc-data-grid__empty {\n padding: 48px 24px;\n text-align: center;\n}\n\n.oc-data-grid__empty-default {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-data-grid__empty-default p {\n margin: 0;\n font-size: 15px;\n}\n\n/* Loading skeleton */\n.oc-data-grid__row--skeleton {\n pointer-events: none;\n}\n\n.oc-data-grid__skeleton {\n height: 16px;\n background: linear-gradient(\n 90deg,\n var(--oc-bg-surface-hover, #F1F5F9) 0%,\n #E2E8F0 50%,\n var(--oc-bg-surface-hover, #F1F5F9) 100%\n );\n background-size: 200% 100%;\n border-radius: 4px;\n animation: oc-data-grid-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-data-grid-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-data-grid {\n border-radius: var(--oc-radius-md, 8px);\n }\n\n .oc-data-grid__th {\n padding: 12px;\n font-size: 11px;\n }\n\n .oc-data-grid__cell {\n padding: 12px;\n font-size: 13px;\n }\n\n .oc-data-grid__cell-action-btn {\n opacity: 1;\n }\n}\n";
|
|
2086
2087
|
|
|
2088
|
+
/**
|
|
2089
|
+
* Relationship types for document graph visualization.
|
|
2090
|
+
* Maps to backend DocumentRelationship and AnnotationLabel models.
|
|
2091
|
+
*/
|
|
2092
|
+
/** Relationship label from backend AnnotationLabel */
|
|
2093
|
+
interface RelationshipLabel {
|
|
2094
|
+
id: string;
|
|
2095
|
+
text: string;
|
|
2096
|
+
color: string;
|
|
2097
|
+
icon?: string;
|
|
2098
|
+
description?: string;
|
|
2099
|
+
}
|
|
2100
|
+
/** Source of the relationship */
|
|
2101
|
+
type RelationshipSource = 'manual' | 'analyzer' | 'imported';
|
|
2102
|
+
/** Document relationship from backend DocumentRelationship */
|
|
2103
|
+
interface DocumentRelationship {
|
|
2104
|
+
id: string;
|
|
2105
|
+
sourceDocumentId: string;
|
|
2106
|
+
targetDocumentId: string;
|
|
2107
|
+
label: RelationshipLabel;
|
|
2108
|
+
source: RelationshipSource;
|
|
2109
|
+
analyzerId?: string;
|
|
2110
|
+
analysisId?: string;
|
|
2111
|
+
creatorId?: string;
|
|
2112
|
+
createdAt?: string;
|
|
2113
|
+
}
|
|
2114
|
+
/** Minimal document info for graph nodes */
|
|
2115
|
+
interface GraphDocument {
|
|
2116
|
+
id: string;
|
|
2117
|
+
title: string;
|
|
2118
|
+
documentType?: 'pdf' | 'docx' | 'txt' | 'legislation' | 'case' | 'contract';
|
|
2119
|
+
icon?: string;
|
|
2120
|
+
relationshipCount?: number;
|
|
2121
|
+
}
|
|
2122
|
+
/** Position in 2D space for graph layout */
|
|
2123
|
+
interface Position {
|
|
2124
|
+
x: number;
|
|
2125
|
+
y: number;
|
|
2126
|
+
}
|
|
2127
|
+
/** Graph node with position and state */
|
|
2128
|
+
interface GraphNodeData extends GraphDocument {
|
|
2129
|
+
position?: Position;
|
|
2130
|
+
depth?: number;
|
|
2131
|
+
isExpanded?: boolean;
|
|
2132
|
+
canExpand?: boolean;
|
|
2133
|
+
}
|
|
2134
|
+
/** Graph edge with relationship data */
|
|
2135
|
+
interface GraphEdgeData {
|
|
2136
|
+
id: string;
|
|
2137
|
+
source: string;
|
|
2138
|
+
target: string;
|
|
2139
|
+
relationship: DocumentRelationship;
|
|
2140
|
+
}
|
|
2141
|
+
/** Graph data for visualization */
|
|
2142
|
+
interface GraphData {
|
|
2143
|
+
nodes: GraphNodeData[];
|
|
2144
|
+
edges: GraphEdgeData[];
|
|
2145
|
+
focusNodeId?: string;
|
|
2146
|
+
maxDepthLoaded: number;
|
|
2147
|
+
hasMore: boolean;
|
|
2148
|
+
}
|
|
2149
|
+
/** Layout algorithm options */
|
|
2150
|
+
type GraphLayout = 'force' | 'hierarchical';
|
|
2151
|
+
/** Filter options for graph */
|
|
2152
|
+
interface GraphFilters {
|
|
2153
|
+
relationshipTypes?: string[];
|
|
2154
|
+
sources?: RelationshipSource[];
|
|
2155
|
+
maxDepth?: number;
|
|
2156
|
+
}
|
|
2157
|
+
|
|
2158
|
+
type NodeSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
2159
|
+
type NodeVariant = 'default' | 'active' | 'muted' | 'connected';
|
|
2160
|
+
interface NodeProps extends HTMLAttributes<HTMLDivElement> {
|
|
2161
|
+
/** Size of the node */
|
|
2162
|
+
size?: NodeSize;
|
|
2163
|
+
/** Visual variant */
|
|
2164
|
+
variant?: NodeVariant;
|
|
2165
|
+
/** Show pulse animation */
|
|
2166
|
+
pulse?: boolean;
|
|
2167
|
+
/** Badge count (shown for sm and larger) */
|
|
2168
|
+
count?: number;
|
|
2169
|
+
/** Whether the node is interactive */
|
|
2170
|
+
interactive?: boolean;
|
|
2171
|
+
}
|
|
2172
|
+
/**
|
|
2173
|
+
* Node - Signature visual element for OpenContracts.
|
|
2174
|
+
*
|
|
2175
|
+
* Small teal circles echoing the logo's highlighted vertices.
|
|
2176
|
+
* Used to visualize connections and relationships in the legal document UI.
|
|
2177
|
+
*/
|
|
2178
|
+
declare const Node: React.ForwardRefExoticComponent<NodeProps & React.RefAttributes<HTMLDivElement>>;
|
|
2179
|
+
|
|
2180
|
+
declare const nodeStyles = "\n .oc-node {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .oc-node__circle {\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n transition:\n transform var(--oc-transition-fast, 0.15s) ease,\n background-color var(--oc-transition-fast, 0.15s) ease,\n box-shadow var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Sizes */\n .oc-node--xs .oc-node__circle {\n width: 6px;\n height: 6px;\n }\n\n .oc-node--sm .oc-node__circle {\n width: 8px;\n height: 8px;\n }\n\n .oc-node--md .oc-node__circle {\n width: 12px;\n height: 12px;\n }\n\n .oc-node--lg .oc-node__circle {\n width: 16px;\n height: 16px;\n }\n\n /* Variants */\n .oc-node--default .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n }\n\n .oc-node--active .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n\n .oc-node--muted .oc-node__circle {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-node--connected .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px var(--oc-bg-surface, #FFFFFF),\n 0 0 0 4px var(--oc-accent, #0F766E);\n }\n\n /* Interactive state */\n .oc-node--interactive {\n cursor: pointer;\n }\n\n .oc-node--interactive:hover .oc-node__circle {\n transform: scale(1.2);\n background-color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-node--interactive:active .oc-node__circle {\n transform: scale(1.1);\n }\n\n /* Pulse animation */\n .oc-node--pulse .oc-node__circle {\n animation: oc-node-pulse 2s ease-in-out infinite;\n }\n\n @keyframes oc-node-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 var(--oc-accent-light, rgba(15, 118, 110, 0.4));\n }\n 50% {\n box-shadow: 0 0 0 6px var(--oc-accent-light, rgba(15, 118, 110, 0));\n }\n }\n\n /* Count badge */\n .oc-node__count {\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%);\n margin-left: 4px;\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n line-height: 1;\n }\n\n .oc-node--active .oc-node__count,\n .oc-node--interactive:hover .oc-node__count {\n color: var(--oc-accent, #0F766E);\n }\n";
|
|
2181
|
+
|
|
2182
|
+
type EdgeVariant = 'solid' | 'dashed' | 'dotted';
|
|
2183
|
+
interface EdgeProps extends Omit<SVGAttributes<SVGGElement>, 'color'> {
|
|
2184
|
+
/** Start point */
|
|
2185
|
+
x1: number;
|
|
2186
|
+
y1: number;
|
|
2187
|
+
/** End point */
|
|
2188
|
+
x2: number;
|
|
2189
|
+
y2: number;
|
|
2190
|
+
/** Edge style variant */
|
|
2191
|
+
variant?: EdgeVariant;
|
|
2192
|
+
/** Edge color (CSS color value) */
|
|
2193
|
+
color?: string;
|
|
2194
|
+
/** Show arrow at end */
|
|
2195
|
+
arrow?: boolean;
|
|
2196
|
+
/** Edge label text */
|
|
2197
|
+
label?: string;
|
|
2198
|
+
/** Whether edge is highlighted/active */
|
|
2199
|
+
active?: boolean;
|
|
2200
|
+
/** Whether edge is muted */
|
|
2201
|
+
muted?: boolean;
|
|
2202
|
+
/** Animate the edge (for emphasis) */
|
|
2203
|
+
animated?: boolean;
|
|
2204
|
+
/** Curve amount (0 = straight, positive = curve) */
|
|
2205
|
+
curve?: number;
|
|
2206
|
+
}
|
|
2207
|
+
/**
|
|
2208
|
+
* Edge - SVG connection line between nodes.
|
|
2209
|
+
*
|
|
2210
|
+
* Used in graph visualizations to show relationships between documents.
|
|
2211
|
+
*/
|
|
2212
|
+
declare const Edge: React.ForwardRefExoticComponent<EdgeProps & React.RefAttributes<SVGGElement>>;
|
|
2213
|
+
|
|
2214
|
+
declare const edgeStyles = "\n .oc-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Variants */\n .oc-edge--solid .oc-edge__line {\n stroke-dasharray: none;\n }\n\n .oc-edge--dashed .oc-edge__line {\n stroke-dasharray: 6 4;\n }\n\n .oc-edge--dotted .oc-edge__line {\n stroke-dasharray: 2 3;\n }\n\n /* States */\n .oc-edge--active .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge--active .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-edge--muted .oc-edge__line {\n stroke: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n .oc-edge--muted .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n /* Hover state */\n .oc-edge:hover .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge:hover .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n /* Animation */\n .oc-edge--animated .oc-edge__line {\n stroke-dasharray: 8 4;\n animation: oc-edge-flow 1s linear infinite;\n }\n\n @keyframes oc-edge-flow {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: -12;\n }\n }\n\n /* Label */\n .oc-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge:hover .oc-edge__label-group,\n .oc-edge--active .oc-edge__label-group {\n opacity: 1;\n }\n\n .oc-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-edge--active .oc-edge__label-bg {\n stroke: var(--oc-accent, #0F766E);\n }\n\n .oc-edge__label {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 10px;\n font-weight: 500;\n fill: var(--oc-fg-secondary, #475569);\n }\n\n .oc-edge--active .oc-edge__label {\n fill: var(--oc-accent, #0F766E);\n }\n";
|
|
2215
|
+
|
|
2216
|
+
interface RelationshipBadgeProps extends HTMLAttributes<HTMLButtonElement> {
|
|
2217
|
+
/** Number of relationships */
|
|
2218
|
+
count: number;
|
|
2219
|
+
/** Whether the badge is active/expanded */
|
|
2220
|
+
active?: boolean;
|
|
2221
|
+
/** Size variant */
|
|
2222
|
+
size?: 'sm' | 'md';
|
|
2223
|
+
/** Disable interaction */
|
|
2224
|
+
disabled?: boolean;
|
|
2225
|
+
}
|
|
2226
|
+
/**
|
|
2227
|
+
* RelationshipBadge - Compact indicator showing relationship count.
|
|
2228
|
+
*
|
|
2229
|
+
* Shows a small node with connecting line and count.
|
|
2230
|
+
* Used in file browsers to indicate documents have relationships.
|
|
2231
|
+
*
|
|
2232
|
+
* Example: ○─3
|
|
2233
|
+
*/
|
|
2234
|
+
declare const RelationshipBadge: React.ForwardRefExoticComponent<RelationshipBadgeProps & React.RefAttributes<HTMLButtonElement>>;
|
|
2235
|
+
|
|
2236
|
+
declare const relationshipBadgeStyles = "\n .oc-relationship-badge {\n display: inline-flex;\n align-items: center;\n gap: 0;\n padding: 2px 4px 2px 2px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-badge:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 1px;\n }\n\n .oc-relationship-badge--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-badge--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector line */\n .oc-relationship-badge__connector {\n width: 6px;\n height: 1px;\n background-color: var(--oc-fg-tertiary, #94A3B8);\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__connector,\n .oc-relationship-badge--active .oc-relationship-badge__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Count */\n .oc-relationship-badge__count {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1;\n transition: color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__count,\n .oc-relationship-badge--active .oc-relationship-badge__count {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Size: sm */\n .oc-relationship-badge--sm {\n gap: 0;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__connector {\n width: 5px;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__count {\n font-size: 10px;\n }\n\n /* Size: md */\n .oc-relationship-badge--md {\n padding: 3px 6px 3px 3px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__connector {\n width: 8px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__count {\n font-size: var(--oc-font-size-xs, 11px);\n }\n";
|
|
2237
|
+
|
|
2238
|
+
interface RelationshipPillProps extends HTMLAttributes<HTMLButtonElement> {
|
|
2239
|
+
/** Document title */
|
|
2240
|
+
title: string;
|
|
2241
|
+
/** Relationship type label (e.g., "cites", "references") */
|
|
2242
|
+
relationshipType: string;
|
|
2243
|
+
/** Color for the relationship type (from AnnotationLabel.color) */
|
|
2244
|
+
relationshipColor?: string;
|
|
2245
|
+
/** Whether this relationship is incoming (target → source) or outgoing (source → target) */
|
|
2246
|
+
direction?: 'incoming' | 'outgoing';
|
|
2247
|
+
/** Source of the relationship */
|
|
2248
|
+
source?: RelationshipSource;
|
|
2249
|
+
/** Document type icon */
|
|
2250
|
+
icon?: ReactNode;
|
|
2251
|
+
/** Whether the pill is selected/active */
|
|
2252
|
+
active?: boolean;
|
|
2253
|
+
/** Disable interaction */
|
|
2254
|
+
disabled?: boolean;
|
|
2255
|
+
}
|
|
2256
|
+
/**
|
|
2257
|
+
* RelationshipPill - Compact display of a single document relationship.
|
|
2258
|
+
*
|
|
2259
|
+
* Shows node indicator, document title, and relationship type.
|
|
2260
|
+
* Used in popovers and lists to show related documents.
|
|
2261
|
+
*
|
|
2262
|
+
* Example: ○ NDA Template.docx — cites
|
|
2263
|
+
*/
|
|
2264
|
+
declare const RelationshipPill: React.ForwardRefExoticComponent<RelationshipPillProps & React.RefAttributes<HTMLButtonElement>>;
|
|
2265
|
+
|
|
2266
|
+
declare const relationshipPillStyles = "\n .oc-relationship-pill {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-pill:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-pill:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-pill--active {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-pill--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-pill--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector */\n .oc-relationship-pill__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__connector,\n .oc-relationship-pill--active .oc-relationship-pill__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-pill__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-pill__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Title */\n .oc-relationship-pill__title {\n flex: 1;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Type label */\n .oc-relationship-pill__type {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* Direction indicators */\n .oc-relationship-pill--incoming .oc-relationship-pill__type::before {\n content: '\u2190 ';\n opacity: 0.6;\n }\n\n .oc-relationship-pill--outgoing .oc-relationship-pill__type::after {\n content: ' \u2192';\n opacity: 0.6;\n }\n\n /* AI source badge */\n .oc-relationship-pill__source-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-fg-tertiary, #94A3B8);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .oc-relationship-pill--source-analyzer .oc-relationship-pill__source-badge {\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border-color: var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n";
|
|
2267
|
+
|
|
2268
|
+
interface RelationshipItem {
|
|
2269
|
+
relationship: DocumentRelationship;
|
|
2270
|
+
document: GraphDocument;
|
|
2271
|
+
/** Direction relative to the source document */
|
|
2272
|
+
direction: 'incoming' | 'outgoing';
|
|
2273
|
+
}
|
|
2274
|
+
interface RelationshipPopoverContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
2275
|
+
/** List of relationships to display */
|
|
2276
|
+
relationships: RelationshipItem[];
|
|
2277
|
+
/** Callback when a relationship is clicked */
|
|
2278
|
+
onRelationshipClick?: (item: RelationshipItem) => void;
|
|
2279
|
+
/** Callback when "View in Graph" is clicked */
|
|
2280
|
+
onViewInGraph?: () => void;
|
|
2281
|
+
/** Whether to show the "View in Graph" footer */
|
|
2282
|
+
showGraphLink?: boolean;
|
|
2283
|
+
/** Custom empty state message */
|
|
2284
|
+
emptyMessage?: string;
|
|
2285
|
+
/** Document icon renderer */
|
|
2286
|
+
renderIcon?: (doc: GraphDocument) => ReactNode;
|
|
2287
|
+
/** Maximum height before scrolling */
|
|
2288
|
+
maxHeight?: number;
|
|
2289
|
+
}
|
|
2290
|
+
/**
|
|
2291
|
+
* RelationshipPopoverContent - Content for relationship popover.
|
|
2292
|
+
*
|
|
2293
|
+
* Displays a list of related documents with relationship types.
|
|
2294
|
+
* Meant to be used with the Popover component.
|
|
2295
|
+
*/
|
|
2296
|
+
declare const RelationshipPopoverContent: React.ForwardRefExoticComponent<RelationshipPopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
2297
|
+
|
|
2298
|
+
declare const relationshipPopoverStyles = "\n .oc-relationship-popover {\n min-width: 280px;\n max-width: 360px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 24px rgba(0, 0, 0, 0.12));\n overflow: hidden;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Header */\n .oc-relationship-popover__header {\n padding: 12px 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-relationship-popover__title {\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n }\n\n /* List */\n .oc-relationship-popover__list {\n padding: 4px;\n overflow-y: auto;\n }\n\n /* Scrollbar styling */\n .oc-relationship-popover__list::-webkit-scrollbar {\n width: 6px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb {\n background-color: var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb:hover {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n /* Item */\n .oc-relationship-popover__item {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__item:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-popover__item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n /* Node indicator */\n .oc-relationship-popover__node {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n flex-shrink: 0;\n }\n\n /* Connector */\n .oc-relationship-popover__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-popover__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-popover__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Document title */\n .oc-relationship-popover__doc-title {\n flex: 1;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__doc-title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Relationship type */\n .oc-relationship-popover__rel-type {\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* AI badge */\n .oc-relationship-popover__ai-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border: 1px solid var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n /* Footer */\n .oc-relationship-popover__footer {\n padding: 8px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n }\n\n .oc-relationship-popover__graph-link {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-relationship-popover__graph-link:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-popover__graph-link svg {\n transition: transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover svg {\n transform: translateX(2px);\n }\n";
|
|
2299
|
+
|
|
2300
|
+
interface DocumentGraphProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
2301
|
+
/** Graph data (nodes and edges) */
|
|
2302
|
+
data: GraphData;
|
|
2303
|
+
/** Currently selected node ID */
|
|
2304
|
+
selectedNodeId?: string;
|
|
2305
|
+
/** Node selection handler */
|
|
2306
|
+
onNodeSelect?: (node: GraphNodeData | null) => void;
|
|
2307
|
+
/** Node expand handler (load more connections) */
|
|
2308
|
+
onNodeExpand?: (node: GraphNodeData) => void;
|
|
2309
|
+
/** Edge selection handler */
|
|
2310
|
+
onEdgeSelect?: (edge: GraphEdgeData) => void;
|
|
2311
|
+
/** Load more handler */
|
|
2312
|
+
onLoadMore?: () => void;
|
|
2313
|
+
/** Whether more can be loaded */
|
|
2314
|
+
canLoadMore?: boolean;
|
|
2315
|
+
/** Loading state */
|
|
2316
|
+
loading?: boolean;
|
|
2317
|
+
/** Available relationship labels for filtering */
|
|
2318
|
+
relationshipLabels?: RelationshipLabel[];
|
|
2319
|
+
/** Active filters (label IDs) */
|
|
2320
|
+
activeFilters?: string[];
|
|
2321
|
+
/** Filter change handler */
|
|
2322
|
+
onFiltersChange?: (filters: string[]) => void;
|
|
2323
|
+
/** Custom node icon renderer */
|
|
2324
|
+
renderNodeIcon?: (node: GraphNodeData) => ReactNode;
|
|
2325
|
+
/** Initial layout */
|
|
2326
|
+
initialLayout?: GraphLayout;
|
|
2327
|
+
/** Show controls */
|
|
2328
|
+
showControls?: boolean;
|
|
2329
|
+
/** Empty state content */
|
|
2330
|
+
emptyState?: ReactNode;
|
|
2331
|
+
}
|
|
2332
|
+
/**
|
|
2333
|
+
* DocumentGraph - Interactive graph visualization of document relationships.
|
|
2334
|
+
*
|
|
2335
|
+
* Features:
|
|
2336
|
+
* - Force-directed and hierarchical layouts (toggleable)
|
|
2337
|
+
* - Zoom and pan
|
|
2338
|
+
* - Node selection and expansion
|
|
2339
|
+
* - Relationship filtering
|
|
2340
|
+
* - Progressive loading (2 hops at a time)
|
|
2341
|
+
*/
|
|
2342
|
+
declare const DocumentGraph: React.ForwardRefExoticComponent<DocumentGraphProps & React.RefAttributes<HTMLDivElement>>;
|
|
2343
|
+
|
|
2344
|
+
interface GraphNodeProps extends Omit<SVGAttributes<SVGGElement>, 'onClick' | 'onDoubleClick'> {
|
|
2345
|
+
/** Node data */
|
|
2346
|
+
node: GraphNodeData & {
|
|
2347
|
+
position: Position;
|
|
2348
|
+
};
|
|
2349
|
+
/** Whether this node is selected */
|
|
2350
|
+
selected?: boolean;
|
|
2351
|
+
/** Whether this node is the focus node */
|
|
2352
|
+
isFocus?: boolean;
|
|
2353
|
+
/** Whether this node can be expanded to show more connections */
|
|
2354
|
+
canExpand?: boolean;
|
|
2355
|
+
/** Click handler */
|
|
2356
|
+
onClick?: (node: GraphNodeData) => void;
|
|
2357
|
+
/** Double click to expand */
|
|
2358
|
+
onExpand?: (node: GraphNodeData) => void;
|
|
2359
|
+
/** Custom icon renderer */
|
|
2360
|
+
renderIcon?: (node: GraphNodeData) => ReactNode;
|
|
2361
|
+
}
|
|
2362
|
+
/**
|
|
2363
|
+
* GraphNode - Document node in the graph visualization.
|
|
2364
|
+
*
|
|
2365
|
+
* Displays a node circle with document title below.
|
|
2366
|
+
*/
|
|
2367
|
+
declare const GraphNode: React.ForwardRefExoticComponent<GraphNodeProps & React.RefAttributes<SVGGElement>>;
|
|
2368
|
+
|
|
2369
|
+
interface GraphEdgeProps extends Omit<SVGAttributes<SVGGElement>, 'onClick'> {
|
|
2370
|
+
/** Edge data */
|
|
2371
|
+
edge: GraphEdgeData;
|
|
2372
|
+
/** Source node position */
|
|
2373
|
+
sourcePosition: Position;
|
|
2374
|
+
/** Target node position */
|
|
2375
|
+
targetPosition: Position;
|
|
2376
|
+
/** Source node radius (for path calculation) */
|
|
2377
|
+
sourceRadius?: number;
|
|
2378
|
+
/** Target node radius (for path calculation) */
|
|
2379
|
+
targetRadius?: number;
|
|
2380
|
+
/** Whether this edge is selected/highlighted */
|
|
2381
|
+
selected?: boolean;
|
|
2382
|
+
/** Whether this edge is muted (not related to selection) */
|
|
2383
|
+
muted?: boolean;
|
|
2384
|
+
/** Show label */
|
|
2385
|
+
showLabel?: boolean;
|
|
2386
|
+
/** Click handler */
|
|
2387
|
+
onClick?: (edge: GraphEdgeData) => void;
|
|
2388
|
+
}
|
|
2389
|
+
/**
|
|
2390
|
+
* GraphEdge - Relationship edge between nodes in the graph.
|
|
2391
|
+
*/
|
|
2392
|
+
declare const GraphEdge: React.ForwardRefExoticComponent<GraphEdgeProps & React.RefAttributes<SVGGElement>>;
|
|
2393
|
+
|
|
2394
|
+
interface GraphControlsProps extends HTMLAttributes<HTMLDivElement> {
|
|
2395
|
+
/** Current zoom level (1 = 100%) */
|
|
2396
|
+
zoom: number;
|
|
2397
|
+
/** Zoom change handler */
|
|
2398
|
+
onZoomChange: (zoom: number) => void;
|
|
2399
|
+
/** Current layout mode */
|
|
2400
|
+
layout: GraphLayout;
|
|
2401
|
+
/** Layout change handler */
|
|
2402
|
+
onLayoutChange: (layout: GraphLayout) => void;
|
|
2403
|
+
/** Available relationship labels for filtering */
|
|
2404
|
+
relationshipLabels?: RelationshipLabel[];
|
|
2405
|
+
/** Currently active label filters (empty = all) */
|
|
2406
|
+
activeFilters?: string[];
|
|
2407
|
+
/** Filter change handler */
|
|
2408
|
+
onFiltersChange?: (filters: string[]) => void;
|
|
2409
|
+
/** Whether more nodes can be loaded */
|
|
2410
|
+
canLoadMore?: boolean;
|
|
2411
|
+
/** Load more handler */
|
|
2412
|
+
onLoadMore?: () => void;
|
|
2413
|
+
/** Whether loading is in progress */
|
|
2414
|
+
loading?: boolean;
|
|
2415
|
+
/** Min zoom level */
|
|
2416
|
+
minZoom?: number;
|
|
2417
|
+
/** Max zoom level */
|
|
2418
|
+
maxZoom?: number;
|
|
2419
|
+
}
|
|
2420
|
+
/**
|
|
2421
|
+
* GraphControls - Control panel for document graph.
|
|
2422
|
+
*
|
|
2423
|
+
* Provides zoom, layout toggle, filters, and load more functionality.
|
|
2424
|
+
*/
|
|
2425
|
+
declare const GraphControls: React.ForwardRefExoticComponent<GraphControlsProps & React.RefAttributes<HTMLDivElement>>;
|
|
2426
|
+
|
|
2427
|
+
interface LayoutOptions {
|
|
2428
|
+
width: number;
|
|
2429
|
+
height: number;
|
|
2430
|
+
layout: GraphLayout;
|
|
2431
|
+
focusNodeId?: string;
|
|
2432
|
+
}
|
|
2433
|
+
interface LayoutResult {
|
|
2434
|
+
nodes: (GraphNodeData & {
|
|
2435
|
+
position: Position;
|
|
2436
|
+
})[];
|
|
2437
|
+
edges: GraphEdgeData[];
|
|
2438
|
+
}
|
|
2439
|
+
/**
|
|
2440
|
+
* Calculate node positions based on layout algorithm.
|
|
2441
|
+
*
|
|
2442
|
+
* Force layout: Radial arrangement from focus node
|
|
2443
|
+
* Hierarchical layout: Tree structure with focus at top
|
|
2444
|
+
*/
|
|
2445
|
+
declare function useGraphLayout(nodes: GraphNodeData[], edges: GraphEdgeData[], options: LayoutOptions): LayoutResult;
|
|
2446
|
+
|
|
2447
|
+
declare const documentGraphStyles = "\n /* ============================================\n * Document Graph Container\n * ============================================ */\n .oc-document-graph {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n }\n\n .oc-document-graph__canvas {\n width: 100%;\n height: 100%;\n cursor: grab;\n user-select: none;\n }\n\n .oc-document-graph--dragging .oc-document-graph__canvas {\n cursor: grabbing;\n }\n\n .oc-document-graph__svg {\n display: block;\n }\n\n .oc-document-graph__content {\n transform-origin: 0 0;\n }\n\n /* Empty state */\n .oc-document-graph__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-document-graph__empty svg {\n opacity: 0.5;\n }\n\n .oc-document-graph__empty p {\n margin: 0;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n }\n\n /* ============================================\n * Graph Node\n * ============================================ */\n .oc-graph-node {\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node__ring {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n opacity: 0.3;\n }\n\n .oc-graph-node--selected .oc-graph-node__ring,\n .oc-graph-node--focus .oc-graph-node__ring {\n opacity: 0.5;\n stroke-width: 2.5;\n }\n\n .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n stroke: var(--oc-bg-surface, #FFFFFF);\n stroke-width: 2;\n transition:\n fill var(--oc-transition-fast, 0.15s) ease,\n transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node:hover .oc-graph-node__circle {\n fill: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-graph-node--depth-1 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--depth-2 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n opacity: 0.7;\n }\n\n .oc-graph-node__initial {\n fill: var(--oc-bg-surface, #FFFFFF);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node__icon-wrapper {\n overflow: visible;\n }\n\n .oc-graph-node__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--oc-bg-surface, #FFFFFF);\n }\n\n .oc-graph-node__icon svg {\n width: 60%;\n height: 60%;\n }\n\n .oc-graph-node__title {\n fill: var(--oc-fg-primary, #1E293B);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 500;\n }\n\n .oc-graph-node--focus .oc-graph-node__title {\n font-weight: 600;\n }\n\n .oc-graph-node__count {\n fill: var(--oc-fg-tertiary, #94A3B8);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Expand badge */\n .oc-graph-node__expand-badge {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 1.5;\n }\n\n .oc-graph-node__expand-icon {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-badge {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-icon {\n fill: var(--oc-bg-surface, #FFFFFF);\n }\n\n /* ============================================\n * Graph Edge\n * ============================================ */\n .oc-graph-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-graph-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #CBD5E1);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge__arrow {\n fill: var(--oc-border-default, #CBD5E1);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__line,\n .oc-graph-edge--selected .oc-graph-edge__line {\n stroke-width: 2;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__line {\n opacity: 0.3;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__arrow {\n opacity: 0.3;\n }\n\n /* Label */\n .oc-graph-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__label-group,\n .oc-graph-edge--selected .oc-graph-edge__label-group {\n opacity: 1;\n }\n\n .oc-graph-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-graph-edge__label {\n fill: var(--oc-fg-secondary, #475569);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 11px;\n font-weight: 500;\n }\n\n .oc-graph-edge__ai-badge-bg {\n fill: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n }\n\n .oc-graph-edge__ai-badge {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n /* ============================================\n * Graph Controls\n * ============================================ */\n .oc-graph-controls {\n position: absolute;\n bottom: 16px;\n left: 16px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n max-width: calc(100% - 32px);\n }\n\n .oc-graph-controls__group {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: var(--oc-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));\n }\n\n .oc-graph-controls__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: 6px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__button:hover:not(:disabled) {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n .oc-graph-controls__button--active {\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n color: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-controls__button--text {\n min-width: 44px;\n font-variant-numeric: tabular-nums;\n }\n\n .oc-graph-controls__load-more {\n padding: 6px 12px;\n }\n\n /* Filters */\n .oc-graph-controls__filters {\n gap: 4px;\n }\n\n .oc-graph-controls__filter {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px 4px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__filter:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-graph-controls__filter--active {\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__filter-dot {\n width: 8px;\n height: 8px;\n border-radius: var(--oc-radius-full, 9999px);\n flex-shrink: 0;\n }\n\n .oc-graph-controls__filter:not(.oc-graph-controls__filter--active) .oc-graph-controls__filter-dot {\n opacity: 0.4;\n }\n\n /* Spinner */\n .oc-graph-controls__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0F766E);\n border-radius: 50%;\n animation: oc-spin var(--oc-animation-spin, 0.8s) linear infinite;\n }\n";
|
|
2448
|
+
|
|
2087
2449
|
/**
|
|
2088
2450
|
* OpenContracts Component Library
|
|
2089
2451
|
*
|
|
@@ -2093,6 +2455,6 @@ declare const dataGridStyles = "\n/* ===========================================
|
|
|
2093
2455
|
* @package @opencontracts/ui
|
|
2094
2456
|
*/
|
|
2095
2457
|
|
|
2096
|
-
declare const allStyles = "\n/* OpenContracts Design System - All Component Styles */\n\n/* Base utilities, tokens, and shared keyframes (must be first) */\n\n/* ============================================\n CSS Custom Properties - Design Tokens\n ============================================ */\n:root {\n /* ===========================================\n COLOR SYSTEM - Professional Legal Theme\n =========================================== */\n\n /* Accent: Deep Teal - professional, authoritative */\n --oc-accent: #0F766E;\n --oc-accent-hover: #0D9488;\n --oc-accent-active: #115E59;\n\n /* Foreground: Slate scale */\n --oc-fg-primary: #1E293B;\n --oc-fg-secondary: #475569;\n --oc-fg-tertiary: #94A3B8;\n --oc-fg-inverse: #FFFFFF;\n\n /* Background: Warm neutral surfaces */\n --oc-bg-canvas: #FAFAFA;\n --oc-bg-surface: #FFFFFF;\n --oc-bg-surface-hover: #F8FAFC;\n --oc-bg-subtle: #F1F5F9;\n --oc-bg-sidebar: #0F172A;\n\n /* Borders: Cool slate */\n --oc-border-default: #E2E8F0;\n --oc-border-strong: #CBD5E1;\n\n /* Semantic colors */\n --oc-success: #059669;\n --oc-warning: #D97706;\n --oc-error: #DC2626;\n --oc-success-bg: #ECFDF5;\n --oc-warning-bg: #FFFBEB;\n --oc-error-bg: #FEF2F2;\n\n /* ===========================================\n SPACING\n =========================================== */\n --oc-spacing-xs: 4px;\n --oc-spacing-sm: 8px;\n --oc-spacing-md: 16px;\n --oc-spacing-lg: 24px;\n --oc-spacing-xl: 32px;\n --oc-spacing-2xl: 48px;\n\n /* ===========================================\n RADIUS - Refined, slightly softer corners\n =========================================== */\n --oc-radius-sm: 6px;\n --oc-radius-md: 8px;\n --oc-radius-lg: 12px;\n --oc-radius-full: 9999px;\n\n /* ===========================================\n TYPOGRAPHY\n =========================================== */\n --oc-font-size-xs: 11px;\n --oc-font-size-sm: 13px;\n --oc-font-size-md: 15px;\n --oc-font-size-lg: 17px;\n --oc-font-size-xl: 20px;\n --oc-font-size-2xl: 24px;\n --oc-font-size-3xl: 32px;\n\n /* Line heights */\n --oc-line-height-tight: 1.25;\n --oc-line-height-normal: 1.5;\n --oc-line-height-relaxed: 1.75;\n\n /* ===========================================\n ANIMATION\n =========================================== */\n --oc-duration-fast: 0.15s;\n --oc-duration-normal: 0.2s;\n --oc-duration-slow: 0.3s;\n --oc-duration-spin: 0.8s;\n\n /* Easing curves */\n --oc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);\n --oc-easing-enter: cubic-bezier(0, 0, 0.2, 1);\n --oc-easing-exit: cubic-bezier(0.4, 0, 1, 1);\n --oc-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n /* ===========================================\n Z-INDEX SCALE\n =========================================== */\n --oc-z-dropdown: 100;\n --oc-z-sticky: 200;\n --oc-z-overlay: 300;\n --oc-z-modal: 400;\n --oc-z-popover: 500;\n --oc-z-tooltip: 600;\n\n /* ===========================================\n OPACITY\n =========================================== */\n --oc-opacity-disabled: 0.5;\n --oc-opacity-loading: 0.7;\n --oc-opacity-hover: 0.04;\n --oc-opacity-focus-ring: 0.2;\n --oc-opacity-overlay: 0.6;\n\n /* Breakpoints (for reference in JS, media queries use values directly) */\n --oc-breakpoint-sm: 640px;\n --oc-breakpoint-md: 768px;\n --oc-breakpoint-lg: 1024px;\n --oc-breakpoint-xl: 1280px;\n\n /* ===========================================\n SHADOWS - Subtle, clean\n =========================================== */\n --oc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);\n --oc-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.03);\n --oc-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.04);\n --oc-shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 20px 25px rgba(15, 23, 42, 0.05);\n --oc-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n --oc-shadow-accent: 0 4px 14px rgba(15, 118, 110, 0.2);\n --oc-shadow-accent-lg: 0 8px 24px rgba(15, 118, 110, 0.25);\n}\n\n/* ============================================\n Focus Ring Utility\n ============================================ */\n.oc-focus-ring:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Focus ring with glow effect (for inputs, etc.) */\n.oc-focus-glow:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(15, 118, 110, var(--oc-opacity-focus-ring, 0.15));\n}\n\n/* ============================================\n Disabled State Utility\n ============================================ */\n.oc-disabled,\n[disabled] {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ============================================\n Loading State Utility\n ============================================ */\n.oc-loading {\n cursor: wait;\n pointer-events: none;\n}\n\n.oc-loading > * {\n opacity: var(--oc-opacity-loading, 0.7);\n}\n\n/* ============================================\n Shared Keyframe Animations\n ============================================ */\n\n/* Spinner rotation - used by Button, IconButton, Progress, SearchInput */\n@keyframes oc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Fade in with slight scale - used by Modal, Tooltip, Popover */\n@keyframes oc-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Fade out with slight scale */\n@keyframes oc-fade-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* Slide up fade - used by chat messages, toasts */\n@keyframes oc-slide-up-fade {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Slide down fade - for dropdowns */\n@keyframes oc-slide-down-fade {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Pulse animation - for skeleton loading, thinking indicators */\n@keyframes oc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Bounce animation - for typing indicators */\n@keyframes oc-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-8px);\n }\n}\n\n/* Shimmer animation - for skeleton loading */\n@keyframes oc-shimmer {\n from { transform: translateX(-100%); }\n to { transform: translateX(100%); }\n}\n\n/* ============================================\n Transition Utilities\n ============================================ */\n.oc-transition-fast {\n transition-duration: var(--oc-duration-fast, 0.15s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-normal {\n transition-duration: var(--oc-duration-normal, 0.25s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-slow {\n transition-duration: var(--oc-duration-slow, 0.4s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-spring {\n transition-timing-function: var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));\n}\n\n/* ============================================\n Flexbox Utilities\n ============================================ */\n.oc-flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-flex-between {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.oc-flex-start {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* ============================================\n Text Utilities\n ============================================ */\n.oc-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ============================================\n Accessibility: Reduced Motion\n ============================================ */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* ============================================\n Screen Reader Only\n ============================================ */\n.oc-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* ============================================\n Premium Polish Effects\n ============================================ */\n\n/* Frosted glass overlay effect */\n.oc-frosted {\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n.oc-frosted-light {\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n/* Interactive lift effect on hover */\n.oc-lift {\n transition: transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-lift:hover {\n transform: translateY(-2px);\n}\n\n/* Press effect */\n.oc-press:active {\n transform: translateY(1px);\n}\n\n/* Focus glow effect for inputs */\n.oc-focus-glow-input:focus-within {\n box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(15, 23, 42, 0.03)),\n 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Smooth color transitions */\n.oc-color-transition {\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n/* ============================================\n Typography Polish\n ============================================ */\n\n/* Professional font feature settings */\n.oc-text {\n font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Heading typography - tighter letter-spacing for polish */\n.oc-heading {\n font-feature-settings: 'kern' 1, 'liga' 1;\n letter-spacing: -0.02em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Small caps for labels */\n.oc-label {\n font-feature-settings: 'kern' 1, 'smcp' 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* Tabular numbers for data */\n.oc-tabular {\n font-feature-settings: 'tnum' 1, 'kern' 1;\n}\n\n/* ============================================\n Staggered List Animations\n ============================================ */\n\n/* Base stagger animation */\n@keyframes oc-stagger-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stagger animation utilities - apply to list items */\n.oc-stagger > * {\n animation: oc-stagger-in var(--oc-duration-normal, 0.25s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger > *:nth-child(6) { animation-delay: 250ms; }\n.oc-stagger > *:nth-child(7) { animation-delay: 300ms; }\n.oc-stagger > *:nth-child(8) { animation-delay: 350ms; }\n.oc-stagger > *:nth-child(9) { animation-delay: 400ms; }\n.oc-stagger > *:nth-child(10) { animation-delay: 450ms; }\n\n/* Fast stagger (25ms intervals) */\n.oc-stagger-fast > * {\n animation: oc-stagger-in var(--oc-duration-fast, 0.15s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-fast > *:nth-child(2) { animation-delay: 25ms; }\n.oc-stagger-fast > *:nth-child(3) { animation-delay: 50ms; }\n.oc-stagger-fast > *:nth-child(4) { animation-delay: 75ms; }\n.oc-stagger-fast > *:nth-child(5) { animation-delay: 100ms; }\n.oc-stagger-fast > *:nth-child(6) { animation-delay: 125ms; }\n.oc-stagger-fast > *:nth-child(7) { animation-delay: 150ms; }\n.oc-stagger-fast > *:nth-child(8) { animation-delay: 175ms; }\n.oc-stagger-fast > *:nth-child(9) { animation-delay: 200ms; }\n.oc-stagger-fast > *:nth-child(10) { animation-delay: 225ms; }\n\n/* Scale stagger - for cards/grid items */\n@keyframes oc-stagger-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.oc-stagger-scale > * {\n animation: oc-stagger-scale-in var(--oc-duration-normal, 0.25s) var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;\n}\n\n.oc-stagger-scale > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-scale > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger-scale > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger-scale > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger-scale > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger-scale > *:nth-child(6) { animation-delay: 250ms; }\n\n\n\n/* AppShell - Main Application Container */\n.oc-app-shell {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n background: var(--oc-bg-canvas);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-app-shell--fixed {\n height: 100vh;\n overflow: hidden;\n}\n\n/* AppShell Sidebar */\n.oc-app-shell-sidebar {\n --sidebar-width: 260px;\n position: relative;\n width: var(--sidebar-width);\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-surface);\n transition: width var(--oc-duration-normal) var(--oc-easing-default),\n margin var(--oc-duration-normal) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-app-shell-sidebar--bordered {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-sidebar--closed {\n width: 0;\n margin-left: calc(var(--sidebar-width) * -1);\n}\n\n.oc-app-shell-sidebar__content {\n width: var(--sidebar-width);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* AppShell Main */\n.oc-app-shell-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--oc-bg-canvas);\n}\n\n/* AppShell Header */\n.oc-app-shell-header {\n --header-height: 56px;\n height: var(--header-height);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: 0 var(--oc-spacing-lg);\n background: var(--oc-bg-canvas);\n}\n\n.oc-app-shell-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-header--fixed {\n position: sticky;\n top: 0;\n z-index: var(--oc-z-sticky);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n/* Layout composition helpers */\n.oc-app-shell > .oc-app-shell-header {\n order: -1;\n}\n\n/* Horizontal layout for sidebar + main */\n.oc-app-shell:has(.oc-app-shell-sidebar) {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.oc-app-shell:has(.oc-app-shell-sidebar) > .oc-app-shell-header {\n width: 100%;\n flex-basis: 100%;\n}\n\n/* Dark sidebar variant */\n.oc-app-shell-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n border-right-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n/* PageHeader Component */\n.oc-page-header {\n padding: var(--oc-spacing-lg) var(--oc-spacing-xl);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Breadcrumbs */\n.oc-page-header__breadcrumbs {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-breadcrumbs {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--oc-spacing-xs);\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-breadcrumbs__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-breadcrumbs__separator {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-breadcrumbs__link {\n color: var(--oc-fg-secondary);\n text-decoration: none;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n padding: 2px 0;\n}\n\n.oc-breadcrumbs__link:hover {\n color: var(--oc-accent);\n}\n\n.oc-breadcrumbs__current {\n color: var(--oc-fg-primary);\n font-weight: 500;\n}\n\n/* Header Row */\n.oc-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-lg);\n}\n\n.oc-page-header__content {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-md);\n min-width: 0;\n flex: 1;\n}\n\n.oc-page-header__back {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n margin-top: 2px;\n}\n\n.oc-page-header__back:hover {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n color: var(--oc-fg-primary);\n}\n\n.oc-page-header__text {\n min-width: 0;\n}\n\n.oc-page-header__title {\n margin: 0;\n font-size: var(--oc-font-size-2xl);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-page-header__subtitle {\n margin: var(--oc-spacing-xs) 0 0;\n font-size: var(--oc-font-size-md);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-page-header__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n}\n\n/* Tabs */\n.oc-page-header__tabs {\n margin-top: var(--oc-spacing-lg);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* Compact variant */\n.oc-page-header--compact {\n padding: var(--oc-spacing-md) var(--oc-spacing-lg);\n}\n\n.oc-page-header--compact .oc-page-header__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Bordered variant */\n.oc-page-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* With accent bar */\n.oc-page-header--accent {\n position: relative;\n}\n\n.oc-page-header--accent::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--oc-accent);\n}\n\n\n\n/* SplitPane Component */\n.oc-split-pane {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-split-pane--horizontal {\n flex-direction: row;\n}\n\n.oc-split-pane--vertical {\n flex-direction: column;\n}\n\n.oc-split-pane--dragging {\n user-select: none;\n}\n\n/* Panes */\n.oc-split-pane__pane {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.oc-split-pane__pane--first {\n flex-shrink: 0;\n}\n\n.oc-split-pane__pane--second {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n\n/* Handle */\n.oc-split-pane__handle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal > .oc-split-pane__handle {\n width: 8px;\n cursor: col-resize;\n}\n\n.oc-split-pane--vertical > .oc-split-pane__handle {\n height: 8px;\n cursor: row-resize;\n}\n\n.oc-split-pane__handle:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n}\n\n.oc-split-pane__handle-bar {\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal .oc-split-pane__handle-bar {\n width: 2px;\n height: 32px;\n}\n\n.oc-split-pane--vertical .oc-split-pane__handle-bar {\n height: 2px;\n width: 32px;\n}\n\n.oc-split-pane__handle:hover .oc-split-pane__handle-bar,\n.oc-split-pane--dragging .oc-split-pane__handle-bar {\n background: var(--oc-accent);\n}\n\n/* Generic Pane */\n.oc-pane {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Panel with header pattern */\n.oc-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-panel__header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm, 8px) var(--oc-spacing-md, 16px);\n border-bottom: 1px solid var(--oc-border-default, #E5E5E5);\n min-height: 48px;\n}\n\n.oc-panel__title {\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-panel__content {\n flex: 1;\n overflow: auto;\n}\n\n\n\n/* Stack Component */\n.oc-stack {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Spacer */\n.oc-spacer {\n flex: 1;\n}\n\n/* Divider */\n.oc-divider {\n flex-shrink: 0;\n background: var(--oc-border-default, #E5E5E5);\n}\n\n.oc-divider--horizontal {\n height: 1px;\n width: 100%;\n}\n\n.oc-divider--vertical {\n width: 1px;\n align-self: stretch;\n}\n\n/* Box - generic container with padding */\n.oc-box {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-box--padding-none { padding: 0; }\n.oc-box--padding-xs { padding: var(--oc-spacing-xs, 4px); }\n.oc-box--padding-sm { padding: var(--oc-spacing-sm, 8px); }\n.oc-box--padding-md { padding: var(--oc-spacing-md, 16px); }\n.oc-box--padding-lg { padding: var(--oc-spacing-lg, 24px); }\n.oc-box--padding-xl { padding: var(--oc-spacing-xl, 32px); }\n\n/* Center - center content both ways */\n.oc-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Container - max-width constrained container */\n.oc-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--oc-spacing-md, 16px);\n padding-right: var(--oc-spacing-md, 16px);\n}\n\n.oc-container--sm { max-width: 640px; }\n.oc-container--md { max-width: 768px; }\n.oc-container--lg { max-width: 1024px; }\n.oc-container--xl { max-width: 1280px; }\n.oc-container--full { max-width: 100%; }\n\n\n\n/* ScrollArea Component */\n.oc-scroll-area {\n position: relative;\n overflow: hidden;\n}\n\n/* Scroll behavior */\n.oc-scroll-area--vertical {\n overflow-y: auto;\n}\n\n.oc-scroll-area--horizontal {\n overflow-x: auto;\n}\n\n.oc-scroll-area--vertical.oc-scroll-area--horizontal {\n overflow: auto;\n}\n\n/* Type variants */\n.oc-scroll-area--auto {\n overflow-y: auto;\n}\n\n.oc-scroll-area--always {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--scroll {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--hover {\n overflow-y: hidden;\n}\n\n.oc-scroll-area--hover:hover {\n overflow-y: auto;\n}\n\n/* Custom styled scrollbars */\n.oc-scroll-area--styled {\n scrollbar-width: thin;\n scrollbar-color: var(--oc-border-strong, #CCCCCC) transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb {\n background: var(--oc-border-strong, #CCCCCC);\n border-radius: 4px;\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb:hover {\n background: var(--oc-fg-tertiary, #9B9B9B);\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Thin scrollbar variant */\n.oc-scroll-area--thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n/* Dark mode scrollbar */\n.oc-scroll-area--dark {\n scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n\n\n\n/* Card Component */\n.oc-card {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Variants */\n.oc-card--elevated {\n box-shadow: var(--oc-shadow-md);\n}\n\n.oc-card--flat {\n box-shadow: none;\n}\n\n.oc-card--outlined {\n box-shadow: none;\n border: 1px solid var(--oc-border-default);\n}\n\n/* Padding */\n.oc-card--padding-none {\n padding: 0;\n}\n\n.oc-card--padding-sm {\n padding: var(--oc-spacing-sm);\n}\n\n.oc-card--padding-md {\n padding: var(--oc-spacing-md);\n}\n\n.oc-card--padding-lg {\n padding: var(--oc-spacing-lg);\n}\n\n/* Interactive */\n.oc-card--interactive {\n cursor: pointer;\n transition: box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n transform var(--oc-duration-fast) var(--oc-easing-default),\n border-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-card--interactive:hover {\n box-shadow: var(--oc-shadow-lg);\n transform: translateY(-2px);\n}\n\n.oc-card--interactive.oc-card--outlined:hover {\n border-color: var(--oc-border-strong);\n}\n\n.oc-card--interactive:active {\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Card Header */\n.oc-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-card-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-card-header__title {\n font-size: var(--oc-font-size-lg);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-card-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-card-header__action {\n flex-shrink: 0;\n}\n\n/* Card Body */\n.oc-card-body {\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Card Footer */\n.oc-card-footer {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n margin-top: var(--oc-spacing-md);\n padding-top: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n}\n\n\n\n/* Sidebar Component */\n.oc-sidebar {\n display: flex;\n flex-direction: column;\n width: 260px;\n height: 100%;\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: width var(--oc-duration-normal) var(--oc-easing-default);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-sidebar--collapsed {\n width: 64px;\n}\n\n/* Sidebar Header */\n.oc-sidebar-header {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n min-height: 56px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-sidebar-header__logo {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-accent);\n border-radius: var(--oc-radius-md);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-header__title {\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n/* Sidebar Nav */\n.oc-sidebar-nav {\n flex: 1;\n overflow-y: auto;\n padding: var(--oc-spacing-sm);\n}\n\n/* Sidebar Section */\n.oc-sidebar-section {\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-sidebar-section:first-child {\n margin-top: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__title {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary);\n padding: var(--oc-spacing-sm);\n margin-bottom: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Sidebar Item */\n.oc-sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n position: relative;\n}\n\n.oc-sidebar-item:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active:hover {\n background: var(--oc-accent-hover);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-sidebar-item--disabled:hover {\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-sidebar-item__icon {\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon,\n.oc-sidebar-item--active:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item__label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-sidebar-item__badge {\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__badge {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Sidebar Footer */\n.oc-sidebar-footer {\n padding: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n margin-top: auto;\n}\n\n/* Dark variant */\n.oc-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-header {\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.oc-sidebar--dark .oc-sidebar-header__title {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-section__title {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.oc-sidebar--dark .oc-sidebar-item {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover {\n background: rgba(255, 255, 255, 0.08);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.oc-sidebar--dark .oc-sidebar-footer {\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n\n\n\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n\n\n\n/* Tooltip Trigger */\n.oc-tooltip-trigger {\n display: inline-flex;\n}\n\n/* Tooltip */\n.oc-tooltip {\n position: absolute;\n z-index: var(--oc-z-tooltip);\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: var(--oc-font-size-xs);\n border-radius: var(--oc-radius-md);\n white-space: nowrap;\n pointer-events: none;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-tooltip--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-tooltip--bottom {\n transform: translateX(-50%);\n}\n\n.oc-tooltip--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-tooltip--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Popover Trigger */\n.oc-popover-trigger {\n display: inline-flex;\n}\n\n/* Popover */\n.oc-popover {\n position: absolute;\n z-index: var(--oc-z-popover, 1000);\n min-width: 200px;\n padding: var(--oc-spacing-md);\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1));\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-popover-fade-in 0.15s ease-out;\n}\n\n@keyframes oc-popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Placement */\n.oc-popover--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-popover--bottom {\n transform: translateX(-50%);\n}\n\n.oc-popover--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-popover--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Avatar Component */\n.oc-avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: linear-gradient(135deg, #E5E5E5 0%, #D4D4D4 100%);\n color: var(--oc-fg-secondary, #6B6B6B);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 600;\n overflow: hidden;\n flex-shrink: 0;\n user-select: none;\n}\n\n.oc-avatar--square {\n border-radius: var(--oc-radius-md, 8px);\n}\n\n/* Sizes */\n.oc-avatar--xs { font-size: 10px; }\n.oc-avatar--sm { font-size: 12px; }\n.oc-avatar--md { font-size: 14px; }\n.oc-avatar--lg { font-size: 16px; }\n.oc-avatar--xl { font-size: 20px; }\n\n/* Accent variant (for AI/system) */\n.oc-avatar--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n/* Image */\n.oc-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Fallback */\n.oc-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n/* Status indicator */\n.oc-avatar__status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n border-radius: 50%;\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n.oc-avatar__status--online {\n background: var(--oc-success, #10B981);\n}\n\n.oc-avatar__status--offline {\n background: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-avatar__status--busy {\n background: var(--oc-error, #EF4444);\n}\n\n.oc-avatar__status--away {\n background: var(--oc-warning, #F59E0B);\n}\n\n/* AI Avatar */\n.oc-avatar--ai {\n background: var(--oc-accent);\n animation: oc-avatar-ai-pulse 3s ease-in-out infinite;\n}\n\n@keyframes oc-avatar-ai-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(8, 145, 178, 0);\n }\n}\n\n.oc-avatar__ai-icon {\n width: 60%;\n height: 60%;\n}\n\n/* Avatar Group */\n.oc-avatar-group {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-avatar-group__item {\n margin-left: -8px;\n}\n\n.oc-avatar-group__item:first-child {\n margin-left: 0;\n}\n\n.oc-avatar-group__item .oc-avatar {\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n\n\n/* Chip Component */\n.oc-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-chip--static {\n cursor: default;\n}\n\n/* Sizes */\n.oc-chip--sm {\n height: 24px;\n padding: 0 10px;\n font-size: 12px;\n}\n\n.oc-chip--md {\n height: 32px;\n padding: 0 14px;\n font-size: 13px;\n}\n\n.oc-chip--lg {\n height: 40px;\n padding: 0 18px;\n font-size: 14px;\n}\n\n/* Icons */\n.oc-chip__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-chip--sm .oc-chip__icon { margin-left: -2px; }\n.oc-chip--md .oc-chip__icon { margin-left: -4px; }\n.oc-chip--lg .oc-chip__icon { margin-left: -4px; }\n\n.oc-chip__icon--end {\n margin-left: 0 !important;\n}\n\n.oc-chip--sm .oc-chip__icon--end { margin-right: -2px; }\n.oc-chip--md .oc-chip__icon--end { margin-right: -4px; }\n.oc-chip--lg .oc-chip__icon--end { margin-right: -4px; }\n\n/* Label */\n.oc-chip__label {\n display: flex;\n align-items: center;\n}\n\n/* Remove button */\n.oc-chip__remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin-left: 2px;\n border: none;\n background: transparent;\n color: inherit;\n opacity: 0.6;\n cursor: pointer;\n border-radius: 50%;\n transition: opacity 0.15s ease, background 0.15s ease;\n}\n\n.oc-chip--sm .oc-chip__remove { margin-right: -4px; width: 16px; height: 16px; }\n.oc-chip--md .oc-chip__remove { margin-right: -6px; width: 20px; height: 20px; }\n.oc-chip--lg .oc-chip__remove { margin-right: -6px; width: 24px; height: 24px; }\n\n.oc-chip__remove:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n/* ========== VARIANTS ========== */\n\n/* Filled */\n.oc-chip--filled.oc-chip--default {\n background: var(--oc-fg-primary, #1A1A1A);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chip--filled.oc-chip--success {\n background: linear-gradient(135deg, var(--oc-success, #10B981) 0%, #059669 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--warning {\n background: linear-gradient(135deg, var(--oc-warning, #F59E0B) 0%, #D97706 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--error {\n background: linear-gradient(135deg, var(--oc-error, #EF4444) 0%, #DC2626 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--info {\n background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);\n color: white;\n}\n\n/* Soft */\n.oc-chip--soft.oc-chip--default {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chip--soft.oc-chip--accent {\n background: rgba(8, 145, 178, 0.1);\n color: var(--oc-accent);\n}\n\n.oc-chip--soft.oc-chip--success {\n background: var(--oc-success-bg, #ECFDF5);\n color: #059669;\n}\n\n.oc-chip--soft.oc-chip--warning {\n background: var(--oc-warning-bg, #FFFBEB);\n color: #B45309;\n}\n\n.oc-chip--soft.oc-chip--error {\n background: var(--oc-error-bg, #FEF2F2);\n color: #DC2626;\n}\n\n.oc-chip--soft.oc-chip--info {\n background: #EFF6FF;\n color: #2563EB;\n}\n\n/* Outlined */\n.oc-chip--outlined {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E5E5E5);\n}\n\n.oc-chip--outlined.oc-chip--default {\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n.oc-chip--outlined.oc-chip--accent {\n box-shadow: inset 0 0 0 1px var(--oc-accent);\n color: var(--oc-accent);\n}\n\n.oc-chip--outlined.oc-chip--success {\n box-shadow: inset 0 0 0 1px var(--oc-success, #10B981);\n color: #059669;\n}\n\n.oc-chip--outlined.oc-chip--warning {\n box-shadow: inset 0 0 0 1px var(--oc-warning, #F59E0B);\n color: #B45309;\n}\n\n.oc-chip--outlined.oc-chip--error {\n box-shadow: inset 0 0 0 1px var(--oc-error, #EF4444);\n color: #DC2626;\n}\n\n.oc-chip--outlined.oc-chip--info {\n box-shadow: inset 0 0 0 1px #3B82F6;\n color: #2563EB;\n}\n\n/* Hover states */\n.oc-chip:not(.oc-chip--static):hover {\n transform: translateY(-1px);\n}\n\n.oc-chip--soft:not(.oc-chip--static):hover {\n filter: brightness(0.95);\n}\n\n.oc-chip--outlined:not(.oc-chip--static):hover {\n background: var(--oc-bg-surface, #F8F8F8);\n}\n\n.oc-chip--filled:not(.oc-chip--static):hover {\n filter: brightness(1.05);\n}\n\n/* Selected state */\n.oc-chip--selected {\n box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);\n}\n\n/* Active state */\n.oc-chip:not(.oc-chip--static):active {\n transform: translateY(0);\n}\n\n/* Chip Group */\n.oc-chip-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.oc-chip-group--gap-sm {\n gap: 6px;\n}\n\n.oc-chip-group--gap-md {\n gap: 10px;\n}\n\n\n\n/* Source Card */\n.oc-source-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-lg, 12px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: all 0.15s ease;\n}\n\n.oc-source-card--clickable {\n cursor: pointer;\n}\n\n.oc-source-card--clickable:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.oc-source-card--inline {\n padding: 8px 12px;\n display: inline-flex;\n gap: 8px;\n}\n\n/* Document icon */\n.oc-source__icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 8px);\n background: linear-gradient(135deg, var(--icon-color, #6B6B6B) 0%, color-mix(in srgb, var(--icon-color, #6B6B6B), black 20%) 100%);\n color: white;\n position: relative;\n}\n\n.oc-source-card--inline .oc-source__icon {\n width: 32px;\n height: 32px;\n}\n\n.oc-source__icon svg {\n opacity: 0.3;\n}\n\n.oc-source__icon-label {\n position: absolute;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.05em;\n}\n\n/* Content */\n.oc-source-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-source-card__header {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-source-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-card__ref {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n white-space: nowrap;\n}\n\n.oc-source-card__excerpt {\n margin: 6px 0 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Score */\n.oc-source-card__score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.oc-source-card__score-bar {\n width: 40px;\n height: 4px;\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-source-card__score-bar::after {\n content: '';\n display: block;\n width: var(--score, 0%);\n height: 100%;\n background: var(--oc-accent);\n border-radius: 2px;\n}\n\n.oc-source-card__score-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Arrow */\n.oc-source-card__arrow {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.15s ease;\n}\n\n.oc-source-card--clickable:hover .oc-source-card__arrow {\n transform: translateX(2px);\n color: var(--oc-accent);\n}\n\n/* Source Pill */\n.oc-source-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 28px;\n padding: 0 10px;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E5E5E5);\n border-radius: var(--oc-radius-md, 8px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-source-pill:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n border-color: var(--pill-color, var(--oc-border-strong, #CCCCCC));\n}\n\n.oc-source-pill__icon {\n display: flex;\n color: var(--pill-color, var(--oc-fg-tertiary, #9B9B9B));\n}\n\n.oc-source-pill__name {\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n max-width: 120px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-pill__ref {\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-weight: 400;\n}\n\n/* Source List */\n.oc-source-list {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-source-list__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.oc-source-list__title {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #6B6B6B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-source-list__count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-source-list__items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n/* Citation marker */\n.oc-citation {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin: 0 2px;\n background: var(--oc-accent);\n color: white;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n font-weight: 600;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n transition: all 0.15s ease;\n box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);\n}\n\n.oc-citation:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4);\n}\n\n\n\n/* ============ Chat Container ============ */\n.oc-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ============ Chat Message ============ */\n.oc-chat-message {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: oc-message-in 0.3s ease;\n}\n\n@keyframes oc-message-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-chat-message__avatar {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.oc-chat-message__container {\n flex: 1;\n min-width: 0;\n max-width: 720px;\n}\n\n/* User messages */\n.oc-chat-message--user {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message--user .oc-chat-message__container {\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n}\n\n/* Header */\n.oc-chat-message__header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-chat-message--user .oc-chat-message__header {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message__name {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Bubble */\n.oc-chat-message__bubble {\n position: relative;\n padding: 14px 18px;\n border-radius: 18px;\n line-height: 1.6;\n}\n\n.oc-chat-message--assistant .oc-chat-message__bubble {\n background: var(--oc-bg-surface, #F8F8F8);\n border-top-left-radius: 4px;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message--user .oc-chat-message__bubble {\n background: var(--oc-accent);\n border-top-right-radius: 4px;\n color: white;\n box-shadow: 0 2px 12px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chat-message--system .oc-chat-message__bubble {\n background: transparent;\n padding: 8px 0;\n text-align: center;\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-size: 13px;\n}\n\n.oc-chat-message__content {\n font-size: 15px;\n}\n\n.oc-chat-message__content p {\n margin: 0 0 12px;\n}\n\n.oc-chat-message__content p:last-child {\n margin-bottom: 0;\n}\n\n/* Streaming cursor */\n.oc-chat-message__cursor {\n display: inline-block;\n width: 2px;\n height: 1.1em;\n background: var(--oc-accent);\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: oc-cursor-blink 1s ease infinite;\n}\n\n@keyframes oc-cursor-blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Actions */\n.oc-chat-message__actions {\n margin-top: 8px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-chat-message:hover .oc-chat-message__actions {\n opacity: 1;\n}\n\n/* Error state */\n.oc-chat-message__error {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 13px;\n color: var(--oc-error, #EF4444);\n}\n\n/* ============ Typing Indicator ============ */\n.oc-typing-indicator {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0;\n}\n\n.oc-typing-indicator__dots {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: 18px;\n border-top-left-radius: 4px;\n}\n\n.oc-typing-indicator__dot {\n width: 8px;\n height: 8px;\n background: var(--oc-fg-tertiary, #9B9B9B);\n border-radius: 50%;\n animation: oc-typing-bounce 1.4s ease infinite;\n}\n\n.oc-typing-indicator__dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.oc-typing-indicator__dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes oc-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n background: var(--oc-fg-tertiary);\n }\n 30% {\n transform: translateY(-8px);\n background: var(--oc-accent);\n }\n}\n\n.oc-typing-indicator__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n/* ============ Thinking Block ============ */\n.oc-thinking-block {\n background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);\n border: 1px solid rgba(8, 145, 178, 0.15);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n margin: 12px 0;\n}\n\n.oc-thinking-block__header {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n text-align: left;\n}\n\n.oc-thinking-block__indicator {\n display: flex;\n gap: 3px;\n}\n\n.oc-thinking-block__dot {\n width: 6px;\n height: 6px;\n background: var(--oc-accent);\n border-radius: 50%;\n animation: oc-thinking-pulse 1.5s ease infinite;\n}\n\n.oc-thinking-block__dot:nth-child(2) { animation-delay: 0.3s; }\n.oc-thinking-block__dot:nth-child(3) { animation-delay: 0.6s; }\n\n@keyframes oc-thinking-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.2); }\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__dot {\n animation: none;\n opacity: 0.5;\n}\n\n.oc-thinking-block__title {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent);\n}\n\n.oc-thinking-block__chevron {\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.2s ease;\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__chevron {\n transform: rotate(180deg);\n}\n\n.oc-thinking-block__content {\n padding: 0 16px 16px;\n font-size: 13px;\n color: var(--oc-fg-secondary);\n line-height: 1.6;\n border-top: 1px solid rgba(8, 145, 178, 0.1);\n margin-top: 0;\n padding-top: 12px;\n}\n\n/* ============ Task Card ============ */\n.oc-task-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n border-left: 3px solid var(--oc-border-default);\n}\n\n.oc-task-card--running {\n border-left-color: var(--oc-accent);\n background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, var(--oc-bg-surface) 100%);\n}\n\n.oc-task-card--completed {\n border-left-color: var(--oc-success, #10B981);\n}\n\n.oc-task-card--error {\n border-left-color: var(--oc-error, #EF4444);\n}\n\n.oc-task-card__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-task-card--pending .oc-task-card__icon { color: var(--oc-fg-tertiary); }\n.oc-task-card--running .oc-task-card__icon { color: var(--oc-accent); }\n.oc-task-card--completed .oc-task-card__icon { color: var(--oc-success); }\n.oc-task-card--error .oc-task-card__icon { color: var(--oc-error); }\n\n.oc-task-card__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(8, 145, 178, 0.2);\n border-top-color: var(--oc-accent);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n@keyframes oc-spin {\n to { transform: rotate(360deg); }\n}\n\n.oc-task-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-task-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-task-card__desc {\n font-size: 13px;\n color: var(--oc-fg-secondary);\n margin-top: 2px;\n}\n\n.oc-task-card__progress {\n margin-top: 8px;\n height: 4px;\n background: var(--oc-border-default);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-task-card__progress-bar {\n height: 100%;\n width: var(--progress, 0%);\n background: var(--oc-accent);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* ============ Message Actions ============ */\n.oc-message-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-action-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-action-button:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n}\n\n.oc-action-button--active {\n color: var(--oc-accent);\n}\n\n.oc-action-button--active:hover {\n color: var(--oc-accent);\n background: rgba(8, 145, 178, 0.1);\n}\n\n/* ============ Chat Input ============ */\n.oc-chat-input {\n flex-shrink: 0;\n padding: 16px 24px 24px;\n background: var(--oc-bg-canvas);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-chat-input__suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.oc-chat-input__container {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface);\n border-radius: 24px;\n border: 1px solid transparent;\n transition: all 0.2s ease;\n}\n\n.oc-chat-input__container:focus-within {\n background: var(--oc-bg-canvas);\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-chat-input__left,\n.oc-chat-input__right {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-chat-input__textarea {\n flex: 1;\n min-height: 24px;\n max-height: 200px;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n line-height: 1.5;\n color: var(--oc-fg-primary);\n resize: none;\n outline: none;\n}\n\n.oc-chat-input__textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-chat-input__send {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--oc-accent);\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n.oc-chat-input__send:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);\n}\n\n.oc-chat-input__send:disabled {\n background: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n box-shadow: none;\n cursor: not-allowed;\n}\n\n.oc-chat-input__spinner {\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n/* Loading state */\n.oc-chat-input--loading .oc-chat-input__container {\n opacity: 0.7;\n}\n\n\n\n/* Button */\n.oc-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n border: none;\n border-radius: var(--oc-radius-md);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.oc-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.oc-button--sm {\n height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-button--md {\n height: 36px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-button--lg {\n height: 44px;\n padding: 0 var(--oc-spacing-lg);\n font-size: var(--oc-font-size-md);\n}\n\n/* Primary variant - flat, modern */\n.oc-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n box-shadow: var(--oc-shadow-sm);\n}\n\n.oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-hover);\n box-shadow: var(--oc-shadow-md);\n transform: translateY(-1px);\n}\n\n.oc-button--primary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-active);\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Secondary variant */\n.oc-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-button--secondary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-button--secondary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Ghost variant */\n.oc-button--ghost {\n background: transparent;\n color: var(--oc-fg-primary);\n}\n\n.oc-button--ghost:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n}\n\n.oc-button--ghost:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Danger variant */\n.oc-button--danger {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-button--danger:hover:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.9);\n}\n\n.oc-button--danger:active:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.85);\n}\n\n/* Link variant */\n.oc-button--link {\n background: transparent;\n color: var(--oc-accent);\n padding: 0;\n height: auto;\n}\n\n.oc-button--link:hover:not(:disabled):not(.oc-button--loading) {\n color: var(--oc-accent-hover);\n text-decoration: underline;\n}\n\n/* States */\n.oc-button--full-width {\n width: 100%;\n}\n\n.oc-button--disabled,\n.oc-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-button--loading {\n cursor: wait;\n}\n\n.oc-button--loading .oc-button__label {\n opacity: var(--oc-opacity-loading);\n}\n\n/* Button parts */\n.oc-button__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-button__spinner-icon {\n width: 16px;\n height: 16px;\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n.oc-button__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-button__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-button--lg .oc-button__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton */\n.oc-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-icon-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* IconButton sizes */\n.oc-icon-button--sm {\n width: 28px;\n height: 28px;\n}\n\n.oc-icon-button--md {\n width: 32px;\n height: 32px;\n}\n\n.oc-icon-button--lg {\n width: 40px;\n height: 40px;\n}\n\n.oc-icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-icon-button--lg svg {\n width: 20px;\n height: 20px;\n}\n\n/* IconButton variants */\n.oc-icon-button--ghost:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-icon-button--ghost:active:not(:disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-icon-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-icon-button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover);\n}\n\n.oc-icon-button--primary:active:not(:disabled) {\n background: var(--oc-accent-active);\n}\n\n.oc-icon-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-icon-button--secondary:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-icon-button--danger {\n color: var(--oc-error);\n}\n\n.oc-icon-button--danger:hover:not(:disabled) {\n background: var(--oc-error-bg);\n}\n\n.oc-icon-button--link {\n color: var(--oc-accent);\n}\n\n.oc-icon-button--link:hover:not(:disabled) {\n color: var(--oc-accent-hover);\n}\n\n.oc-icon-button--disabled,\n.oc-icon-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-icon-button--loading {\n cursor: wait;\n}\n\n.oc-icon-button__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* ButtonGroup */\n.oc-button-group {\n display: inline-flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-button-group--attached {\n gap: 0;\n}\n\n.oc-button-group--attached > .oc-button {\n border-radius: 0;\n}\n\n.oc-button-group--attached > .oc-button:first-child {\n border-radius: var(--oc-radius-md) 0 0 var(--oc-radius-md);\n}\n\n.oc-button-group--attached > .oc-button:last-child {\n border-radius: 0 var(--oc-radius-md) var(--oc-radius-md) 0;\n}\n\n.oc-button-group--attached > .oc-button--secondary:not(:first-child) {\n border-left: none;\n}\n\n\n\n/* Input wrapper */\n.oc-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-input-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Input container */\n.oc-input-container {\n display: flex;\n align-items: stretch;\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-input-container:focus-within {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-input-container--error {\n border-color: var(--oc-error);\n}\n\n.oc-input-container--error:focus-within {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-input-container--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-input-container--sm {\n min-height: 32px;\n}\n\n.oc-input-container--md {\n min-height: 36px;\n}\n\n.oc-input-container--lg {\n min-height: 44px;\n}\n\n/* Field wrapper */\n.oc-input-field {\n display: flex;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* Input element */\n.oc-input {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n padding: 0 var(--oc-spacing-sm);\n outline: none;\n}\n\n.oc-input-container--sm .oc-input {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-input-container--lg .oc-input {\n font-size: var(--oc-font-size-md);\n padding: 0 var(--oc-spacing-md);\n}\n\n.oc-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-input:disabled {\n cursor: not-allowed;\n}\n\n.oc-input--has-left-icon {\n padding-left: calc(var(--oc-spacing-sm) + 24px);\n}\n\n.oc-input--has-right-icon {\n padding-right: calc(var(--oc-spacing-sm) + 24px);\n}\n\n/* Icons */\n.oc-input-icon {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n pointer-events: none;\n}\n\n.oc-input-icon--left {\n left: var(--oc-spacing-sm);\n}\n\n.oc-input-icon--right {\n right: var(--oc-spacing-sm);\n}\n\n.oc-input-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Addons */\n.oc-input-addon {\n display: flex;\n align-items: center;\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n border-color: inherit;\n white-space: nowrap;\n}\n\n.oc-input-addon--left {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-input-addon--right {\n border-left: 1px solid var(--oc-border-default);\n}\n\n/* Helper and error text */\n.oc-input-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-input-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Textarea wrapper */\n.oc-textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-textarea-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-textarea-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Textarea element */\n.oc-textarea {\n width: 100%;\n padding: var(--oc-spacing-sm);\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n line-height: var(--oc-line-height-normal);\n color: var(--oc-fg-primary);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n resize: vertical;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-textarea:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-textarea--error {\n border-color: var(--oc-error);\n}\n\n.oc-textarea--error:focus {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-textarea--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n resize: none;\n}\n\n.oc-textarea--auto-resize {\n resize: none;\n overflow-y: hidden;\n}\n\n/* Helper and error text */\n.oc-textarea-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-textarea-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Select wrapper */\n.oc-select-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n position: relative;\n}\n\n.oc-select-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-select-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Trigger */\n.oc-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--sm {\n min-height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-select-trigger--md {\n min-height: 36px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-select-trigger--lg {\n min-height: 44px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-md);\n}\n\n.oc-select-trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--error {\n border-color: var(--oc-error);\n}\n\n.oc-select-trigger--error:focus,\n.oc-select-trigger--error.oc-select-trigger--open {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-select-trigger--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Value and placeholder */\n.oc-select-value {\n flex: 1;\n color: var(--oc-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-select-placeholder {\n flex: 1;\n color: var(--oc-fg-tertiary);\n}\n\n/* Search input */\n.oc-select-search {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-select-search::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Indicators */\n.oc-select-indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n}\n\n.oc-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n padding: 0;\n}\n\n.oc-select-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-select-chevron {\n color: var(--oc-fg-tertiary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger--open .oc-select-chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.oc-select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n list-style: none;\n}\n\n/* Option */\n.oc-select-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-option:hover,\n.oc-select-option--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-select-option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-select-option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-select-option--disabled:hover {\n background: transparent;\n}\n\n.oc-select-check {\n flex-shrink: 0;\n color: var(--oc-accent);\n}\n\n/* Option group */\n.oc-select-group {\n list-style: none;\n}\n\n.oc-select-group:not(:first-child) {\n margin-top: var(--oc-spacing-xs);\n padding-top: var(--oc-spacing-xs);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-select-group-label {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-select-group-options {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Empty state */\n.oc-select-empty {\n padding: var(--oc-spacing-md);\n text-align: center;\n color: var(--oc-fg-tertiary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* Helper and error text */\n.oc-select-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-select-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Checkbox wrapper */\n.oc-checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-checkbox-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-checkbox-wrapper--error .oc-checkbox-box {\n border-color: var(--oc-error);\n}\n\n/* Checkbox box */\n.oc-checkbox-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-sm);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-checkbox-box--checked,\n.oc-checkbox-box--indeterminate {\n background: var(--oc-accent);\n border-color: var(--oc-accent);\n}\n\n.oc-checkbox-wrapper:hover:not(.oc-checkbox-wrapper--disabled) .oc-checkbox-box:not(.oc-checkbox-box--checked):not(.oc-checkbox-box--indeterminate) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-checkbox-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-checkbox-input:focus-visible + .oc-checkbox-icon,\n.oc-checkbox-box:has(.oc-checkbox-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Check icon */\n.oc-checkbox-icon {\n width: 12px;\n height: 12px;\n color: var(--oc-fg-inverse);\n pointer-events: none;\n}\n\n/* Label */\n.oc-checkbox-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Checkbox group */\n.oc-checkbox-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-checkbox-group--vertical {\n flex-direction: column;\n}\n\n.oc-checkbox-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Radio wrapper */\n.oc-radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-radio-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-radio-wrapper--error .oc-radio-circle {\n border-color: var(--oc-error);\n}\n\n/* Radio circle */\n.oc-radio-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-full);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-radio-circle--checked {\n border-color: var(--oc-accent);\n}\n\n.oc-radio-wrapper:hover:not(.oc-radio-wrapper--disabled) .oc-radio-circle:not(.oc-radio-circle--checked) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-radio-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-radio-circle:has(.oc-radio-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Dot */\n.oc-radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n}\n\n/* Label */\n.oc-radio-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Radio group */\n.oc-radio-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-radio-group--vertical {\n flex-direction: column;\n}\n\n.oc-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Toggle wrapper */\n.oc-toggle-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-toggle-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Toggle track */\n.oc-toggle-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--oc-border-default);\n border-radius: var(--oc-radius-full);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-toggle-track--sm {\n width: 28px;\n height: 16px;\n}\n\n.oc-toggle-track--md {\n width: 36px;\n height: 20px;\n}\n\n.oc-toggle-track--lg {\n width: 44px;\n height: 24px;\n}\n\n.oc-toggle-track--checked {\n background: var(--oc-accent);\n}\n\n.oc-toggle-track--error {\n background: var(--oc-error);\n}\n\n.oc-toggle-wrapper:hover:not(.oc-toggle-wrapper--disabled) .oc-toggle-track:not(.oc-toggle-track--checked) {\n background: var(--oc-border-strong);\n}\n\n/* Hidden input */\n.oc-toggle-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-toggle-track:has(.oc-toggle-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Toggle thumb */\n.oc-toggle-thumb {\n position: absolute;\n background: var(--oc-fg-inverse);\n border-radius: var(--oc-radius-full);\n box-shadow: var(--oc-shadow-sm);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toggle-track--sm .oc-toggle-thumb {\n width: 12px;\n height: 12px;\n left: 2px;\n}\n\n.oc-toggle-track--md .oc-toggle-thumb {\n width: 16px;\n height: 16px;\n left: 2px;\n}\n\n.oc-toggle-track--lg .oc-toggle-thumb {\n width: 20px;\n height: 20px;\n left: 2px;\n}\n\n.oc-toggle-track--checked.oc-toggle-track--sm .oc-toggle-thumb {\n transform: translateX(12px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--md .oc-toggle-thumb {\n transform: translateX(16px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--lg .oc-toggle-thumb {\n transform: translateX(20px);\n}\n\n/* Content */\n.oc-toggle-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-toggle-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toggle-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n line-height: var(--oc-line-height-tight);\n}\n\n\n\n/* Form field */\n.oc-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Label */\n.oc-form-field__label {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-form-field__required {\n color: var(--oc-error);\n}\n\n.oc-form-field__optional {\n font-weight: 400;\n color: var(--oc-fg-tertiary);\n}\n\n/* Control */\n.oc-form-field__control {\n display: flex;\n flex-direction: column;\n}\n\n/* Helper text */\n.oc-form-field__helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n/* Error text */\n.oc-form-field__error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Toast container */\n.oc-toast-container {\n position: fixed;\n z-index: var(--oc-z-tooltip);\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n}\n\n.oc-toast-container--top-right {\n top: 0;\n right: 0;\n}\n\n.oc-toast-container--top-left {\n top: 0;\n left: 0;\n}\n\n.oc-toast-container--bottom-right {\n bottom: 0;\n right: 0;\n}\n\n.oc-toast-container--bottom-left {\n bottom: 0;\n left: 0;\n}\n\n.oc-toast-container--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.oc-toast-container--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* Toast */\n.oc-toast {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n pointer-events: auto;\n animation: oc-slide-up-fade var(--oc-duration-normal) var(--oc-easing-enter);\n}\n\n/* Toast icon */\n.oc-toast__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-toast--success .oc-toast__icon {\n color: var(--oc-success);\n}\n\n.oc-toast--error .oc-toast__icon {\n color: var(--oc-error);\n}\n\n.oc-toast--warning .oc-toast__icon {\n color: var(--oc-warning);\n}\n\n.oc-toast--info .oc-toast__icon {\n color: var(--oc-accent);\n}\n\n/* Toast content */\n.oc-toast__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-toast__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toast__description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n margin-top: 2px;\n}\n\n/* Toast action */\n.oc-toast__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n/* Toast close button */\n.oc-toast__close {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toast__close:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n\n\n/* Skeleton base */\n.oc-skeleton {\n background: var(--oc-bg-surface);\n display: block;\n}\n\n/* Variants */\n.oc-skeleton--text {\n height: 1em;\n border-radius: var(--oc-radius-sm);\n transform-origin: 0 55%;\n transform: scale(1, 0.8);\n}\n\n.oc-skeleton--circular {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-skeleton--rectangular {\n border-radius: 0;\n}\n\n.oc-skeleton--rounded {\n border-radius: var(--oc-radius-md);\n}\n\n/* Animations */\n.oc-skeleton--pulse {\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.oc-skeleton--wave {\n position: relative;\n overflow: hidden;\n}\n\n.oc-skeleton--wave::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.5),\n transparent\n );\n animation: oc-skeleton-wave 1.5s linear infinite;\n}\n\n@keyframes oc-skeleton-wave {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* Skeleton text */\n.oc-skeleton-text {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Document card skeleton */\n.oc-skeleton-document-card {\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n width: 200px;\n}\n\n.oc-skeleton-document-card__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm);\n}\n\n/* Table row skeleton */\n.oc-skeleton-table-row {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-skeleton-table-row > .oc-skeleton {\n flex: 1;\n}\n\n/* Chat message skeleton */\n.oc-skeleton-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-skeleton-chat-message__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n flex: 1;\n}\n\n\n\n/* Search input wrapper */\n.oc-search-input-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n\n.oc-search-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Search input container */\n.oc-search-input-container {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n min-height: 36px;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-container--focused {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n/* Search icon */\n.oc-search-input-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* Input field */\n.oc-search-input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n}\n\n.oc-search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Clear button */\n.oc-search-input-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-search-input-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n/* Shortcut badge */\n.oc-search-input-shortcut {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 6px;\n font-family: inherit;\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n}\n\n/* Dropdown */\n.oc-search-input-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 300px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n}\n\n.oc-search-input-dropdown-header {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-search-input-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: var(--oc-spacing-sm);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n text-align: left;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-dropdown-item:hover,\n.oc-search-input-dropdown-item--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-search-input-dropdown-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-dropdown-item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n/* Progress bar */\n.oc-progress {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n}\n\n.oc-progress__track {\n flex: 1;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-full);\n overflow: hidden;\n}\n\n.oc-progress--sm .oc-progress__track {\n height: 4px;\n}\n\n.oc-progress--md .oc-progress__track {\n height: 6px;\n}\n\n.oc-progress--lg .oc-progress__track {\n height: 8px;\n}\n\n.oc-progress__bar {\n height: 100%;\n border-radius: var(--oc-radius-full);\n transition: width var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress--accent .oc-progress__bar {\n background: var(--oc-accent);\n}\n\n.oc-progress--success .oc-progress__bar {\n background: var(--oc-success);\n}\n\n.oc-progress--warning .oc-progress__bar {\n background: var(--oc-warning);\n}\n\n.oc-progress--error .oc-progress__bar {\n background: var(--oc-error);\n}\n\n/* Indeterminate animation */\n.oc-progress--indeterminate .oc-progress__bar {\n width: 30%;\n animation: oc-progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(200%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}\n\n.oc-progress__label {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n min-width: 3ch;\n text-align: right;\n}\n\n/* Progress circle */\n.oc-progress-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-progress-circle__track {\n stroke: var(--oc-bg-surface);\n}\n\n.oc-progress-circle__bar {\n transition: stroke-dashoffset var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress-circle--accent .oc-progress-circle__bar {\n stroke: var(--oc-accent);\n}\n\n.oc-progress-circle--success .oc-progress-circle__bar {\n stroke: var(--oc-success);\n}\n\n.oc-progress-circle--warning .oc-progress-circle__bar {\n stroke: var(--oc-warning);\n}\n\n.oc-progress-circle--error .oc-progress-circle__bar {\n stroke: var(--oc-error);\n}\n\n.oc-progress-circle__label {\n position: absolute;\n font-size: var(--oc-font-size-xs);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Spinner */\n.oc-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-accent);\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n\n\n/* Empty state */\n.oc-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: var(--oc-spacing-xl);\n}\n\n/* Sizes */\n.oc-empty-state--sm {\n padding: var(--oc-spacing-md);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon svg {\n width: 32px;\n height: 32px;\n}\n\n.oc-empty-state--sm .oc-empty-state__title {\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__description {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-empty-state--md {\n padding: var(--oc-spacing-xl);\n}\n\n.oc-empty-state--lg {\n padding: var(--oc-spacing-2xl);\n}\n\n.oc-empty-state--lg .oc-empty-state__icon svg {\n width: 64px;\n height: 64px;\n}\n\n.oc-empty-state--lg .oc-empty-state__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Icon */\n.oc-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--oc-spacing-md);\n color: var(--oc-fg-tertiary);\n}\n\n.oc-empty-state__icon svg {\n width: 48px;\n height: 48px;\n}\n\n/* Title */\n.oc-empty-state__title {\n margin: 0 0 var(--oc-spacing-xs);\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Description */\n.oc-empty-state__description {\n margin: 0 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n max-width: 320px;\n}\n\n/* Actions */\n.oc-empty-state__actions {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex-wrap: wrap;\n justify-content: center;\n}\n\n\n\n/* Alert */\n.oc-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-radius: var(--oc-radius-md);\n border: 1px solid;\n}\n\n.oc-alert--info {\n background: rgba(8, 145, 178, 0.06);\n border-color: rgba(8, 145, 178, 0.2);\n}\n\n.oc-alert--success {\n background: var(--oc-success-bg);\n border-color: rgba(5, 150, 105, 0.2);\n}\n\n.oc-alert--warning {\n background: var(--oc-warning-bg);\n border-color: rgba(217, 119, 6, 0.2);\n}\n\n.oc-alert--error {\n background: var(--oc-error-bg);\n border-color: rgba(220, 38, 38, 0.2);\n}\n\n.oc-alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-alert--info .oc-alert__icon {\n color: var(--oc-accent);\n}\n\n.oc-alert--success .oc-alert__icon {\n color: var(--oc-success);\n}\n\n.oc-alert--warning .oc-alert__icon {\n color: var(--oc-warning);\n}\n\n.oc-alert--error .oc-alert__icon {\n color: var(--oc-error);\n}\n\n.oc-alert__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-alert__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__description {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__title + .oc-alert__description {\n margin-top: 2px;\n}\n\n.oc-alert__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n.oc-alert__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-alert__dismiss:hover {\n background: rgba(0, 0, 0, 0.05);\n color: var(--oc-fg-primary);\n}\n\n/* Banner */\n.oc-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n width: 100%;\n}\n\n.oc-banner--info {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--success {\n background: var(--oc-success);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--warning {\n background: var(--oc-warning);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--error {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner__content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n justify-content: center;\n}\n\n.oc-banner__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-banner__text {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n}\n\n.oc-banner__action {\n display: flex;\n align-items: center;\n}\n\n.oc-banner__action button,\n.oc-banner__action a {\n color: inherit;\n text-decoration: underline;\n font-weight: 600;\n}\n\n.oc-banner__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n opacity: 0.8;\n transition: opacity var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-banner__dismiss:hover {\n opacity: 1;\n}\n\n\n\n/* Tabs container */\n.oc-tabs {\n display: flex;\n flex-direction: column;\n}\n\n.oc-tabs--vertical {\n flex-direction: row;\n}\n\n/* Tab list */\n.oc-tab-list {\n display: flex;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-tabs--horizontal .oc-tab-list {\n flex-direction: row;\n}\n\n.oc-tabs--vertical .oc-tab-list {\n flex-direction: column;\n border-right: 1px solid var(--oc-border-default);\n padding-right: var(--oc-spacing-sm);\n margin-right: var(--oc-spacing-md);\n}\n\n/* Line variant */\n.oc-tabs--line .oc-tab-list {\n border-bottom: 1px solid var(--oc-border-default);\n gap: 0;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab-list {\n border-bottom: none;\n border-right: 1px solid var(--oc-border-default);\n}\n\n/* Tab button */\n.oc-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-tab:hover:not(.oc-tab--disabled) {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--selected {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-tab:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: -2px;\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Line variant tab */\n.oc-tabs--line .oc-tab {\n position: relative;\n border-radius: 0;\n margin-bottom: -1px;\n}\n\n.oc-tabs--line .oc-tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: transparent;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-tabs--line .oc-tab--selected::after {\n background: var(--oc-accent);\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab {\n margin-bottom: 0;\n margin-right: -1px;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab::after {\n bottom: auto;\n left: auto;\n top: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}\n\n/* Enclosed variant */\n.oc-tabs--enclosed .oc-tab-list {\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n padding: var(--oc-spacing-xs);\n}\n\n.oc-tabs--enclosed .oc-tab {\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tabs--enclosed .oc-tab--selected {\n background: var(--oc-bg-canvas);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Pills variant */\n.oc-tabs--pills .oc-tab {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-tabs--pills .oc-tab--selected {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-tabs--pills .oc-tab:hover:not(.oc-tab--disabled):not(.oc-tab--selected) {\n background: var(--oc-bg-surface);\n}\n\n/* Tab panels */\n.oc-tab-panels {\n flex: 1;\n}\n\n.oc-tab-panel {\n padding: var(--oc-spacing-md) 0;\n}\n\n.oc-tabs--vertical .oc-tab-panel {\n padding: 0;\n}\n\n.oc-tab-panel:focus {\n outline: none;\n}\n\n\n\n/* ============ Research Card Container ============ */\n.oc-research-card {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-research-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-research-card__back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.oc-research-card__back:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-research-card__title {\n flex: 1;\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-card__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-research-card__content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n/* ============ User Question ============ */\n.oc-user-question {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.oc-user-question__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-user-question__text {\n flex: 1;\n font-size: 15px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #0F172A);\n padding-top: 4px;\n}\n\n/* ============ AI Response ============ */\n.oc-ai-response {\n margin-bottom: 20px;\n}\n\n.oc-ai-response__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.oc-ai-response__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-ai-response__avatar-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-fg-primary, #0F172A);\n color: white;\n font-size: 14px;\n font-weight: 700;\n}\n\n.oc-ai-response__status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: default;\n transition: all 0.15s ease;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status {\n cursor: pointer;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-ai-response__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-ai-response__status-text {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-ai-response--researching .oc-ai-response__status-text {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-ai-response--error .oc-ai-response__status-text {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-ai-response__chevron {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-ai-response--expanded .oc-ai-response__chevron {\n transform: rotate(180deg);\n}\n\n.oc-ai-response__sources {\n margin-bottom: 16px;\n margin-left: 42px;\n}\n\n.oc-ai-response__content {\n margin-left: 42px;\n}\n\n/* ============ Sources Badge ============ */\n.oc-sources-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n background: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-sources-badge:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-sources-badge__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.oc-sources-badge__icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.oc-sources-badge__text {\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-sources-badge__arrow {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.15s ease;\n}\n\n.oc-sources-badge:hover .oc-sources-badge__arrow {\n transform: translateX(2px);\n}\n\n/* ============ Research Section ============ */\n.oc-research-section {\n margin-bottom: 24px;\n}\n\n.oc-research-section:last-child {\n margin-bottom: 0;\n}\n\n.oc-research-section__heading {\n margin: 0 0 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-section__body {\n font-size: 15px;\n line-height: 1.7;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-research-section__body p {\n margin: 0 0 12px;\n}\n\n.oc-research-section__body p:last-child {\n margin-bottom: 0;\n}\n\n/* ============ Steps List ============ */\n.oc-steps-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n margin-bottom: 16px;\n}\n\n.oc-steps-list__item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px;\n border-radius: var(--oc-radius-sm, 4px);\n}\n\n.oc-steps-list__indicator {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-steps-list__number {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-tertiary, #94A3B8);\n font-size: 11px;\n font-weight: 600;\n}\n\n.oc-steps-list__item--completed .oc-steps-list__indicator {\n color: var(--oc-success, #059669);\n}\n\n.oc-steps-list__item--running .oc-steps-list__indicator {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-steps-list__item--error .oc-steps-list__indicator {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-steps-list__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-steps-list__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-steps-list__label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-steps-list__item--pending .oc-steps-list__label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-steps-list__desc {\n display: block;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n\n\n/* ============ Project Picker Container ============ */\n.oc-project-picker {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-project-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 20px;\n border: none;\n border-bottom: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__header {\n border-bottom-color: var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-picker__header:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-picker__header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-picker__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-project-picker__subtitle {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-picker__chevron {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__chevron {\n transform: rotate(180deg);\n}\n\n.oc-project-picker__list {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n\n/* ============ Project Item ============ */\n.oc-project-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 14px;\n border-radius: var(--oc-radius-md, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.oc-project-item:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-item:focus-visible {\n box-shadow: 0 0 0 2px var(--oc-accent, #0891B2);\n}\n\n.oc-project-item--selected {\n background: var(--oc-bg-surface, #F8FAFC);\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-item--selected:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-project-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-item__name {\n font-size: 15px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__desc {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__icon {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: color 0.15s ease;\n}\n\n.oc-project-item:hover .oc-project-item__icon {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-project-item--selected .oc-project-item__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n/* ============ Project Search ============ */\n.oc-project-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n margin: 8px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-project-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-project-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-project-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Sources Panel Container ============ */\n.oc-sources-panel {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ============ Panel Tabs ============ */\n.oc-panel-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 12px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-panel-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid transparent;\n border-bottom: none;\n border-radius: var(--oc-radius-md, 6px) var(--oc-radius-md, 6px) 0 0;\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: -1px;\n}\n\n.oc-panel-tab:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab--selected {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-border-default, #E2E8F0);\n border-bottom-color: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n color: currentColor;\n}\n\n.oc-panel-tab__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-panel-tab__label {\n white-space: nowrap;\n}\n\n/* ============ Panel Search ============ */\n.oc-panel-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-panel-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-panel-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-panel-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Action List ============ */\n.oc-panel-action-list {\n display: flex;\n flex-direction: column;\n padding: 0 8px 8px;\n}\n\n/* ============ Panel Action ============ */\n.oc-panel-action {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 12px 14px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-panel-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-panel-action:active {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-panel-action--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.oc-panel-action--disabled:hover {\n background: transparent;\n}\n\n.oc-panel-action__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-sm, 4px);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-panel-action__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-panel-action__icon img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.oc-panel-action__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-panel-action__label {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-action__desc {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Section ============ */\n.oc-panel-section {\n padding: 0 12px 12px;\n}\n\n.oc-panel-section__title {\n margin: 0 0 8px;\n padding: 0 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-section__content {\n display: flex;\n flex-direction: column;\n}\n\n/* ============ Integration Colors ============ */\n.oc-panel-action--docvault .oc-panel-action__icon {\n color: #E85B5B;\n}\n\n.oc-panel-action--filenexus .oc-panel-action__icon {\n color: #1B4F72;\n}\n\n.oc-panel-action--clouddrive .oc-panel-action__icon {\n color: #038387;\n}\n\n.oc-panel-action--upload .oc-panel-action__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n\n\n/* ============ Hero Container ============ */\n.oc-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(180deg, rgba(8, 145, 178, 0.03) 0%, transparent 100%);\n}\n\n.oc-hero__inner {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Size variants */\n.oc-hero--sm {\n padding: 48px 24px;\n}\n\n.oc-hero--md {\n padding: 80px 24px;\n}\n\n.oc-hero--lg {\n padding: 120px 24px;\n}\n\n/* Layout variants */\n.oc-hero--centered {\n text-align: center;\n}\n\n.oc-hero--centered .oc-hero__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.oc-hero--split .oc-hero__inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: center;\n}\n\n/* ============ Hero Decorations ============ */\n.oc-hero__decorations {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n.oc-hero:not(.oc-hero--with-decorations) .oc-hero__decorations {\n display: none;\n}\n\n.oc-hero__decoration {\n position: absolute;\n color: var(--oc-accent, #0891B2);\n opacity: 0.08;\n}\n\n.oc-hero__decoration--1 {\n top: 15%;\n left: 10%;\n animation: oc-hero-float 8s ease-in-out infinite;\n}\n\n.oc-hero__decoration--2 {\n top: 40%;\n left: 5%;\n opacity: 0.06;\n animation: oc-hero-float 10s ease-in-out infinite reverse;\n}\n\n.oc-hero__decoration--3 {\n top: 20%;\n right: 8%;\n opacity: 0.05;\n animation: oc-hero-float 9s ease-in-out infinite;\n}\n\n.oc-hero__decoration--4 {\n top: 50%;\n right: 12%;\n opacity: 0.07;\n animation: oc-hero-float 11s ease-in-out infinite reverse;\n}\n\n@keyframes oc-hero-float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n}\n\n/* ============ Hero Badge ============ */\n.oc-hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-sm);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 24px;\n}\n\n.oc-hero-badge__icon {\n display: flex;\n align-items: center;\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-hero-badge__text {\n white-space: nowrap;\n}\n\n/* ============ Hero Title ============ */\n.oc-hero-title {\n margin: 0 0 16px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.2;\n color: var(--oc-fg-primary, #0F172A);\n letter-spacing: -0.02em;\n}\n\n.oc-hero-title--gradient {\n background: linear-gradient(135deg, var(--oc-fg-primary, #0F172A) 0%, var(--oc-accent, #0891B2) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* ============ Hero Subtitle ============ */\n.oc-hero-subtitle {\n margin: 0 0 32px;\n max-width: 560px;\n font-size: 17px;\n line-height: 1.6;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-hero--centered .oc-hero-subtitle {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ============ Hero Search ============ */\n.oc-hero-search {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n max-width: 600px;\n padding: 8px 8px 8px 20px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-lg);\n margin-bottom: 24px;\n}\n\n.oc-hero-search__input {\n flex: 1;\n min-width: 0;\n padding: 8px 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-hero-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-hero-search__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 12px 20px;\n background: var(--oc-accent, #0891B2);\n color: white;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.oc-hero-search__button:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0E7490);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-accent);\n}\n\n.oc-hero-search__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.oc-hero-search__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-hero-search--loading {\n opacity: 0.8;\n}\n\n/* ============ Hero Actions ============ */\n.oc-hero-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-hero--split .oc-hero-actions {\n justify-content: flex-start;\n}\n\n/* ============ Hero Action Button ============ */\n.oc-hero-action {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 6px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-hero-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-hero-action__icon {\n display: flex;\n align-items: center;\n color: currentColor;\n}\n\n/* ============ Hero Content (for split layout) ============ */\n.oc-hero-content {\n display: flex;\n flex-direction: column;\n}\n\n.oc-hero-content--left {\n align-items: flex-start;\n text-align: left;\n}\n\n.oc-hero-content--center {\n align-items: center;\n text-align: center;\n}\n\n.oc-hero-content--right {\n align-items: flex-end;\n text-align: right;\n}\n\n/* ============ Hero Media ============ */\n.oc-hero-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-hero-media img,\n.oc-hero-media svg {\n max-width: 100%;\n height: auto;\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 1024px) {\n .oc-hero--split .oc-hero__inner {\n grid-template-columns: 1fr;\n gap: 32px;\n text-align: center;\n }\n\n .oc-hero--split .oc-hero-content {\n align-items: center;\n }\n\n .oc-hero--split .oc-hero-actions {\n justify-content: center;\n }\n\n .oc-hero-media {\n order: -1;\n }\n}\n\n@media (max-width: 768px) {\n .oc-hero--sm {\n padding: 32px 16px;\n }\n\n .oc-hero--md {\n padding: 48px 16px;\n }\n\n .oc-hero--lg {\n padding: 64px 16px;\n }\n\n .oc-hero-title {\n font-size: 32px;\n }\n\n .oc-hero-subtitle {\n font-size: 15px;\n margin-bottom: 24px;\n }\n\n .oc-hero-search {\n flex-direction: column;\n padding: 12px;\n border-radius: var(--oc-radius-lg, 8px);\n gap: 8px;\n }\n\n .oc-hero-search__input {\n width: 100%;\n text-align: center;\n }\n\n .oc-hero-search__button {\n width: 100%;\n }\n\n .oc-hero__decorations {\n display: none;\n }\n}\n\n@media (max-width: 480px) {\n .oc-hero-title {\n font-size: 26px;\n }\n\n .oc-hero-badge {\n font-size: 11px;\n padding: 6px 12px;\n }\n\n .oc-hero-action {\n width: 100%;\n justify-content: center;\n }\n\n .oc-hero-actions {\n flex-direction: column;\n width: 100%;\n }\n}\n\n\n\n/* ============================================\n SearchBox Component\n ============================================ */\n\n.oc-search-box {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-search-box:focus-within {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Size variants */\n.oc-search-box--sm {\n padding: 8px 12px;\n gap: 10px;\n}\n\n.oc-search-box--sm .oc-search-box__input {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--sm .oc-search-box__button {\n padding: 6px 14px;\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--lg {\n padding: 16px 20px;\n gap: 14px;\n}\n\n.oc-search-box--lg .oc-search-box__input {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-search-box--lg .oc-search-box__button {\n padding: 10px 24px;\n font-size: var(--oc-font-size-md, 15px);\n}\n\n/* Icon */\n.oc-search-box__icon {\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Input */\n.oc-search-box__input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-fg-primary, #1E293B);\n outline: none;\n}\n\n.oc-search-box__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-search-box__input:disabled {\n cursor: not-allowed;\n}\n\n/* Button */\n.oc-search-box__button {\n padding: 8px 20px;\n background: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.oc-search-box__button:hover:not(:disabled) {\n background: #1E293B;\n}\n\n.oc-search-box__button:active:not(:disabled) {\n background: #0F172A;\n}\n\n.oc-search-box__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Loading state */\n.oc-search-box--loading {\n pointer-events: none;\n}\n\n.oc-search-box__spinner {\n animation: oc-spin var(--oc-duration-spin, 0.8s) linear infinite;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-search-box {\n flex-wrap: wrap;\n }\n\n .oc-search-box__input {\n flex: 1 1 100%;\n order: 1;\n }\n\n .oc-search-box__icon {\n order: 0;\n }\n\n .oc-search-box__button {\n order: 2;\n width: 100%;\n margin-top: 8px;\n }\n}\n\n\n\n/* ============================================\n FilterTabs Component\n ============================================ */\n\n.oc-filter-tabs {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n/* Filter icon button */\n.oc-filter-tabs__icon-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-filter-tabs__icon-button:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-secondary, #64748B);\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-filter-tabs__icon-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-filter-tabs__icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tabs--underline {\n gap: 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* FilterTab */\n.oc-filter-tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-filter-tab:hover:not(:disabled) {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #475569);\n}\n\n.oc-filter-tab--active {\n background: #1E293B;\n border-color: #1E293B;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--active:hover:not(:disabled) {\n background: #334155;\n border-color: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-filter-tab--sm {\n padding: 6px 12px;\n font-size: var(--oc-font-size-xs, 12px);\n gap: 4px;\n}\n\n.oc-filter-tab--lg {\n padding: 10px 18px;\n font-size: var(--oc-font-size-md, 15px);\n gap: 8px;\n}\n\n/* Underline variant */\n.oc-filter-tab--underline {\n border: none;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n padding: 12px 16px;\n margin-bottom: -1px;\n}\n\n.oc-filter-tab--underline:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active {\n background: transparent;\n color: var(--oc-accent, #0F766E);\n border-bottom-color: var(--oc-accent, #0F766E);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n/* Icon */\n.oc-filter-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-filter-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tab--sm .oc-filter-tab__icon svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-filter-tab--lg .oc-filter-tab__icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Label */\n.oc-filter-tab__label {\n flex-shrink: 0;\n}\n\n/* Count badge */\n.oc-filter-tab__count {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n.oc-filter-tab--active .oc-filter-tab__count {\n opacity: 0.8;\n}\n\n\n\n .oc-filter-panel {\n width: 320px;\n max-height: 520px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 8px 16px rgba(15, 23, 42, 0.06));\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .oc-filter-panel__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0;\n }\n\n .oc-filter-panel__clear {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n background: none;\n border: none;\n padding: 4px 8px;\n margin: -4px -8px;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__clear:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__clear:disabled {\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: not-allowed;\n }\n\n .oc-filter-panel__clear:disabled:hover {\n background: transparent;\n }\n\n .oc-filter-panel__body {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .oc-filter-panel__section {\n padding: 8px 20px;\n }\n\n .oc-filter-panel__section:not(:last-child) {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n padding-bottom: 16px;\n margin-bottom: 8px;\n }\n\n .oc-filter-panel__section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin: 0;\n }\n\n .oc-filter-panel__section-count {\n font-size: 11px;\n font-weight: 600;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n padding: 2px 6px;\n border-radius: var(--oc-radius-full, 9999px);\n }\n\n /* Section search input */\n .oc-filter-panel__search {\n position: relative;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n align-items: center;\n }\n\n .oc-filter-panel__search-input {\n width: 100%;\n padding: 8px 32px 8px 32px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__search-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n background: var(--oc-bg-surface, white);\n }\n\n .oc-filter-panel__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border: none;\n border-radius: 50%;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n padding: 0;\n }\n\n .oc-filter-panel__search-clear:hover {\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #475569);\n }\n\n /* Options list */\n .oc-filter-panel__options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n }\n\n .oc-filter-panel__option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px 12px;\n margin: 0 -12px;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .oc-filter-panel__option:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n /* Checkbox styles */\n .oc-filter-panel__checkbox {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__checkbox--checked {\n border-color: var(--oc-accent, #0F766E);\n background: var(--oc-accent, #0F766E);\n }\n\n /* Radio styles */\n .oc-filter-panel__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__radio--checked {\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--oc-accent, #0F766E);\n }\n\n /* Option content */\n .oc-filter-panel__option-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .oc-filter-panel__option-label {\n font-size: 14px;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-description {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Loading state */\n .oc-filter-panel__loading {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__spinner {\n animation: oc-filter-spin 0.8s linear infinite;\n }\n\n @keyframes oc-filter-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Empty state */\n .oc-filter-panel__empty {\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n text-align: center;\n font-style: italic;\n }\n\n /* Show more button */\n .oc-filter-panel__show-more {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n margin: 4px -12px 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__show-more:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__show-more svg {\n transition: transform 0.2s;\n }\n\n /* Date inputs */\n .oc-filter-panel__date-inputs {\n display: flex;\n gap: 12px;\n }\n\n .oc-filter-panel__date-field {\n flex: 1;\n }\n\n .oc-filter-panel__date-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 6px;\n }\n\n .oc-filter-panel__date-input {\n width: 100%;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__date-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n }\n\n /* Footer */\n .oc-filter-panel__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FAFAFA);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__footer-spacer {\n flex: 1;\n }\n\n .oc-filter-panel__active-count {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n }\n\n .oc-filter-panel__active-count strong {\n color: var(--oc-accent, #0F766E);\n font-weight: 600;\n }\n\n /* Buttons */\n .oc-filter-panel__btn {\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .oc-filter-panel__btn--secondary {\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__btn--secondary:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n }\n\n .oc-filter-panel__btn--primary {\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n }\n\n .oc-filter-panel__btn--primary:hover {\n background: var(--oc-accent-hover, #0D9488);\n }\n\n /* Quick filter chips */\n .oc-filter-panel__quick-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__quick-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .oc-filter-panel__quick-chip:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__quick-chip--active {\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.08);\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__quick-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n margin-right: -4px;\n border-radius: 50%;\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n transition: opacity 0.15s;\n }\n\n .oc-filter-panel__quick-chip-remove:hover {\n opacity: 1;\n }\n\n\n\n/* ============================================\n StatBlock Component\n ============================================ */\n\n.oc-stat-block {\n display: flex;\n gap: 12px;\n}\n\n.oc-stat-block--center {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.oc-stat-block--left {\n align-items: flex-start;\n}\n\n/* Icon */\n.oc-stat-block__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-stat-block__icon svg {\n width: 24px;\n height: 24px;\n}\n\n/* Content */\n.oc-stat-block__content {\n min-width: 0;\n}\n\n/* Value */\n.oc-stat-block__value {\n font-size: 36px;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n font-feature-settings: 'tnum' 1;\n}\n\n.oc-stat-block--default .oc-stat-block__value {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-stat-block--accent .oc-stat-block__value {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-stat-block--muted .oc-stat-block__value {\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Label */\n.oc-stat-block__label {\n font-size: var(--oc-font-size-md, 15px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n/* Sublabel */\n.oc-stat-block__sublabel {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.4;\n}\n\n/* Size variants */\n.oc-stat-block--sm .oc-stat-block__value {\n font-size: 24px;\n}\n\n.oc-stat-block--sm .oc-stat-block__label {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-stat-block--sm .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-xs, 11px);\n}\n\n.oc-stat-block--sm .oc-stat-block__icon {\n width: 36px;\n height: 36px;\n}\n\n.oc-stat-block--sm .oc-stat-block__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-stat-block--lg .oc-stat-block__value {\n font-size: 48px;\n}\n\n.oc-stat-block--lg .oc-stat-block__label {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-stat-block--lg .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-md, 15px);\n}\n\n.oc-stat-block--lg .oc-stat-block__icon {\n width: 56px;\n height: 56px;\n}\n\n.oc-stat-block--lg .oc-stat-block__icon svg {\n width: 28px;\n height: 28px;\n}\n\n/* ============================================\n StatGrid Component\n ============================================ */\n\n.oc-stat-grid {\n display: grid;\n}\n\n/* Columns */\n.oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.oc-stat-grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.oc-stat-grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Gap */\n.oc-stat-grid--gap-sm {\n gap: 16px 24px;\n}\n\n.oc-stat-grid--gap-md {\n gap: 32px 48px;\n}\n\n.oc-stat-grid--gap-lg {\n gap: 48px 64px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-stat-grid--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--cols-3 {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .oc-stat-grid--cols-4,\n .oc-stat-grid--cols-3,\n .oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--gap-md {\n gap: 24px 32px;\n }\n\n .oc-stat-grid--gap-lg {\n gap: 32px 40px;\n }\n\n .oc-stat-block__value {\n font-size: 28px;\n }\n}\n\n\n\n/* ============================================\n CollectionCard Component\n ============================================ */\n\n.oc-collection-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-collection-card--clickable {\n cursor: pointer;\n}\n\n.oc-collection-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Avatar - uniform circular treatment for icons and images */\n.oc-collection-card__icon,\n.oc-collection-card__image {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.oc-collection-card__icon {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-collection-card__image {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-collection-card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Content */\n.oc-collection-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-collection-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Badge */\n.oc-collection-card__badge {\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Status */\n.oc-collection-card__status {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Title */\n.oc-collection-card__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 6px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-collection-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Stats */\n.oc-collection-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-collection-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-collection-card__stats span:not(:last-child)::after {\n content: '\u2022';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Menu */\n.oc-collection-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-collection-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============================================\n CollectionList Component\n ============================================ */\n\n.oc-collection-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-collection-list--gap-sm {\n gap: 12px;\n}\n\n.oc-collection-list--gap-md {\n gap: 16px;\n}\n\n.oc-collection-list--gap-lg {\n gap: 24px;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-collection-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-collection-card__icon,\n .oc-collection-card__image {\n width: 36px;\n height: 36px;\n }\n\n .oc-collection-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-collection-card__title {\n font-size: 15px;\n }\n\n .oc-collection-card__description {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActivityFeed Component\n ============================================ */\n\n.oc-activity-feed {\n display: flex;\n flex-direction: column;\n}\n\n.oc-activity-feed__list {\n display: flex;\n flex-direction: column;\n}\n\n/* ActivityItem */\n.oc-activity-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 0;\n}\n\n.oc-activity-feed--dividers .oc-activity-item {\n border-bottom: 1px solid var(--oc-bg-subtle, #F1F5F9);\n}\n\n.oc-activity-feed--dividers .oc-activity-item:last-child {\n border-bottom: none;\n}\n\n/* Avatar */\n.oc-activity-item__avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-inverse, #FFFFFF);\n flex-shrink: 0;\n background-size: cover;\n background-position: center;\n}\n\n/* Content */\n.oc-activity-item__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Text */\n.oc-activity-item__text {\n font-size: var(--oc-font-size-sm, 14px);\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n line-height: 1.4;\n}\n\n/* Name */\n.oc-activity-item__name {\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* Target */\n.oc-activity-item__target {\n color: var(--oc-accent, #0F766E);\n text-decoration: none;\n}\n\na.oc-activity-item__target:hover {\n text-decoration: underline;\n}\n\n/* Time */\n.oc-activity-item__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n/* View All Link */\n.oc-activity-feed__view-all {\n display: block;\n text-align: center;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n text-decoration: none;\n padding: 12px;\n margin-top: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-activity-feed__view-all:hover {\n color: var(--oc-accent, #0F766E);\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-activity-item {\n gap: 10px;\n padding: 12px 0;\n }\n\n .oc-activity-item__avatar {\n width: 32px;\n height: 32px;\n font-size: 11px;\n }\n\n .oc-activity-item__text {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActionList Component\n ============================================ */\n\n.oc-action-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-action-list--card {\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n padding: 8px;\n}\n\n/* ActionItem */\n.oc-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n text-decoration: none;\n width: 100%;\n}\n\n.oc-action-item:hover:not(:disabled) {\n background: rgba(15, 118, 110, 0.05);\n}\n\n.oc-action-item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-action-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-action-item--sm {\n padding: 10px 12px;\n gap: 10px;\n font-size: var(--oc-font-size-sm, 14px);\n}\n\n.oc-action-item--lg {\n padding: 16px 20px;\n gap: 14px;\n font-size: var(--oc-font-size-lg, 16px);\n}\n\n/* Icon */\n.oc-action-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n}\n\n.oc-action-item__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-action-item--sm .oc-action-item__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-action-item--lg .oc-action-item__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-action-item__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n/* Label */\n.oc-action-item__label {\n font-weight: 500;\n}\n\n/* Description */\n.oc-action-item__description {\n font-size: 0.85em;\n color: var(--oc-fg-tertiary, #94A3B8);\n font-weight: 400;\n}\n\n/* Card variant items */\n.oc-action-list--card .oc-action-item {\n padding: 12px 14px;\n}\n\n.oc-action-list--card .oc-action-item:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n\n\n/* ============ Thread View Container ============ */\n.oc-thread-view {\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-view__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-view__title {\n flex: 1;\n min-width: 200px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-view__pin,\n.oc-thread-view__status,\n.oc-thread-view__locked {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-view__pin {\n background: rgba(217, 119, 6, 0.1);\n color: var(--oc-warning, #D97706);\n}\n\n.oc-thread-view__status--resolved {\n background: rgba(5, 150, 105, 0.1);\n color: var(--oc-success, #059669);\n}\n\n.oc-thread-view__status--closed {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-view__status--archived {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-view__locked {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-view__content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Pinned thread styling */\n.oc-thread-view--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n}\n\n/* Locked thread */\n.oc-thread-view--locked .oc-thread-view__content {\n opacity: 0.85;\n}\n\n/* ============ Thread Post (Main Post) ============ */\n.oc-thread-post {\n display: flex;\n gap: 14px;\n padding: 20px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n@keyframes oc-thread-fade-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-thread-post--root {\n padding-top: 0;\n}\n\n.oc-thread-post--highlighted {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-thread-post__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-post__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-post__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.oc-thread-post__author {\n font-size: 14px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-post__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__edited {\n font-size: 12px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__body {\n font-size: 15px;\n line-height: 1.65;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__body p {\n margin: 0 0 12px;\n}\n\n.oc-thread-post__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-post__resources {\n margin-top: 14px;\n}\n\n.oc-thread-post__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 14px;\n}\n\n.oc-thread-post__reactions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-thread-post__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-post:hover .oc-thread-post__actions {\n opacity: 1;\n}\n\n.oc-thread-post__reply-count {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-left: auto;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-post__reply-count svg {\n opacity: 0.6;\n}\n\n/* ============ Thread Reply (Nested) ============ */\n.oc-thread-reply {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 24px;\n}\n\n.oc-thread-reply__connector {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n display: flex;\n justify-content: center;\n}\n\n.oc-thread-reply__line {\n width: 2px;\n height: 100%;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: 1px;\n}\n\n.oc-thread-reply:last-child .oc-thread-reply__line {\n height: 32px;\n}\n\n.oc-thread-reply__content {\n display: flex;\n gap: 12px;\n padding: 14px 0;\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__content {\n padding: 10px 0;\n}\n\n.oc-thread-reply--highlighted .oc-thread-reply__content {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin-left: -12px;\n padding-left: 12px;\n border-radius: var(--oc-radius-md, 8px);\n}\n\n.oc-thread-reply__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-reply__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-reply__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__header {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__author {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-reply__time {\n font-size: 11px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__edited {\n font-size: 11px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__body p {\n margin: 0 0 10px;\n}\n\n.oc-thread-reply__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__resources {\n margin-top: 10px;\n}\n\n.oc-thread-reply__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__footer {\n margin-top: 0;\n}\n\n.oc-thread-reply__reactions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-thread-reply__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-reply:hover .oc-thread-reply__actions {\n opacity: 1;\n}\n\n.oc-thread-reply__toggle {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-reply__toggle:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__toggle-icon {\n transition: transform 0.2s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__toggle-icon {\n transform: rotate(-90deg);\n}\n\n.oc-thread-reply__replies {\n margin-top: 4px;\n}\n\n/* Depth indentation limits */\n.oc-thread-reply--depth-1 { padding-left: 24px; }\n.oc-thread-reply--depth-2 { padding-left: 20px; }\n.oc-thread-reply--depth-3 { padding-left: 16px; }\n.oc-thread-reply--depth-4 { padding-left: 12px; }\n\n/* ============ Mention ============ */\n.oc-mention {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n vertical-align: baseline;\n}\n\n.oc-mention:hover {\n background: rgba(15, 118, 110, 0.2);\n color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-mention__avatar {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.oc-mention__at {\n opacity: 0.7;\n}\n\n.oc-mention__name {\n font-weight: 600;\n}\n\n/* ============ Linked Resource ============ */\n.oc-linked-resource {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 13px;\n font-family: inherit;\n color: var(--resource-color, var(--oc-fg-secondary));\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.oc-linked-resource:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--resource-color, var(--oc-border-default));\n transform: translateY(-1px);\n}\n\n.oc-linked-resource__icon {\n display: flex;\n align-items: center;\n opacity: 0.8;\n}\n\n.oc-linked-resource__title {\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.oc-linked-resource__ref {\n font-size: 11px;\n font-weight: 400;\n color: var(--oc-fg-tertiary, #94A3B8);\n padding-left: 6px;\n border-left: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* Resource type colors */\n.oc-linked-resource--document { --resource-color: var(--oc-info, #0891B2); }\n.oc-linked-resource--collection { --resource-color: var(--oc-warning, #D97706); }\n.oc-linked-resource--annotation { --resource-color: var(--oc-accent, #0F766E); }\n.oc-linked-resource--comment { --resource-color: var(--oc-fg-secondary, #475569); }\n.oc-linked-resource--clause { --resource-color: var(--oc-success, #059669); }\n.oc-linked-resource--user { --resource-color: var(--oc-accent, #0F766E); }\n\n/* ============ Resource List ============ */\n.oc-resource-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-resource-list__label {\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-resource-list__items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n/* ============ Reaction Button ============ */\n.oc-reaction-button {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 14px;\n font-family: inherit;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-button:hover {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n transform: scale(1.05);\n}\n\n.oc-reaction-button--active {\n background: rgba(15, 118, 110, 0.1);\n border-color: rgba(15, 118, 110, 0.3);\n}\n\n.oc-reaction-button--active:hover {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-reaction-button__emoji {\n font-size: 14px;\n line-height: 1;\n}\n\n.oc-reaction-button__count {\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-reaction-button--active .oc-reaction-button__count {\n color: var(--oc-accent, #0F766E);\n}\n\n/* ============ Reaction Bar ============ */\n.oc-reaction-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-reaction-bar__add {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px dashed var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-bar__add:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* ============ Thread Action ============ */\n.oc-thread-action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-action:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-action--destructive {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action--destructive:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action__label {\n white-space: nowrap;\n}\n\n/* ============ Thread Input ============ */\n.oc-thread-input {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-input__replying {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n}\n\n.oc-thread-input__replying-label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-input__cancel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-input__cancel:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n/* ============ Thread Meta ============ */\n.oc-thread-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding: 12px 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-meta__item {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.oc-thread-meta__item svg {\n opacity: 0.6;\n}\n\n.oc-thread-meta__participants {\n display: flex;\n align-items: center;\n}\n\n.oc-thread-meta__activity {\n margin-left: auto;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Category Badge ============ */\n.oc-category-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--category-color, var(--oc-fg-secondary, #475569));\n background: color-mix(in srgb, var(--category-color, var(--oc-fg-secondary)) 10%, transparent);\n border-radius: var(--oc-radius-sm, 6px);\n white-space: nowrap;\n}\n\n.oc-category-badge__label {\n line-height: 1;\n}\n\n/* ============ Discussion List ============ */\n.oc-discussion-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n}\n\n.oc-discussion-list--card {\n gap: 12px;\n background: transparent;\n}\n\n.oc-discussion-list--compact,\n.oc-discussion-list--minimal {\n border: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-discussion-list--loading {\n gap: 0;\n}\n\n.oc-discussion-list__loading {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.oc-discussion-list__skeleton {\n height: 80px;\n background: var(--oc-bg-surface, #F8F8F8);\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.oc-discussion-list__skeleton:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.oc-discussion-list__skeleton:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ============ Discussion Item - Card Variant ============ */\n.oc-discussion-item--card {\n display: flex;\n gap: 16px;\n padding: 16px 20px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item--card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));\n transform: translateY(-1px);\n}\n\n.oc-discussion-item--card:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-discussion-item--card.oc-discussion-item--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, transparent 30%);\n}\n\n.oc-discussion-item--card.oc-discussion-item--unread {\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item--card.oc-discussion-item--answered,\n.oc-discussion-item--card.oc-discussion-item--resolved {\n border-left: 3px solid var(--oc-success, #059669);\n}\n\n/* Vote column */\n.oc-discussion-item__votes {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 40px;\n padding-top: 2px;\n}\n\n.oc-discussion-item__vote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item__vote-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-accent, #0F766E);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__vote-btn--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-item__vote-btn--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-discussion-item__vote-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* Main content */\n.oc-discussion-item__main {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-discussion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__status-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-discussion-item__status-icon--resolved {\n color: var(--oc-success, #059669);\n}\n\n.oc-discussion-item__status-icon--pinned {\n color: var(--oc-warning, #D97706);\n}\n\n.oc-discussion-item__activity {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n.oc-discussion-item__title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n.oc-discussion-item--card .oc-discussion-item__title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item--unread .oc-discussion-item__title {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__preview {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: var(--oc-fg-secondary, #475569);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-discussion-item__tag {\n display: inline-block;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-top: 4px;\n}\n\n.oc-discussion-item__author {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-discussion-item__author-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-item__author-badge {\n display: inline-flex;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-discussion-item__created {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item__stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-discussion-item__stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item__stat svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Item - Compact Variant ============ */\n.oc-discussion-item--compact {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--compact:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--compact:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--compact.oc-discussion-item--pinned {\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 20%);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__leading {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__title {\n font-size: 14px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tags {\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tag {\n font-size: 10px;\n padding: 1px 6px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n/* ============ Discussion Item - Minimal Variant ============ */\n.oc-discussion-item--minimal {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--minimal:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--minimal:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__avatar {\n flex-shrink: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__title {\n font-size: 14px;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__byline {\n font-size: 12px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time::before {\n content: '\\00B7';\n margin: 0 6px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-canvas, #FAFAFA);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Filters ============ */\n.oc-discussion-filters {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n margin-bottom: 16px;\n}\n\n.oc-discussion-filters__categories {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.oc-discussion-filters__category {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__category:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-discussion-filters__category--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-filters__category--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-discussion-filters__count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 11px;\n font-weight: 600;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-filters__category--active .oc-discussion-filters__count {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.oc-discussion-filters__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-filters__search {\n position: relative;\n flex: 1;\n min-width: 200px;\n max-width: 400px;\n}\n\n.oc-discussion-filters__search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n pointer-events: none;\n}\n\n.oc-discussion-filters__search-input {\n width: 100%;\n padding: 10px 12px 10px 38px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__search-input:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n.oc-discussion-filters__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-filters__sort {\n padding: 10px 32px 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white) url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\") right 8px center/20px no-repeat;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n appearance: none;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__sort:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* ============ New Discussion Button ============ */\n.oc-new-discussion-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-new-discussion-btn:hover {\n background: var(--oc-accent-hover, #0D9488);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-md, 0 4px 6px rgba(15, 23, 42, 0.05));\n}\n\n.oc-new-discussion-btn:active {\n transform: translateY(0);\n}\n\n.oc-new-discussion-btn:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============ Discussion Stats ============ */\n.oc-discussion-stats {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 12px 0;\n}\n\n.oc-discussion-stats__item {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.oc-discussion-stats__value {\n font-size: 18px;\n font-weight: 700;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-stats__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-stats__item--answered .oc-discussion-stats__value {\n color: var(--oc-success, #059669);\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 768px) {\n .oc-discussion-item--card {\n flex-direction: column;\n gap: 12px;\n }\n\n .oc-discussion-item__votes {\n flex-direction: row;\n min-width: unset;\n gap: 8px;\n order: -1;\n }\n\n .oc-discussion-item__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-discussion-item__stats {\n width: 100%;\n justify-content: flex-start;\n }\n\n .oc-discussion-filters__categories {\n overflow-x: auto;\n flex-wrap: nowrap;\n padding-bottom: 8px;\n margin-bottom: -8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-discussion-filters__category {\n flex-shrink: 0;\n }\n\n .oc-discussion-filters__actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .oc-discussion-filters__search {\n max-width: none;\n }\n\n .oc-discussion-filters__sort {\n width: 100%;\n }\n\n .oc-discussion-stats {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n@media (max-width: 480px) {\n .oc-discussion-item--compact,\n .oc-discussion-item--minimal {\n padding: 10px 12px;\n }\n\n .oc-discussion-item--compact .oc-discussion-item__meta {\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n }\n\n .oc-new-discussion-btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM CONTAINER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-filesystem {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FAFAFA);\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n.oc-filesystem__layout {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.oc-filesystem__sidebar {\n width: 240px;\n min-width: 240px;\n background: var(--oc-bg-surface, white);\n border-right: 1px solid var(--oc-border-default, #E2E8F0);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-filesystem__main {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree {\n display: flex;\n flex-direction: column;\n padding: 8px;\n overflow-y: auto;\n}\n\n.oc-folder-tree__root {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 4px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n}\n\n.oc-folder-tree__root:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree__root--active {\n background: rgba(15, 118, 110, 0.08);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree__root-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-folder-tree__root-label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree__content {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree-item {\n display: flex;\n flex-direction: column;\n}\n\n.oc-folder-tree-item__row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n border-radius: var(--oc-radius-md, 8px);\n transition: background var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__row:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-folder-tree-item--active > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.08);\n}\n\n.oc-folder-tree-item--in-path > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-folder-tree-item__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-folder-tree-item__toggle:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-folder-tree-item__toggle--hidden {\n visibility: hidden;\n}\n\n.oc-folder-tree-item__chevron--expanded {\n transform: rotate(90deg);\n}\n\n.oc-folder-tree-item__button {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n padding: 6px 8px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n text-align: left;\n border-radius: var(--oc-radius-sm, 6px);\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__button:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__button {\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #F59E0B;\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__icon {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree-item__children {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE PATH BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-breadcrumb {\n display: flex;\n align-items: center;\n}\n\n.oc-file-breadcrumb__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.oc-file-breadcrumb__item {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.oc-file-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-file-breadcrumb__link:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-file-breadcrumb__link--active {\n color: var(--oc-fg-primary, #1E293B);\n cursor: default;\n}\n\n.oc-file-breadcrumb__link--active:hover {\n background: transparent;\n}\n\n.oc-file-breadcrumb__icon {\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-file-breadcrumb__separator {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM TOOLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-fs-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-fs-toolbar__left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-fs-toolbar__center {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-fs-toolbar__right {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.oc-fs-toolbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-fs-toolbar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__nav-btn:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__nav-btn:disabled {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.oc-fs-toolbar__view-toggle {\n display: flex;\n align-items: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-md, 8px);\n padding: 3px;\n}\n\n.oc-fs-toolbar__view-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__view-btn:hover {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-fs-toolbar__view-btn--active {\n background: var(--oc-bg-surface, white);\n color: var(--oc-fg-primary, #1E293B);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-fs-toolbar__button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__button:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__button--primary {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-fs-toolbar__button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-fs-toolbar__button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-fs-toolbar__separator {\n width: 1px;\n height: 24px;\n background: var(--oc-border-default, #E2E8F0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-file-list__header {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FAFAFA);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__header-cell {\n flex-shrink: 0;\n}\n\n.oc-file-list__header-cell--name {\n flex: 1;\n min-width: 0;\n}\n\n.oc-file-list__header-cell--modified {\n width: 140px;\n}\n\n.oc-file-list__header-cell--size {\n width: 100px;\n text-align: right;\n}\n\n.oc-file-list__content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n\n.oc-file-list--list .oc-file-list__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 8px;\n}\n\n.oc-file-list--grid .oc-file-list__content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n padding: 16px;\n}\n\n.oc-file-list__empty {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n}\n\n.oc-file-list__empty-content {\n text-align: center;\n max-width: 300px;\n}\n\n.oc-file-list__empty-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 8px;\n}\n\n.oc-file-list__empty-description {\n font-size: 14px;\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - LIST VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--list {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--list:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-file-list-item--list:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--list.oc-file-list-item--selected {\n background: rgba(15, 118, 110, 0.08);\n border-color: rgba(15, 118, 110, 0.2);\n}\n\n.oc-file-list-item__cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-file-list-item__cell--name {\n flex: 1;\n min-width: 0;\n gap: 12px;\n}\n\n.oc-file-list-item__cell--modified {\n width: 140px;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__cell--size {\n width: 100px;\n justify-content: flex-end;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__name-text {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - GRID VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 16px 12px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--grid:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-file-list-item--grid:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--grid.oc-file-list-item--selected {\n border-color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon {\n width: 48px;\n height: 48px;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__name {\n width: 100%;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE ICONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n}\n\n.oc-file-list-item__icon--folder {\n color: #F59E0B;\n}\n\n.oc-file-list-item__icon--pdf {\n color: #DC2626;\n}\n\n.oc-file-list-item__icon--document {\n color: #2563EB;\n}\n\n.oc-file-list-item__icon--image {\n color: #059669;\n}\n\n.oc-file-list-item__icon--spreadsheet {\n color: #059669;\n}\n\n.oc-file-list-item__icon--presentation {\n color: #EA580C;\n}\n\n.oc-file-list-item__icon--archive {\n color: #7C3AED;\n}\n\n.oc-file-list-item__icon--unknown {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (max-width: 768px) {\n .oc-filesystem__sidebar {\n display: none;\n }\n\n .oc-file-list__header-cell--modified,\n .oc-file-list-item__cell--modified {\n display: none;\n }\n\n .oc-file-list__header-cell--size,\n .oc-file-list-item__cell--size {\n width: 80px;\n }\n\n .oc-file-breadcrumb__list {\n overflow-x: auto;\n flex-wrap: nowrap;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-fs-toolbar {\n padding: 10px 12px;\n gap: 8px;\n }\n}\n\n\n\n/* ============================================\n ExtractCard Component\n ============================================ */\n\n.oc-extract-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-extract-card--clickable {\n cursor: pointer;\n}\n\n.oc-extract-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Icon */\n.oc-extract-card__icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-extract-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-extract-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Status badge */\n.oc-extract-card__status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n.oc-extract-card__status svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-extract-card__status--pending {\n background: #F1F5F9;\n color: #64748B;\n}\n\n.oc-extract-card__status--queued {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.oc-extract-card__status--running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.oc-extract-card__status--completed {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.oc-extract-card__status--failed {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.oc-extract-card__progress-text {\n font-weight: 500;\n opacity: 0.8;\n}\n\n/* Spinning animation for running status */\n@keyframes oc-extract-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.oc-extract-card__status-icon--spinning {\n animation: oc-extract-spin 1s linear infinite;\n}\n\n/* Corpus badge */\n.oc-extract-card__corpus {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-extract-card__corpus::before {\n content: 'from ';\n opacity: 0.7;\n}\n\n/* Name */\n.oc-extract-card__name {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 4px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-extract-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Progress bar */\n.oc-extract-card__progress-bar {\n height: 4px;\n background: var(--oc-bg-surface-hover, #E2E8F0);\n border-radius: 2px;\n overflow: hidden;\n margin-bottom: 12px;\n}\n\n.oc-extract-card__progress-fill {\n height: 100%;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* Footer */\n.oc-extract-card__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n/* Stats */\n.oc-extract-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-secondary, #64748B);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-extract-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-extract-card__stats span:not(:last-child)::after {\n content: '\\00B7';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Time */\n.oc-extract-card__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Menu */\n.oc-extract-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-extract-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* ============================================\n ExtractList Component\n ============================================ */\n\n.oc-extract-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-extract-list--gap-sm {\n gap: 12px;\n}\n\n.oc-extract-list--gap-md {\n gap: 16px;\n}\n\n.oc-extract-list--gap-lg {\n gap: 24px;\n}\n\n/* Grid layout */\n.oc-extract-list--grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-extract-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-extract-card__icon {\n width: 36px;\n height: 36px;\n }\n\n .oc-extract-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-extract-card__name {\n font-size: 15px;\n }\n\n .oc-extract-card__description {\n font-size: 13px;\n }\n\n .oc-extract-card__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-extract-list--grid {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n/* ============================================\n DataGrid Component\n ============================================ */\n\n.oc-data-grid {\n position: relative;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: auto;\n}\n\n.oc-data-grid__table {\n width: 100%;\n min-width: max-content;\n border-collapse: collapse;\n font-size: 14px;\n}\n\n/* Header */\n.oc-data-grid__header {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-data-grid--sticky-header .oc-data-grid__header {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.oc-data-grid__th {\n padding: 14px 16px;\n text-align: left;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #64748B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-data-grid__th--sortable {\n cursor: pointer;\n transition: color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-data-grid__th--checkbox,\n.oc-data-grid__th--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__th--center {\n text-align: center;\n}\n\n.oc-data-grid__th--right {\n text-align: right;\n}\n\n.oc-data-grid__th-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-data-grid__sort-icon {\n opacity: 0.5;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover .oc-data-grid__sort-icon {\n opacity: 1;\n}\n\n/* Body */\n.oc-data-grid__body {\n /* Body styles */\n}\n\n.oc-data-grid__row {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n transition: background-color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:last-child {\n border-bottom: none;\n}\n\n.oc-data-grid__row:hover {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid__row--clickable {\n cursor: pointer;\n}\n\n.oc-data-grid__row--selected {\n background: rgba(232, 90, 79, 0.06);\n}\n\n.oc-data-grid__row--selected:hover {\n background: rgba(232, 90, 79, 0.1);\n}\n\n/* Striped */\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even):hover {\n background: #F1F5F9;\n}\n\n/* Cells */\n.oc-data-grid__cell {\n padding: 14px 16px;\n color: var(--oc-fg-primary, #1E293B);\n vertical-align: middle;\n}\n\n.oc-data-grid__cell--checkbox,\n.oc-data-grid__cell--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__cell--center {\n text-align: center;\n}\n\n.oc-data-grid__cell--right {\n text-align: right;\n}\n\n.oc-data-grid__cell--number {\n font-variant-numeric: tabular-nums;\n}\n\n.oc-data-grid__cell-content {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Compact mode */\n.oc-data-grid--compact .oc-data-grid__th {\n padding: 10px 12px;\n}\n\n.oc-data-grid--compact .oc-data-grid__cell {\n padding: 10px 12px;\n}\n\n/* Checkbox styling */\n.oc-data-grid__checkbox-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.oc-data-grid__checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.oc-data-grid__checkbox-custom {\n width: 18px;\n height: 18px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n border-radius: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n transition: all var(--oc-duration-fast, 0.15s);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-data-grid__checkbox-custom::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transform: scale(0);\n transition: transform var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n height: 3px;\n border-radius: 1px;\n}\n\n.oc-data-grid__checkbox:focus-visible + .oc-data-grid__checkbox-custom {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Boolean check */\n.oc-data-grid__boolean-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #D1FAE5;\n color: #065F46;\n}\n\n/* Links */\n.oc-data-grid__link {\n color: var(--oc-accent, #E85A4F);\n text-decoration: none;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__link:hover {\n opacity: 0.8;\n text-decoration: underline;\n}\n\n/* Cell actions */\n.oc-data-grid__cell-action-wrapper {\n position: relative;\n margin-left: auto;\n}\n\n.oc-data-grid__cell-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n opacity: 0;\n transition: all var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:hover .oc-data-grid__cell-action-btn,\n.oc-data-grid__cell-action-btn[aria-expanded=\"true\"] {\n opacity: 1;\n}\n\n.oc-data-grid__cell-action-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Cell menu */\n.oc-data-grid__cell-menu {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 20;\n min-width: 160px;\n margin-top: 4px;\n padding: 6px 0;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.oc-data-grid__cell-menu-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n background: transparent;\n border: none;\n font-size: 14px;\n color: var(--oc-fg-primary, #334155);\n text-align: left;\n cursor: pointer;\n transition: background var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__cell-menu-item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-data-grid__cell-menu-item--danger {\n color: #DC2626;\n}\n\n.oc-data-grid__cell-menu-item--danger:hover {\n background: #FEF2F2;\n}\n\n.oc-data-grid__cell-menu-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n}\n\n/* Empty state */\n.oc-data-grid__empty {\n padding: 48px 24px;\n text-align: center;\n}\n\n.oc-data-grid__empty-default {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-data-grid__empty-default p {\n margin: 0;\n font-size: 15px;\n}\n\n/* Loading skeleton */\n.oc-data-grid__row--skeleton {\n pointer-events: none;\n}\n\n.oc-data-grid__skeleton {\n height: 16px;\n background: linear-gradient(\n 90deg,\n var(--oc-bg-surface-hover, #F1F5F9) 0%,\n #E2E8F0 50%,\n var(--oc-bg-surface-hover, #F1F5F9) 100%\n );\n background-size: 200% 100%;\n border-radius: 4px;\n animation: oc-data-grid-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-data-grid-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-data-grid {\n border-radius: var(--oc-radius-md, 8px);\n }\n\n .oc-data-grid__th {\n padding: 12px;\n font-size: 11px;\n }\n\n .oc-data-grid__cell {\n padding: 12px;\n font-size: 13px;\n }\n\n .oc-data-grid__cell-action-btn {\n opacity: 1;\n }\n}\n\n";
|
|
2458
|
+
declare const allStyles = "\n/* OpenContracts Design System - All Component Styles */\n\n/* Base utilities, tokens, and shared keyframes (must be first) */\n\n/* ============================================\n CSS Custom Properties - Design Tokens\n ============================================ */\n:root {\n /* ===========================================\n COLOR SYSTEM - Professional Legal Theme\n =========================================== */\n\n /* Accent: Deep Teal - professional, authoritative */\n --oc-accent: #0F766E;\n --oc-accent-hover: #0D9488;\n --oc-accent-active: #115E59;\n\n /* Foreground: Slate scale */\n --oc-fg-primary: #1E293B;\n --oc-fg-secondary: #475569;\n --oc-fg-tertiary: #94A3B8;\n --oc-fg-inverse: #FFFFFF;\n\n /* Background: Warm neutral surfaces */\n --oc-bg-canvas: #FAFAFA;\n --oc-bg-surface: #FFFFFF;\n --oc-bg-surface-hover: #F8FAFC;\n --oc-bg-subtle: #F1F5F9;\n --oc-bg-sidebar: #0F172A;\n\n /* Borders: Cool slate */\n --oc-border-default: #E2E8F0;\n --oc-border-strong: #CBD5E1;\n\n /* Semantic colors */\n --oc-success: #059669;\n --oc-warning: #D97706;\n --oc-error: #DC2626;\n --oc-success-bg: #ECFDF5;\n --oc-warning-bg: #FFFBEB;\n --oc-error-bg: #FEF2F2;\n\n /* ===========================================\n SPACING\n =========================================== */\n --oc-spacing-xs: 4px;\n --oc-spacing-sm: 8px;\n --oc-spacing-md: 16px;\n --oc-spacing-lg: 24px;\n --oc-spacing-xl: 32px;\n --oc-spacing-2xl: 48px;\n\n /* ===========================================\n RADIUS - Refined, slightly softer corners\n =========================================== */\n --oc-radius-sm: 6px;\n --oc-radius-md: 8px;\n --oc-radius-lg: 12px;\n --oc-radius-full: 9999px;\n\n /* ===========================================\n TYPOGRAPHY\n =========================================== */\n --oc-font-size-xs: 11px;\n --oc-font-size-sm: 13px;\n --oc-font-size-md: 15px;\n --oc-font-size-lg: 17px;\n --oc-font-size-xl: 20px;\n --oc-font-size-2xl: 24px;\n --oc-font-size-3xl: 32px;\n\n /* Line heights */\n --oc-line-height-tight: 1.25;\n --oc-line-height-normal: 1.5;\n --oc-line-height-relaxed: 1.75;\n\n /* ===========================================\n ANIMATION\n =========================================== */\n --oc-duration-fast: 0.15s;\n --oc-duration-normal: 0.2s;\n --oc-duration-slow: 0.3s;\n --oc-duration-spin: 0.8s;\n\n /* Easing curves */\n --oc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);\n --oc-easing-enter: cubic-bezier(0, 0, 0.2, 1);\n --oc-easing-exit: cubic-bezier(0.4, 0, 1, 1);\n --oc-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n /* ===========================================\n Z-INDEX SCALE\n =========================================== */\n --oc-z-dropdown: 100;\n --oc-z-sticky: 200;\n --oc-z-overlay: 300;\n --oc-z-modal: 400;\n --oc-z-popover: 500;\n --oc-z-tooltip: 600;\n\n /* ===========================================\n OPACITY\n =========================================== */\n --oc-opacity-disabled: 0.5;\n --oc-opacity-loading: 0.7;\n --oc-opacity-hover: 0.04;\n --oc-opacity-focus-ring: 0.2;\n --oc-opacity-overlay: 0.6;\n\n /* Breakpoints (for reference in JS, media queries use values directly) */\n --oc-breakpoint-sm: 640px;\n --oc-breakpoint-md: 768px;\n --oc-breakpoint-lg: 1024px;\n --oc-breakpoint-xl: 1280px;\n\n /* ===========================================\n SHADOWS - Subtle, clean\n =========================================== */\n --oc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);\n --oc-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.03);\n --oc-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.04);\n --oc-shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 20px 25px rgba(15, 23, 42, 0.05);\n --oc-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n --oc-shadow-accent: 0 4px 14px rgba(15, 118, 110, 0.2);\n --oc-shadow-accent-lg: 0 8px 24px rgba(15, 118, 110, 0.25);\n}\n\n/* ============================================\n Focus Ring Utility\n ============================================ */\n.oc-focus-ring:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Focus ring with glow effect (for inputs, etc.) */\n.oc-focus-glow:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(15, 118, 110, var(--oc-opacity-focus-ring, 0.15));\n}\n\n/* ============================================\n Disabled State Utility\n ============================================ */\n.oc-disabled,\n[disabled] {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ============================================\n Loading State Utility\n ============================================ */\n.oc-loading {\n cursor: wait;\n pointer-events: none;\n}\n\n.oc-loading > * {\n opacity: var(--oc-opacity-loading, 0.7);\n}\n\n/* ============================================\n Shared Keyframe Animations\n ============================================ */\n\n/* Spinner rotation - used by Button, IconButton, Progress, SearchInput */\n@keyframes oc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Fade in with slight scale - used by Modal, Tooltip, Popover */\n@keyframes oc-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Fade out with slight scale */\n@keyframes oc-fade-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* Slide up fade - used by chat messages, toasts */\n@keyframes oc-slide-up-fade {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Slide down fade - for dropdowns */\n@keyframes oc-slide-down-fade {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Pulse animation - for skeleton loading, thinking indicators */\n@keyframes oc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Bounce animation - for typing indicators */\n@keyframes oc-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-8px);\n }\n}\n\n/* Shimmer animation - for skeleton loading */\n@keyframes oc-shimmer {\n from { transform: translateX(-100%); }\n to { transform: translateX(100%); }\n}\n\n/* ============================================\n Transition Utilities\n ============================================ */\n.oc-transition-fast {\n transition-duration: var(--oc-duration-fast, 0.15s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-normal {\n transition-duration: var(--oc-duration-normal, 0.25s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-slow {\n transition-duration: var(--oc-duration-slow, 0.4s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-spring {\n transition-timing-function: var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));\n}\n\n/* ============================================\n Flexbox Utilities\n ============================================ */\n.oc-flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-flex-between {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.oc-flex-start {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* ============================================\n Text Utilities\n ============================================ */\n.oc-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ============================================\n Accessibility: Reduced Motion\n ============================================ */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* ============================================\n Screen Reader Only\n ============================================ */\n.oc-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* ============================================\n Premium Polish Effects\n ============================================ */\n\n/* Frosted glass overlay effect */\n.oc-frosted {\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n.oc-frosted-light {\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n/* Interactive lift effect on hover */\n.oc-lift {\n transition: transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-lift:hover {\n transform: translateY(-2px);\n}\n\n/* Press effect */\n.oc-press:active {\n transform: translateY(1px);\n}\n\n/* Focus glow effect for inputs */\n.oc-focus-glow-input:focus-within {\n box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(15, 23, 42, 0.03)),\n 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Smooth color transitions */\n.oc-color-transition {\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n/* ============================================\n Typography Polish\n ============================================ */\n\n/* Professional font feature settings */\n.oc-text {\n font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Heading typography - tighter letter-spacing for polish */\n.oc-heading {\n font-feature-settings: 'kern' 1, 'liga' 1;\n letter-spacing: -0.02em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Small caps for labels */\n.oc-label {\n font-feature-settings: 'kern' 1, 'smcp' 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* Tabular numbers for data */\n.oc-tabular {\n font-feature-settings: 'tnum' 1, 'kern' 1;\n}\n\n/* ============================================\n Staggered List Animations\n ============================================ */\n\n/* Base stagger animation */\n@keyframes oc-stagger-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stagger animation utilities - apply to list items */\n.oc-stagger > * {\n animation: oc-stagger-in var(--oc-duration-normal, 0.25s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger > *:nth-child(6) { animation-delay: 250ms; }\n.oc-stagger > *:nth-child(7) { animation-delay: 300ms; }\n.oc-stagger > *:nth-child(8) { animation-delay: 350ms; }\n.oc-stagger > *:nth-child(9) { animation-delay: 400ms; }\n.oc-stagger > *:nth-child(10) { animation-delay: 450ms; }\n\n/* Fast stagger (25ms intervals) */\n.oc-stagger-fast > * {\n animation: oc-stagger-in var(--oc-duration-fast, 0.15s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-fast > *:nth-child(2) { animation-delay: 25ms; }\n.oc-stagger-fast > *:nth-child(3) { animation-delay: 50ms; }\n.oc-stagger-fast > *:nth-child(4) { animation-delay: 75ms; }\n.oc-stagger-fast > *:nth-child(5) { animation-delay: 100ms; }\n.oc-stagger-fast > *:nth-child(6) { animation-delay: 125ms; }\n.oc-stagger-fast > *:nth-child(7) { animation-delay: 150ms; }\n.oc-stagger-fast > *:nth-child(8) { animation-delay: 175ms; }\n.oc-stagger-fast > *:nth-child(9) { animation-delay: 200ms; }\n.oc-stagger-fast > *:nth-child(10) { animation-delay: 225ms; }\n\n/* Scale stagger - for cards/grid items */\n@keyframes oc-stagger-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.oc-stagger-scale > * {\n animation: oc-stagger-scale-in var(--oc-duration-normal, 0.25s) var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;\n}\n\n.oc-stagger-scale > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-scale > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger-scale > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger-scale > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger-scale > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger-scale > *:nth-child(6) { animation-delay: 250ms; }\n\n\n\n/* AppShell - Main Application Container */\n.oc-app-shell {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n background: var(--oc-bg-canvas);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-app-shell--fixed {\n height: 100vh;\n overflow: hidden;\n}\n\n/* AppShell Sidebar */\n.oc-app-shell-sidebar {\n --sidebar-width: 260px;\n position: relative;\n width: var(--sidebar-width);\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-surface);\n transition: width var(--oc-duration-normal) var(--oc-easing-default),\n margin var(--oc-duration-normal) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-app-shell-sidebar--bordered {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-sidebar--closed {\n width: 0;\n margin-left: calc(var(--sidebar-width) * -1);\n}\n\n.oc-app-shell-sidebar__content {\n width: var(--sidebar-width);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* AppShell Main */\n.oc-app-shell-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--oc-bg-canvas);\n}\n\n/* AppShell Header */\n.oc-app-shell-header {\n --header-height: 56px;\n height: var(--header-height);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: 0 var(--oc-spacing-lg);\n background: var(--oc-bg-canvas);\n}\n\n.oc-app-shell-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-header--fixed {\n position: sticky;\n top: 0;\n z-index: var(--oc-z-sticky);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n/* Layout composition helpers */\n.oc-app-shell > .oc-app-shell-header {\n order: -1;\n}\n\n/* Horizontal layout for sidebar + main */\n.oc-app-shell:has(.oc-app-shell-sidebar) {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.oc-app-shell:has(.oc-app-shell-sidebar) > .oc-app-shell-header {\n width: 100%;\n flex-basis: 100%;\n}\n\n/* Dark sidebar variant */\n.oc-app-shell-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n border-right-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n/* PageHeader Component */\n.oc-page-header {\n padding: var(--oc-spacing-lg) var(--oc-spacing-xl);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Breadcrumbs */\n.oc-page-header__breadcrumbs {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-breadcrumbs {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--oc-spacing-xs);\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-breadcrumbs__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-breadcrumbs__separator {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-breadcrumbs__link {\n color: var(--oc-fg-secondary);\n text-decoration: none;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n padding: 2px 0;\n}\n\n.oc-breadcrumbs__link:hover {\n color: var(--oc-accent);\n}\n\n.oc-breadcrumbs__current {\n color: var(--oc-fg-primary);\n font-weight: 500;\n}\n\n/* Header Row */\n.oc-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-lg);\n}\n\n.oc-page-header__content {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-md);\n min-width: 0;\n flex: 1;\n}\n\n.oc-page-header__back {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n margin-top: 2px;\n}\n\n.oc-page-header__back:hover {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n color: var(--oc-fg-primary);\n}\n\n.oc-page-header__text {\n min-width: 0;\n}\n\n.oc-page-header__title {\n margin: 0;\n font-size: var(--oc-font-size-2xl);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-page-header__subtitle {\n margin: var(--oc-spacing-xs) 0 0;\n font-size: var(--oc-font-size-md);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-page-header__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n}\n\n/* Tabs */\n.oc-page-header__tabs {\n margin-top: var(--oc-spacing-lg);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* Compact variant */\n.oc-page-header--compact {\n padding: var(--oc-spacing-md) var(--oc-spacing-lg);\n}\n\n.oc-page-header--compact .oc-page-header__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Bordered variant */\n.oc-page-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* With accent bar */\n.oc-page-header--accent {\n position: relative;\n}\n\n.oc-page-header--accent::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--oc-accent);\n}\n\n\n\n/* SplitPane Component */\n.oc-split-pane {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-split-pane--horizontal {\n flex-direction: row;\n}\n\n.oc-split-pane--vertical {\n flex-direction: column;\n}\n\n.oc-split-pane--dragging {\n user-select: none;\n}\n\n/* Panes */\n.oc-split-pane__pane {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.oc-split-pane__pane--first {\n flex-shrink: 0;\n}\n\n.oc-split-pane__pane--second {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n\n/* Handle */\n.oc-split-pane__handle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal > .oc-split-pane__handle {\n width: 8px;\n cursor: col-resize;\n}\n\n.oc-split-pane--vertical > .oc-split-pane__handle {\n height: 8px;\n cursor: row-resize;\n}\n\n.oc-split-pane__handle:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n}\n\n.oc-split-pane__handle-bar {\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal .oc-split-pane__handle-bar {\n width: 2px;\n height: 32px;\n}\n\n.oc-split-pane--vertical .oc-split-pane__handle-bar {\n height: 2px;\n width: 32px;\n}\n\n.oc-split-pane__handle:hover .oc-split-pane__handle-bar,\n.oc-split-pane--dragging .oc-split-pane__handle-bar {\n background: var(--oc-accent);\n}\n\n/* Generic Pane */\n.oc-pane {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Panel with header pattern */\n.oc-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-panel__header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm, 8px) var(--oc-spacing-md, 16px);\n border-bottom: 1px solid var(--oc-border-default, #E5E5E5);\n min-height: 48px;\n}\n\n.oc-panel__title {\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-panel__content {\n flex: 1;\n overflow: auto;\n}\n\n\n\n/* Stack Component */\n.oc-stack {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Spacer */\n.oc-spacer {\n flex: 1;\n}\n\n/* Divider */\n.oc-divider {\n flex-shrink: 0;\n background: var(--oc-border-default, #E5E5E5);\n}\n\n.oc-divider--horizontal {\n height: 1px;\n width: 100%;\n}\n\n.oc-divider--vertical {\n width: 1px;\n align-self: stretch;\n}\n\n/* Box - generic container with padding */\n.oc-box {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-box--padding-none { padding: 0; }\n.oc-box--padding-xs { padding: var(--oc-spacing-xs, 4px); }\n.oc-box--padding-sm { padding: var(--oc-spacing-sm, 8px); }\n.oc-box--padding-md { padding: var(--oc-spacing-md, 16px); }\n.oc-box--padding-lg { padding: var(--oc-spacing-lg, 24px); }\n.oc-box--padding-xl { padding: var(--oc-spacing-xl, 32px); }\n\n/* Center - center content both ways */\n.oc-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Container - max-width constrained container */\n.oc-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--oc-spacing-md, 16px);\n padding-right: var(--oc-spacing-md, 16px);\n}\n\n.oc-container--sm { max-width: 640px; }\n.oc-container--md { max-width: 768px; }\n.oc-container--lg { max-width: 1024px; }\n.oc-container--xl { max-width: 1280px; }\n.oc-container--full { max-width: 100%; }\n\n\n\n/* ScrollArea Component */\n.oc-scroll-area {\n position: relative;\n overflow: hidden;\n}\n\n/* Scroll behavior */\n.oc-scroll-area--vertical {\n overflow-y: auto;\n}\n\n.oc-scroll-area--horizontal {\n overflow-x: auto;\n}\n\n.oc-scroll-area--vertical.oc-scroll-area--horizontal {\n overflow: auto;\n}\n\n/* Type variants */\n.oc-scroll-area--auto {\n overflow-y: auto;\n}\n\n.oc-scroll-area--always {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--scroll {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--hover {\n overflow-y: hidden;\n}\n\n.oc-scroll-area--hover:hover {\n overflow-y: auto;\n}\n\n/* Custom styled scrollbars */\n.oc-scroll-area--styled {\n scrollbar-width: thin;\n scrollbar-color: var(--oc-border-strong, #CCCCCC) transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb {\n background: var(--oc-border-strong, #CCCCCC);\n border-radius: 4px;\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb:hover {\n background: var(--oc-fg-tertiary, #9B9B9B);\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Thin scrollbar variant */\n.oc-scroll-area--thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n/* Dark mode scrollbar */\n.oc-scroll-area--dark {\n scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n\n\n\n/* Card Component */\n.oc-card {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Variants */\n.oc-card--elevated {\n box-shadow: var(--oc-shadow-md);\n}\n\n.oc-card--flat {\n box-shadow: none;\n}\n\n.oc-card--outlined {\n box-shadow: none;\n border: 1px solid var(--oc-border-default);\n}\n\n/* Padding */\n.oc-card--padding-none {\n padding: 0;\n}\n\n.oc-card--padding-sm {\n padding: var(--oc-spacing-sm);\n}\n\n.oc-card--padding-md {\n padding: var(--oc-spacing-md);\n}\n\n.oc-card--padding-lg {\n padding: var(--oc-spacing-lg);\n}\n\n/* Interactive */\n.oc-card--interactive {\n cursor: pointer;\n transition: box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n transform var(--oc-duration-fast) var(--oc-easing-default),\n border-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-card--interactive:hover {\n box-shadow: var(--oc-shadow-lg);\n transform: translateY(-2px);\n}\n\n.oc-card--interactive.oc-card--outlined:hover {\n border-color: var(--oc-border-strong);\n}\n\n.oc-card--interactive:active {\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Card Header */\n.oc-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-card-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-card-header__title {\n font-size: var(--oc-font-size-lg);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-card-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-card-header__action {\n flex-shrink: 0;\n}\n\n/* Card Body */\n.oc-card-body {\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Card Footer */\n.oc-card-footer {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n margin-top: var(--oc-spacing-md);\n padding-top: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n}\n\n\n\n/* Sidebar Component */\n.oc-sidebar {\n display: flex;\n flex-direction: column;\n width: 260px;\n height: 100%;\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: width var(--oc-duration-normal) var(--oc-easing-default);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-sidebar--collapsed {\n width: 64px;\n}\n\n/* Sidebar Header */\n.oc-sidebar-header {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n min-height: 56px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-sidebar-header__logo {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-accent);\n border-radius: var(--oc-radius-md);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-header__title {\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n/* Sidebar Nav */\n.oc-sidebar-nav {\n flex: 1;\n overflow-y: auto;\n padding: var(--oc-spacing-sm);\n}\n\n/* Sidebar Section */\n.oc-sidebar-section {\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-sidebar-section:first-child {\n margin-top: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__title {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary);\n padding: var(--oc-spacing-sm);\n margin-bottom: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Sidebar Item */\n.oc-sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n position: relative;\n}\n\n.oc-sidebar-item:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active:hover {\n background: var(--oc-accent-hover);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-sidebar-item--disabled:hover {\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-sidebar-item__icon {\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon,\n.oc-sidebar-item--active:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item__label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-sidebar-item__badge {\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__badge {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Sidebar Footer */\n.oc-sidebar-footer {\n padding: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n margin-top: auto;\n}\n\n/* Dark variant */\n.oc-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-header {\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.oc-sidebar--dark .oc-sidebar-header__title {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-section__title {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.oc-sidebar--dark .oc-sidebar-item {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover {\n background: rgba(255, 255, 255, 0.08);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.oc-sidebar--dark .oc-sidebar-footer {\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n\n\n\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n\n\n\n/* Tooltip Trigger */\n.oc-tooltip-trigger {\n display: inline-flex;\n}\n\n/* Tooltip */\n.oc-tooltip {\n position: absolute;\n z-index: var(--oc-z-tooltip);\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: var(--oc-font-size-xs);\n border-radius: var(--oc-radius-md);\n white-space: nowrap;\n pointer-events: none;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-tooltip--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-tooltip--bottom {\n transform: translateX(-50%);\n}\n\n.oc-tooltip--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-tooltip--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Popover Trigger */\n.oc-popover-trigger {\n display: inline-flex;\n}\n\n/* Popover */\n.oc-popover {\n position: absolute;\n z-index: var(--oc-z-popover, 1000);\n min-width: 200px;\n padding: var(--oc-spacing-md);\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1));\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-popover-fade-in 0.15s ease-out;\n}\n\n@keyframes oc-popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Placement */\n.oc-popover--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-popover--bottom {\n transform: translateX(-50%);\n}\n\n.oc-popover--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-popover--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Avatar Component */\n.oc-avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: linear-gradient(135deg, #E5E5E5 0%, #D4D4D4 100%);\n color: var(--oc-fg-secondary, #6B6B6B);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 600;\n overflow: hidden;\n flex-shrink: 0;\n user-select: none;\n}\n\n.oc-avatar--square {\n border-radius: var(--oc-radius-md, 8px);\n}\n\n/* Sizes */\n.oc-avatar--xs { font-size: 10px; }\n.oc-avatar--sm { font-size: 12px; }\n.oc-avatar--md { font-size: 14px; }\n.oc-avatar--lg { font-size: 16px; }\n.oc-avatar--xl { font-size: 20px; }\n\n/* Accent variant (for AI/system) */\n.oc-avatar--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n/* Image */\n.oc-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Fallback */\n.oc-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n/* Status indicator */\n.oc-avatar__status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n border-radius: 50%;\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n.oc-avatar__status--online {\n background: var(--oc-success, #10B981);\n}\n\n.oc-avatar__status--offline {\n background: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-avatar__status--busy {\n background: var(--oc-error, #EF4444);\n}\n\n.oc-avatar__status--away {\n background: var(--oc-warning, #F59E0B);\n}\n\n/* AI Avatar */\n.oc-avatar--ai {\n background: var(--oc-accent);\n animation: oc-avatar-ai-pulse 3s ease-in-out infinite;\n}\n\n@keyframes oc-avatar-ai-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(8, 145, 178, 0);\n }\n}\n\n.oc-avatar__ai-icon {\n width: 60%;\n height: 60%;\n}\n\n/* Avatar Group */\n.oc-avatar-group {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-avatar-group__item {\n margin-left: -8px;\n}\n\n.oc-avatar-group__item:first-child {\n margin-left: 0;\n}\n\n.oc-avatar-group__item .oc-avatar {\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n\n\n/* Chip Component */\n.oc-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-chip--static {\n cursor: default;\n}\n\n/* Sizes */\n.oc-chip--sm {\n height: 24px;\n padding: 0 10px;\n font-size: 12px;\n}\n\n.oc-chip--md {\n height: 32px;\n padding: 0 14px;\n font-size: 13px;\n}\n\n.oc-chip--lg {\n height: 40px;\n padding: 0 18px;\n font-size: 14px;\n}\n\n/* Icons */\n.oc-chip__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-chip--sm .oc-chip__icon { margin-left: -2px; }\n.oc-chip--md .oc-chip__icon { margin-left: -4px; }\n.oc-chip--lg .oc-chip__icon { margin-left: -4px; }\n\n.oc-chip__icon--end {\n margin-left: 0 !important;\n}\n\n.oc-chip--sm .oc-chip__icon--end { margin-right: -2px; }\n.oc-chip--md .oc-chip__icon--end { margin-right: -4px; }\n.oc-chip--lg .oc-chip__icon--end { margin-right: -4px; }\n\n/* Label */\n.oc-chip__label {\n display: flex;\n align-items: center;\n}\n\n/* Remove button */\n.oc-chip__remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin-left: 2px;\n border: none;\n background: transparent;\n color: inherit;\n opacity: 0.6;\n cursor: pointer;\n border-radius: 50%;\n transition: opacity 0.15s ease, background 0.15s ease;\n}\n\n.oc-chip--sm .oc-chip__remove { margin-right: -4px; width: 16px; height: 16px; }\n.oc-chip--md .oc-chip__remove { margin-right: -6px; width: 20px; height: 20px; }\n.oc-chip--lg .oc-chip__remove { margin-right: -6px; width: 24px; height: 24px; }\n\n.oc-chip__remove:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n/* ========== VARIANTS ========== */\n\n/* Filled */\n.oc-chip--filled.oc-chip--default {\n background: var(--oc-fg-primary, #1A1A1A);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chip--filled.oc-chip--success {\n background: linear-gradient(135deg, var(--oc-success, #10B981) 0%, #059669 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--warning {\n background: linear-gradient(135deg, var(--oc-warning, #F59E0B) 0%, #D97706 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--error {\n background: linear-gradient(135deg, var(--oc-error, #EF4444) 0%, #DC2626 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--info {\n background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);\n color: white;\n}\n\n/* Soft */\n.oc-chip--soft.oc-chip--default {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chip--soft.oc-chip--accent {\n background: rgba(8, 145, 178, 0.1);\n color: var(--oc-accent);\n}\n\n.oc-chip--soft.oc-chip--success {\n background: var(--oc-success-bg, #ECFDF5);\n color: #059669;\n}\n\n.oc-chip--soft.oc-chip--warning {\n background: var(--oc-warning-bg, #FFFBEB);\n color: #B45309;\n}\n\n.oc-chip--soft.oc-chip--error {\n background: var(--oc-error-bg, #FEF2F2);\n color: #DC2626;\n}\n\n.oc-chip--soft.oc-chip--info {\n background: #EFF6FF;\n color: #2563EB;\n}\n\n/* Outlined */\n.oc-chip--outlined {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E5E5E5);\n}\n\n.oc-chip--outlined.oc-chip--default {\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n.oc-chip--outlined.oc-chip--accent {\n box-shadow: inset 0 0 0 1px var(--oc-accent);\n color: var(--oc-accent);\n}\n\n.oc-chip--outlined.oc-chip--success {\n box-shadow: inset 0 0 0 1px var(--oc-success, #10B981);\n color: #059669;\n}\n\n.oc-chip--outlined.oc-chip--warning {\n box-shadow: inset 0 0 0 1px var(--oc-warning, #F59E0B);\n color: #B45309;\n}\n\n.oc-chip--outlined.oc-chip--error {\n box-shadow: inset 0 0 0 1px var(--oc-error, #EF4444);\n color: #DC2626;\n}\n\n.oc-chip--outlined.oc-chip--info {\n box-shadow: inset 0 0 0 1px #3B82F6;\n color: #2563EB;\n}\n\n/* Hover states */\n.oc-chip:not(.oc-chip--static):hover {\n transform: translateY(-1px);\n}\n\n.oc-chip--soft:not(.oc-chip--static):hover {\n filter: brightness(0.95);\n}\n\n.oc-chip--outlined:not(.oc-chip--static):hover {\n background: var(--oc-bg-surface, #F8F8F8);\n}\n\n.oc-chip--filled:not(.oc-chip--static):hover {\n filter: brightness(1.05);\n}\n\n/* Selected state */\n.oc-chip--selected {\n box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);\n}\n\n/* Active state */\n.oc-chip:not(.oc-chip--static):active {\n transform: translateY(0);\n}\n\n/* Chip Group */\n.oc-chip-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.oc-chip-group--gap-sm {\n gap: 6px;\n}\n\n.oc-chip-group--gap-md {\n gap: 10px;\n}\n\n\n\n/* Source Card */\n.oc-source-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-lg, 12px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: all 0.15s ease;\n}\n\n.oc-source-card--clickable {\n cursor: pointer;\n}\n\n.oc-source-card--clickable:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.oc-source-card--inline {\n padding: 8px 12px;\n display: inline-flex;\n gap: 8px;\n}\n\n/* Document icon */\n.oc-source__icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 8px);\n background: linear-gradient(135deg, var(--icon-color, #6B6B6B) 0%, color-mix(in srgb, var(--icon-color, #6B6B6B), black 20%) 100%);\n color: white;\n position: relative;\n}\n\n.oc-source-card--inline .oc-source__icon {\n width: 32px;\n height: 32px;\n}\n\n.oc-source__icon svg {\n opacity: 0.3;\n}\n\n.oc-source__icon-label {\n position: absolute;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.05em;\n}\n\n/* Content */\n.oc-source-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-source-card__header {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-source-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-card__ref {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n white-space: nowrap;\n}\n\n.oc-source-card__excerpt {\n margin: 6px 0 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Score */\n.oc-source-card__score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.oc-source-card__score-bar {\n width: 40px;\n height: 4px;\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-source-card__score-bar::after {\n content: '';\n display: block;\n width: var(--score, 0%);\n height: 100%;\n background: var(--oc-accent);\n border-radius: 2px;\n}\n\n.oc-source-card__score-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Arrow */\n.oc-source-card__arrow {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.15s ease;\n}\n\n.oc-source-card--clickable:hover .oc-source-card__arrow {\n transform: translateX(2px);\n color: var(--oc-accent);\n}\n\n/* Source Pill */\n.oc-source-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 28px;\n padding: 0 10px;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E5E5E5);\n border-radius: var(--oc-radius-md, 8px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-source-pill:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n border-color: var(--pill-color, var(--oc-border-strong, #CCCCCC));\n}\n\n.oc-source-pill__icon {\n display: flex;\n color: var(--pill-color, var(--oc-fg-tertiary, #9B9B9B));\n}\n\n.oc-source-pill__name {\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n max-width: 120px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-pill__ref {\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-weight: 400;\n}\n\n/* Source List */\n.oc-source-list {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-source-list__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.oc-source-list__title {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #6B6B6B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-source-list__count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-source-list__items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n/* Citation marker */\n.oc-citation {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin: 0 2px;\n background: var(--oc-accent);\n color: white;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n font-weight: 600;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n transition: all 0.15s ease;\n box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);\n}\n\n.oc-citation:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4);\n}\n\n\n\n/* ============ Chat Container ============ */\n.oc-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ============ Chat Message ============ */\n.oc-chat-message {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: oc-message-in 0.3s ease;\n}\n\n@keyframes oc-message-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-chat-message__avatar {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.oc-chat-message__container {\n flex: 1;\n min-width: 0;\n max-width: 720px;\n}\n\n/* User messages */\n.oc-chat-message--user {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message--user .oc-chat-message__container {\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n}\n\n/* Header */\n.oc-chat-message__header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-chat-message--user .oc-chat-message__header {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message__name {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Bubble */\n.oc-chat-message__bubble {\n position: relative;\n padding: 14px 18px;\n border-radius: 18px;\n line-height: 1.6;\n}\n\n.oc-chat-message--assistant .oc-chat-message__bubble {\n background: var(--oc-bg-surface, #F8F8F8);\n border-top-left-radius: 4px;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message--user .oc-chat-message__bubble {\n background: var(--oc-accent);\n border-top-right-radius: 4px;\n color: white;\n box-shadow: 0 2px 12px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chat-message--system .oc-chat-message__bubble {\n background: transparent;\n padding: 8px 0;\n text-align: center;\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-size: 13px;\n}\n\n.oc-chat-message__content {\n font-size: 15px;\n}\n\n.oc-chat-message__content p {\n margin: 0 0 12px;\n}\n\n.oc-chat-message__content p:last-child {\n margin-bottom: 0;\n}\n\n/* Streaming cursor */\n.oc-chat-message__cursor {\n display: inline-block;\n width: 2px;\n height: 1.1em;\n background: var(--oc-accent);\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: oc-cursor-blink 1s ease infinite;\n}\n\n@keyframes oc-cursor-blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Actions */\n.oc-chat-message__actions {\n margin-top: 8px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-chat-message:hover .oc-chat-message__actions {\n opacity: 1;\n}\n\n/* Error state */\n.oc-chat-message__error {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 13px;\n color: var(--oc-error, #EF4444);\n}\n\n/* ============ Typing Indicator ============ */\n.oc-typing-indicator {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0;\n}\n\n.oc-typing-indicator__dots {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: 18px;\n border-top-left-radius: 4px;\n}\n\n.oc-typing-indicator__dot {\n width: 8px;\n height: 8px;\n background: var(--oc-fg-tertiary, #9B9B9B);\n border-radius: 50%;\n animation: oc-typing-bounce 1.4s ease infinite;\n}\n\n.oc-typing-indicator__dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.oc-typing-indicator__dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes oc-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n background: var(--oc-fg-tertiary);\n }\n 30% {\n transform: translateY(-8px);\n background: var(--oc-accent);\n }\n}\n\n.oc-typing-indicator__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n/* ============ Thinking Block ============ */\n.oc-thinking-block {\n background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);\n border: 1px solid rgba(8, 145, 178, 0.15);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n margin: 12px 0;\n}\n\n.oc-thinking-block__header {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n text-align: left;\n}\n\n.oc-thinking-block__indicator {\n display: flex;\n gap: 3px;\n}\n\n.oc-thinking-block__dot {\n width: 6px;\n height: 6px;\n background: var(--oc-accent);\n border-radius: 50%;\n animation: oc-thinking-pulse 1.5s ease infinite;\n}\n\n.oc-thinking-block__dot:nth-child(2) { animation-delay: 0.3s; }\n.oc-thinking-block__dot:nth-child(3) { animation-delay: 0.6s; }\n\n@keyframes oc-thinking-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.2); }\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__dot {\n animation: none;\n opacity: 0.5;\n}\n\n.oc-thinking-block__title {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent);\n}\n\n.oc-thinking-block__chevron {\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.2s ease;\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__chevron {\n transform: rotate(180deg);\n}\n\n.oc-thinking-block__content {\n padding: 0 16px 16px;\n font-size: 13px;\n color: var(--oc-fg-secondary);\n line-height: 1.6;\n border-top: 1px solid rgba(8, 145, 178, 0.1);\n margin-top: 0;\n padding-top: 12px;\n}\n\n/* ============ Task Card ============ */\n.oc-task-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n border-left: 3px solid var(--oc-border-default);\n}\n\n.oc-task-card--running {\n border-left-color: var(--oc-accent);\n background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, var(--oc-bg-surface) 100%);\n}\n\n.oc-task-card--completed {\n border-left-color: var(--oc-success, #10B981);\n}\n\n.oc-task-card--error {\n border-left-color: var(--oc-error, #EF4444);\n}\n\n.oc-task-card__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-task-card--pending .oc-task-card__icon { color: var(--oc-fg-tertiary); }\n.oc-task-card--running .oc-task-card__icon { color: var(--oc-accent); }\n.oc-task-card--completed .oc-task-card__icon { color: var(--oc-success); }\n.oc-task-card--error .oc-task-card__icon { color: var(--oc-error); }\n\n.oc-task-card__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(8, 145, 178, 0.2);\n border-top-color: var(--oc-accent);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n@keyframes oc-spin {\n to { transform: rotate(360deg); }\n}\n\n.oc-task-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-task-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-task-card__desc {\n font-size: 13px;\n color: var(--oc-fg-secondary);\n margin-top: 2px;\n}\n\n.oc-task-card__progress {\n margin-top: 8px;\n height: 4px;\n background: var(--oc-border-default);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-task-card__progress-bar {\n height: 100%;\n width: var(--progress, 0%);\n background: var(--oc-accent);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* ============ Message Actions ============ */\n.oc-message-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-action-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-action-button:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n}\n\n.oc-action-button--active {\n color: var(--oc-accent);\n}\n\n.oc-action-button--active:hover {\n color: var(--oc-accent);\n background: rgba(8, 145, 178, 0.1);\n}\n\n/* ============ Chat Input ============ */\n.oc-chat-input {\n flex-shrink: 0;\n padding: 16px 24px 24px;\n background: var(--oc-bg-canvas);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-chat-input__suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.oc-chat-input__container {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface);\n border-radius: 24px;\n border: 1px solid transparent;\n transition: all 0.2s ease;\n}\n\n.oc-chat-input__container:focus-within {\n background: var(--oc-bg-canvas);\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-chat-input__left,\n.oc-chat-input__right {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-chat-input__textarea {\n flex: 1;\n min-height: 24px;\n max-height: 200px;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n line-height: 1.5;\n color: var(--oc-fg-primary);\n resize: none;\n outline: none;\n}\n\n.oc-chat-input__textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-chat-input__send {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--oc-accent);\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n.oc-chat-input__send:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);\n}\n\n.oc-chat-input__send:disabled {\n background: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n box-shadow: none;\n cursor: not-allowed;\n}\n\n.oc-chat-input__spinner {\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n/* Loading state */\n.oc-chat-input--loading .oc-chat-input__container {\n opacity: 0.7;\n}\n\n\n\n/* Button */\n.oc-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n border: none;\n border-radius: var(--oc-radius-md);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.oc-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.oc-button--sm {\n height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-button--md {\n height: 36px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-button--lg {\n height: 44px;\n padding: 0 var(--oc-spacing-lg);\n font-size: var(--oc-font-size-md);\n}\n\n/* Primary variant - flat, modern */\n.oc-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n box-shadow: var(--oc-shadow-sm);\n}\n\n.oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-hover);\n box-shadow: var(--oc-shadow-md);\n transform: translateY(-1px);\n}\n\n.oc-button--primary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-active);\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Secondary variant */\n.oc-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-button--secondary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-button--secondary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Ghost variant */\n.oc-button--ghost {\n background: transparent;\n color: var(--oc-fg-primary);\n}\n\n.oc-button--ghost:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n}\n\n.oc-button--ghost:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Danger variant */\n.oc-button--danger {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-button--danger:hover:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.9);\n}\n\n.oc-button--danger:active:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.85);\n}\n\n/* Link variant */\n.oc-button--link {\n background: transparent;\n color: var(--oc-accent);\n padding: 0;\n height: auto;\n}\n\n.oc-button--link:hover:not(:disabled):not(.oc-button--loading) {\n color: var(--oc-accent-hover);\n text-decoration: underline;\n}\n\n/* States */\n.oc-button--full-width {\n width: 100%;\n}\n\n.oc-button--disabled,\n.oc-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-button--loading {\n cursor: wait;\n}\n\n.oc-button--loading .oc-button__label {\n opacity: var(--oc-opacity-loading);\n}\n\n/* Button parts */\n.oc-button__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-button__spinner-icon {\n width: 16px;\n height: 16px;\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n.oc-button__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-button__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-button--lg .oc-button__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton */\n.oc-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-icon-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* IconButton sizes */\n.oc-icon-button--sm {\n width: 28px;\n height: 28px;\n}\n\n.oc-icon-button--md {\n width: 32px;\n height: 32px;\n}\n\n.oc-icon-button--lg {\n width: 40px;\n height: 40px;\n}\n\n.oc-icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-icon-button--lg svg {\n width: 20px;\n height: 20px;\n}\n\n/* IconButton variants */\n.oc-icon-button--ghost:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-icon-button--ghost:active:not(:disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-icon-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-icon-button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover);\n}\n\n.oc-icon-button--primary:active:not(:disabled) {\n background: var(--oc-accent-active);\n}\n\n.oc-icon-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-icon-button--secondary:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-icon-button--danger {\n color: var(--oc-error);\n}\n\n.oc-icon-button--danger:hover:not(:disabled) {\n background: var(--oc-error-bg);\n}\n\n.oc-icon-button--link {\n color: var(--oc-accent);\n}\n\n.oc-icon-button--link:hover:not(:disabled) {\n color: var(--oc-accent-hover);\n}\n\n.oc-icon-button--disabled,\n.oc-icon-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-icon-button--loading {\n cursor: wait;\n}\n\n.oc-icon-button__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* ButtonGroup */\n.oc-button-group {\n display: inline-flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-button-group--attached {\n gap: 0;\n}\n\n.oc-button-group--attached > .oc-button {\n border-radius: 0;\n}\n\n.oc-button-group--attached > .oc-button:first-child {\n border-radius: var(--oc-radius-md) 0 0 var(--oc-radius-md);\n}\n\n.oc-button-group--attached > .oc-button:last-child {\n border-radius: 0 var(--oc-radius-md) var(--oc-radius-md) 0;\n}\n\n.oc-button-group--attached > .oc-button--secondary:not(:first-child) {\n border-left: none;\n}\n\n\n\n/* Input wrapper */\n.oc-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-input-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Input container */\n.oc-input-container {\n display: flex;\n align-items: stretch;\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-input-container:focus-within {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-input-container--error {\n border-color: var(--oc-error);\n}\n\n.oc-input-container--error:focus-within {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-input-container--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-input-container--sm {\n min-height: 32px;\n}\n\n.oc-input-container--md {\n min-height: 36px;\n}\n\n.oc-input-container--lg {\n min-height: 44px;\n}\n\n/* Field wrapper */\n.oc-input-field {\n display: flex;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* Input element */\n.oc-input {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n padding: 0 var(--oc-spacing-sm);\n outline: none;\n}\n\n.oc-input-container--sm .oc-input {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-input-container--lg .oc-input {\n font-size: var(--oc-font-size-md);\n padding: 0 var(--oc-spacing-md);\n}\n\n.oc-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-input:disabled {\n cursor: not-allowed;\n}\n\n.oc-input--has-left-icon {\n padding-left: calc(var(--oc-spacing-sm) + 24px);\n}\n\n.oc-input--has-right-icon {\n padding-right: calc(var(--oc-spacing-sm) + 24px);\n}\n\n/* Icons */\n.oc-input-icon {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n pointer-events: none;\n}\n\n.oc-input-icon--left {\n left: var(--oc-spacing-sm);\n}\n\n.oc-input-icon--right {\n right: var(--oc-spacing-sm);\n}\n\n.oc-input-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Addons */\n.oc-input-addon {\n display: flex;\n align-items: center;\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n border-color: inherit;\n white-space: nowrap;\n}\n\n.oc-input-addon--left {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-input-addon--right {\n border-left: 1px solid var(--oc-border-default);\n}\n\n/* Helper and error text */\n.oc-input-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-input-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Textarea wrapper */\n.oc-textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-textarea-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-textarea-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Textarea element */\n.oc-textarea {\n width: 100%;\n padding: var(--oc-spacing-sm);\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n line-height: var(--oc-line-height-normal);\n color: var(--oc-fg-primary);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n resize: vertical;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-textarea:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-textarea--error {\n border-color: var(--oc-error);\n}\n\n.oc-textarea--error:focus {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-textarea--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n resize: none;\n}\n\n.oc-textarea--auto-resize {\n resize: none;\n overflow-y: hidden;\n}\n\n/* Helper and error text */\n.oc-textarea-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-textarea-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Select wrapper */\n.oc-select-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n position: relative;\n}\n\n.oc-select-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-select-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Trigger */\n.oc-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--sm {\n min-height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-select-trigger--md {\n min-height: 36px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-select-trigger--lg {\n min-height: 44px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-md);\n}\n\n.oc-select-trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--error {\n border-color: var(--oc-error);\n}\n\n.oc-select-trigger--error:focus,\n.oc-select-trigger--error.oc-select-trigger--open {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-select-trigger--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Value and placeholder */\n.oc-select-value {\n flex: 1;\n color: var(--oc-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-select-placeholder {\n flex: 1;\n color: var(--oc-fg-tertiary);\n}\n\n/* Search input */\n.oc-select-search {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-select-search::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Indicators */\n.oc-select-indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n}\n\n.oc-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n padding: 0;\n}\n\n.oc-select-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-select-chevron {\n color: var(--oc-fg-tertiary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger--open .oc-select-chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.oc-select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n list-style: none;\n}\n\n/* Option */\n.oc-select-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-option:hover,\n.oc-select-option--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-select-option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-select-option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-select-option--disabled:hover {\n background: transparent;\n}\n\n.oc-select-check {\n flex-shrink: 0;\n color: var(--oc-accent);\n}\n\n/* Option group */\n.oc-select-group {\n list-style: none;\n}\n\n.oc-select-group:not(:first-child) {\n margin-top: var(--oc-spacing-xs);\n padding-top: var(--oc-spacing-xs);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-select-group-label {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-select-group-options {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Empty state */\n.oc-select-empty {\n padding: var(--oc-spacing-md);\n text-align: center;\n color: var(--oc-fg-tertiary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* Helper and error text */\n.oc-select-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-select-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Checkbox wrapper */\n.oc-checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-checkbox-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-checkbox-wrapper--error .oc-checkbox-box {\n border-color: var(--oc-error);\n}\n\n/* Checkbox box */\n.oc-checkbox-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-sm);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-checkbox-box--checked,\n.oc-checkbox-box--indeterminate {\n background: var(--oc-accent);\n border-color: var(--oc-accent);\n}\n\n.oc-checkbox-wrapper:hover:not(.oc-checkbox-wrapper--disabled) .oc-checkbox-box:not(.oc-checkbox-box--checked):not(.oc-checkbox-box--indeterminate) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-checkbox-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-checkbox-input:focus-visible + .oc-checkbox-icon,\n.oc-checkbox-box:has(.oc-checkbox-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Check icon */\n.oc-checkbox-icon {\n width: 12px;\n height: 12px;\n color: var(--oc-fg-inverse);\n pointer-events: none;\n}\n\n/* Label */\n.oc-checkbox-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Checkbox group */\n.oc-checkbox-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-checkbox-group--vertical {\n flex-direction: column;\n}\n\n.oc-checkbox-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Radio wrapper */\n.oc-radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-radio-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-radio-wrapper--error .oc-radio-circle {\n border-color: var(--oc-error);\n}\n\n/* Radio circle */\n.oc-radio-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-full);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-radio-circle--checked {\n border-color: var(--oc-accent);\n}\n\n.oc-radio-wrapper:hover:not(.oc-radio-wrapper--disabled) .oc-radio-circle:not(.oc-radio-circle--checked) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-radio-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-radio-circle:has(.oc-radio-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Dot */\n.oc-radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n}\n\n/* Label */\n.oc-radio-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Radio group */\n.oc-radio-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-radio-group--vertical {\n flex-direction: column;\n}\n\n.oc-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Toggle wrapper */\n.oc-toggle-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-toggle-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Toggle track */\n.oc-toggle-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--oc-border-default);\n border-radius: var(--oc-radius-full);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-toggle-track--sm {\n width: 28px;\n height: 16px;\n}\n\n.oc-toggle-track--md {\n width: 36px;\n height: 20px;\n}\n\n.oc-toggle-track--lg {\n width: 44px;\n height: 24px;\n}\n\n.oc-toggle-track--checked {\n background: var(--oc-accent);\n}\n\n.oc-toggle-track--error {\n background: var(--oc-error);\n}\n\n.oc-toggle-wrapper:hover:not(.oc-toggle-wrapper--disabled) .oc-toggle-track:not(.oc-toggle-track--checked) {\n background: var(--oc-border-strong);\n}\n\n/* Hidden input */\n.oc-toggle-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-toggle-track:has(.oc-toggle-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Toggle thumb */\n.oc-toggle-thumb {\n position: absolute;\n background: var(--oc-fg-inverse);\n border-radius: var(--oc-radius-full);\n box-shadow: var(--oc-shadow-sm);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toggle-track--sm .oc-toggle-thumb {\n width: 12px;\n height: 12px;\n left: 2px;\n}\n\n.oc-toggle-track--md .oc-toggle-thumb {\n width: 16px;\n height: 16px;\n left: 2px;\n}\n\n.oc-toggle-track--lg .oc-toggle-thumb {\n width: 20px;\n height: 20px;\n left: 2px;\n}\n\n.oc-toggle-track--checked.oc-toggle-track--sm .oc-toggle-thumb {\n transform: translateX(12px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--md .oc-toggle-thumb {\n transform: translateX(16px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--lg .oc-toggle-thumb {\n transform: translateX(20px);\n}\n\n/* Content */\n.oc-toggle-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-toggle-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toggle-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n line-height: var(--oc-line-height-tight);\n}\n\n\n\n/* Form field */\n.oc-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Label */\n.oc-form-field__label {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-form-field__required {\n color: var(--oc-error);\n}\n\n.oc-form-field__optional {\n font-weight: 400;\n color: var(--oc-fg-tertiary);\n}\n\n/* Control */\n.oc-form-field__control {\n display: flex;\n flex-direction: column;\n}\n\n/* Helper text */\n.oc-form-field__helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n/* Error text */\n.oc-form-field__error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Toast container */\n.oc-toast-container {\n position: fixed;\n z-index: var(--oc-z-tooltip);\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n}\n\n.oc-toast-container--top-right {\n top: 0;\n right: 0;\n}\n\n.oc-toast-container--top-left {\n top: 0;\n left: 0;\n}\n\n.oc-toast-container--bottom-right {\n bottom: 0;\n right: 0;\n}\n\n.oc-toast-container--bottom-left {\n bottom: 0;\n left: 0;\n}\n\n.oc-toast-container--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.oc-toast-container--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* Toast */\n.oc-toast {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n pointer-events: auto;\n animation: oc-slide-up-fade var(--oc-duration-normal) var(--oc-easing-enter);\n}\n\n/* Toast icon */\n.oc-toast__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-toast--success .oc-toast__icon {\n color: var(--oc-success);\n}\n\n.oc-toast--error .oc-toast__icon {\n color: var(--oc-error);\n}\n\n.oc-toast--warning .oc-toast__icon {\n color: var(--oc-warning);\n}\n\n.oc-toast--info .oc-toast__icon {\n color: var(--oc-accent);\n}\n\n/* Toast content */\n.oc-toast__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-toast__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toast__description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n margin-top: 2px;\n}\n\n/* Toast action */\n.oc-toast__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n/* Toast close button */\n.oc-toast__close {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toast__close:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n\n\n/* Skeleton base */\n.oc-skeleton {\n background: var(--oc-bg-surface);\n display: block;\n}\n\n/* Variants */\n.oc-skeleton--text {\n height: 1em;\n border-radius: var(--oc-radius-sm);\n transform-origin: 0 55%;\n transform: scale(1, 0.8);\n}\n\n.oc-skeleton--circular {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-skeleton--rectangular {\n border-radius: 0;\n}\n\n.oc-skeleton--rounded {\n border-radius: var(--oc-radius-md);\n}\n\n/* Animations */\n.oc-skeleton--pulse {\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.oc-skeleton--wave {\n position: relative;\n overflow: hidden;\n}\n\n.oc-skeleton--wave::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.5),\n transparent\n );\n animation: oc-skeleton-wave 1.5s linear infinite;\n}\n\n@keyframes oc-skeleton-wave {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* Skeleton text */\n.oc-skeleton-text {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Document card skeleton */\n.oc-skeleton-document-card {\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n width: 200px;\n}\n\n.oc-skeleton-document-card__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm);\n}\n\n/* Table row skeleton */\n.oc-skeleton-table-row {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-skeleton-table-row > .oc-skeleton {\n flex: 1;\n}\n\n/* Chat message skeleton */\n.oc-skeleton-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-skeleton-chat-message__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n flex: 1;\n}\n\n\n\n/* Search input wrapper */\n.oc-search-input-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n\n.oc-search-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Search input container */\n.oc-search-input-container {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n min-height: 36px;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-container--focused {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n/* Search icon */\n.oc-search-input-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* Input field */\n.oc-search-input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n}\n\n.oc-search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Clear button */\n.oc-search-input-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-search-input-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n/* Shortcut badge */\n.oc-search-input-shortcut {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 6px;\n font-family: inherit;\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n}\n\n/* Dropdown */\n.oc-search-input-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 300px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n}\n\n.oc-search-input-dropdown-header {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-search-input-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: var(--oc-spacing-sm);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n text-align: left;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-dropdown-item:hover,\n.oc-search-input-dropdown-item--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-search-input-dropdown-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-dropdown-item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n/* Progress bar */\n.oc-progress {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n}\n\n.oc-progress__track {\n flex: 1;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-full);\n overflow: hidden;\n}\n\n.oc-progress--sm .oc-progress__track {\n height: 4px;\n}\n\n.oc-progress--md .oc-progress__track {\n height: 6px;\n}\n\n.oc-progress--lg .oc-progress__track {\n height: 8px;\n}\n\n.oc-progress__bar {\n height: 100%;\n border-radius: var(--oc-radius-full);\n transition: width var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress--accent .oc-progress__bar {\n background: var(--oc-accent);\n}\n\n.oc-progress--success .oc-progress__bar {\n background: var(--oc-success);\n}\n\n.oc-progress--warning .oc-progress__bar {\n background: var(--oc-warning);\n}\n\n.oc-progress--error .oc-progress__bar {\n background: var(--oc-error);\n}\n\n/* Indeterminate animation */\n.oc-progress--indeterminate .oc-progress__bar {\n width: 30%;\n animation: oc-progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(200%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}\n\n.oc-progress__label {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n min-width: 3ch;\n text-align: right;\n}\n\n/* Progress circle */\n.oc-progress-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-progress-circle__track {\n stroke: var(--oc-bg-surface);\n}\n\n.oc-progress-circle__bar {\n transition: stroke-dashoffset var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress-circle--accent .oc-progress-circle__bar {\n stroke: var(--oc-accent);\n}\n\n.oc-progress-circle--success .oc-progress-circle__bar {\n stroke: var(--oc-success);\n}\n\n.oc-progress-circle--warning .oc-progress-circle__bar {\n stroke: var(--oc-warning);\n}\n\n.oc-progress-circle--error .oc-progress-circle__bar {\n stroke: var(--oc-error);\n}\n\n.oc-progress-circle__label {\n position: absolute;\n font-size: var(--oc-font-size-xs);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Spinner */\n.oc-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-accent);\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n\n\n/* Empty state */\n.oc-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: var(--oc-spacing-xl);\n}\n\n/* Sizes */\n.oc-empty-state--sm {\n padding: var(--oc-spacing-md);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon svg {\n width: 32px;\n height: 32px;\n}\n\n.oc-empty-state--sm .oc-empty-state__title {\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__description {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-empty-state--md {\n padding: var(--oc-spacing-xl);\n}\n\n.oc-empty-state--lg {\n padding: var(--oc-spacing-2xl);\n}\n\n.oc-empty-state--lg .oc-empty-state__icon svg {\n width: 64px;\n height: 64px;\n}\n\n.oc-empty-state--lg .oc-empty-state__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Icon */\n.oc-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--oc-spacing-md);\n color: var(--oc-fg-tertiary);\n}\n\n.oc-empty-state__icon svg {\n width: 48px;\n height: 48px;\n}\n\n/* Title */\n.oc-empty-state__title {\n margin: 0 0 var(--oc-spacing-xs);\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Description */\n.oc-empty-state__description {\n margin: 0 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n max-width: 320px;\n}\n\n/* Actions */\n.oc-empty-state__actions {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex-wrap: wrap;\n justify-content: center;\n}\n\n\n\n/* Alert */\n.oc-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-radius: var(--oc-radius-md);\n border: 1px solid;\n}\n\n.oc-alert--info {\n background: rgba(8, 145, 178, 0.06);\n border-color: rgba(8, 145, 178, 0.2);\n}\n\n.oc-alert--success {\n background: var(--oc-success-bg);\n border-color: rgba(5, 150, 105, 0.2);\n}\n\n.oc-alert--warning {\n background: var(--oc-warning-bg);\n border-color: rgba(217, 119, 6, 0.2);\n}\n\n.oc-alert--error {\n background: var(--oc-error-bg);\n border-color: rgba(220, 38, 38, 0.2);\n}\n\n.oc-alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-alert--info .oc-alert__icon {\n color: var(--oc-accent);\n}\n\n.oc-alert--success .oc-alert__icon {\n color: var(--oc-success);\n}\n\n.oc-alert--warning .oc-alert__icon {\n color: var(--oc-warning);\n}\n\n.oc-alert--error .oc-alert__icon {\n color: var(--oc-error);\n}\n\n.oc-alert__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-alert__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__description {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__title + .oc-alert__description {\n margin-top: 2px;\n}\n\n.oc-alert__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n.oc-alert__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-alert__dismiss:hover {\n background: rgba(0, 0, 0, 0.05);\n color: var(--oc-fg-primary);\n}\n\n/* Banner */\n.oc-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n width: 100%;\n}\n\n.oc-banner--info {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--success {\n background: var(--oc-success);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--warning {\n background: var(--oc-warning);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--error {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner__content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n justify-content: center;\n}\n\n.oc-banner__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-banner__text {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n}\n\n.oc-banner__action {\n display: flex;\n align-items: center;\n}\n\n.oc-banner__action button,\n.oc-banner__action a {\n color: inherit;\n text-decoration: underline;\n font-weight: 600;\n}\n\n.oc-banner__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n opacity: 0.8;\n transition: opacity var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-banner__dismiss:hover {\n opacity: 1;\n}\n\n\n\n/* Tabs container */\n.oc-tabs {\n display: flex;\n flex-direction: column;\n}\n\n.oc-tabs--vertical {\n flex-direction: row;\n}\n\n/* Tab list */\n.oc-tab-list {\n display: flex;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-tabs--horizontal .oc-tab-list {\n flex-direction: row;\n}\n\n.oc-tabs--vertical .oc-tab-list {\n flex-direction: column;\n border-right: 1px solid var(--oc-border-default);\n padding-right: var(--oc-spacing-sm);\n margin-right: var(--oc-spacing-md);\n}\n\n/* Line variant */\n.oc-tabs--line .oc-tab-list {\n border-bottom: 1px solid var(--oc-border-default);\n gap: 0;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab-list {\n border-bottom: none;\n border-right: 1px solid var(--oc-border-default);\n}\n\n/* Tab button */\n.oc-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-tab:hover:not(.oc-tab--disabled) {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--selected {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-tab:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: -2px;\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Line variant tab */\n.oc-tabs--line .oc-tab {\n position: relative;\n border-radius: 0;\n margin-bottom: -1px;\n}\n\n.oc-tabs--line .oc-tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: transparent;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-tabs--line .oc-tab--selected::after {\n background: var(--oc-accent);\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab {\n margin-bottom: 0;\n margin-right: -1px;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab::after {\n bottom: auto;\n left: auto;\n top: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}\n\n/* Enclosed variant */\n.oc-tabs--enclosed .oc-tab-list {\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n padding: var(--oc-spacing-xs);\n}\n\n.oc-tabs--enclosed .oc-tab {\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tabs--enclosed .oc-tab--selected {\n background: var(--oc-bg-canvas);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Pills variant */\n.oc-tabs--pills .oc-tab {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-tabs--pills .oc-tab--selected {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-tabs--pills .oc-tab:hover:not(.oc-tab--disabled):not(.oc-tab--selected) {\n background: var(--oc-bg-surface);\n}\n\n/* Tab panels */\n.oc-tab-panels {\n flex: 1;\n}\n\n.oc-tab-panel {\n padding: var(--oc-spacing-md) 0;\n}\n\n.oc-tabs--vertical .oc-tab-panel {\n padding: 0;\n}\n\n.oc-tab-panel:focus {\n outline: none;\n}\n\n\n\n/* ============ Research Card Container ============ */\n.oc-research-card {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-research-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-research-card__back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.oc-research-card__back:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-research-card__title {\n flex: 1;\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-card__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-research-card__content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n/* ============ User Question ============ */\n.oc-user-question {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.oc-user-question__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-user-question__text {\n flex: 1;\n font-size: 15px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #0F172A);\n padding-top: 4px;\n}\n\n/* ============ AI Response ============ */\n.oc-ai-response {\n margin-bottom: 20px;\n}\n\n.oc-ai-response__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.oc-ai-response__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-ai-response__avatar-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-fg-primary, #0F172A);\n color: white;\n font-size: 14px;\n font-weight: 700;\n}\n\n.oc-ai-response__status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: default;\n transition: all 0.15s ease;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status {\n cursor: pointer;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-ai-response__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-ai-response__status-text {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-ai-response--researching .oc-ai-response__status-text {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-ai-response--error .oc-ai-response__status-text {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-ai-response__chevron {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-ai-response--expanded .oc-ai-response__chevron {\n transform: rotate(180deg);\n}\n\n.oc-ai-response__sources {\n margin-bottom: 16px;\n margin-left: 42px;\n}\n\n.oc-ai-response__content {\n margin-left: 42px;\n}\n\n/* ============ Sources Badge ============ */\n.oc-sources-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n background: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-sources-badge:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-sources-badge__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.oc-sources-badge__icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.oc-sources-badge__text {\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-sources-badge__arrow {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.15s ease;\n}\n\n.oc-sources-badge:hover .oc-sources-badge__arrow {\n transform: translateX(2px);\n}\n\n/* ============ Research Section ============ */\n.oc-research-section {\n margin-bottom: 24px;\n}\n\n.oc-research-section:last-child {\n margin-bottom: 0;\n}\n\n.oc-research-section__heading {\n margin: 0 0 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-section__body {\n font-size: 15px;\n line-height: 1.7;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-research-section__body p {\n margin: 0 0 12px;\n}\n\n.oc-research-section__body p:last-child {\n margin-bottom: 0;\n}\n\n/* ============ Steps List ============ */\n.oc-steps-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n margin-bottom: 16px;\n}\n\n.oc-steps-list__item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px;\n border-radius: var(--oc-radius-sm, 4px);\n}\n\n.oc-steps-list__indicator {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-steps-list__number {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-tertiary, #94A3B8);\n font-size: 11px;\n font-weight: 600;\n}\n\n.oc-steps-list__item--completed .oc-steps-list__indicator {\n color: var(--oc-success, #059669);\n}\n\n.oc-steps-list__item--running .oc-steps-list__indicator {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-steps-list__item--error .oc-steps-list__indicator {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-steps-list__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-steps-list__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-steps-list__label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-steps-list__item--pending .oc-steps-list__label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-steps-list__desc {\n display: block;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n\n\n/* ============ Project Picker Container ============ */\n.oc-project-picker {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-project-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 20px;\n border: none;\n border-bottom: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__header {\n border-bottom-color: var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-picker__header:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-picker__header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-picker__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-project-picker__subtitle {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-picker__chevron {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__chevron {\n transform: rotate(180deg);\n}\n\n.oc-project-picker__list {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n\n/* ============ Project Item ============ */\n.oc-project-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 14px;\n border-radius: var(--oc-radius-md, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.oc-project-item:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-item:focus-visible {\n box-shadow: 0 0 0 2px var(--oc-accent, #0891B2);\n}\n\n.oc-project-item--selected {\n background: var(--oc-bg-surface, #F8FAFC);\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-item--selected:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-project-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-item__name {\n font-size: 15px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__desc {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__icon {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: color 0.15s ease;\n}\n\n.oc-project-item:hover .oc-project-item__icon {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-project-item--selected .oc-project-item__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n/* ============ Project Search ============ */\n.oc-project-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n margin: 8px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-project-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-project-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-project-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Sources Panel Container ============ */\n.oc-sources-panel {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ============ Panel Tabs ============ */\n.oc-panel-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 12px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-panel-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid transparent;\n border-bottom: none;\n border-radius: var(--oc-radius-md, 6px) var(--oc-radius-md, 6px) 0 0;\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: -1px;\n}\n\n.oc-panel-tab:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab--selected {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-border-default, #E2E8F0);\n border-bottom-color: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n color: currentColor;\n}\n\n.oc-panel-tab__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-panel-tab__label {\n white-space: nowrap;\n}\n\n/* ============ Panel Search ============ */\n.oc-panel-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-panel-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-panel-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-panel-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Action List ============ */\n.oc-panel-action-list {\n display: flex;\n flex-direction: column;\n padding: 0 8px 8px;\n}\n\n/* ============ Panel Action ============ */\n.oc-panel-action {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 12px 14px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-panel-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-panel-action:active {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-panel-action--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.oc-panel-action--disabled:hover {\n background: transparent;\n}\n\n.oc-panel-action__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-sm, 4px);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-panel-action__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-panel-action__icon img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.oc-panel-action__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-panel-action__label {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-action__desc {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Section ============ */\n.oc-panel-section {\n padding: 0 12px 12px;\n}\n\n.oc-panel-section__title {\n margin: 0 0 8px;\n padding: 0 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-section__content {\n display: flex;\n flex-direction: column;\n}\n\n/* ============ Integration Colors ============ */\n.oc-panel-action--docvault .oc-panel-action__icon {\n color: #E85B5B;\n}\n\n.oc-panel-action--filenexus .oc-panel-action__icon {\n color: #1B4F72;\n}\n\n.oc-panel-action--clouddrive .oc-panel-action__icon {\n color: #038387;\n}\n\n.oc-panel-action--upload .oc-panel-action__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n\n\n/* ============ Hero Container ============ */\n.oc-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(180deg, rgba(8, 145, 178, 0.03) 0%, transparent 100%);\n}\n\n.oc-hero__inner {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Size variants */\n.oc-hero--sm {\n padding: 48px 24px;\n}\n\n.oc-hero--md {\n padding: 80px 24px;\n}\n\n.oc-hero--lg {\n padding: 120px 24px;\n}\n\n/* Layout variants */\n.oc-hero--centered {\n text-align: center;\n}\n\n.oc-hero--centered .oc-hero__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.oc-hero--split .oc-hero__inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: center;\n}\n\n/* ============ Hero Decorations ============ */\n.oc-hero__decorations {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n.oc-hero:not(.oc-hero--with-decorations) .oc-hero__decorations {\n display: none;\n}\n\n.oc-hero__decoration {\n position: absolute;\n color: var(--oc-accent, #0891B2);\n opacity: 0.08;\n}\n\n.oc-hero__decoration--1 {\n top: 15%;\n left: 10%;\n animation: oc-hero-float 8s ease-in-out infinite;\n}\n\n.oc-hero__decoration--2 {\n top: 40%;\n left: 5%;\n opacity: 0.06;\n animation: oc-hero-float 10s ease-in-out infinite reverse;\n}\n\n.oc-hero__decoration--3 {\n top: 20%;\n right: 8%;\n opacity: 0.05;\n animation: oc-hero-float 9s ease-in-out infinite;\n}\n\n.oc-hero__decoration--4 {\n top: 50%;\n right: 12%;\n opacity: 0.07;\n animation: oc-hero-float 11s ease-in-out infinite reverse;\n}\n\n@keyframes oc-hero-float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n}\n\n/* ============ Hero Badge ============ */\n.oc-hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-sm);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 24px;\n}\n\n.oc-hero-badge__icon {\n display: flex;\n align-items: center;\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-hero-badge__text {\n white-space: nowrap;\n}\n\n/* ============ Hero Title ============ */\n.oc-hero-title {\n margin: 0 0 16px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.2;\n color: var(--oc-fg-primary, #0F172A);\n letter-spacing: -0.02em;\n}\n\n.oc-hero-title--gradient {\n background: linear-gradient(135deg, var(--oc-fg-primary, #0F172A) 0%, var(--oc-accent, #0891B2) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* ============ Hero Subtitle ============ */\n.oc-hero-subtitle {\n margin: 0 0 32px;\n max-width: 560px;\n font-size: 17px;\n line-height: 1.6;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-hero--centered .oc-hero-subtitle {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ============ Hero Search ============ */\n.oc-hero-search {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n max-width: 600px;\n padding: 8px 8px 8px 20px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-lg);\n margin-bottom: 24px;\n}\n\n.oc-hero-search__input {\n flex: 1;\n min-width: 0;\n padding: 8px 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-hero-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-hero-search__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 12px 20px;\n background: var(--oc-accent, #0891B2);\n color: white;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.oc-hero-search__button:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0E7490);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-accent);\n}\n\n.oc-hero-search__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.oc-hero-search__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-hero-search--loading {\n opacity: 0.8;\n}\n\n/* ============ Hero Actions ============ */\n.oc-hero-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-hero--split .oc-hero-actions {\n justify-content: flex-start;\n}\n\n/* ============ Hero Action Button ============ */\n.oc-hero-action {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 6px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-hero-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-hero-action__icon {\n display: flex;\n align-items: center;\n color: currentColor;\n}\n\n/* ============ Hero Content (for split layout) ============ */\n.oc-hero-content {\n display: flex;\n flex-direction: column;\n}\n\n.oc-hero-content--left {\n align-items: flex-start;\n text-align: left;\n}\n\n.oc-hero-content--center {\n align-items: center;\n text-align: center;\n}\n\n.oc-hero-content--right {\n align-items: flex-end;\n text-align: right;\n}\n\n/* ============ Hero Media ============ */\n.oc-hero-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-hero-media img,\n.oc-hero-media svg {\n max-width: 100%;\n height: auto;\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 1024px) {\n .oc-hero--split .oc-hero__inner {\n grid-template-columns: 1fr;\n gap: 32px;\n text-align: center;\n }\n\n .oc-hero--split .oc-hero-content {\n align-items: center;\n }\n\n .oc-hero--split .oc-hero-actions {\n justify-content: center;\n }\n\n .oc-hero-media {\n order: -1;\n }\n}\n\n@media (max-width: 768px) {\n .oc-hero--sm {\n padding: 32px 16px;\n }\n\n .oc-hero--md {\n padding: 48px 16px;\n }\n\n .oc-hero--lg {\n padding: 64px 16px;\n }\n\n .oc-hero-title {\n font-size: 32px;\n }\n\n .oc-hero-subtitle {\n font-size: 15px;\n margin-bottom: 24px;\n }\n\n .oc-hero-search {\n flex-direction: column;\n padding: 12px;\n border-radius: var(--oc-radius-lg, 8px);\n gap: 8px;\n }\n\n .oc-hero-search__input {\n width: 100%;\n text-align: center;\n }\n\n .oc-hero-search__button {\n width: 100%;\n }\n\n .oc-hero__decorations {\n display: none;\n }\n}\n\n@media (max-width: 480px) {\n .oc-hero-title {\n font-size: 26px;\n }\n\n .oc-hero-badge {\n font-size: 11px;\n padding: 6px 12px;\n }\n\n .oc-hero-action {\n width: 100%;\n justify-content: center;\n }\n\n .oc-hero-actions {\n flex-direction: column;\n width: 100%;\n }\n}\n\n\n\n/* ============================================\n SearchBox Component\n ============================================ */\n\n.oc-search-box {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-search-box:focus-within {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Size variants */\n.oc-search-box--sm {\n padding: 8px 12px;\n gap: 10px;\n}\n\n.oc-search-box--sm .oc-search-box__input {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--sm .oc-search-box__button {\n padding: 6px 14px;\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--lg {\n padding: 16px 20px;\n gap: 14px;\n}\n\n.oc-search-box--lg .oc-search-box__input {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-search-box--lg .oc-search-box__button {\n padding: 10px 24px;\n font-size: var(--oc-font-size-md, 15px);\n}\n\n/* Icon */\n.oc-search-box__icon {\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Input */\n.oc-search-box__input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-fg-primary, #1E293B);\n outline: none;\n}\n\n.oc-search-box__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-search-box__input:disabled {\n cursor: not-allowed;\n}\n\n/* Button */\n.oc-search-box__button {\n padding: 8px 20px;\n background: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.oc-search-box__button:hover:not(:disabled) {\n background: #1E293B;\n}\n\n.oc-search-box__button:active:not(:disabled) {\n background: #0F172A;\n}\n\n.oc-search-box__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Loading state */\n.oc-search-box--loading {\n pointer-events: none;\n}\n\n.oc-search-box__spinner {\n animation: oc-spin var(--oc-duration-spin, 0.8s) linear infinite;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-search-box {\n flex-wrap: wrap;\n }\n\n .oc-search-box__input {\n flex: 1 1 100%;\n order: 1;\n }\n\n .oc-search-box__icon {\n order: 0;\n }\n\n .oc-search-box__button {\n order: 2;\n width: 100%;\n margin-top: 8px;\n }\n}\n\n\n\n/* ============================================\n FilterTabs Component\n ============================================ */\n\n.oc-filter-tabs {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n/* Filter icon button */\n.oc-filter-tabs__icon-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-filter-tabs__icon-button:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-secondary, #64748B);\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-filter-tabs__icon-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-filter-tabs__icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tabs--underline {\n gap: 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* FilterTab */\n.oc-filter-tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-filter-tab:hover:not(:disabled) {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #475569);\n}\n\n.oc-filter-tab--active {\n background: #1E293B;\n border-color: #1E293B;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--active:hover:not(:disabled) {\n background: #334155;\n border-color: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-filter-tab--sm {\n padding: 6px 12px;\n font-size: var(--oc-font-size-xs, 12px);\n gap: 4px;\n}\n\n.oc-filter-tab--lg {\n padding: 10px 18px;\n font-size: var(--oc-font-size-md, 15px);\n gap: 8px;\n}\n\n/* Underline variant */\n.oc-filter-tab--underline {\n border: none;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n padding: 12px 16px;\n margin-bottom: -1px;\n}\n\n.oc-filter-tab--underline:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active {\n background: transparent;\n color: var(--oc-accent, #0F766E);\n border-bottom-color: var(--oc-accent, #0F766E);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n/* Icon */\n.oc-filter-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-filter-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tab--sm .oc-filter-tab__icon svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-filter-tab--lg .oc-filter-tab__icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Label */\n.oc-filter-tab__label {\n flex-shrink: 0;\n}\n\n/* Count badge */\n.oc-filter-tab__count {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n.oc-filter-tab--active .oc-filter-tab__count {\n opacity: 0.8;\n}\n\n\n\n .oc-filter-panel {\n width: 320px;\n max-height: 520px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 8px 16px rgba(15, 23, 42, 0.06));\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .oc-filter-panel__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0;\n }\n\n .oc-filter-panel__clear {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n background: none;\n border: none;\n padding: 4px 8px;\n margin: -4px -8px;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__clear:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__clear:disabled {\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: not-allowed;\n }\n\n .oc-filter-panel__clear:disabled:hover {\n background: transparent;\n }\n\n .oc-filter-panel__body {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .oc-filter-panel__section {\n padding: 8px 20px;\n }\n\n .oc-filter-panel__section:not(:last-child) {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n padding-bottom: 16px;\n margin-bottom: 8px;\n }\n\n .oc-filter-panel__section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin: 0;\n }\n\n .oc-filter-panel__section-count {\n font-size: 11px;\n font-weight: 600;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n padding: 2px 6px;\n border-radius: var(--oc-radius-full, 9999px);\n }\n\n /* Section search input */\n .oc-filter-panel__search {\n position: relative;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n align-items: center;\n }\n\n .oc-filter-panel__search-input {\n width: 100%;\n padding: 8px 32px 8px 32px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__search-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n background: var(--oc-bg-surface, white);\n }\n\n .oc-filter-panel__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border: none;\n border-radius: 50%;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n padding: 0;\n }\n\n .oc-filter-panel__search-clear:hover {\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #475569);\n }\n\n /* Options list */\n .oc-filter-panel__options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n }\n\n .oc-filter-panel__option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px 12px;\n margin: 0 -12px;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .oc-filter-panel__option:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n /* Checkbox styles */\n .oc-filter-panel__checkbox {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__checkbox--checked {\n border-color: var(--oc-accent, #0F766E);\n background: var(--oc-accent, #0F766E);\n }\n\n /* Radio styles */\n .oc-filter-panel__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__radio--checked {\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--oc-accent, #0F766E);\n }\n\n /* Option content */\n .oc-filter-panel__option-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .oc-filter-panel__option-label {\n font-size: 14px;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-description {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Loading state */\n .oc-filter-panel__loading {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__spinner {\n animation: oc-filter-spin 0.8s linear infinite;\n }\n\n @keyframes oc-filter-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Empty state */\n .oc-filter-panel__empty {\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n text-align: center;\n font-style: italic;\n }\n\n /* Show more button */\n .oc-filter-panel__show-more {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n margin: 4px -12px 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__show-more:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__show-more svg {\n transition: transform 0.2s;\n }\n\n /* Date inputs */\n .oc-filter-panel__date-inputs {\n display: flex;\n gap: 12px;\n }\n\n .oc-filter-panel__date-field {\n flex: 1;\n }\n\n .oc-filter-panel__date-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 6px;\n }\n\n .oc-filter-panel__date-input {\n width: 100%;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__date-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n }\n\n /* Footer */\n .oc-filter-panel__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FAFAFA);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__footer-spacer {\n flex: 1;\n }\n\n .oc-filter-panel__active-count {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n }\n\n .oc-filter-panel__active-count strong {\n color: var(--oc-accent, #0F766E);\n font-weight: 600;\n }\n\n /* Buttons */\n .oc-filter-panel__btn {\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .oc-filter-panel__btn--secondary {\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__btn--secondary:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n }\n\n .oc-filter-panel__btn--primary {\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n }\n\n .oc-filter-panel__btn--primary:hover {\n background: var(--oc-accent-hover, #0D9488);\n }\n\n /* Quick filter chips */\n .oc-filter-panel__quick-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__quick-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .oc-filter-panel__quick-chip:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__quick-chip--active {\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.08);\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__quick-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n margin-right: -4px;\n border-radius: 50%;\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n transition: opacity 0.15s;\n }\n\n .oc-filter-panel__quick-chip-remove:hover {\n opacity: 1;\n }\n\n\n\n/* ============================================\n StatBlock Component\n ============================================ */\n\n.oc-stat-block {\n display: flex;\n gap: 12px;\n}\n\n.oc-stat-block--center {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.oc-stat-block--left {\n align-items: flex-start;\n}\n\n/* Icon */\n.oc-stat-block__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-stat-block__icon svg {\n width: 24px;\n height: 24px;\n}\n\n/* Content */\n.oc-stat-block__content {\n min-width: 0;\n}\n\n/* Value */\n.oc-stat-block__value {\n font-size: 36px;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n font-feature-settings: 'tnum' 1;\n}\n\n.oc-stat-block--default .oc-stat-block__value {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-stat-block--accent .oc-stat-block__value {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-stat-block--muted .oc-stat-block__value {\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Label */\n.oc-stat-block__label {\n font-size: var(--oc-font-size-md, 15px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n/* Sublabel */\n.oc-stat-block__sublabel {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.4;\n}\n\n/* Size variants */\n.oc-stat-block--sm .oc-stat-block__value {\n font-size: 24px;\n}\n\n.oc-stat-block--sm .oc-stat-block__label {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-stat-block--sm .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-xs, 11px);\n}\n\n.oc-stat-block--sm .oc-stat-block__icon {\n width: 36px;\n height: 36px;\n}\n\n.oc-stat-block--sm .oc-stat-block__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-stat-block--lg .oc-stat-block__value {\n font-size: 48px;\n}\n\n.oc-stat-block--lg .oc-stat-block__label {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-stat-block--lg .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-md, 15px);\n}\n\n.oc-stat-block--lg .oc-stat-block__icon {\n width: 56px;\n height: 56px;\n}\n\n.oc-stat-block--lg .oc-stat-block__icon svg {\n width: 28px;\n height: 28px;\n}\n\n/* ============================================\n StatGrid Component\n ============================================ */\n\n.oc-stat-grid {\n display: grid;\n}\n\n/* Columns */\n.oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.oc-stat-grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.oc-stat-grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Gap */\n.oc-stat-grid--gap-sm {\n gap: 16px 24px;\n}\n\n.oc-stat-grid--gap-md {\n gap: 32px 48px;\n}\n\n.oc-stat-grid--gap-lg {\n gap: 48px 64px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-stat-grid--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--cols-3 {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .oc-stat-grid--cols-4,\n .oc-stat-grid--cols-3,\n .oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--gap-md {\n gap: 24px 32px;\n }\n\n .oc-stat-grid--gap-lg {\n gap: 32px 40px;\n }\n\n .oc-stat-block__value {\n font-size: 28px;\n }\n}\n\n\n\n/* ============================================\n CollectionCard Component\n ============================================ */\n\n.oc-collection-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-collection-card--clickable {\n cursor: pointer;\n}\n\n.oc-collection-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Avatar - uniform circular treatment for icons and images */\n.oc-collection-card__icon,\n.oc-collection-card__image {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.oc-collection-card__icon {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-collection-card__image {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-collection-card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Content */\n.oc-collection-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-collection-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Badge */\n.oc-collection-card__badge {\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Status */\n.oc-collection-card__status {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Title */\n.oc-collection-card__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 6px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-collection-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Stats */\n.oc-collection-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-collection-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-collection-card__stats span:not(:last-child)::after {\n content: '\u2022';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Menu */\n.oc-collection-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-collection-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============================================\n CollectionList Component\n ============================================ */\n\n.oc-collection-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-collection-list--gap-sm {\n gap: 12px;\n}\n\n.oc-collection-list--gap-md {\n gap: 16px;\n}\n\n.oc-collection-list--gap-lg {\n gap: 24px;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-collection-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-collection-card__icon,\n .oc-collection-card__image {\n width: 36px;\n height: 36px;\n }\n\n .oc-collection-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-collection-card__title {\n font-size: 15px;\n }\n\n .oc-collection-card__description {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActivityFeed Component\n ============================================ */\n\n.oc-activity-feed {\n display: flex;\n flex-direction: column;\n}\n\n.oc-activity-feed__list {\n display: flex;\n flex-direction: column;\n}\n\n/* ActivityItem */\n.oc-activity-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 0;\n}\n\n.oc-activity-feed--dividers .oc-activity-item {\n border-bottom: 1px solid var(--oc-bg-subtle, #F1F5F9);\n}\n\n.oc-activity-feed--dividers .oc-activity-item:last-child {\n border-bottom: none;\n}\n\n/* Avatar */\n.oc-activity-item__avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-inverse, #FFFFFF);\n flex-shrink: 0;\n background-size: cover;\n background-position: center;\n}\n\n/* Content */\n.oc-activity-item__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Text */\n.oc-activity-item__text {\n font-size: var(--oc-font-size-sm, 14px);\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n line-height: 1.4;\n}\n\n/* Name */\n.oc-activity-item__name {\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* Target */\n.oc-activity-item__target {\n color: var(--oc-accent, #0F766E);\n text-decoration: none;\n}\n\na.oc-activity-item__target:hover {\n text-decoration: underline;\n}\n\n/* Time */\n.oc-activity-item__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n/* View All Link */\n.oc-activity-feed__view-all {\n display: block;\n text-align: center;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n text-decoration: none;\n padding: 12px;\n margin-top: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-activity-feed__view-all:hover {\n color: var(--oc-accent, #0F766E);\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-activity-item {\n gap: 10px;\n padding: 12px 0;\n }\n\n .oc-activity-item__avatar {\n width: 32px;\n height: 32px;\n font-size: 11px;\n }\n\n .oc-activity-item__text {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActionList Component\n ============================================ */\n\n.oc-action-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-action-list--card {\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n padding: 8px;\n}\n\n/* ActionItem */\n.oc-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n text-decoration: none;\n width: 100%;\n}\n\n.oc-action-item:hover:not(:disabled) {\n background: rgba(15, 118, 110, 0.05);\n}\n\n.oc-action-item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-action-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-action-item--sm {\n padding: 10px 12px;\n gap: 10px;\n font-size: var(--oc-font-size-sm, 14px);\n}\n\n.oc-action-item--lg {\n padding: 16px 20px;\n gap: 14px;\n font-size: var(--oc-font-size-lg, 16px);\n}\n\n/* Icon */\n.oc-action-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n}\n\n.oc-action-item__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-action-item--sm .oc-action-item__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-action-item--lg .oc-action-item__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-action-item__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n/* Label */\n.oc-action-item__label {\n font-weight: 500;\n}\n\n/* Description */\n.oc-action-item__description {\n font-size: 0.85em;\n color: var(--oc-fg-tertiary, #94A3B8);\n font-weight: 400;\n}\n\n/* Card variant items */\n.oc-action-list--card .oc-action-item {\n padding: 12px 14px;\n}\n\n.oc-action-list--card .oc-action-item:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n\n\n/* ============ Thread View Container ============ */\n.oc-thread-view {\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-view__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-view__title {\n flex: 1;\n min-width: 200px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-view__pin,\n.oc-thread-view__status,\n.oc-thread-view__locked {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-view__pin {\n background: rgba(217, 119, 6, 0.1);\n color: var(--oc-warning, #D97706);\n}\n\n.oc-thread-view__status--resolved {\n background: rgba(5, 150, 105, 0.1);\n color: var(--oc-success, #059669);\n}\n\n.oc-thread-view__status--closed {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-view__status--archived {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-view__locked {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-view__content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Pinned thread styling */\n.oc-thread-view--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n}\n\n/* Locked thread */\n.oc-thread-view--locked .oc-thread-view__content {\n opacity: 0.85;\n}\n\n/* ============ Thread Post (Main Post) ============ */\n.oc-thread-post {\n display: flex;\n gap: 14px;\n padding: 20px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n@keyframes oc-thread-fade-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-thread-post--root {\n padding-top: 0;\n}\n\n.oc-thread-post--highlighted {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-thread-post__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-post__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-post__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.oc-thread-post__author {\n font-size: 14px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-post__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__edited {\n font-size: 12px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__body {\n font-size: 15px;\n line-height: 1.65;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__body p {\n margin: 0 0 12px;\n}\n\n.oc-thread-post__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-post__resources {\n margin-top: 14px;\n}\n\n.oc-thread-post__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 14px;\n}\n\n.oc-thread-post__reactions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-thread-post__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-post:hover .oc-thread-post__actions {\n opacity: 1;\n}\n\n.oc-thread-post__reply-count {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-left: auto;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-post__reply-count svg {\n opacity: 0.6;\n}\n\n/* ============ Thread Reply (Nested) ============ */\n.oc-thread-reply {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 24px;\n}\n\n.oc-thread-reply__connector {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n display: flex;\n justify-content: center;\n}\n\n.oc-thread-reply__line {\n width: 2px;\n height: 100%;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: 1px;\n}\n\n.oc-thread-reply:last-child .oc-thread-reply__line {\n height: 32px;\n}\n\n.oc-thread-reply__content {\n display: flex;\n gap: 12px;\n padding: 14px 0;\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__content {\n padding: 10px 0;\n}\n\n.oc-thread-reply--highlighted .oc-thread-reply__content {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin-left: -12px;\n padding-left: 12px;\n border-radius: var(--oc-radius-md, 8px);\n}\n\n.oc-thread-reply__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-reply__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-reply__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__header {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__author {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-reply__time {\n font-size: 11px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__edited {\n font-size: 11px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__body p {\n margin: 0 0 10px;\n}\n\n.oc-thread-reply__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__resources {\n margin-top: 10px;\n}\n\n.oc-thread-reply__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__footer {\n margin-top: 0;\n}\n\n.oc-thread-reply__reactions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-thread-reply__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-reply:hover .oc-thread-reply__actions {\n opacity: 1;\n}\n\n.oc-thread-reply__toggle {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-reply__toggle:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__toggle-icon {\n transition: transform 0.2s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__toggle-icon {\n transform: rotate(-90deg);\n}\n\n.oc-thread-reply__replies {\n margin-top: 4px;\n}\n\n/* Depth indentation limits */\n.oc-thread-reply--depth-1 { padding-left: 24px; }\n.oc-thread-reply--depth-2 { padding-left: 20px; }\n.oc-thread-reply--depth-3 { padding-left: 16px; }\n.oc-thread-reply--depth-4 { padding-left: 12px; }\n\n/* ============ Mention ============ */\n.oc-mention {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n vertical-align: baseline;\n}\n\n.oc-mention:hover {\n background: rgba(15, 118, 110, 0.2);\n color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-mention__avatar {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.oc-mention__at {\n opacity: 0.7;\n}\n\n.oc-mention__name {\n font-weight: 600;\n}\n\n/* ============ Linked Resource ============ */\n.oc-linked-resource {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 13px;\n font-family: inherit;\n color: var(--resource-color, var(--oc-fg-secondary));\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.oc-linked-resource:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--resource-color, var(--oc-border-default));\n transform: translateY(-1px);\n}\n\n.oc-linked-resource__icon {\n display: flex;\n align-items: center;\n opacity: 0.8;\n}\n\n.oc-linked-resource__title {\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.oc-linked-resource__ref {\n font-size: 11px;\n font-weight: 400;\n color: var(--oc-fg-tertiary, #94A3B8);\n padding-left: 6px;\n border-left: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* Resource type colors */\n.oc-linked-resource--document { --resource-color: var(--oc-info, #0891B2); }\n.oc-linked-resource--collection { --resource-color: var(--oc-warning, #D97706); }\n.oc-linked-resource--annotation { --resource-color: var(--oc-accent, #0F766E); }\n.oc-linked-resource--comment { --resource-color: var(--oc-fg-secondary, #475569); }\n.oc-linked-resource--clause { --resource-color: var(--oc-success, #059669); }\n.oc-linked-resource--user { --resource-color: var(--oc-accent, #0F766E); }\n\n/* ============ Resource List ============ */\n.oc-resource-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-resource-list__label {\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-resource-list__items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n/* ============ Reaction Button ============ */\n.oc-reaction-button {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 14px;\n font-family: inherit;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-button:hover {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n transform: scale(1.05);\n}\n\n.oc-reaction-button--active {\n background: rgba(15, 118, 110, 0.1);\n border-color: rgba(15, 118, 110, 0.3);\n}\n\n.oc-reaction-button--active:hover {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-reaction-button__emoji {\n font-size: 14px;\n line-height: 1;\n}\n\n.oc-reaction-button__count {\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-reaction-button--active .oc-reaction-button__count {\n color: var(--oc-accent, #0F766E);\n}\n\n/* ============ Reaction Bar ============ */\n.oc-reaction-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-reaction-bar__add {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px dashed var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-bar__add:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* ============ Thread Action ============ */\n.oc-thread-action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-action:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-action--destructive {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action--destructive:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action__label {\n white-space: nowrap;\n}\n\n/* ============ Thread Input ============ */\n.oc-thread-input {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-input__replying {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n}\n\n.oc-thread-input__replying-label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-input__cancel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-input__cancel:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n/* ============ Thread Meta ============ */\n.oc-thread-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding: 12px 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-meta__item {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.oc-thread-meta__item svg {\n opacity: 0.6;\n}\n\n.oc-thread-meta__participants {\n display: flex;\n align-items: center;\n}\n\n.oc-thread-meta__activity {\n margin-left: auto;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Category Badge ============ */\n.oc-category-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--category-color, var(--oc-fg-secondary, #475569));\n background: color-mix(in srgb, var(--category-color, var(--oc-fg-secondary)) 10%, transparent);\n border-radius: var(--oc-radius-sm, 6px);\n white-space: nowrap;\n}\n\n.oc-category-badge__label {\n line-height: 1;\n}\n\n/* ============ Discussion List ============ */\n.oc-discussion-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n}\n\n.oc-discussion-list--card {\n gap: 12px;\n background: transparent;\n}\n\n.oc-discussion-list--compact,\n.oc-discussion-list--minimal {\n border: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-discussion-list--loading {\n gap: 0;\n}\n\n.oc-discussion-list__loading {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.oc-discussion-list__skeleton {\n height: 80px;\n background: var(--oc-bg-surface, #F8F8F8);\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.oc-discussion-list__skeleton:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.oc-discussion-list__skeleton:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ============ Discussion Item - Card Variant ============ */\n.oc-discussion-item--card {\n display: flex;\n gap: 16px;\n padding: 16px 20px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item--card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));\n transform: translateY(-1px);\n}\n\n.oc-discussion-item--card:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-discussion-item--card.oc-discussion-item--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, transparent 30%);\n}\n\n.oc-discussion-item--card.oc-discussion-item--unread {\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item--card.oc-discussion-item--answered,\n.oc-discussion-item--card.oc-discussion-item--resolved {\n border-left: 3px solid var(--oc-success, #059669);\n}\n\n/* Vote column */\n.oc-discussion-item__votes {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 40px;\n padding-top: 2px;\n}\n\n.oc-discussion-item__vote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item__vote-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-accent, #0F766E);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__vote-btn--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-item__vote-btn--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-discussion-item__vote-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* Main content */\n.oc-discussion-item__main {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-discussion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__status-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-discussion-item__status-icon--resolved {\n color: var(--oc-success, #059669);\n}\n\n.oc-discussion-item__status-icon--pinned {\n color: var(--oc-warning, #D97706);\n}\n\n.oc-discussion-item__activity {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n.oc-discussion-item__title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n.oc-discussion-item--card .oc-discussion-item__title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item--unread .oc-discussion-item__title {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__preview {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: var(--oc-fg-secondary, #475569);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-discussion-item__tag {\n display: inline-block;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-top: 4px;\n}\n\n.oc-discussion-item__author {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-discussion-item__author-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-item__author-badge {\n display: inline-flex;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-discussion-item__created {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item__stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-discussion-item__stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item__stat svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Item - Compact Variant ============ */\n.oc-discussion-item--compact {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--compact:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--compact:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--compact.oc-discussion-item--pinned {\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 20%);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__leading {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__title {\n font-size: 14px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tags {\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tag {\n font-size: 10px;\n padding: 1px 6px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n/* ============ Discussion Item - Minimal Variant ============ */\n.oc-discussion-item--minimal {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--minimal:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--minimal:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__avatar {\n flex-shrink: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__title {\n font-size: 14px;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__byline {\n font-size: 12px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time::before {\n content: '\\00B7';\n margin: 0 6px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-canvas, #FAFAFA);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Filters ============ */\n.oc-discussion-filters {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n margin-bottom: 16px;\n}\n\n.oc-discussion-filters__categories {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.oc-discussion-filters__category {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__category:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-discussion-filters__category--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-filters__category--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-discussion-filters__count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 11px;\n font-weight: 600;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-filters__category--active .oc-discussion-filters__count {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.oc-discussion-filters__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-filters__search {\n position: relative;\n flex: 1;\n min-width: 200px;\n max-width: 400px;\n}\n\n.oc-discussion-filters__search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n pointer-events: none;\n}\n\n.oc-discussion-filters__search-input {\n width: 100%;\n padding: 10px 12px 10px 38px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__search-input:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n.oc-discussion-filters__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-filters__sort {\n padding: 10px 32px 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white) url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\") right 8px center/20px no-repeat;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n appearance: none;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__sort:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* ============ New Discussion Button ============ */\n.oc-new-discussion-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-new-discussion-btn:hover {\n background: var(--oc-accent-hover, #0D9488);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-md, 0 4px 6px rgba(15, 23, 42, 0.05));\n}\n\n.oc-new-discussion-btn:active {\n transform: translateY(0);\n}\n\n.oc-new-discussion-btn:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============ Discussion Stats ============ */\n.oc-discussion-stats {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 12px 0;\n}\n\n.oc-discussion-stats__item {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.oc-discussion-stats__value {\n font-size: 18px;\n font-weight: 700;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-stats__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-stats__item--answered .oc-discussion-stats__value {\n color: var(--oc-success, #059669);\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 768px) {\n .oc-discussion-item--card {\n flex-direction: column;\n gap: 12px;\n }\n\n .oc-discussion-item__votes {\n flex-direction: row;\n min-width: unset;\n gap: 8px;\n order: -1;\n }\n\n .oc-discussion-item__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-discussion-item__stats {\n width: 100%;\n justify-content: flex-start;\n }\n\n .oc-discussion-filters__categories {\n overflow-x: auto;\n flex-wrap: nowrap;\n padding-bottom: 8px;\n margin-bottom: -8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-discussion-filters__category {\n flex-shrink: 0;\n }\n\n .oc-discussion-filters__actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .oc-discussion-filters__search {\n max-width: none;\n }\n\n .oc-discussion-filters__sort {\n width: 100%;\n }\n\n .oc-discussion-stats {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n@media (max-width: 480px) {\n .oc-discussion-item--compact,\n .oc-discussion-item--minimal {\n padding: 10px 12px;\n }\n\n .oc-discussion-item--compact .oc-discussion-item__meta {\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n }\n\n .oc-new-discussion-btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM CONTAINER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-filesystem {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FAFAFA);\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n.oc-filesystem__layout {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.oc-filesystem__sidebar {\n width: 240px;\n min-width: 240px;\n background: var(--oc-bg-surface, white);\n border-right: 1px solid var(--oc-border-default, #E2E8F0);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-filesystem__main {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree {\n display: flex;\n flex-direction: column;\n padding: 8px;\n overflow-y: auto;\n}\n\n.oc-folder-tree__root {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 4px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n}\n\n.oc-folder-tree__root:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree__root--active {\n background: rgba(15, 118, 110, 0.08);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree__root-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-folder-tree__root-label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree__content {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree-item {\n display: flex;\n flex-direction: column;\n}\n\n.oc-folder-tree-item__row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n border-radius: var(--oc-radius-md, 8px);\n transition: background var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__row:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-folder-tree-item--active > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.08);\n}\n\n.oc-folder-tree-item--in-path > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-folder-tree-item__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-folder-tree-item__toggle:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-folder-tree-item__toggle--hidden {\n visibility: hidden;\n}\n\n.oc-folder-tree-item__chevron--expanded {\n transform: rotate(90deg);\n}\n\n.oc-folder-tree-item__button {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n padding: 6px 8px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n text-align: left;\n border-radius: var(--oc-radius-sm, 6px);\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__button:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__button {\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #F59E0B;\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__icon {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree-item__children {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE PATH BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-breadcrumb {\n display: flex;\n align-items: center;\n}\n\n.oc-file-breadcrumb__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.oc-file-breadcrumb__item {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.oc-file-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-file-breadcrumb__link:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-file-breadcrumb__link--active {\n color: var(--oc-fg-primary, #1E293B);\n cursor: default;\n}\n\n.oc-file-breadcrumb__link--active:hover {\n background: transparent;\n}\n\n.oc-file-breadcrumb__icon {\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-file-breadcrumb__separator {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM TOOLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-fs-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-fs-toolbar__left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-fs-toolbar__center {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-fs-toolbar__right {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.oc-fs-toolbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-fs-toolbar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__nav-btn:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__nav-btn:disabled {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.oc-fs-toolbar__view-toggle {\n display: flex;\n align-items: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-md, 8px);\n padding: 3px;\n}\n\n.oc-fs-toolbar__view-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__view-btn:hover {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-fs-toolbar__view-btn--active {\n background: var(--oc-bg-surface, white);\n color: var(--oc-fg-primary, #1E293B);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-fs-toolbar__button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__button:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__button--primary {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-fs-toolbar__button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-fs-toolbar__button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-fs-toolbar__separator {\n width: 1px;\n height: 24px;\n background: var(--oc-border-default, #E2E8F0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-file-list__header {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FAFAFA);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__header-cell {\n flex-shrink: 0;\n}\n\n.oc-file-list__header-cell--name {\n flex: 1;\n min-width: 0;\n}\n\n.oc-file-list__header-cell--modified {\n width: 140px;\n}\n\n.oc-file-list__header-cell--size {\n width: 100px;\n text-align: right;\n}\n\n.oc-file-list__content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n\n.oc-file-list--list .oc-file-list__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 8px;\n}\n\n.oc-file-list--grid .oc-file-list__content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n padding: 16px;\n}\n\n.oc-file-list__empty {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n}\n\n.oc-file-list__empty-content {\n text-align: center;\n max-width: 300px;\n}\n\n.oc-file-list__empty-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 8px;\n}\n\n.oc-file-list__empty-description {\n font-size: 14px;\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - LIST VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--list {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--list:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-file-list-item--list:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--list.oc-file-list-item--selected {\n background: rgba(15, 118, 110, 0.08);\n border-color: rgba(15, 118, 110, 0.2);\n}\n\n.oc-file-list-item__cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-file-list-item__cell--name {\n flex: 1;\n min-width: 0;\n gap: 12px;\n}\n\n.oc-file-list-item__cell--modified {\n width: 140px;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__cell--size {\n width: 100px;\n justify-content: flex-end;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__name-text {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - GRID VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 16px 12px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--grid:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-file-list-item--grid:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--grid.oc-file-list-item--selected {\n border-color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon {\n width: 48px;\n height: 48px;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__name {\n width: 100%;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE ICONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n}\n\n.oc-file-list-item__icon--folder {\n color: #F59E0B;\n}\n\n.oc-file-list-item__icon--pdf {\n color: #DC2626;\n}\n\n.oc-file-list-item__icon--document {\n color: #2563EB;\n}\n\n.oc-file-list-item__icon--image {\n color: #059669;\n}\n\n.oc-file-list-item__icon--spreadsheet {\n color: #059669;\n}\n\n.oc-file-list-item__icon--presentation {\n color: #EA580C;\n}\n\n.oc-file-list-item__icon--archive {\n color: #7C3AED;\n}\n\n.oc-file-list-item__icon--unknown {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (max-width: 768px) {\n .oc-filesystem__sidebar {\n display: none;\n }\n\n .oc-file-list__header-cell--modified,\n .oc-file-list-item__cell--modified {\n display: none;\n }\n\n .oc-file-list__header-cell--size,\n .oc-file-list-item__cell--size {\n width: 80px;\n }\n\n .oc-file-breadcrumb__list {\n overflow-x: auto;\n flex-wrap: nowrap;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-fs-toolbar {\n padding: 10px 12px;\n gap: 8px;\n }\n}\n\n\n\n/* ============================================\n ExtractCard Component\n ============================================ */\n\n.oc-extract-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-extract-card--clickable {\n cursor: pointer;\n}\n\n.oc-extract-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Icon */\n.oc-extract-card__icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-extract-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-extract-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Status badge */\n.oc-extract-card__status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n.oc-extract-card__status svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-extract-card__status--pending {\n background: #F1F5F9;\n color: #64748B;\n}\n\n.oc-extract-card__status--queued {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.oc-extract-card__status--running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.oc-extract-card__status--completed {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.oc-extract-card__status--failed {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.oc-extract-card__progress-text {\n font-weight: 500;\n opacity: 0.8;\n}\n\n/* Spinning animation for running status */\n@keyframes oc-extract-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.oc-extract-card__status-icon--spinning {\n animation: oc-extract-spin 1s linear infinite;\n}\n\n/* Corpus badge */\n.oc-extract-card__corpus {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-extract-card__corpus::before {\n content: 'from ';\n opacity: 0.7;\n}\n\n/* Name */\n.oc-extract-card__name {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 4px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-extract-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Progress bar */\n.oc-extract-card__progress-bar {\n height: 4px;\n background: var(--oc-bg-surface-hover, #E2E8F0);\n border-radius: 2px;\n overflow: hidden;\n margin-bottom: 12px;\n}\n\n.oc-extract-card__progress-fill {\n height: 100%;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* Footer */\n.oc-extract-card__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n/* Stats */\n.oc-extract-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-secondary, #64748B);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-extract-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-extract-card__stats span:not(:last-child)::after {\n content: '\\00B7';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Time */\n.oc-extract-card__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Menu */\n.oc-extract-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-extract-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* ============================================\n ExtractList Component\n ============================================ */\n\n.oc-extract-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-extract-list--gap-sm {\n gap: 12px;\n}\n\n.oc-extract-list--gap-md {\n gap: 16px;\n}\n\n.oc-extract-list--gap-lg {\n gap: 24px;\n}\n\n/* Grid layout */\n.oc-extract-list--grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-extract-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-extract-card__icon {\n width: 36px;\n height: 36px;\n }\n\n .oc-extract-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-extract-card__name {\n font-size: 15px;\n }\n\n .oc-extract-card__description {\n font-size: 13px;\n }\n\n .oc-extract-card__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-extract-list--grid {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n/* ============================================\n DataGrid Component\n ============================================ */\n\n.oc-data-grid {\n position: relative;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: auto;\n}\n\n.oc-data-grid__table {\n width: 100%;\n min-width: max-content;\n border-collapse: collapse;\n font-size: 14px;\n}\n\n/* Header */\n.oc-data-grid__header {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-data-grid--sticky-header .oc-data-grid__header {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.oc-data-grid__th {\n padding: 14px 16px;\n text-align: left;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #64748B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-data-grid__th--sortable {\n cursor: pointer;\n transition: color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-data-grid__th--checkbox,\n.oc-data-grid__th--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__th--center {\n text-align: center;\n}\n\n.oc-data-grid__th--right {\n text-align: right;\n}\n\n.oc-data-grid__th-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-data-grid__sort-icon {\n opacity: 0.5;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover .oc-data-grid__sort-icon {\n opacity: 1;\n}\n\n/* Body */\n.oc-data-grid__body {\n /* Body styles */\n}\n\n.oc-data-grid__row {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n transition: background-color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:last-child {\n border-bottom: none;\n}\n\n.oc-data-grid__row:hover {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid__row--clickable {\n cursor: pointer;\n}\n\n.oc-data-grid__row--selected {\n background: rgba(232, 90, 79, 0.06);\n}\n\n.oc-data-grid__row--selected:hover {\n background: rgba(232, 90, 79, 0.1);\n}\n\n/* Striped */\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even):hover {\n background: #F1F5F9;\n}\n\n/* Cells */\n.oc-data-grid__cell {\n padding: 14px 16px;\n color: var(--oc-fg-primary, #1E293B);\n vertical-align: middle;\n}\n\n.oc-data-grid__cell--checkbox,\n.oc-data-grid__cell--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__cell--center {\n text-align: center;\n}\n\n.oc-data-grid__cell--right {\n text-align: right;\n}\n\n.oc-data-grid__cell--number {\n font-variant-numeric: tabular-nums;\n}\n\n.oc-data-grid__cell-content {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Compact mode */\n.oc-data-grid--compact .oc-data-grid__th {\n padding: 10px 12px;\n}\n\n.oc-data-grid--compact .oc-data-grid__cell {\n padding: 10px 12px;\n}\n\n/* Checkbox styling */\n.oc-data-grid__checkbox-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.oc-data-grid__checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.oc-data-grid__checkbox-custom {\n width: 18px;\n height: 18px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n border-radius: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n transition: all var(--oc-duration-fast, 0.15s);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-data-grid__checkbox-custom::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transform: scale(0);\n transition: transform var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n height: 3px;\n border-radius: 1px;\n}\n\n.oc-data-grid__checkbox:focus-visible + .oc-data-grid__checkbox-custom {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Boolean check */\n.oc-data-grid__boolean-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #D1FAE5;\n color: #065F46;\n}\n\n/* Links */\n.oc-data-grid__link {\n color: var(--oc-accent, #E85A4F);\n text-decoration: none;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__link:hover {\n opacity: 0.8;\n text-decoration: underline;\n}\n\n/* Cell actions */\n.oc-data-grid__cell-action-wrapper {\n position: relative;\n margin-left: auto;\n}\n\n.oc-data-grid__cell-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n opacity: 0;\n transition: all var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:hover .oc-data-grid__cell-action-btn,\n.oc-data-grid__cell-action-btn[aria-expanded=\"true\"] {\n opacity: 1;\n}\n\n.oc-data-grid__cell-action-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Cell menu */\n.oc-data-grid__cell-menu {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 20;\n min-width: 160px;\n margin-top: 4px;\n padding: 6px 0;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.oc-data-grid__cell-menu-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n background: transparent;\n border: none;\n font-size: 14px;\n color: var(--oc-fg-primary, #334155);\n text-align: left;\n cursor: pointer;\n transition: background var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__cell-menu-item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-data-grid__cell-menu-item--danger {\n color: #DC2626;\n}\n\n.oc-data-grid__cell-menu-item--danger:hover {\n background: #FEF2F2;\n}\n\n.oc-data-grid__cell-menu-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n}\n\n/* Empty state */\n.oc-data-grid__empty {\n padding: 48px 24px;\n text-align: center;\n}\n\n.oc-data-grid__empty-default {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-data-grid__empty-default p {\n margin: 0;\n font-size: 15px;\n}\n\n/* Loading skeleton */\n.oc-data-grid__row--skeleton {\n pointer-events: none;\n}\n\n.oc-data-grid__skeleton {\n height: 16px;\n background: linear-gradient(\n 90deg,\n var(--oc-bg-surface-hover, #F1F5F9) 0%,\n #E2E8F0 50%,\n var(--oc-bg-surface-hover, #F1F5F9) 100%\n );\n background-size: 200% 100%;\n border-radius: 4px;\n animation: oc-data-grid-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-data-grid-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-data-grid {\n border-radius: var(--oc-radius-md, 8px);\n }\n\n .oc-data-grid__th {\n padding: 12px;\n font-size: 11px;\n }\n\n .oc-data-grid__cell {\n padding: 12px;\n font-size: 13px;\n }\n\n .oc-data-grid__cell-action-btn {\n opacity: 1;\n }\n}\n\n\n\n .oc-node {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .oc-node__circle {\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n transition:\n transform var(--oc-transition-fast, 0.15s) ease,\n background-color var(--oc-transition-fast, 0.15s) ease,\n box-shadow var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Sizes */\n .oc-node--xs .oc-node__circle {\n width: 6px;\n height: 6px;\n }\n\n .oc-node--sm .oc-node__circle {\n width: 8px;\n height: 8px;\n }\n\n .oc-node--md .oc-node__circle {\n width: 12px;\n height: 12px;\n }\n\n .oc-node--lg .oc-node__circle {\n width: 16px;\n height: 16px;\n }\n\n /* Variants */\n .oc-node--default .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n }\n\n .oc-node--active .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n\n .oc-node--muted .oc-node__circle {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-node--connected .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px var(--oc-bg-surface, #FFFFFF),\n 0 0 0 4px var(--oc-accent, #0F766E);\n }\n\n /* Interactive state */\n .oc-node--interactive {\n cursor: pointer;\n }\n\n .oc-node--interactive:hover .oc-node__circle {\n transform: scale(1.2);\n background-color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-node--interactive:active .oc-node__circle {\n transform: scale(1.1);\n }\n\n /* Pulse animation */\n .oc-node--pulse .oc-node__circle {\n animation: oc-node-pulse 2s ease-in-out infinite;\n }\n\n @keyframes oc-node-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 var(--oc-accent-light, rgba(15, 118, 110, 0.4));\n }\n 50% {\n box-shadow: 0 0 0 6px var(--oc-accent-light, rgba(15, 118, 110, 0));\n }\n }\n\n /* Count badge */\n .oc-node__count {\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%);\n margin-left: 4px;\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n line-height: 1;\n }\n\n .oc-node--active .oc-node__count,\n .oc-node--interactive:hover .oc-node__count {\n color: var(--oc-accent, #0F766E);\n }\n\n\n\n .oc-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Variants */\n .oc-edge--solid .oc-edge__line {\n stroke-dasharray: none;\n }\n\n .oc-edge--dashed .oc-edge__line {\n stroke-dasharray: 6 4;\n }\n\n .oc-edge--dotted .oc-edge__line {\n stroke-dasharray: 2 3;\n }\n\n /* States */\n .oc-edge--active .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge--active .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-edge--muted .oc-edge__line {\n stroke: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n .oc-edge--muted .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n /* Hover state */\n .oc-edge:hover .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge:hover .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n /* Animation */\n .oc-edge--animated .oc-edge__line {\n stroke-dasharray: 8 4;\n animation: oc-edge-flow 1s linear infinite;\n }\n\n @keyframes oc-edge-flow {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: -12;\n }\n }\n\n /* Label */\n .oc-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge:hover .oc-edge__label-group,\n .oc-edge--active .oc-edge__label-group {\n opacity: 1;\n }\n\n .oc-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-edge--active .oc-edge__label-bg {\n stroke: var(--oc-accent, #0F766E);\n }\n\n .oc-edge__label {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 10px;\n font-weight: 500;\n fill: var(--oc-fg-secondary, #475569);\n }\n\n .oc-edge--active .oc-edge__label {\n fill: var(--oc-accent, #0F766E);\n }\n\n\n\n .oc-relationship-badge {\n display: inline-flex;\n align-items: center;\n gap: 0;\n padding: 2px 4px 2px 2px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-badge:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 1px;\n }\n\n .oc-relationship-badge--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-badge--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector line */\n .oc-relationship-badge__connector {\n width: 6px;\n height: 1px;\n background-color: var(--oc-fg-tertiary, #94A3B8);\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__connector,\n .oc-relationship-badge--active .oc-relationship-badge__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Count */\n .oc-relationship-badge__count {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1;\n transition: color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__count,\n .oc-relationship-badge--active .oc-relationship-badge__count {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Size: sm */\n .oc-relationship-badge--sm {\n gap: 0;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__connector {\n width: 5px;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__count {\n font-size: 10px;\n }\n\n /* Size: md */\n .oc-relationship-badge--md {\n padding: 3px 6px 3px 3px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__connector {\n width: 8px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__count {\n font-size: var(--oc-font-size-xs, 11px);\n }\n\n\n\n .oc-relationship-pill {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-pill:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-pill:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-pill--active {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-pill--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-pill--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector */\n .oc-relationship-pill__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__connector,\n .oc-relationship-pill--active .oc-relationship-pill__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-pill__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-pill__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Title */\n .oc-relationship-pill__title {\n flex: 1;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Type label */\n .oc-relationship-pill__type {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* Direction indicators */\n .oc-relationship-pill--incoming .oc-relationship-pill__type::before {\n content: '\u2190 ';\n opacity: 0.6;\n }\n\n .oc-relationship-pill--outgoing .oc-relationship-pill__type::after {\n content: ' \u2192';\n opacity: 0.6;\n }\n\n /* AI source badge */\n .oc-relationship-pill__source-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-fg-tertiary, #94A3B8);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .oc-relationship-pill--source-analyzer .oc-relationship-pill__source-badge {\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border-color: var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n\n\n\n .oc-relationship-popover {\n min-width: 280px;\n max-width: 360px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 24px rgba(0, 0, 0, 0.12));\n overflow: hidden;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Header */\n .oc-relationship-popover__header {\n padding: 12px 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-relationship-popover__title {\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n }\n\n /* List */\n .oc-relationship-popover__list {\n padding: 4px;\n overflow-y: auto;\n }\n\n /* Scrollbar styling */\n .oc-relationship-popover__list::-webkit-scrollbar {\n width: 6px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb {\n background-color: var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb:hover {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n /* Item */\n .oc-relationship-popover__item {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__item:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-popover__item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n /* Node indicator */\n .oc-relationship-popover__node {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n flex-shrink: 0;\n }\n\n /* Connector */\n .oc-relationship-popover__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-popover__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-popover__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Document title */\n .oc-relationship-popover__doc-title {\n flex: 1;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__doc-title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Relationship type */\n .oc-relationship-popover__rel-type {\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* AI badge */\n .oc-relationship-popover__ai-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border: 1px solid var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n /* Footer */\n .oc-relationship-popover__footer {\n padding: 8px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n }\n\n .oc-relationship-popover__graph-link {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-relationship-popover__graph-link:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-popover__graph-link svg {\n transition: transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover svg {\n transform: translateX(2px);\n }\n\n\n\n /* ============================================\n * Document Graph Container\n * ============================================ */\n .oc-document-graph {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n }\n\n .oc-document-graph__canvas {\n width: 100%;\n height: 100%;\n cursor: grab;\n user-select: none;\n }\n\n .oc-document-graph--dragging .oc-document-graph__canvas {\n cursor: grabbing;\n }\n\n .oc-document-graph__svg {\n display: block;\n }\n\n .oc-document-graph__content {\n transform-origin: 0 0;\n }\n\n /* Empty state */\n .oc-document-graph__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-document-graph__empty svg {\n opacity: 0.5;\n }\n\n .oc-document-graph__empty p {\n margin: 0;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n }\n\n /* ============================================\n * Graph Node\n * ============================================ */\n .oc-graph-node {\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node__ring {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n opacity: 0.3;\n }\n\n .oc-graph-node--selected .oc-graph-node__ring,\n .oc-graph-node--focus .oc-graph-node__ring {\n opacity: 0.5;\n stroke-width: 2.5;\n }\n\n .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n stroke: var(--oc-bg-surface, #FFFFFF);\n stroke-width: 2;\n transition:\n fill var(--oc-transition-fast, 0.15s) ease,\n transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node:hover .oc-graph-node__circle {\n fill: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-graph-node--depth-1 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--depth-2 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n opacity: 0.7;\n }\n\n .oc-graph-node__initial {\n fill: var(--oc-bg-surface, #FFFFFF);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node__icon-wrapper {\n overflow: visible;\n }\n\n .oc-graph-node__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--oc-bg-surface, #FFFFFF);\n }\n\n .oc-graph-node__icon svg {\n width: 60%;\n height: 60%;\n }\n\n .oc-graph-node__title {\n fill: var(--oc-fg-primary, #1E293B);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 500;\n }\n\n .oc-graph-node--focus .oc-graph-node__title {\n font-weight: 600;\n }\n\n .oc-graph-node__count {\n fill: var(--oc-fg-tertiary, #94A3B8);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Expand badge */\n .oc-graph-node__expand-badge {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 1.5;\n }\n\n .oc-graph-node__expand-icon {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-badge {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-icon {\n fill: var(--oc-bg-surface, #FFFFFF);\n }\n\n /* ============================================\n * Graph Edge\n * ============================================ */\n .oc-graph-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-graph-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #CBD5E1);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge__arrow {\n fill: var(--oc-border-default, #CBD5E1);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__line,\n .oc-graph-edge--selected .oc-graph-edge__line {\n stroke-width: 2;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__line {\n opacity: 0.3;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__arrow {\n opacity: 0.3;\n }\n\n /* Label */\n .oc-graph-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__label-group,\n .oc-graph-edge--selected .oc-graph-edge__label-group {\n opacity: 1;\n }\n\n .oc-graph-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-graph-edge__label {\n fill: var(--oc-fg-secondary, #475569);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 11px;\n font-weight: 500;\n }\n\n .oc-graph-edge__ai-badge-bg {\n fill: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n }\n\n .oc-graph-edge__ai-badge {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n /* ============================================\n * Graph Controls\n * ============================================ */\n .oc-graph-controls {\n position: absolute;\n bottom: 16px;\n left: 16px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n max-width: calc(100% - 32px);\n }\n\n .oc-graph-controls__group {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: var(--oc-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));\n }\n\n .oc-graph-controls__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: 6px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__button:hover:not(:disabled) {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n .oc-graph-controls__button--active {\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n color: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-controls__button--text {\n min-width: 44px;\n font-variant-numeric: tabular-nums;\n }\n\n .oc-graph-controls__load-more {\n padding: 6px 12px;\n }\n\n /* Filters */\n .oc-graph-controls__filters {\n gap: 4px;\n }\n\n .oc-graph-controls__filter {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px 4px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__filter:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-graph-controls__filter--active {\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__filter-dot {\n width: 8px;\n height: 8px;\n border-radius: var(--oc-radius-full, 9999px);\n flex-shrink: 0;\n }\n\n .oc-graph-controls__filter:not(.oc-graph-controls__filter--active) .oc-graph-controls__filter-dot {\n opacity: 0.4;\n }\n\n /* Spinner */\n .oc-graph-controls__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0F766E);\n border-radius: 50%;\n animation: oc-spin var(--oc-animation-spin, 0.8s) linear infinite;\n }\n\n";
|
|
2097
2459
|
|
|
2098
|
-
export { AIAvatar, AIResponse, type AIResponseProps, ActionButton, type ActionButtonProps, ActionItem, type ActionItemData, type ActionItemProps, ActionList, type ActionListProps, ActivityFeed, type ActivityFeedProps, ActivityItem, type ActivityItemData, type ActivityItemProps, Alert, type AlertProps, type AlertVariant, type AnimationScale, AppShell, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, type AppShellProps, AppShellSidebar, type AppShellSidebarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Banner, type BannerProps, type BreadcrumbItem, type BreakpointScale, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardFooter, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardVariant, CategoryBadge, type CategoryBadgeProps, type CellAction, ChatContainer, type ChatContainerProps, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, ChatMessageSkeleton, ChatMessages, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipColor, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipVariant, Citation, type CitationProps, CollectionCard, type CollectionCardProps, CollectionList, type CollectionListProps, type CollectionType, type ColorScale, DataGrid, type DataGridColumn, type DataGridColumnType, type DataGridProps, type DiscussionAuthor, type DiscussionCategory, type DiscussionFilterOption, DiscussionFilters, type DiscussionFiltersProps, DiscussionItem, type DiscussionItemProps, DiscussionList, type DiscussionListProps, type DiscussionSortOption, DiscussionStats, type DiscussionStatsProps, type DiscussionStatus, Divider, type DividerProps, DocumentCardSkeleton, type DocumentType, EmptyDocumentIcon, EmptyFolderIcon, EmptyInboxIcon, EmptyNotificationIcon, EmptySearchIcon, EmptyState, type EmptyStateProps, type EmptyStateSize, ExtractCard, type ExtractCardProps, ExtractList, type ExtractListProps, type ExtractStatus, FileList, FileListItem, type FileListItemProps, type FileListProps, FilePathBreadcrumb, type FilePathBreadcrumbProps, FileSystem, type FileSystemContextValue, type FileSystemItem, FileSystemLayout, type FileSystemLayoutProps, FileSystemMain, type FileSystemMainProps, type FileSystemProps, FileSystemSidebar, type FileSystemSidebarProps, FileSystemToolbar, type FileSystemToolbarProps, type FileSystemViewMode, type FileType, FilesIcon, FilterChip, type FilterChipProps, type FilterOption, FilterPanel, type FilterPanelProps, type FilterSection, FilterTab, type FilterTabItem, type FilterTabProps, FilterTabs, type FilterTabsProps, type FilterValues, FolderTree, FolderTreeItem, type FolderTreeItemProps, type FolderTreeProps, type FontSizeScale, FormField, type FormFieldProps, HStack, type HStackProps, Hero, HeroAction, type HeroActionProps, HeroActions, type HeroActionsProps, HeroBadge, type HeroBadgeProps, HeroContent, type HeroContentProps, HeroMedia, type HeroMediaProps, type HeroProps, HeroSearch, type HeroSearchProps, type HeroSize, HeroSubtitle, type HeroSubtitleProps, HeroTitle, type HeroTitleProps, type HeroVariant, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, IntegrationIcon, type LineHeightScale, LinkedResource, type LinkedResourceProps, Mention, type MentionProps, MessageActions, type MessageActionsProps, type MessageRole, type MessageStatus, Modal, ModalBody, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, NavBar, type NavBarProps, type NavItem, NewDiscussionButton, type NewDiscussionButtonProps, type OpacityScale, PageHeader, type PageHeaderProps, Pane, type PaneProps, PanelAction, PanelActionList, type PanelActionListProps, type PanelActionProps, PanelSearch, type PanelSearchProps, PanelSection, type PanelSectionProps, PanelTab, type PanelTabProps, PanelTabs, type PanelTabsProps, PlusIcon, type PolymorphicComponentProp, type PolymorphicRef, Popover, type PopoverPlacement, type PopoverProps, type PopoverTrigger, Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps, type ProgressSize, type ProgressVariant, ProjectItem, type ProjectItemProps, ProjectPicker, type ProjectPickerProps, ProjectSearch, type ProjectSearchProps, type ProjectType, PromptsIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadiusScale, ReactionBar, type ReactionBarProps, ReactionButton, type ReactionButtonProps, type ReactionType, ResearchCard, type ResearchCardProps, ResearchSection, type ResearchSectionProps, type ResearchStatus, ResourceList, type ResourceListProps, type ResourceType, RocketIcon, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchBox, type SearchBoxProps, SearchInput, type SearchInputProps, type SearchSuggestion, Select, type SelectOption, type SelectOptionGroup, type SelectProps, type SelectSize, type ShadowScale, Sidebar, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, type SortDirection, SourceCard, type SourceCardProps, SourceList, type SourceListProps, SourcePill, type SourcePillProps, SourcesBadge, type SourcesBadgeProps, SourcesPanel, type SourcesPanelProps, Spacer, type SpacingScale, SparkleIcon, Spinner, type SpinnerProps, type SplitDirection, SplitPane, type SplitPaneProps, Stack, type StackAlign, type StackJustify, type StackProps, type StackSpacing, StatBlock, type StatBlockProps, StatGrid, type StatGridProps, type Status, type StepItem, StepsList, type StepsListProps, SuggestionChip, type SuggestionChipProps, Switch, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, TableRowSkeleton, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, TaskCard, type TaskCardProps, type TaskStatus, Textarea, type TextareaProps, ThinkingBlock, type ThinkingBlockProps, ThreadAction, type ThreadActionProps, ThreadInput, type ThreadInputProps, ThreadMeta, type ThreadMetaProps, ThreadPost, type ThreadPostProps, ThreadReply, type ThreadReplyProps, type ThreadStatus, ThreadView, type ThreadViewProps, Toast, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type Tokens, ToolbarButton, type ToolbarButtonProps, ToolbarSeparator, Tooltip, type TooltipPlacement, type TooltipProps, TypingIndicator, type TypingIndicatorProps, UploadIcon, type UserMenuItem, UserQuestion, type UserQuestionProps, VStack, type VStackProps, type ZIndexScale, actionListStyles, activityFeedStyles, alertStyles, allStyles, appShellStyles, avatarStyles, buttonStyles, cardStyles, chatStyles, checkboxStyles, chipStyles, collectionCardStyles, dataGridStyles, discussionStyles, emptyStateStyles, extractCardStyles, fileSystemStyles, filterPanelStyles, filterTabsStyles, formFieldStyles, heroStyles, inputStyles, modalStyles, navBarStyles, pageHeaderStyles, popoverStyles, progressStyles, projectPickerStyles, radioStyles, researchCardStyles, scrollAreaStyles, searchBoxStyles, searchInputStyles, selectStyles, sidebarStyles, skeletonStyles, sourceCardStyles, sourcesPanelStyles, splitPaneStyles, stackStyles, statBlockStyles, tabsStyles, textareaStyles, threadStyles, toastStyles, toggleStyles, tokens, tooltipStyles, useAppShell, useFileSystem, useToast, utilitiesStyles };
|
|
2460
|
+
export { AIAvatar, AIResponse, type AIResponseProps, ActionButton, type ActionButtonProps, ActionItem, type ActionItemData, type ActionItemProps, ActionList, type ActionListProps, ActivityFeed, type ActivityFeedProps, ActivityItem, type ActivityItemData, type ActivityItemProps, Alert, type AlertProps, type AlertVariant, type AnimationScale, AppShell, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, type AppShellProps, AppShellSidebar, type AppShellSidebarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Banner, type BannerProps, type BreadcrumbItem, type BreakpointScale, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardFooter, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardVariant, CategoryBadge, type CategoryBadgeProps, type CellAction, ChatContainer, type ChatContainerProps, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, ChatMessageSkeleton, ChatMessages, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipColor, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipVariant, Citation, type CitationProps, CollectionCard, type CollectionCardProps, CollectionList, type CollectionListProps, type CollectionType, type ColorScale, DataGrid, type DataGridColumn, type DataGridColumnType, type DataGridProps, type DiscussionAuthor, type DiscussionCategory, type DiscussionFilterOption, DiscussionFilters, type DiscussionFiltersProps, DiscussionItem, type DiscussionItemProps, DiscussionList, type DiscussionListProps, type DiscussionSortOption, DiscussionStats, type DiscussionStatsProps, type DiscussionStatus, Divider, type DividerProps, DocumentCardSkeleton, DocumentGraph, type DocumentGraphProps, type DocumentRelationship, type DocumentType, Edge, type EdgeProps, type EdgeVariant, EmptyDocumentIcon, EmptyFolderIcon, EmptyInboxIcon, EmptyNotificationIcon, EmptySearchIcon, EmptyState, type EmptyStateProps, type EmptyStateSize, ExtractCard, type ExtractCardProps, ExtractList, type ExtractListProps, type ExtractStatus, FileList, FileListItem, type FileListItemProps, type FileListProps, FilePathBreadcrumb, type FilePathBreadcrumbProps, FileSystem, type FileSystemContextValue, type FileSystemItem, FileSystemLayout, type FileSystemLayoutProps, FileSystemMain, type FileSystemMainProps, type FileSystemProps, FileSystemSidebar, type FileSystemSidebarProps, FileSystemToolbar, type FileSystemToolbarProps, type FileSystemViewMode, type FileType, FilesIcon, FilterChip, type FilterChipProps, type FilterOption, FilterPanel, type FilterPanelProps, type FilterSection, FilterTab, type FilterTabItem, type FilterTabProps, FilterTabs, type FilterTabsProps, type FilterValues, FolderTree, FolderTreeItem, type FolderTreeItemProps, type FolderTreeProps, type FontSizeScale, FormField, type FormFieldProps, GraphControls, type GraphControlsProps, type GraphData, type GraphDocument, GraphEdge, type GraphEdgeData, type GraphEdgeProps, type GraphFilters, type GraphLayout, GraphNode, type GraphNodeData, type GraphNodeProps, HStack, type HStackProps, Hero, HeroAction, type HeroActionProps, HeroActions, type HeroActionsProps, HeroBadge, type HeroBadgeProps, HeroContent, type HeroContentProps, HeroMedia, type HeroMediaProps, type HeroProps, HeroSearch, type HeroSearchProps, type HeroSize, HeroSubtitle, type HeroSubtitleProps, HeroTitle, type HeroTitleProps, type HeroVariant, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, IntegrationIcon, type LineHeightScale, LinkedResource, type LinkedResourceProps, Mention, type MentionProps, MessageActions, type MessageActionsProps, type MessageRole, type MessageStatus, Modal, ModalBody, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, NavBar, type NavBarProps, type NavItem, NewDiscussionButton, type NewDiscussionButtonProps, Node, type NodeProps, type NodeSize, type NodeVariant, type OpacityScale, PageHeader, type PageHeaderProps, Pane, type PaneProps, PanelAction, PanelActionList, type PanelActionListProps, type PanelActionProps, PanelSearch, type PanelSearchProps, PanelSection, type PanelSectionProps, PanelTab, type PanelTabProps, PanelTabs, type PanelTabsProps, PlusIcon, type PolymorphicComponentProp, type PolymorphicRef, Popover, type PopoverPlacement, type PopoverProps, type PopoverTrigger, type Position, Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps, type ProgressSize, type ProgressVariant, ProjectItem, type ProjectItemProps, ProjectPicker, type ProjectPickerProps, ProjectSearch, type ProjectSearchProps, type ProjectType, PromptsIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadiusScale, ReactionBar, type ReactionBarProps, ReactionButton, type ReactionButtonProps, type ReactionType, RelationshipBadge, type RelationshipBadgeProps, type RelationshipItem, type RelationshipLabel, RelationshipPill, type RelationshipPillProps, RelationshipPopoverContent, type RelationshipPopoverContentProps, type RelationshipSource, ResearchCard, type ResearchCardProps, ResearchSection, type ResearchSectionProps, type ResearchStatus, ResourceList, type ResourceListProps, type ResourceType, RocketIcon, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchBox, type SearchBoxProps, SearchInput, type SearchInputProps, type SearchSuggestion, Select, type SelectOption, type SelectOptionGroup, type SelectProps, type SelectSize, type ShadowScale, Sidebar, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, type SortDirection, SourceCard, type SourceCardProps, SourceList, type SourceListProps, SourcePill, type SourcePillProps, SourcesBadge, type SourcesBadgeProps, SourcesPanel, type SourcesPanelProps, Spacer, type SpacingScale, SparkleIcon, Spinner, type SpinnerProps, type SplitDirection, SplitPane, type SplitPaneProps, Stack, type StackAlign, type StackJustify, type StackProps, type StackSpacing, StatBlock, type StatBlockProps, StatGrid, type StatGridProps, type Status, type StepItem, StepsList, type StepsListProps, SuggestionChip, type SuggestionChipProps, Switch, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, TableRowSkeleton, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, TaskCard, type TaskCardProps, type TaskStatus, Textarea, type TextareaProps, ThinkingBlock, type ThinkingBlockProps, ThreadAction, type ThreadActionProps, ThreadInput, type ThreadInputProps, ThreadMeta, type ThreadMetaProps, ThreadPost, type ThreadPostProps, ThreadReply, type ThreadReplyProps, type ThreadStatus, ThreadView, type ThreadViewProps, Toast, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type Tokens, ToolbarButton, type ToolbarButtonProps, ToolbarSeparator, Tooltip, type TooltipPlacement, type TooltipProps, TypingIndicator, type TypingIndicatorProps, UploadIcon, type UserMenuItem, UserQuestion, type UserQuestionProps, VStack, type VStackProps, type ZIndexScale, actionListStyles, activityFeedStyles, alertStyles, allStyles, appShellStyles, avatarStyles, buttonStyles, cardStyles, chatStyles, checkboxStyles, chipStyles, collectionCardStyles, dataGridStyles, discussionStyles, documentGraphStyles, edgeStyles, emptyStateStyles, extractCardStyles, fileSystemStyles, filterPanelStyles, filterTabsStyles, formFieldStyles, heroStyles, inputStyles, modalStyles, navBarStyles, nodeStyles, pageHeaderStyles, popoverStyles, progressStyles, projectPickerStyles, radioStyles, relationshipBadgeStyles, relationshipPillStyles, relationshipPopoverStyles, researchCardStyles, scrollAreaStyles, searchBoxStyles, searchInputStyles, selectStyles, sidebarStyles, skeletonStyles, sourceCardStyles, sourcesPanelStyles, splitPaneStyles, stackStyles, statBlockStyles, tabsStyles, textareaStyles, threadStyles, toastStyles, toggleStyles, tokens, tooltipStyles, useAppShell, useFileSystem, useGraphLayout, useToast, utilitiesStyles };
|