/* Rich-text composer, job cards/log, and scrollbar styling */ #composer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } #composer .row { display: flex; gap: 10px; align-items: flex-end; } #composer-attachments { display: flex; flex-wrap: wrap; gap: 6px; } #composer-attachments:empty { display: none; } .attachment-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; font-size: 11.5px; color: var(--text-dim); } .attachment-chip .rm { cursor: pointer; color: var(--text-dim); font-size: 13px; } .attachment-chip .rm:hover { color: var(--red); } #composer-toolbar, .rich-editor-toolbar { position: relative; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; row-gap: 4px; } #composer-toolbar .sep, .rich-editor-toolbar .sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; } /* position/left/bottom are set inline by toggleEmojiPicker() (rich-editor.js), anchored to the emoji button's actual screen position — needed since the picker is appended to , not the toolbar (see that function for why). */ #emoji-picker { z-index: 1000; display: grid; grid-template-columns: repeat(7, 28px); gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); } .emoji-opt { background: transparent; border: none; border-radius: 6px; width: 28px; height: 28px; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .emoji-opt:hover { background: var(--bg); } /* Double-ID specificity needed to beat the plain `#composer button` fill (and the holographic gradient pass further down) meant for Send. The plain `.rich-editor-toolbar button` variant covers standalone editors (Knowledge Base / Notes forms — see rich-editor.js) that aren't nested inside #composer and so don't need to out-specificity anything. */ #composer #composer-toolbar button, .rich-editor-toolbar button { background: transparent; border: 1px solid transparent; color: var(--text-dim); font-weight: 400; border-radius: 6px; width: 28px; height: 26px; padding: 0; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; animation: none; text-transform: none; letter-spacing: normal; font-family: inherit; white-space: nowrap; } #composer #composer-toolbar button:hover, .rich-editor-toolbar button:hover { color: var(--text); background: var(--bg); border-color: var(--border); filter: none; transform: none; box-shadow: none; } #composer #composer-toolbar button:disabled, .rich-editor-toolbar button:disabled { opacity: 0.5; cursor: default; } /* Toolbar icons default to verdigris via .icon-svg's own explicit color (see css/icons.css) — override to match the gray/dim-then-brighten look of the rest of this toolbar instead of standing out in red. */ #composer-toolbar .icon-svg, .rich-editor-toolbar .icon-svg { width: 15px; height: 15px; color: var(--text-dim); filter: none; } #composer-toolbar button:hover .icon-svg, .rich-editor-toolbar button:hover .icon-svg { color: var(--text); filter: none; } #composer #prompt-input, .rich-editor-input { flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; font-family: var(--font-body); line-height: 1.5; outline: none; min-height: 40px; max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } .rich-editor .rich-editor-input { min-height: 90px; } #composer #prompt-input:focus, .rich-editor-input:focus { border-color: var(--accent); } #composer #prompt-input.drag-over { border-color: var(--accent); background: rgba(62,90,76,0.06); } #composer #prompt-input:empty:before, .rich-editor-input:empty:before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; } #composer #prompt-input code, .rich-editor-input code { background: rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 0.9em; } #composer #prompt-input a, .rich-editor-input a { color: var(--accent-2); } #composer #prompt-input ul, #composer #prompt-input ol, .rich-editor-input ul, .rich-editor-input ol { margin: 4px 0; padding-left: 20px; } #composer #prompt-input blockquote, .rich-editor-input blockquote { margin: 6px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--border); color: var(--text-dim); } #composer #prompt-input hr, .rich-editor-input hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; } #composer #prompt-input h1, #composer #prompt-input h2, #composer #prompt-input h3, .rich-editor-input h1, .rich-editor-input h2, .rich-editor-input h3 { margin: 4px 0; font-weight: 700; } #composer #prompt-input h1, .rich-editor-input h1 { font-size: 1.3em; } #composer #prompt-input h2, .rich-editor-input h2 { font-size: 1.15em; } #composer #prompt-input h3, .rich-editor-input h3 { font-size: 1.05em; } /* Standalone editor container (Knowledge Base / Notes forms). */ .rich-editor { display: flex; flex-direction: column; gap: 8px; } /* Rendered markdown-lite body — mirrors workspace.css's .msg-user/.msg-assistant typography (kept separate rather than appended to those selector lists, since this context has none of the workspace bubble's background/padding/ max-width) — shared by Knowledge Base and Notes entry display. */ .rendered-md { font-size: 13px; line-height: 1.55; word-break: break-word; } .rendered-md p { margin: 0 0 8px; } .rendered-md > *:first-child { margin-top: 0; } .rendered-md > *:last-child { margin-bottom: 0; } .rendered-md ul, .rendered-md ol { margin: 4px 0 8px; padding-left: 20px; } .rendered-md li { margin: 2px 0; } .rendered-md h1, .rendered-md h2, .rendered-md h3, .rendered-md h4, .rendered-md h5, .rendered-md h6 { margin: 10px 0 6px; font-weight: 700; line-height: 1.3; } .rendered-md h1 { font-size: 1.2em; } .rendered-md h2 { font-size: 1.12em; } .rendered-md h3, .rendered-md h4, .rendered-md h5, .rendered-md h6 { font-size: 1.05em; } .rendered-md code { background: rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 0.9em; } .rendered-md pre.msg-code { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0; overflow-x: auto; } .rendered-md pre.msg-code code { background: none; padding: 0; font-size: 12px; line-height: 1.5; white-space: pre; } .rendered-md blockquote { margin: 6px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--border); color: var(--text-dim); } .rendered-md blockquote p { margin: 0 0 4px; } .rendered-md blockquote p:last-child { margin-bottom: 0; } .rendered-md hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; } .rendered-md del { color: var(--text-dim); } .rendered-md a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .rendered-md a:hover { color: var(--accent); } /* Task-list checkbox item — shared shape rendered by markdown.js's renderListItem() wherever formatMessageText() runs (composer preview, Knowledge Base / Notes .rendered-md bodies; workspace.css adds the matching rule for sent messages). */ .rich-editor-input li.task-item, #prompt-input li.task-item, .rendered-md li.task-item { list-style: none; } .task-item label { display: flex; align-items: flex-start; gap: 6px; cursor: default; } .task-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; } .task-item input[type="checkbox"]:checked + span { color: var(--text-dim); text-decoration: line-through; } .composer-code-block { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .composer-code-block code { background: none; padding: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; } .composer-inline-img { display: inline-block; vertical-align: middle; max-height: 100px; max-width: 180px; border-radius: 6px; border: 1px solid var(--border); margin: 2px 4px; } #composer .opts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } #composer label { font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; white-space: nowrap; } #agent-badge { font-size: 11px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; white-space: nowrap; } #composer button { background: var(--accent); border: none; color: #070605; font-weight: 700; border-radius: 8px; padding: 10px 18px; font-size: 13px; cursor: pointer; white-space: nowrap; } #composer button:disabled { opacity: 0.5; cursor: default; } #composer button:not(:disabled):hover { filter: brightness(1.08); } .composer-send-row { display: flex; align-items: center; gap: 8px; } .composer-mic-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent !important; border: 1px solid var(--border); color: var(--text-dim); flex-shrink: 0; } .composer-mic-btn:not(:disabled):hover { color: var(--text); border-color: var(--accent-2); filter: none; } .composer-mic-btn.recording { color: var(--verdigris); border-color: var(--verdigris); box-shadow: 0 0 12px -2px var(--verdigris); animation: vcc-pulse 1.4s ease-in-out infinite; } .composer-mic-btn.transcribing { color: var(--text-dim); opacity: 0.6; } #jobs { flex: 1; overflow-y: auto; padding: 16px 24px; } .job-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .job-head { padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; } .job-head .prompt { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .job-head .time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; } .badge.queued { background: rgba(255,255,255,0.08); color: var(--text-dim); } .badge.running { background: rgba(62,90,76,0.15); color: var(--accent); } .badge.succeeded { background: rgba(62,207,142,0.15); color: var(--green); } .badge.failed { background: rgba(255,107,107,0.15); color: var(--red); } .badge.cancelled { background: rgba(245,184,79,0.15); color: var(--amber); } .badge.running .pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 5px; animation: pulse 1.2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .job-log { display: none; border-top: 1px solid var(--border); background: #070605; padding: 12px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.55; max-height: 360px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } .job-log.open { display: block; } .job-log .line { display: flex; align-items: flex-start; gap: 8px; color: #9B958A; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .job-log .line:last-child { border-bottom: none; } .job-log .line-icon { flex-shrink: 0; display: flex; align-items: center; margin-top: 1px; } .job-log .line-icon .icon-svg { width: 13px; height: 13px; } .job-log .line-body { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; min-width: 0; } .job-log .line-label { color: var(--text); font-family: var(--sans, inherit); } .job-log .line-gloss { color: var(--text-dim); font-style: italic; } .job-log .line-code { color: var(--accent); background: rgba(255,255,255,0.04); border-radius: 4px; padding: 1px 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-log .line-detail { color: #9B958A; font-family: var(--sans, inherit); white-space: pre-wrap; word-break: break-word; } .job-log .line.system { color: var(--text-dim); } .job-log .line.system .line-icon .icon-svg { color: var(--text-dim); } .job-log .line.error { color: var(--red); } .job-log .line.error .line-icon .icon-svg { color: var(--red); } .job-log .line.summary .line-icon .icon-svg { color: var(--green); } .job-log .line.action .line-icon .icon-svg { color: var(--accent); } .job-log .line.action_result .line-icon .icon-svg { color: var(--green); } .job-log .line.action_result.failed .line-icon .icon-svg { color: var(--red); } .job-log .line.action_result.failed .line-label { color: var(--red); } .job-actions { display: flex; gap: 6px; } .job-actions button { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer; } .job-actions button:hover { color: var(--text); border-color: var(--text-dim); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } ::-webkit-scrollbar-track { background: transparent; } /* Firefox has no ::-webkit-scrollbar equivalent — scrollbar-width/color are its own separate properties, and both are inherited, so setting them once here themes every scrollable element the same way. */ html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }