/* ═════════════════════════════════════════════════════════════════
gofire-ui.css — Go Fire (fAIre) visual layer
─────────────────────────────────────────────────────────────────
ALL UI/visual changes for Go Fire live in this file.
The HTML file should NOT be touched for styling.
Safe to edit: colours, fonts, sizes, spacing, borders, animations,
hover effects, theme variables.
DO NOT edit unless you know what you're doing:
- The structural CSS lives in css/layout.css, css/topbar.css,
css/sidebar.css, css/chat.css, css/modals.css, css/plan-builder.css,
css/status-and-toast.css, and css/upload-progress.css. Those files
handle modal mechanics, layout grids, and the floor-plan canvas.
Editing them can break features.
Loaded AFTER the structural CSS files, so every rule here
wins by cascade order.
═════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
Go Fire (fAIre) — Light Pastel Theme
════════════════════════════════════════════════════ */
:root {
--gf-card: rgba(255,255,255,0.96);
--gf-card-2: rgba(255,255,255,1.00);
--gf-border: rgba(40, 35, 30, 0.08);
--gf-border-2: rgba(40, 35, 30, 0.05);
--gf-text: #1A1D29;
--gf-text-2: #4B5063;
--gf-text-3: #8A8FA0;
--gf-blue: #5B7FFF;
--gf-blue-2: #4361EE;
--gf-blue-soft:rgba(91,127,255,0.22);
/* Clean soft drop shadow for white cards floating on a cream
canvas (matches the reference image). Warm undertone instead
of pure black so the shadow blends with the peach background. */
--gf-shadow:
0 1px 2px rgba(80, 60, 50, 0.04),
0 4px 10px rgba(80, 60, 50, 0.05),
0 16px 32px rgba(80, 60, 50, 0.06),
0 32px 64px rgba(80, 60, 50, 0.05);
--gf-shadow-2:
0 2px 4px rgba(80, 60, 50, 0.06),
0 8px 20px rgba(80, 60, 50, 0.08),
0 24px 48px rgba(80, 60, 50, 0.10),
0 48px 96px rgba(80, 60, 50, 0.08);
--gf-glass-edge: inset 0 1px 0 rgba(255,255,255,0.80);
--gf-blur: 24px;
}
body {
color: var(--gf-text) !important;
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #F1ECE8 !important;
}
/* Soft neutral canvas — pale warm-beige base with barely-there
dusty-pink and lavender blooms, matching the reference image.
The panels read as clean white cards floating on this wash. */
body::before {
content: '' !important;
position: fixed !important;
inset: 0 !important;
z-index: -1 !important;
background:
radial-gradient(70% 55% at 12% 18%, rgba(232, 210, 210, 0.60) 0%, transparent 72%),
radial-gradient(65% 50% at 88% 20%, rgba(228, 214, 220, 0.55) 0%, transparent 72%),
radial-gradient(70% 55% at 85% 88%, rgba(220, 218, 232, 0.55) 0%, transparent 72%),
radial-gradient(70% 55% at 15% 85%, rgba(230, 218, 214, 0.55) 0%, transparent 72%),
linear-gradient(180deg, #F4EFEB 0%, #EFE9E4 100%) !important;
pointer-events: none !important;
opacity: 1 !important;
filter: none !important;
display: block !important;
}
body::after { content: none !important; }
/* Force every element to use the unified font */
html, body, button, input, textarea, select, span, div, p, h1, h2, h3, h4, h5, h6, label, a, li, td, th {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
letter-spacing: -0.01em;
}
h1, h2, h3, .welcome-title, .gf-logo-text, .modal-title, .pf-title {
letter-spacing: -0.025em !important;
}
/* ── Liquid glass primitive ──
Frosted-milk panel + multi-layer drop shadow for the "floating on
a cloud" look from the reference. The heavy saturate + brightness
boost tints the underlying chroma through the glass so warm blobs
read as cream and cool blobs as pale blue. */
.topbar, .sidebar, .mode-banner, .chat-input-area, .status-bar,
.project-panel, .modal-box, .plan-form-box, .pf-rag-drawer,
.gf-sidebar-toggle, .project-selector, .source-item, .doc-item,
.suggestion, .message, .chat-input, .pf-card, .pf-quick-add,
.pf-canvas-tool-btn, .pf-view-toggle, .pf-canvas-page-btn,
.pf-canvas-dropzone, .pf-tabs, .pf-header, .pf-footer,
.gf-upload-rect, .toast {
background: var(--gf-card) !important;
backdrop-filter: blur(var(--gf-blur)) saturate(115%) !important;
-webkit-backdrop-filter: blur(var(--gf-blur)) saturate(115%) !important;
border: 1px solid var(--gf-border) !important;
box-shadow: var(--gf-shadow), var(--gf-glass-edge) !important;
}
/* Catch-all: any element that previously had a hard white/light bg
gets neutralised so the chroma can show through */
.welcome, .upload-progress, .pf-content, .pf-form-area,
.pf-items, .pf-section-head, .pf-conn-grid, .pf-conn-pills,
.pf-card-head, .pf-card-fields, .pf-card-footer, .docList,
#docList, #planList, .sidebar-section {
background: transparent !important;
}
/* Soft gradient blobs in the background */
body::before, body::after {
content: '';
position: fixed;
border-radius: 50%;
filter: blur(90px);
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
body::before {
width: 520px; height: 520px;
top: -160px; left: -120px;
background: radial-gradient(circle, #C9D7FF 0%, #E0D4FF 50%, transparent 70%);
}
body::after {
width: 600px; height: 600px;
bottom: -200px; right: -160px;
background: radial-gradient(circle, #FFD1E8 0%, #CFE7FF 55%, transparent 75%);
}
/* ── Top Bar ── */
.topbar {
background: rgba(255,255,255,0.7) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--gf-border) !important;
padding: 0 24px !important;
height: 64px !important;
z-index: 200;
}
/* ── Logo ── */
.gf-logo {
display: flex !important;
align-items: center !important;
gap: 12px !important;
font-family: 'Geist', sans-serif !important;
}
.gf-logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #B8C7FF 0%, #E0D4FF 50%, #FFD1E8 100%);
color: #fff;
font-size: 18px;
box-shadow: 0 4px 12px rgba(91,127,255,0.25);
}
.gf-logo-text {
font-family: 'Geist', sans-serif;
font-weight: 900;
font-size: 19px;
letter-spacing: -0.5px;
color: var(--gf-text);
text-transform: none;
}
.gf-logo-paren { color: var(--gf-text-2); font-weight: 700; }
.gf-logo-ai { color: var(--gf-blue); font-weight: 900; }
/* ── Hide status bar while a chat is ongoing, let the sidebar
divider extend all the way to the bottom of the viewport ── */
body.gf-chat-started .status-bar,
body.gf-has-messages .status-bar {
display: none !important;
}
/* ── Logo mark: flame gets an orange moving aura on hover ── */
.gf-logo-mark {
position: relative;
transform-origin: center;
transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gf-logo-mark i {
position: relative;
z-index: 2;
transition: color .35s ease, filter .35s ease, transform .35s ease;
}
.gf-logo-mark::after {
content: "";
position: absolute;
inset: -40%;
border-radius: 50%;
background:
radial-gradient(circle at 50% 60%, rgba(255,170,60,0.85) 0%, rgba(255,110,30,0.55) 25%, rgba(255,80,20,0) 60%);
filter: blur(10px);
opacity: 0;
transform: scale(0.6);
pointer-events: none;
z-index: 1;
transition: opacity .45s ease, transform .45s ease;
}
.gf-logo:hover .gf-logo-mark {
transform: translateY(-1px);
}
.gf-logo:hover .gf-logo-mark::after {
opacity: 1;
transform: scale(1);
animation: gfFlameAura 2.6s ease-in-out infinite;
}
.gf-logo:hover .gf-logo-mark i {
color: #fff5e6;
filter: drop-shadow(0 0 6px rgba(255,150,40,0.95)) drop-shadow(0 0 14px rgba(255,90,20,0.6));
animation: gfFlameFlicker 1.8s ease-in-out infinite;
}
@keyframes gfFlameAura {
0%, 100% {
transform: scale(1) translate(0, 0);
filter: blur(10px) hue-rotate(0deg);
opacity: 0.9;
}
25% {
transform: scale(1.12) translate(-2%, -3%);
filter: blur(12px) hue-rotate(-8deg);
opacity: 1;
}
50% {
transform: scale(1.05) translate(2%, -1%);
filter: blur(11px) hue-rotate(4deg);
opacity: 0.85;
}
75% {
transform: scale(1.15) translate(-1%, -2%);
filter: blur(13px) hue-rotate(-4deg);
opacity: 1;
}
}
@keyframes gfFlameFlicker {
0%, 100% { transform: translateY(0) scale(1); }
30% { transform: translateY(-0.5px) scale(1.04); }
60% { transform: translateY(0.5px) scale(0.98); }
}
.gf-tagline {
margin-left: 14px;
padding-left: 14px;
border-left: 1px solid var(--gf-border);
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.6px;
color: var(--gf-text-2);
text-transform: uppercase;
}
/* ── Mode Toggle ── */
.mode-toggle {
background: var(--gf-blue-soft) !important;
padding: 4px !important;
}
.mode-btn {
color: var(--gf-text-2) !important;
font-weight: 700 !important;
}
.mode-btn.active-consultant {
background: var(--gf-blue) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(91,127,255,0.3);
}
.mode-btn.active-reviewer {
background: #6E8BFF !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(110,139,255,0.3);
}
.mode-btn.inactive { background: transparent !important; color: var(--gf-text-3) !important; }
/* ── Project controls ── */
.project-selector {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
border-radius: 10px !important;
color: var(--gf-text) !important;
padding: 8px 14px !important;
box-shadow: var(--gf-shadow);
}
.project-selector:hover { border-color: var(--gf-blue) !important; }
.project-dot { background: var(--gf-blue) !important; }
.btn-new-project {
background: var(--gf-blue) !important;
border: none !important;
color: #fff !important;
padding: 9px 16px !important;
border-radius: 10px !important;
font-weight: 700 !important;
box-shadow: 0 6px 16px rgba(91,127,255,0.3);
}
.btn-new-project:hover { background: var(--gf-blue-2) !important; }
/* ── Project dropdown panel ── */
.project-panel {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
border-radius: 16px !important;
box-shadow: var(--gf-shadow-2) !important;
color: var(--gf-text) !important;
}
.panel-title { color: var(--gf-text-2) !important; }
.proj-item { color: var(--gf-text) !important; border-color: var(--gf-border-2) !important; }
.proj-item:hover { background: var(--gf-blue-soft) !important; }
.proj-dot { background: var(--gf-blue) !important; }
/* ── Main / sidebar / chat ── */
.main { background: transparent !important; position: relative; z-index: 1; }
.sidebar {
background: rgba(255,255,255,0.75) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-right: 1px solid var(--gf-border) !important;
}
.sidebar-label { color: var(--gf-text-3) !important; }
.source-item, .doc-item {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
border-radius: 12px !important;
box-shadow: var(--gf-shadow);
}
.source-item:hover, .doc-item:hover { border-color: var(--gf-blue) !important; }
.source-name, .doc-name { color: var(--gf-text) !important; }
.doc-meta, .source-badge { color: var(--gf-text-2) !important; }
.sidebar-divider { background: var(--gf-border) !important; }
.list-empty { color: var(--gf-text-3) !important; }
.chat-area { background: transparent !important; }
.mode-banner {
background: rgba(255,255,255,0.7) !important;
border-bottom: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
}
.banner-dot { background: var(--gf-blue) !important; }
.chat-messages { background: transparent !important; }
.message {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 18px !important;
box-shadow: var(--gf-shadow);
}
.chat-notice { color: var(--gf-text-2) !important; background: var(--gf-blue-soft) !important; border-radius: 12px !important; }
/* Welcome */
.welcome-title { color: var(--gf-text) !important; font-family: 'Geist', sans-serif; font-weight: 900 !important; letter-spacing: -1px !important; }
.welcome-subtitle { color: var(--gf-text-2) !important; }
.suggestion {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 14px !important;
box-shadow: var(--gf-shadow);
}
.suggestion:hover { border-color: var(--gf-blue) !important; transform: translateY(-1px); }
.suggestion-arrow { color: var(--gf-blue) !important; }
/* Chat input */
.chat-input-area {
background: rgba(255,255,255,0.75) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid var(--gf-border) !important;
}
.chat-input {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 14px !important;
box-shadow: var(--gf-shadow);
}
.chat-input:focus { border-color: var(--gf-blue) !important; outline: none; box-shadow: 0 0 0 4px var(--gf-blue-soft); }
.send-btn {
background: var(--gf-blue) !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
box-shadow: 0 6px 16px rgba(91,127,255,0.3);
}
.send-btn:hover { background: var(--gf-blue-2) !important; }
/* Status bar */
.status-bar {
background: rgba(255,255,255,0.7) !important;
border-top: 1px solid var(--gf-border) !important;
color: var(--gf-text-2) !important;
}
.status-text { color: var(--gf-text-2) !important; }
.badge { background: var(--gf-blue-soft) !important; color: var(--gf-blue-2) !important; border: none !important; }
/* Modals */
.modal-backdrop { background: rgba(26,29,41,0.45) !important; backdrop-filter: blur(6px); }
.modal-box, .plan-form-box, .project-panel, .pf-rag-drawer {
background: var(--el-bg) !important;
color: var(--gf-text) !important;
border: 1px solid var(--gf-border) !important;
border-radius: 18px !important;
box-shadow: var(--gf-shadow-2) !important;
}
.modal-title, .pf-title { color: var(--gf-text) !important; }
.modal-input {
background: #FCFCF5 !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 10px !important;
}
.modal-input:focus { border-color: var(--gf-blue) !important; outline: none; box-shadow: 0 0 0 4px var(--gf-blue-soft); }
.modal-btn { border-radius: 10px !important; font-weight: 700 !important; }
.modal-btn.cancel { background: #F4F5FB !important; color: var(--gf-text) !important; border: 1px solid var(--gf-border) !important; }
.modal-btn.confirm { background: var(--gf-blue) !important; color: #fff !important; border: none !important; }
.modal-btn.confirm:hover { background: var(--gf-blue-2) !important; }
.modal-warning { color: #B8541C !important; }
/* Plan form */
.pf-header, .pf-tabs { background: #FCFCF5 !important; border-color: var(--gf-border) !important; color: var(--gf-text) !important; }
.pf-tab { color: var(--gf-text-2) !important; }
.pf-tab.active { color: var(--gf-blue) !important; border-color: var(--gf-blue) !important; }
.pf-card, .pf-quick-add {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 14px !important;
box-shadow: var(--gf-shadow);
}
.pf-card-name, .pf-section-title { color: var(--gf-text) !important; }
.pf-section-hint, .pf-card-summary, .pf-empty { color: var(--gf-text-2) !important; }
/* Form inputs — bring into light theme */
.pf-meta-input,
.pf-field input[type=text],
.pf-field select,
.pf-field textarea,
.pf-quick-add input {
background: #FCFCF5 !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 10px !important;
padding: 11px 14px !important;
font-size: 13px !important;
transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
}
.pf-meta-input:hover,
.pf-field input[type=text]:hover,
.pf-field select:hover,
.pf-field textarea:hover,
.pf-quick-add input:hover {
border-color: #C9D0E0 !important;
background: var(--el-bg) !important;
}
.pf-meta-input:focus,
.pf-field input[type=text]:focus,
.pf-field select:focus,
.pf-field textarea:focus,
.pf-quick-add input:focus {
border-color: var(--gf-blue) !important;
background: var(--el-bg) !important;
box-shadow: 0 0 0 3px rgba(91, 127, 255, 0.15) !important;
}
.pf-meta-input::placeholder,
.pf-field input[type=text]::placeholder,
.pf-field textarea::placeholder,
.pf-quick-add input::placeholder {
color: var(--gf-text-3) !important;
}
.pf-meta-label,
.pf-field label {
color: var(--gf-text-2) !important;
}
.pf-quick-add-icon { color: #ff6b2b !important; }
.pf-quick-add-hint { color: var(--gf-text-3) !important; }
.pf-quick-add-hint kbd {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 5px !important;
padding: 2px 6px !important;
box-shadow: 0 1px 0 rgba(60, 70, 120, 0.05) !important;
}
.pf-card-name {
background: transparent !important;
color: var(--gf-text) !important;
border-bottom: 1px solid var(--gf-border) !important;
}
.pf-card-name::placeholder { color: var(--gf-text-3) !important; }
.pf-card-name:hover { border-bottom-color: #C9D0E0 !important; }
.pf-card-name:focus { border-bottom-color: var(--gf-blue) !important; }
.pf-add-btn {
background: var(--gf-blue) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
}
.pf-add-btn:hover { background: var(--gf-blue-2) !important; }
.pf-footer { background: #FCFCF5 !important; border-color: var(--gf-border) !important; }
.pf-canvas-toolbar { background: var(--el-bg) !important; border-color: var(--gf-border) !important; }
.pf-canvas-tool-btn { color: var(--gf-text) !important; }
.pf-canvas-dropzone {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
padding: 36px 24px !important;
margin: 14px 22px !important;
background: var(--el-bg) !important;
border: 2px dashed var(--gf-border) !important;
color: var(--gf-text-2) !important;
border-radius: 18px !important;
box-shadow: 0 1px 0 rgba(60, 70, 120, 0.03) !important;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease !important;
}
.pf-canvas-dropzone:hover {
border-color: #ff6b2b !important;
background: #FFF6F0 !important;
}
.pf-canvas-dropzone.drag-over {
border-color: #ff6b2b !important;
background: #FFEBDD !important;
transform: scale(1.005);
}
.pf-canvas-dropzone .pf-canvas-dropzone-icon {
width: 56px !important;
height: 56px !important;
border-radius: 16px !important;
background: linear-gradient(135deg, #FFE4D2 0%, #FFD1B8 100%) !important;
border: 1px solid #FFD1B8 !important;
color: #ff6b2b !important;
box-shadow: 0 6px 16px rgba(255, 107, 43, 0.18) !important;
}
.pf-canvas-dropzone .pf-canvas-dropzone-icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
}
.pf-canvas-dropzone .pf-canvas-dropzone-body {
text-align: center;
}
.pf-canvas-dropzone .pf-canvas-dropzone-text {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--gf-text) !important;
letter-spacing: -0.01em;
}
.pf-canvas-dropzone .pf-canvas-dropzone-hint {
font-size: 12px !important;
color: var(--gf-text-3) !important;
margin-top: 4px !important;
}
.pf-canvas-dropzone .pf-canvas-dropzone-btn {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
padding: 9px 20px !important;
border-radius: 10px !important;
font-size: 12px !important;
font-weight: 600 !important;
box-shadow: 0 1px 2px rgba(60, 70, 120, 0.06) !important;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
.pf-canvas-dropzone .pf-canvas-dropzone-btn:hover {
background: #ff6b2b !important;
border-color: #ff6b2b !important;
color: #fff !important;
}
/* Toast */
.toast {
background: var(--el-bg) !important;
color: var(--gf-text) !important;
border: 1px solid var(--gf-border) !important;
box-shadow: var(--gf-shadow-2) !important;
border-radius: 12px !important;
}
/* ── User profile (sidebar top) ── */
.gf-user {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 16px 16px;
}
.gf-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #B8C7FF 0%, #E0D4FF 50%, #FFD1E8 100%);
color: #fff;
font-family: 'Geist', sans-serif;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.5px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 16px rgba(91,127,255,0.28);
flex-shrink: 0;
}
.gf-user-info { display: flex; flex-direction: column; min-width: 0; }
.gf-user-name {
font-size: 14px;
font-weight: 700;
color: var(--gf-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
.gf-user-role {
font-size: 11px;
color: var(--gf-text-2);
margin-top: 3px;
font-weight: 500;
}
/* ── Breathing / elevation hover for guidance items ── */
@keyframes gf-breathe {
0%, 100% { transform: translateY(-3px) scale(1); }
50% { transform: translateY(-5px) scale(1.015); }
}
.gf-breathe {
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease, background 0.25s ease;
will-change: transform;
}
.gf-breathe:hover {
animation: gf-breathe 2.6s ease-in-out infinite;
box-shadow: 0 16px 32px rgba(60, 70, 120, 0.16) !important;
border-color: var(--gf-blue) !important;
background: var(--el-bg) !important;
}
/* ── Upload 2D Layout — big rectangle ── */
.gf-upload-rect {
width: calc(100% - 28px);
margin: 6px 14px 12px;
padding: 18px 16px;
background: linear-gradient(135deg, #FFFFF8 0%, #F4F7FF 100%);
border: 2px dashed #D6DCEF;
border-radius: 14px;
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
color: var(--gf-text);
text-align: left;
transition: all 0.28s ease;
font-family: 'Geist', sans-serif;
}
.gf-upload-rect:hover {
border-color: var(--gf-blue);
background: linear-gradient(135deg, #F4F7FF 0%, #E8EEFF 100%);
transform: translateY(-2px);
box-shadow: var(--gf-shadow);
}
.gf-upload-rect-icon {
width: 40px; height: 40px;
border-radius: 11px;
background: var(--gf-blue-soft);
color: var(--gf-blue);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.gf-upload-rect-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; }
.gf-upload-rect-text strong { font-size: 13px; font-weight: 700; color: var(--gf-text); letter-spacing: -0.01em; }
.gf-upload-rect-text small { font-size: 10.5px; color: var(--gf-text-2); font-weight: 500; }
/* ── Upload Documents button ── */
.gf-upload-doc-btn {
margin: 10px 14px 14px !important;
background: var(--gf-blue) !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
padding: 12px !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.2px;
box-shadow: 0 6px 16px rgba(91,127,255,0.3) !important;
transition: all 0.2s ease;
}
.gf-upload-doc-btn:hover {
background: var(--gf-blue-2) !important;
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(91,127,255,0.35) !important;
}
/* ── Sidebar width + collapse ── */
.sidebar {
width: 248px !important;
transition: width 0.32s cubic-bezier(.4,0,.2,1),
opacity 0.22s ease,
border-color 0.32s ease;
overflow-x: hidden;
}
body.gf-sidebar-collapsed .sidebar {
width: 0 !important;
border-right-color: transparent !important;
opacity: 0;
pointer-events: none;
}
/* ── Topbar left group + toggle button ── */
.gf-topbar-left { display: flex; align-items: center; gap: 14px; }
.gf-sidebar-toggle {
width: 38px; height: 38px;
border-radius: 10px;
background: var(--el-bg);
border: 1px solid var(--gf-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
box-shadow: var(--gf-shadow);
transition: all 0.2s ease;
padding: 0;
}
.gf-sidebar-toggle:hover {
border-color: var(--gf-blue);
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(91,127,255,0.18);
}
.gf-toggle-bar {
display: block;
width: 16px; height: 2px;
background: var(--gf-text);
border-radius: 2px;
transition: all 0.25s ease;
}
body.gf-sidebar-collapsed .gf-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.gf-sidebar-collapsed .gf-toggle-bar:nth-child(2) { opacity: 0; }
body.gf-sidebar-collapsed .gf-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ── Badge variants: neutral fill, thin delicate neon border ── */
.gf-badge-resi, .gf-badge-comm {
background: transparent !important;
font-weight: 600 !important;
padding: 3px 9px !important;
border-radius: 999px !important;
font-size: 9.5px !important;
letter-spacing: 0.3px !important;
text-transform: none !important;
color: var(--gf-text-2, #777) !important;
}
.gf-badge-resi {
border: 1px solid rgba(57, 255, 156, 0.55) !important;
box-shadow: 0 0 4px rgba(57, 255, 156, 0.25), inset 0 0 3px rgba(57, 255, 156, 0.08) !important;
}
.gf-badge-comm {
border: 1px solid rgba(255, 140, 60, 0.55) !important;
box-shadow: 0 0 4px rgba(255, 140, 60, 0.25), inset 0 0 3px rgba(255, 140, 60, 0.08) !important;
}
/* ════════════════════════════════════════════════════
Plan Form Modal — full light pastel override
════════════════════════════════════════════════════ */
.plan-form-box {
background: var(--el-bg) !important;
color: var(--gf-text) !important;
border: 1px solid var(--gf-border) !important;
}
.pf-header {
background: #FCFCF5 !important;
border-bottom: 1px solid var(--gf-border) !important;
}
.pf-meta-label, .pf-meta-grid label {
color: var(--gf-text-3) !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
}
.pf-meta-field input, .pf-header input, .pf-quick-add input, .pf-notes-details textarea {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 10px !important;
}
.pf-meta-field input::placeholder, .pf-quick-add input::placeholder, .pf-notes-details textarea::placeholder {
color: var(--gf-text-3) !important;
}
.pf-meta-field input:focus, .pf-header input:focus, .pf-quick-add input:focus, .pf-notes-details textarea:focus {
border-color: var(--gf-blue) !important;
box-shadow: 0 0 0 4px var(--gf-blue-soft) !important;
}
.pf-close, .pf-meta-collapse {
color: var(--gf-text-2) !important;
background: transparent !important;
}
.pf-close:hover, .pf-meta-collapse:hover {
color: var(--gf-text) !important;
background: var(--gf-blue-soft) !important;
}
/* Tabs sidebar */
.pf-tabs {
background: #FCFCF5 !important;
border-right: 1px solid var(--gf-border) !important;
}
.pf-tab { color: var(--gf-text-2) !important; border-left-color: transparent !important; }
.pf-tab:hover { background: #EEF1FA !important; color: var(--gf-text) !important; }
.pf-tab.active {
background: var(--el-bg) !important;
border-left-color: var(--gf-blue) !important;
color: var(--gf-text) !important;
}
.pf-tab-label { color: inherit !important; font-weight: 700 !important; }
.pf-tab.active .pf-tab-label { color: var(--gf-text) !important; }
.pf-tab-count {
background: var(--gf-blue-soft) !important;
color: var(--gf-blue-2) !important;
font-weight: 700 !important;
}
/* Content area */
.pf-content { background: var(--el-bg) !important; }
.pf-section-title { color: var(--gf-text) !important; font-weight: 700 !important; }
.pf-section-hint { color: var(--gf-text-2) !important; }
.pf-empty {
color: var(--gf-text-2) !important;
border: 1.5px dashed var(--gf-border) !important;
background: #FCFCF5 !important;
border-radius: 12px !important;
}
.pf-quick-add {
background: #FCFCF5 !important;
border: 1px solid var(--gf-border) !important;
border-radius: 12px !important;
}
.pf-quick-add-icon { color: var(--gf-blue) !important; }
.pf-quick-add-hint { color: var(--gf-text-3) !important; }
.pf-quick-add-hint kbd, .pf-kbd-hints kbd {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 5px !important;
}
.pf-add-btn {
background: var(--gf-blue) !important;
border: none !important;
color: #fff !important;
font-weight: 700 !important;
box-shadow: 0 6px 16px rgba(91,127,255,0.28) !important;
}
.pf-add-btn:hover { background: var(--gf-blue-2) !important; }
/* Cards */
.pf-card {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
border-radius: 14px !important;
box-shadow: var(--gf-shadow);
}
.pf-card:hover { border-color: var(--gf-blue) !important; }
.pf-card.expanded { background: var(--el-bg) !important; border-color: var(--gf-blue) !important; }
.pf-card.expanded .pf-card-head { background: var(--gf-blue-soft) !important; border-bottom-color: var(--gf-border) !important; }
.pf-card-name { color: var(--gf-text) !important; }
.pf-card-name::placeholder { color: var(--gf-text-3) !important; }
.pf-card-name:focus { border-bottom-color: var(--gf-blue) !important; background: #FCFCF5 !important; }
.pf-card-summary { color: var(--gf-text-2) !important; }
.pf-card-summary .pf-dim { color: var(--gf-text-3) !important; }
.pf-card-summary .pf-sum-link { color: var(--gf-blue) !important; }
.pf-card-icon-btn { color: var(--gf-text-2) !important; }
.pf-card-icon-btn:hover { color: var(--gf-blue) !important; background: var(--gf-blue-soft) !important; }
/* Connect pills */
.pf-conn-group-label { color: var(--gf-text-3) !important; }
.pf-conn-pill {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text-2) !important;
}
.pf-conn-pill:hover { border-color: var(--gf-blue) !important; color: var(--gf-text) !important; }
.pf-conn-pill.on {
background: var(--gf-blue) !important;
border-color: var(--gf-blue) !important;
color: #fff !important;
}
/* Notes details */
.pf-notes-details { border-top: 1px dashed var(--gf-border) !important; }
.pf-notes-details > summary { color: var(--gf-text-2) !important; }
.pf-notes-details > summary::before { color: var(--gf-blue) !important; }
.pf-notes-details > summary:hover { color: var(--gf-text) !important; }
/* Header summary collapsed */
.pf-header-summary {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 10px !important;
}
.pf-header-summary:hover { border-color: var(--gf-blue) !important; }
.pf-header-summary .pf-sum-sep { color: var(--gf-text-3) !important; }
.pf-header-summary .pf-sum-edit { color: var(--gf-text-2) !important; }
/* Prominent Link / Erase — light theme */
.pf-canvas-tool-btn.pf-tool-big {
background: var(--el-bg) !important;
border: 1.5px solid var(--gf-border) !important;
color: var(--gf-text) !important;
box-shadow: 0 1px 2px rgba(60,70,120,0.05) !important;
}
.pf-canvas-tool-btn.pf-tool-big:hover {
background: #FFF6F0 !important;
border-color: #ff6b2b !important;
color: #ff6b2b !important;
}
.pf-canvas-tool-btn.pf-tool-big.active {
background: #ff6b2b !important;
border-color: #ff6b2b !important;
color: #fff !important;
box-shadow: 0 6px 18px rgba(255,107,43,0.35) !important;
}
/* Canvas region */
.pf-canvas-toolbar {
background: #FCFCF5 !important;
border-bottom: 1px solid var(--gf-border) !important;
}
.pf-canvas-toolbar-sep { background: var(--gf-border) !important; }
.pf-canvas-tool-btn {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 8px !important;
font-weight: 600 !important;
}
.pf-canvas-tool-btn:hover { border-color: var(--gf-blue) !important; background: var(--gf-blue-soft) !important; color: var(--gf-text) !important; }
.pf-canvas-tool-btn.active { background: var(--gf-blue) !important; border-color: var(--gf-blue) !important; color: #fff !important; }
.pf-canvas-tool-group { background: var(--gf-border) !important; border-radius: 8px !important; }
.pf-canvas-tool-group .pf-canvas-tool-btn { border: none !important; border-right: 1px solid var(--gf-border) !important; }
.pf-view-toggle {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
border-radius: 8px !important;
}
.pf-view-btn { color: var(--gf-text-2) !important; }
.pf-view-btn:hover { color: var(--gf-text) !important; }
.pf-view-btn.active { background: var(--gf-blue-soft) !important; color: var(--gf-blue) !important; }
.pf-view-btn + .pf-view-btn { border-left: 1px solid var(--gf-border) !important; }
.pf-canvas-page-nav { color: var(--gf-text-2) !important; }
.pf-canvas-page-btn {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
}
.pf-canvas-page-btn:hover { border-color: var(--gf-blue) !important; color: var(--gf-blue) !important; }
.pf-canvas-wrap { background: #F4F5FB !important; }
/* Dropzone (canvas) */
.pf-canvas-dropzone {
background: #FCFCF5 !important;
border: 1.5px dashed var(--gf-border) !important;
border-radius: 14px !important;
color: var(--gf-text) !important;
}
.pf-canvas-dropzone:hover {
border-color: var(--gf-blue) !important;
background: var(--gf-blue-soft) !important;
}
.pf-canvas-dropzone.drag-over {
border-color: var(--gf-blue) !important;
background: var(--gf-blue-soft) !important;
}
.pf-canvas-dropzone-icon {
background: var(--gf-blue-soft) !important;
border: none !important;
color: var(--gf-blue) !important;
}
.pf-canvas-dropzone-text { color: var(--gf-text) !important; font-weight: 700 !important; }
.pf-canvas-dropzone-hint { color: var(--gf-text-2) !important; }
.pf-canvas-dropzone-btn {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 10px !important;
}
.pf-canvas-dropzone-btn:hover { border-color: var(--gf-blue) !important; color: var(--gf-blue) !important; }
.pf-canvas-hint { color: var(--gf-text-2) !important; }
/* RAG output preview drawer */
.pf-preview, .pf-rag-drawer {
background: #FCFCF5 !important;
border-left: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
}
.pf-preview-head, .pf-rag-drawer-head {
background: var(--el-bg) !important;
border-bottom: 1px solid var(--gf-border) !important;
}
.pf-preview-title, .pf-rag-drawer-title {
color: var(--gf-text) !important;
font-weight: 700 !important;
}
.pf-preview-toggle, .pf-rag-drawer-close {
background: var(--el-bg) !important;
border: 1px solid var(--gf-border) !important;
color: var(--gf-text) !important;
border-radius: 8px !important;
}
.pf-preview-toggle:hover, .pf-rag-drawer-close:hover { border-color: var(--gf-blue) !important; color: var(--gf-blue) !important; }
.pf-preview-body, .pf-rag-drawer-body {
color: var(--gf-text) !important;
background: #FCFCF5 !important;
}
.pf-prev-header { color: var(--gf-blue) !important; font-weight: 700 !important; }
/* Footer + kbd hints */
.pf-footer {
background: #FCFCF5 !important;
border-top: 1px solid var(--gf-border) !important;
}
.pf-footer-error { color: #D44D4D !important; }
.pf-kbd-hints { color: var(--gf-text-2) !important; }
.pf-form-right { border-left: 1px solid var(--gf-border) !important; background: #FCFCF5 !important; }
.pf-canvas-zoom-label { color: var(--gf-text-2) !important; }
.pf-split-handle { background: var(--gf-border) !important; }
/* Sidebar label restyle — more pro */
.sidebar-label {
font-size: 10px !important;
font-weight: 700 !important;
color: var(--gf-text-3) !important;
text-transform: uppercase !important;
letter-spacing: 1.4px !important;
margin-bottom: 10px;
}
/* ════════════════════════════════════════════════════
Liquid glass — text + remaining surfaces
════════════════════════════════════════════════════ */
/* Re-apply translucent glass to every surface that earlier rules
reset to solid white. This block must come AFTER those rules. */
.topbar, .sidebar, .mode-banner, .chat-input-area, .status-bar,
.project-panel, .modal-box, .plan-form-box, .pf-rag-drawer,
.gf-sidebar-toggle, .project-selector, .source-item, .doc-item,
.suggestion, .message, .chat-input, .pf-card, .pf-quick-add,
.pf-canvas-tool-btn, .pf-view-toggle, .pf-canvas-page-btn,
.pf-canvas-dropzone, .pf-tabs, .pf-header, .pf-footer,
.gf-upload-rect, .toast, .pf-card.expanded,
.pf-card.expanded .pf-card-head,
.pf-canvas-toolbar, .pf-preview, .pf-preview-head,
.pf-rag-drawer-head, .modal-input, .pf-meta-field input,
.pf-header input, .pf-quick-add input, .pf-notes-details textarea {
background: var(--gf-card) !important;
backdrop-filter: blur(var(--gf-blur)) saturate(160%) brightness(1.1) !important;
-webkit-backdrop-filter: blur(var(--gf-blur)) saturate(160%) brightness(1.1) !important;
border: 1px solid var(--gf-border) !important;
box-shadow: var(--gf-shadow), var(--gf-glass-edge) !important;
}
/* Inputs use slightly more opaque white glass */
.modal-input, .pf-meta-field input, .pf-header input,
.pf-quick-add input, .pf-notes-details textarea, .chat-input {
background: rgba(255,255,255,0.78) !important;
}
body { color: #1A1D29 !important; }
.welcome-title, .modal-title, .pf-title, .pf-section-title,
.gf-user-name, .gf-logo-text, .pf-card-name, .source-name,
.doc-name, .panel-title, .gf-upload-rect-text strong {
color: #1A1D29 !important;
text-shadow: none;
}
.welcome-subtitle, .pf-section-hint, .pf-card-summary, .pf-empty,
.gf-user-role, .gf-upload-rect-text small, .doc-meta, .source-badge:not(.gf-badge-resi):not(.gf-badge-comm),
.status-text, .pf-kbd-hints, .pf-meta-label, .pf-conn-group-label,
.sidebar-label {
color: #4B5063 !important;
}
/* Inputs / textareas — light frosted glass */
.modal-input, .pf-meta-field input, .pf-header input, .pf-quick-add input,
.pf-notes-details textarea, .chat-input {
background: rgba(255,255,255,0.78) !important;
border: 1px solid rgba(255,255,255,0.6) !important;
color: #1A1D29 !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
.modal-input::placeholder, .pf-meta-field input::placeholder,
.pf-quick-add input::placeholder, .chat-input::placeholder,
.pf-notes-details textarea::placeholder, .pf-card-name::placeholder {
color: #8A8FA0 !important;
}
.modal-input:focus, .pf-meta-field input:focus, .pf-quick-add input:focus,
.chat-input:focus, .pf-notes-details textarea:focus {
border-color: var(--gf-blue) !important;
box-shadow: 0 0 0 4px rgba(91,127,255,0.2) !important;
}
/* Areas that should be fully transparent (let the bg show) */
.main, .chat-area, .chat-messages, .pf-content, .pf-body,
.pf-canvas-wrap, .pf-canvas-region, .pf-form-right, .pf-preview,
.pf-preview-body, .pf-rag-drawer-body {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
}
/* Buttons — solid blue stays for primary CTAs */
.send-btn, .btn-new-project, .gf-upload-doc-btn, .pf-add-btn,
.modal-btn.confirm {
background: var(--gf-blue) !important;
border: 1px solid rgba(255,255,255,0.35) !important;
color: #fff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 8px 22px rgba(91,127,255,0.45),
inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
.modal-btn.cancel {
background: rgba(255,255,255,0.14) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.28) !important;
backdrop-filter: blur(12px) !important;
}
/* Mode toggle */
.mode-toggle {
background: rgba(255,255,255,0.55) !important;
border: 1px solid rgba(255,255,255,0.5) !important;
backdrop-filter: blur(24px) saturate(160%) !important;
-webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}
.mode-btn { color: #4B5063 !important; }
.mode-btn.active-consultant, .mode-btn.active-reviewer {
background: var(--gf-blue) !important;
color: #fff !important;
box-shadow: 0 6px 16px rgba(91,127,255,0.4) !important;
}
/* Avatar / logo mark / upload-rect-icon — keep their gradients, just stronger glow */
.gf-avatar, .gf-logo-mark, .gf-upload-rect-icon {
box-shadow: 0 6px 20px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
/* Badges — neutral fill, neon border (dark theme) */
.gf-badge-resi, .gf-badge-comm {
background: transparent !important;
color: rgba(230, 230, 230, 0.8) !important;
}
.gf-badge-resi {
border: 1px solid rgba(80, 255, 170, 0.6) !important;
box-shadow: 0 0 5px rgba(80, 255, 170, 0.35), inset 0 0 3px rgba(80, 255, 170, 0.1) !important;
}
.gf-badge-comm {
border: 1px solid rgba(255, 150, 70, 0.6) !important;
box-shadow: 0 0 5px rgba(255, 150, 70, 0.35), inset 0 0 3px rgba(255, 150, 70, 0.1) !important;
}
/* Modal backdrop */
.modal-backdrop { background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(8px) !important; }
/* Toast */
.toast { color: #fff !important; }
/* Tagline */
.gf-tagline { color: #4B5063 !important; border-left-color: rgba(0,0,0,0.15) !important; }
.gf-logo-paren { color: #4B5063 !important; }
.gf-logo-ai { color: var(--gf-blue) !important; text-shadow: none; }
/* Suggestions text */
.suggestion { color: #1A1D29 !important; }
.suggestion-arrow { color: var(--gf-blue) !important; }
/* Plan form tabs active state */
.pf-tab { color: #4B5063 !important; }
.pf-tab:hover { background: rgba(255,255,255,0.4) !important; color: #1A1D29 !important; }
.pf-tab.active {
background: rgba(255,255,255,0.7) !important;
color: #1A1D29 !important;
border-left-color: var(--gf-blue) !important;
}
.pf-tab.active .pf-tab-label { color: #1A1D29 !important; }
.pf-tab-count { background: rgba(91,127,255,0.18) !important; color: var(--gf-blue-2) !important; }
/* Project panel rows */
.proj-item { color: #1A1D29 !important; border-color: rgba(0,0,0,0.08) !important; }
.proj-item:hover { background: rgba(91,127,255,0.12) !important; }
/* Scrollbars (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
/* ════════════════════════════════════════════════════
ElevenLabs-style monochrome theme — final layer
Pure white surfaces, hairline borders, line icons,
solid black CTAs. Wins over chroma + glass.
════════════════════════════════════════════════════ */
:root {
/* ElevenLabs two-tone palette
- bg : parchment main canvas
- bg-2 : slightly darker parchment (sidebar, modals) */
--el-bg: #FFFFF8;
--el-bg-2: #FCFCF5;
--el-surface: #FFFFF8;
--el-border: rgba(40, 35, 25, 0.07);
--el-border-2: rgba(40, 35, 25, 0.04);
--el-text: #0A0A0A;
--el-text-2: #6B6B6B;
--el-text-3: #A1A1A1;
--el-accent: #0A0A0A;
--el-hover: #E8E5DD;
--el-radius: 10px;
--el-radius-sm: 8px;
}
/* Background — pure white, kill chroma + glass */
body, body::before, body::after {
background: var(--el-bg) !important;
content: none !important;
}
body {
content: normal !important;
color: var(--el-text) !important;
}
body::before { content: '' !important; display: none !important; }
body::after { content: '' !important; display: none !important; }
/* Strip every glass effect everywhere */
.topbar, .sidebar, .mode-banner, .chat-input-area, .status-bar,
.project-panel, .modal-box, .plan-form-box, .pf-rag-drawer,
.gf-sidebar-toggle, .project-selector, .source-item, .doc-item,
.suggestion, .message, .chat-input, .pf-card, .pf-quick-add,
.pf-canvas-tool-btn, .pf-view-toggle, .pf-canvas-page-btn,
.pf-canvas-dropzone, .pf-tabs, .pf-header, .pf-footer,
.gf-upload-rect, .toast, .pf-content,
.pf-card.expanded, .pf-card.expanded .pf-card-head,
.pf-canvas-toolbar, .pf-preview, .pf-preview-head, .pf-rag-drawer-head,
.modal-input, .pf-meta-field input, .pf-header input,
.pf-quick-add input, .pf-notes-details textarea {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--el-surface) !important;
box-shadow: none !important;
}
/* Topbar */
.topbar {
background: var(--el-bg) !important;
border-bottom: 1px solid var(--el-border) !important;
height: 56px !important;
padding: 0 20px !important;
}
/* Logo */
.gf-logo { gap: 10px !important; }
.gf-logo-mark {
width: 28px !important; height: 28px !important;
border-radius: 7px !important;
background: var(--el-text) !important;
color: #fff !important;
box-shadow: none !important;
}
.gf-logo-mark i { width: 16px; height: 16px; stroke-width: 2; }
.gf-logo-text {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--el-text) !important;
letter-spacing: -0.02em !important;
text-shadow: none !important;
}
.gf-logo-paren { color: var(--el-text-2) !important; font-weight: 600 !important; }
.gf-logo-ai { color: var(--el-text) !important; font-weight: 800 !important; }
.gf-tagline {
margin-left: 12px !important;
padding-left: 12px !important;
border-left: 1px solid var(--el-border) !important;
font-size: 10px !important;
font-weight: 600 !important;
color: var(--el-text-3) !important;
letter-spacing: 0.5px !important;
}
/* Sidebar — warm cream-gray panel (ElevenLabs side rail) */
.sidebar {
background: var(--el-bg-2) !important;
border-right: 1px solid var(--el-border) !important;
}
/* Sidebar toggle button */
.gf-sidebar-toggle {
width: 32px !important; height: 32px !important;
border-radius: 7px !important;
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
box-shadow: none !important;
}
.gf-sidebar-toggle:hover {
background: var(--el-hover) !important;
border-color: var(--el-border) !important;
transform: none !important;
}
.gf-toggle-bar { background: var(--el-text) !important; width: 14px !important; }
/* Mode toggle */
.mode-toggle {
background: var(--el-bg-2) !important;
border: 1px solid var(--el-border) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
padding: 3px !important;
border-radius: 999px !important;
}
.mode-btn {
color: var(--el-text-2) !important;
font-weight: 600 !important;
font-size: 11px !important;
padding: 6px 16px !important;
}
.mode-btn.active-consultant, .mode-btn.active-reviewer {
background: var(--el-text) !important;
color: #fff !important;
box-shadow: none !important;
}
.mode-btn.inactive { background: transparent !important; color: var(--el-text-3) !important; }
/* Project selector + new project */
.project-selector {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
border-radius: var(--el-radius-sm) !important;
color: var(--el-text) !important;
padding: 7px 12px !important;
font-size: 12px !important;
font-weight: 500 !important;
}
.project-selector:hover { background: var(--el-hover) !important; border-color: var(--el-border) !important; }
.project-dot { background: var(--el-text) !important; }
.btn-new-project {
background: var(--el-text) !important;
border: 1px solid var(--el-text) !important;
color: #fff !important;
border-radius: var(--el-radius-sm) !important;
padding: 7px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
box-shadow: none !important;
}
.btn-new-project i { width: 14px; height: 14px; stroke-width: 2.2; }
.btn-new-project:hover { background: #222 !important; transform: none !important; }
/* User profile — compact pill with avatar + name + chevron */
.gf-user {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: calc(100% - 20px) !important;
margin: 14px 10px 6px !important;
padding: 5px 10px 5px 5px !important;
background: var(--el-bg) !important;
border: 1px solid rgba(40, 35, 25, 0.09) !important;
border-radius: 12px !important;
cursor: pointer !important;
font-family: inherit !important;
text-align: left !important;
transition: background 0.15s ease, border-color 0.15s ease !important;
box-shadow: 0 1px 2px rgba(40, 35, 25, 0.04) !important;
}
.gf-user:hover {
background: var(--el-hover) !important;
border-color: rgba(40, 35, 25, 0.16) !important;
}
.gf-avatar {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #C9B99B 0%, #8A7358 100%) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
flex-shrink: 0 !important;
}
.gf-user-info {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.gf-user-name {
color: var(--el-text) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-shadow: none !important;
line-height: 1.2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.gf-user-role { display: none !important; }
.gf-user-caret {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--el-text-3) !important;
flex-shrink: 0 !important;
padding: 2px !important;
}
.gf-user-caret i { width: 14px !important; height: 14px !important; stroke-width: 2 !important; }
/* Sidebar labels */
.sidebar-label, .panel-title {
color: var(--el-text-3) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: -0.005em !important;
margin-bottom: 8px !important;
padding: 0 14px !important;
}
.sidebar-section { padding: 14px 0 6px !important; }
.sidebar-divider { background: var(--el-border) !important; border: none !important; margin: 4px 0 !important; }
/* Source / doc items */
.source-item, .doc-item {
background: var(--el-bg) !important;
border: 1px solid transparent !important;
border-radius: var(--el-radius-sm) !important;
margin: 0 10px 2px !important;
padding: 9px 10px !important;
box-shadow: none !important;
transition: background 0.12s !important;
}
.source-item:hover, .doc-item:hover {
background: var(--el-hover) !important;
border-color: transparent !important;
transform: none !important;
animation: none !important;
}
.gf-breathe:hover { animation: none !important; }
.source-name, .doc-name {
color: var(--el-text) !important;
font-size: 12px !important;
font-weight: 500 !important;
text-shadow: none !important;
}
.source-checkbox {
border-color: var(--el-border) !important;
border-radius: 4px !important;
}
.source-item.active .source-checkbox { background: var(--el-text) !important; border-color: var(--el-text) !important; }
/* Badges — neutral fill with thin neon outline */
.gf-badge-resi, .gf-badge-comm {
background: transparent !important;
color: var(--el-text-2, #666) !important;
font-size: 9px !important;
padding: 2px 7px !important;
font-weight: 600 !important;
}
.gf-badge-resi {
border: 1px solid rgba(40, 210, 130, 0.55) !important;
box-shadow: 0 0 4px rgba(40, 210, 130, 0.22) !important;
}
.gf-badge-comm {
border: 1px solid rgba(255, 140, 60, 0.55) !important;
box-shadow: 0 0 4px rgba(255, 140, 60, 0.22) !important;
}
/* Upload 2D Layout button */
.gf-upload-rect {
background: var(--el-bg-2) !important;
border: 1px solid var(--el-border) !important;
border-radius: var(--el-radius) !important;
margin: 4px 14px 10px !important;
padding: 14px !important;
box-shadow: none !important;
}
.gf-upload-rect:hover {
background: var(--el-hover) !important;
border-color: #D8D8D8 !important;
transform: none !important;
}
.gf-upload-rect-icon {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
width: 34px !important; height: 34px !important;
border-radius: 8px !important;
}
.gf-upload-rect-icon i { width: 16px; height: 16px; stroke-width: 1.8; }
.gf-upload-rect-text strong { color: var(--el-text) !important; font-size: 12px !important; font-weight: 600 !important; text-shadow: none !important; }
.gf-upload-rect-text small { color: var(--el-text-2) !important; font-size: 10.5px !important; }
/* Upload Document button */
.gf-upload-doc-btn {
background: var(--el-text) !important;
color: #fff !important;
border: 1px solid var(--el-text) !important;
border-radius: var(--el-radius-sm) !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 10px !important;
margin: 8px 14px 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
box-shadow: none !important;
}
.gf-upload-doc-btn i { width: 14px; height: 14px; stroke-width: 2; }
.gf-upload-doc-btn:hover { background: #222 !important; transform: none !important; box-shadow: none !important; }
/* Chat area main container — light ElevenLabs look */
.main, .chat-area { background: var(--el-bg) !important; }
.chat-messages { background: transparent !important; }
.mode-banner {
background: var(--el-bg) !important;
border-bottom: 1px solid var(--el-border) !important;
color: var(--el-text-2) !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 10px 20px !important;
}
.banner-dot { background: var(--el-text) !important; }
/* Welcome */
.welcome-flame { display: none !important; }
.welcome-title {
color: var(--el-text) !important;
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
text-shadow: none !important;
}
.welcome-title .fire, .welcome-title .fly { color: var(--el-text) !important; }
.welcome-subtitle { color: var(--el-text-2) !important; font-size: 13px !important; }
.suggestion {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: var(--el-radius) !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 12px 14px !important;
box-shadow: none !important;
}
.suggestion:hover { background: var(--el-hover) !important; border-color: var(--el-border) !important; transform: none !important; }
.suggestion-arrow { color: var(--el-text-2) !important; }
/* Messages — plain light ElevenLabs style */
.message {
background: var(--el-bg-2) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: var(--el-radius) !important;
box-shadow: none !important;
font-size: 13px !important;
}
/* User messages — dark, right-aligned */
.message.user {
background: var(--el-text) !important;
color: #FFFFF8 !important;
border: 1px solid var(--el-text) !important;
margin-left: auto !important;
max-width: 78% !important;
width: fit-content !important;
border-radius: 14px 14px 4px 14px !important;
}
.message.user a { color: #B8C7FF !important; }
/* Assistant messages — left-aligned */
.message.assistant {
margin-right: auto !important;
max-width: 92% !important;
border-radius: 14px 14px 14px 4px !important;
}
/* Chat input */
/* Chat area — plain light background */
.chat-area { background: var(--el-bg) !important; }
.chat-area::before, .chat-area::after { content: none !important; }
/* ─────────────────────────────────────────────────────
Grok-style chat input — centered wide pill with brand
above (welcome state) → compact docked pill (chat state)
───────────────────────────────────────────────────── */
.chat-input-area {
background: transparent !important;
border-top: none !important;
padding: 0 40px 30px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 18px !important;
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Brand stays centered even though the pill is full-width */
.gf-chat-brand {
align-self: center;
}
/* Chat state (after first message): hide the brand lockup */
body.gf-chat-started .gf-chat-brand {
display: none !important;
}
/* Chat state: tighter padding around the docked pill */
body.gf-chat-started .chat-input-area {
padding: 12px 24px 22px !important;
gap: 0 !important;
}
/* Chat state: pill fills full width with slightly lighter shadow */
body.gf-chat-started .gf-chat-pill {
padding: 8px 10px 8px 18px;
box-shadow: 0 8px 24px rgba(20, 30, 70, 0.06),
0 2px 6px rgba(20, 30, 70, 0.04);
}
body.gf-chat-started .gf-chat-pill .chat-input {
font-size: 13px !important;
padding: 12px 4px !important;
}
body.gf-chat-started .gf-chat-pill .send-btn,
body.gf-chat-started .gf-chat-attach {
width: 36px !important;
height: 36px !important;
}
body.gf-chat-started .gf-chat-mode {
padding: 6px 10px !important;
font-size: 11px !important;
}
/* Brand lockup above the pill */
.gf-chat-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Geist', sans-serif;
font-weight: 800;
font-size: 26px;
letter-spacing: -0.025em;
color: var(--el-text);
user-select: none;
}
.gf-chat-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 10px;
background: var(--el-text);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
flex-shrink: 0;
}
.gf-chat-brand-mark i { width: 20px; height: 20px; stroke-width: 2; }
.gf-chat-brand-paren { color: var(--el-text-2); font-weight: 700; }
.gf-chat-brand-ai { color: var(--el-text); font-weight: 900; }
/* The pill — default (welcome state): compact + centered */
.gf-chat-pill {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
max-width: 720px;
margin: 0 auto;
background: var(--el-bg-2);
border: 1px solid rgba(90, 70, 30, 0.14);
border-radius: 28px;
padding: 10px 12px 10px 18px;
box-shadow: 0 8px 24px rgba(90, 70, 30, 0.06),
0 2px 6px rgba(90, 70, 30, 0.04);
backdrop-filter: none;
-webkit-backdrop-filter: blur(20px) saturate(160%);
transition: box-shadow 0.18s ease, border-color 0.18s ease, max-width 0.25s ease;
}
/* Chat state — pill fills the full chat area width */
body.gf-chat-started .gf-chat-pill {
max-width: none !important;
margin: 0 !important;
}
.gf-chat-pill:focus-within {
border-color: rgba(0, 0, 0, 0.14);
box-shadow: 0 16px 44px rgba(20, 30, 70, 0.12),
0 3px 10px rgba(20, 30, 70, 0.06);
}
/* Attach button (paperclip) on the left */
.gf-chat-attach {
width: 38px; height: 38px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--el-text-2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, color 0.15s ease;
}
.gf-chat-attach i { width: 18px; height: 18px; stroke-width: 2; }
.gf-chat-attach:hover { background: rgba(0,0,0,0.05); color: var(--el-text); }
/* Textarea inside the pill — auto-grows up to max-height then scrolls */
.gf-chat-pill .chat-input {
flex: 1 1 0% !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
min-height: 24px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--el-text) !important;
font-size: 14px !important;
padding: 10px 12px !important;
margin: 0 !important;
border-radius: 0 !important;
resize: none !important;
outline: none !important;
font-family: 'Inter', -apple-system, sans-serif !important;
line-height: 1.5 !important;
max-height: 320px !important;
overflow-y: auto !important;
text-align: left !important;
direction: ltr !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
scrollbar-width: thin;
box-sizing: border-box !important;
}
.gf-chat-pill .chat-input::-webkit-scrollbar { width: 6px; }
.gf-chat-pill .chat-input::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
/* Push the mode wrapper (and everything after it) to the far right */
.gf-chat-pill .gf-chat-mode-wrap { margin-left: auto !important; }
.gf-chat-pill .gf-chat-mode { margin-left: 0 !important; }
/* Chat-mode wrapper holds the button and its popup menu */
.gf-chat-mode-wrap {
position: relative;
flex-shrink: 0;
}
/* Popup menu — JS moves it to document.body with position: fixed
so it escapes any clipping container. Hidden by default. */
.gf-chat-mode-menu {
display: none;
min-width: 240px;
background: var(--el-bg);
border: 1px solid rgba(40, 35, 25, 0.14);
border-radius: 12px;
padding: 6px;
box-shadow: 0 20px 56px rgba(20, 30, 70, 0.18),
0 6px 18px rgba(20, 30, 70, 0.08);
opacity: 0;
transform: translateY(6px) scale(0.98);
transform-origin: bottom right;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 99999;
pointer-events: none;
font-family: 'Geist', sans-serif;
}
.gf-chat-mode-menu.open {
display: block;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.gf-chat-mode-menu.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.gf-chat-mode-group {
padding: 8px 10px 4px;
font-size: 10px;
font-weight: 700;
color: var(--el-text-3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gf-chat-mode-sep {
height: 1px;
background: rgba(40, 35, 25, 0.08);
margin: 6px 4px;
}
.gf-chat-mode-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px;
width: 100%;
padding: 9px 10px !important;
background: transparent !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background 0.12s ease;
}
.gf-chat-mode-item:hover { background: var(--el-hover) !important; }
.gf-chat-mode-item-label {
font-size: 13px;
font-weight: 600;
color: var(--el-text);
}
.gf-chat-mode-item-hint {
font-size: 11px;
color: var(--el-text-2);
font-weight: 500;
}
.gf-chat-pill .chat-input:focus {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.gf-chat-pill .chat-input::placeholder { color: var(--el-text-3) !important; }
/* Once the chat has real messages, keep a single-row min height but
allow the textarea to grow with content up to the shared cap. JS
(gfAutoResizeChatInput) sets the exact height via inline style. */
body.gf-has-messages .gf-chat-pill .chat-input {
min-height: 44px !important;
max-height: 320px !important;
overflow-y: auto !important;
}
/* Mode selector — "Consultant ▾" */
.gf-chat-mode {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: transparent;
border: none;
color: var(--el-text);
font-family: 'Geist', sans-serif;
font-weight: 600;
font-size: 12px;
cursor: pointer;
border-radius: 999px;
flex-shrink: 0;
transition: background 0.15s ease;
}
.gf-chat-mode:hover { background: rgba(0,0,0,0.05); }
.gf-chat-mode i,
.gf-chat-mode svg.lucide {
width: 14px; height: 14px;
stroke-width: 2.2;
color: var(--el-text-2);
transition: transform 0.18s ease;
pointer-events: none !important;
}
.gf-chat-mode i *,
.gf-chat-mode svg.lucide * {
pointer-events: none !important;
}
.gf-chat-mode > * {
pointer-events: none !important;
}
.gf-chat-mode {
pointer-events: auto !important;
}
/* When the menu is open (menu appears above the button), flip the
chevron to point up so the arrow indicates the popup's direction. */
.gf-chat-mode.open i,
.gf-chat-mode.open svg.lucide {
transform: rotate(180deg);
}
/* Send button — dark circle on the far right, inside the pill */
.gf-chat-pill .send-btn {
position: relative !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
transform: none !important;
width: 40px !important;
height: 40px !important;
background: var(--el-text) !important;
color: #fff !important;
border: none !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
transition: transform 0.15s ease, background 0.15s ease !important;
overflow: hidden !important;
}
.gf-chat-pill .send-btn::before {
content: none !important;
}
.gf-chat-pill .send-btn i {
width: 16px !important;
height: 16px !important;
stroke-width: 2.6 !important;
position: relative !important;
z-index: 1 !important;
}
.gf-chat-pill .send-btn:hover {
background: #222 !important;
transform: scale(1.06) !important;
}
/* Status bar */
.status-bar {
background: var(--el-bg) !important;
border-top: 1px solid var(--el-border) !important;
color: var(--el-text-2) !important;
font-size: 10px !important;
}
.status-text { color: var(--el-text-2) !important; }
.badge {
background: var(--el-bg-2) !important;
color: var(--el-text) !important;
border: 1px solid var(--el-border) !important;
font-size: 9px !important;
font-weight: 600 !important;
}
/* Modals */
.modal-backdrop { background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; }
.modal-box, .plan-form-box {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
border-radius: 14px !important;
box-shadow: 0 24px 80px rgba(0,0,0,0.18) !important;
color: var(--el-text) !important;
}
.modal-title { color: var(--el-text) !important; font-weight: 700 !important; text-shadow: none !important; }
.modal-input, .pf-meta-field input, .pf-quick-add input,
.pf-header input, .pf-notes-details textarea {
background: var(--el-bg-2) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: var(--el-radius-sm) !important;
box-shadow: none !important;
}
.modal-input:focus, .pf-meta-field input:focus, .pf-quick-add input:focus,
.chat-input:focus, .pf-notes-details textarea:focus {
background: var(--el-bg) !important;
border-color: var(--el-text) !important;
box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}
.modal-input::placeholder, .pf-meta-field input::placeholder,
.pf-quick-add input::placeholder, .pf-notes-details textarea::placeholder {
color: var(--el-text-3) !important;
}
.modal-btn {
border-radius: var(--el-radius-sm) !important;
font-weight: 600 !important;
font-size: 12px !important;
padding: 9px 16px !important;
box-shadow: none !important;
}
.modal-btn.cancel {
background: var(--el-bg) !important;
color: var(--el-text) !important;
border: 1px solid var(--el-border) !important;
}
.modal-btn.cancel:hover { background: var(--el-hover) !important; }
.modal-btn.confirm {
background: var(--el-text) !important;
color: #fff !important;
border: 1px solid var(--el-text) !important;
}
.modal-btn.confirm:hover { background: #222 !important; }
/* Plan form */
.pf-header {
background: var(--el-bg-2) !important;
border-bottom: 1px solid var(--el-border) !important;
}
.pf-tabs {
background: var(--el-bg-2) !important;
border-right: 1px solid var(--el-border) !important;
}
.pf-tab { color: var(--el-text-2) !important; }
.pf-tab:hover { background: var(--el-hover) !important; color: var(--el-text) !important; }
.pf-tab.active {
background: var(--el-bg) !important;
border-left-color: var(--el-text) !important;
color: var(--el-text) !important;
}
.pf-tab.active .pf-tab-label { color: var(--el-text) !important; }
.pf-tab-count {
background: var(--el-bg-2) !important;
color: var(--el-text-2) !important;
border: 1px solid var(--el-border) !important;
}
.pf-content { background: var(--el-bg) !important; }
.pf-section-title { color: var(--el-text) !important; font-weight: 700 !important; text-shadow: none !important; }
.pf-section-hint { color: var(--el-text-2) !important; }
.pf-add-btn {
background: var(--el-text) !important;
color: #fff !important;
border: 1px solid var(--el-text) !important;
border-radius: var(--el-radius-sm) !important;
box-shadow: none !important;
}
.pf-add-btn:hover { background: #222 !important; }
.pf-card, .pf-quick-add {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
border-radius: var(--el-radius) !important;
box-shadow: none !important;
}
.pf-card:hover { border-color: #D8D8D8 !important; }
.pf-card.expanded { border-color: var(--el-text) !important; }
.pf-card.expanded .pf-card-head { background: var(--el-bg-2) !important; }
.pf-canvas-toolbar { background: var(--el-bg-2) !important; border-bottom: 1px solid var(--el-border) !important; }
.pf-canvas-tool-btn {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: var(--el-radius-sm) !important;
}
.pf-canvas-tool-btn:hover { background: var(--el-hover) !important; }
.pf-canvas-tool-btn.active { background: var(--el-text) !important; color: #fff !important; border-color: var(--el-text) !important; }
.pf-canvas-dropzone {
background: var(--el-bg-2) !important;
border: 1.5px dashed var(--el-border) !important;
border-radius: var(--el-radius) !important;
color: var(--el-text-2) !important;
}
.pf-canvas-dropzone:hover { border-color: var(--el-text) !important; background: var(--el-hover) !important; }
.pf-canvas-dropzone-icon {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
}
.pf-rag-drawer, .pf-preview {
background: var(--el-bg-2) !important;
border-left: 1px solid var(--el-border) !important;
}
.pf-rag-drawer-head, .pf-preview-head {
background: var(--el-bg) !important;
border-bottom: 1px solid var(--el-border) !important;
}
.pf-prev-header { color: var(--el-text) !important; font-weight: 700 !important; }
.pf-footer {
background: var(--el-bg-2) !important;
border-top: 1px solid var(--el-border) !important;
}
.pf-kbd-hints, .pf-kbd-hints kbd {
color: var(--el-text-2) !important;
}
.pf-kbd-hints kbd {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: 5px !important;
}
.pf-canvas-wrap { background: var(--el-bg-2) !important; }
/* Project panel */
.project-panel {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
border-radius: 12px !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
}
.proj-item {
color: var(--el-text) !important;
border-color: transparent !important;
}
.proj-item:hover { background: var(--el-hover) !important; }
.proj-dot { background: var(--el-text) !important; }
/* Toast */
.toast {
background: var(--el-text) !important;
color: #fff !important;
border: none !important;
border-radius: var(--el-radius-sm) !important;
font-size: 12px !important;
font-weight: 500 !important;
}
/* Lucide icons base */
.lucide, [data-lucide] {
display: inline-block;
vertical-align: middle;
}
i[data-lucide] svg {
stroke: currentColor;
}
/* ── Animated thinking indicator ── */
.gf-thinking {
display: flex;
align-items: center;
justify-content: flex-start;
align-self: flex-start;
gap: 12px;
padding: 10px 0;
margin: 10px 0;
margin-right: auto;
color: var(--el-text-2);
font-size: 12px;
font-weight: 500;
animation: gf-thinking-fade 0.3s ease;
}
@keyframes gf-thinking-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Row of orbs — slightly overlapping like stacked avatars */
.gf-thinking-orbs {
display: inline-flex;
align-items: center;
}
.gf-thinking-orb {
width: 20px; height: 20px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
box-sizing: border-box;
}
.gf-thinking-orb + .gf-thinking-orb { margin-left: -9px; }
.gf-thinking-orb::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--el-bg);
}
/* z-stacking so each orb sits above the next, leftmost on top */
.gf-orb-1 { z-index: 4; }
.gf-orb-2 { z-index: 3; }
.gf-orb-3 { z-index: 2; }
.gf-orb-4 { z-index: 1; }
/* Orb 1 — chromatic spinning ring (the original) */
.gf-orb-1 {
background: conic-gradient(from 0deg,
#FF6B6B 0%, #FFB36B 16%, #FFD93D 32%,
#6BCB77 48%, #4D96FF 64%, #B66BFF 80%, #FF6BD6 96%, #FF6B6B 100%);
animation: gf-orb-spin 2.6s linear infinite,
gf-orb-pulse 1.8s ease-in-out infinite;
box-shadow: 0 0 14px rgba(255,107,182,0.35);
}
/* Orb 2 — counter-spinning blue/purple */
.gf-orb-2 {
background: conic-gradient(from 90deg,
#4D96FF 0%, #6BCBFF 25%, #B66BFF 50%, #FF6BD6 75%, #4D96FF 100%);
animation: gf-orb-spin-rev 2.2s linear infinite,
gf-orb-pulse-blue 1.8s ease-in-out 0.2s infinite;
box-shadow: 0 0 12px rgba(77,150,255,0.35);
}
/* Orb 3 — warm with a bob */
.gf-orb-3 {
background: conic-gradient(from 180deg,
#FFD93D 0%, #FFB36B 33%, #FF6B6B 66%, #FFD93D 100%);
animation: gf-orb-spin 3.4s linear infinite,
gf-orb-pulse-warm 1.8s ease-in-out 0.4s infinite,
gf-orb-bob 1.8s ease-in-out 0.4s infinite;
box-shadow: 0 0 12px rgba(255,179,107,0.35);
}
/* Orb 4 — green/teal slow with scale */
.gf-orb-4 {
background: conic-gradient(from 270deg,
#6BCB77 0%, #19B7C7 33%, #4D96FF 66%, #6BCB77 100%);
animation: gf-orb-spin-rev 3.8s linear infinite,
gf-orb-pulse-green 1.8s ease-in-out 0.6s infinite,
gf-orb-scale 1.8s ease-in-out 0.6s infinite;
box-shadow: 0 0 12px rgba(107,203,119,0.32);
}
@keyframes gf-orb-spin { to { transform: rotate(360deg); } }
@keyframes gf-orb-spin-rev { to { transform: rotate(-360deg); } }
@keyframes gf-orb-pulse {
0%, 100% { box-shadow: 0 0 10px rgba(255,107,182,0.25); }
50% { box-shadow: 0 0 20px rgba(255,107,182,0.55); }
}
@keyframes gf-orb-pulse-blue {
0%, 100% { box-shadow: 0 0 10px rgba(77,150,255,0.25); }
50% { box-shadow: 0 0 20px rgba(77,150,255,0.55); }
}
@keyframes gf-orb-pulse-warm {
0%, 100% { box-shadow: 0 0 10px rgba(255,179,107,0.25); }
50% { box-shadow: 0 0 20px rgba(255,179,107,0.55); }
}
@keyframes gf-orb-pulse-green {
0%, 100% { box-shadow: 0 0 10px rgba(107,203,119,0.25); }
50% { box-shadow: 0 0 20px rgba(107,203,119,0.55); }
}
@keyframes gf-orb-bob {
0%, 100% { transform: rotate(0deg) translateY(0); }
50% { transform: rotate(180deg) translateY(-2px); }
}
@keyframes gf-orb-scale {
0%, 100% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.12); }
}
.gf-thinking-body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 280px;
max-width: 460px;
}
.gf-thinking-row {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--el-text);
font-size: 12px;
font-weight: 500;
}
.gf-thinking-label {
color: var(--el-text);
transition: opacity 0.18s ease;
}
.gf-thinking-sep { color: var(--el-text-3); }
.gf-thinking-time {
color: var(--el-text-3);
font-variant-numeric: tabular-nums;
font-size: 11px;
}
/* Asymptotic progress bar */
.gf-thinking-bar {
width: 100%;
height: 3px;
background: var(--el-border);
border-radius: 2px;
overflow: hidden;
}
.gf-thinking-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #FF6B6B, #FFB36B, #FFD93D, #6BCB77, #4D96FF, #B66BFF);
background-size: 200% 100%;
animation: gf-bar-shimmer 2.4s linear infinite;
border-radius: 2px;
transition: width 0.18s ease-out;
}
@keyframes gf-bar-shimmer {
from { background-position: 0% 0; }
to { background-position: 200% 0; }
}
/* Completed-phase trail */
.gf-thinking-trail {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 2px;
}
.gf-trail-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--el-text-2);
opacity: 0;
transform: translateY(-2px);
animation: gf-trail-in 0.22s ease forwards;
}
@keyframes gf-trail-in {
to { opacity: 1; transform: translateY(0); }
}
.gf-trail-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px; height: 12px;
border-radius: 50%;
background: #E8F4EC;
color: #2F6E44;
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
}
/* Optimistic finish */
.gf-thinking-done {
transition: opacity 0.2s ease;
opacity: 0;
}
/* ════════════════════════════════════════════════════
Project Brief Modal
════════════════════════════════════════════════════ */
.gf-brief-box {
width: min(720px, 92vw) !important;
max-height: 88vh !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
overflow: hidden !important;
}
.gf-brief-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 22px 24px 16px;
border-bottom: 1px solid var(--el-border);
gap: 16px;
}
.gf-brief-title {
font-size: 17px;
font-weight: 700;
color: var(--el-text);
letter-spacing: -0.02em;
}
.gf-brief-sub {
font-size: 12px;
color: var(--el-text-2);
margin-top: 4px;
line-height: 1.4;
}
.gf-brief-close {
width: 30px; height: 30px;
border-radius: 7px;
background: var(--el-bg);
border: 1px solid var(--el-border);
color: var(--el-text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gf-brief-close:hover { background: var(--el-hover); }
.gf-brief-close i { width: 14px; height: 14px; stroke-width: 2; }
.gf-brief-body {
padding: 22px 24px;
overflow-y: auto;
flex: 1;
min-height: 0;
}
/* Step 1 — pick type */
.gf-brief-types {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.gf-brief-type {
background: var(--el-bg);
border: 1px solid var(--el-border);
border-radius: 12px;
padding: 22px 18px;
cursor: pointer;
font-family: inherit;
text-align: left;
display: flex;
flex-direction: column;
gap: 6px;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.gf-brief-type:hover {
background: var(--el-bg);
border-color: var(--el-text);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0,0,0,0.08);
}
/* Icon — outline & muted by default, transitions to filled solid on hover */
.gf-brief-type-icon {
width: 42px; height: 42px;
border-radius: 11px;
background: var(--el-bg-2);
color: var(--el-text-3);
border: 1px solid var(--el-border);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
transition: background 0.4s cubic-bezier(.4,0,.2,1),
color 0.4s cubic-bezier(.4,0,.2,1),
border-color 0.4s ease,
transform 0.45s cubic-bezier(.34,1.56,.64,1),
box-shadow 0.4s ease;
}
.gf-brief-type-icon svg {
width: 20px;
height: 20px;
stroke-width: 1.6;
fill: none;
transition: fill 0.45s cubic-bezier(.4,0,.2,1),
stroke 0.35s ease,
stroke-width 0.35s ease,
transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.gf-brief-type:hover .gf-brief-type-icon {
background: var(--el-text);
color: #fff;
border-color: var(--el-text);
transform: scale(1.08) rotate(-4deg);
box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
.gf-brief-type:hover .gf-brief-type-icon svg {
fill: currentColor;
stroke-width: 1.2;
transform: scale(1.05);
}
.gf-brief-type strong {
transition: color 0.3s ease;
}
.gf-brief-type:hover strong {
color: var(--el-text);
}
.gf-brief-type strong {
font-size: 14px;
font-weight: 700;
color: var(--el-text);
}
.gf-brief-type small {
font-size: 11px;
color: var(--el-text-2);
font-weight: 500;
line-height: 1.4;
}
/* Step 2 — questions */
.gf-brief-questions {
display: flex;
flex-direction: column;
gap: 18px;
}
.gf-brief-q {
display: flex;
flex-direction: column;
gap: 8px;
}
.gf-brief-q-head {
display: flex;
align-items: center;
gap: 8px;
}
.gf-brief-q-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 5px;
background: var(--el-text);
color: #fff;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.gf-brief-q-title {
font-size: 13px;
font-weight: 600;
color: var(--el-text);
flex: 1;
line-height: 1.35;
}
/* Superscript info marker — like a footnote next to the question */
.gf-brief-q-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 13px; height: 13px;
border-radius: 50%;
background: var(--el-text-3);
color: #fff;
font-size: 8.5px;
font-weight: 700;
font-style: normal;
font-family: 'Geist', sans-serif;
line-height: 1;
margin-left: 4px;
vertical-align: super;
cursor: help;
transition: background 0.2s ease, transform 0.2s ease;
position: relative;
top: -1px;
user-select: none;
}
.gf-brief-q-info:hover {
background: var(--el-text);
transform: scale(1.15);
}
/* Global portal tooltip — lives on document.body, never clipped */
.gf-global-tip {
position: fixed;
background: var(--el-text);
color: #fff;
font-size: 11px;
font-weight: 500;
line-height: 1.45;
padding: 9px 12px;
border-radius: 8px;
max-width: 320px;
box-shadow: 0 14px 36px rgba(0,0,0,0.28);
pointer-events: none;
opacity: 0;
transition: opacity 0.18s ease;
z-index: 99999;
font-family: 'Geist', sans-serif;
letter-spacing: -0.005em;
}
/* Type chip at the top of step 2 */
.gf-brief-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.gf-brief-type-chip {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.gf-chip-residential {
color: #2F6E44;
border-color: #B8DEC4;
background: #F0F7F2;
}
.gf-chip-commercial {
color: #8A4F1A;
border-color: #F0CFA8;
background: #FAF1E7;
}
.gf-brief-select {
background: var(--el-bg-2);
border: 1px solid var(--el-border);
color: var(--el-text);
border-radius: var(--el-radius-sm);
padding: 10px 12px;
font-size: 12px;
font-weight: 500;
font-family: inherit;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.gf-brief-select:focus {
background-color: #fff;
border-color: var(--el-text);
box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.gf-brief-input {
background: var(--el-bg);
border: 1px solid var(--el-border);
color: var(--el-text);
border-radius: var(--el-radius-sm);
padding: 9px 12px;
font-size: 12px;
font-family: inherit;
outline: none;
}
.gf-brief-input::placeholder { color: var(--el-text-3); }
.gf-brief-input:focus {
border-color: var(--el-text);
box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.gf-brief-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
border-top: 1px solid var(--el-border);
background: var(--el-bg-2);
}
.gf-brief-foot .modal-btn { padding: 9px 14px !important; display: inline-flex; align-items: center; gap: 6px; }
.gf-brief-foot .modal-btn i { width: 14px; height: 14px; stroke-width: 2; }
.gf-brief-foot-spacer { flex: 1; }
/* ════════════════════════════════════════════════════
Smart AI Vision panel — lives in the plan form canvas
════════════════════════════════════════════════════ */
/* Smart AI Vision — stacked BELOW RAG Output Preview in the right column */
.pf-preview {
display: flex !important;
flex-direction: column !important;
}
.pf-preview .pf-preview-body {
max-height: 42vh !important;
overflow-y: auto !important;
}
.gf-vision-panel {
display: flex;
flex-direction: column;
border-top: 1px solid var(--el-border);
background: var(--el-bg);
flex: 1;
min-height: 0;
font-family: 'Geist', sans-serif;
overflow: hidden;
}
.gf-vision-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--el-border);
background: var(--el-bg-2);
}
.gf-vision-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: var(--el-text);
letter-spacing: -0.01em;
}
.gf-vision-title i { width: 14px; height: 14px; stroke-width: 2; color: var(--el-text); }
.gf-vision-refresh {
width: 26px; height: 26px;
border-radius: 7px;
background: var(--el-bg);
border: 1px solid var(--el-border);
color: var(--el-text-2);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gf-vision-refresh:hover { background: var(--el-hover); color: var(--el-text); }
.gf-vision-refresh i { width: 13px; height: 13px; stroke-width: 2.2; }
.gf-vision-body {
flex: 1;
overflow-y: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.gf-vision-empty {
font-size: 12px;
color: var(--el-text-3);
text-align: center;
padding: 28px 14px;
line-height: 1.5;
}
.gf-vision-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 12px;
color: var(--el-text-2);
padding: 28px 14px;
text-align: center;
}
.gf-vision-spinner {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.08);
border-top-color: var(--el-text);
animation: gf-vision-spin 0.9s linear infinite;
flex-shrink: 0;
}
@keyframes gf-vision-spin { to { transform: rotate(360deg); } }
.gf-vision-retry {
margin-left: 6px;
padding: 4px 10px;
border-radius: 6px;
background: var(--el-text);
color: #fff;
border: none;
font-family: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
/* Individual issue cards */
.gf-vision-item {
background: var(--el-bg);
border: 1px solid var(--el-border);
border-radius: 10px;
padding: 10px 12px;
transition: border-color 0.15s ease, opacity 0.18s ease;
position: relative;
}
.gf-vision-item:hover { border-color: var(--el-text-3); }
.gf-vision-item-saving { opacity: 0.5; pointer-events: none; }
.gf-vision-item-head {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 6px;
}
.gf-vision-sev {
display: inline-flex;
align-items: center;
font-size: 9px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.gf-vision-sev.gf-sev-high { background: #FCE4E4; color: #8A2626; }
.gf-vision-sev.gf-sev-medium { background: #FFF1DB; color: #8A5C1A; }
.gf-vision-sev.gf-sev-low { background: #E8F4EC; color: #2F6E44; }
.gf-vision-item-title {
font-size: 12px;
font-weight: 700;
color: var(--el-text);
line-height: 1.3;
flex: 1;
min-width: 0;
}
.gf-vision-item-body {
font-size: 11.5px;
line-height: 1.5;
color: var(--el-text);
}
.gf-vision-item-body p { margin: 0 0 6px; }
.gf-vision-item-body em { color: var(--el-text-2); font-style: italic; font-weight: 500; }
.gf-vision-reason { color: var(--el-text-2) !important; }
.gf-vision-clause {
color: var(--el-text-2) !important;
font-size: 10.5px !important;
font-weight: 600;
padding: 5px 8px;
background: var(--el-hover);
border-radius: 6px;
display: inline-block;
margin-top: 2px !important;
}
/* Actions — hidden by default, appear on hover */
.gf-vision-item-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.18s ease, max-height 0.18s ease, margin-top 0.18s ease;
}
.gf-vision-item:hover .gf-vision-item-actions {
opacity: 1;
max-height: 40px;
}
.gf-vision-accept {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: 7px;
background: var(--el-text);
color: #fff;
border: none;
font-family: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.gf-vision-accept:hover { background: #222; }
.gf-vision-accept i { width: 12px; height: 12px; stroke-width: 2.4; }
.gf-vision-reject {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 7px;
background: transparent;
border: 1px solid var(--el-border);
color: var(--el-text-2);
cursor: pointer;
transition: all 0.15s ease;
}
.gf-vision-reject:hover { background: var(--el-hover); color: var(--el-text); }
.gf-vision-reject i { width: 13px; height: 13px; stroke-width: 2.2; }
/* Vision panel on the left, RAG drawer on the right — no overlap */
/* Streaming bubble + typewriter cursor */
.gf-streaming { white-space: pre-wrap; }
.gf-stream-text { white-space: pre-wrap; }
.gf-stream-cursor {
display: inline-block;
width: 7px;
height: 1em;
margin-left: 2px;
vertical-align: -2px;
background: var(--el-text);
border-radius: 1px;
animation: gf-cursor-blink 1s steps(2, start) infinite;
}
@keyframes gf-cursor-blink {
to { visibility: hidden; }
}
/* Scrollbars — keep subtle */
::-webkit-scrollbar-thumb { background: #E0E0E0 !important; }
::-webkit-scrollbar-thumb:hover { background: #C8C8C8 !important; }
/* Bottom aurora disabled — kept hidden in case the element
is referenced elsewhere by JS. */
#gfBottomAurora {
display: none !important;
}
#gfBottomAurora_disabled {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100vw !important;
height: 55vh !important;
z-index: 9999 !important;
pointer-events: none !important;
background:
/* layer 1 — honeycomb lattice (crisp, tiles) */
url("data:image/svg+xml;utf8,"),
/* layer 2 — warm orange spotlight (cursor-tracked) */
radial-gradient(ellipse 45vw 48vh at
calc(var(--gf-spot-x, 50) * 1%)
calc(var(--gf-spot-y, 105) * 1%),
rgba(255, 140, 55, 0.95) 0%,
rgba(255, 95, 20, 0.55) 22%,
rgba(180, 60, 10, 0.20) 48%,
transparent 68%),
/* layer 3 — dark base, fades up */
linear-gradient(to top,
#070707 0%,
#0a0a0a 35%,
rgba(10,10,10,0.65) 65%,
transparent 100%) !important;
background-size: 60px 52px, auto, auto !important;
background-repeat: repeat, no-repeat, no-repeat !important;
background-blend-mode: multiply, normal, normal !important;
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%);
mask-image: linear-gradient(to top, #000 0%, #000 25%, transparent 100%);
mix-blend-mode: multiply;
opacity: 1;
transform-origin: bottom center;
will-change: transform, opacity, background;
}
body.gf-theme-dark #gfBottomAurora,
html[data-theme="dark"] #gfBottomAurora {
/* On a dark theme the element can be drawn directly
(no multiply trick needed) since the base is already
dark. Screen blend lets the glow lighten naturally. */
mix-blend-mode: screen;
background:
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse 45vw 48vh at
calc(var(--gf-spot-x, 50) * 1%)
calc(var(--gf-spot-y, 105) * 1%),
rgba(255, 140, 55, 0.80) 0%,
rgba(255, 95, 20, 0.40) 22%,
transparent 68%),
transparent !important;
background-size: 60px 52px, auto, auto !important;
background-repeat: repeat, no-repeat, no-repeat !important;
background-blend-mode: normal, normal, normal !important;
}
/* ── Typing state: gentle heartbeat pulse ── */
@keyframes gfChromaPulse {
0%, 100% {
transform: scaleY(1);
filter: blur(35px) saturate(140%) hue-rotate(0deg);
opacity: 0.90;
}
50% {
transform: scaleY(1.06);
filter: blur(46px) saturate(170%) hue-rotate(-10deg);
opacity: 1;
}
}
body.gf-typing #gfBottomAurora {
animation: gfChromaPulse 2.4s ease-in-out infinite;
}
/* ── Waiting state: soundtrack-wave flow ──
A slow, smooth horizontal sway via translateX combined
with a soft vertical swell and a subtle hue drift so the
motion is visible even through heavy blur. */
@keyframes gfChromaWave {
0% {
transform: translate3d(-3%, 0, 0) scaleY(1);
filter: blur(35px) saturate(150%) hue-rotate( 0deg);
opacity: 0.92;
}
25% {
transform: translate3d( 2%, 0, 0) scaleY(1.05);
filter: blur(42px) saturate(170%) hue-rotate(-12deg);
opacity: 1;
}
50% {
transform: translate3d( 3%, 0, 0) scaleY(1.08);
filter: blur(48px) saturate(180%) hue-rotate(-18deg);
opacity: 1;
}
75% {
transform: translate3d(-2%, 0, 0) scaleY(1.04);
filter: blur(42px) saturate(165%) hue-rotate( -8deg);
opacity: 0.96;
}
100% {
transform: translate3d(-3%, 0, 0) scaleY(1);
filter: blur(35px) saturate(150%) hue-rotate( 0deg);
opacity: 0.92;
}
}
body.gf-waiting #gfBottomAurora,
body.gf-waiting.gf-typing #gfBottomAurora {
animation: gfChromaWave 6s ease-in-out infinite;
}
/* ════════════════════════════════════════════════════
Final palette — ElevenLabs two-tone
- Main canvas: cool near-white
- Sidebar/panels: warm cream-gray
════════════════════════════════════════════════════ */
body {
background: #FFFFF8 !important;
position: relative;
}
body::before, body::after {
content: none !important;
display: none !important;
background: none !important;
animation: none !important;
}
.topbar {
background: #FFFFF8 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
outline: none !important;
}
.topbar, .topbar * { box-shadow: none !important; }
.topbar { position: relative !important; }
.topbar::before { content: none !important; display: none !important; }
/* Default (non-welcome) topbar vertical hairline */
.topbar::after {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 248px !important;
width: 1px !important;
background: #EFEFEF !important;
pointer-events: none !important;
}
/* Kill any border or shadow at the top of the sidebar / main column */
.main, .sidebar {
border-top: none !important;
box-shadow: none !important;
}
.sidebar::before, .sidebar::after { content: none !important; display: none !important; }
/* ════════════════════════════════════════════════════
WELCOME STATE ONLY (body.gf-empty-chat) —
changes here must NOT leak into chat-started state.
════════════════════════════════════════════════════ */
/* 1. Horizontal-line killer: the .chat-area::before orange "sunrise"
aurora is 70vh tall and its top edge was reading as a faint
horizontal band across the middle of the welcome screen. */
body.gf-empty-chat .chat-area::before,
body.gf-empty-chat .chat-area::after {
display: none !important;
content: none !important;
animation: none !important;
opacity: 0 !important;
background: none !important;
}
/* 2. Strip every possible source of a horizontal line in welcome state:
borders, shadows, pseudo-elements, inner-element shadows that
could extend into soft bands, and unify all backgrounds. */
body.gf-empty-chat .topbar,
body.gf-empty-chat .main,
body.gf-empty-chat .chat-area,
body.gf-empty-chat .chat-messages,
body.gf-empty-chat .chat-input-area,
body.gf-empty-chat .status-bar {
border: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
background: #F5F1E8 !important;
}
body.gf-empty-chat .chat-input-area { background: transparent !important; }
body.gf-empty-chat .main::before,
body.gf-empty-chat .main::after,
body.gf-empty-chat .chat-messages::before,
body.gf-empty-chat .chat-messages::after,
body.gf-empty-chat .chat-input-area::before,
body.gf-empty-chat .chat-input-area::after {
content: none !important;
display: none !important;
background: none !important;
}
/* The chat pill itself: kill its drop shadow in welcome state — a
very soft shadow on a cream background can render as a faint
horizontal band on some displays. */
body.gf-empty-chat .gf-chat-pill {
box-shadow: none !important;
}
body.gf-empty-chat .gf-chat-pill:focus-within {
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) !important;
}
/* Status bar is the bottom element of the chat column — when the input
is translated up it leaves empty space whose bottom edge is the
status bar's top, which has a border-top in the base rules. Hide
the status bar entirely in welcome state. */
body.gf-empty-chat .status-bar {
display: none !important;
}
/* 3. Extend the sidebar vertical divider full-height via a fixed-position
body pseudo-element so it spans the entire viewport regardless of
the topbar/main DOM split. The plain .topbar::after is replaced
since the fixed line already covers that area. */
body.gf-empty-chat .topbar::after { display: none !important; }
body.gf-empty-chat::before {
content: '' !important;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 248px !important;
width: 1px !important;
background: #EFEFEF !important;
z-index: 500 !important;
display: block !important;
pointer-events: none !important;
}
/* 4. Extend the sidebar background up through the topbar so the
sidebar column (logo + toggle area) reads as one continuous
block from the very top of the page. */
body.gf-empty-chat .topbar {
background: linear-gradient(
to right,
#F4F6EA 0,
#F4F6EA 248px,
#F5F1E8 248px,
#F5F1E8 100%
) !important;
}
.main, .chat-area, .chat-messages {
background: #FFFFF8 !important;
}
/* Mode banner ("CONSULTANT MODE – ASK FOR ADVICE…") — hidden entirely */
.mode-banner { display: none !important; }
/* Project tagline in the topbar ("ASSISTANT CHATS" / "Verify to Trust AI") — hidden */
.gf-tagline, #projectTitle { display: none !important; }
/* Body + top area completely flat white so there's no seam between the
topbar and the sidebar's first item. */
html, body { background: #FFFFF8 !important; }
body::before, body::after { display: none !important; content: none !important; }
.sidebar .gf-user {
border: none !important;
box-shadow: none !important;
background: transparent !important;
margin-top: 6px !important;
}
.sidebar {
background: #FCFCF5 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-right: 1px solid rgba(40, 35, 25, 0.07) !important;
}
.main, .chat-area, .chat-messages {
background: #FFFFF8 !important;
}
.chat-input-area {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-top: none !important;
}
.mode-banner, .status-bar {
background: #FFFFF8 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-top: none !important;
border-bottom: none !important;
}
/* Cards & panels — clean opaque, no glass */
.source-item, .doc-item, .suggestion, .message.assistant,
.gf-upload-rect, .project-panel, .modal-box, .plan-form-box,
.project-selector, .gf-sidebar-toggle, .pf-card, .pf-quick-add {
background: #FFFFF8 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(40, 35, 25, 0.07) !important;
box-shadow: none !important;
}
/* Chat typography — Inter across messages, input, suggestions */
.chat-messages, .chat-messages *,
.message, .message *,
.chat-input, .chat-input-area, .suggestion,
.gf-chat-pill, .gf-chat-pill * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
letter-spacing: -0.006em !important;
}
.message {
font-size: 14px !important;
line-height: 1.65 !important;
}
.message h1, .message h2, .message h3, .message h4 {
font-family: 'Inter', -apple-system, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.3 !important;
}
.message h2 { font-size: 18px !important; margin-top: 14px !important; margin-bottom: 8px !important; }
.message h3 { font-size: 15px !important; margin-top: 12px !important; margin-bottom: 6px !important; }
.message p { margin-bottom: 10px !important; }
.message ul, .message ol { margin: 8px 0 12px 20px !important; }
.message li { margin-bottom: 5px !important; }
/* Assistant messages — darker parchment shade (same as sidebar) */
.message.assistant {
background: #FCFCF5 !important;
border: 1px solid rgba(40, 35, 25, 0.07) !important;
box-shadow: 0 1px 2px rgba(90, 70, 30, 0.04) !important;
border-radius: 14px !important;
padding: 16px 20px !important;
color: #2B2B2B !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
max-width: 92% !important;
margin-right: auto !important;
}
.message.assistant * { color: #2B2B2B !important; }
.message.assistant h1,
.message.assistant h2,
.message.assistant h3,
.message.assistant h4 { color: #111111 !important; font-weight: 600 !important; }
.message.assistant a { color: #2B2B2B !important; text-decoration: underline !important; }
.message.assistant code {
background: #F6F6F6 !important;
color: #2B2B2B !important;
border: 1px solid #EFEFEF !important;
border-radius: 4px !important;
padding: 1px 5px !important;
}
.message.assistant pre {
background: #FCFCF5 !important;
border: 1px solid #EFEFEF !important;
border-radius: 8px !important;
}
/* User messages — light grey bubble, right-aligned */
.message.user {
background: #F2F2F2 !important;
color: #2B2B2B !important;
border: 1px solid #EAEAEA !important;
border-radius: 14px !important;
padding: 12px 16px !important;
backdrop-filter: none !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.message.user * { color: #2B2B2B !important; }
/* Send button — light grey circle that becomes an ethereal orange nebula on hover */
.send-btn,
.gf-chat-pill .send-btn {
position: relative !important;
background: #F2F2F2 !important;
color: #2B2B2B !important;
border: 1px solid #E4E4E4 !important;
border-radius: 50% !important;
box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04) !important;
overflow: hidden !important;
isolation: isolate !important;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease, background 0.3s ease !important;
}
.send-btn i,
.gf-chat-pill .send-btn i,
.send-btn svg.lucide,
.gf-chat-pill .send-btn svg.lucide {
position: relative !important;
z-index: 3 !important;
color: #2B2B2B !important;
stroke: #2B2B2B !important;
transition: color 0.3s ease, stroke 0.3s ease, filter 0.3s ease !important;
pointer-events: none !important;
}
.send-btn i *,
.gf-chat-pill .send-btn i *,
.send-btn svg.lucide *,
.gf-chat-pill .send-btn svg.lucide * {
pointer-events: none !important;
}
.send-btn,
.gf-chat-pill .send-btn {
pointer-events: auto !important;
z-index: 10 !important;
}
/* Glass orb — translucent cream body with drifting pink/yellow rim light */
.send-btn::before,
.gf-chat-pill .send-btn::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: 50% !important;
/* Cream/peach body with soft pink bleed and creamy highlight */
background:
radial-gradient(circle at 35% 28%, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.85) 18%, rgba(255,228,210,0.7) 40%, rgba(255,205,190,0.55) 70%, rgba(255,180,170,0.4) 100%),
radial-gradient(circle at 65% 75%, rgba(255,180,180,0.45) 0%, rgba(255,220,200,0) 55%) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 1 !important;
transition: opacity 0.6s ease !important;
}
/* Rim highlights — yellow and pink edges that drift around */
.send-btn::after,
.gf-chat-pill .send-btn::after {
content: '' !important;
position: absolute !important;
inset: -1px !important;
border-radius: 50% !important;
/* Yellow/gold arc on right, pink arc on left, subtle diagonal refraction band */
background:
conic-gradient(from 210deg,
rgba(255,255,255,0) 0%,
rgba(255,200,100,0.85) 8%,
rgba(255,220,140,0.95) 16%,
rgba(255,180,80,0.7) 24%,
rgba(255,255,255,0) 38%,
rgba(255,255,255,0) 58%,
rgba(255,150,180,0.85) 70%,
rgba(255,190,200,0.9) 80%,
rgba(255,150,180,0.6) 88%,
rgba(255,255,255,0) 100%),
linear-gradient(135deg, rgba(255,255,255,0) 44%, rgba(255,235,220,0.6) 50%, rgba(255,255,255,0) 56%) !important;
filter: blur(1.5px) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 2 !important;
mix-blend-mode: screen !important;
transition: opacity 0.6s ease !important;
}
.send-btn:hover,
.gf-chat-pill .send-btn:hover {
background: #FFFFF8 !important;
border-color: rgba(255, 210, 180, 0.7) !important;
transform: scale(1.08) !important;
box-shadow:
0 0 0 1px rgba(255, 220, 200, 0.6),
0 0 22px rgba(255, 200, 170, 0.55),
0 10px 28px rgba(255, 180, 160, 0.4) !important;
animation: gf-orb-breathe 4.2s ease-in-out infinite !important;
}
.send-btn:hover::before,
.gf-chat-pill .send-btn:hover::before {
opacity: 1 !important;
animation: gf-orb-shift 8s ease-in-out infinite !important;
}
.send-btn:hover::after,
.gf-chat-pill .send-btn:hover::after {
opacity: 1 !important;
animation: gf-orb-rim 12s linear infinite !important;
}
.send-btn:hover i,
.gf-chat-pill .send-btn:hover i,
.send-btn:hover svg.lucide,
.gf-chat-pill .send-btn:hover svg.lucide {
color: #B86A3C !important;
stroke: #B86A3C !important;
filter: drop-shadow(0 1px 2px rgba(255, 220, 200, 0.9)) !important;
}
@keyframes gf-orb-rim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes gf-orb-shift {
0%, 100% {
background:
radial-gradient(circle at 35% 28%, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.85) 18%, rgba(255,228,210,0.7) 40%, rgba(255,205,190,0.55) 70%, rgba(255,180,170,0.4) 100%),
radial-gradient(circle at 65% 75%, rgba(255,180,180,0.45) 0%, rgba(255,220,200,0) 55%);
}
50% {
background:
radial-gradient(circle at 48% 38%, rgba(255,255,255,0.95) 0%, rgba(255,245,235,0.88) 20%, rgba(255,220,205,0.72) 44%, rgba(255,195,180,0.58) 72%, rgba(255,170,165,0.42) 100%),
radial-gradient(circle at 30% 70%, rgba(255,180,180,0.5) 0%, rgba(255,220,200,0) 55%);
}
}
@keyframes gf-orb-breathe {
0%, 100% {
box-shadow:
0 0 0 1px rgba(255, 220, 200, 0.6),
0 0 22px rgba(255, 200, 170, 0.55),
0 10px 28px rgba(255, 180, 160, 0.4);
}
50% {
box-shadow:
0 0 0 2px rgba(255, 220, 200, 0.5),
0 0 30px rgba(255, 200, 170, 0.7),
0 14px 34px rgba(255, 180, 160, 0.5);
}
}
/* ── Glass-orb hover for Upload 2D Layout + Upload Document buttons ── */
.sidebar .gf-upload-rect,
.sidebar .upload-btn,
.sidebar .gf-upload-doc-btn {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease, color 0.3s ease !important;
}
.sidebar .gf-upload-rect > *,
.sidebar .upload-btn > *,
.sidebar .gf-upload-doc-btn > * {
position: relative !important;
z-index: 3 !important;
}
.sidebar .gf-upload-rect::before,
.sidebar .upload-btn::before,
.sidebar .gf-upload-doc-btn::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
border-radius: inherit !important;
background:
radial-gradient(ellipse at 35% 28%, rgba(255,255,255,0.95) 0%, rgba(255,248,240,0.85) 18%, rgba(255,228,210,0.7) 42%, rgba(255,205,190,0.55) 72%, rgba(255,180,170,0.4) 100%),
radial-gradient(ellipse at 70% 78%, rgba(255,180,180,0.45) 0%, rgba(255,220,200,0) 55%) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 1 !important;
transition: opacity 0.6s ease !important;
}
.sidebar .gf-upload-rect::after,
.sidebar .upload-btn::after,
.sidebar .gf-upload-doc-btn::after {
content: '' !important;
position: absolute !important;
inset: -1px !important;
border-radius: inherit !important;
background:
conic-gradient(from 210deg,
rgba(255,255,255,0) 0%,
rgba(255,200,100,0.85) 8%,
rgba(255,220,140,0.95) 16%,
rgba(255,180,80,0.7) 24%,
rgba(255,255,255,0) 38%,
rgba(255,255,255,0) 58%,
rgba(255,150,180,0.85) 70%,
rgba(255,190,200,0.9) 80%,
rgba(255,150,180,0.6) 88%,
rgba(255,255,255,0) 100%),
linear-gradient(135deg, rgba(255,255,255,0) 44%, rgba(255,235,220,0.6) 50%, rgba(255,255,255,0) 56%) !important;
filter: blur(2px) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 2 !important;
mix-blend-mode: screen !important;
transition: opacity 0.6s ease !important;
}
.sidebar .gf-upload-rect:hover,
.sidebar .upload-btn:hover,
.sidebar .gf-upload-doc-btn:hover {
background: #FFFFF8 !important;
border-color: rgba(255, 210, 180, 0.7) !important;
border-style: solid !important;
color: #B86A3C !important;
transform: translateY(-1px) !important;
box-shadow:
0 0 0 1px rgba(255, 220, 200, 0.6),
0 0 22px rgba(255, 200, 170, 0.55),
0 10px 28px rgba(255, 180, 160, 0.4) !important;
animation: gf-orb-breathe 4.2s ease-in-out infinite !important;
}
.sidebar .gf-upload-rect:hover::before,
.sidebar .upload-btn:hover::before,
.sidebar .gf-upload-doc-btn:hover::before {
opacity: 1 !important;
animation: gf-orb-shift 8s ease-in-out infinite !important;
}
.sidebar .gf-upload-rect:hover::after,
.sidebar .upload-btn:hover::after,
.sidebar .gf-upload-doc-btn:hover::after {
opacity: 1 !important;
animation: gf-orb-rim 12s linear infinite !important;
}
.sidebar .gf-upload-rect:hover strong,
.sidebar .gf-upload-rect:hover small,
.sidebar .upload-btn:hover,
.sidebar .gf-upload-doc-btn:hover {
color: #B86A3C !important;
}
.sidebar .gf-upload-rect:hover i[data-lucide],
.sidebar .gf-upload-rect:hover svg.lucide,
.sidebar .upload-btn:hover i[data-lucide],
.sidebar .upload-btn:hover svg.lucide,
.sidebar .gf-upload-doc-btn:hover i[data-lucide],
.sidebar .gf-upload-doc-btn:hover svg.lucide {
color: #B86A3C !important;
stroke: #B86A3C !important;
filter: drop-shadow(0 1px 2px rgba(255, 220, 200, 0.9)) !important;
}
/* ════════════════════════════════════════════════════
Sidebar list — Sintia-style minimal palette
Pure white bg, gray Inter text, thin Lucide icons
════════════════════════════════════════════════════ */
.sidebar {
background: #FFFFF8 !important;
border-right: 1px solid #EFEFEF !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.sidebar, .sidebar * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
letter-spacing: -0.005em !important;
}
/* Section labels — light gray, small, non-uppercase */
.sidebar .sidebar-label {
font-size: 11px !important;
font-weight: 500 !important;
color: #B5B5B5 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 4px 18px 8px !important;
padding: 0 !important;
}
/* No divider lines — separate sections with whitespace only (Sintia style) */
.sidebar .sidebar-divider {
display: none !important;
}
.sidebar .sidebar-section {
padding: 14px 0 14px !important;
background: transparent !important;
}
/* Unchecked (ignored) doc/plan items — visually dimmed so users can tell
they're not part of the knowledge base. */
.sidebar .doc-item.kb-ignored {
opacity: 0.45 !important;
}
.sidebar .doc-item.kb-ignored .doc-name,
.sidebar .doc-item.kb-ignored .doc-meta {
text-decoration: line-through !important;
color: #B5B5B5 !important;
}
/* Doc item layout — checkbox + name + meta + edit/delete buttons */
.sidebar .doc-item {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.sidebar .doc-item .source-checkbox {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
border: 1.5px solid #C8C8C8 !important;
border-radius: 4px !important;
background: transparent !important;
pointer-events: none !important;
}
.sidebar .doc-item .source-checkbox.checked {
background: #2B2B2B !important;
border-color: #2B2B2B !important;
}
/* List items — flat rows with icon + label, no borders */
.sidebar .source-item,
.sidebar .doc-item {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 8px !important;
margin: 1px 10px !important;
padding: 8px 12px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
color: #8A8A8A !important;
font-size: 14px !important;
font-weight: 400 !important;
transition: background 0.15s ease, color 0.15s ease !important;
}
.sidebar .source-item:hover,
.sidebar .doc-item:hover {
background: #F6F6F6 !important;
color: #2B2B2B !important;
border: none !important;
}
.sidebar .source-item.active,
.sidebar .source-item.selected,
.sidebar .doc-item.active {
background: #F2F2F2 !important;
color: #111111 !important;
font-weight: 500 !important;
}
/* Checkbox -> thin Lucide-style square icon */
.sidebar .source-item { cursor: pointer !important; }
.sidebar .source-item .source-checkbox {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border: 1.5px solid #C8C8C8 !important;
border-radius: 4px !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none !important;
}
.sidebar .source-item .source-checkbox.checked,
.sidebar .source-item.selected .source-checkbox,
.sidebar .source-item.active .source-checkbox {
border-color: #2B2B2B !important;
background: #2B2B2B !important;
}
.sidebar .source-item:has(.source-checkbox.checked) {
background: #F2F2F2 !important;
color: #111111 !important;
font-weight: 500 !important;
}
.sidebar .source-name,
.sidebar .doc-name {
color: inherit !important;
font-size: 14px !important;
font-weight: inherit !important;
flex: 1 !important;
}
/* Hide the emoji/file-type icon on the left of doc items — doesn't fit the minimal theme */
.sidebar .doc-item .doc-icon { display: none !important; }
.sidebar .doc-item .doc-info { flex: 1 !important; min-width: 0 !important; }
.sidebar .doc-item .doc-name {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.sidebar .doc-item .doc-meta .indexed { color: #9A9A9A !important; font-size: 11px !important; }
/* Edit / delete buttons — thin gray, show on hover */
.sidebar .doc-item .doc-edit,
.sidebar .doc-item .doc-delete {
background: transparent !important;
border: none !important;
color: #B5B5B5 !important;
font-size: 13px !important;
padding: 4px 6px !important;
border-radius: 6px !important;
opacity: 0 !important;
transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease !important;
}
.sidebar .doc-item:hover .doc-edit,
.sidebar .doc-item:hover .doc-delete { opacity: 1 !important; }
.sidebar .doc-item .doc-edit:hover,
.sidebar .doc-item .doc-delete:hover {
background: #EDEDED !important;
color: #2B2B2B !important;
}
/* Badges — quiet pill, gray on white */
.sidebar .source-badge {
background: #F4F4F4 !important;
color: #9A9A9A !important;
border: none !important;
font-size: 10px !important;
font-weight: 500 !important;
padding: 2px 7px !important;
border-radius: 10px !important;
}
/* Lucide icons — thin stroke, gray, inherit on hover */
.sidebar i[data-lucide],
.sidebar svg.lucide {
width: 18px !important;
height: 18px !important;
stroke-width: 1.75 !important;
color: #9A9A9A !important;
}
.sidebar .source-item:hover i[data-lucide],
.sidebar .source-item:hover svg.lucide,
.sidebar .source-item.active i[data-lucide],
.sidebar .source-item.active svg.lucide { color: #2B2B2B !important; }
/* Upload buttons — match the flat minimal look */
.sidebar .gf-upload-rect,
.sidebar .upload-btn {
background: transparent !important;
border: 1px dashed #E4E4E4 !important;
box-shadow: none !important;
color: #8A8A8A !important;
margin: 4px 14px !important;
border-radius: 10px !important;
}
.sidebar .gf-upload-rect:hover,
.sidebar .upload-btn:hover {
background: #FCFCF5 !important;
border-color: #D0D0D0 !important;
color: #2B2B2B !important;
}
.sidebar .gf-upload-rect strong { color: #2B2B2B !important; font-weight: 500 !important; }
.sidebar .gf-upload-rect small { color: #ADADAD !important; }
/* User profile pill — white, quiet */
.sidebar .gf-user {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #2B2B2B !important;
margin: 6px 10px 4px !important;
padding: 8px 10px !important;
border-radius: 10px !important;
}
.sidebar .gf-user:hover { background: #F6F6F6 !important; }
.sidebar .gf-user-name { color: #2B2B2B !important; font-weight: 500 !important; font-size: 14px !important; }
.sidebar .gf-avatar {
background: #F0F0F0 !important;
color: #5A5A5A !important;
border: none !important;
font-weight: 500 !important;
}
.sidebar .gf-user-caret i { color: #B5B5B5 !important; }
/* ════════════════════════════════════════════════════
Smart AI Vision — full-vertical left + RAG on right
Canvas stays the fundamental part; the preview column
is kept as tight as possible so zoom / markup has room.
════════════════════════════════════════════════════ */
/* Canvas mode: sidebar | canvas. The Smart AI Vision + RAG preview
column was removed; canvas now fills the freed space. */
.plan-form-box.has-canvas .pf-body {
grid-template-columns: 300px 1fr !important;
}
/* BETA badge + info tooltip on the Smart AI Vision title */
.gf-vision-title {
flex-wrap: wrap;
}
.gf-vision-beta {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 999px;
background: linear-gradient(135deg, #FF6B2B, #FFAB60);
color: #fff;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
margin-left: 4px;
box-shadow: 0 2px 8px rgba(255,107,43,0.35);
}
.gf-vision-info {
position: relative;
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--el-text-2);
cursor: help;
margin-left: 2px;
}
.gf-vision-info i { width: 13px; height: 13px; stroke-width: 2; }
.gf-vision-info:hover { color: var(--el-text); }
.gf-vision-info-tip {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 250px;
padding: 9px 11px;
background: #1A1D29;
color: #F2F2F2;
border-radius: 8px;
font-size: 10.5px;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0;
text-transform: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 50;
}
.gf-vision-info-tip::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: #1A1D29;
}
.gf-vision-info:hover .gf-vision-info-tip,
.gf-vision-info:focus .gf-vision-info-tip {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* Refresh button spin feedback on click */
.gf-vision-refresh.gf-spin i {
animation: gf-vision-spin 0.6s linear;
}
.gf-vision-refresh:active { transform: scale(0.94); }
/* Wider agent name column to fit ADB / BS 9991 labels */
.gf-agent {
grid-template-columns: 10px 110px 1fr !important;
}
/* ════════════════════════════════════════════════════
Agent orbs — optimistic loading state
════════════════════════════════════════════════════ */
.gf-vision-loading.gf-agents-loading {
flex-direction: column !important;
gap: 22px !important;
padding: 34px 18px 30px !important;
align-items: center !important;
justify-content: flex-start !important;
}
.gf-orb-cluster {
position: relative;
width: 180px;
height: 110px;
margin: 0 auto;
}
.gf-orb {
position: absolute;
top: 50%;
width: 74px;
height: 74px;
border-radius: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: multiply;
filter: blur(0.2px);
animation: gf-orb-float 4.2s ease-in-out infinite;
}
.gf-orb::before,
.gf-orb::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
}
.gf-orb::before {
background: radial-gradient(circle at 35% 30%,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.35) 18%,
var(--orb-core) 55%,
var(--orb-edge) 100%);
box-shadow:
0 0 28px 6px var(--orb-glow),
0 0 64px 20px var(--orb-glow-soft),
inset -6px -10px 20px rgba(0,0,0,0.18),
inset 6px 8px 14px rgba(255,255,255,0.55);
}
.gf-orb::after {
background: radial-gradient(circle at 65% 70%,
transparent 52%,
var(--orb-aura) 58%,
transparent 78%);
animation: gf-orb-spin 6s linear infinite;
}
.gf-orb--1 {
left: 34%;
--orb-core: #FF8A3D;
--orb-edge: #D7451A;
--orb-glow: rgba(255,107,43,0.55);
--orb-glow-soft: rgba(255,107,43,0.22);
--orb-aura: rgba(255,170,80,0.55);
animation-delay: 0s;
}
.gf-orb--2 {
left: 50%;
--orb-core: #7D9BFF;
--orb-edge: #3B56C9;
--orb-glow: rgba(91,127,255,0.55);
--orb-glow-soft: rgba(91,127,255,0.22);
--orb-aura: rgba(140,175,255,0.55);
animation-delay: -1.4s;
}
.gf-orb--3 {
left: 66%;
--orb-core: #C48AFF;
--orb-edge: #7B3AC9;
--orb-glow: rgba(157,91,255,0.55);
--orb-glow-soft: rgba(157,91,255,0.22);
--orb-aura: rgba(195,140,255,0.55);
animation-delay: -2.8s;
}
@keyframes gf-orb-float {
0%, 100% { transform: translate(-50%, -52%) scale(1); }
50% { transform: translate(-50%, -48%) scale(1.06); }
}
.gf-agents {
display: flex;
flex-direction: column;
gap: 9px;
width: 100%;
max-width: 300px;
}
.gf-agent {
display: grid;
grid-template-columns: 10px 92px 1fr;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
background: rgba(255,255,255,0.72);
border: 1px solid var(--el-border);
font-size: 11px;
line-height: 1.35;
animation: gf-agent-pop 0.45s ease both;
backdrop-filter: blur(6px);
}
.gf-agent--1 { animation-delay: 0.05s; }
.gf-agent--2 { animation-delay: 0.18s; }
.gf-agent--3 { animation-delay: 0.32s; }
@keyframes gf-agent-pop {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.gf-agent-dot {
width: 10px; height: 10px; border-radius: 50%;
box-shadow: 0 0 10px 2px currentColor;
animation: gf-agent-pulse 1.4s ease-in-out infinite;
}
.gf-agent--1 .gf-agent-dot { color: #FF6B2B; background: #FF6B2B; }
.gf-agent--2 .gf-agent-dot { color: #5B7FFF; background: #5B7FFF; }
.gf-agent--3 .gf-agent-dot { color: #9D5BFF; background: #9D5BFF; }
@keyframes gf-agent-pulse {
0%, 100% { opacity: 0.55; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.gf-agent-name {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1.1px;
color: var(--el-text);
text-transform: uppercase;
}
.gf-agent-task {
font-size: 11px;
color: var(--el-text-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-style: italic;
animation: gf-task-shimmer 2.2s ease-in-out infinite;
}
@keyframes gf-task-shimmer {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* ════════════════════════════════════════════════════
Vision card — reject fade-out + accept burst
════════════════════════════════════════════════════ */
.gf-vision-item-actions {
opacity: 1 !important;
max-height: none !important;
overflow: visible !important;
}
.gf-vision-item-rejecting {
animation: gf-vision-reject-out 0.32s ease forwards;
pointer-events: none;
}
@keyframes gf-vision-reject-out {
0% { opacity: 1; transform: translateX(0); max-height: 600px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; border-width: 1px; }
55% { opacity: 0; transform: translateX(40px); }
100% { opacity: 0; transform: translateX(40px); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
.gf-vision-item-accepted {
position: relative;
animation: gf-vision-accept-flash 0.9s ease forwards;
}
@keyframes gf-vision-accept-flash {
0% { box-shadow: 0 0 0 0 rgba(46,160,67,0); border-color: var(--el-border); }
30% { box-shadow: 0 0 0 6px rgba(46,160,67,0.25); border-color: #2EA043; background: rgba(46,160,67,0.08); }
100% { box-shadow: 0 0 0 0 rgba(46,160,67,0); border-color: #2EA043; background: rgba(46,160,67,0.04); }
}
.gf-accept-toast {
position: absolute;
top: 10px;
right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border-radius: 999px;
background: #2EA043;
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.2px;
box-shadow: 0 6px 18px rgba(46,160,67,0.35);
opacity: 0;
transform: translateY(-6px) scale(0.9);
animation: gf-accept-toast-in 2.2s ease forwards;
pointer-events: none;
z-index: 5;
}
.gf-accept-toast i { width: 12px; height: 12px; stroke-width: 2.8; }
@keyframes gf-accept-toast-in {
0% { opacity: 0; transform: translateY(-6px) scale(0.9); }
15% { opacity: 1; transform: translateY(0) scale(1); }
80% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-4px) scale(0.95); }
}
.gf-vision-item-collapsing {
animation: gf-vision-reject-out 0.45s ease forwards;
}
/* Conditional suggestion copy tweaks */
.gf-vision-cond {
display: block;
font-size: 10px;
font-weight: 800;
color: #8A5C1A;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 2px;
}
/* ═══════════════════════════════════════════════════════════════════
Theme overrides ported from co-founder for the new chrome:
.btn-initial-assess, .gf-assess-pick-*, .pf-tool-vbtn,
.pf-assessment-summary, .pf-assess-section, .pf-pin-popover.
═══════════════════════════════════════════════════════════════════ */
/* Keep "Initial assessment" button parchment-orange in every theme —
this is the user-requested accent that draws attention away from
the monochrome chrome. */
.btn-initial-assess {
background: #ff6b2b !important;
border: 1px solid #ff6b2b !important;
color: #fff !important;
padding: 9px 14px !important;
border-radius: 10px !important;
font-weight: 700 !important;
box-shadow: 0 6px 16px rgba(255,107,43,0.30) !important;
}
.btn-initial-assess:hover {
background: #e85f24 !important;
border-color: #e85f24 !important;
}
/* Plan picker modal */
.gf-assess-pick-box {
min-width: 420px;
max-width: 540px;
}
.gf-assess-pick-hint {
font-size: 12px;
color: var(--el-text-2) !important;
margin: 6px 0 14px;
}
.gf-assess-pick-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 50vh;
overflow-y: auto;
margin-bottom: 14px;
}
.gf-assess-pick-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--el-border) !important;
background: var(--el-bg) !important;
color: var(--el-text) !important;
border-radius: 8px;
font-family: inherit;
font-size: 13px;
cursor: pointer;
text-align: left;
}
.gf-assess-pick-row:hover {
background: var(--el-hover) !important;
border-color: var(--el-text) !important;
}
.gf-assess-pick-name {
font-weight: 600;
color: var(--el-text) !important;
}
.gf-assess-pick-meta {
font-size: 11px;
color: var(--el-text-2) !important;
display: inline-flex;
align-items: center;
gap: 8px;
}
.gf-assess-pick-badge {
background: #ff6b2b;
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 2px 7px;
border-radius: 999px;
text-transform: uppercase;
}
.gf-assess-pick-empty {
font-size: 12px;
color: var(--el-text-2) !important;
font-style: italic;
padding: 14px 0 18px;
}
.pf-tool-vbtn {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: 10px !important;
padding: 10px 4px !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
box-shadow: none !important;
gap: 5px !important;
}
.pf-tool-vbtn:hover {
background: var(--el-hover) !important;
border-color: var(--el-border) !important;
color: var(--el-text) !important;
transform: none !important;
}
.pf-tool-vbtn .pf-tool-vbtn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--el-text-2);
}
.pf-tool-vbtn .pf-tool-vbtn-icon i[data-lucide] svg,
.pf-tool-vbtn .pf-tool-vbtn-icon svg {
width: 16px !important;
height: 16px !important;
stroke-width: 2 !important;
}
.pf-tool-vbtn.active {
background: var(--el-text) !important;
border-color: var(--el-text) !important;
color: #fff !important;
box-shadow: none !important;
}
.pf-tool-vbtn.active .pf-tool-vbtn-icon { color: #fff !important; }
.pf-content { background: var(--el-bg) !important; }
.pf-section-title { color: var(--el-text) !important; font-weight: 700 !important; text-shadow: none !important; }
.pf-section-hint { color: var(--el-text-2) !important; }
.pf-add-btn {
background: var(--el-text) !important;
color: #fff !important;
border: 1px solid var(--el-text) !important;
border-radius: var(--el-radius-sm) !important;
box-shadow: none !important;
}
.pf-add-btn:hover { background: #222 !important; }
.pf-card, .pf-quick-add {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
border-radius: var(--el-radius) !important;
box-shadow: none !important;
}
.pf-card:hover { border-color: #D8D8D8 !important; }
.pf-card.expanded { border-color: var(--el-text) !important; }
.pf-card.expanded .pf-card-head { background: var(--el-bg-2) !important; }
.pf-canvas-toolbar {
background: var(--el-bg-2) !important;
border-top: 1px solid var(--el-border) !important;
border-bottom: 1px solid var(--el-border) !important;
}
.pf-canvas-tool-btn {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: var(--el-radius-sm) !important;
}
.pf-canvas-tool-btn:hover { background: var(--el-hover) !important; }
.pf-canvas-tool-btn.active { background: var(--el-text) !important; color: #fff !important; border-color: var(--el-text) !important; }
.pf-zoom-segment {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
}
.pf-zoom-segment .pf-canvas-tool-btn {
background: transparent !important;
border: none !important;
}
.pf-zoom-segment .pf-canvas-tool-btn:hover { background: var(--el-hover) !important; }
.pf-zoom-segment .pf-canvas-zoom-label {
color: var(--el-text) !important;
border-left: 1px solid var(--el-border) !important;
border-right: 1px solid var(--el-border) !important;
}
.pf-canvas-dropzone {
background: var(--el-bg-2) !important;
border: 1.5px dashed var(--el-border) !important;
border-radius: var(--el-radius) !important;
color: var(--el-text-2) !important;
}
.pf-canvas-dropzone:hover { border-color: var(--el-text) !important; background: var(--el-hover) !important; }
.pf-canvas-dropzone-icon {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
}
.pf-rag-drawer, .pf-preview {
background: var(--el-bg-2) !important;
border-left: 1px solid var(--el-border) !important;
}
.pf-rag-drawer-head, .pf-preview-head {
background: var(--el-bg) !important;
border-bottom: 1px solid var(--el-border) !important;
}
.pf-prev-header { color: var(--el-text) !important; font-weight: 700 !important; }
.pf-footer {
background: var(--el-bg-2) !important;
border-top: 1px solid var(--el-border) !important;
}
.pf-kbd-hints, .pf-kbd-hints kbd {
color: var(--el-text-2) !important;
}
.pf-kbd-hints kbd {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
border-radius: 5px !important;
}
.pf-kbd-hints .pf-kbd-sep { color: var(--el-text-3) !important; }
.pf-canvas-wrap { background: #fff !important; }
/* ── Initial Design Assessment (read-only view) ── */
.pf-assessment-summary { background: var(--el-bg-2) !important; }
.pf-assessment-summary-head {
color: var(--el-text-2) !important;
border-bottom: 1px solid var(--el-border) !important;
padding-bottom: 8px;
}
.pf-assess-section { border-bottom: 1px solid var(--el-border) !important; }
.pf-assess-label { color: var(--el-text-2) !important; }
.pf-assess-body { color: var(--el-text) !important; }
.pf-assessment-empty { color: var(--el-text-3) !important; }
.pf-pin-popover {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
box-shadow: 0 10px 30px rgba(40,35,25,0.18) !important;
}
.pf-pin-popover-name { color: var(--el-text) !important; }
.pf-pin-popover-ref { color: var(--el-text) !important; font-weight: 700 !important; }
.pf-pin-popover-issue { color: var(--el-text-2) !important; }
.pf-pin-popover-empty { color: var(--el-text-3) !important; }
.pf-pin-popover-list li { color: var(--el-text-2) !important; }
.pf-assess-btn-edit {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
}
.pf-assess-btn-edit:hover { background: var(--el-hover) !important; }
.pf-assess-btn-export {
background: var(--el-bg) !important;
border: 1px solid var(--el-border) !important;
color: var(--el-text) !important;
}
.pf-assess-btn-export:hover { background: var(--el-hover) !important; }
.pf-assess-btn-close {
background: var(--el-text) !important;
border: 1px solid var(--el-text) !important;
color: #fff !important;
}
.pf-assess-btn-close:hover { background: #222 !important; }
/* Project panel */
.project-panel {