/* =====================================================================
容大AI Console Styles
===================================================================== */
/* Animations */
@keyframes pulseDot {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* Generic Tooltip (via data-tooltip attribute) */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
padding: 5px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
background: #1e293b;
color: #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 100;
}
[data-tooltip-pos="bottom"]::after {
bottom: auto;
top: calc(100% + 8px);
}
.dark [data-tooltip]::after {
background: #334155;
color: #f1f5f9;
}
[data-tooltip]:hover::after {
opacity: 1;
}
[data-tooltip=""]:hover::after {
display: none;
}
/* Float-portal elements render their tooltip via the body-level node, so
suppress the clipped ::after variant to avoid a double tooltip. */
[data-tip-float]::after,
[data-tip-float]::before {
display: none !important;
}
/* Sidebar */
.sidebar-brand {
display: flex;
align-items: center;
gap: 11px;
height: 56px;
padding: 0 20px;
flex-shrink: 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.brand-mark {
display: block;
flex-shrink: 0;
object-fit: contain;
}
.sidebar-brand-mark { width: 34px; height: 34px; }
.sidebar-brand-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.brand-wordmark {
color: #172b3a;
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: .025em;
line-height: 1.1;
white-space: nowrap;
}
.brand-ai { color: #0788b5; margin-left: 3px; letter-spacing: -.025em; }
.dark .brand-wordmark, .sidebar-brand .brand-wordmark { color: #f3f8fc; }
.dark .brand-ai, .sidebar-brand .brand-ai { color: #5cd7ff; }
.sidebar-brand-caption { color: #8b959f; font-size: 10px; line-height: 1.1; letter-spacing: .12em; }
.brand-mark-hero { width: 64px; height: 64px; }
.brand-wordmark-hero { font-size: 28px; line-height: 1.25; }
.sidebar-item.active {
background: rgba(255, 255, 255, 0.08);
color: #FFFFFF;
}
.sidebar-item.active .item-icon { color: #4ABE6E; }
/* Compact account switcher and grouped popover. Palette tokens are applied in
appearance.css; these defaults also support the original dark sidebar. */
.sidebar-account-footer {
position: relative;
flex-shrink: 0;
min-width: 0;
margin: 0 10px;
padding: 4px 0;
border-top: 1px solid rgba(255, 255, 255, .08);
background: #0a0a0a;
}
.sidebar-admin-entry-wrap {
flex-shrink: 0;
min-width: 0;
margin: 0 10px;
padding: 2px 0 0;
}
.sidebar-admin-entry {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 32px;
padding: 6px 8px;
border-radius: 8px;
color: #a3a3a3;
font-size: 12px;
line-height: 1.3;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.sidebar-admin-entry .item-icon {
width: 1.1rem;
text-align: center;
font-size: 11px;
color: inherit;
}
.sidebar-admin-entry:hover {
background: rgba(255, 255, 255, .07);
color: #e5e5e5;
}
.sidebar-admin-entry.hidden { display: none !important; }
/* Recent sessions under 场景应用 (ChatGPT-style nested history). */
.sidebar-recent {
margin: 2px 0 0;
padding: 0;
}
.sidebar-recent.hidden { display: none !important; }
.sidebar-recent-header {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.sidebar-recent-label {
flex: 1;
min-width: 0;
/* Inherit .sidebar-item palette/size; only keep flex layout for the chevron row. */
width: auto;
margin: 3px 0;
border: 0;
background: transparent;
font: inherit;
text-align: left;
}
.sidebar-recent-label.sidebar-item.active {
/* Header is not a selectable page row; never keep the active chat highlight. */
background: transparent;
color: inherit;
}
.sidebar-recent-chevron-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
margin-right: 4px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: #737373;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.sidebar-recent-chevron-btn:hover {
background: rgba(255, 255, 255, .06);
color: #d4d4d4;
}
.sidebar-recent-chevron {
font-size: 10px;
transition: transform .2s ease;
}
.sidebar-recent.open .sidebar-recent-chevron {
transform: rotate(0deg);
}
.sidebar-recent:not(.open) .sidebar-recent-chevron {
transform: rotate(-90deg);
}
.sidebar-recent-list {
display: none;
margin: 2px 0 0 26px;
padding: 2px 0 2px 10px;
border-left: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-recent.open .sidebar-recent-list { display: block; }
.sidebar-recent-item {
display: block;
width: 100%;
padding: 7px 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #a3a3a3;
font-size: 12px;
line-height: 1.35;
text-align: left;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background .15s ease, color .15s ease;
}
.sidebar-recent-item:hover {
background: rgba(255, 255, 255, .06);
color: #e5e5e5;
}
.sidebar-recent-item.active {
background: rgba(74, 190, 110, .12);
color: #d4f5e0;
}
.sidebar-recent-empty,
.sidebar-recent-error {
padding: 8px 10px;
color: #737373;
font-size: 12px;
}
.sidebar-recent-more {
display: none;
width: calc(100% - 26px);
margin: 2px 0 4px 26px;
padding: 6px 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #737373;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.sidebar-recent.open .sidebar-recent-more:not(.hidden) { display: block; }
.sidebar-recent-more:hover { color: #a3a3a3; background: rgba(255, 255, 255, .04); }
.sidebar-recent-more.hidden { display: none !important; }
.sidebar-recent-archived {
display: none;
width: calc(100% - 26px);
margin: 2px 0 4px 26px;
padding: 6px 8px;
border: 0;
border-radius: 6px;
background: transparent;
color: #737373;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.sidebar-recent.open .sidebar-recent-archived { display: block; }
.sidebar-recent-archived:hover { color: #a3a3a3; background: rgba(255, 255, 255, .04); }
.sidebar-recent-row {
display: flex;
align-items: center;
gap: 2px;
}
.sidebar-recent-row .sidebar-recent-item {
flex: 1;
min-width: 0;
}
/* Per-row icon controls. Rename and archive share one rule set so their size,
reveal behaviour and hover feedback can never drift apart. */
.sidebar-recent-archive-btn,
.sidebar-recent-rename-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: #737373;
font-size: 11px;
cursor: pointer;
/* Reserve the width so hovering does not reflow the title, but only reveal
the control on hover/focus. Keyboard focus still reaches it. */
opacity: 0;
transition: opacity .12s ease, background .15s ease, color .15s ease;
}
.sidebar-recent-row:hover .sidebar-recent-archive-btn,
.sidebar-recent-row:focus-within .sidebar-recent-archive-btn,
.sidebar-recent-row:hover .sidebar-recent-rename-btn,
.sidebar-recent-row:focus-within .sidebar-recent-rename-btn {
opacity: 1;
}
.sidebar-recent-archive-btn:hover,
.sidebar-recent-rename-btn:hover {
background: rgba(255, 255, 255, .08);
color: #e5e5e5;
}
/* Touch has no hover: keep the controls visible so they stay reachable. */
@media (hover: none) {
.sidebar-recent-archive-btn,
.sidebar-recent-rename-btn { opacity: 1; }
}
/* Inline rename: the open button steps aside so the editor sits in the row. */
.sidebar-recent-item.hidden { display: none !important; }
.sidebar-recent-rename-input {
flex: 1;
min-width: 0;
padding: 6px 8px;
border: 1px solid #4ABE6E;
border-radius: 6px;
background: rgba(255, 255, 255, .06);
color: #e5e5e5;
font-size: 12px;
line-height: 1.35;
font-family: inherit;
outline: none;
}
.sidebar-recent-rename-input::placeholder { color: #737373; }
.sidebar-account-toggle {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
min-height: 40px;
padding: 6px 8px;
border: 0;
border-radius: 9px;
background: transparent;
color: #f1f5f9;
text-align: left;
cursor: pointer;
transition: background .15s ease;
}
.sidebar-account-toggle:hover,
.sidebar-account-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .07); }
.sidebar-account-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
overflow: hidden;
border-radius: 10px;
background: #20382a;
color: #8ae1a6;
font-size: 14px;
font-weight: 600;
line-height: 1;
}
.sidebar-account-avatar > i { font-size: 15px; }
/* The account avatar is an ![]()
(uploaded picture or a bundled default), not a
letter. The inner slot is a span in the sidebar, so give it the outer disc's
box first; then the image fills whichever sized disc it is dropped into. */
.sidebar-account-avatar > #sidebar-account-avatar {
display: block;
width: 100%;
height: 100%;
}
.user-avatar {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar-account-toggle > .sidebar-account-avatar {
width: 28px;
height: 28px;
border-radius: 9px;
font-size: 13px;
}
.sidebar-account-toggle > .sidebar-account-avatar > i { font-size: 13px; }
.sidebar-account-copy {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.sidebar-account-name,
.sidebar-account-subtitle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-account-name { font-size: 13px; font-weight: 500; line-height: 20px; }
.sidebar-account-subtitle { color: #969da5; font-size: 11px; line-height: 1.5; }
/* Keep the compact trigger on one line. Identity details remain in its native
tooltip, accessible name, and the expanded account menu. */
.sidebar-account-toggle .sidebar-account-subtitle {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sidebar-account-subtitle:empty { display: none; }
.sidebar-account-chevron { flex-shrink: 0; color: #929aa3; opacity: .7; transition: opacity .15s ease; }
.sidebar-account-toggle:is(:hover, [aria-expanded="true"]) .sidebar-account-chevron { opacity: 1; }
.sidebar-account-menu {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 4px);
z-index: 70;
max-height: min(360px, calc(100vh - 128px));
max-height: min(360px, calc(100dvh - 128px));
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid #363b39;
border-radius: 14px;
background: #1b1e1c;
color: #e8eee9;
box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
transform-origin: bottom left;
animation: accountMenuIn .14s ease-out;
}
@keyframes accountMenuIn {
from { opacity: 0; transform: translateY(4px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.sidebar-account-menu.hidden,
.sidebar-account-footer .hidden { display: none; }
.account-menu-identity {
display: flex;
align-items: center;
gap: 10px;
margin: 0 4px 4px;
padding: 10px 4px 12px;
border-bottom: 1px solid #363b39;
}
.account-menu-identity-copy { min-width: 0; flex: 1; }
.account-menu-avatar { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
.account-menu-name,
.account-menu-username,
.account-menu-status { margin: 0; overflow-wrap: anywhere; }
.account-menu-name { font-size: 13px; font-weight: 600; line-height: 1.5; }
.account-menu-username { margin-top: 2px; color: #a8b0aa; font-size: 11px; line-height: 1.5; }
.account-menu-status { padding: 9px 10px; color: #bdc5bf; font-size: 12px; line-height: 1.6; }
.account-menu-group { margin-bottom: 4px; padding-bottom: 5px; border-bottom: 1px solid #363b39; }
.account-menu-action,
.account-menu-version a {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 36px;
padding: 8px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: #e8eee9;
font-size: 13px;
line-height: 20px;
text-align: left;
overflow-wrap: anywhere;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.account-menu-action > span { min-width: 0; }
.account-menu-icon,
.account-menu-trailing {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.account-menu-icon { color: #a8b0aa; }
.account-menu-trailing { width: 13px; height: 13px; margin-left: auto; color: #a8b0aa; }
.account-menu-action:hover:not(:disabled),
.account-menu-version a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.account-menu-action:hover:not(:disabled) .account-menu-icon { color: inherit; }
.account-menu-logout:hover:not(:disabled) { background: #492c35; color: #fca5a5; }
.account-menu-action:disabled { opacity: .55; cursor: wait; }
.account-menu-version { position: relative; margin-top: 5px; padding-top: 5px; border-top: 1px solid #363b39; }
.account-menu-version a { min-height: 28px; padding: 4px 30px 4px 10px; color: #a8b0aa; font-size: 11px; line-height: 20px; }
.account-menu-version > svg { position: absolute; right: 10px; top: calc(50% + 2.5px); transform: translateY(-50%); pointer-events: none; }
/* ---- Personal resources inside the account panel -------------------------
The five member entries were moved here (change
move-personal-menu-to-account) so the workbench and the console share one
host. Group titles are labels, not disclosures: the entries below them are
directly actionable. */
.account-menu-group-title {
margin: 2px 4px 4px;
padding: 0 6px;
color: #8d968f;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
line-height: 1.6;
}
.account-menu-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.account-menu-sheet-head { display: none; }
.account-menu-sheet .account-menu-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 4px 6px;
padding: 2px 4px 8px;
border-bottom: 1px solid #363b39;
}
.account-menu-sheet-title { margin: 0; color: #e8eee9; font-size: 14px; font-weight: 600; }
.account-menu-sheet-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 8px;
background: transparent;
color: #a8b0aa;
cursor: pointer;
}
.account-menu-sheet-close:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.account-menu-sheet .hidden { display: none; }
.account-menu-backdrop {
position: fixed;
inset: 0;
z-index: 75;
background: rgba(0, 0, 0, .45);
touch-action: none;
}
.account-menu-backdrop.hidden { display: none; }
body.account-menu-sheet-open { overflow: hidden; }
@keyframes accountMenuSheetIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile (below the existing sidebar breakpoint, lg: 1024px): the same panel DOM
is moved to a fixed bottom sheet outside the transformed sidebar, sized from
the available height and internally scrollable so the last entry stays
reachable in short viewports, landscape and at large text sizes. */
@media (max-width: 1023.98px) {
.sidebar-account-menu.account-menu-sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
width: auto;
max-height: min(80vh, 80dvh);
padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
border-radius: 16px 16px 0 0;
transform-origin: bottom center;
animation: accountMenuSheetIn .18s ease-out;
}
.account-menu-sheet .account-menu-action:focus-visible,
.account-menu-sheet .account-menu-sheet-close:focus-visible { outline-offset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.sidebar-account-menu.account-menu-sheet { animation: none; }
}
.sidebar-account-toggle:focus-visible,
.account-menu-action:focus-visible,
.account-menu-version a:focus-visible { outline: 2px solid #74d895; outline-offset: -3px; }
@media (pointer: coarse) {
.sidebar-account-toggle, .account-menu-action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.sidebar-account-menu { animation: none; }
.sidebar-account-toggle, .sidebar-account-chevron,
.account-menu-action, .account-menu-version a { transition: none; }
}
/* Read-only account profile drawer. */
.account-field-status {
margin: 0 0 10px;
padding: 8px 10px;
border-radius: 7px;
font-size: 12px;
line-height: 1.5;
background: rgba(255, 255, 255, .06);
color: #bdc5bf;
}
.account-field-status.error { color: #f87171; }
/* Groups breathe more than the rows inside them ("loose between, tight
within"): the content column owns the group gap, the grid owns the row gap. */
.account-profile-content { display: flex; flex-direction: column; gap: 24px; }
.account-profile-section { min-width: 0; }
.account-profile-subtitle {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
color: #475569;
}
/* One grid per group, not per row: rows dissolve into it via `display:
contents`, so every label shares a single right edge and every value starts
on the same vertical line no matter how wide an individual label is. */
.account-profile-grid {
--account-profile-label-w: 96px;
display: grid;
grid-template-columns: var(--account-profile-label-w) minmax(0, 1fr);
column-gap: 14px;
row-gap: 9px;
align-items: center;
margin: 0;
font-size: 13px;
line-height: 1.5;
}
/* Each field is a labelled row; the value cell holds either the read-only text
or (in edit mode) an input. */
.account-profile-row { display: contents; }
.account-profile-row dt { color: #666; text-align: right; white-space: nowrap; }
.account-profile-row dd { margin: 0; color: #333; overflow-wrap: anywhere; min-width: 0; }
.account-profile-row dd.muted { color: #999; font-style: italic; }
/* Identity roles read as tags: a tinted, rounded chip beats plain text. */
.account-profile-chip {
display: inline-block;
padding: 1px 10px;
border: 1px solid #cdead8;
border-radius: 999px;
background: #e8f5ec;
color: #1f7a45;
font-size: 12px;
line-height: 1.7;
vertical-align: middle;
}
.account-profile-chip + .account-profile-chip { margin-left: 6px; }
/* The editable input cell is hidden unless the row is in edit mode. */
.account-profile-edit { display: none; }
.account-profile-row.editing .account-profile-edit { display: block; }
.account-profile-row.editing .account-profile-read { display: none; }
.account-profile-edit .account-field-input { padding: 7px 11px; }
/* Profile hero: avatar disc + name/username + edit action. */
.account-profile-hero {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px 4px;
}
/* The edit indicator and the file input are siblings of the avatar button, not
part of its innerHTML: the disc is fully re-rendered on every profile load,
and anything nested inside it would be deleted by that repaint. */
.account-profile-avatar-wrap {
position: relative;
flex: none;
line-height: 0;
/* A double-click gesture must not select surrounding text. */
user-select: none;
-webkit-user-select: none;
}
.account-profile-avatar {
flex: none;
width: 64px;
height: 64px;
border-radius: 50%;
background: #eef1f4;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #334155;
}
.account-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Never let the disc be dragged out of the dialog mid double-click. */
-webkit-user-drag: none;
}
.account-profile-avatar-initial {
font-size: 24px;
font-weight: 600;
}
.account-profile-avatar-btn {
cursor: pointer;
border: none;
padding: 0;
}
.account-profile-avatar-btn:hover { box-shadow: 0 0 0 3px rgba(116, 216, 149, .3); }
.account-profile-avatar-btn:focus-visible { outline: 2px solid #74d895; outline-offset: 2px; }
.account-profile-avatar.is-uploading { opacity: .6; pointer-events: none; }
/* The disc only reacts to a double-click, so the badge has to carry the
affordance: it brightens while the pointer or keyboard focus is on the disc. */
.account-profile-avatar-wrap:hover .account-profile-avatar-edit,
.account-profile-avatar-wrap:focus-within .account-profile-avatar-edit { background: #1f7a45; }
.account-profile-avatar-edit {
position: absolute;
right: -2px;
bottom: -2px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
border-radius: 50%;
background: #26884b;
color: #fff;
font-size: 10px;
line-height: 1;
pointer-events: none;
}
.account-profile-hero-copy { min-width: 0; flex: 1; }
.account-profile-hero-name {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #1e293b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-profile-hero-username {
margin: 3px 0 0;
font-size: 13px;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-profile-edit-btn { flex: none; }
/* The title bar is bolder and separated from the content by a hairline. */
#account-profile-drawer .agent-modal-head {
padding-bottom: 16px;
border-bottom: 1px solid #eef1f4;
}
#account-profile-drawer .agent-modal-title { font-weight: 700; }
#account-profile-drawer .agent-modal-body { padding-top: 10px; }
/* Dark theme keeps the previous palette; the light baseline above carries the
readable #666/#333 that the drawer previously lacked. */
.dark .account-profile-subtitle { color: #969da5; }
.dark .account-profile-row dt { color: #969da5; }
.dark .account-profile-row dd { color: #e8eee9; }
.dark .account-profile-row dd.muted { color: #bdc5bf; }
.dark .account-profile-chip {
border-color: rgba(116, 216, 149, .28);
background: rgba(116, 216, 149, .14);
color: #8ae1a6;
}
.dark .account-profile-avatar { background: rgba(255, 255, 255, .08); color: #e8eee9; }
.dark .account-profile-avatar-edit { border-color: #1A1A1A; }
.dark .account-profile-hero-name { color: #e8eee9; }
.dark .account-profile-hero-username { color: #969da5; }
.dark #account-profile-drawer .agent-modal-head { border-bottom-color: rgba(255, 255, 255, .08); }
@media (max-width: 480px) {
.account-profile-grid { --account-profile-label-w: 72px; }
}
/* Change-password modal fields. */
.account-password-note,
.account-prefs-note {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.5;
color: #969da5;
}
.account-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.account-field label { font-size: 12px; color: #969da5; }
.account-field-input {
width: 100%;
padding: 9px 11px;
border: 1px solid #dde3e1;
border-radius: 7px;
background: #f6f8f7;
color: #1e293b;
font-size: 14px;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.account-field-input:hover { border-color: #b8c2be; }
.account-field-input:focus {
outline: none;
border-color: #74d895;
box-shadow: 0 0 0 3px rgba(116, 216, 149, .18);
}
.account-field-input:focus-visible { outline: 2px solid #74d895; outline-offset: -2px; }
.account-field-input.invalid {
border-color: #f87171;
box-shadow: 0 0 0 3px rgba(248, 113, 113, .15);
}
.account-field-error {
margin: 4px 0 0;
font-size: 11px;
color: #f87171;
min-height: 0;
}
.dark .account-field-input {
border-color: #3a413c;
background: #20241f;
color: #e8eee9;
}
.dark .account-field-input:hover { border-color: #4d564f; }
.dark .account-field-input:focus { border-color: #74d895; }
/* Preferences modal (theme + language, browser-local). */
.account-prefs-section { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.account-prefs-label { flex: 0 0 auto; min-width: 64px; font-size: 13px; color: #e8eee9; }
.account-prefs-options { display: flex; flex-wrap: wrap; gap: 8px; }
.account-prefs-option {
padding: 6px 12px;
border: 1px solid #363b39;
border-radius: 7px;
background: #121412;
color: #e8eee9;
font-size: 13px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.account-prefs-option:hover { background: rgba(255, 255, 255, .06); }
.account-prefs-option.active { background: #20382a; border-color: #3f7a56; color: #8ae1a6; }
/* Shared modal head + close button (reused by the account dialogs). */
.agent-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 22px 24px 4px;
}
.agent-modal-head .agent-modal-title { padding: 0; }
.agent-modal-close {
flex: 0 0 auto;
width: 30px;
height: 30px;
border: 0;
border-radius: 7px;
background: transparent;
color: #bdc5bf;
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.agent-modal-close:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.agent-modal-close:focus-visible { outline: 2px solid #74d895; outline-offset: -3px; }
.dark .agent-modal-close { color: #94a3b8; }
.auth-check-panel { text-align: center; font-size: 14px; line-height: 1.6; color: #64748b; }
.dark .auth-check-panel { color: #94a3b8; }
.auth-check-retry {
margin-top: 16px;
padding: 10px 20px;
border: 0;
border-radius: 9px;
background: #228547;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.auth-check-retry:hover:not(:disabled) { background: #1c6b3b; }
.auth-check-retry:focus-visible { outline: 2px solid #35a85b; outline-offset: 3px; }
.auth-check-retry:disabled { opacity: .55; cursor: wait; }
/* =====================================================================
Login overlay (styled after the oneagent login hero/panel).
The login page is a fixed, branded composition: a full-bleed background
image, a left hero headline, and a frosted-glass login panel on the right.
These rules are independent of the web appearance palette (see
appearance.css, which leaves .login-hero to this dark design on purpose).
===================================================================== */
#login-overlay {
background-color: #0F1114;
}
/* Keep the login page pinned to the dark hero design regardless of palette,
so a light palette cannot wash out the branded login screen. */
#login-overlay { color-scheme: dark; }
.login-hero-text { color: #fff; }
.login-hero-title {
text-shadow: 0 8px 32px rgba(0, 0, 0, .55);
color: #ffffff;
}
.login-hero-title .brand-ai { color: #5cd7ff; }
.login-hero-sub {
color: rgba(255, 255, 255, .92);
text-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
/* Login panel container */
.login-panel {
position: relative;
width: 100%;
max-width: 400px;
padding: 40px;
background: rgba(15, 23, 42, 0.78);
border: 1px solid rgba(53, 168, 91, 0.40);
border-radius: 24px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 0 50px rgba(53, 168, 91, 0.28),
inset 0 0 30px rgba(53, 168, 91, 0.05);
overflow: hidden;
color: #ffffff;
animation: loginPanelIn 0.6s ease-out both;
}
/* Auth check gate inside the dark hero panel needs lighter text than the
light-theme default so it stays legible over the frosted glass. */
.login-hero .auth-check-panel { color: #a8c7e8; }
.login-hero .auth-check-message { color: #a8c7e8; }
@keyframes loginPanelIn {
from {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Scan line moving top to bottom across the panel */
.login-scan-line {
position: absolute;
left: -10%;
width: 120%;
height: 3px;
background: linear-gradient(90deg, transparent, #4ABE6E, transparent);
box-shadow: 0 0 14px #4ABE6E, 0 0 30px rgba(53, 168, 91, 0.45);
animation: loginScan 4s linear infinite;
pointer-events: none;
opacity: 0.85;
}
@keyframes loginScan {
from { top: -5%; }
to { top: 105%; }
}
/* Logo inside login panel */
.login-logo {
width: 64px;
height: 64px;
object-fit: contain;
border-radius: 16px;
margin: 0 auto 16px;
display: block;
filter: drop-shadow(0 0 12px rgba(53, 168, 91, 0.35));
}
.login-title {
text-align: center;
font-size: 26px;
font-weight: 700;
color: #ffffff;
letter-spacing: 1px;
margin-bottom: 4px;
}
.login-title .brand-ai { color: #5cd7ff; margin-left: 3px; letter-spacing: -.025em; }
.login-tip {
text-align: center;
color: #a8c7e8;
font-size: 13px;
margin: 12px 0 32px;
}
/* Form inputs */
.login-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.login-input {
width: 100%;
height: 52px;
padding: 0 18px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 12px;
color: #ffffff;
font-size: 14px;
outline: none;
transition: all 0.2s ease;
}
.login-input::placeholder {
color: #94A3B8;
}
.login-input:focus {
border-color: #4ABE6E;
box-shadow: 0 0 0 3px rgba(53, 168, 91, 0.25);
}
/* Tenant select reuses the glass field style */
.login-select {
appearance: none;
-webkit-appearance: none;
height: 46px;
padding-left: 14px;
cursor: pointer;
}
.login-select option { background: #10192b; color: #fff; }
.login-field-label {
display: block;
color: #a8c7e8;
font-size: 13px;
margin-bottom: 6px;
}
/* Password visibility toggle */
.login-toggle-pwd {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #94A3B8;
background: transparent;
border: none;
cursor: pointer;
transition: color 0.15s ease;
}
.login-toggle-pwd:hover {
color: #4ABE6E;
}
/* Error message */
.login-error {
font-size: 13px;
color: #f87171;
margin-top: -6px;
text-align: center;
}
/* Login button */
.login-btn {
width: 100%;
height: 52px;
border: none;
border-radius: 12px;
background: linear-gradient(90deg, #228547, #35A85B);
color: #ffffff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 20px rgba(53, 168, 91, 0.35);
}
.login-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 26px rgba(53, 168, 91, 0.45);
}
.login-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Responsive adjustments for login panel */
@media (max-width: 640px) {
.login-panel {
padding: 28px 22px;
border-radius: 20px;
}
.login-title {
font-size: 22px;
}
.login-tip {
margin-bottom: 24px;
}
}
/* Session History (workbench page) */
.history-view {
--history-surface: #fff;
--history-border: #e6e9ec;
--history-text: #26333d;
--history-muted: #7b8792;
--history-hover: #f7f9f8;
--history-selected: #edf8f0;
--history-green: #26884b;
min-height: 0;
overflow: hidden;
}
.dark .history-view {
--history-surface: #1a1d1b;
--history-border: #303733;
--history-text: #e3eae5;
--history-muted: #96a39a;
--history-hover: #232a25;
--history-selected: #21372a;
--history-green: #69ce8c;
}
.history-content {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 30px 30px 28px;
box-sizing: border-box;
}
.history-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
flex-shrink: 0;
margin-bottom: 24px;
}
.history-heading { flex: 1 1 200px; min-width: 0; max-width: 320px; }
.history-heading h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -.025em;
color: var(--history-text);
}
.history-heading p {
margin: 5px 0 0;
font-size: 13px;
line-height: 1.6;
color: var(--history-muted);
}
.history-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: auto;
}
.session-panel-new-wrap { position: relative; flex-shrink: 0; }
.history-new-btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid transparent;
background: #298e4f;
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
flex-shrink: 0;
white-space: nowrap;
}
.history-new-btn:hover {
background: #227c44;
}
.dark .history-new-btn {
background: #69ce8c;
color: #102e1b;
}
.dark .history-new-btn:hover {
background: #7ed99d;
}
.history-refresh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: var(--history-muted);
font-size: 14px;
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.history-refresh-btn:hover {
color: var(--history-text);
background: var(--history-surface);
border-color: var(--history-border);
}
.history-search {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 320px;
min-width: 0;
max-width: 420px;
min-height: 42px;
padding: 0 10px 0 14px;
border: 1px solid var(--history-border);
border-radius: 9px;
background: var(--history-surface);
color: var(--history-muted);
transition: border-color .15s, box-shadow .15s;
}
.history-search:focus-within {
border-color: var(--history-green);
box-shadow: 0 0 0 3px rgba(74, 190, 110, .12);
}
.history-search > i { flex-shrink: 0; font-size: 13px; }
.history-search-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.history-search input {
flex: 1;
width: 100%;
min-width: 0;
min-height: 40px;
padding: 8px 0;
border: 0;
outline: none;
background: transparent;
color: var(--history-text);
font-size: 13px;
line-height: 1.5;
appearance: none;
}
.history-search input::placeholder { color: var(--history-muted); opacity: 1; }
.history-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.history-search-clear {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--history-muted);
cursor: pointer;
}
.history-search-clear.hidden { display: none; }
.history-search-clear:hover { color: var(--history-text); background: var(--history-hover); }
.history-search-summary {
flex-shrink: 0;
min-width: 0;
margin: -12px 0 12px;
font-size: 12px;
line-height: 1.5;
color: var(--history-muted);
text-align: left;
overflow-wrap: anywhere;
}
.history-search-summary:empty { display: none; }
.history-status {
flex-shrink: 0;
margin: 0 0 16px;
padding: 16px 18px;
border: 1px solid var(--history-border);
border-radius: 9px;
background: var(--history-surface);
font-size: 13px;
line-height: 1.6;
color: var(--history-muted);
}
.history-status-hidden { display: none !important; }
.history-status-error { color: #d9534f; }
.dark .history-status-error { color: #f3a8a4; }
.history-status-actions {
margin-left: 8px;
padding: 3px 8px;
border-radius: 5px;
color: var(--history-green);
text-decoration: underline;
text-underline-offset: 3px;
}
.history-view button:focus-visible,
.history-view .session-group-project:focus-visible,
.session-action-menu-item:focus-visible {
outline: 2px solid #35a45b;
outline-offset: 3px;
}
.dark .history-view button:focus-visible,
.dark .history-view .session-group-project:focus-visible,
.dark .session-action-menu-item:focus-visible {
outline-color: #7ed99d;
}
.new-chat-caret { margin-left: auto; font-size: 10px; opacity: .7; }
.new-chat-menu {
position: absolute; left: 12px; right: 12px; top: calc(100% - 2px);
z-index: 70; padding: 6px;
background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
box-shadow: 0 16px 40px -12px rgba(0,0,0,.28);
}
.dark .new-chat-menu { background: #1A1A1A; border-color: rgba(255,255,255,.1); }
.new-chat-menu.hidden { display: none; }
.history-actions .new-chat-menu {
left: auto;
right: 0;
top: calc(100% + 8px);
min-width: 210px;
max-width: min(320px, calc(100vw - 40px));
}
.new-chat-section { display: flex; flex-direction: column; }
.new-chat-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 9px; border-radius: 8px;
font-size: 13px; color: #334155; cursor: pointer; background: none; border: none;
text-align: left; width: 100%;
}
.new-chat-item:hover { background: #EDFDF3; color: #228547; }
.dark .new-chat-item { color: #cbd5e1; }
.dark .new-chat-item:hover { background: rgba(74,190,110,.14); color: #6EE7A0; }
.new-chat-item .agent-avatar { flex-shrink: 0; }
.new-chat-sep { height: 1px; background: #f1f5f9; margin: 5px 4px; }
.dark .new-chat-sep { background: rgba(255,255,255,.07); }
.new-chat-team-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: #EDFDF3; color: #17803d; font-size: 11px; flex-shrink: 0;
}
.dark .new-chat-team-ico { background: rgba(74,190,110,.16); color: #6EE7A0; }
/* Team-chat picker rows in the modal */
.team-chat-list-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.team-chat-list-label {
font-size: 12px; font-weight: 600; color: #94a3b8;
text-transform: uppercase; letter-spacing: 0.03em;
}
.team-chat-list { display: flex; flex-direction: column; gap: 6px; }
.team-chat-row {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; border-radius: 10px;
border: 1px solid #e2e8f0; background: #f8fafc;
cursor: pointer; text-align: left; width: 100%;
transition: border-color .15s, background .15s;
}
.team-chat-row .agent-avatar { flex-shrink: 0; }
.team-chat-row:hover { border-color: #cbd5e1; }
.team-chat-row.on { border-color: #4ABE6E; background: #EDFDF3; }
.dark .team-chat-row { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.dark .team-chat-row.on { border-color: #4ABE6E; background: rgba(74,190,110,.12); }
.team-chat-name { font-size: 14px; color: #1e293b; }
.dark .team-chat-name { color: #f1f5f9; }
.team-chat-owner {
font-size: 10px; padding: 1px 7px; border-radius: 999px;
background: #4ABE6E; color: #fff; font-weight: 500;
}
.team-chat-check { margin-left: auto; color: #cbd5e1; font-size: 16px; }
.team-chat-row.on .team-chat-check { color: #4ABE6E; }
/* Session List */
.session-list {
flex: 0 1 auto;
min-width: 0;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 6px 14px 12px;
width: 100%;
border: 1px solid var(--history-border);
border-radius: 12px;
background: var(--history-surface);
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.session-list:empty { display: none; }
.session-list:hover,
.session-list:focus-within { scrollbar-color: #c4cdc7 transparent; }
.dark .session-list:hover,
.dark .session-list:focus-within { scrollbar-color: #4b5c50 transparent; }
.session-list::-webkit-scrollbar { width: 4px; background: transparent; }
.session-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.session-list:hover::-webkit-scrollbar-thumb,
.session-list:focus-within::-webkit-scrollbar-thumb { background: #c4cdc7; }
.dark .session-list:hover::-webkit-scrollbar-thumb,
.dark .session-list:focus-within::-webkit-scrollbar-thumb { background: #4b5c50; }
.session-group-label {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 12px 8px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--history-muted);
}
/* Project / pinned headers carry an icon; date headers stay plain text. */
.session-group-label i { font-size: 10px; flex-shrink: 0; }
.session-group-label span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.session-item + .session-group-label {
margin-top: 8px;
border-top: 1px solid var(--history-border);
}
/* Collapsible, draggable project group header. Deliberately styled unlike the
date headers and session rows: normal-case, larger and darker, so a project
reads as a real section title rather than a faint label. */
.session-group-project {
position: relative;
cursor: pointer;
border-radius: 7px;
margin-top: 4px;
padding: 10px 12px;
transition: background 0.12s ease;
user-select: none;
text-transform: none;
letter-spacing: 0;
font-size: 12px;
font-weight: 600;
color: var(--history-muted);
}
.session-group-project:hover { background: var(--history-hover); }
.session-group-project.dragging { opacity: 0.5; }
.session-group-project.drop-target { box-shadow: inset 0 2px 0 0 #4ABE6E; }
.session-group-caret {
transition: transform 0.15s ease;
font-size: 9px !important;
width: 10px;
text-align: center;
opacity: 0.6;
}
.session-group-caret.collapsed { transform: rotate(-90deg); }
.session-group-icon { font-size: 11px !important; }
/* Name takes the remaining width (and truncates), which pushes the count to a
consistent right edge across projects and the default space. */
.session-group-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: none;
}
/* Count always sits flush right (margin-left:auto), so it lines up across every
project and the default space regardless of name length. */
.session-group-count {
margin-left: auto;
flex-shrink: 0;
font-size: 11px;
font-weight: 500;
color: var(--history-muted);
opacity: 0.8;
}
/* Actions overlay the right edge (absolute, out of flow) so they never shift
the count's position; they only appear on hover, replacing the count. */
.session-group-actions {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
gap: 2px;
opacity: 0;
transition: opacity 0.12s ease;
}
.session-group-project:hover .session-group-actions,
.session-group-project:focus-within .session-group-actions { opacity: 1; }
.session-group-project:hover .session-group-count,
.session-group-project:focus-within .session-group-count { visibility: hidden; }
.session-group-action {
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
padding: 3px 5px;
border-radius: 5px;
font-size: 10px;
line-height: 1;
}
.session-group-action:hover { background: rgba(74, 190, 110, 0.16); color: #35A85B; }
.dark .session-group-action:hover { background: rgba(74, 190, 110, 0.2); color: #6EE7A0; }
.prompt-modal-input {
width: 100%;
margin: 14px 0 4px;
padding: 9px 12px;
border: 1px solid #E2E8F0;
border-radius: 9px;
font-size: 14px;
color: #1e293b;
background: #fff;
outline: none;
box-sizing: border-box;
}
.prompt-modal-input:focus { border-color: #4ABE6E; }
.dark .prompt-modal-input {
background: #1A1A1A;
border-color: rgba(255, 255, 255, 0.12);
color: #e2e8f0;
}
.session-empty {
padding: 40px 18px;
text-align: center;
font-size: 13px;
color: var(--history-muted);
}
.session-item {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
min-height: 68px;
padding: 10px 10px 10px 12px;
margin: 2px 0;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
color: var(--history-text);
font-size: 13px;
position: relative;
}
.session-item:hover {
background: var(--history-hover);
}
.session-item.active {
background: var(--history-selected);
}
.session-row-main {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
min-height: 46px;
padding: 0;
border: 0;
border-radius: 5px;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
.session-row-main > .agent-avatar,
.session-row-main > .session-faces { flex-shrink: 0; }
.session-copy {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 4px;
}
.session-title-line {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.session-current-label {
flex-shrink: 0;
color: var(--history-green);
font-size: 10px;
font-weight: 500;
white-space: nowrap;
}
.session-meta {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--history-muted);
font-size: 11px;
line-height: 1.5;
}
.session-time {
flex-shrink: 0;
color: var(--history-muted);
font-size: 11px;
line-height: 1.5;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.session-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 34px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--history-muted);
font-size: 16px;
cursor: pointer;
transition: color .15s, background .15s;
}
.session-more-btn:hover,
.session-more-btn[aria-expanded="true"] {
color: var(--history-text);
background: var(--history-border);
}
/* Appended to body so the menu stays visible beside the scrolling list. */
.session-action-menu {
position: fixed;
z-index: 90;
min-width: 156px;
max-width: calc(100vw - 24px);
max-height: calc(100dvh - 24px);
overflow-y: auto;
padding: 5px;
border: 1px solid #e6e9ec;
border-radius: 9px;
background: #fff;
box-shadow: 0 8px 28px rgba(29, 47, 36, .13);
}
.dark .session-action-menu {
border-color: #303733;
background: #1a1d1b;
box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.session-action-menu-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
min-height: 36px;
padding: 8px 10px;
border: 0;
border-radius: 5px;
background: transparent;
color: #37463c;
font-size: 12px;
line-height: 1.5;
text-align: left;
cursor: pointer;
}
.session-action-menu-item i { width: 14px; flex-shrink: 0; text-align: center; }
.session-action-menu-item:hover { background: #f1f6f3; }
.session-action-menu-item.danger { color: #b95252; }
.session-action-menu-item.danger:hover { background: #fdf2f2; }
.dark .session-action-menu-item { color: #e3eae5; }
.dark .session-action-menu-item:hover { background: #29372e; }
.dark .session-action-menu-item.danger { color: #f09c9c; }
.dark .session-action-menu-item.danger:hover { background: #422a2a; }
.session-action-menu-item:focus-visible { outline-offset: -2px; }
.session-action-menu-item:disabled {
opacity: .45;
cursor: default;
}
.session-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border: 1px solid var(--history-border);
border-radius: 9px;
background: var(--history-surface);
font-size: 14px;
color: var(--history-muted);
text-align: center;
}
.session-item.active .session-icon { color: var(--history-green); }
.session-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
.session-item-indent { padding-left: 28px; }
.session-item.pinned .session-icon { color: var(--history-green); }
.session-item.pinned .session-icon::before { transform: rotate(45deg); }
/* Inline title editor */
.session-title-input {
flex: 1;
min-width: 0;
font-size: 13px;
font-family: inherit;
color: #111827;
background: #ffffff;
border: 1px solid #4ABE6E;
border-radius: 6px;
padding: 2px 6px;
outline: none;
}
.dark .session-title-input {
color: #e5e5e5;
background: rgba(255, 255, 255, 0.06);
border-color: #4ABE6E;
}
@media (max-width: 900px) {
.history-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
}
.history-heading { grid-column: 1; grid-row: 1; max-width: none; }
.history-actions { grid-column: 2; grid-row: 1; }
.history-search { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; }
}
@media (max-width: 768px) {
.history-content { padding: 24px 20px; }
.history-head { align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.history-heading h2 { font-size: 22px; }
.history-search-summary { margin-top: -8px; }
.session-list { padding: 5px 9px 9px; border-radius: 10px; }
.session-item { gap: 10px; }
.session-group-label { padding-right: 9px; padding-left: 9px; }
.session-item-indent { padding-left: 22px; }
}
@media (max-width: 600px) {
.history-content { padding: 20px 14px; }
.history-head { gap: 14px; margin-bottom: 18px; }
.history-search input { font-size: 16px; }
.session-list { padding-right: 7px; padding-left: 7px; }
.session-item { padding-right: 6px; padding-left: 8px; gap: 8px; }
.session-item-indent { padding-left: 16px; }
.session-row-main { gap: 9px; }
.session-icon { width: 30px; height: 32px; font-size: 13px; }
.session-title-line { column-gap: 6px; }
.session-time { font-size: 10px; }
}
@media (max-width: 480px) {
.history-heading p { font-size: 12px; }
.history-actions { gap: 4px; }
.history-new-btn { padding-right: 10px; padding-left: 10px; }
.session-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 8px;
row-gap: 0;
min-height: 76px;
padding-top: 7px;
padding-bottom: 7px;
}
.session-row-main { grid-column: 1; grid-row: 1 / span 2; }
.session-more-btn { grid-column: 2; grid-row: 1; justify-self: center; }
.session-time { grid-column: 2; grid-row: 2; justify-self: center; }
.session-title-line { flex-wrap: wrap; row-gap: 2px; }
.session-title { max-width: 100%; }
.session-current-label { font-size: 9px; }
}
@media (pointer: coarse) {
.history-new-btn,
.history-refresh-btn,
.history-search-clear,
.session-more-btn { min-width: 44px; min-height: 44px; }
.history-search-clear { margin-right: -6px; }
.session-action-menu-item,
.history-actions .new-chat-item { min-height: 44px; }
.session-group-action { min-width: 36px; min-height: 36px; }
.session-group-actions {
position: static;
transform: none;
opacity: 1;
margin-left: 4px;
}
.session-group-project:hover .session-group-count,
.session-group-project:focus-within .session-group-count { visibility: visible; }
.session-title-input { font-size: 16px; }
}
/* Context Divider */
.context-divider {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
color: #9ca3af;
}
.context-divider::before, .context-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #d1d5db, transparent);
}
.dark .context-divider::before, .dark .context-divider::after {
background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
}
.context-divider span {
font-size: 12px;
white-space: nowrap;
color: #9ca3af;
}
/* Confirm Modal */
.confirm-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.2s ease;
}
.confirm-overlay.visible { opacity: 1; }
.confirm-modal {
background: #fff;
border-radius: 14px;
width: 380px;
max-width: 90vw;
padding: 28px 24px 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
transform: scale(0.92);
transition: transform 0.2s ease;
}
.confirm-overlay.visible .confirm-modal { transform: scale(1); }
.dark .confirm-modal {
background: #1e1e1e;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.confirm-title {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 8px;
}
.dark .confirm-title { color: #e5e7eb; }
.confirm-message {
font-size: 14px;
color: #6b7280;
line-height: 1.5;
margin-bottom: 24px;
}
.dark .confirm-message { color: #9ca3af; }
.confirm-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.confirm-btn {
padding: 8px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
transition: all 0.15s ease;
}
.confirm-btn-cancel {
background: #f3f4f6;
color: #374151;
}
.confirm-btn-cancel:hover { background: #e5e7eb; }
.dark .confirm-btn-cancel {
background: rgba(255, 255, 255, 0.08);
color: #d1d5db;
}
.dark .confirm-btn-cancel:hover { background: rgba(255, 255, 255, 0.14); }
.confirm-btn-ok {
background: #ef4444;
color: #fff;
}
.confirm-btn-ok:hover { background: #dc2626; }
/* Archived sessions dialog (reuses the confirm overlay shell) */
.archived-sessions-modal {
width: 520px;
max-width: 92vw;
}
.archived-sessions-body {
max-height: min(50vh, 420px);
overflow-y: auto;
margin: 6px 0 18px;
}
.archived-sessions-status {
padding: 12px 2px;
color: #6b7280;
font-size: 13px;
}
.dark .archived-sessions-status { color: #9ca3af; }
.archived-session-retry {
margin-top: 8px;
padding: 6px 14px;
border: 0;
border-radius: 8px;
background: #f3f4f6;
color: #374151;
font-size: 13px;
cursor: pointer;
}
.dark .archived-session-retry {
background: rgba(255, 255, 255, .08);
color: #d1d5db;
}
.archived-session-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 6px;
border-radius: 8px;
}
.archived-session-row:hover { background: rgba(0, 0, 0, .03); }
.dark .archived-session-row:hover { background: rgba(255, 255, 255, .05); }
.archived-session-copy {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.archived-session-title {
font-size: 13px;
color: #1f2937;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dark .archived-session-title { color: #e5e7eb; }
.archived-session-meta {
font-size: 11px;
color: #9ca3af;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.archived-session-time {
font-size: 11px;
color: #9ca3af;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dark .archived-session-time { color: #6b7280; }
.archived-session-restore {
flex-shrink: 0;
padding: 6px 14px;
border: 0;
border-radius: 8px;
background: #f3f4f6;
color: #374151;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .15s ease;
}
.archived-session-restore:hover { background: #e5e7eb; }
.dark .archived-session-restore {
background: rgba(255, 255, 255, .08);
color: #d1d5db;
}
.dark .archived-session-restore:hover { background: rgba(255, 255, 255, .14); }
/* Menu Groups */
.menu-group-items { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; visibility: hidden; }
.menu-group.open .menu-group-items { max-height: 2000px; transition: max-height 0.35s ease-in; visibility: visible; }
.menu-group .chevron { transition: transform 0.25s ease; }
.menu-group.open .chevron { transform: rotate(90deg); }
/* Admin sidebar: category headers with right-side chevron (reference layout).
The member-side personal group (``[data-nav-shell="workbench"]``) reuses the
same disclosure treatment, so a member's "Mine" group reads like every other
category instead of looking like a bare list. */
:is(.admin-nav-shell, [data-nav-shell="workbench"]) .admin-menu-group {
margin-top: 10px;
}
:is(.admin-nav-shell, [data-nav-shell="workbench"]) .admin-menu-group-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
min-height: 36px;
padding: 8px 12px;
border: 0;
border-radius: 8px;
background: transparent;
color: #8b959f;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
text-align: left;
text-transform: none;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
:is(.admin-nav-shell, [data-nav-shell="workbench"]) .admin-menu-group-toggle:hover {
background: rgba(255, 255, 255, .05);
color: #d4d4d4;
}
:is(.admin-nav-shell, [data-nav-shell="workbench"]) .admin-menu-group-toggle .chevron {
flex-shrink: 0;
font-size: 10px;
color: inherit;
opacity: .75;
transform: rotate(-90deg);
}
:is(.admin-nav-shell, [data-nav-shell="workbench"]) .admin-menu-group.open .admin-menu-group-toggle .chevron {
transform: rotate(0deg);
}
:is(.admin-nav-shell, [data-nav-shell="workbench"]) .admin-menu-group .menu-group-items {
padding-left: 4px;
}
/* View Switching */
.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }
/* Chat view is split horizontally: conversation + workspace panel */
#view-chat.active { flex-direction: row; }
.chat-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
height: 100%;
}
/* Markdown Content */
.msg-content p { margin: 0.5em 0; line-height: 1.7; }
.msg-content p:first-child { margin-top: 0; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content h1, .msg-content h2, .msg-content h3,
.msg-content h4, .msg-content h5, .msg-content h6 {
margin-top: 1.2em; margin-bottom: 0.6em; font-weight: 600; line-height: 1.3;
}
.msg-content h1 { font-size: 1.4em; }
.msg-content h2 { font-size: 1.25em; }
.msg-content h3 { font-size: 1.1em; }
.msg-content ul { margin: 0.5em 0; padding-left: 1.8em; list-style: disc; }
.msg-content ol { margin: 0.5em 0; padding-left: 1.8em; list-style: decimal; }
.msg-content li { margin: 0.25em 0; }
.msg-content pre {
border-radius: 8px; overflow-x: auto; margin: 0.8em 0;
background: #f1f5f9; padding: 1em;
}
.dark .msg-content pre { background: #111111; }
.msg-content code {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
font-size: 0.875em;
}
.msg-content :not(pre) > code {
background: rgba(74, 190, 110, 0.1); color: #1C6B3B;
padding: 2px 6px; border-radius: 4px;
}
.dark .msg-content :not(pre) > code {
background: rgba(74, 190, 110, 0.15); color: #74E9A4;
}
.msg-content pre code { background: transparent; padding: 0; color: inherit; }
.msg-content blockquote {
border-left: 3px solid #4ABE6E; padding: 0.5em 1em;
margin: 0.8em 0; background: rgba(74, 190, 110, 0.05); border-radius: 0 6px 6px 0;
}
.dark .msg-content blockquote { background: rgba(74, 190, 110, 0.08); }
/* Tables scroll sideways inside their own wrapper instead of pushing the
bubble wider than the column (see the table_open rule in createMd). */
.msg-content .table-wrap { max-width: 100%; overflow-x: auto; margin: 0.8em 0; scrollbar-width: thin; }
.msg-content table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
.msg-content .table-wrap > table { margin: 0; }
.msg-content th { white-space: nowrap; }
.msg-content td { overflow-wrap: break-word; }
.msg-content th, .msg-content td {
border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left;
}
.dark .msg-content th, .dark .msg-content td { border-color: rgba(255,255,255,0.1); }
.msg-content th { background: #f1f5f9; font-weight: 600; }
.dark .msg-content th { background: #111111; }
.msg-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }
.msg-content a { color: #35A85B; text-decoration: underline; }
.msg-content a:hover { color: #228547; }
/* Links to workspace files: opened in the preview panel, not a new tab. */
.msg-content a.ws-link {
cursor: pointer;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
/* Overrides for user bubble (white text on green bg) */
.user-bubble.msg-content a { color: #ffffff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.6); }
.user-bubble.msg-content a:hover { color: #e0f5e8 !important; text-decoration-color: #e0f5e8; }
.user-bubble.msg-content :not(pre) > code { background: rgba(255,255,255,0.2); color: #ffffff; }
.msg-content hr { border: none; height: 1px; background: #e2e8f0; margin: 1.2em 0; }
.dark .msg-content hr { background: rgba(255,255,255,0.1); }
/* SSE Streaming cursor */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.sse-streaming::after {
content: '▋';
display: inline-block;
margin-left: 2px;
color: #4ABE6E;
animation: blink 0.9s step-end infinite;
font-size: 0.85em;
vertical-align: middle;
}
/* Agent steps (thinking summaries + tool indicators) */
.agent-steps:empty { display: none; }
.agent-steps:not(:empty) {
margin-bottom: 0.625rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.dark .agent-steps:not(:empty) { border-bottom-color: rgba(255, 255, 255, 0.08); }
.agent-step {
font-size: 0.75rem;
line-height: 1.4;
color: #94a3b8;
margin-bottom: 0.25rem;
}
.agent-step:last-child { margin-bottom: 0; }
/* Thinking step - collapsible */
.agent-thinking-step .thinking-header {
display: flex;
align-items: center;
gap: 0.375rem;
cursor: pointer;
user-select: none;
}
.agent-thinking-step .thinking-header:hover { color: #64748b; }
.dark .agent-thinking-step .thinking-header:hover { color: #cbd5e1; }
.agent-thinking-step .thinking-header i:first-child { font-size: 0.625rem; margin-top: 1px; }
.agent-thinking-step .thinking-chevron {
font-size: 0.5rem;
margin-left: auto;
transition: transform 0.2s ease;
opacity: 0.5;
}
.agent-thinking-step.expanded .thinking-chevron { transform: rotate(90deg); }
.agent-thinking-step .thinking-full {
display: none;
margin-top: 0.375rem;
margin-left: 1rem;
padding: 0.5rem;
background: rgba(0, 0, 0, 0.02);
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.04);
font-size: 0.75rem;
line-height: 1.5;
color: #94a3b8;
max-height: 300px;
overflow-y: auto;
}
.dark .agent-thinking-step .thinking-full {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.04);
}
.agent-thinking-step.expanded .thinking-full { display: block; }
.agent-thinking-step .thinking-full p { margin: 0.25em 0; }
.agent-thinking-step .thinking-full p:first-child { margin-top: 0; }
.agent-thinking-step .thinking-full p:last-child { margin-bottom: 0; }
.agent-thinking-step .thinking-duration {
font-size: 0.625rem;
color: #b0b8c4;
margin-bottom: 0.375rem;
}
/* Streaming reasoning: render as plain pre to avoid expensive markdown
re-parsing on every chunk. Wrap long lines so the bubble width is
respected and use the same font size/color as the rendered version. */
.agent-thinking-step .thinking-stream-pre {
margin: 0;
padding: 0;
background: transparent;
border: 0;
font-family: inherit;
font-size: inherit;
line-height: 1.5;
color: inherit;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
/* Content step - real text output frozen before tool calls */
.agent-content-step {
font-size: 0.875rem;
line-height: 1.6;
color: inherit;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.dark .agent-content-step { border-bottom-color: rgba(255, 255, 255, 0.06); }
.agent-content-step .agent-content-body p { margin: 0.25em 0; }
.agent-content-step .agent-content-body p:first-child { margin-top: 0; }
.agent-content-step .agent-content-body p:last-child { margin-bottom: 0; }
/* Tool step - collapsible */
.agent-tool-step .tool-header {
display: flex;
align-items: center;
gap: 0.375rem;
cursor: pointer;
user-select: none;
padding: 1px 0;
border-radius: 4px;
}
.agent-tool-step .tool-header:hover { color: #64748b; }
.dark .agent-tool-step .tool-header:hover { color: #cbd5e1; }
.agent-tool-step .tool-icon { font-size: 0.625rem; }
.agent-tool-step .tool-chevron {
font-size: 0.5rem;
margin-left: auto;
transition: transform 0.2s ease;
opacity: 0.5;
}
.agent-tool-step.expanded .tool-chevron { transform: rotate(90deg); }
.agent-tool-step .tool-time {
font-size: 0.65rem;
opacity: 0.6;
margin-left: 0.25rem;
}
/* Tool detail panel */
.agent-tool-step .tool-detail {
display: none;
margin-top: 0.375rem;
margin-left: 1rem;
padding: 0.5rem;
background: rgba(0, 0, 0, 0.02);
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.dark .agent-tool-step .tool-detail {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.04);
}
.agent-tool-step.expanded .tool-detail { display: block; }
.tool-detail-section { margin-bottom: 0.375rem; }
.tool-detail-section:last-child { margin-bottom: 0; }
.tool-detail-label {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
margin-bottom: 0.125rem;
}
.tool-detail-content {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
font-size: 0.7rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-all;
max-height: 200px;
overflow-y: auto;
margin: 0;
padding: 0.25rem 0;
background: transparent;
color: inherit;
}
.tool-error-text { color: #f87171; }
.tool-live-output:empty { display: none; }
/* Sub agent steps: the tool calls a sub agent made inside one spawn */
.agent-tool-step .tool-substep-count {
font-size: 0.65rem;
opacity: 0.5;
margin-left: 0.25rem;
}
.tool-substeps {
display: flex;
flex-direction: column;
gap: 0.125rem;
max-height: 240px;
overflow-y: auto;
padding: 0.125rem 0;
}
.tool-substep {
display: flex;
align-items: baseline;
gap: 0.375rem;
font-size: 0.7rem;
line-height: 1.6;
min-width: 0;
}
.tool-substep-icon {
font-size: 0.55rem;
opacity: 0.6;
flex-shrink: 0;
}
.tool-substep-failed { color: #f87171; opacity: 0.9; }
.tool-substep-name {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
flex-shrink: 0;
}
.tool-substep-args {
opacity: 0.55;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.tool-substep-time {
margin-left: auto;
padding-left: 0.375rem;
font-size: 0.65rem;
opacity: 0.45;
flex-shrink: 0;
}
/* A tool outcome written for a person, rendered as markdown */
.tool-display-output { display: none; }
.tool-display-output.has-content {
display: block;
font-size: 0.75rem;
line-height: 1.65;
max-height: 240px;
overflow-y: auto;
margin-top: 0.375rem;
padding: 0.375rem 0.5rem;
background: #f1f5f9;
border-radius: 4px;
}
.dark .tool-display-output.has-content {
background: #111111;
}
.tool-display-output h3 {
font-size: 0.75rem;
font-weight: 600;
margin: 0.5rem 0 0.25rem;
opacity: 0.85;
}
.tool-display-output h3:first-child { margin-top: 0; }
.tool-display-output p { margin: 0.25rem 0; }
.tool-display-output p:first-of-type { margin-top: 0; }
.tool-display-output p:last-child { margin-bottom: 0; }
.tool-display-output ul,
.tool-display-output ol { margin: 0.25rem 0; padding-left: 1.1rem; }
.tool-display-output hr {
margin: 0.5rem 0;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.dark .tool-display-output hr { border-top-color: rgba(255, 255, 255, 0.08); }
.tool-display-output code {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
font-size: 0.7rem;
}
.tool-streaming .tool-live-output:not(:empty)::after {
content: ' ';
display: inline-block;
width: 0.45em;
height: 1em;
margin-left: 0.15em;
vertical-align: -0.15em;
background: currentColor;
animation: tool-cursor-blink 1s steps(1) infinite;
}
@keyframes tool-cursor-blink { 50% { opacity: 0; } }
/* Log level highlighting */
.log-line { display: block; }
.log-line-debug { color: #94a3b8; }
.log-line-info { background-color: rgba(59, 130, 246, 0.08); }
.log-line-warning { background-color: rgba(234, 179, 8, 0.15); color: #fde68a; }
.log-line-error { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.log-line-critical { background-color: rgba(239, 68, 68, 0.35); color: #ff4444; font-weight: bold; }
/* Tool failed state */
.agent-tool-step.tool-failed .tool-name { color: #f87171; }
/* Config form controls */
#view-config input[type="text"],
#view-config input[type="number"],
#view-config input[type="password"] {
height: 40px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#view-config input:focus {
border-color: #4ABE6E;
box-shadow: 0 0 0 3px rgba(74, 190, 110, 0.12);
}
#view-config input[type="text"]:hover,
#view-config input[type="number"]:hover,
#view-config input[type="password"]:hover {
border-color: #94a3b8;
}
.dark #view-config input[type="text"]:hover,
.dark #view-config input[type="number"]:hover,
.dark #view-config input[type="password"]:hover {
border-color: #64748b;
}
/* Custom dropdown */
.cfg-dropdown {
position: relative;
outline: none;
}
.cfg-dropdown-selected {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 0.75rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
background: #f8fafc;
font-size: 0.875rem;
color: #1e293b;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
user-select: none;
}
/* Read-only dropdown: still shows the effective value, but reads as a field of
record rather than a control. Used where another layer owns the setting. */
.cfg-dropdown.cfg-dropdown-readonly .cfg-dropdown-selected {
cursor: default;
background: transparent;
border-style: dashed;
color: #64748b;
}
.cfg-dropdown.cfg-dropdown-readonly .cfg-dropdown-arrow { opacity: 0.35; }
.dark .cfg-dropdown.cfg-dropdown-readonly .cfg-dropdown-selected {
color: #94a3b8;
background: transparent;
}
.dark .cfg-dropdown-selected {
border-color: #475569;
background: rgba(255, 255, 255, 0.05);
color: #f1f5f9;
}
.cfg-dropdown-selected:hover { border-color: #94a3b8; }
.dark .cfg-dropdown-selected:hover { border-color: #64748b; }
/* A compact trigger for header rows, so the picker lines up with the pill
tabs beside it instead of towering over them. */
.cfg-dropdown-sm .cfg-dropdown-selected {
height: 32px; padding: 0 0.5rem; font-size: 0.8125rem;
}
.cfg-dropdown-sm .cfg-dropdown-face .agent-avatar { width: 18px; height: 18px; }
/* An even more compact trigger for rows that sit right next to the
agent-seg segmented control (e.g. the core-file picker), so both line up
at the same height instead of the dropdown towering over the tabs. */
.cfg-dropdown-xs .cfg-dropdown-selected {
height: 28px; padding: 0 0.5rem; font-size: 12px; border-radius: 6px;
}
.cfg-dropdown-xs .cfg-dropdown-arrow { font-size: 10px; }
.cfg-dropdown.open .cfg-dropdown-selected,
.cfg-dropdown:focus .cfg-dropdown-selected {
border-color: #4ABE6E;
box-shadow: 0 0 0 3px rgba(74, 190, 110, 0.12);
}
.cfg-dropdown-arrow {
font-size: 0.625rem;
color: #94a3b8;
transition: transform 0.2s ease;
flex-shrink: 0;
margin-left: 0.5rem;
}
.cfg-dropdown.open .cfg-dropdown-arrow { transform: rotate(180deg); }
/* Avatar variant: a face sits left of the label in both the trigger and each
row. The trigger keeps its space-between layout, so face+text are grouped by
letting the text flex and the arrow stay pinned right. */
.cfg-dropdown-avatar .cfg-dropdown-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Groups the trigger's avatar + label on the left so the arrow can sit at the
far right (the selected row uses space-between). */
.cfg-dropdown-value { display: inline-flex; align-items: center; min-width: 0; }
.cfg-dropdown-value .cfg-dropdown-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-dropdown-face {
display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; margin-right: 8px;
}
.cfg-dropdown-face:empty { display: none; }
.cfg-dropdown-face .agent-avatar,
.cfg-dropdown-item-face .agent-avatar { width: 20px; height: 20px; border-radius: 50%; }
.cfg-dropdown-item-face {
display: inline-flex; width: 20px; height: 20px; flex-shrink: 0; margin-right: 8px;
}
.cfg-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 50;
max-height: 240px;
overflow-y: auto;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
background: #ffffff;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
padding: 4px;
}
.dark .cfg-dropdown-menu {
border-color: #334155;
background: #1e1e1e;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
.cfg-dropdown.open .cfg-dropdown-menu { display: block; }
/* When flipped, anchor the menu above the control so it isn't clipped at the
bottom of the viewport (e.g. the last channel's config dropdown). */
.cfg-dropdown.drop-up .cfg-dropdown-menu {
top: auto;
bottom: calc(100% + 4px);
}
.cfg-dropdown-item {
display: flex;
align-items: center;
padding: 8px 10px;
border-radius: 6px;
font-size: 0.875rem;
color: #334155;
cursor: pointer;
transition: background 0.15s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark .cfg-dropdown-item { color: #cbd5e1; }
.cfg-dropdown-item:hover { background: #f1f5f9; }
.dark .cfg-dropdown-item:hover { background: rgba(255, 255, 255, 0.08); }
.cfg-dropdown-item.active {
background: rgba(74, 190, 110, 0.1);
color: #228547;
font-weight: 500;
}
.dark .cfg-dropdown-item.active {
background: rgba(74, 190, 110, 0.15);
color: #74E9A4;
}
/* When an item carries a hint (e.g. brand alias next to a technical model
id), label/hint are split into two spans so the hint sits on the right in
a dim, smaller weight. Without a hint the row stays a plain text node and
uses the default ellipsis behaviour, so no layout regressions for old call
sites. */
.cfg-dropdown-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.cfg-dropdown-hint {
flex-shrink: 0;
margin-left: auto;
padding-left: 12px;
color: #94a3b8;
font-size: 12px;
font-weight: 400;
}
/* Small trailing pill after an avatar option's name, e.g. a "default" marker. */
.cfg-dropdown-badge {
flex-shrink: 0;
margin-left: auto;
padding: 1px 7px;
border-radius: 999px;
background: #f1f5f9;
color: #64748b;
font-size: 11px;
font-weight: 500;
line-height: 1.5;
}
.dark .cfg-dropdown-badge {
background: rgba(255,255,255,.08);
color: #94a3b8;
}
.dark .cfg-dropdown-hint {
color: #64748b;
}
/* Multi-select variant: the trigger shows overlapping avatars of the chosen
members instead of a single face, and each row is a checklist item whose
tick appears only when selected. Selecting a row does NOT close the menu. */
.cfg-dropdown-faces {
display: inline-flex;
flex-shrink: 0;
margin-right: 8px;
}
.cfg-dropdown-faces:empty { display: none; }
.cfg-dropdown-faces .agent-avatar {
width: 18px; height: 18px; border-radius: 50%;
margin-left: -6px;
box-shadow: 0 0 0 2px #ffffff;
}
.cfg-dropdown-faces .agent-avatar:first-child { margin-left: 0; }
.dark .cfg-dropdown-faces .agent-avatar { box-shadow: 0 0 0 2px #1e1e1e; }
.cfg-dropdown-multi .cfg-dropdown-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cfg-dropdown-check.active { font-weight: 500; }
/* "+N" pill trailing the overlapping avatars when the team has more members
than the trigger shows faces for. Sized to sit inline with the 18px faces. */
.cfg-dropdown-more {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 5px;
margin-left: 2px;
border-radius: 999px;
background: #f1f5f9;
color: #64748b;
font-size: 10px;
font-weight: 600;
}
.dark .cfg-dropdown-more { background: rgba(255,255,255,.1); color: #94a3b8; }
.cfg-dropdown-empty {
color: #94a3b8;
cursor: default;
justify-content: center;
font-size: 0.8125rem;
}
.cfg-dropdown-empty:hover { background: transparent; }
.cfg-dropdown-item.active .cfg-dropdown-hint {
/* Tint the hint toward the brand colour on the active row so it doesn't
fight with the highlighted label tone. */
color: rgba(34, 133, 71, 0.65);
}
.dark .cfg-dropdown-item.active .cfg-dropdown-hint {
color: rgba(116, 233, 164, 0.6);
}
/* The active row gets a trailing brand-green checkmark via a Font Awesome
pseudo-element so every dropdown (chat / vision / image / asr / tts / etc.)
surfaces "this is what's currently selected" without per-call JS plumbing.
When a hint is present, the ✓ sits to its right with a small gap; without
a hint, margin-left:auto pushes the ✓ flush against the right edge. */
.cfg-dropdown-item.active::after {
content: '\f00c'; /* FontAwesome check glyph */
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
font-weight: 900;
margin-left: auto;
padding-left: 12px;
color: #4abe6e;
font-size: 11px;
flex-shrink: 0;
}
.cfg-dropdown-item.active:has(.cfg-dropdown-hint)::after {
/* When hint occupies the auto-margin slot, the ✓ no longer benefits
from `margin-left: auto`; replace it with a small fixed gap so the
✓ trails the hint cleanly. */
margin-left: 0;
padding-left: 10px;
}
/* API Key masking via CSS (avoids browser password prompts) */
.cfg-key-masked {
-webkit-text-security: disc;
text-security: disc;
}
/* Provider logo image — vendors flagged as `provider-logo-invert-dark`
ship a black wordmark that disappears on the dark canvas; we invert their
luminance only in dark mode so the brand stays recognizable without
touching multi-color marks like Google/MiniMax. */
.provider-logo-img {
object-fit: contain;
object-position: center;
}
.dark .provider-logo-invert-dark {
filter: invert(1) brightness(1.15);
}
/* Models page — provider dropdown rows.
Configured rows look like ordinary picker entries; the .active row's
trailing brand-green ✓ already announces "this is what's selected"
(handled globally by .cfg-dropdown-item.active::after above).
Unconfigured rows are visually subdued and carry a trailing gear icon
as a "click to set up" affordance. */
.cap-provider-label {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.cap-provider-gear {
margin-left: auto;
padding-left: 12px;
color: #94a3b8;
font-size: 11px;
flex-shrink: 0;
}
.cap-provider-item.cap-provider-unconfigured {
color: #94a3b8;
}
.dark .cap-provider-item.cap-provider-unconfigured {
color: #64748b;
}
.cap-provider-item.cap-provider-unconfigured:hover {
color: #475569;
}
.dark .cap-provider-item.cap-provider-unconfigured:hover {
color: #cbd5e1;
}
.cap-provider-item.cap-provider-unconfigured:hover .cap-provider-gear {
color: #475569;
}
.dark .cap-provider-item.cap-provider-unconfigured:hover .cap-provider-gear {
color: #cbd5e1;
}
/* If the active row ever lands on an unconfigured vendor (defensive — the
click handler normally diverts to the modal), suppress the global ✓ so
the gear remains the sole trailing icon and the row keeps reading as
"needs setup" rather than "already selected". */
.cap-provider-item.cap-provider-unconfigured.active::after {
content: none;
}
/* "Add vendor" modal picker — each configured row carries a static
brand-green ✓ via decorateVendorModalPicker so users can see what's set
up at a glance. The active row's global ✓ is suppressed here to avoid
showing two checks side by side on configured + selected rows. */
.vendor-picker-item.active::after {
content: none;
}
.vendor-picker-configured-mark {
margin-left: auto;
padding-left: 12px;
color: #4abe6e;
font-size: 11px;
flex-shrink: 0;
}
/* "Custom" row is an add-new action: trailing + instead of ✓. */
.vendor-picker-add-mark {
margin-left: auto;
padding-left: 12px;
color: #94a3b8;
font-size: 11px;
flex-shrink: 0;
}
/* Chat Input */
/* Keep the placeholder on one line; ellipsize when the box is too narrow so it
never wraps and inflates the single-row height. Actual input can still wrap. */
#chat-input::placeholder {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Attachment Preview Bar */
/* Attachments sit on their own line at the top of the composer card, growing to
the full card width and scrolling horizontally so chips never wrap. */
.attachment-preview {
display: flex;
flex-wrap: nowrap;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
padding: 0;
scrollbar-width: thin;
}
.attachment-preview::-webkit-scrollbar { height: 6px; }
.attachment-preview::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.4); border-radius: 3px; }
.attachment-preview.hidden { display: none; }
/* ==========================================================================
Composer card
One rounded surface: attachments and text on top, session controls along the
bottom edge. The controls that used to sit above the input (workspace) and
inside it (optimize / mic) share that bottom row now, which is where working
agents put them - the box reads as "what you are about to send, and under
what settings".
The card is the positioning context for every popover inside it (slash,
mention, attach, workspace / permission / model menus), all of which open
upward from its top edge.
========================================================================== */
.composer-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 10px 8px;
border-radius: 18px;
border: 1px solid #e2e8f0;
background: #f8fafc;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.composer-card:focus-within {
background: #fff;
border-color: #4ABE6E;
box-shadow: 0 0 0 3px rgba(74, 190, 110, 0.12);
}
.dark .composer-card {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
.dark .composer-card:focus-within {
background: rgba(255, 255, 255, 0.06);
border-color: #4ABE6E;
box-shadow: 0 0 0 3px rgba(74, 190, 110, 0.14);
}
/* Drag-over highlight reuses the focus treatment. */
.composer-card.drag-over { border-color: #4ABE6E; background: #fff; }
.composer-textarea {
width: 100%;
min-height: 52px;
max-height: 220px;
padding: 2px 4px;
border: none;
background: transparent;
resize: none;
outline: none;
color: #1e293b;
font-size: 14px;
line-height: 1.6;
overflow-y: hidden;
}
.composer-textarea::placeholder { color: #94a3b8; }
.dark .composer-textarea { color: #f1f5f9; }
.dark .composer-textarea::placeholder { color: #64748b; }
.composer-toolbar {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.composer-group {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
/* The left group owns the leftover width so its chips truncate instead of
pushing send off the card; the right group keeps its natural size. */
.composer-group:first-child { flex: 1 1 auto; }
.composer-group-end { flex: 0 0 auto; margin-left: auto; gap: 4px; }
.composer-icon-btn {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
border-radius: 8px;
background: transparent;
color: #94a3b8;
font-size: 14px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}
.composer-icon-btn:hover { background: #EDFDF3; color: #228547; }
.composer-icon-btn-warn:hover { background: #FEF3C7; color: #B45309; }
.dark .composer-icon-btn:hover { background: rgba(74, 190, 110, 0.14); color: #6EE7A0; }
.dark .composer-icon-btn-warn:hover { background: rgba(245, 158, 11, 0.16); color: #FCD34D; }
.composer-divider {
width: 1px;
height: 16px;
margin: 0 4px;
flex-shrink: 0;
background: #e2e8f0;
}
.dark .composer-divider { background: rgba(255, 255, 255, 0.12); }
.composer-chip {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 168px;
min-width: 0;
padding: 4px 8px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: #64748b;
font-size: 12px;
line-height: 1.4;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.composer-chip:hover { background: #EDFDF3; color: #228547; }
.composer-chip.open { background: #EDFDF3; color: #228547; border-color: #BBF0CD; }
.composer-chip > i { font-size: 11px; flex-shrink: 0; }
.composer-chip-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.composer-chip-caret { font-size: 9px; opacity: 0.55; }
/* Collapse a chip to just its icon (permission is always icon-only; the default
workspace collapses too). The name/state lives in the hover tooltip. */
.composer-chip-icon-only .composer-chip-label,
.composer-chip-icon-only .composer-chip-caret { display: none; }
.dark .composer-chip { color: #94a3b8; }
.dark .composer-chip:hover,
.dark .composer-chip.open { background: rgba(74, 190, 110, 0.14); color: #6EE7A0; border-color: transparent; }
/* Permission chip stays neutral like the other composer chips: the icon alone
distinguishes the mode, so an unrestricted session no longer shouts in a warm
colour. Only workspace-write keeps a subtle brand tint as the "safe default". */
.composer-chip.perm-read-only { color: #64748b; }
.composer-chip.perm-workspace-write { color: #64748b; }
.composer-chip.perm-full-access { color: #64748b; }
.dark .composer-chip.perm-read-only { color: #94a3b8; }
.dark .composer-chip.perm-workspace-write { color: #94a3b8; }
.dark .composer-chip.perm-full-access { color: #94a3b8; }
/* Inline hint shown under a tool card that the permission gate refused.
Neutral, not alarming: it explains why nothing happened and offers the fix. */
.perm-denied-hint {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 10px;
padding: 8px 12px;
border: 1px solid #E2E8F0;
border-radius: 10px;
background: #F8FAFC;
font-size: 13px;
color: #475569;
}
.perm-denied-hint > i { font-size: 12px; color: #64748b; flex-shrink: 0; }
.perm-denied-text { flex: 1; min-width: 0; }
.dark .perm-denied-hint {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: #cbd5e1;
}
.dark .perm-denied-hint > i { color: #94a3b8; }
.composer-send-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: none;
border-radius: 9px;
background: #4ABE6E;
color: #fff;
cursor: pointer;
transition: background 0.12s ease, opacity 0.12s ease;
}
.composer-send-btn:hover:not(:disabled) { background: #35A55A; }
.composer-send-btn:disabled { background: #cbd5e1; cursor: not-allowed; }
.dark .composer-send-btn:disabled { background: #475569; }
.composer-steer-btn {
background: transparent;
border: 1px solid #BBF0CD;
color: #35A55A;
}
.composer-steer-btn:hover:not(:disabled) { background: #EDFDF3; }
.composer-steer-btn:disabled { background: transparent; border-color: #e2e8f0; color: #cbd5e1; }
.dark .composer-steer-btn { border-color: rgba(74, 190, 110, 0.4); color: #6EE7A0; }
.dark .composer-steer-btn:hover:not(:disabled) { background: rgba(74, 190, 110, 0.14); }
.dark .composer-steer-btn:disabled { border-color: rgba(255,255,255,0.12); color: #475569; }
/* Compact attachment chips/thumbnails so adding one barely grows the card. */
.composer-card .att-thumb { width: 34px; height: 34px; }
.composer-card .att-chip { padding: 3px 24px 3px 8px; font-size: 11px; }
.composer-card .att-remove { top: 1px; right: 1px; width: 15px; height: 15px; line-height: 15px; font-size: 10px; }
/* Narrow viewports: chips keep their icon and drop the text label, so the row
still holds workspace / permission / model without wrapping. */
@media (max-width: 640px) {
.composer-chip { max-width: none; padding: 4px 6px; }
.composer-chip-label { display: none; }
.composer-divider { margin: 0 2px; }
}
/* ==========================================================================
Composer popovers (permission + model), sharing the workspace menu's look
========================================================================== */
.composer-menu {
position: absolute;
left: 0;
bottom: calc(100% + 6px);
width: 300px;
max-height: 380px;
overflow-y: auto;
padding: 6px;
border-radius: 12px;
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.05);
z-index: 60;
animation: slashMenuIn 0.15s ease-out;
}
.composer-menu.hidden { display: none; }
.composer-menu-wide { width: 340px; left: auto; right: 0; }
/* The Agent identity chip now sits on the far right of the toolbar, so its
menu is right-anchored to stay on-screen instead of overflowing left. */
#composer-agent-menu { left: auto; right: 0; }
/* The model popup lives at the card level, whose top edge is the textarea -
not the chip that opened it. Anchor it just above the toolbar row instead,
so it hugs its trigger rather than floating over the input.
(The agent menu is nested in .composer-identity, so it keeps bottom:100%.) */
#model-selector-menu {
bottom: calc(2rem + 14px);
}
.dark .composer-menu {
background: #1A1A1A;
border-color: rgba(255, 255, 255, 0.1);
}
.composer-menu-title {
padding: 6px 10px 4px;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.composer-menu-divider { height: 1px; margin: 5px 6px; background: #eef2f6; }
.dark .composer-menu-divider { background: rgba(255, 255, 255, 0.08); }
.composer-menu-item {
width: 100%;
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 10px;
border: none;
border-radius: 8px;
background: transparent;
color: #334155;
font-size: 13px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
text-align: left;
}
.composer-menu-item:hover { background: #EDFDF3; color: #228547; }
.composer-menu-item.active { background: #EDFDF3; }
/* Single-line Agent rows (avatar + name + trailing icon) center vertically;
only the multi-line permission rows need top alignment. */
.composer-menu-item.agent-row { align-items: center; }
.composer-menu-item.agent-row > i:last-child { margin-top: 0; }
/* "Create Agent" row: a dashed circle stands in for the avatar so it lines up
with the Agent rows above while reading as an action, not a person. */
.composer-menu-create-icon {
flex-shrink: 0;
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px dashed #cbd5e1;
color: #94a3b8; font-size: 11px;
}
.composer-menu-item.composer-menu-create:hover .composer-menu-create-icon {
border-color: #4ABE6E; color: #228547;
}
.dark .composer-menu-create-icon { border-color: #475569; color: #94a3b8; }
.composer-menu-item > i:first-child {
width: 15px;
text-align: center;
color: #64748b;
flex-shrink: 0;
margin-top: 2px;
}
.composer-menu-item:hover > i:first-child { color: inherit; }
.composer-menu-body { flex: 1; min-width: 0; }
.composer-menu-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.composer-menu-desc {
display: block;
margin-top: 2px;
font-size: 11px;
line-height: 1.45;
color: #94a3b8;
white-space: normal;
}
.composer-menu-check { color: #228547; flex-shrink: 0; margin-top: 2px; }
.dark .composer-menu-item { color: #cbd5e1; }
.dark .composer-menu-item:hover,
.dark .composer-menu-item.active { background: rgba(74, 190, 110, 0.14); color: #6EE7A0; }
.dark .composer-menu-desc { color: #64748b; }
.dark .composer-menu-check { color: #6EE7A0; }
/* A footnote at the bottom of the permission menu, for the one caveat that
belongs next to the choice: command interception is best effort. */
.composer-menu-note {
padding: 6px 10px 4px;
font-size: 11px;
line-height: 1.5;
color: #94a3b8;
}
.attach-menu {
position: absolute;
left: 72px;
bottom: calc(100% + 6px);
min-width: 148px;
padding: 6px;
border-radius: 12px;
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
z-index: 55;
animation: slashMenuIn 0.15s ease-out;
}
.attach-menu.hidden { display: none; }
.attach-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: none;
border-radius: 8px;
background: transparent;
color: #334155;
font-size: 13px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
text-align: left;
}
.attach-menu-item:hover {
background: #EDFDF3;
color: #228547;
}
.attach-menu-item i {
width: 14px;
text-align: center;
color: #64748b;
}
.attach-menu-item:hover i { color: inherit; }
.att-thumb {
position: relative;
width: 64px; height: 64px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
flex-shrink: 0;
}
.dark .att-thumb { border-color: rgba(255,255,255,0.1); }
.att-thumb img {
width: 100%; height: 100%;
object-fit: cover;
}
.att-chip {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 28px 6px 10px;
border-radius: 8px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
font-size: 12px;
color: #475569;
max-width: 180px;
}
.dark .att-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #94a3b8; }
.att-uploading { opacity: 0.6; pointer-events: none; }
.att-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.att-remove {
position: absolute;
top: -4px; right: -4px;
width: 18px; height: 18px;
border-radius: 50%;
background: #ef4444;
color: #fff;
border: none;
font-size: 12px;
line-height: 18px;
text-align: center;
cursor: pointer;
padding: 0;
opacity: 0;
transition: opacity 0.15s;
}
.att-thumb:hover .att-remove,
.att-chip:hover .att-remove { opacity: 1; }
/* Drag-over highlight */
.drag-over {
background: rgba(74, 190, 110, 0.08) !important;
border-color: #4ABE6E !important;
}
/* User message attachments */
.user-msg-attachments {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.user-msg-image {
max-width: 200px;
max-height: 160px;
border-radius: 8px;
object-fit: cover;
cursor: pointer;
}
.user-msg-image:hover { opacity: 0.9; }
.user-msg-file {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
background: rgba(255,255,255,0.15);
font-size: 12px;
}
.user-msg-file.is-openable {
cursor: pointer;
transition: background 0.15s ease;
}
.user-msg-file.is-openable:hover {
background: rgba(255,255,255,0.28);
}
/* Placeholder Cards */
.placeholder-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.placeholder-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
}
/* Slash Command Menu */
.slash-menu {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
right: 0;
max-height: 320px;
overflow-y: auto;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
z-index: 50;
padding: 4px;
animation: slashMenuIn 0.15s ease-out;
}
.slash-menu.hidden { display: none; }
@keyframes slashMenuIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.slash-menu-header {
padding: 6px 10px 4px;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.slash-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.12s ease;
}
.slash-menu-item:hover,
.slash-menu-item.active {
background: #EDFDF3;
}
.slash-menu-item .cmd {
font-size: 13px;
font-weight: 500;
color: #334155;
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}
.slash-menu-item.active .cmd {
color: #228547;
}
.slash-menu-item .desc {
font-size: 12px;
color: #94a3b8;
margin-left: 12px;
white-space: nowrap;
}
/* Dark mode */
.dark .slash-menu {
background: #1A1A1A;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.15);
}
.dark .slash-menu-header {
color: #64748b;
}
.dark .slash-menu-item:hover,
.dark .slash-menu-item.active {
background: rgba(74, 190, 110, 0.1);
}
.dark .slash-menu-item .cmd {
color: #e2e8f0;
}
.dark .slash-menu-item.active .cmd {
color: #4ABE6E;
}
.dark .slash-menu-item .desc {
color: #64748b;
}
.dark .attach-menu {
background: #1A1A1A;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.15);
}
.dark .attach-menu-item {
color: #e2e8f0;
}
.dark .attach-menu-item i {
color: #94a3b8;
}
.dark .attach-menu-item:hover {
background: rgba(74, 190, 110, 0.1);
color: #4ABE6E;
}
/* ============================================================
Workspace selector (project picker above the input)
============================================================ */
.workspace-selector-menu {
position: absolute;
left: 0;
bottom: calc(100% + 6px);
width: 320px;
max-height: 380px;
overflow-y: auto;
padding: 6px;
border-radius: 12px;
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.12), 0 2px 8px -2px rgba(0, 0, 0, 0.05);
z-index: 60;
animation: slashMenuIn 0.15s ease-out;
}
.workspace-selector-menu.hidden { display: none; }
.ws-sel-section-title {
padding: 6px 10px 4px;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ws-sel-item {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border: none;
border-radius: 8px;
background: transparent;
color: #334155;
font-size: 13px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
text-align: left;
}
.ws-sel-item:hover { background: #EDFDF3; color: #228547; }
.ws-sel-item i { width: 15px; text-align: center; color: #64748b; flex-shrink: 0; }
.ws-sel-item:hover i { color: inherit; }
.ws-sel-item .ws-sel-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-sel-item .ws-sel-path {
font-size: 11px;
color: #94a3b8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-sel-item.active { background: #EDFDF3; }
.ws-sel-item.active .ws-sel-check { color: #228547; margin-left: auto; }
.ws-sel-divider { height: 1px; margin: 5px 6px; background: #eef2f6; }
.ws-sel-input-row { display: flex; gap: 6px; padding: 6px; }
.ws-sel-input-row input {
flex: 1;
min-width: 0;
padding: 6px 9px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 13px;
background: #f8fafc;
color: #334155;
outline: none;
}
.ws-sel-input-row input:focus { border-color: #4ABE6E; }
.ws-sel-input-row button {
padding: 6px 12px;
border: none;
border-radius: 8px;
background: #4ABE6E;
color: #fff;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
}
.ws-sel-input-row button:hover { background: #3aa85c; }
.ws-sel-crumb {
padding: 4px 10px 6px;
font-size: 11px;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dark .workspace-selector-menu {
background: #1A1A1A;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.15);
}
.dark .ws-sel-item { color: #e2e8f0; }
.dark .ws-sel-item i { color: #94a3b8; }
.dark .ws-sel-item:hover,
.dark .ws-sel-item.active { background: rgba(74, 190, 110, 0.1); color: #4ABE6E; }
.dark .ws-sel-divider { background: rgba(255,255,255,0.08); }
.dark .ws-sel-input-row input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #e2e8f0; }
.dark .ws-sel-crumb { color: #94a3b8; }
/* ---- Folder picker modal (open project) ---- */
.fp-btn {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; border: 1px solid #e2e8f0; background: #f8fafc;
color: #64748b; font-size: 13px; cursor: pointer; transition: background .12s ease;
}
.fp-btn:hover:not([disabled]) { background: #EDFDF3; color: #228547; border-color: #cdeed8; }
.fp-btn[disabled] { opacity: 0.4; cursor: default; }
.dark .fp-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #94a3b8; }
.dark .fp-btn:hover:not([disabled]) { background: rgba(74,190,110,0.12); color: #4ABE6E; }
.fp-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 8px; cursor: pointer;
color: #334155; font-size: 14px; transition: background .1s ease;
}
.fp-row:hover { background: #f1f5f9; }
.fp-row.selected { background: #EDFDF3; color: #228547; }
.fp-row > i:first-child { color: #eab308; width: 16px; text-align: center; flex-shrink: 0; }
.fp-row.selected > i:first-child { color: #228547; }
.fp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-into { color: #cbd5e1; font-size: 11px; padding: 4px; border-radius: 6px; flex-shrink: 0; }
.fp-into:hover { background: rgba(0,0,0,0.06); color: #64748b; }
.dark .fp-row { color: #e2e8f0; }
.dark .fp-row:hover { background: rgba(255,255,255,0.06); }
.dark .fp-row.selected { background: rgba(74,190,110,0.12); color: #4ABE6E; }
.dark .fp-into:hover { background: rgba(255,255,255,0.1); }
.fp-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; height: 200px; color: #94a3b8; font-size: 13px;
}
.fp-empty i { font-size: 22px; opacity: 0.5; }
/* ============================================================
Knowledge View
============================================================ */
/* Tab toggle */
.knowledge-tab, .memory-tab, .config-tab {
color: #64748b;
}
.knowledge-tab.active, .memory-tab.active, .config-tab.active {
background: #fff;
color: #334155;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dark .knowledge-tab.active, .dark .memory-tab.active, .dark .config-tab.active {
background: rgba(255,255,255,0.1);
color: #e2e8f0;
}
/* File tree */
.knowledge-tree-group {
margin-bottom: 2px;
}
.knowledge-tree-group-btn {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #64748b;
cursor: pointer;
border: none;
background: none;
transition: background 0.15s, color 0.15s;
text-transform: capitalize;
}
.knowledge-tree-group-btn:hover {
background: rgba(0,0,0,0.04);
color: #334155;
}
.dark .knowledge-tree-group-btn:hover {
background: rgba(255,255,255,0.06);
color: #e2e8f0;
}
.knowledge-tree-group-btn i.chevron {
font-size: 8px;
transition: transform 0.15s;
}
.knowledge-tree-group.open > .knowledge-tree-group-btn .chevron {
transform: rotate(90deg);
}
.knowledge-tree-group-items {
display: none;
}
.knowledge-tree-group.open > .knowledge-tree-group-items {
display: block;
}
.knowledge-tree-file {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px 5px 24px;
border-radius: 6px;
font-size: 12px;
color: #64748b;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.knowledge-tree-file:hover {
background: rgba(0,0,0,0.04);
color: #334155;
}
.knowledge-tree-file.active {
background: #EDFDF3;
color: #228547;
}
.knowledge-actions {
display: flex;
gap: 2px;
margin-left: auto;
opacity: 0;
transition: opacity 0.15s;
}
.knowledge-tree-file:hover .knowledge-actions,
.knowledge-tree-group-btn:hover .knowledge-actions,
.knowledge-tree-file:focus-within .knowledge-actions,
.knowledge-tree-group-btn:focus-within .knowledge-actions {
opacity: 1;
}
.knowledge-action {
padding: 3px 5px;
border-radius: 5px;
color: #94a3b8;
font-size: 9px;
}
.knowledge-action:hover {
color: #228547;
background: rgba(34, 133, 71, 0.08);
}
.knowledge-action.danger:hover {
color: #ef4444;
background: rgba(239, 68, 68, 0.08);
}
.dark .knowledge-tree-file:hover {
background: rgba(255,255,255,0.06);
color: #e2e8f0;
}
.dark .knowledge-tree-file.active {
background: rgba(74, 190, 110, 0.1);
color: #4ABE6E;
}
.knowledge-import-drag-over {
outline: 2px dashed rgba(74, 190, 110, 0.55);
outline-offset: 4px;
border-radius: 14px;
}
#knowledge-dialog-card.knowledge-document-dialog {
max-width: 760px;
}
#knowledge-document-content {
min-height: 320px;
line-height: 1.55;
}
/* Graph legend */
.knowledge-graph-legend {
position: absolute;
top: 12px;
right: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 11px;
color: #64748b;
z-index: 10;
}
.knowledge-graph-legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.knowledge-graph-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
/* Graph tooltip */
.knowledge-graph-tooltip {
position: absolute;
padding: 6px 10px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 12px;
color: #334155;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 20;
}
.dark .knowledge-graph-tooltip {
background: #1A1A1A;
border-color: rgba(255,255,255,0.1);
color: #e2e8f0;
}
/* Graph node label — the halo keeps it readable where links and nodes crowd */
.knowledge-graph-label {
fill: #475569;
paint-order: stroke;
stroke: rgba(255,255,255,0.9);
stroke-width: 3px;
stroke-linejoin: round;
}
.dark .knowledge-graph-label {
fill: #cbd5e1;
stroke: rgba(26,26,26,0.9);
}
/* Config field tooltip */
.cfg-tip {
position: relative;
display: inline-flex;
align-items: center;
color: #94a3b8;
cursor: help;
font-size: 12px;
}
.cfg-tip:hover { color: #64748b; }
.dark .cfg-tip:hover { color: #cbd5e1; }
/* Floating tooltip portal — appended to by JS so it isn't clipped
by overflow:hidden ancestors. */
.cfg-tip-floating {
position: fixed;
padding: 6px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
background: #1e293b;
color: #e2e8f0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 9999;
}
.dark .cfg-tip-floating {
background: #334155;
color: #f1f5f9;
}
.cfg-tip-floating.show {
opacity: 1;
}
/* Example cards: equal height via flex stretch + fixed 2-line description area */
.example-card {
display: flex;
flex-direction: column;
}
.example-card > p {
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.5em; /* ~2 lines at text-sm leading-relaxed */
}
/* --------------------------------------------------------------------
* Voice pill — compact custom audio player used by mic uploads and TTS
* replies. Replaces the bulky native