:root { --bg-app: #f8fafc; --bg-sidebar: #0f172a; --bg-sidebar-hover: #1e293b; --bg-sidebar-active: #334155; --text-sidebar: #94a3b8; --text-sidebar-bright: #f8fafc; --bg-main: #ffffff; --bg-card: #ffffff; --bg-surface: #ffffff; --bg-subtle: #f1f5f9; --border-color: #e2e8f0; --border-dark: #cbd5e1; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --accent-primary: #4f46e5; --accent-hover: #4338ca; --accent-light: #e0e7ff; --badge-inbox: #4f46e5; --badge-mentions: #d97706; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } /* Phase 22.6: site-wide dark mode. Every view (Chat/Projects/Wiki/Admin/ Account/Portal) is already built on the tokens above rather than literal colors — that's what makes a single override block here enough to retheme the whole app, rather than needing a pass over every view's own CSS. html[data-theme="dark"] (not a class, not prefers-color-scheme alone) so shell.js's toggle can force either mode regardless of the OS setting, while the FOUC-prevention inline script in index.html's still falls back to prefers-color-scheme on a visitor's very first load, before any explicit choice has been saved. The dark sidebar chrome (--bg-sidebar and friends) is intentionally left unchanged — it's already a dark surface in light mode (this app's sidebar was never white), so it needs no retheming; only the "light" surfaces (main content, cards, dropdowns/modals, borders, body text) actually invert. Small decorative accents — status pills, mention pills, role badges with their own semantic hue — keep their light-mode pastel colors in both modes: each already pairs a tinted background with its own matching text color, so they stay legible on a dark page, just not restyled for it; a full per-accent dark palette is out of scope here. Neutral/gray chrome hardcoded to the exact hex of one of the tokens above (rather than using var(...)) was fixed to reference the token instead, so it retheme's with everything else — see the Phase 22.6 plan-doc entry for the specific rules this caught. */ html[data-theme="dark"] { --bg-app: #0b0f18; --bg-main: #141a26; --bg-card: #1a2130; --bg-surface: #1a2130; --bg-subtle: #212939; --border-color: #2a3346; --border-dark: #3a4558; --text-primary: #e7ebf2; --text-secondary: #9aa4b8; --text-muted: #6b7690; --accent-primary: #6366f1; --accent-hover: #818cf8; --accent-light: #26254f; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-primary); background-color: var(--bg-app); -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } .error { color: #ef4444; font-size: 13px; margin-top: 8px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; } .btn-primary { background-color: var(--accent-primary); color: #ffffff; } .btn-primary:hover { background-color: var(--accent-hover); } .btn-outline { background: transparent; border-color: var(--border-color); color: var(--text-secondary); } .btn-outline:hover { background-color: var(--bg-subtle); border-color: var(--border-dark); } .btn-danger { background-color: #dc2626; color: #ffffff; } .btn-danger:hover:not(:disabled) { background-color: #b91c1c; } .btn-danger:disabled { background-color: #fca5a5; cursor: not-allowed; } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-icon { background: transparent; border: none; color: var(--text-sidebar); padding: 4px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .btn-icon:hover { color: var(--text-sidebar-bright); background-color: var(--bg-sidebar-hover); } .btn-text-action { background: transparent; border: none; color: var(--text-sidebar); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); } .btn-text-action:hover { color: var(--text-sidebar-bright); background-color: var(--bg-sidebar-hover); } /* Login View */ #login-view { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: var(--bg-app); } .login-card { background: var(--bg-card); padding: 32px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; max-width: 380px; border: 1px solid var(--border-color); } .login-header { text-align: center; margin-bottom: 24px; } .login-header .app-logo-img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 8px; } .login-header h1 { margin: 0 0 4px 0; font-size: 24px; color: var(--text-primary); } .login-header p { margin: 0; color: var(--text-secondary); font-size: 14px; } .login-form { display: flex; flex-direction: column; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .form-group input { padding: 10px 12px; font-size: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s; } .form-group input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-light); } /* App Shell */ #app-view { display: flex; height: 100vh; overflow: hidden; } /* Sidebar */ #sidebar { width: 280px; flex-shrink: 0; background-color: var(--bg-sidebar); color: var(--text-sidebar); display: flex; flex-direction: column; padding: 16px; overflow-y: auto; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .brand { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: background-color 0.15s ease; user-select: none; } .brand:hover { background-color: var(--bg-sidebar-hover); } .brand-logo-img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; } .brand-name { font-size: 18px; font-weight: 700; color: var(--text-sidebar-bright); letter-spacing: -0.5px; } .user-profile { display: flex; align-items: center; gap: 8px; } .avatar { width: 28px; height: 28px; border-radius: 50%; background-color: var(--accent-primary); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; text-transform: uppercase; } /* Search Form */ .search-form { margin-bottom: 16px; } .search-input-wrapper { position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; } #search-input { width: 100%; padding: 8px 10px 8px 32px; font-size: 13px; background-color: var(--bg-sidebar-hover); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-sidebar-bright); outline: none; } #search-input::placeholder { color: var(--text-muted); } #search-input:focus { border-color: var(--accent-primary); background-color: #0f172a; } /* Vertical Sidebar Nav */ #sidebar-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--text-sidebar); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; width: 100%; text-align: left; transition: all 0.15s ease; } .nav-item:hover { background-color: var(--bg-sidebar-hover); color: var(--text-sidebar-bright); } .nav-item.active { background-color: var(--accent-primary); color: #ffffff; } .nav-item svg { flex-shrink: 0; } .nav-item > span:not(.badge) { flex: 1; } .badge { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1; text-align: center; background-color: var(--badge-inbox); color: #ffffff; box-sizing: border-box; } .badge-amber { background-color: var(--badge-mentions); } .badge-gray { background-color: var(--bg-sidebar-active); color: var(--text-sidebar); } /* Sidebar Accordion Section */ .sidebar-section { margin-bottom: 16px; } .sidebar-section-header { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 0 4px 8px 4px; } .channel-accordion-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .channel-accordion-item { display: flex; flex-direction: column; } .channel-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 14px; font-weight: 500; color: var(--text-sidebar); border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: background 0.15s; } .channel-header:hover { background-color: var(--bg-sidebar-hover); color: var(--text-sidebar-bright); } .channel-accordion-item.active > .channel-header { color: var(--text-sidebar-bright); font-weight: 600; } .channel-title-wrapper { display: flex; align-items: center; gap: 8px; } .channel-arrow { display: inline-block; font-size: 10px; transition: transform 0.2s ease; color: var(--text-muted); } .channel-accordion-item.open > .channel-header .channel-arrow { transform: rotate(90deg); } /* Accordion Threads Sub-tree */ .channel-thread-tree { list-style: none; margin: 4px 0 4px 16px; padding: 0 0 0 10px; border-left: 1px solid var(--bg-sidebar-active); display: flex; flex-direction: column; gap: 2px; } .channel-thread-item { padding: 6px 10px; font-size: 13px; color: var(--text-sidebar); border-radius: var(--radius-sm); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.15s; } .channel-thread-item:hover { background-color: var(--bg-sidebar-hover); color: var(--text-sidebar-bright); } .channel-thread-item.active { background-color: var(--bg-sidebar-active); color: var(--text-sidebar-bright); font-weight: 500; } .thread-branch-marker { color: var(--accent-light); margin-right: 4px; } /* Main Panel */ #main-panel { flex: 1; background-color: var(--bg-main); display: flex; flex-direction: column; overflow: hidden; } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); text-align: center; padding: 32px; } .empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; } .empty-state h3 { margin: 0 0 6px 0; color: var(--text-primary); font-size: 18px; } .empty-state p { margin: 0; font-size: 14px; } /* Portal View (Landing Page) */ .portal-view { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; overflow-y: auto; padding: 40px 24px; background-color: var(--bg-app); } .portal-container { max-width: 900px; width: 100%; margin: 0 auto; } .portal-hero { text-align: center; margin-bottom: 40px; } .portal-hero-logo { width: 64px; height: 64px; object-fit: contain; margin-bottom: 12px; } .portal-hero h1 { margin: 0 0 8px 0; font-size: 32px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; } .portal-hero p { margin: 0 auto; font-size: 16px; color: var(--text-secondary); max-width: 580px; line-height: 1.5; } .portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .portal-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; position: relative; cursor: pointer; box-shadow: var(--shadow-sm); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .portal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-primary); } .portal-card-icon-wrap { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: transform 0.2s ease; } .portal-card:hover .portal-card-icon-wrap { transform: scale(1.05); } .icon-chat { background-color: #e0e7ff; color: #4338ca; } .icon-projects { background-color: #dbeafe; color: #1d4ed8; } .icon-wiki { background-color: #fef3c7; color: #b45309; } .portal-card-content h3 { margin: 0 0 8px 0; font-size: 20px; font-weight: 700; color: var(--text-primary); } .portal-card-content p { margin: 0 0 16px 0; font-size: 14px; color: var(--text-secondary); line-height: 1.45; flex-grow: 1; } .portal-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; } .portal-card-stat { font-weight: 600; color: var(--text-secondary); background: var(--bg-subtle); padding: 4px 8px; border-radius: 12px; } .portal-card-badge { font-weight: 500; color: #92400e; background: #fef3c7; padding: 4px 8px; border-radius: 12px; } .portal-card-arrow { position: absolute; top: 24px; right: 24px; font-size: 18px; color: var(--text-muted); transition: transform 0.2s ease, color 0.2s ease; } .portal-card:hover .portal-card-arrow { transform: translateX(4px); color: var(--accent-primary); } /* Sidebar Section Headers */ .sidebar-section-group { display: flex; flex-direction: column; gap: 12px; flex: 1; } .sidebar-projects-header { margin-top: 4px; } /* Thread / Chat View */ #thread-view { display: flex; flex-direction: column; height: 100%; } .chat-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); } .breadcrumb { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .breadcrumb a { color: var(--text-secondary); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .title-row { display: flex; align-items: center; justify-content: space-between; } #thread-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary); } /* Branches Bar */ .branches-bar { padding: 8px 24px; background-color: var(--bg-subtle); border-bottom: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .branches-bar a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 16px; font-size: 12px; color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: all 0.15s; } .branches-bar a:hover { border-color: var(--accent-primary); color: var(--accent-primary); } /* Message Container */ .message-container { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; } .message { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-md); transition: background 0.15s; position: relative; } .message:hover { background-color: var(--bg-subtle); } .message-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--accent-primary); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; text-transform: uppercase; } .message-content { flex: 1; min-width: 0; } .message-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .message-meta-left { display: flex; align-items: center; gap: 8px; } .message-author { font-weight: 600; font-size: 14px; color: var(--text-primary); } .message-time { font-size: 12px; color: var(--text-muted); } .star-indicator { color: #f59e0b; font-size: 14px; } .btn-message-reply { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm, 4px); cursor: pointer; line-height: 1.3; transition: all 0.15s ease; opacity: 0.8; } .message:hover .btn-message-reply, .btn-message-reply:hover { opacity: 1; color: var(--text-primary); background-color: var(--bg-subtle, rgba(255, 255, 255, 0.06)); border-color: var(--border-color, rgba(255, 255, 255, 0.1)); } .btn-message-reply svg { flex-shrink: 0; } .message-menu-container { position: relative; } .message-menu-btn { font-size: 16px; font-weight: bold; color: var(--text-muted); padding: 2px 6px; line-height: 1; } .message-menu-btn:hover { color: var(--text-primary); background-color: var(--bg-subtle); } .message-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 100; display: flex; flex-direction: column; min-width: 140px; padding: 4px 0; } .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-primary); background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; transition: background 0.15s; } .dropdown-item:hover { background-color: var(--bg-subtle); color: var(--accent-primary); } .message-body { font-size: 14px; line-height: 1.5; color: var(--text-primary); word-break: break-word; } .message-body.rich-text p { margin: 0 0 4px 0; } .message-body.rich-text p:last-child { margin-bottom: 0; } .message-body.rich-text pre { background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 8px 12px; overflow-x: auto; margin: 4px 0; } .message-body.rich-text blockquote { border-left: 3px solid var(--border-color); padding-left: 10px; color: var(--text-secondary); margin: 4px 0; } .message-body.rich-text img { max-width: 100%; max-height: 380px; border-radius: var(--radius-sm); margin-top: 6px; margin-bottom: 4px; display: block; object-fit: contain; } /* Slack-style Branch Replies Component */ .branch-replies-container { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; clear: both; } .branch-reply-row { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; user-select: none; transition: background 0.15s; width: fit-content; max-width: 100%; } .branch-reply-row:hover { background-color: var(--bg-subtle); } .branch-reply-header { display: inline-flex; align-items: center; gap: 8px; } .branch-creator-avatar { width: 20px; height: 20px; border-radius: 4px; background-color: var(--accent-primary); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; text-transform: uppercase; flex-shrink: 0; } .branch-reply-info { font-size: 13px; color: var(--text-muted); } .branch-reply-title { color: #2563eb; font-weight: 600; } .branch-reply-row:hover .branch-reply-title { text-decoration: underline; } .branch-reply-time { color: var(--text-muted); } .branch-reply-quote { border-left: 3px solid var(--accent-primary); padding: 4px 10px; margin-left: 0; margin-top: 2px; color: var(--text-secondary); font-size: 13px; line-height: 1.45; background: var(--bg-subtle); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; max-width: 650px; } .branch-reply-quote p { margin: 0; } .forked-badge:hover { background: #fde68a; } .star-btn { border: none; background: none; cursor: pointer; font-size: 15px; color: var(--text-muted); padding: 2px 4px; } .star-btn.starred { color: #f59e0b; } /* Reactions */ .reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; position: relative; } .reaction-pill { font-size: 12px; padding: 2px 8px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-main); cursor: pointer; transition: all 0.15s; } .reaction-pill:hover { border-color: var(--border-dark); } .reaction-pill.reacted { background-color: var(--accent-light); border-color: var(--accent-primary); color: var(--accent-primary); font-weight: 600; } .reaction-add-btn { font-size: 12px; padding: 2px 8px; border: 1px dashed var(--border-color); border-radius: 12px; background: var(--bg-main); color: var(--text-muted); cursor: pointer; } .reaction-add-btn:hover { background-color: var(--bg-subtle); color: var(--text-secondary); } .emoji-picker { position: absolute; top: 100%; left: 0; margin-top: 6px; padding: 8px; display: flex; gap: 4px; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 100; } .emoji-picker button { border: none; background: none; cursor: pointer; font-size: 18px; padding: 4px 6px; border-radius: var(--radius-sm); } .emoji-picker button:hover { background-color: var(--bg-subtle); } /* Composer Container */ .composer-container { padding: 16px 24px; border-top: 1px solid var(--border-color); background-color: var(--bg-main); } .reply-form { display: flex; flex-direction: column; gap: 8px; } .composer-body-wrapper { border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-main); transition: border-color 0.15s; overflow: hidden; } .composer-body-wrapper:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-light); } /* Shared chrome for every TipTap toolbar/editor pairing: chat's own composer + fork-reply modal, issue create/edit, and issue comments. These were originally styled as literal Quill DOM (`.ql-toolbar`, `.ql-container`, `.ql-editor`, `.ql-blank`) from before this app's two Quill->TipTap swaps (Phase 13 for chat, Phase 14 for issues/comments). TipTap only ever renders a plain `.ProseMirror` class on the editable div it mounts — never `.ql-editor`/`.ql-container` — so those old selectors stopped matching anything once the swap landed, and every affected composer had been running with no internal text padding, no placeholder text rendering, and (for the issue/comment toolbars specifically, which never had chat's ID-scoped rules) no toolbar background/button chrome at all — just bare, unstyled `