diff --git a/ui/suite/docs/docs.css b/ui/suite/docs/docs.css
index 10c21bd..179628e 100644
--- a/ui/suite/docs/docs.css
+++ b/ui/suite/docs/docs.css
@@ -1,16 +1,35 @@
/* =============================================================================
- GB DOCS - Word-like Document Editor Styles
- General Bots Suite Component
+ GB DOCS - Modern Document Editor Styles
+ Theme-aware, A4 centered page, with AI chat panel
============================================================================= */
-/* Container Layout */
-.docs-container {
+/* =============================================================================
+ VARIABLES & BASE
+ ============================================================================= */
+
+:root {
+ --docs-page-width: 816px;
+ --docs-page-min-height: 1056px;
+ --docs-page-padding: 96px 72px;
+ --docs-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+/* =============================================================================
+ MAIN LAYOUT
+ ============================================================================= */
+
+.docs-app {
display: flex;
+ flex-direction: column;
height: 100vh;
- background: var(--bg-primary, #0f172a);
- color: var(--text-primary, #f1f5f9);
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ color: var(--sentient-text-primary, #212121);
font-family: var(
- --font-family,
+ --sentient-font-family,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
@@ -20,218 +39,20 @@
overflow: hidden;
}
-/* Sidebar - hidden by default for clean Word-like experience */
-.docs-sidebar {
- display: none;
- width: 280px;
- background: var(--bg-secondary, #1e293b);
- border-right: 1px solid var(--border-color, #334155);
- flex-direction: column;
- flex-shrink: 0;
- overflow: hidden;
-}
+/* =============================================================================
+ TOOLBAR
+ ============================================================================= */
-.docs-sidebar.open {
- display: flex;
-}
-
-.sidebar-header {
+.docs-toolbar {
display: flex;
+ align-items: center;
justify-content: space-between;
- align-items: center;
- padding: 16px;
- border-bottom: 1px solid var(--border-color, #334155);
-}
-
-.sidebar-header h2 {
- font-size: 18px;
- font-weight: 600;
- margin: 0;
- color: var(--text-primary, #f1f5f9);
-}
-
-.sidebar-search {
- padding: 12px 16px;
- position: relative;
-}
-
-.sidebar-search input {
- width: 100%;
- padding: 10px 12px 10px 36px;
- background: var(--bg-tertiary, #0f172a);
- border: 1px solid var(--border-color, #334155);
- border-radius: 8px;
- color: var(--text-primary, #f1f5f9);
- font-size: 14px;
- outline: none;
- box-sizing: border-box;
-}
-
-.sidebar-search input:focus {
- border-color: var(--accent-color, #3b82f6);
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.sidebar-search input::placeholder {
- color: var(--text-secondary, #64748b);
-}
-
-.sidebar-search .search-icon {
- position: absolute;
- left: 28px;
- top: 50%;
- transform: translateY(-50%);
- color: var(--text-secondary, #64748b);
- pointer-events: none;
-}
-
-.docs-list {
- flex: 1;
- overflow-y: auto;
- padding: 8px;
-}
-
-.doc-item {
- display: flex;
- flex-direction: column;
- padding: 12px;
- border-radius: 8px;
- cursor: pointer;
- transition: background 0.2s;
- margin-bottom: 4px;
-}
-
-.doc-item:hover {
- background: var(--bg-hover, rgba(255, 255, 255, 0.05));
-}
-
-.doc-item.active {
- background: var(--accent-color, #3b82f6);
-}
-
-.doc-item-title {
- font-size: 14px;
- font-weight: 500;
- color: var(--text-primary, #f1f5f9);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 4px;
-}
-
-.doc-item-preview {
- font-size: 12px;
- color: var(--text-secondary, #94a3b8);
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.doc-item.active .doc-item-preview {
- color: rgba(255, 255, 255, 0.7);
-}
-
-.doc-item-date {
- font-size: 11px;
- color: var(--text-tertiary, #64748b);
- margin-top: 4px;
-}
-
-.sidebar-section {
- padding: 16px;
- border-top: 1px solid var(--border-color, #334155);
-}
-
-.sidebar-section h3 {
- font-size: 12px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--text-secondary, #94a3b8);
- margin: 0 0 12px 0;
-}
-
-.template-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 8px;
-}
-
-.template-btn {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 6px;
- padding: 12px;
- background: var(--bg-tertiary, #0f172a);
- border: 1px solid var(--border-color, #334155);
- border-radius: 8px;
- color: var(--text-primary, #f1f5f9);
- font-size: 12px;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.template-btn:hover {
- border-color: var(--accent-color, #3b82f6);
- background: rgba(59, 130, 246, 0.1);
-}
-
-.template-icon {
- font-size: 20px;
-}
-
-.sidebar-actions {
- padding: 16px;
- border-top: 1px solid var(--border-color, #334155);
-}
-
-.btn-new-doc {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 8px;
- padding: 12px 16px;
- background: var(--accent-color, #3b82f6);
- color: white;
- border: none;
- border-radius: 8px;
- font-size: 14px;
- font-weight: 500;
- cursor: pointer;
- transition:
- background 0.2s,
- transform 0.1s;
-}
-
-.btn-new-doc:hover {
- background: var(--accent-hover, #2563eb);
- transform: translateY(-1px);
-}
-
-.btn-new-doc:active {
- transform: translateY(0);
-}
-
-/* Main Content Area */
-.docs-main {
- flex: 1;
- display: flex;
- flex-direction: column;
- min-width: 0;
- background: var(--bg-primary, #0f172a);
-}
-
-/* Toolbar */
-.editor-toolbar {
- display: flex;
- align-items: center;
- gap: 8px;
padding: 8px 16px;
- background: var(--bg-secondary, #1e293b);
- border-bottom: 1px solid var(--border-color, #334155);
- flex-wrap: wrap;
+ background: var(--sentient-bg-primary, #ffffff);
+ border-bottom: 1px solid var(--sentient-border, #e0e0e0);
+ gap: 16px;
+ flex-shrink: 0;
+ min-height: 52px;
}
.toolbar-left,
@@ -243,16 +64,29 @@
}
.toolbar-left {
- flex-shrink: 0;
+ flex: 0 0 auto;
+ min-width: 200px;
}
.toolbar-center {
flex: 1;
- flex-wrap: wrap;
+ justify-content: flex-start;
+ overflow-x: auto;
+ padding: 4px 0;
+}
+
+.toolbar-center::-webkit-scrollbar {
+ height: 4px;
+}
+
+.toolbar-center::-webkit-scrollbar-thumb {
+ background: var(--sentient-border, #e0e0e0);
+ border-radius: 2px;
}
.toolbar-right {
- flex-shrink: 0;
+ flex: 0 0 auto;
+ gap: 12px;
}
.toolbar-group {
@@ -264,30 +98,37 @@
.toolbar-divider {
width: 1px;
height: 24px;
- background: var(--border-color, #334155);
+ background: var(--sentient-border, #e0e0e0);
margin: 0 8px;
+ flex-shrink: 0;
}
-.doc-title-input {
- background: transparent;
+.doc-name-input {
border: 1px solid transparent;
- border-radius: 6px;
- color: var(--text-primary, #f1f5f9);
+ background: transparent;
font-size: 16px;
font-weight: 500;
- padding: 6px 12px;
+ color: var(--sentient-text-primary, #212121);
+ padding: 6px 10px;
+ border-radius: var(--sentient-radius-sm, 4px);
+ width: 100%;
+ max-width: 250px;
+ transition: all 0.2s ease;
+}
+
+.doc-name-input:hover {
+ background: var(--sentient-bg-secondary, #f5f5f5);
+}
+
+.doc-name-input:focus {
outline: none;
- min-width: 200px;
+ border-color: var(--sentient-accent, #4285f4);
+ background: var(--sentient-bg-primary, #ffffff);
}
-.doc-title-input:hover {
- border-color: var(--border-color, #334155);
-}
-
-.doc-title-input:focus {
- border-color: var(--accent-color, #3b82f6);
- background: var(--bg-tertiary, #0f172a);
-}
+/* =============================================================================
+ BUTTONS
+ ============================================================================= */
.btn-icon {
display: flex;
@@ -295,574 +136,347 @@
justify-content: center;
width: 32px;
height: 32px;
- background: transparent;
border: none;
- border-radius: 6px;
- color: var(--text-secondary, #94a3b8);
+ background: transparent;
+ color: var(--sentient-text-secondary, #666);
+ border-radius: var(--sentient-radius-sm, 4px);
cursor: pointer;
- transition: all 0.2s;
+ transition: all 0.15s ease;
+ flex-shrink: 0;
}
.btn-icon:hover {
- background: var(--bg-hover, rgba(255, 255, 255, 0.1));
- color: var(--text-primary, #f1f5f9);
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ color: var(--sentient-text-primary, #212121);
}
.btn-icon.active {
- background: var(--accent-color, #3b82f6);
+ background: var(--sentient-accent, #4285f4);
color: white;
}
.btn-icon svg {
- width: 18px;
- height: 18px;
+ width: 16px;
+ height: 16px;
}
-.toolbar-select {
- padding: 6px 10px;
- background: var(--bg-tertiary, #0f172a);
- border: 1px solid var(--border-color, #334155);
- border-radius: 6px;
- color: var(--text-primary, #f1f5f9);
- font-size: 13px;
- cursor: pointer;
- outline: none;
-}
-
-.toolbar-select:focus {
- border-color: var(--accent-color, #3b82f6);
+.btn-icon strong,
+.btn-icon em,
+.btn-icon u,
+.btn-icon s {
+ font-size: 14px;
+ line-height: 1;
}
.btn-primary {
display: flex;
align-items: center;
- gap: 8px;
+ gap: 6px;
padding: 8px 16px;
- background: var(--accent-color, #3b82f6);
+ background: var(--sentient-accent, #4285f4);
color: white;
border: none;
- border-radius: 8px;
+ border-radius: var(--sentient-radius-sm, 4px);
font-size: 14px;
font-weight: 500;
cursor: pointer;
- transition: background 0.2s;
+ transition: all 0.15s ease;
+ white-space: nowrap;
}
.btn-primary:hover {
- background: var(--accent-hover, #2563eb);
+ background: var(--sentient-accent-hover, #3367d6);
}
-.btn-ai {
+.btn-secondary {
display: flex;
align-items: center;
gap: 6px;
- padding: 8px 12px;
- background: linear-gradient(135deg, #8b5cf6, #6366f1);
- color: white;
- border: none;
- border-radius: 8px;
- font-size: 13px;
+ padding: 8px 16px;
+ background: transparent;
+ color: var(--sentient-text-primary, #212121);
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ border-radius: var(--sentient-radius-sm, 4px);
+ font-size: 14px;
font-weight: 500;
cursor: pointer;
- transition: all 0.2s;
+ transition: all 0.15s ease;
}
-.btn-ai:hover {
- background: linear-gradient(135deg, #7c3aed, #4f46e5);
- transform: translateY(-1px);
+.btn-secondary:hover {
+ background: var(--sentient-bg-secondary, #f5f5f5);
}
-.color-picker {
+/* =============================================================================
+ TOOLBAR SELECTS & COLORS
+ ============================================================================= */
+
+.toolbar-select {
+ padding: 6px 8px;
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ border-radius: var(--sentient-radius-sm, 4px);
+ background: var(--sentient-bg-primary, #ffffff);
+ color: var(--sentient-text-primary, #212121);
+ font-size: 13px;
+ cursor: pointer;
+ transition: border-color 0.15s ease;
+}
+
+.toolbar-select:hover {
+ border-color: var(--sentient-text-muted, #999);
+}
+
+.toolbar-select:focus {
+ outline: none;
+ border-color: var(--sentient-accent, #4285f4);
+}
+
+.heading-select {
+ width: 100px;
+}
+
+.font-family {
+ width: 100px;
+}
+
+.font-size {
+ width: 55px;
+}
+
+.color-btn {
position: relative;
- display: flex;
- align-items: center;
+ overflow: visible;
+}
+
+.color-letter {
+ font-weight: 600;
+ font-size: 14px;
+}
+
+.color-indicator {
+ position: absolute;
+ bottom: 4px;
+ left: 6px;
+ right: 6px;
+ height: 3px;
+ background: #000000;
+ border-radius: 1px;
+}
+
+.bg-indicator {
+ background: #ffff00;
}
.color-input {
position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
-.color-indicator {
- width: 18px;
- height: 3px;
- border-radius: 1px;
- margin-top: 2px;
+/* =============================================================================
+ COLLABORATORS
+ ============================================================================= */
+
+.collaborators {
+ display: flex;
+ align-items: center;
+ gap: -8px;
}
-/* Editor Canvas */
-.editor-canvas {
+.collaborator-avatar {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ border: 2px solid var(--sentient-bg-primary, #ffffff);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 11px;
+ font-weight: 600;
+ color: white;
+ margin-left: -8px;
+}
+
+.collaborator-avatar:first-child {
+ margin-left: 0;
+}
+
+/* =============================================================================
+ MAIN CONTENT AREA
+ ============================================================================= */
+
+.docs-main {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+/* =============================================================================
+ DOCUMENT CANVAS - A4 PAGE
+ ============================================================================= */
+
+.docs-canvas {
flex: 1;
overflow-y: auto;
- padding: 40px;
+ padding: 32px;
display: flex;
justify-content: center;
- background: var(--bg-tertiary, #0f172a);
+ background: var(--sentient-bg-secondary, #f0f0f0);
}
.editor-page {
- width: 100%;
- max-width: 816px;
- min-height: 1056px;
- background: white;
- color: #1e293b;
- padding: 60px 72px;
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
- border-radius: 4px;
- box-sizing: border-box;
-}
-
-.editor-title {
- font-size: 32px;
- font-weight: 700;
- color: #0f172a;
- border: none;
- outline: none;
- margin-bottom: 24px;
- width: 100%;
- line-height: 1.3;
-}
-
-.editor-title:empty:before {
- content: attr(data-placeholder);
- color: #94a3b8;
+ width: var(--docs-page-width);
+ min-height: var(--docs-page-min-height);
+ background: var(--sentient-bg-primary, #ffffff);
+ box-shadow: var(--docs-page-shadow);
+ border-radius: 2px;
+ padding: var(--docs-page-padding);
+ margin-bottom: 32px;
}
.editor-content {
- min-height: 400px;
- font-size: 16px;
- line-height: 1.75;
- color: #334155;
+ min-height: 100%;
+ outline: none;
+ font-family: "Times New Roman", Georgia, serif;
+ font-size: 12pt;
+ line-height: 1.5;
+ color: var(--sentient-text-primary, #212121);
+}
+
+.editor-content:empty::before {
+ content: attr(data-placeholder);
+ color: var(--sentient-text-muted, #999);
+ pointer-events: none;
+}
+
+.editor-content:focus {
outline: none;
}
-.editor-content:empty:before {
- content: attr(data-placeholder);
- color: #94a3b8;
-}
-
-/* Editor Content Styles */
+/* Editor content styles */
.editor-content h1 {
- font-size: 28px;
+ font-size: 24pt;
font-weight: 700;
- margin: 24px 0 16px;
- color: #0f172a;
+ margin: 24pt 0 12pt 0;
+ color: var(--sentient-text-primary, #212121);
}
.editor-content h2 {
- font-size: 24px;
+ font-size: 18pt;
font-weight: 600;
- margin: 20px 0 12px;
- color: #1e293b;
+ margin: 20pt 0 10pt 0;
+ color: var(--sentient-text-primary, #212121);
}
.editor-content h3 {
- font-size: 20px;
+ font-size: 14pt;
font-weight: 600;
- margin: 16px 0 10px;
- color: #334155;
+ margin: 16pt 0 8pt 0;
+ color: var(--sentient-text-primary, #212121);
}
.editor-content p {
- margin: 0 0 16px 0;
+ margin: 0 0 12pt 0;
}
.editor-content ul,
.editor-content ol {
- margin: 0 0 16px 0;
- padding-left: 24px;
+ margin: 0 0 12pt 0;
+ padding-left: 24pt;
}
.editor-content li {
- margin-bottom: 8px;
+ margin: 4pt 0;
}
.editor-content blockquote {
- margin: 16px 0;
- padding: 12px 20px;
- border-left: 4px solid #3b82f6;
- background: #f1f5f9;
- color: #475569;
+ margin: 12pt 0;
+ padding: 8pt 16pt;
+ border-left: 4px solid var(--sentient-accent, #4285f4);
+ background: var(--sentient-bg-secondary, #f5f5f5);
font-style: italic;
}
-.editor-content code {
- font-family: "Fira Code", "Monaco", monospace;
- font-size: 14px;
- background: #f1f5f9;
- padding: 2px 6px;
+.editor-content pre {
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ padding: 12pt;
border-radius: 4px;
- color: #e11d48;
+ overflow-x: auto;
+ margin: 12pt 0;
}
-.editor-content pre {
- margin: 16px 0;
- padding: 16px;
- background: #1e293b;
- border-radius: 8px;
- overflow-x: auto;
+.editor-content code {
+ font-family: "Courier New", monospace;
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-size: 11pt;
}
.editor-content pre code {
background: transparent;
- color: #e2e8f0;
padding: 0;
}
-.editor-content mark {
- background: #fef08a;
- padding: 2px 4px;
- border-radius: 2px;
-}
-
.editor-content a {
- color: #3b82f6;
+ color: var(--sentient-accent, #4285f4);
text-decoration: underline;
}
-.editor-content hr {
- margin: 24px 0;
- border: none;
- border-top: 2px solid #e2e8f0;
-}
-
-.editor-content .callout {
- margin: 16px 0;
- padding: 16px;
- background: #eff6ff;
- border: 1px solid #bfdbfe;
- border-radius: 8px;
-}
-
-.editor-content .todo-item {
- display: flex;
- align-items: flex-start;
- gap: 12px;
- margin-bottom: 8px;
-}
-
-.editor-content .todo-checkbox {
- margin-top: 4px;
+.editor-content a:hover {
+ color: var(--sentient-accent-hover, #3367d6);
}
.editor-content img {
max-width: 100%;
height: auto;
- border-radius: 8px;
- margin: 16px 0;
+ display: block;
+ margin: 12pt auto;
}
.editor-content table {
width: 100%;
border-collapse: collapse;
- margin: 16px 0;
+ margin: 12pt 0;
}
.editor-content th,
.editor-content td {
- border: 1px solid #e2e8f0;
- padding: 12px;
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ padding: 8pt 12pt;
text-align: left;
}
.editor-content th {
- background: #f8fafc;
+ background: var(--sentient-bg-secondary, #f5f5f5);
font-weight: 600;
}
-/* Slash Command Menu */
-.slash-menu {
- position: absolute;
- width: 320px;
- max-height: 400px;
- background: var(--bg-secondary, #1e293b);
- border: 1px solid var(--border-color, #334155);
- border-radius: 12px;
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
- overflow: hidden;
- z-index: 1000;
+.editor-content hr {
+ border: none;
+ border-top: 1px solid var(--sentient-border, #e0e0e0);
+ margin: 24pt 0;
}
-.slash-menu.hidden {
- display: none;
-}
+/* =============================================================================
+ STATUS BAR
+ ============================================================================= */
-.slash-menu-header {
- padding: 12px 16px;
- background: var(--bg-tertiary, #0f172a);
- border-bottom: 1px solid var(--border-color, #334155);
- font-size: 12px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--text-secondary, #94a3b8);
-}
-
-.slash-menu-items {
- max-height: 340px;
- overflow-y: auto;
-}
-
-.slash-menu-divider {
- height: 1px;
- background: var(--border-color, #334155);
- margin: 8px 0;
-}
-
-.slash-item {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 10px 16px;
- cursor: pointer;
- transition: background 0.15s;
-}
-
-.slash-item:hover,
-.slash-item.selected {
- background: var(--bg-hover, rgba(255, 255, 255, 0.05));
-}
-
-.slash-item.ai-item {
- background: linear-gradient(
- 135deg,
- rgba(139, 92, 246, 0.1),
- rgba(99, 102, 241, 0.1)
- );
-}
-
-.slash-item.ai-item:hover {
- background: linear-gradient(
- 135deg,
- rgba(139, 92, 246, 0.2),
- rgba(99, 102, 241, 0.2)
- );
-}
-
-.slash-icon {
- width: 36px;
- height: 36px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--bg-tertiary, #0f172a);
- border-radius: 8px;
- font-size: 16px;
- flex-shrink: 0;
-}
-
-.slash-text {
- flex: 1;
- min-width: 0;
-}
-
-.slash-label {
- font-size: 14px;
- font-weight: 500;
- color: var(--text-primary, #f1f5f9);
-}
-
-.slash-desc {
- font-size: 12px;
- color: var(--text-secondary, #94a3b8);
- margin-top: 2px;
-}
-
-/* AI Panel */
-.ai-panel {
- width: 360px;
- background: var(--bg-secondary, #1e293b);
- border-left: 1px solid var(--border-color, #334155);
- display: flex;
- flex-direction: column;
- transition:
- transform 0.3s ease,
- width 0.3s ease;
- flex-shrink: 0;
-}
-
-.ai-panel.hidden {
- width: 0;
- transform: translateX(100%);
- overflow: hidden;
-}
-
-.ai-panel-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 16px;
- border-bottom: 1px solid var(--border-color, #334155);
-}
-
-.ai-panel-header h3 {
- font-size: 16px;
- font-weight: 600;
- color: var(--text-primary, #f1f5f9);
- margin: 0;
-}
-
-.ai-panel-content {
- flex: 1;
- overflow-y: auto;
- padding: 16px;
- display: flex;
- flex-direction: column;
- gap: 16px;
-}
-
-.ai-quick-actions {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 8px;
-}
-
-.ai-action-btn {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 12px;
- background: var(--bg-tertiary, #0f172a);
- border: 1px solid var(--border-color, #334155);
- border-radius: 8px;
- color: var(--text-primary, #f1f5f9);
- font-size: 13px;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.ai-action-btn:hover {
- border-color: var(--accent-color, #3b82f6);
- background: rgba(59, 130, 246, 0.1);
-}
-
-.ai-section {
- background: var(--bg-tertiary, #0f172a);
- border-radius: 8px;
- padding: 16px;
-}
-
-.ai-section-label {
- display: block;
- font-size: 12px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: var(--text-secondary, #94a3b8);
- margin-bottom: 12px;
-}
-
-.tone-buttons {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
-}
-
-.tone-btn {
- padding: 8px 12px;
- background: var(--bg-secondary, #1e293b);
- border: 1px solid var(--border-color, #334155);
- border-radius: 6px;
- color: var(--text-primary, #f1f5f9);
- font-size: 12px;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.tone-btn:hover,
-.tone-btn.active {
- border-color: var(--accent-color, #3b82f6);
- background: rgba(59, 130, 246, 0.1);
- color: var(--accent-color, #3b82f6);
-}
-
-.ai-select {
- width: 100%;
- padding: 10px 12px;
- background: var(--bg-secondary, #1e293b);
- border: 1px solid var(--border-color, #334155);
- border-radius: 6px;
- color: var(--text-primary, #f1f5f9);
- font-size: 13px;
- cursor: pointer;
-}
-
-.ai-textarea {
- width: 100%;
- min-height: 80px;
- padding: 12px;
- background: var(--bg-secondary, #1e293b);
- border: 1px solid var(--border-color, #334155);
- border-radius: 6px;
- color: var(--text-primary, #f1f5f9);
- font-size: 13px;
- resize: vertical;
- font-family: inherit;
- box-sizing: border-box;
-}
-
-.ai-textarea::placeholder {
- color: var(--text-secondary, #64748b);
-}
-
-.ai-response {
- background: var(--bg-tertiary, #0f172a);
- border-radius: 8px;
- overflow: hidden;
-}
-
-.ai-response.hidden {
- display: none;
-}
-
-.ai-response-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 12px 16px;
- background: linear-gradient(
- 135deg,
- rgba(139, 92, 246, 0.1),
- rgba(99, 102, 241, 0.1)
- );
- border-bottom: 1px solid var(--border-color, #334155);
-}
-
-.ai-response-header span {
- font-size: 12px;
- font-weight: 600;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- color: #a78bfa;
-}
-
-.ai-response-actions {
- display: flex;
- gap: 8px;
-}
-
-.ai-response-content {
- padding: 16px;
- font-size: 14px;
- line-height: 1.6;
- color: var(--text-primary, #f1f5f9);
- max-height: 300px;
- overflow-y: auto;
-}
-
-/* Status Bar */
.docs-status-bar {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 8px 16px;
- background: var(--bg-secondary, #1e293b);
- border-top: 1px solid var(--border-color, #334155);
+ padding: 4px 16px;
+ background: var(--sentient-bg-primary, #ffffff);
+ border-top: 1px solid var(--sentient-border, #e0e0e0);
font-size: 12px;
- color: var(--text-secondary, #94a3b8);
+ color: var(--sentient-text-secondary, #666);
+ height: 28px;
+ flex-shrink: 0;
}
.status-left,
@@ -870,28 +484,271 @@
.status-right {
display: flex;
align-items: center;
- gap: 16px;
+ gap: 12px;
}
-.status-item {
+.status-divider {
+ color: var(--sentient-border, #e0e0e0);
+}
+
+.zoom-control {
display: flex;
align-items: center;
+ gap: 8px;
+}
+
+.btn-zoom {
+ width: 24px;
+ height: 24px;
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ background: var(--sentient-bg-primary, #ffffff);
+ border-radius: var(--sentient-radius-sm, 4px);
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--sentient-text-secondary, #666);
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.btn-zoom:hover {
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ color: var(--sentient-text-primary, #212121);
+}
+
+/* =============================================================================
+ CHAT PANEL
+ ============================================================================= */
+
+.chat-panel {
+ width: 320px;
+ display: flex;
+ flex-direction: column;
+ background: var(--sentient-bg-primary, #ffffff);
+ border-left: 1px solid var(--sentient-border, #e0e0e0);
+ flex-shrink: 0;
+ transition:
+ width 0.3s ease,
+ opacity 0.3s ease;
+}
+
+.chat-panel.collapsed {
+ width: 0;
+ opacity: 0;
+ overflow: hidden;
+}
+
+.chat-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--sentient-border, #e0e0e0);
+}
+
+.chat-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.chat-avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ background: linear-gradient(
+ 135deg,
+ var(--sentient-accent, #4285f4),
+ #8e44ad
+ );
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+}
+
+.chat-title h3 {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--sentient-text-primary, #212121);
+}
+
+.chat-status {
+ font-size: 12px;
+ color: var(--sentient-text-muted, #999);
+}
+
+.chat-close {
+ width: 32px;
+ height: 32px;
+ border: none;
+ background: transparent;
+ color: var(--sentient-text-muted, #999);
+ border-radius: var(--sentient-radius-sm, 4px);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.15s ease;
+}
+
+.chat-close:hover {
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ color: var(--sentient-text-primary, #212121);
+}
+
+.chat-messages {
+ flex: 1;
+ overflow-y: auto;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.chat-message {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.chat-message.user {
+ align-items: flex-end;
+}
+
+.chat-message.assistant {
+ align-items: flex-start;
+}
+
+.message-bubble {
+ max-width: 90%;
+ padding: 10px 14px;
+ border-radius: 12px;
+ font-size: 13px;
+ line-height: 1.5;
+}
+
+.chat-message.user .message-bubble {
+ background: var(--sentient-accent, #4285f4);
+ color: white;
+ border-bottom-right-radius: 4px;
+}
+
+.chat-message.assistant .message-bubble {
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ color: var(--sentient-text-primary, #212121);
+ border-bottom-left-radius: 4px;
+}
+
+.message-bubble p {
+ margin: 0 0 8px 0;
+}
+
+.message-bubble p:last-child {
+ margin-bottom: 0;
+}
+
+.message-bubble ul {
+ margin: 8px 0 0 0;
+ padding-left: 20px;
+}
+
+.message-bubble li {
+ margin: 4px 0;
+}
+
+.chat-suggestions {
+ display: flex;
+ flex-wrap: wrap;
gap: 6px;
+ padding: 8px 16px;
+ border-top: 1px solid var(--sentient-border, #e0e0e0);
}
-.save-status.saving {
- color: #fbbf24;
+.suggestion-btn {
+ padding: 6px 12px;
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ border-radius: 16px;
+ font-size: 12px;
+ color: var(--sentient-text-secondary, #666);
+ cursor: pointer;
+ transition: all 0.15s ease;
+ white-space: nowrap;
}
-.save-status.saved {
- color: #22c55e;
+.suggestion-btn:hover {
+ background: var(--sentient-bg-hover, #e8e8e8);
+ color: var(--sentient-text-primary, #212121);
+ border-color: var(--sentient-accent, #4285f4);
}
-.save-status.error {
- color: #ef4444;
+.chat-input-container {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 16px;
+ border-top: 1px solid var(--sentient-border, #e0e0e0);
}
-/* Modals */
+.chat-input {
+ flex: 1;
+ padding: 10px 14px;
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ border-radius: 20px;
+ font-size: 13px;
+ background: var(--sentient-bg-primary, #ffffff);
+ color: var(--sentient-text-primary, #212121);
+ transition: border-color 0.15s ease;
+}
+
+.chat-input:focus {
+ outline: none;
+ border-color: var(--sentient-accent, #4285f4);
+}
+
+.chat-input::placeholder {
+ color: var(--sentient-text-muted, #999);
+}
+
+.chat-send {
+ width: 36px;
+ height: 36px;
+ border: none;
+ background: var(--sentient-accent, #4285f4);
+ color: white;
+ border-radius: 50%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.15s ease;
+ flex-shrink: 0;
+}
+
+.chat-send:hover {
+ background: var(--sentient-accent-hover, #3367d6);
+}
+
+.chat-toggle {
+ position: relative;
+}
+
+.chat-toggle.has-notification::after {
+ content: "";
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ width: 8px;
+ height: 8px;
+ background: #ea4335;
+ border-radius: 50%;
+}
+
+/* =============================================================================
+ MODALS
+ ============================================================================= */
+
.modal {
position: fixed;
top: 0;
@@ -903,7 +760,8 @@
align-items: center;
justify-content: center;
z-index: 1000;
- backdrop-filter: blur(4px);
+ opacity: 1;
+ transition: opacity 0.2s ease;
}
.modal.hidden {
@@ -911,50 +769,172 @@
}
.modal-content {
- background: var(--bg-secondary, #1e293b);
- border: 1px solid var(--border-color, #334155);
- border-radius: 16px;
- padding: 24px;
- min-width: 400px;
- max-width: 90vw;
+ background: var(--sentient-bg-primary, #ffffff);
+ border-radius: var(--sentient-radius-lg, 12px);
+ width: 90%;
+ max-width: 480px;
+ max-height: 90vh;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.modal-content.modal-small {
+ max-width: 360px;
+}
+
+.modal-content.modal-large {
+ max-width: 600px;
}
.modal-header {
display: flex;
- justify-content: space-between;
align-items: center;
- margin-bottom: 20px;
+ justify-content: space-between;
+ padding: 16px 20px;
+ border-bottom: 1px solid var(--sentient-border, #e0e0e0);
}
.modal-header h3 {
- font-size: 18px;
- font-weight: 600;
- color: var(--text-primary, #f1f5f9);
margin: 0;
-}
-
-.modal-body {
- margin-bottom: 20px;
+ font-size: 16px;
+ font-weight: 600;
+ color: var(--sentient-text-primary, #212121);
}
.btn-close {
- padding: 8px;
- background: transparent;
+ width: 32px;
+ height: 32px;
border: none;
- border-radius: 8px;
- color: var(--text-secondary, #94a3b8);
+ background: transparent;
+ color: var(--sentient-text-muted, #999);
+ border-radius: var(--sentient-radius-sm, 4px);
cursor: pointer;
font-size: 20px;
- line-height: 1;
- transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.15s ease;
}
.btn-close:hover {
- background: var(--bg-hover, rgba(255, 255, 255, 0.1));
- color: var(--text-primary, #f1f5f9);
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ color: var(--sentient-text-primary, #212121);
}
-/* Export Options */
+.modal-body {
+ padding: 20px;
+}
+
+.modal-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ padding: 16px 20px;
+ border-top: 1px solid var(--sentient-border, #e0e0e0);
+}
+
+/* Form elements in modals */
+.form-group {
+ margin-bottom: 16px;
+}
+
+.form-group:last-child {
+ margin-bottom: 0;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 6px;
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--sentient-text-primary, #212121);
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+ width: 100%;
+ padding: 10px 12px;
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ border-radius: var(--sentient-radius-sm, 4px);
+ font-size: 14px;
+ background: var(--sentient-bg-primary, #ffffff);
+ color: var(--sentient-text-primary, #212121);
+ transition: border-color 0.15s ease;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+ outline: none;
+ border-color: var(--sentient-accent, #4285f4);
+}
+
+.form-row {
+ display: flex;
+ gap: 16px;
+}
+
+.form-row .form-group {
+ flex: 1;
+}
+
+/* Share Modal */
+.share-input-group {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 16px;
+}
+
+.share-input-group input,
+.share-input-group select {
+ padding: 10px 12px;
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ border-radius: var(--sentient-radius-sm, 4px);
+ font-size: 14px;
+ background: var(--sentient-bg-primary, #ffffff);
+ color: var(--sentient-text-primary, #212121);
+}
+
+.share-input-group input {
+ flex: 1;
+}
+
+.share-input-group input:focus,
+.share-input-group select:focus {
+ outline: none;
+ border-color: var(--sentient-accent, #4285f4);
+}
+
+.share-link-section {
+ margin-top: 20px;
+ padding-top: 20px;
+ border-top: 1px solid var(--sentient-border, #e0e0e0);
+}
+
+.share-link-section h4 {
+ margin: 0 0 12px 0;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--sentient-text-primary, #212121);
+}
+
+.share-link-group {
+ display: flex;
+ gap: 8px;
+}
+
+.share-link-group input {
+ flex: 1;
+ padding: 10px 12px;
+ border: 1px solid var(--sentient-border, #e0e0e0);
+ border-radius: var(--sentient-radius-sm, 4px);
+ font-size: 13px;
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ color: var(--sentient-text-secondary, #666);
+}
+
+/* Export Modal */
.export-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -966,229 +946,132 @@
flex-direction: column;
align-items: center;
gap: 8px;
- padding: 20px;
- background: var(--bg-tertiary, #0f172a);
- border: 2px solid var(--border-color, #334155);
- border-radius: 12px;
+ padding: 20px 16px;
+ background: var(--sentient-bg-secondary, #f5f5f5);
+ border: 2px solid var(--sentient-border, #e0e0e0);
+ border-radius: var(--sentient-radius-md, 8px);
cursor: pointer;
- transition: all 0.2s;
+ transition: all 0.15s ease;
}
.export-option:hover {
- border-color: var(--accent-color, #3b82f6);
- background: rgba(59, 130, 246, 0.1);
+ border-color: var(--sentient-accent, #4285f4);
+ background: rgba(66, 133, 244, 0.1);
}
.export-icon {
- font-size: 32px;
+ font-size: 28px;
}
.export-label {
- font-size: 14px;
+ font-size: 13px;
font-weight: 500;
- color: var(--text-primary, #f1f5f9);
+ color: var(--sentient-text-primary, #212121);
}
-/* Focus Mode */
-.docs-container.focus-mode .docs-sidebar,
-.docs-container.focus-mode .ai-panel {
- display: none;
-}
+/* =============================================================================
+ RESPONSIVE
+ ============================================================================= */
-.docs-container.focus-mode .editor-toolbar {
- opacity: 0;
- transition: opacity 0.3s;
-}
-
-.docs-container.focus-mode:hover .editor-toolbar {
- opacity: 1;
-}
-
-.docs-container.focus-mode .editor-page {
- max-width: 720px;
-}
-
-/* Loading State */
-.loading-placeholder {
- padding: 40px;
- text-align: center;
- color: var(--text-secondary, #94a3b8);
- font-size: 14px;
-}
-
-.loading-spinner {
- width: 32px;
- height: 32px;
- border: 3px solid var(--border-color, #334155);
- border-top-color: var(--accent-color, #3b82f6);
- border-radius: 50%;
- margin: 0 auto 16px;
- animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
- to {
- transform: rotate(360deg);
- }
-}
-
-/* Responsive Design */
@media (max-width: 1200px) {
- .ai-panel {
- width: 320px;
+ .docs-canvas {
+ padding: 24px 16px;
+ }
+
+ .editor-page {
+ width: 100%;
+ max-width: var(--docs-page-width);
}
}
@media (max-width: 1024px) {
- .docs-sidebar {
- display: none;
- width: 240px;
- }
-
- .docs-sidebar.open {
- display: flex;
- }
-
- .ai-panel {
+ .chat-panel {
position: fixed;
- right: 0;
top: 0;
+ right: 0;
bottom: 0;
- z-index: 100;
width: 320px;
+ z-index: 100;
+ box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}
- .ai-panel.hidden {
+ .chat-panel.collapsed {
transform: translateX(100%);
- }
-
- .toolbar-center {
- display: none;
- }
-
- .editor-toolbar.expanded .toolbar-center {
- display: flex;
- width: 100%;
- order: 3;
- margin-top: 8px;
+ width: 320px;
}
}
@media (max-width: 768px) {
- .docs-sidebar {
- display: none;
- position: fixed;
- left: 0;
- top: 0;
- bottom: 0;
- z-index: 100;
- width: 280px;
- }
-
- .docs-sidebar.open {
- display: flex;
- }
-
- .docs-sidebar-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
- z-index: 99;
+ .toolbar-center {
display: none;
}
- .docs-sidebar-overlay.visible {
- display: block;
+ .doc-name-input {
+ max-width: 150px;
}
- .editor-canvas {
- padding: 20px;
+ .btn-primary span {
+ display: none;
+ }
+
+ .chat-panel {
+ width: 100%;
+ }
+
+ .docs-canvas {
+ padding: 16px 8px;
}
.editor-page {
- padding: 40px 24px;
+ padding: 48px 36px;
min-height: auto;
}
- .doc-title-input {
- min-width: 120px;
- font-size: 14px;
- }
-
- .modal-content {
- min-width: auto;
- width: calc(100vw - 32px);
- max-height: calc(100vh - 32px);
- overflow-y: auto;
- }
-
.export-options {
- grid-template-columns: 1fr;
+ grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
- .editor-toolbar {
- padding: 8px;
+ .docs-toolbar {
+ padding: 6px 10px;
+ }
+
+ .toolbar-right {
+ gap: 6px;
+ }
+
+ .btn-primary {
+ padding: 8px 12px;
}
.editor-page {
- padding: 24px 16px;
- }
-
- .editor-title {
- font-size: 24px;
- }
-
- .editor-content {
- font-size: 15px;
- }
-
- .toolbar-group {
- gap: 2px;
- }
-
- .btn-icon {
- width: 28px;
- height: 28px;
- }
-
- .toolbar-divider {
- margin: 0 4px;
- }
-
- .slash-menu {
- width: calc(100vw - 32px);
- max-width: 320px;
+ padding: 32px 24px;
}
}
-/* Print Styles */
+/* =============================================================================
+ PRINT
+ ============================================================================= */
+
@media print {
- .docs-sidebar,
- .editor-toolbar,
- .ai-panel,
+ .docs-toolbar,
.docs-status-bar,
- .slash-menu,
+ .chat-panel,
.modal {
display: none !important;
}
- .docs-container {
- display: block;
+ .docs-app {
height: auto;
background: white;
- color: black;
}
.docs-main {
display: block;
}
- .editor-canvas {
+ .docs-canvas {
padding: 0;
background: white;
overflow: visible;
@@ -1197,57 +1080,30 @@
.editor-page {
width: 100%;
max-width: none;
- min-height: auto;
- padding: 0;
box-shadow: none;
- border-radius: 0;
+ padding: 0;
+ margin: 0;
}
.editor-content {
- color: black;
- }
-
- .editor-content a {
- color: black;
- text-decoration: underline;
- }
-
- .editor-content pre {
- background: #f0f0f0;
- color: black;
+ font-size: 12pt;
}
}
-/* High Contrast Mode */
-@media (prefers-contrast: high) {
- .btn-icon:focus,
- .btn-primary:focus,
- .toolbar-select:focus {
- outline: 2px solid var(--accent-color, #3b82f6);
- outline-offset: 2px;
- }
+/* =============================================================================
+ SELECTION HIGHLIGHT
+ ============================================================================= */
- .editor-content:focus {
- outline: 2px solid var(--accent-color, #3b82f6);
- }
+.editor-content ::selection {
+ background: rgba(66, 133, 244, 0.3);
}
-/* Reduced Motion */
-@media (prefers-reduced-motion: reduce) {
- .docs-sidebar,
- .ai-panel,
- .btn-icon,
- .btn-primary,
- .btn-ai,
- .btn-new-doc,
- .doc-item,
- .template-btn,
- .slash-item,
- .ai-action-btn,
- .tone-btn,
- .export-option,
- .loading-spinner {
- transition: none;
- animation: none;
- }
+.editor-content ::-moz-selection {
+ background: rgba(66, 133, 244, 0.3);
}
+
+/* =============================================================================
+ FOCUS MODE
+ ============================================================================= */
+
+.
diff --git a/ui/suite/docs/docs.html b/ui/suite/docs/docs.html
index 2533e38..f81c1bf 100644
--- a/ui/suite/docs/docs.html
+++ b/ui/suite/docs/docs.html
@@ -1,161 +1,19 @@
-
+
-
-
-
-
-