/*!************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/tokens.css ***! \************************************************************************************************************************************************************************************************************************************************************/ /* ========================================================================== Mitrix design tokens — three layers: 1. Primitive (--p-*) raw palette / scales. Never use directly in components. 2. Semantic (--color-*, --text-*, --space-*, --radius-*, --shadow-*, …) purpose-named; the only layer that changes per theme. 3. Component (--btn-*, --input-*, --modal-*, …) per-component knobs. Legacy names (--bg, --ink, --accent, …) are aliased at the bottom so existing CSS/TSX keeps working while it migrates. See docs/DESIGN-SYSTEM.md. Light is the default theme; dark is opt-in via . Visual language: light-grey ground, content on a white rounded "canvas" that floats a few px off the viewport edge, pill buttons, 1px hairlines, very soft shadows. The blue brand colour appears only on primary buttons, active items, focus rings and links. ========================================================================== */ /* ---------- 1. Primitives ------------------------------------------------ */ :root { /* Blue — brand / primary actions */ --p-blue-50: #eef2ff; --p-blue-100: #dfe6ff; --p-blue-200: #bfccff; --p-blue-300: #93a8fb; --p-blue-400: #6d86f7; --p-blue-500: #4a66f0; --p-blue-600: #3552e0; --p-blue-700: #2a41b8; --p-blue-800: #243795; --p-blue-900: #1f2f74; --p-blue-950: #0b1233; /* Green — success */ --p-green-50: #eff8f2; --p-green-100: #d7efdf; --p-green-200: #b0dfc1; --p-green-300: #7fcb9c; --p-green-400: #4bbd7a; --p-green-500: #2d9f5f; --p-green-600: #1e8549; --p-green-700: #1a7240; --p-green-800: #165a34; --p-green-900: #11432a; --p-green-950: #0a2718; /* Neutrals — cool grey, a faint blue cast so they sit with the brand. */ --p-neutral-0: #ffffff; --p-neutral-25: #fafbfc; --p-neutral-50: #f4f5f7; --p-neutral-75: #eff1f4; --p-neutral-100: #e9ecf0; --p-neutral-150: #e2e6eb; --p-neutral-200: #d1d6de; --p-neutral-300: #a8b0bc; --p-neutral-400: #8a93a0; --p-neutral-500: #646d7a; --p-neutral-600: #555e6b; --p-neutral-700: #3a424e; --p-neutral-800: #2a2f37; --p-neutral-850: #1f2329; --p-neutral-900: #17191d; --p-neutral-950: #0e1013; /* Teal — spare accent (not currently mapped). */ --p-teal-50: #e9f7f6; --p-teal-100: #c9ece8; --p-teal-400: #3fbfb0; --p-teal-600: #0d7c70; --p-teal-700: #0a655c; --p-teal-900: #0b3632; --p-red-50: #fdf0ee; --p-red-100: #f8dbd5; --p-red-400: #e8806e; --p-red-600: #b8452f; --p-red-700: #9a3726; --p-red-900: #3d1911; --p-amber-50: #fdf6e8; --p-amber-100: #f7e5c1; --p-amber-400: #e6b164; --p-amber-600: #b3701a; --p-amber-700: #8c5610; --p-amber-900: #3a2708; /* Cyan — info / citations (kept apart from the blue brand) */ --p-cyan-50: #e8f6fa; --p-cyan-100: #c8e9f1; --p-cyan-400: #5cc3d9; --p-cyan-600: #0e7490; --p-cyan-700: #0b6277; --p-cyan-900: #0b2e38; /* Violet — AI "thinking" / skills */ --p-violet-50: #f4effd; --p-violet-100: #e6dbfa; --p-violet-400: #a887e6; --p-violet-600: #7a4fd1; --p-violet-700: #6340b0; --p-violet-900: #1c1330; } /* ---------- 2. Semantic — theme-independent scales ------------------------ */ :root { /* Typography. IBM Plex Sans Thai shares Plex's skeleton, so Thai and Latin read as one family. It must come before system fallbacks. */ --font-sans: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* 10-step type scale (replaces 25 ad-hoc sizes). */ --text-2xs: 11px; /* badges, token counts, meta */ --text-xs: 12px; /* captions, helper text, section labels */ --text-sm: 13px; /* secondary UI, table cells, menu hints */ --text-base: 14px; /* default UI text, buttons, nav items */ --text-md: 15px; /* chat message body */ --text-lg: 17px; /* modal / card titles */ --text-xl: 20px; /* page titles */ --text-2xl: 24px; /* empty-chat greeting */ --text-3xl: 30px; /* stat numbers, login headline */ --text-4xl: 36px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Thai has stacked vowels/tone marks above and below the line, so every step here is looser than a Latin-only UI would use. Controls use min-height + padding (never a fixed height) so Thai never clips. */ --leading-tight: 1.3; /* headings, single-line controls */ --leading-snug: 1.5; /* dense UI, tables, menus */ --leading-normal: 1.7; /* chat prose, paragraphs */ /* Spacing — 4px grid (2 and 6 for tight control internals). */ --space-0: 0; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radius — big and soft. */ --radius-xs: 6px; /* inline code, tiny tags */ --radius-sm: 8px; /* menu items, small tiles */ --radius-md: 12px; /* inputs, nav items, table wrap */ --radius-lg: 16px; /* cards, popovers, message bubbles */ --radius-xl: 20px; /* modals */ --radius-2xl: 24px; /* app canvas, composer */ --radius-full: 999px; /* buttons, pills, icon buttons */ /* Motion */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Layering */ --z-sticky: 10; --z-dropdown: 100; --z-drawer: 200; --z-modal: 300; --z-popover: 400; --z-toast: 500; --z-banner: 600; /* Layout */ --canvas-gap: 10px; /* white canvas inset from the viewport */ --side-w-default: 264px; --rail-w: 62px; --preview-w-default: 560px; --topbar-h: 60px; --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px; /* also the touch-target minimum on mobile */ --content-max: 760px; /* chat column reading width */ --icon-stroke: 1.5; /* the one stroke width for every line icon */ } /* ---------- 2. Semantic — light theme (default) ---------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; --color-bg: var(--p-neutral-50); /* app ground, around the canvas */ --color-canvas: var(--p-neutral-0); /* the floating white work area */ --color-surface: var(--p-neutral-0); /* cards, modals, menus */ --color-surface-2: var(--p-neutral-75); /* icon buttons, subtle wells */ --color-surface-sunken: var(--p-neutral-50); --color-surface-hover: var(--p-neutral-75); --color-overlay: rgba(18, 22, 30, 0.32); /* modal scrim — soft */ --color-border: var(--p-neutral-150); --color-border-strong: var(--p-neutral-200); --color-text: #1a1d23; --color-text-secondary: var(--p-neutral-700); --color-text-muted: var(--p-neutral-600); /* ≥4.5:1 on bg and surfaces */ --color-text-faint: var(--p-neutral-500); /* ≥4.5:1 on surface; hints, meta */ --color-text-inverse: var(--p-neutral-0); --color-link: var(--p-blue-700); --color-primary: var(--p-blue-600); --color-primary-hover: var(--p-blue-700); --color-primary-active: var(--p-blue-800); --color-on-primary: var(--p-neutral-0); --color-primary-soft: var(--p-blue-50); /* active nav, selected rows */ --color-primary-soft-hover: var(--p-blue-100); --color-primary-line: var(--p-blue-200); --color-primary-text: var(--p-blue-700); /* brand text on soft tint */ --color-success: var(--p-green-700); --color-success-bg: var(--p-green-50); --color-success-border: var(--p-green-100); --color-warning: var(--p-amber-700); --color-warning-bg: var(--p-amber-50); --color-warning-border: var(--p-amber-100); --color-warning-solid: var(--p-amber-600); /* icons, bars — not body text */ --color-danger: var(--p-red-600); --color-danger-hover: var(--p-red-700); --color-danger-bg: var(--p-red-50); --color-danger-border: var(--p-red-100); --color-info: var(--p-cyan-700); --color-info-bg: var(--p-cyan-50); --color-info-border: var(--p-cyan-100); --color-ai: var(--p-violet-600); /* thinking, skills */ --color-ai-bg: var(--p-violet-50); --color-ai-border: var(--p-violet-100); --color-focus-ring: var(--p-blue-500); /* Very soft, two-part shadows: a hairline contact + a wide low-alpha blur. */ --shadow-xs: 0 1px 2px rgba(18, 22, 30, 0.04); --shadow-sm: 0 1px 2px rgba(18, 22, 30, 0.04), 0 2px 6px rgba(18, 22, 30, 0.04); --shadow-md: 0 1px 2px rgba(18, 22, 30, 0.04), 0 6px 20px rgba(18, 22, 30, 0.06); --shadow-lg: 0 2px 6px rgba(18, 22, 30, 0.04), 0 16px 40px rgba(18, 22, 30, 0.10); --shadow-xl: 0 4px 12px rgba(18, 22, 30, 0.05), 0 28px 64px rgba(18, 22, 30, 0.14); } /* ---------- 2. Semantic — dark theme ------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: var(--p-neutral-950); --color-canvas: var(--p-neutral-900); --color-surface: var(--p-neutral-900); --color-surface-2: var(--p-neutral-850); --color-surface-sunken: #0b0c0f; --color-surface-hover: #23272e; --color-overlay: rgba(0, 0, 0, 0.55); --color-border: #262a31; --color-border-strong: #353b45; --color-text: #e8ebf0; --color-text-secondary: #c2c8d2; --color-text-muted: #969eab; --color-text-faint: #838c9a; --color-text-inverse: var(--p-neutral-950); --color-link: var(--p-blue-300); --color-primary: var(--p-blue-400); --color-primary-hover: var(--p-blue-300); --color-primary-active: var(--p-blue-200); --color-on-primary: var(--p-blue-950); --color-primary-soft: #1a2140; --color-primary-soft-hover: #212a52; --color-primary-line: #33427e; --color-primary-text: var(--p-blue-300); --color-success: var(--p-green-400); --color-success-bg: #10271a; --color-success-border: #1d4a30; --color-warning: var(--p-amber-400); --color-warning-bg: #2a200d; --color-warning-border: #4a3713; --color-warning-solid: var(--p-amber-400); --color-danger: var(--p-red-400); --color-danger-hover: #f09a8a; --color-danger-bg: #2c1611; --color-danger-border: #52271d; --color-info: var(--p-cyan-400); --color-info-bg: #0c2830; --color-info-border: #16434f; --color-ai: var(--p-violet-400); --color-ai-bg: var(--p-violet-900); --color-ai-border: #3a2a5e; --color-focus-ring: var(--p-blue-400); /* On dark grounds elevation reads from borders more than blur. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.55); } /* ---------- 3. Component tokens ------------------------------------------ If a subtree ever re-scopes semantic colours, add its selector here and to the legacy aliases so var() references resolve against the local values. */ :root { /* Buttons — pill shaped */ --btn-h: var(--control-h-md); --btn-h-sm: var(--control-h-sm); --btn-h-lg: var(--control-h-lg); --btn-px: var(--space-5); --btn-radius: var(--radius-full); --btn-font-size: var(--text-base); --btn-font-weight: var(--weight-medium); --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-hover); --btn-primary-fg: var(--color-on-primary); --btn-secondary-bg: var(--color-surface); --btn-secondary-bg-hover: var(--color-surface-hover); --btn-secondary-fg: var(--color-text); --btn-secondary-border: var(--color-border-strong); --btn-ghost-fg: var(--color-text-secondary); --btn-ghost-bg-hover: var(--color-surface-hover); --btn-danger-bg: var(--color-danger); --btn-danger-bg-hover: var(--color-danger-hover); --btn-danger-fg: var(--color-text-inverse); --icon-btn-bg: transparent; --icon-btn-bg-hover: var(--color-surface-hover); --icon-btn-fg: var(--color-text-secondary); /* Inputs */ --input-h: var(--control-h-md); --input-px: var(--space-3); --input-bg: var(--color-surface); --input-border: var(--color-border-strong); --input-border-hover: var(--color-text-faint); --input-border-focus: var(--color-primary); --input-radius: var(--radius-md); --input-placeholder: var(--color-text-faint); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 28%, transparent); --focus-outline: 2px solid var(--color-focus-ring); /* Canvas / cards */ --canvas-radius: var(--radius-2xl); --canvas-border: var(--color-border); --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-lg); --card-pad: var(--space-5); --card-shadow: var(--shadow-xs); /* Overlays */ --modal-bg: var(--color-surface); --modal-radius: var(--radius-xl); --modal-shadow: var(--shadow-xl); --modal-pad: var(--space-6); --menu-bg: var(--color-surface); --menu-radius: var(--radius-lg); --menu-shadow: var(--shadow-lg); --menu-item-radius: var(--radius-sm); /* Nav (chat sidebar + admin nav) */ --nav-item-h: var(--control-h-md); --nav-item-radius: var(--radius-md); --nav-item-fg: var(--color-text-secondary); --nav-item-bg-hover: var(--color-surface-hover); --nav-item-bg-active: var(--color-primary-soft); --nav-item-fg-active: var(--color-text); /* Tables */ --table-head-bg: var(--color-surface-sunken); --table-row-hover: var(--color-surface-sunken); --table-cell-py: var(--space-3); --table-cell-px: var(--space-4); /* Pills / chips */ --pill-radius: var(--radius-full); --pill-font-size: var(--text-xs); --pill-px: var(--space-2-5); /* Chat */ --bubble-user-bg: var(--color-primary-soft); --bubble-user-fg: var(--color-text); --bubble-radius: var(--radius-lg); --message-font-size: var(--text-md); --message-leading: var(--leading-normal); --composer-bg: var(--color-surface); --composer-border: var(--color-border-strong); --composer-radius: var(--radius-2xl); --composer-shadow: none; /* border, not shadow */ --composer-border-focus: var(--color-primary); --send-bg: var(--color-text); /* near-black in light, inverts in dark */ --send-bg-hover: var(--color-text-secondary); --send-fg: var(--color-canvas); --chip-bg: var(--color-surface-2); --chip-bg-on: var(--color-primary-soft); --chip-fg-on: var(--color-primary-text); --chip-border-on: var(--color-primary-line); /* Trust signals — keep these visually distinct from each other. */ --grounded-fg: var(--color-success); --grounded-bg: var(--color-success-bg); --ungrounded-fg: var(--color-warning); --ungrounded-bg: var(--color-warning-bg); --thinking-fg: var(--color-ai); --thinking-bg: var(--color-ai-bg); --citation-fg: var(--color-info); --citation-bg: var(--color-info-bg); } /* ---------- Legacy aliases ------------------------------------------------ Existing globals.css / inline TSX styles read these. Several (--text, --faint, --ink-soft, --accent-soft, --accent-line, --amber, --brand-*) were referenced but never defined before, so those declarations were silently dropped. Remove each alias once nothing references it. */ :root { --bg: var(--color-bg); --surface: var(--color-surface); --surface-2: var(--color-surface-2); --sunk: var(--color-surface-sunken); --border: var(--color-border); --ink: var(--color-text); --text: var(--color-text); --ink-soft: var(--color-text-secondary); --muted: var(--color-text-muted); --faint: var(--color-text-faint); --accent: var(--color-primary); --accent-ink: var(--color-on-primary); --accent-soft: var(--color-primary-soft); --accent-line: var(--color-primary-line); --brand-tint: var(--color-primary-soft); --brand-deep: var(--color-primary-text); --user-bubble: var(--bubble-user-bg); --ok: var(--color-success); --warn: var(--color-warning); --amber: var(--color-warning); --amber-tint: var(--color-warning-bg); --danger: var(--color-danger); --violet: var(--color-ai); --sans: var(--font-sans); --mono: var(--font-mono); --display: var(--font-sans); } /*!*************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***! \*************************************************************************************************************************************************************************************************************************************************************/ /* Colours, type, spacing, radius, shadow and motion tokens live in tokens.css (imported first by layout.tsx). Prefer the semantic --color-* / --space-* / --radius-* names in new CSS; the short legacy names are aliases. */ html, body { transition: background-color 0.18s ease, color 0.18s ease; } * { box-sizing: border-box; } html, body { padding: 0; margin: 0; height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } a { color: var(--accent); } button { font-family: inherit; } /* Collapsed rail: keeps logo, new chat, expand, and user avatar. Hidden unless collapsed. */ /* When the impersonation banner (40px) is shown above the app, shrink the app and its full-height columns so nothing is clipped at the bottom. */ /* Drag handle on the sidebar's right edge to resize its width. */ /* Collapse / expand button in the topbar (desktop). */ /* Mitr Phol M-mark used next to the Mitrix wordmark (sidebar + admin). */ /* About box */ .about-modal { max-width: 380px; } .about-body { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; } .about-logo { width: 190px; max-width: 80%; height: auto; margin-bottom: 6px; } .about-ver { font-weight: 700; font-size: 15px; color: var(--ink); } .about-built { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--muted); } .about-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 300px; } .about-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--faint); width: 100%; } /* "Shared with me" is pinned below the scrolling chat list — always visible, never scrolls away. */ /* Inline rename input — used for chats AND projects, always inside the (dark) sidebar, so it must use the sidebar's own surface/ink tokens (not --bg, which stays light). */ /* Actions float over the row's right edge only on hover, so the title uses the full width. A left-fading gradient keeps the buttons legible where they overlap the title's tail. */ /* PR-1: Projects in the sidebar */ /* CM-1: temporary chat */ .tempchat { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; background: transparent; color: var(--ink); border: 1px dashed var(--muted); border-radius: 10px; padding: 9px 12px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; } .tempchat:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); } .tempchat.on { border-style: solid; border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } /* Compact two-up quick actions (Temporary + Library) under New chat. */ /* SR-1: chat search */ /* read-only (someone else's) chat in a shared project */ /* project invitation card */ /* move-to-project popover */ .menu-backdrop { position: fixed; inset: 0; z-index: 55; } /* Accessibility: text-size (A−/A+) — scales chat content + composer */ .thread { zoom: var(--chat-zoom, 1); } .composer { zoom: var(--chat-zoom, 1); } /* Knowledge base panel */ /* Mode switch + knowledge toggle */ .kb-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; } .kb-toggle input { accent-color: var(--accent); } .msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .msg-att-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; max-width: 360px; color: var(--ink); font-family: inherit; } .msg-att-chip .ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-att-chip:hover { border-color: var(--muted); } .msg-att-chip.generated { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 9px 14px; font-size: 13.5px; font-weight: 500; } .msg-att-chip.generated .ac-icon { color: var(--accent); font-weight: 700; font-size: 15px; } .msg-att-chip.generated .ac-dl { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; font-family: "IBM Plex Mono", monospace; } .msg-att-chip.generated:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); } /* Generated-file download panel — shown at the END of an assistant answer. */ .msg-downloads { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); border-left: 3px solid var(--accent); } .msg-downloads .dl-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-family: "IBM Plex Mono", monospace; margin-bottom: 8px; } .msg-downloads .msg-attachments { margin-bottom: 0; } .gen-img { max-width: 512px; width: 100%; border-radius: 12px; border: 1px solid var(--border); } .gen-img-wrap { display: inline-flex; flex-direction: column; gap: 8px; max-width: 512px; } .gen-img-actions { display: flex; gap: 8px; } /* GL-1: auto-save confirmation / reconnect prompt under generated files */ .save-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; margin: 2px 0 8px; } .save-note.ok { color: var(--ok); font-weight: 600; } .save-note.ok .sn-ck { width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-grid; place-items: center; font-size: 10px; } .save-note.ok code { font-family: "IBM Plex Mono", monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; color: var(--ink); font-weight: 500; } .save-note.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 8px; padding: 6px 10px; } .save-note.warn .sn-btn { font-family: inherit; font-size: 12px; font-weight: 600; border: 1px solid var(--warn); background: transparent; color: var(--warn); border-radius: 7px; padding: 4px 10px; cursor: pointer; } .save-note.warn .sn-btn:hover { background: color-mix(in srgb, var(--warn) 16%, transparent); } /* GL-1 Library modal */ .lib-modal { max-width: 1040px; width: 100%; display: flex; flex-direction: column; max-height: 86vh; } .lib-src { font-size: 12px; color: var(--muted); margin-left: 12px; } .lib-src code { font-family: "IBM Plex Mono", monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--ink); } .lib-live { color: var(--ok); font-weight: 600; } .lib-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); } .lib-search { position: relative; flex: 1 1; min-width: 180px; display: flex; align-items: center; } .lib-search span { position: absolute; left: 9px; color: var(--muted); font-size: 13px; } .lib-search input { width: 100%; padding: 8px 10px 8px 30px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 13px; background: var(--surface-2); color: var(--ink); } .lib-chips { display: flex; flex-wrap: wrap; gap: 6px; } .lib-chip { font-size: 12.5px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; font-family: inherit; } .lib-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .lib-dotc { width: 8px; height: 8px; border-radius: 2px; } .lib-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .lib-seg button { padding: 6px 11px; cursor: pointer; background: var(--surface); color: var(--muted); font-size: 12px; border: none; font-family: "IBM Plex Mono", monospace; } .lib-seg button.on { background: var(--surface-2); color: var(--ink); font-weight: 600; } .lib-body { padding: 6px 18px 18px; overflow: auto; flex: 1 1; } .lib-group { margin-top: 16px; } .lib-ghead { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .lib-gi { width: 9px; height: 9px; border-radius: 2px; } .lib-gc { font-weight: 500; } .lib-ln { flex: 1 1; height: 1px; background: var(--border); } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); grid-gap: 12px; gap: 12px; } .lib-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; transition: box-shadow .12s, border-color .12s; } .lib-card:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(0,0,0,.08); } .lib-thumb { height: 92px; background: var(--surface-2); display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--border); } .lib-badge { position: absolute; top: 8px; left: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #fff; border-radius: 5px; padding: 2px 6px; text-transform: uppercase; } .lib-ficon { font-size: 30px; } .lib-meta { padding: 9px 11px 4px; } .lib-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-sub { font-size: 11px; color: var(--muted); margin-top: 3px; } .lib-act { display: flex; gap: 6px; padding: 6px 11px 11px; } .lib-mini { flex: 1 1; font-family: inherit; font-size: 11.5px; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; padding: 5px 0; cursor: pointer; color: var(--ink); text-align: center; } .lib-mini:hover { border-color: var(--accent); color: var(--accent); } .lib-mini.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } /* list view */ .lib-body.view-list .lib-grid { display: flex; flex-direction: column; gap: 6px; } .lib-body.view-list .lib-card { display: flex; align-items: center; } .lib-body.view-list .lib-thumb { height: auto; width: 46px; flex: none; border: none; background: transparent; } .lib-body.view-list .lib-badge { display: none; } .lib-body.view-list .lib-ficon { font-size: 20px; } .lib-body.view-list .lib-meta { flex: 1 1; min-width: 0; padding: 9px 10px; } .lib-body.view-list .lib-act { padding: 9px 12px; } .lib-body.view-list .lib-mini { flex: none; padding: 5px 12px; } /* small icons view */ .lib-body.view-small .lib-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; } .lib-body.view-small .lib-thumb { height: 48px; } .lib-body.view-small .lib-badge { top: 5px; left: 5px; font-size: 8.5px; padding: 1px 5px; } .lib-body.view-small .lib-ficon { font-size: 19px; } .lib-body.view-small .lib-meta { padding: 7px 9px 8px; } .lib-body.view-small .lib-name { font-size: 12px; } .lib-body.view-small .lib-sub { font-size: 10px; } .lib-body.view-small .lib-act { display: none; } /* states */ .lib-state { text-align: center; color: var(--muted); padding: 44px 20px; } .lib-state .lib-big { font-size: 36px; } .lib-state b { color: var(--ink); font-size: 15px; display: block; margin: 10px 0 4px; } .lib-state p { margin: 0 auto; max-width: 44ch; font-size: 13px; } .lib-state code { font-family: "IBM Plex Mono", monospace; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; } .lib-cta { margin-top: 14px; font-family: inherit; font-size: 13px; background: var(--accent); border: none; color: var(--accent-ink); font-weight: 600; border-radius: 8px; padding: 9px 18px; cursor: pointer; } .lib-foot { padding: 9px 18px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); } /* TB-1 What's New — badge, panel, coachmark */ .wn-bd { position: fixed; inset: 0; z-index: 40; } .wn-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 88vw; z-index: 45; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.22); overflow: hidden; } .wn-pop-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14.5px; } .wn-pop-head .wn-allread { margin-left: auto; font-size: 11.5px; color: var(--accent); font-weight: 600; background: none; border: none; cursor: pointer; font-family: inherit; } .wn-pop-head .wn-x { font-size: 18px; color: var(--muted); background: none; border: none; cursor: pointer; line-height: 1; } .wn-pop-list { max-height: 60vh; overflow: auto; } .wn-item { display: flex; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .wn-item:last-child { border-bottom: none; } .wn-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--accent-soft); display: grid; place-items: center; font-size: 16px; } .wn-item.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); } .wn-item.unread .wn-ic { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); } .wn-t { display: flex; align-items: center; gap: 7px; } .wn-t b { font-size: 13.5px; } .wn-pill { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 5px; padding: 1px 6px; color: #fff; } .wn-pill.k-feature { background: var(--accent); } .wn-pill.k-skill { background: #7a4fd1; } .wn-pill.k-tip { background: var(--warn); } .wn-pill.k-news { background: #2a5db0; } .wn-when { margin-left: auto; font-size: 11px; color: var(--muted); } .wn-blurb { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .wn-try { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--accent); border-radius: 7px; padding: 4px 11px; cursor: pointer; font-family: inherit; } .wn-try:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .wn-pop-foot { padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); text-align: center; } /* coachmark */ .tb-coach { position: fixed; width: 262px; z-index: 60; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.3); padding: 13px 14px; } .tb-coach::before { content: ""; position: absolute; top: -8px; left: 24px; width: 14px; height: 14px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } .tb-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; } .tb-coach h4 { margin: 9px 0 4px; font-size: 14px; } .tb-coach p { margin: 0; font-size: 12.5px; color: var(--muted); } .tb-coach-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .tb-got { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px; padding: 6px 14px; font-weight: 600; font-size: 12.5px; cursor: pointer; font-family: inherit; } .tb-link { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; } /* Compare: topbar controls */ /* Compare: in-thread two columns — full width & responsive */ .msg.compare-msg { max-width: none; margin: 0 0 20px; padding: 0 24px; } .thread-compare { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; } .thread-compare.picked { grid-template-columns: minmax(0, 820px); justify-content: center; } /* chosen result centered */ .tc-col { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; min-width: 0; } .tc-col.b { border-color: var(--accent-line); } .tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--sunk, #0f1917); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; } .tc-pick { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); border-radius: 7px; padding: 4px 11px; font-size: 11.5px; cursor: pointer; font-family: var(--sans, inherit); white-space: nowrap; } .tc-pick:hover { background: var(--accent); color: var(--accent-ink); } .tc-body { padding: 14px 16px; flex: 1 1; min-width: 0; } .tc-body .bubble.md { white-space: normal; } .tc-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 12px; } .tc-foot { padding: 8px 14px; border-top: 1px solid var(--border); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--faint); } @media (max-width: 760px) { .thread-compare { grid-template-columns: 1fr; } } .sources { margin-top: 8px; font-size: 12px; color: var(--muted); font-family: "IBM Plex Mono", monospace; } .usage-line { margin-top: 6px; font-size: 11.5px; color: var(--faint); font-family: "IBM Plex Mono", monospace; letter-spacing: 0.02em; } /* Per-response transparency: which model answered + whether it's grounded */ .resp-meta { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .resp-model { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; } .resp-badge { font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 9px; cursor: default; } .resp-badge.grounded { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .resp-badge.ungrounded { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); } .fb-group { display: inline-flex; gap: 4px; margin-left: auto; } .act.fb { padding: 3px 8px; } .act.fb.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .act.fb.reported { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } /* Citations — clickable source rows (open a popup) shown before the token line */ .citations { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; } .cite-h { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* Compact single-line rows: title + shortened URL side by side (Option B). */ .cite-list { margin: 4px 0 0; display: flex; flex-direction: column; gap: 0; } .cite-row { width: 100%; display: flex; align-items: baseline; gap: 8px; text-align: left; cursor: pointer; background: none; border: 1px solid transparent; padding: 1px 8px; border-radius: 6px; font-family: inherit; line-height: 1.35; text-decoration: none; color: inherit; } .cite-row:hover { background: var(--surface-2); border-color: var(--border); } .cite-num { flex-shrink: 0; color: var(--accent); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600; } .cite-body { display: flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1; overflow: hidden; } .cite-domain { color: var(--ink); font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; } .cite-url { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; } .cite-caret { flex-shrink: 0; color: var(--muted); font-size: 11px; font-family: "IBM Plex Mono", monospace; opacity: 0; } .cite-row:hover .cite-caret { opacity: 1; } /* Inline [n] citation chip inside the answer text */ .cite-ref { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border: none; border-radius: 5px; padding: 0 4px; margin: 0 1px; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 0.82em; font-weight: 600; line-height: 1.4; vertical-align: baseline; } .cite-ref:hover { background: var(--accent); color: var(--accent-ink); } /* Source popup */ .src-scrim { position: fixed; inset: 0; background: rgba(4, 10, 9, 0.66); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; animation: src-fade 0.12s ease-out; } @keyframes src-fade { from { opacity: 0; } to { opacity: 1; } } .src-modal { width: 100%; max-width: 620px; max-height: 82vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); } .src-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .src-head-l { display: flex; align-items: center; gap: 10px; } .src-kind { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .src-refbadge { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 20px; padding: 3px 10px; } .src-x { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; } .src-x:hover { color: var(--ink); } .src-body { padding: 16px 20px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .src-field { display: flex; flex-direction: column; gap: 4px; } .src-k { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .src-v { font-size: 14px; font-weight: 600; word-break: break-word; } .src-link { font-family: "IBM Plex Mono", monospace; font-size: 12.5px; word-break: break-all; } .src-passage { display: flex; flex-direction: column; gap: 6px; } .src-content { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: break-word; } .src-empty { font-size: 13px; color: var(--muted); font-style: italic; } /* Message action buttons */ .actions { display: flex; gap: 6px; margin-top: 8px; opacity: 0; transition: opacity 0.12s; } .msg:hover .actions, .actions:focus-within { opacity: 1; } .act { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; } .act:hover { color: var(--ink); border-color: var(--muted); background: var(--surface-2); } .act:disabled { opacity: 0.5; cursor: default; } @media (hover: none) { .actions { opacity: 1; } } /* ---- Code cards (professional chrome) ---- */ .bubble.md .code-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 0 0 12px; background: var(--surface-2); } .bubble.md .code-head { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: var(--surface); border-bottom: 1px solid var(--border); } .bubble.md .code-lang { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } /* Collapsed code: the head bar is the whole card — no dangling divider. */ .bubble.md .code-card.collapsed .code-head { border-bottom: none; } .bubble.md .code-fold { display: flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--muted); font-family: inherit; } .bubble.md .code-fold:hover { color: var(--ink); } .bubble.md .code-fold:hover .code-lang { color: var(--ink); } .bubble.md .code-caret { font-size: 10px; color: var(--muted); width: 10px; } .bubble.md .code-fold-meta { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: inherit; opacity: 0.8; } .code-actions { display: flex; gap: 6px; } .code-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; font-family: inherit; } .code-btn:hover { color: var(--ink); border-color: var(--muted); } .code-btn.accent { color: var(--accent); border-color: var(--accent); } .code-btn.accent:hover { background: var(--accent); color: var(--accent-ink); } .bubble.md .code-card pre { margin: 0; border: none; border-radius: 0; background: transparent; padding: 14px 16px; } /* Mermaid diagram */ .bubble.md .mermaid-wrap { padding: 16px; background: var(--bg); overflow-x: auto; text-align: center; } .bubble.md .mermaid-svg svg { max-width: 100%; height: auto; } .bubble.md .mermaid-err { color: var(--muted); font-size: 12.5px; font-family: "IBM Plex Mono", monospace; padding: 4px; } .mm-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 2px; margin-right: 4px; } .mm-toggle button { background: none; border: none; color: var(--muted); padding: 3px 10px; border-radius: 5px; cursor: pointer; font-size: 11.5px; } .mm-toggle button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; } /* Code interpreter output */ .bubble.md .code-output { border-top: 1px solid var(--border); background: var(--bg); } .bubble.md .code-output-head { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 8px 14px 0; } .bubble.md .code-output-run { padding: 8px 14px 12px; color: var(--accent); font-size: 13px; } .bubble.md .code-output pre { padding: 8px 14px; font-size: 12.5px; white-space: pre-wrap; overflow-x: auto; } .bubble.md .code-output .out-std { color: var(--ink); } .bubble.md .code-output .out-err { color: var(--danger); } .bubble.md .code-output .out-img { display: block; max-width: 100%; margin: 8px 14px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; } /* ---- Preview / internal browser panel ---- */ /* the in-chat TOC and the preview can't both flank the thread — hide the TOC while previewing */ .preview-panel { position: relative; border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-width: 0; min-height: 0; } /* Drag handle on the preview panel's left edge to resize its width. */ .preview-resize { position: absolute; top: 0; left: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 30; touch-action: none; } .preview-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: transparent; transition: background .12s; } .preview-resize:hover::after, .preview-resize.dragging::after { background: var(--accent); } .preview-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); gap: 10px; } .preview-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; } .preview-tabs button { background: none; border: none; color: var(--muted); padding: 6px 16px; border-radius: 7px; cursor: pointer; font-size: 13px; } .preview-tabs button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .preview-tools { display: flex; gap: 6px; align-items: center; } .pv-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 5px 11px; font-size: 13px; cursor: pointer; font-family: inherit; } .pv-btn:hover { color: var(--ink); border-color: var(--muted); } .pv-btn.close:hover { color: var(--danger); border-color: var(--danger); } .preview-frame { flex: 1 1; width: 100%; border: none; background: #fff; } .preview-code { flex: 1 1; margin: 0; overflow: auto; padding: 16px; background: var(--bg); font-family: "IBM Plex Mono", monospace; font-size: 12.5px; line-height: 1.55; white-space: pre; } .preview-foot { padding: 7px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); font-family: "IBM Plex Mono", monospace; letter-spacing: 0.04em; } @media (max-width: 900px) { .preview-panel { position: fixed; inset: 0; z-index: 60; } .preview-resize { display: none; } } /* Admin / usage */ .admin-wrap { max-width: 820px; margin: 0 auto; padding: 40px 24px; } .admin-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .admin-head h1 { margin: 0; letter-spacing: -0.02em; } .admin-head .back { font-size: 13px; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 14px; gap: 14px; margin-bottom: 30px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; } .stat b { display: block; font-size: 30px; letter-spacing: -0.02em; } .stat span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-family: "IBM Plex Mono", monospace; } .sub-h { font-size: 15px; margin: 0 0 12px; } .tbl { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); } .tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th, .tbl td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--border); } .tbl thead th { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .tbl tbody tr:last-child td { border-bottom: none; } .note { margin-top: 14px; font-size: 12.5px; color: var(--muted); } /* ---- Blocked (pending/disabled) screen ---- */ /* ================= Admin portal (professional shell) ================= */ .ap-loading { min-height: 100vh; display: grid; place-items: center; color: var(--color-text-faint); background: var(--color-bg); } .ap { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } /* Sidebar */ .ap-side { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: -webkit-sticky; position: sticky; top: 0; height: 100vh; } .ap-brand { padding: 20px 20px 16px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9px; } .ap-brand em { font-style: normal; font-weight: 500; color: var(--muted); } .ap-brand .brand-logo, .ap-brand img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; } .audit-kind { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; padding: 1px 8px; white-space: nowrap; } .ap-btn.sm { padding: 4px 10px; font-size: 12px; } .ap-pill { display: inline-block; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; } .ap-pill.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); } /* Usage-report breakdowns + trend */ .ap-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 16px; gap: 16px; } .brk-list { display: flex; flex-direction: column; gap: 11px; padding: 14px 18px 18px; } .brk-row { display: grid; grid-template-columns: 150px 1fr 48px; align-items: center; grid-gap: 14px; gap: 14px; } .brk-label { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brk-bar { height: 8px; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .brk-bar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; min-width: 4px; } .brk-count { text-align: right; color: var(--ink); font-weight: 600; font-size: 12.5px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* Activity trend — value on top, shared baseline, date labels below */ .trend { display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 12px 6px 4px; border-bottom: 1px solid var(--border); } .trend-col { flex: 1 1; max-width: 76px; display: flex; flex-direction: column; align-items: center; gap: 7px; } .trend-val { font-size: 11px; color: var(--muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .trend-track { width: 100%; height: 120px; display: flex; align-items: flex-end; } .trend-bar { width: 100%; background: var(--accent); border-radius: 5px 5px 0 0; min-height: 3px; transition: height 0.3s ease; } .trend-x { font-size: 10.5px; color: var(--faint); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; } .ap-brand .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); } .ap-nav { flex: 1 1; overflow-y: auto; padding: 6px 12px; } .ap-navgroup { margin-bottom: 18px; } .ap-navlabel { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 6px; } .ap-nav button { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; background: none; border: none; color: var(--muted); cursor: pointer; padding: 9px 11px; border-radius: 9px; font-size: 14px; margin-bottom: 2px; } .ap-nav button:hover { background: var(--surface-2); color: var(--ink); } .ap-nav button.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); font-weight: 600; } .ap-nav button.on .ap-ico { color: var(--accent); } .ap-ico { width: 16px; text-align: center; color: var(--muted); font-size: 13px; } .ap-badge { margin-left: auto; background: var(--warn); color: #241a05; font-weight: 700; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } .ap-foot { border-top: 1px solid var(--border); padding: 12px; } .ap-back { display: block; font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: 8px; } .ap-back:hover { background: var(--surface-2); color: var(--ink); } .ap-me { display: flex; align-items: center; gap: 9px; padding: 8px 10px 2px; } .ap-me-mail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Avatar */ .ap-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); color: var(--accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.02em; } .ap-avatar.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; } /* Main */ .ap-main { padding: 34px 40px 60px; width: 100%; min-width: 0; } .ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .ap-head h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; } .ap-count { font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--muted); margin-left: 9px; font-weight: 400; } .ap-desc { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; } .ap-head-actions { display: flex; align-items: center; gap: 10px; } .ap-search { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 9px; padding: 9px 13px; font-size: 13.5px; font-family: inherit; width: 260px; max-width: 100%; } .ap-search:focus { border-color: var(--accent); outline: none; } /* Stat cards */ .ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 14px; gap: 14px; margin-bottom: 26px; } .ap-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; } .ap-stat.link { cursor: pointer; transition: border-color 0.12s; } .ap-stat.link:hover { border-color: var(--accent); } .ap-stat-v { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .ap-stat-k { margin-top: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-family: "IBM Plex Mono", monospace; display: flex; align-items: center; gap: 6px; } .ap-dot-warn { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); } /* Panels */ .ap-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .ap-panel + .ap-panel, .ap-panel + .ap-note { margin-top: 16px; } .ap-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; } .ap-panel-h h2 { margin: 0; font-size: 15px; letter-spacing: -0.01em; } .ap-panel-desc { margin: 4px 0 0; padding: 0 18px; color: var(--muted); font-size: 12.5px; } /* Tables */ .ap-tbl { overflow-x: auto; } .ap-tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ap-tbl th, .ap-tbl td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--border); white-space: nowrap; } .ap-tbl thead th { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; } .ap-tbl tbody tr:last-child td { border-bottom: none; } .ap-tbl tbody tr:hover td { background: var(--surface-2); } .ap-user-cell { display: flex; align-items: center; gap: 10px; } .ap-muted { color: var(--muted); } .ap-empty-cell { color: var(--muted); text-align: center; padding: 26px !important; } .ap-panel-h + .ap-tbl { margin-top: 14px; } .mono { font-family: "IBM Plex Mono", monospace; } /* Pill selects (role / status) */ .ap-pillsel { border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-family: inherit; font-weight: 600; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: var(--surface-2); color: var(--ink); } .ap-pillsel:focus { outline: none; border-color: var(--accent); } .ap-pillsel:disabled { opacity: 0.55; cursor: default; } .ap-pillsel.role-admin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: transparent; } .ap-pillsel.st-active { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border-color: transparent; } .ap-pillsel.st-pending { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); border-color: transparent; } .ap-pillsel.st-disabled { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); border-color: transparent; } .ap-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); } /* Org assignment selector in the users table */ .ap-orgsel { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; font-family: inherit; max-width: 240px; } .ap-orgsel:focus { border-color: var(--accent); outline: none; } .ap-orgpath { font-size: 10.5px; color: var(--faint); margin-top: 3px; font-family: "IBM Plex Mono", monospace; } /* Organization tree */ .org-addrow { display: flex; gap: 10px; padding: 14px 18px; } .org-addrow .ap-input { max-width: 320px; } .org-tree { padding: 6px 18px 16px; } .org-node { } .org-node.k-bu { margin-left: 18px; } .org-node.k-department { margin-left: 18px; } .org-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; } .org-row:hover { background: var(--surface-2); } .org-row:hover .org-actions { opacity: 1; } .org-badge { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; } .org-badge.company { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .org-badge.bu { background: color-mix(in srgb, #a887e6 22%, transparent); color: #c3a9f5; } .org-badge.department { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } .org-name { font-size: 14px; font-weight: 600; } .org-count { font-size: 11px; color: var(--muted); font-family: "IBM Plex Mono", monospace; } .org-actions { margin-left: auto; display: flex; gap: 6px; opacity: 0; transition: opacity 0.12s; } .org-mini { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 3px 9px; font-size: 11.5px; cursor: pointer; font-family: inherit; } .org-mini:hover { color: var(--ink); border-color: var(--muted); } .org-mini.danger:hover { color: var(--danger); border-color: var(--danger); } .org-children { border-left: 1px solid var(--border); margin-left: 16px; padding-left: 6px; } .org-addchild { display: flex; gap: 8px; padding: 6px 10px 10px 28px; } .org-addchild .ap-input { max-width: 280px; } @media (hover: none) { .org-actions { opacity: 1; } } /* Quota editor + usage bars */ .deckstep { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 12px 14px; } .deckstep-head { display: flex; align-items: center; gap: 10px; } /* Skills */ .ap-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; } .skrow { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--border); } .skrow:hover { background: var(--surface-2); } .skrow-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .skrow-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .skrow-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .skrow-assign { flex-shrink: 0; max-width: 220px; text-align: right; display: none; } @media (min-width: 900px) { .skrow-assign { display: block; } } .skrow-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .prof-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px; cursor: pointer; transition: border-color 0.15s; } .prof-card:hover { border-color: var(--muted); } .prof-card-t { font-weight: 700; font-size: 14.5px; } .prof-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } /* Composer skill picker */ .skillpick { position: relative; display: inline-flex; } .skillpick-bd { position: fixed; inset: 0; z-index: 20; } .skillmenu { position: absolute; top: calc(100% + 6px); left: 0; width: 300px; max-width: 80vw; background: var(--surface-2, #16211e); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.5); overflow: hidden auto; max-height: 58vh; z-index: 25; } .skillmenu.up { top: auto; bottom: calc(100% + 6px); } /* open upward when the picker sits at the bottom */ /* Composer tools row (skill picker + toggles) under the chat box — wraps on small screens */ .composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 auto 10px; max-width: 1040px; width: 100%; } .composer-tools .skillpick { position: relative; display: inline-flex; } /* Skill picker — outlined pill when no skill is active, filled when one is, so the active skill is legible and obviously distinct from the plain toggles beside it. */ .composer .skillpick > .kb-toggle { height: auto; line-height: 1.2; border-radius: 16px; padding: 6px 12px; gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--accent); background: transparent; border: 1px solid var(--accent); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer .skillpick > .kb-toggle:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .composer .skillpick > .kb-toggle.deep { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* BU Knowledge picker — outlined pill (override the blanket .composer button fill) */ .composer .bu-btn { height: auto; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 16px; padding: 6px 12px; font-weight: 600; font-size: 12.5px; line-height: 1.2; } .composer .bu-btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .composer .bu-btn.on { background: color-mix(in srgb, var(--accent) 14%, transparent); } .bumenu { position: absolute; left: 0; width: 288px; max-width: 84vw; z-index: 30; background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.35); padding: 8px; max-height: 58vh; overflow: auto; } .bumenu.up { bottom: calc(100% + 6px); } .bumenu-h { font-size: 11px; color: var(--muted); padding: 4px 6px 8px; } .composer .bumenu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: none; border: none; height: auto; border-radius: 8px; padding: 8px; margin: 0; font-family: inherit; font-size: 13.5px; color: var(--ink); } .composer .bumenu-item:hover { background: var(--surface-2); } .composer .bumenu-item.on { background: color-mix(in srgb, var(--accent) 12%, transparent); } .bu-ck { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; border: 1.5px solid var(--accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; } .bu-ck.f { background: var(--accent); } .bu-name { flex: 1 1; } .bu-conf { font-size: 11px; color: var(--muted); white-space: nowrap; } .composer .bumenu-item.bu-all { border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; padding-top: 10px; } .skillmenu-h { padding: 8px 12px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); } /* Scoped under .skillmenu so they out-specify the blanket ".composer button" (teal, 48px) styling. */ .skillmenu .skillmenu-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; width: 100%; height: auto; text-align: left; background: none; border: none; border-radius: 0; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 400; font-family: inherit; } .skillmenu .skillmenu-item:hover, .skillmenu .skillmenu-item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); } .skillmenu .skillmenu-item .mi { width: 22px; text-align: center; flex-shrink: 0; } .skillmenu .skillmenu-item small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; font-weight: 400; } .composer-err { font-size: 12.5px; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: 9px; padding: 8px 12px; margin-bottom: 8px; line-height: 1.5; } /* Theme toggle (sun / moon) */ /* Drag-and-drop file attach overlay */ .dropzone { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg, #0d1513) 78%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 24px; pointer-events: none; } .dropzone-card { border: 2px dashed var(--accent); border-radius: 18px; background: var(--surface, #131e1b); padding: 34px 46px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,0.45); max-width: 90%; } .dropzone-icon { font-size: 40px; line-height: 1; } .dropzone-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 12px; } .dropzone-sub { font-size: 13px; color: var(--muted); margin-top: 6px; } /* Slash-command typeahead (rises above the composer input). Selectors are scoped under .slashmenu so they out-specify the blanket ".composer button" (teal, 48px) styling. */ .slashmenu { margin-bottom: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden auto; max-height: 300px; box-shadow: 0 -10px 34px rgba(0,0,0,0.28); } .slashmenu-h { padding: 7px 13px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); position: -webkit-sticky; position: sticky; top: 0; background: var(--surface-2); } .slashmenu .slashmenu-item { display: flex; align-items: center; gap: 11px; width: 100%; height: auto; text-align: left; background: none; border: none; border-radius: 0; color: var(--ink); cursor: pointer; padding: 9px 13px; font-size: 13px; font-weight: 400; font-family: inherit; } .slashmenu .slashmenu-item:hover, .slashmenu .slashmenu-item.on { background: color-mix(in srgb, var(--accent) 16%, transparent); } .slashmenu .slashmenu-item .mi { width: 24px; text-align: center; flex-shrink: 0; font-size: 15px; } .slashmenu .slashmenu-item b { font-weight: 600; color: var(--ink); } .slashmenu .slashmenu-item small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } .ap-reqassign { display: flex; gap: 8px; flex-wrap: wrap; } .ap-rowdel { background: none; border: 1px solid transparent; color: var(--muted); border-radius: 7px; padding: 4px 8px; cursor: pointer; font-size: 14px; } .ap-rowdel:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); } .ap-rowdel:disabled { opacity: 0.3; cursor: default; } .quota-edit { display: flex; align-items: center; gap: 8px; } .usebar { position: relative; height: 16px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; } .usebar > i { display: block; height: 100%; background: var(--accent); } .usebar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-family: "IBM Plex Mono", monospace; color: var(--ink); } /* Buttons */ .ap-btn { border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .ap-btn.primary { background: var(--accent); color: var(--accent-ink); } .ap-btn.ghost { background: var(--surface-2); color: var(--ink); border-color: var(--border); } .ap-btn.ghost:hover:not(:disabled) { border-color: var(--muted); } .ap-btn.ghost-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .ap-btn:disabled { opacity: 0.5; cursor: default; } .ap-saved { color: var(--ok); font-size: 13px; font-weight: 600; } /* Connection form */ .ap-form { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 18px; } .ap-field { display: flex; flex-direction: column; gap: 6px; } .ap-field > span { font-size: 13px; font-weight: 600; } .ap-field > em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.5; } .ap-field-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; } .ap-input.wide { max-width: none; } .ap-derived { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .ap-derived > div { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .ap-derived-k { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); min-width: 100px; } .ap-derived code { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--accent); word-break: break-all; } .ap-form-actions { display: flex; gap: 10px; } .ap-testbar { border-radius: 10px; padding: 11px 15px; font-size: 13px; font-weight: 500; margin-bottom: 14px; border: 1px solid transparent; } .ap-testbar.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .ap-testbar.bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .ap-chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; } .ap-chip.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); } .ap-chip.warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); } .ap-note code { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } /* Endpoint list */ .ep-list { padding: 6px 0; } .ep-none { padding: 10px 18px; } .ep-row { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; grid-gap: 14px; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--border); } .ep-row:first-child { border-top: none; } .ep-row:hover { background: var(--surface-2); } .ep-type { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 4px 0; border-radius: 7px; } .ep-type.chat { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .ep-type.image { background: color-mix(in srgb, #a887e6 22%, transparent); color: #c3a9f5; } .ep-main { min-width: 0; } .ep-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 9px; } .ep-url { font-size: 11.5px; color: var(--muted); margin-top: 3px; word-break: break-all; } .ep-row.off .ep-name, .ep-row.off .ep-url { opacity: 0.5; } .ep-actions { display: flex; align-items: center; gap: 12px; } .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-dot.on { background: var(--ok); } .status-dot.off { background: var(--faint); } .ap-iconbtn { background: none; border: 1px solid var(--border); color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; } .ap-iconbtn:hover { border-color: var(--muted); color: var(--ink); } /* Modal */ .ap-scrim { position: fixed; inset: 0; background: rgba(4,10,9,0.62); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 40; } .ap-modal { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .ap-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); } .ap-modal-h h3 { margin: 0; font-size: 16px; } .ap-x { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; } .ap-modal-b { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; } .ap-modal-f { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--border); } .ap-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 3px; width: -moz-fit-content; width: fit-content; } .ap-seg button { background: none; border: none; color: var(--muted); padding: 7px 18px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; } .ap-seg button.on { background: var(--accent); color: var(--accent-ink); } .ap-seg button.on.image { background: #a887e6; color: #1c1330; } .ap-inline-toggle { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; } .ap-inline-toggle b { font-size: 13px; } .ap-inline-toggle span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; } /* Access requests */ .ap-reqlist { display: flex; flex-direction: column; gap: 10px; } .ap-reqcard { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; } .ap-reqinfo { flex: 1 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ap-reqinfo .ap-muted { font-size: 12.5px; } .ap-reqactions { display: flex; gap: 8px; } /* Empty state */ .ap-empty { text-align: center; padding: 56px 20px; background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; } .ap-empty-ico { font-size: 30px; color: var(--accent); opacity: 0.7; } .ap-empty h3 { margin: 12px 0 5px; font-size: 16px; } .ap-empty p { margin: 0; color: var(--muted); font-size: 13.5px; } /* Models */ .ap-modelcols { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; align-items: start; } .ap-modellist { padding: 6px 18px 16px; } .ap-modelrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .ap-modelrow:first-child { border-top: none; } .ap-check input { accent-color: var(--accent); width: 16px; height: 16px; } .ap-modelmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1; } .ap-modelid { font-size: 10.5px; color: var(--muted); } .ap-input { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; font-size: 13px; font-family: inherit; width: 100%; max-width: 280px; } .ap-input:focus { border-color: var(--accent); outline: none; } /* Settings rows */ .ap-setrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px; border-top: 1px solid var(--border); } .ap-panel-h + .ap-setrow { border-top: none; margin-top: 6px; } .ap-setinfo { display: flex; flex-direction: column; gap: 4px; } .ap-setinfo b { font-size: 14px; } .ap-setinfo span { font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 560px; } .ap-toggle { position: relative; flex-shrink: 0; cursor: pointer; } .ap-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .ap-toggle-track { display: block; width: 42px; height: 24px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--border); transition: background 0.15s; } .ap-toggle-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; } .ap-toggle.on .ap-toggle-track { background: var(--accent); border-color: var(--accent); } .ap-toggle.on .ap-toggle-knob { transform: translateX(18px); background: var(--accent-ink); } .ap-setrow.col { flex-direction: column; align-items: stretch; gap: 12px; } .ap-setrow.col .ap-input { max-width: none; } .ap-numwrap { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .ap-num { width: 92px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; text-align: right; } .ap-num:focus { border-color: var(--accent); outline: none; } .ap-num-suffix { font-size: 12px; color: var(--muted); font-family: "IBM Plex Mono", monospace; } @media (max-width: 900px) { .ap { grid-template-columns: 1fr; } .ap-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .ap-nav { display: flex; gap: 4px; padding: 8px 12px; } .ap-navgroup { margin: 0; display: flex; gap: 4px; } .ap-navlabel { display: none; } .ap-foot { border-top: none; } .ap-main { padding: 24px 20px 48px; } .ap-stats { grid-template-columns: repeat(2, 1fr); } .ap-modelcols { grid-template-columns: 1fr; } .ap-field-row { grid-template-columns: 1fr; } } .mid { display: flex; flex: 1 1; min-height: 0; } .thread { flex: 1 1; min-height: 0; overflow-y: auto; padding: 24px 0; } /* In-chat index / table of contents */ .chat-index { display: none; } .chat-index.open { display: flex; flex-direction: column; width: 280px; flex-shrink: 0; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); overflow: hidden; } .ci-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; } .ci-t { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); flex: 1 1; } .ci-x { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; } .ci-x:hover { color: var(--ink); border-color: var(--muted); } .ci-list { overflow-y: auto; padding: 2px 8px 10px; flex: 1 1; } .ci-turn { margin-bottom: 3px; } .ci-q { width: 100%; display: flex; gap: 8px; align-items: baseline; text-align: left; background: none; border: none; cursor: pointer; color: var(--ink); padding: 7px 9px; border-radius: 8px; font-family: inherit; font-size: 13px; line-height: 1.35; } .ci-q:hover { background: var(--surface-2); } .ci-q.active { background: color-mix(in srgb, var(--accent) 15%, transparent); } .ci-q.active .ci-qn { color: var(--accent); } .ci-qn { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--faint); flex-shrink: 0; } .ci-qt { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ci-subs { margin: 2px 0 5px 24px; border-left: 1px solid var(--border); padding-left: 6px; display: flex; flex-direction: column; } .ci-sub { text-align: left; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; } .ci-sub:hover { background: var(--surface-2); color: var(--ink); } .ci-sub.lvl3 { padding-left: 16px; font-size: 11.5px; } .ci-foot { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--faint); font-family: "IBM Plex Mono", monospace; } .ci-backdrop { display: none; } @media (max-width: 767px) { .chat-index.open { position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 320px); z-index: 40; border-right: none; border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45); } .ci-backdrop { display: block; position: fixed; inset: 0; background: rgba(4, 10, 9, 0.5); z-index: 39; } } .msg { max-width: 1040px; margin: 0 auto 14px; padding: 0 20px; } .msg .role { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; font-family: "IBM Plex Mono", monospace; display: inline-flex; align-items: center; gap: 6px; } .msg .role .role-emoji { font-size: 13px; vertical-align: -1px; } .msg .role .role-av { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0; font-family: var(--font-sans, system-ui); } .bubble { line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; } .msg.user .bubble { background: var(--user-bubble); padding: 12px 15px; border-radius: 14px 14px 4px 14px; max-width: 78%; white-space: pre-wrap; word-break: break-word; } /* Conversation layout: user messages align to the right */ .msg.user { display: flex; flex-direction: column; align-items: flex-end; } .msg.user .role { text-align: right; } .msg.user .msg-attachments { justify-content: flex-end; } .msg.user .actions { justify-content: flex-end; } /* Rendered markdown (assistant) */ .bubble.md { white-space: normal; } .bubble.md > :first-child { margin-top: 0; } .bubble.md > :last-child { margin-bottom: 0; } .bubble.md p { margin: 0 0 12px; } .bubble.md h1, .bubble.md h2, .bubble.md h3, .bubble.md h4 { margin: 18px 0 8px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; } .bubble.md h1 { font-size: 1.45em; } .bubble.md h2 { font-size: 1.25em; } .bubble.md h3 { font-size: 1.1em; } .bubble.md ul, .bubble.md ol { margin: 0 0 12px; padding-left: 22px; } .bubble.md li { margin: 4px 0; } .bubble.md li > ul, .bubble.md li > ol { margin: 4px 0; } .bubble.md a { text-decoration: underline; } .bubble.md strong { font-weight: 700; color: var(--ink); } .bubble.md em { font-style: italic; } .bubble.md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .bubble.md blockquote { margin: 0 0 12px; padding: 2px 14px; border-left: 3px solid var(--accent); color: var(--muted); } .bubble.md code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.88em; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } .bubble.md pre { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 12px; } .bubble.md pre code { background: none; border: none; padding: 0; font-size: 0.85em; } .bubble.md table { border-collapse: collapse; margin: 0 0 12px; font-size: 0.95em; display: block; overflow-x: auto; max-width: 100%; } .bubble.md th, .bubble.md td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; } .bubble.md th { background: var(--surface); font-weight: 600; } .bubble.md.cursor > :last-child::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; } .reasoning { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .reasoning summary { cursor: pointer; padding: 8px 12px; font-size: 12.5px; color: var(--muted); font-family: "IBM Plex Mono", monospace; } .reasoning .r-body { padding: 0 12px 12px; font-size: 13px; color: var(--muted); white-space: pre-wrap; } /* Code Interpreter: collapsed "Analysis" block — hides code + output behind a clean summary so business users see the answer, not the code. */ .analysis { margin: 4px 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow: hidden; } .analysis summary { cursor: pointer; padding: 8px 12px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .analysis summary:hover { color: var(--ink); } .analysis summary .an-ico { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: var(--accent); } .analysis summary .an-hint { color: var(--muted); font-size: 11.5px; opacity: 0.8; } .analysis .an-body { padding: 4px 14px 12px; border-top: 1px solid var(--border); font-size: 13px; } .analysis .an-body :first-child { margin-top: 8px; } /* "Step N" / "Result" act as small section labels (from **bold** markdown). */ .analysis .an-body p strong { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-family: "IBM Plex Mono", monospace; font-weight: 700; margin-top: 6px; } /* Plain, non-interactive code/result — no buttons, no language chip. */ .analysis .an-pre { margin: 4px 0 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; font-size: 12px; line-height: 1.5; } .analysis .an-pre code { font-family: "IBM Plex Mono", monospace; color: var(--ink); white-space: pre; } .bubble:not(.md).cursor::after { content: "▍"; color: var(--accent); animation: blink 1s steps(2) infinite; } .status-line { color: var(--muted); font-style: italic; animation: blink 1.4s ease-in-out infinite; } /* Animated "working" indicator — shown from send until the first token */ .working { display: inline-flex; align-items: center; gap: 11px; padding: 4px 0; } .working-dots { display: inline-flex; gap: 5px; } .working-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; animation: work-bounce 1.1s infinite ease-in-out both; } .working-dots i:nth-child(1) { animation-delay: -0.30s; } .working-dots i:nth-child(2) { animation-delay: -0.15s; } @keyframes work-bounce { 0%, 75%, 100% { transform: translateY(0) scale(0.7); opacity: 0.45; } 35% { transform: translateY(-6px) scale(1); opacity: 1; } } .working-label { font-size: 14px; color: var(--muted); font-weight: 500; animation: work-pulse 1.6s ease-in-out infinite; } @keyframes work-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .working-dots i, .working-label { animation: none; opacity: 1; } } /* Stream status — each working step kept on its own line (✓ done / ⟳ active). */ .status-log { display: flex; flex-direction: column; gap: 7px; padding: 4px 0; } .status-step { display: flex; align-items: center; gap: 9px; font-size: 14px; animation: status-rise .25s ease both; } @keyframes status-rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .status-step .status-ic { width: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .status-step.done { color: var(--muted); } .status-step.done .status-ic { color: var(--ok); font-weight: 800; } .status-step.active { color: var(--ink); font-weight: 600; } .status-spin { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @media (prefers-reduced-motion: reduce) { .status-spin { animation: none; } } /* Deep Research toggle + live progress panel */ .kb-toggle.deep { color: var(--violet, #a887e6); } .kb-toggle.deep input { accent-color: var(--violet, #a887e6); } .dp { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; margin-bottom: 12px; } .dp-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--border); } .dp-title { font-size: 13px; font-weight: 600; } .dp-live { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--violet, #a887e6); display: flex; align-items: center; gap: 7px; } .dp-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--violet, #a887e6); animation: work-pulse 1.2s ease-in-out infinite; } .dp-steps { padding: 4px 0; } .dp-step { display: flex; gap: 12px; padding: 10px 15px; border-top: 1px solid var(--border); } .dp-step:first-child { border-top: none; } .dp-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); font-family: "IBM Plex Mono", monospace; } .dp-ic.done { background: var(--ok); border-color: var(--ok); color: #04231a; } .dp-ic.act { background: var(--violet, #a887e6); border-color: var(--violet, #a887e6); color: #1c1330; } .dp-spin { display: inline-block; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .dp-step.pending .dp-t { color: var(--faint); } .dp-body { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .dp-t { font-size: 13px; font-weight: 600; } .dp-d { font-size: 12px; color: var(--muted); } .dp-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .dp-chip { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; } .dp-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; } .dp-bar > i { display: block; height: 100%; background: var(--violet, #a887e6); width: 0; transition: width 0.35s ease; } .dp-summary { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 12px; } .dp-summary > summary { cursor: pointer; padding: 9px 13px; font-size: 12.5px; color: var(--muted); font-family: "IBM Plex Mono", monospace; } .dp-summary .dp-detail { padding: 0 13px 11px; font-size: 12px; color: var(--muted); line-height: 1.55; } @keyframes blink { 50% { opacity: 0; } } .composer { border-top: 1px solid var(--border); padding: 14px 20px; flex-shrink: 0; } .composer .inner { max-width: 1040px; margin: 0 auto; display: flex; gap: 10px; align-items: flex-end; } .composer textarea { flex: 1 1; resize: none; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; font-size: 14px; font-family: inherit; line-height: 1.5; min-height: 48px; max-height: 220px; overflow-y: auto; display: block; box-sizing: border-box; } .composer button { flex-shrink: 0; height: 48px; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 12px; padding: 0 18px; font-weight: 600; cursor: pointer; } .composer button:disabled { opacity: 0.5; cursor: default; } .composer button.stop-btn { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 8px; } .composer button.stop-btn:hover { border-color: var(--danger); color: var(--danger); } .composer button.stop-btn .stop-sq { width: 10px; height: 10px; border-radius: 2px; background: var(--danger); } .composer-hint { max-width: 1040px; margin: 8px auto 0; font-size: 12px; color: var(--accent); font-family: "IBM Plex Mono", monospace; } .composer .attach-btn { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); width: 48px; padding: 0; font-size: 18px; line-height: 1; } .composer .attach-btn:hover:not(:disabled) { border-color: var(--muted); } /* Session attachment chips (above the input) */ .attach-row { max-width: 1040px; margin: 0 auto 10px; display: flex; flex-wrap: wrap; gap: 8px; } .attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 5px 6px 5px 9px; font-size: 12.5px; } .attach-chip.processing { border-color: var(--accent); animation: chip-pulse 1.3s ease-in-out infinite; } .attach-chip.error { border-color: var(--danger); } .attach-chip.processing .ac-status { color: var(--accent); } @keyframes chip-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 0%, transparent); } } .attach-chip .ac-icon { font-size: 13px; } .attach-chip .ac-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-chip .ac-status { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .attach-chip .ac-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; height: auto; } .attach-chip .ac-del:hover { color: var(--danger); } /* Login */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.04em; } .field input { width: 100%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; font-size: 14px; font-family: inherit; } .go-spin { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); border-top-color: var(--accent-ink); animation: spin 0.6s linear infinite; } .err { color: var(--danger); font-size: 13px; margin-top: 12px; } /* Reusable icon picker (Prompt Library, Skills, Profiles…) */ .iconpick { position: relative; display: inline-block; } .iconpick-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; cursor: pointer; color: var(--ink); } .iconpick-btn:hover { border-color: var(--muted); } .iconpick-cur { font-size: 18px; line-height: 1; } .iconpick-car { font-size: 10px; color: var(--muted); } .iconpick-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 90; width: 288px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.22); overflow: hidden; } .iconpick-search { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .iconpick-search span { color: var(--faint); font-size: 13px; } .iconpick-search input { flex: 1 1; border: none; outline: none; background: none; font: inherit; font-size: 13.5px; color: var(--ink); } .iconpick-body { max-height: 260px; overflow-y: auto; padding: 8px 10px 10px; } .iconpick-grp { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); padding: 8px 2px 4px; } .iconpick-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 3px; gap: 3px; } .iconpick-cell { font-size: 18px; line-height: 1; padding: 6px 0; border: none; background: none; border-radius: 8px; cursor: pointer; } .iconpick-cell:hover { background: var(--surface-2); } .iconpick-cell.on { background: color-mix(in srgb, var(--accent) 18%, transparent); outline: 1px solid var(--accent); } .iconpick-empty { color: var(--muted); font-size: 12.5px; padding: 18px; text-align: center; } /* Prompt Library — top-bar button + slide-over drawer */ .pl-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(10,20,32,.42); display: flex; justify-content: flex-end; animation: src-fade .16s ease; } .pl-drawer { width: min(460px, 94%); height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -14px 0 40px rgba(0,0,0,.22); display: flex; flex-direction: column; animation: pl-slide .22s cubic-bezier(.4,0,.2,1); } @keyframes pl-slide { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } } .pl-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--border); } .pl-title { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .pl-x { margin-left: auto; background: none; border: none; font-size: 20px; color: var(--muted); cursor: pointer; } .pl-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .pl-var { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 4px; padding: 0 4px; font-weight: 600; } .pl-search { margin-top: 11px; position: relative; } .pl-search span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 13px; } .pl-search input { width: 100%; font: inherit; font-size: 13.5px; padding: 9px 12px 9px 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); } .pl-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .pl-chip { font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 20px; padding: 4px 11px; cursor: pointer; } .pl-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; } .pl-list { flex: 1 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .pl-empty { color: var(--muted); font-size: 13px; padding: 26px; text-align: center; } .pl-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; background: var(--surface); } .pl-card:hover { border-color: var(--accent); } .pl-c-top { display: flex; align-items: center; gap: 8px; } .pl-em { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .pl-c-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex: 1 1; min-width: 0; } .pl-feat { font-size: 12px; } .pl-cat { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 6px; padding: 1px 8px; } .pl-tmpl { font-size: 12px; color: var(--muted); line-height: 1.5; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-family: "IBM Plex Mono", ui-monospace, monospace; } .pl-c-bot { display: flex; align-items: center; gap: 8px; } .pl-votes { display: flex; gap: 6px; } .pl-vote { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer; color: var(--muted); } .pl-vote.up { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .pl-vote.dn { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .pl-use { margin-left: auto; background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px; padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .pl-use:hover { filter: brightness(1.06); } /* PL-4 how-to coaching */ .pl-need { flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: #b3701a; background: color-mix(in srgb, #d98a1f 15%, transparent); border: 1px solid color-mix(in srgb, #d98a1f 35%, transparent); border-radius: 6px; padding: 1px 7px; } .pl-coach-btn { display: flex; align-items: center; gap: 6px; width: 100%; margin: 2px 0 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, #d98a1f 30%, var(--border)); background: color-mix(in srgb, #d98a1f 8%, transparent); color: #b3701a; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; } .pl-coach-btn:hover { background: color-mix(in srgb, #d98a1f 14%, transparent); } .pl-coach-btn .pl-caret { margin-left: auto; transition: transform .2s ease; } .pl-coach-btn.on .pl-caret { transform: rotate(180deg); } .pl-coach { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, #d98a1f 6%, var(--surface-2)); border: 1px solid color-mix(in srgb, #d98a1f 22%, var(--border)); } .pl-tip-h { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .pl-tip-b { font-size: 12px; color: var(--muted); line-height: 1.55; white-space: pre-wrap; } /* PL-5 tabs + My Prompts */ .pl-tabs { display: flex; gap: 4px; margin: 4px 0 2px; } .pl-tab { border: none; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); padding: 8px 10px; cursor: pointer; border-bottom: 2px solid transparent; } .pl-tab.on { color: var(--accent); border-bottom-color: var(--accent); } .pl-newbar { display: flex; gap: 8px; margin-bottom: 12px; } .pl-newbar input { flex: 1 1; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px; padding: 9px 12px; } .pl-newbar button { background: color-mix(in srgb, #d98a1f 12%, transparent); color: #b3701a; border: 1px solid color-mix(in srgb, #d98a1f 35%, transparent); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .pl-pin { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; line-height: 1; } .pl-pin.on { color: #d98a1f; } .pl-shared { color: var(--accent); font-size: 12px; } .pl-origin { font-size: 11px; color: var(--muted); margin-top: 5px; font-style: italic; } .pl-mine-bot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pl-mini { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted); } .pl-mini:hover { color: var(--ink); border-color: var(--muted); } .pl-mine-bot .pl-use { margin-left: auto; } .pl-edit-title { flex: 1 1; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--accent); border-radius: 7px; padding: 5px 8px; } .pl-edit-body { width: 100%; margin-top: 8px; min-height: 72px; resize: vertical; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; color: var(--ink); background: var(--surface-2); border: 1px solid var(--accent); border-radius: 9px; padding: 9px 11px; } /* PL-5 share dialog + save modal */ .sp-modal { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.25); overflow: hidden; max-height: 88vh; display: flex; flex-direction: column; } .sp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); } .sp-t { font-weight: 700; font-size: 15px; } .sp-sub { font-size: 12px; color: var(--muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-head .pl-x { margin-left: auto; } .sp-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; } .sp-sec { border: 1px solid var(--border); border-radius: 12px; padding: 12px 13px; } .sp-h { font-weight: 700; font-size: 13.5px; margin-bottom: 2px; } .sp-note { font-size: 12px; color: var(--muted); margin-bottom: 10px; } .sp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; background: var(--surface-2); min-height: 40px; cursor: text; } .sp-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-radius: 999px; padding: 3px 8px 3px 11px; font-size: 12px; font-weight: 600; } .sp-rm { cursor: pointer; opacity: .7; } .sp-chips input { flex: 1 1; min-width: 110px; border: none; background: none; outline: none; font: inherit; font-size: 13px; color: var(--ink); padding: 4px; } .sp-sugg { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: 180px; overflow-y: auto; } .sp-sugg button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: var(--surface); padding: 8px 11px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink); } .sp-sugg button:hover { background: var(--surface-2); } .sp-em { font-size: 11px; color: var(--muted); } .sp-btn { margin-top: 10px; background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 8px 15px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .sp-btn:hover { filter: brightness(1.05); } .sp-btn:disabled { opacity: .55; cursor: default; } .sp-btn.ghost { background: none; border: 1px solid var(--border); color: var(--ink); } .sp-linkrow { display: flex; gap: 8px; } .sp-linkrow input { flex: 1 1; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; } .sp-linkrow .sp-btn { margin-top: 0; white-space: nowrap; } .sp-ok { font-size: 12.5px; color: var(--ok); font-weight: 600; background: color-mix(in srgb, var(--ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: 9px; padding: 8px 11px; } /* PR-1 members list rows (inside the members modal) */ .sp-modal .mem-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; } .sp-modal .mem-row + .mem-row { border-top: 1px solid var(--border); } .sp-modal .mem-row > div:first-child { flex: 1 1; min-width: 0; } .sp-modal .mem-name { font-weight: 600; font-size: 13.5px; color: var(--ink); } .sp-modal .mem-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .sp-modal .role { flex-shrink: 0; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 9px; text-transform: capitalize; } .sp-modal .role.owner { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .sp-modal .role.member { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .sp-modal .role.pending { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); } .sp-modal .rm { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } .sp-modal .rm:hover { color: var(--danger); border-color: var(--danger); } /* PR-2 project files modal */ .pf-drop { border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 13px; padding: 16px; text-align: center; background: color-mix(in srgb, var(--accent) 5%, transparent); cursor: pointer; margin-bottom: 12px; } .pf-drop:hover, .pf-drop.drag-over { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); } .pf-row { display: flex; align-items: center; gap: 11px; padding: 10px 4px; } .pf-row + .pf-row { border-top: 1px solid var(--border); } .pf-ico { font-size: 17px; flex: none; } .pf-main { flex: 1 1; min-width: 0; } .pf-t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; } .pf-st { font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; } .pf-st.ready { color: var(--brand-deep); background: var(--brand-tint); } .pf-st.idx { color: var(--amber); background: var(--amber-tint); } .pf-st.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } .pf-act { flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } .pf-act:hover { color: var(--ink); border-color: var(--muted); } .pf-act.del:hover { color: var(--danger); border-color: var(--danger); } /* PR-3 project instructions modal */ .sp-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .sp-name { width: 100%; margin: 5px 0 0; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; } .sp-preview { margin-top: 10px; font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.55; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; max-height: 130px; overflow-y: auto; white-space: pre-wrap; } .sp-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } .sp-row .sp-btn { margin-top: 0; } .ip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .ip-actions .sp-btn { margin-top: 0; flex: 1 1 auto; text-align: center; } .ip-actions .ip-reject { flex: 0 0 auto; color: var(--danger); } .ip-actions .ip-reject:hover { border-color: var(--danger); } /* ---- Shared (read-only / join) chat view ---- */ .shared-page { min-height: 100vh; background: var(--bg); color: var(--ink); } .shared-head { position: -webkit-sticky; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); } .shared-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shared-sub { font-size: 12px; color: var(--muted); } .shared-join { margin-left: auto; flex-shrink: 0; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); border: none; border-radius: 9px; padding: 8px 16px; cursor: pointer; } .shared-join:disabled { opacity: .6; cursor: progress; } .shared-open { margin-left: auto; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; } .shared-open:hover { text-decoration: underline; } .shared-main { max-width: 820px; margin: 0 auto; padding: 24px 18px 80px; } .shared-empty { text-align: center; color: var(--muted); margin-top: 60px; font-size: 14px; } .shared-msg { display: flex; flex-direction: column; margin: 20px 0; } .shared-msg.is-user { align-items: flex-end; } .shared-msg.is-assistant { align-items: stretch; } .shared-role { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 6px; letter-spacing: .02em; } .shared-bubble { max-width: 80%; padding: 11px 15px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; } .shared-md { background: var(--surface); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; padding: 14px 18px; color: var(--ink); font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; } .shared-md > :first-child { margin-top: 0; } .shared-md > :last-child { margin-bottom: 0; } .shared-md h1, .shared-md h2, .shared-md h3 { color: var(--ink); line-height: 1.3; margin: 18px 0 8px; } .shared-md p, .shared-md li { color: var(--ink); } .shared-md a { color: var(--accent); } .shared-md code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: .9em; } .shared-md pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; overflow-x: auto; } .shared-md pre code { background: none; padding: 0; } .shared-md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13.5px; } .shared-md th, .shared-md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; } .shared-md th { background: var(--surface-2); font-weight: 700; } .shared-md blockquote { border-left: 3px solid var(--border); margin: 8px 0; padding-left: 12px; color: var(--muted); } .shared-think { align-self: stretch; margin-bottom: 8px; font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; } .shared-think summary { cursor: pointer; font-weight: 600; } .shared-think > div { white-space: pre-wrap; padding: 8px 0 2px; color: var(--muted); } .shared-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .shared-att { font-size: 12px; padding: 5px 11px; border-radius: 8px; cursor: pointer; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); } .shared-att:hover { border-color: var(--accent); } /* Live presence on a shared chat — who's here and who's typing. */ @keyframes pres-pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: 0 0 0 3px var(--accent); } } /* ---- Mobile: sidebar becomes a slide-in drawer ---- */ @media (max-width: 760px) { .kb-toggle { font-size: 12px; } .msg { padding: 0 16px; } .composer { padding: 12px 14px; } .preview-panel { position: fixed; inset: 0; z-index: 60; } } /* Personal settings modal — stack the nav above content on narrow screens */ @media (max-width: 560px) { .settings-body { flex-direction: column !important; gap: 0 !important; } .settings-nav { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border); flex-direction: row !important; } } /* Suggested follow-up questions — small, grey, one per line under the latest answer */ .suggests { display: flex; flex-direction: column; margin-top: 10px; } .sugg-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 2px; border: none; border-top: 0.5px solid var(--border); background: transparent; font-size: 13px; color: var(--muted); cursor: pointer; font-family: inherit; transition: color .12s; } .sugg-row:hover { color: var(--ink); } .sugg-row:disabled { opacity: .5; cursor: default; } .sugg-ic { font-size: 12px; color: var(--muted); flex-shrink: 0; } .sugg-row:hover .sugg-ic { color: var(--accent); } /* ========================================================================== Chat shell (redesign step 3): grey ground, sidebar with no card, main area on a floating white canvas. Tokens only. ========================================================================== */ .app { display: grid; grid-template-columns: var(--side-w, var(--side-w-default)) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--color-bg); } .app.side-collapsed { grid-template-columns: var(--rail-w) minmax(0, 1fr); } .app.side-collapsed .sidebar { display: none; } .app.side-collapsed .side-rail { display: flex; } .app.with-preview { grid-template-columns: var(--side-w, var(--side-w-default)) minmax(360px, 1fr) var(--preview-w, var(--preview-w-default)); } .app.with-preview.side-collapsed { grid-template-columns: var(--rail-w) minmax(360px, 1fr) var(--preview-w, var(--preview-w-default)); } .app.with-preview .chat-index { display: none; } .app.with-preview .mid.idx-open { position: static; } /* Impersonation bar (40px) sits above the app. */ .app.imp, .app.imp .sidebar, .app.imp .main { height: calc(100dvh - 40px); } .imp-bar { height: 40px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0 var(--space-4); font-size: var(--text-sm); background: var(--color-warning-bg); color: var(--color-warning); border-bottom: 1px solid var(--color-warning-border); } .imp-bar b { font-weight: var(--weight-semibold); } /* ---- Main = the floating canvas ---- */ .main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: var(--canvas-gap) var(--canvas-gap) var(--canvas-gap) 0; background: var(--color-canvas); border: 1px solid var(--canvas-border); border-radius: var(--canvas-radius); overflow: hidden; } .app.side-collapsed .main { margin-left: 0; } /* ---- Collapsed rail ---- */ .side-rail { display: none; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) 0; min-height: 0; } .side-rail .rail-logo { width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; margin-bottom: var(--space-2); border-radius: var(--radius-sm); } .side-rail .rail-logo img { width: 100%; height: 100%; object-fit: contain; } .side-rail .rail-spacer { flex: 1 1; } .side-rail .rail-avatar { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-full); margin-top: var(--space-2); } /* ---- Sidebar ---- */ .sidebar { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: var(--space-4) var(--space-2) var(--space-2) var(--space-3); color: var(--color-text); } .side-resize { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; z-index: var(--z-sticky); cursor: col-resize; } .side-resize:hover, .side-resize.dragging { background: linear-gradient(90deg, transparent 3px, var(--color-primary-line) 3px, var(--color-primary-line) 5px, transparent 5px); } .side-head { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-4); padding-left: var(--space-1); } .side-brand { flex: 1 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); border: 0; background: none; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); letter-spacing: -0.01em; } .side-brand .brand-logo { width: 28px; height: 28px; object-fit: contain; } .side-head .side-close { display: none; } .side-new { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .side-new > .ui-btn { flex: 1 1; } .side-nav { margin-bottom: var(--space-2); } .side-search { margin-bottom: var(--space-1); } .side-search .ui-input { min-height: 36px; background: var(--color-surface); font-size: var(--text-sm); padding-right: var(--space-8); } .side-search-x { position: absolute; right: var(--space-1); } .convos { flex: 1 1; min-height: 0; overflow-y: auto; margin-right: calc(var(--space-1) * -1); padding-right: var(--space-1); scrollbar-width: thin; } .side-sec { margin-top: var(--space-3); } .side-sec .ui-nav-section__row { padding-right: var(--space-1); } .side-sec-count { margin-left: var(--space-1); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .side-empty-link { display: block; width: 100%; padding: var(--space-1-5) var(--space-3); border: 0; background: none; text-align: left; cursor: pointer; font: inherit; font-size: var(--text-sm); color: var(--color-text-faint); line-height: var(--leading-snug); } .side-empty-link:hover { color: var(--color-text-muted); } .convos .ui-state--compact { padding: var(--space-4) var(--space-2); } /* Rows shared by chats, projects and knowledge files */ .convo, .proj-row, .kb-item { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius: var(--nav-item-radius); cursor: pointer; font-size: var(--text-base); line-height: var(--leading-snug); color: var(--nav-item-fg); transition: background-color var(--duration-fast) var(--ease-standard); } .convo:hover, .proj-row:hover, .kb-item:hover { background: var(--nav-item-bg-hover); color: var(--color-text); } .convo.active { background: var(--nav-item-bg-active); color: var(--nav-item-fg-active); } .convo:focus-visible, .proj-row:focus-visible { outline: var(--focus-outline); outline-offset: -2px; } .convo-title { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .convo-owner { display: block; font-size: var(--text-xs); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; } .convo-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; border-radius: var(--radius-full); color: var(--color-text-faint); } button.convo-mark { cursor: pointer; } button.convo-mark:hover { background: var(--color-surface-2); color: var(--color-danger); } .convo-rename { flex: 1 1; min-width: 0; font: inherit; font-size: var(--text-base); color: var(--color-text); padding: var(--space-0-5) var(--space-2); border: 1px solid var(--input-border-focus); border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: var(--focus-ring); outline: 0; } .convo.readonly .convo-title { color: var(--color-text-muted); } .convo[draggable="true"]:active { cursor: -webkit-grabbing; cursor: grabbing; } /* Hover actions: hidden until row hover / focus / menu open; always on touch. */ .row-actions { flex: none; display: none; align-items: center; gap: var(--space-0-5); } .convo:hover .row-actions, .proj-row:hover .row-actions, .kb-item:hover .row-actions, .convo:focus-within .row-actions, .proj-row:focus-within .row-actions, .kb-item:focus-within .row-actions, .row-actions:has([aria-expanded="true"]) { display: inline-flex; } .convo:hover .convo-mark:not(.shared), .convo:focus-within .convo-mark:not(.shared) { display: none; } @media (hover: none) { .row-actions { display: inline-flex; } } /* Projects */ .proj-group { display: flex; flex-direction: column; } .proj-row { padding-left: var(--space-1-5); } .proj-row.drag-over { background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary-line); } .proj-caret { flex: none; display: inline-flex; color: var(--color-text-faint); } .proj-ico { flex: none; width: 20px; text-align: center; font-size: var(--text-base); } .proj-name { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proj-flag { flex: none; display: inline-flex; align-items: center; gap: var(--space-0-5); font-size: var(--text-2xs); color: var(--color-text-faint); } .proj-count { flex: none; min-width: 18px; text-align: right; font-size: var(--text-xs); color: var(--color-text-faint); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; padding-right: var(--space-1); } .proj-row:hover .proj-count, .proj-row:focus-within .proj-count, .proj-row:has([aria-expanded="true"]) .proj-count { display: none; } .proj-chats { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-0-5); } .proj-empty { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); } .proj-invite { margin: var(--space-2) var(--space-1) 0; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-primary-line); border-radius: var(--radius-md); } .pi-top { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); } .pi-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pi-sub { margin-top: var(--space-0-5); font-size: var(--text-xs); color: var(--color-text-faint); } .pi-actions { display: flex; justify-content: flex-end; gap: var(--space-1-5); margin-top: var(--space-2); } /* Search results */ .search-results { display: flex; flex-direction: column; gap: var(--space-0-5); } .sr-item { display: flex; flex-direction: column; gap: var(--space-0-5); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 0; background: none; border-radius: var(--nav-item-radius); font: inherit; color: var(--color-text); cursor: pointer; } .sr-item:hover { background: var(--nav-item-bg-hover); } .sr-item.active { background: var(--nav-item-bg-active); } .sr-top { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-base); } .sr-top .ui-icon { color: var(--color-text-faint); } .sr-title { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-snip { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sr-owner { font-size: var(--text-2xs); color: var(--color-text-faint); } .sr-item mark, .sr-title mark, .sr-snip mark { background: var(--color-primary-soft); color: var(--color-primary-text); border-radius: var(--radius-xs); padding: 0 1px; } /* Personal knowledge */ .kb-item { cursor: default; padding-left: var(--space-3); } .kb-item > .ui-icon { color: var(--color-text-faint); } .kb-item.error > .ui-icon { color: var(--color-danger); } .kb-main { flex: 1 1; min-width: 0; display: flex; flex-direction: column; } .kb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); } .kb-meta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-2xs); color: var(--color-text-faint); } .kb-err { font-size: var(--text-2xs); color: var(--color-danger); line-height: var(--leading-snug); } .is-spinning .ui-icon { animation: ui-spin 0.8s linear infinite; } /* Footer: view-as banner + account row */ .side-viewas { margin-top: var(--space-2); } .side-viewas .ui-banner { padding: var(--space-2) var(--space-3); } .side-foot { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); } .side-foot .ui-menu-anchor { display: flex; } .side-user { flex: 1 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2); border: 0; background: none; border-radius: var(--radius-md); cursor: pointer; font: inherit; color: var(--color-text); text-align: left; } .side-user:hover, .side-user[aria-expanded="true"] { background: var(--nav-item-bg-hover); } .side-user > .ui-icon { color: var(--color-text-faint); } .side-user-txt { flex: 1 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--leading-snug); } .side-user-txt b { font-size: var(--text-base); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-user-txt span { font-size: var(--text-xs); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Text-size stepper inside the account menu */ .ts-row { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; } .ts-row > .ui-icon { color: var(--color-text-muted); } .ts-label { flex: 1 1; font-size: var(--text-base); } .ts-val { min-width: 48px; padding: var(--space-0-5) var(--space-1); border: 0; background: none; border-radius: var(--radius-xs); cursor: pointer; font: inherit; font-size: var(--text-sm); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text); } .ts-val:hover { background: var(--color-surface-hover); } /* Move-to-project popover */ .move-menu { z-index: var(--z-popover); min-width: 220px; } .mm-ico { width: 18px; text-align: center; } /* ---- Top bar: centred model pill with faint dotted rules ---- */ .topbar { display: flex; align-items: center; gap: var(--space-3); min-height: var(--topbar-h); padding: var(--space-2) var(--space-4); } .tb-rule { flex: 1 1; min-width: var(--space-4); border-top: 1px dashed var(--color-border-strong); } .model-pills { flex: none; display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .model-pill { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3) 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); cursor: pointer; max-width: 280px; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .model-pill:hover { background: var(--color-surface-hover); } .model-pill:focus-within { border-color: var(--input-border-focus); box-shadow: var(--focus-ring); } .model-pill > .ui-icon:first-child { color: var(--color-primary); } .model-pill > .ui-icon:last-child { color: var(--color-text-faint); pointer-events: none; } .model-pill select { -moz-appearance: none; appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: none; cursor: pointer; font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium); color: inherit; min-width: 0; max-width: 200px; text-overflow: ellipsis; padding: var(--space-1-5) 0; } .model-pill select option { color: var(--color-text); background: var(--color-surface); } .tb-tools { flex: none; display: flex; align-items: center; gap: var(--space-1); } .tb-tools .ui-seg { margin-right: var(--space-1); } .topbar .nav-toggle { display: none; } /* Presence */ .presence { display: flex; align-items: center; gap: var(--space-2); margin-right: var(--space-1); } .pres-av.typing { box-shadow: 0 0 0 2px var(--color-primary); } .pres-typing { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; } /* What's new trigger (popup keeps its own styles until the modal step) */ .wn-wrap { position: relative; display: inline-flex; } .wn-trigger { position: relative; } .wn-dot { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 var(--space-1); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); border: 2px solid var(--color-canvas); background: var(--color-danger); color: var(--color-text-inverse); font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1; } /* Temporary-chat notice */ .tempbar { padding: 0 var(--space-4) var(--space-2); } .tempbar .ui-banner { max-width: var(--content-max); margin: 0 auto; } /* ---- Mobile: sidebar becomes a slide-in drawer; canvas goes edge to edge ---- */ .nav-backdrop { display: none; } @media (max-width: 760px) { .app, .app.with-preview, .app.side-collapsed, .app.with-preview.side-collapsed { grid-template-columns: minmax(0, 1fr); } .app.side-collapsed .sidebar { display: flex; } .app.side-collapsed .side-rail, .side-rail { display: none; } .side-resize, .side-head .side-collapse { display: none; } .side-head .side-close { display: inline-flex; } .main { margin: 0; border: 0; border-radius: 0; } .topbar .nav-toggle { display: inline-flex; } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--color-overlay); } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 320px); z-index: var(--z-drawer); background: var(--color-bg); box-shadow: var(--shadow-xl); padding: var(--space-4) var(--space-3) var(--space-3); transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-standard); } .app.nav-open .sidebar { transform: translateX(0); } .topbar { gap: var(--space-2); padding: var(--space-2) var(--space-3); } .topbar .tb-rule { display: none; } .model-pills { flex: 1 1; min-width: 0; } .model-pill { min-width: 0; flex: 1 1; max-width: none; } .model-pill select { max-width: none; flex: 1 1; } .tb-tools .ui-seg, .pres-typing { display: none; } } @media (max-width: 900px) { .app.with-preview { grid-template-columns: var(--side-w, var(--side-w-default)) minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /*!********************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/ui.css ***! \********************************************************************************************************************************************************************************************************************************************************/ /* ========================================================================== Mitrix UI primitives. Every class is prefixed `ui-` so it can't collide with the legacy selectors in globals.css while screens migrate one by one. Values come only from tokens.css — no raw colours, sizes or radii here. React wrappers for the stateful pieces live in ui.tsx. ========================================================================== */ /* ---------- Base ---------------------------------------------------------- */ .ui-icon { flex: none; display: block; } .ui-focusable:focus-visible, .ui-btn:focus-visible, .ui-icon-btn:focus-visible, .ui-nav-item:focus-visible, .ui-menu__item:focus-visible, .ui-chip:focus-visible, .ui-seg__opt:focus-visible, .ui-tab:focus-visible, .ui-switch input:focus-visible + .ui-switch__track { outline: var(--focus-outline); outline-offset: 2px; } .ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- App shell: grey ground + floating white canvas ---------------- */ .ui-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--color-bg); color: var(--color-text); } .ui-shell__side { /* no card: sits directly on the grey ground */ flex: none; display: flex; flex-direction: column; min-height: 0; width: var(--side-w, var(--side-w-default)); padding: var(--space-4) var(--space-3); } .ui-canvas { flex: 1 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; margin: var(--canvas-gap) var(--canvas-gap) var(--canvas-gap) 0; background: var(--color-canvas); border: 1px solid var(--canvas-border); border-radius: var(--canvas-radius); overflow: hidden; } .ui-shell--centered { align-items: center; justify-content: center; padding: var(--space-4); } @media (max-width: 768px) { .ui-canvas { margin: 0; border-radius: 0; border: 0; } } /* ---------- Typography helpers ------------------------------------------ */ .ui-title-xl { font-size: var(--text-2xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: -0.01em; margin: 0; } .ui-title-lg { font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin: 0; } .ui-title { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin: 0; } .ui-text-muted { color: var(--color-text-muted); } .ui-text-faint { color: var(--color-text-faint); } .ui-hint { font-size: var(--text-xs); color: var(--color-text-faint); line-height: var(--leading-snug); } .ui-section-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-faint); line-height: var(--leading-snug); } .ui-kbd { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0 var(--space-1-5); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs); color: var(--color-text-muted); background: var(--color-surface); } .ui-link { color: var(--color-link); text-decoration: none; } .ui-link:hover { text-decoration: underline; } /* ---------- Buttons ------------------------------------------------------- */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--btn-h); padding: var(--space-1-5) var(--btn-px); border: 1px solid transparent; border-radius: var(--btn-radius); font: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); line-height: var(--leading-tight); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .ui-btn[aria-busy="true"] { cursor: progress; } .ui-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .ui-btn--primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); } .ui-btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); } .ui-btn--secondary:hover:not(:disabled) { background: var(--btn-secondary-bg-hover); } .ui-btn--ghost { background: transparent; color: var(--btn-ghost-fg); } .ui-btn--ghost:hover:not(:disabled) { background: var(--btn-ghost-bg-hover); color: var(--color-text); } .ui-btn--danger { background: var(--btn-danger-bg); color: var(--btn-danger-fg); } .ui-btn--danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); } .ui-btn--danger-ghost { background: transparent; color: var(--color-danger); } .ui-btn--danger-ghost:hover:not(:disabled) { background: var(--color-danger-bg); } .ui-btn--sm { min-height: var(--btn-h-sm); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); gap: var(--space-1-5); } .ui-btn--lg { min-height: var(--btn-h-lg); padding: var(--space-2) var(--space-6); font-size: var(--text-md); } .ui-btn--block { display: flex; width: 100%; } /* Round icon button — transparent until hover. */ .ui-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--icon-btn-bg); color: var(--icon-btn-fg); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .ui-icon-btn:hover:not(:disabled) { background: var(--icon-btn-bg-hover); color: var(--color-text); } .ui-icon-btn[aria-pressed="true"], .ui-icon-btn[aria-expanded="true"] { background: var(--color-surface-hover); color: var(--color-text); } .ui-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ui-icon-btn--sm { width: 32px; height: 32px; } .ui-icon-btn--xs { width: 28px; height: 28px; } .ui-icon-btn--filled { background: var(--color-surface-2); } .ui-icon-btn--outline { border: 1px solid var(--color-border-strong); background: var(--color-surface); } .ui-icon-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .ui-icon-btn--primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); } .ui-icon-btn--send { background: var(--send-bg); color: var(--send-fg); } .ui-icon-btn--send:hover:not(:disabled) { background: var(--send-bg-hover); color: var(--send-fg); } .ui-icon-btn--send:disabled { opacity: 0.25; } .ui-spinner { animation: ui-spin 0.8s linear infinite; } @keyframes ui-spin { to { transform: rotate(360deg); } } /* ---------- Form fields -------------------------------------------------- */ .ui-field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; } .ui-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); line-height: var(--leading-snug); } .ui-field__req { color: var(--color-danger); margin-left: var(--space-0-5); } .ui-field__hint { font-size: var(--text-xs); color: var(--color-text-faint); line-height: var(--leading-snug); } .ui-field__error { font-size: var(--text-xs); color: var(--color-danger); line-height: var(--leading-snug); display: flex; gap: var(--space-1); align-items: flex-start; } .ui-field-row { display: grid; grid-gap: var(--space-4); gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .ui-form { display: flex; flex-direction: column; gap: var(--space-5); } .ui-input, .ui-select, .ui-textarea { width: 100%; min-height: var(--input-h); padding: var(--space-2) var(--input-px); font: inherit; font-size: var(--text-base); line-height: var(--leading-snug); color: var(--color-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--input-radius); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .ui-input--pill { border-radius: var(--radius-full); padding-left: var(--space-4); padding-right: var(--space-4); } .ui-textarea { resize: vertical; min-height: 96px; line-height: var(--leading-normal); } .ui-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: var(--space-8); cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .ui-input::placeholder, .ui-textarea::placeholder { color: var(--input-placeholder); } .ui-input:hover:not(:disabled), .ui-select:hover:not(:disabled), .ui-textarea:hover:not(:disabled) { border-color: var(--input-border-hover); } .ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--focus-ring); } .ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { background: var(--color-surface-sunken); color: var(--color-text-muted); cursor: not-allowed; } .ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"], .ui-select[aria-invalid="true"] { border-color: var(--color-danger); } /* Input with a leading icon (search boxes). */ .ui-input-wrap { position: relative; display: flex; align-items: center; } .ui-input-wrap > .ui-icon { position: absolute; left: var(--space-3); color: var(--color-text-faint); pointer-events: none; } .ui-input-wrap > .ui-input { padding-left: var(--space-10); } .ui-input-wrap > .ui-input--pill { padding-left: var(--space-10); } /* Checkbox / radio use native controls tinted with the accent. */ .ui-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-base); line-height: var(--leading-snug); cursor: pointer; } .ui-check input { accent-color: var(--color-primary); width: 16px; height: 16px; margin: 3px 0 0; flex: none; } /* Switch */ .ui-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } .ui-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ui-switch__track { width: 32px; height: 18px; flex: none; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; transition: background-color var(--duration-fast) var(--ease-standard); } .ui-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-xs); transition: transform var(--duration-fast) var(--ease-standard); } .ui-switch input:checked + .ui-switch__track { background: var(--color-primary); } .ui-switch input:checked + .ui-switch__track::after { transform: translateX(14px); } .ui-switch input:disabled + .ui-switch__track { opacity: 0.5; } /* Segmented control (Chat / Image, theme, tabs-lite) */ .ui-seg { display: inline-flex; padding: var(--space-0-5); gap: var(--space-0-5); background: var(--color-surface-2); border-radius: var(--radius-full); } .ui-seg__opt { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 30px; padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-full); background: transparent; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; } .ui-seg__opt:hover { color: var(--color-text); } .ui-seg--icons .ui-seg__opt { padding: var(--space-1) var(--space-2); } .ui-seg__opt[aria-pressed="true"], .ui-seg__opt[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-xs); } /* Tabs (settings modal, admin sub-pages) */ .ui-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; } .ui-tab { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2-5) var(--space-3); margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--text-base); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; } .ui-tab:hover { color: var(--color-text); } .ui-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: var(--weight-medium); } /* ---------- Cards ---------------------------------------------------------- */ .ui-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-pad); min-width: 0; } .ui-card--flush { padding: 0; overflow: hidden; } .ui-card--interactive { cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard); } .ui-card--interactive:hover { border-color: var(--color-border-strong); } .ui-card--selected { border-color: var(--color-primary-line); background: var(--color-primary-soft); } .ui-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .ui-card__title { font-size: var(--text-base); font-weight: var(--weight-medium); margin: 0; } .ui-card__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-0-5) 0 0; } .ui-card__footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); } .ui-card-grid { display: grid; grid-gap: var(--space-4); gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* Stat card */ .ui-stat { display: flex; flex-direction: column; gap: var(--space-1); } .ui-stat__label { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-1-5); } .ui-stat__value { font-size: var(--text-3xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: -0.01em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .ui-stat__delta { font-size: var(--text-xs); color: var(--color-text-faint); } .ui-stat__delta--up { color: var(--color-success); } .ui-stat__delta--down { color: var(--color-danger); } /* Progress / meter (quota bars) */ .ui-meter { height: 6px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; } .ui-meter__bar { height: 100%; border-radius: inherit; background: var(--color-primary); transition: width var(--duration-slow) var(--ease-standard); } .ui-meter--warning .ui-meter__bar { background: var(--color-warning-solid); } .ui-meter--danger .ui-meter__bar { background: var(--color-danger); } /* ---------- Pills, badges, chips ----------------------------------------- */ .ui-pill { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; min-height: 22px; padding: 0 var(--pill-px); border-radius: var(--pill-radius); border: 1px solid transparent; font-size: var(--pill-font-size); font-weight: var(--weight-medium); line-height: var(--leading-snug); white-space: nowrap; background: var(--color-surface-2); color: var(--color-text-secondary); } .ui-pill__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; } .ui-pill--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); } .ui-pill--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); } .ui-pill--danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); } .ui-pill--info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); } .ui-pill--ai { background: var(--color-ai-bg); color: var(--color-ai); border-color: var(--color-ai-border); } .ui-pill--primary { background: var(--color-primary-soft); color: var(--color-primary-text); border-color: var(--color-primary-line); } .ui-pill--outline { background: transparent; border-color: var(--color-border-strong); } .ui-pill--sm { min-height: 18px; padding: 0 var(--space-1-5); font-size: var(--text-2xs); } /* Count badge (nav "Requests 3") */ .ui-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1-5); border-radius: var(--radius-full); background: var(--color-danger); color: var(--color-text-inverse); font-size: var(--text-2xs); font-weight: var(--weight-semibold); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .ui-count--muted { background: var(--color-surface-2); color: var(--color-text-muted); } /* Removable chip (composer toggles that are ON) */ .ui-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); min-height: 28px; padding: var(--space-0-5) var(--space-2) var(--space-0-5) var(--space-2-5); border-radius: var(--radius-full); border: 1px solid var(--chip-border-on); background: var(--chip-bg-on); color: var(--chip-fg-on); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; white-space: nowrap; } .ui-chip:hover { background: var(--color-primary-soft-hover); } .ui-chip__x { display: inline-flex; opacity: 0.7; } .ui-chip:hover .ui-chip__x { opacity: 1; } /* Avatar */ .ui-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-primary-soft); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); } .ui-avatar img { width: 100%; height: 100%; object-fit: cover; } .ui-avatar--sm { width: 24px; height: 24px; font-size: var(--text-2xs); } .ui-avatar--lg { width: 40px; height: 40px; font-size: var(--text-sm); } .ui-avatar-stack { display: inline-flex; } .ui-avatar-stack > .ui-avatar { border: 2px solid var(--color-canvas); margin-left: -6px; } .ui-avatar-stack > .ui-avatar:first-child { margin-left: 0; } /* ---------- Nav (chat sidebar + admin nav) -------------------------------- */ .ui-nav { display: flex; flex-direction: column; gap: var(--space-0-5); } .ui-nav-item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; min-height: var(--nav-item-h); padding: var(--space-1-5) var(--space-3); border: 0; border-radius: var(--nav-item-radius); background: transparent; font: inherit; font-size: var(--text-base); line-height: var(--leading-snug); color: var(--nav-item-fg); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); } .ui-nav-item:hover { background: var(--nav-item-bg-hover); color: var(--color-text); } .ui-nav-item[aria-current="page"], .ui-nav-item[aria-current="true"], .ui-nav-item.is-active { background: var(--nav-item-bg-active); color: var(--nav-item-fg-active); } .ui-nav-item__label { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-nav-item__trail { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-faint); } .ui-nav-section { display: flex; flex-direction: column; gap: var(--space-0-5); margin-top: var(--space-4); } .ui-nav-section__row { display: flex; align-items: center; gap: var(--space-1); } .ui-nav-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-3); border: 0; background: none; font: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-faint); cursor: pointer; text-align: left; } .ui-nav-section__head:hover { color: var(--color-text-muted); } .ui-nav-section__head .ui-icon { transition: transform var(--duration-fast) var(--ease-standard); } .ui-nav-section__head[aria-expanded="false"] .ui-icon { transform: rotate(-90deg); } .ui-nav-group-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-2xs); color: var(--color-text-faint); } /* ---------- Menus / popovers ---------------------------------------------- */ .ui-menu-anchor { position: relative; display: inline-flex; } .ui-menu { position: absolute; z-index: var(--z-dropdown); min-width: 220px; max-width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow-y: auto; padding: var(--space-1-5); background: var(--menu-bg); border: 1px solid var(--color-border); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); animation: ui-pop-in var(--duration-fast) var(--ease-out); } .ui-menu--bottom-start { top: calc(100% + 6px); left: 0; } .ui-menu--bottom-end { top: calc(100% + 6px); right: 0; } .ui-menu--top-start { bottom: calc(100% + 6px); left: 0; } .ui-menu--top-end { bottom: calc(100% + 6px); right: 0; } .ui-menu--wide { min-width: 300px; } .ui-menu__item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; min-height: 38px; padding: var(--space-1-5) var(--space-2-5); border: 0; border-radius: var(--menu-item-radius); background: transparent; font: inherit; font-size: var(--text-base); line-height: var(--leading-snug); color: var(--color-text); text-align: left; cursor: pointer; } .ui-menu__item:hover, .ui-menu__item.is-highlighted { background: var(--color-surface-hover); } .ui-menu__item:disabled { opacity: 0.45; cursor: not-allowed; } .ui-menu__item > .ui-icon { color: var(--color-text-muted); } .ui-menu__label { flex: 1 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .ui-menu__hint { font-size: var(--text-xs); color: var(--color-text-faint); } .ui-menu__trail { flex: none; display: inline-flex; align-items: center; color: var(--color-text-faint); } .ui-menu__item--danger, .ui-menu__item--danger > .ui-icon { color: var(--color-danger); } .ui-menu__custom { padding: var(--space-1) var(--space-2-5); } .ui-menu__sep { height: 1px; margin: var(--space-1) var(--space-1-5); background: var(--color-border); } .ui-menu__heading { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-xs); color: var(--color-text-faint); } @keyframes ui-pop-in { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } } /* ---------- Modal ---------------------------------------------------------- */ .ui-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--color-overlay); animation: ui-fade-in var(--duration-base) var(--ease-out); } .ui-modal { display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: min(88vh, 880px); background: var(--modal-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); animation: ui-modal-in var(--duration-base) var(--ease-out); } .ui-modal--sm { max-width: 400px; } .ui-modal--lg { max-width: 720px; } .ui-modal--xl { max-width: 960px; } .ui-modal--full { max-width: min(1200px, 96vw); height: 90vh; } .ui-modal__header { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--modal-pad) var(--modal-pad) var(--space-4); } .ui-modal__titles { flex: 1 1; min-width: 0; } .ui-modal__title { font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin: 0; } .ui-modal__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; line-height: var(--leading-snug); } .ui-modal__header > .ui-icon-btn { margin: calc(var(--space-1-5) * -1) calc(var(--space-2) * -1) 0 0; } .ui-modal__body { flex: 1 1; min-height: 0; overflow-y: auto; padding: 0 var(--modal-pad) var(--space-2); } .ui-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-4) var(--modal-pad) var(--modal-pad); } .ui-modal__footer-start { margin-right: auto; display: flex; gap: var(--space-2); align-items: center; } @keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ui-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } /* Mobile: modals become bottom sheets. */ @media (max-width: 640px) { .ui-overlay { align-items: flex-end; padding: 0; } .ui-modal, .ui-modal--sm, .ui-modal--lg, .ui-modal--xl, .ui-modal--full { max-width: none; max-height: 92vh; height: auto; border-radius: var(--modal-radius) var(--modal-radius) 0 0; border-bottom: 0; animation-name: ui-sheet-in; } .ui-modal__footer > .ui-btn { flex: 1 1; } } @keyframes ui-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------- Tables ---------------------------------------------------------- */ .ui-table-wrap { width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .ui-table-wrap--tall { max-height: 70vh; } .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: var(--leading-snug); } .ui-table th, .ui-table td { padding: var(--table-cell-py) var(--table-cell-px); text-align: left; vertical-align: middle; white-space: nowrap; } .ui-table th { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background: var(--table-head-bg); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); border-bottom: 1px solid var(--color-border); } .ui-table td { border-bottom: 1px solid var(--color-border); color: var(--color-text); } .ui-table tbody tr:last-child td { border-bottom: 0; } .ui-table tbody tr:hover td { background: var(--table-row-hover); } .ui-table tbody tr.is-selected td { background: var(--color-primary-soft); } .ui-table .is-num { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .ui-table .is-wrap { white-space: normal; min-width: 200px; } .ui-table .is-actions { text-align: right; width: 1%; } .ui-table__sub { display: block; font-size: var(--text-xs); color: var(--color-text-faint); } /* ---------- Banners (read-only, connection lost, impersonation) ---------- */ .ui-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-snug); } .ui-banner__text { flex: 1 1; min-width: 0; } .ui-banner__text b { color: var(--color-text); font-weight: var(--weight-medium); } .ui-banner--info { background: var(--color-info-bg); border-color: var(--color-info-border); } .ui-banner--info > .ui-icon { color: var(--color-info); } .ui-banner--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); } .ui-banner--warning > .ui-icon { color: var(--color-warning); } .ui-banner--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); } .ui-banner--danger > .ui-icon { color: var(--color-danger); } .ui-banner--success { background: var(--color-success-bg); border-color: var(--color-success-border); } .ui-banner--success > .ui-icon { color: var(--color-success); } /* ---------- State screens & empty states --------------------------------- */ .ui-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); max-width: 400px; margin: 0 auto; padding: var(--space-10) var(--space-6); } .ui-state__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-muted); } .ui-state__title { font-size: var(--text-xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); margin: 0; } .ui-state__text { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-normal); margin: 0; } .ui-state__actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); } .ui-state--warning .ui-state__icon { background: var(--color-warning-bg); color: var(--color-warning); } .ui-state--danger .ui-state__icon { background: var(--color-danger-bg); color: var(--color-danger); } .ui-state--info .ui-state__icon { background: var(--color-info-bg); color: var(--color-info); } .ui-state--success .ui-state__icon { background: var(--color-success-bg); color: var(--color-success); } /* compact: empty lists inside sidebars, tables, menus */ .ui-state--compact { padding: var(--space-6) var(--space-4); gap: var(--space-1); } .ui-state--compact .ui-state__icon { width: 40px; height: 40px; margin-bottom: var(--space-1); } .ui-state--compact .ui-state__title { font-size: var(--text-base); font-weight: var(--weight-medium); } .ui-state--compact .ui-state__text { font-size: var(--text-sm); } .ui-state--compact .ui-state__actions { margin-top: var(--space-2); } /* page: full-viewport state in the canvas (pending, suspended, no access) */ .ui-state--page { min-height: 60vh; justify-content: center; } /* Skeleton shimmer (loading lists) */ .ui-skeleton { display: block; height: 12px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-hover), var(--color-surface-2)); background-size: 200% 100%; animation: ui-shimmer 1.4s ease-in-out infinite; } .ui-skeleton-lines { display: flex; flex-direction: column; gap: var(--space-3); } .ui-skeleton--short { width: 60%; } .ui-mt-3 { margin-top: var(--space-3); } .ui-auth-card__title + .ui-doc-text, .ui-auth-card__title + .ui-banner { margin-top: var(--space-6); } @keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ---------- Scope picker (Everyone / Person / Company / BU / Department) -- */ .ui-scope { display: flex; flex-direction: column; gap: var(--space-3); } .ui-scope__targets { display: flex; flex-wrap: wrap; gap: var(--space-1-5); } /* ---------- Divider -------------------------------------------------------- */ .ui-divider { height: 1px; background: var(--color-border); border: 0; margin: var(--space-4) 0; } .ui-divider--dotted { height: 0; background: none; border-top: 1px dashed var(--color-border-strong); } /* ---------- Centered pages: login, PDPA, pending/suspended, no access ----- */ .ui-page-center { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-16) var(--space-4) var(--space-10); background: var(--color-bg); color: var(--color-text); } .ui-page-center__top { position: absolute; top: var(--space-4); right: var(--space-4); display: flex; gap: var(--space-2); } .ui-auth-card { width: 100%; max-width: 420px; padding: var(--space-10) var(--space-8) var(--space-8); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); } .ui-auth-card--wide { max-width: 640px; } .ui-auth-card__logo { display: block; width: 168px; max-width: 70%; height: auto; margin: 0 auto var(--space-6); } .ui-auth-card__logo--sm { width: 120px; margin-bottom: var(--space-4); } /* The logo artwork is navy-on-transparent, so on dark grounds it sits on a small white plate to stay legible. */ :root[data-theme="dark"] .ui-auth-card__logo { background: var(--p-neutral-0); padding: var(--space-3); border-radius: var(--radius-lg); } .ui-auth-card__title { font-size: var(--text-2xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); text-align: center; margin: 0; letter-spacing: -0.01em; } .ui-auth-card__sub { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-snug); text-align: center; margin: var(--space-2) 0 var(--space-8); } .ui-auth-card__note { font-size: var(--text-xs); color: var(--color-text-faint); line-height: var(--leading-normal); text-align: center; margin: var(--space-6) 0 0; } .ui-auth-card .ui-state { padding: 0; } .ui-auth-card__actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); } /* Long scrolling legal text (PDPA) */ .ui-doc-text { max-height: min(48vh, 440px); overflow-y: auto; padding: var(--space-4) var(--space-5); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-secondary); white-space: pre-wrap; text-align: left; } @media (max-width: 480px) { .ui-auth-card { padding: var(--space-8) var(--space-5) var(--space-6); border-radius: var(--radius-lg); } .ui-auth-card__actions > .ui-btn { flex: 1 1; } } /* ---------- Motion preference ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ui-menu, .ui-overlay, .ui-modal, .ui-skeleton, .ui-spinner { animation: none; } .ui-btn, .ui-icon-btn, .ui-nav-item, .ui-switch__track, .ui-switch__track::after { transition: none; } }