/* =====================================================================
   CowAgent 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-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
.sidebar-item.active .item-icon { color: #4ABE6E; }

/* Session Panel */
.session-panel {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    border-right: 1px solid #e5e7eb;
    height: 100vh;
    overflow: hidden;
    transition: width 0.2s ease;
}
.dark .session-panel {
    background: #111111;
    border-right-color: rgba(255, 255, 255, 0.08);
}
.session-panel.hidden { display: none; }
.session-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Match the chat header height (h-14 = 56px) so both top bars align. */
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.dark .session-panel-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
.session-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.dark .session-panel-title { color: #d1d5db; }
.session-panel-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 12px;
}
.session-panel-close:hover {
    background: #f3f4f6;
    color: #374151;
}
.dark .session-panel-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e5e5;
}
.session-panel-new {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px dashed #d1d5db;
    background: none;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.session-panel-new:hover {
    border-color: #9ca3af;
    color: #374151;
    background: #f9fafb;
}
.dark .session-panel-new {
    border-color: rgba(255, 255, 255, 0.12);
    color: #9ca3af;
}
.dark .session-panel-new:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: #e5e5e5;
    background: rgba(255, 255, 255, 0.04);
}
.session-panel-new-wrap { position: relative; flex-shrink: 0; }
.session-panel-new-wrap .session-panel-new { width: calc(100% - 24px); }
.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; }
.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: 1;
    overflow-y: auto;
    padding: 4px 8px;
    scrollbar-width: none;
}
.session-list:hover { scrollbar-width: thin; }
.session-list::-webkit-scrollbar { width: 4px; background: transparent; }
.session-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.session-list:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.dark .session-list:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.session-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 8px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}
/* 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;
}
.dark .session-group-label { color: #525252; }

/* 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: 6px;
    margin-top: 4px;
    padding: 6px 8px;
    transition: background 0.12s ease;
    user-select: none;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
}
.dark .session-group-project { color: #8a8a8a; }
.session-group-project:hover { background: rgba(148, 163, 184, 0.12); }
.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: #9ca3af;
    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 { opacity: 1; }
.session-group-project:hover .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: 20px 12px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}
.session-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: #6b7280;
    font-size: 13px;
    position: relative;
}
.dark .session-item { color: #a3a3a3; }
.session-item:hover {
    background: #f3f4f6;
    color: #111827;
}
.dark .session-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e5e5e5;
}
.session-item.active {
    background: #e5e7eb;
    color: #111827;
}
.dark .session-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.session-icon {
    flex-shrink: 0;
    font-size: 11px;
    color: #9ca3af;
    width: 16px;
    text-align: center;
}
.dark .session-icon { color: #525252; }
.session-item.active .session-icon { color: #4ABE6E; }
.session-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Breathing room at rest so the title doesn't run flush to the edge; the
       gap collapses on hover when the action buttons take that space. */
    padding-right: 20px;
}
.session-item:hover .session-title { padding-right: 0; }
/* Under a multi-project list, sessions indent so their leading icon lines up
   with the folder icon of the project header above them. The session icon sits
   in a centered 16px box, so it needs a touch less left padding than the raw
   folder-icon offset (24px) to visually align. */
.session-item-indent { padding-left: 21px; }
.session-delete {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 10px;
    color: #9ca3af;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.session-item:hover .session-delete { display: flex; }
.session-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.dark .session-delete:hover { background: rgba(239, 68, 68, 0.15); }

/* Rename button: shares the look of the delete button, sits to its left.
   Negative right margin tightens the gap to the delete button only. */
.session-rename {
    flex-shrink: 0;
    margin-right: -6px;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 11px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.session-item:hover .session-rename { display: flex; }
.session-rename:hover {
    color: #4ABE6E;
    background: rgba(74, 190, 110, 0.12);
}
.dark .session-rename:hover { background: rgba(74, 190, 110, 0.18); }

/* Pin button: same affordance as rename, and the pinned state stays visible
   after the cursor leaves so the row explains its own position in the list. */
.session-pin {
    flex-shrink: 0;
    margin-right: -6px;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 10px;
    transition: color 0.15s, background 0.15s;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.session-item:hover .session-pin { display: flex; }
.session-pin:hover {
    color: #4ABE6E;
    background: rgba(74, 190, 110, 0.12);
}
.dark .session-pin:hover { background: rgba(74, 190, 110, 0.18); }
/* A pinned row already shows a pin as its leading icon, so on hover the button
   turns into "unpin" and the leading icon is what carries the state. */
.session-item.pinned .session-icon { color: #4ABE6E; transform: rotate(45deg); }
.session-item.pinned .session-pin { color: #4ABE6E; }
.session-item.pinned .session-pin:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* 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;
}

/* 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; }

/* Session panel overlay (mobile only, click to close) */
.session-panel-overlay {
    display: none;
}
@media (max-width: 768px) {
    .session-panel-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 44;
        background: rgba(0, 0, 0, 0.3);
    }
    .session-panel-overlay.hidden {
        display: none;
    }
}

/* Mobile: session panel as overlay */
@media (max-width: 768px) {
    .session-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 45;
        width: 220px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }
    .dark .session-panel {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }
}

/* Menu Groups */
.menu-group-items { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }
.menu-group.open .menu-group-items { max-height: 2000px; transition: max-height 0.35s ease-in; }
.menu-group .chevron { transition: transform 0.25s ease; }
.menu-group.open .chevron { transform: rotate(90deg); }

/* 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 */
/* Break long words / URLs so they wrap inside the bubble instead of overflowing */
.msg-content { overflow-wrap: anywhere; word-break: break-word; }
.msg-content a { overflow-wrap: anywhere; word-break: break-word; }
.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;
    overflow-wrap: anywhere; word-break: break-word;
}
.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;
}
.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; }
/* Read-only variant: renders like a filled field but never opens (e.g. the
   task edit modal's frozen channel). Pointer + focus affordances are removed. */
.cfg-dropdown-disabled { pointer-events: none; }
.cfg-dropdown-disabled .cfg-dropdown-selected {
    cursor: not-allowed;
    background: #f1f5f9;
    color: #475569;
}
.dark .cfg-dropdown-disabled .cfg-dropdown-selected {
    background: #252525;
    color: #cbd5e1;
}
.cfg-dropdown-disabled .cfg-dropdown-arrow { opacity: 0.4; }
/* 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; }
.perm-denied-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    border: none;
    border-radius: 8px;
    background: #35A85B;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
}
.perm-denied-btn:hover { background: #228547; }
.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 permission / model popups live at the card level, whose top edge is the
   textarea - not the chip that opened them. Anchor them just above the toolbar
   row instead, so they hug their trigger rather than floating over the input.
   (The agent menu is nested in .composer-identity, so it keeps bottom:100%.) */
#permission-selector-menu,
#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 <body> 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;
}

/* Context-usage popover on the clear-context button. A body-level fixed card
   (like .cfg-tip-floating) that hosts an inline SVG donut, so it renders
   regardless of the composer's overflow and only shows when data has loaded. */
.ctx-usage-pop {
    position: fixed;
    width: 248px;
    padding: 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 9999;
}
.dark .ctx-usage-pop {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}
.ctx-usage-pop.show {
    opacity: 1;
}
.ctx-usage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ctx-usage-title {
    font-weight: 600;
}
.ctx-usage-est {
    font-size: 10px;
    color: #64748b;
}
.dark .ctx-usage-est {
    color: #94a3b8;
}
.ctx-usage-donut-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}
.ctx-usage-donut-wrap svg {
    display: block;
}
.ctx-usage-pct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
}
.ctx-usage-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    margin-bottom: 4px;
}
.ctx-usage-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.ctx-usage-label {
    flex: 1;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .ctx-usage-label {
    color: #cbd5e1;
}
.ctx-usage-val {
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}
.dark .ctx-usage-val {
    color: #f1f5f9;
}
.ctx-usage-foot {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 10px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.dark .ctx-usage-foot {
    border-top-color: #334155;
    color: #94a3b8;
}
.ctx-usage-empty {
    color: #64748b;
    text-align: center;
    white-space: nowrap;
}
.dark .ctx-usage-empty {
    color: #94a3b8;
}
/* Empty / error state: a single line, so the card hugs the text instead of
   padding a fixed-width box around it. */
.ctx-usage-pop--compact {
    width: auto;
    padding: 8px 12px;
}

/* Mini pie inside the composer button (replaces the trash icon once a session
   has context). Sized to sit like an icon; inherits color for the empty ring. */
.ctx-pie-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 0;
}
.ctx-pie-mini svg { display: block; }
.ctx-pie-btn { position: relative; }

/* The usage card is interactive now (buttons), so it must receive the pointer. */
.ctx-usage-pop.show {
    pointer-events: auto;
}

/* Action row at the bottom of the card. */
.ctx-usage-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}
.dark .ctx-usage-actions { border-top-color: #334155; }
.ctx-act-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    font-size: 11px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
}
.ctx-act-btn:hover {
    background: #eef2f7;
    border-color: #cbd5e1;
    color: #0f172a;
}
.ctx-act-btn i { font-size: 11px; }
.dark .ctx-act-btn {
    background: rgba(255,255,255,0.04);
    border-color: #334155;
    color: #cbd5e1;
}
.dark .ctx-act-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: #475569;
    color: #f1f5f9;
}

/* Loading overlay shown on the card while a synchronous compaction runs. */
.ctx-usage-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    background: rgba(255,255,255,0.82);
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(1px);
}
.dark .ctx-usage-loading {
    background: rgba(15,23,42,0.82);
    color: #e2e8f0;
}
.ctx-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(100,116,139,0.35);
    border-top-color: #10b981;
    animation: ctx-spin 0.7s linear infinite;
}
@keyframes ctx-spin { to { transform: rotate(360deg); } }

/* Composer input locked during compaction. */
.ctx-input-locked {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Brief highlight on the budget field when arriving from the "Budget" action. */
.cfg-field-highlight {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.25) !important;
    transition: box-shadow 0.2s, border-color 0.2s;
}

/* 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 <audio controls> with a play/pause
 * icon + thin progress bar + duration counter so it blends into chat
 * bubbles without the chrome-grey browser default look.
 * ------------------------------------------------------------------ */
.voice-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: rgb(71, 85, 105);
    font-size: 12px;
    line-height: 1;
    max-width: 240px;
    user-select: none;
    cursor: default;
}
.dark .voice-pill {
    background: rgba(255, 255, 255, 0.08);
    color: rgb(203, 213, 225);
}
.voice-pill[data-loading="1"] {
    opacity: 0.65;
}
.voice-pill-btn {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-500, #2563eb);
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.voice-pill-btn:hover { transform: scale(1.05); }
.voice-pill-btn i { font-size: 9px; margin-left: 1px; }
.voice-pill-btn[data-state="play"] i { margin-left: 2px; }
.voice-pill-btn[data-state="pause"] i { margin-left: 0; }
.voice-pill-track {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.25);
    overflow: hidden;
    min-width: 70px;
}
.dark .voice-pill-track {
    background: rgba(148, 163, 184, 0.25);
}
.voice-pill-fill {
    height: 100%;
    width: 0%;
    background: var(--color-primary-500, #2563eb);
    border-radius: inherit;
    transition: width 0.1s linear;
}
.voice-pill-time {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: inherit;
    opacity: 0.75;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}
.voice-pill audio { display: none; }

/* Send button toggles into a Stop button while an SSE stream is in flight.
   Match the look of the disabled send button (light grey block + white
   glyph) so it reads as the same visual element, just paused/idle from
   sending perspective and clickable to stop. */
#send-btn.send-btn-cancel {
    background-color: rgb(203 213 225) !important; /* slate-300, == disabled send-btn */
    color: white !important;
}
#send-btn.send-btn-cancel:hover {
    background-color: rgb(148 163 184) !important; /* slate-400 */
}
#send-btn.send-btn-cancel:disabled {
    background-color: rgb(226 232 240) !important; /* slate-200, while stop is in flight */
    color: white !important;
    cursor: progress;
}
.dark #send-btn.send-btn-cancel {
    background-color: rgb(71 85 105) !important; /* slate-600, == dark disabled send-btn */
    color: white !important;
}
.dark #send-btn.send-btn-cancel:hover {
    background-color: rgb(100 116 139) !important; /* slate-500 */
}
.dark #send-btn.send-btn-cancel:disabled {
    background-color: rgb(51 65 85) !important; /* slate-700 */
    color: rgb(203 213 225) !important;
}

.agent-cancelled-tag {
    font-style: italic;
}

/* =====================================================================
   Code Block Enhancements
   ===================================================================== */
.code-block-wrapper {
    position: relative;
    margin: 1em 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
}

.dark .code-block-wrapper {
    background: #1e293b;
    border-color: #334155;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    background: #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
    font-size: 0.85em;
}

.dark .code-block-header {
    background: #0f172a;
    border-bottom-color: #334155;
}

.code-block-lang {
    color: #64748b;
    font-weight: 500;
    text-transform: lowercase;
}

.dark .code-block-lang {
    color: #94a3b8;
}

.code-copy-btn {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0.25em 0.5em;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 0.9em;
}

.code-copy-btn:hover {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
}

.dark .code-copy-btn {
    color: #94a3b8;
}

.dark .code-copy-btn:hover {
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
}

.code-block-wrapper pre {
    margin: 0;
    border-radius: 0;
    border: none;
}

/* =====================================================================
   Drag and Drop Overlay
   ===================================================================== */
/* Anchor the absolutely-positioned overlay to the chat view. */
#view-chat {
    position: relative;
}

.drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.drag-overlay.active {
    opacity: 1;
}

.drag-overlay.hidden {
    display: none;
}

.drag-overlay-content {
    background: white;
    border: 3px dashed #3b82f6;
    border-radius: 16px;
    padding: 3em 4em;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: bounce 1s ease infinite;
}

.dark .drag-overlay-content {
    background: #1e293b;
    border-color: #60a5fa;
}

.drag-overlay-content i {
    font-size: 4em;
    color: #3b82f6;
    margin-bottom: 0.5em;
}

.dark .drag-overlay-content i {
    color: #60a5fa;
}

.drag-overlay-content p {
    font-size: 1.5em;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.dark .drag-overlay-content p {
    color: #f1f5f9;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* =====================================================================
   Message Action Buttons
   ===================================================================== */
.edit-msg-btn,
.delete-msg-btn,
.regenerate-msg-btn {
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.user-message-group:hover .edit-msg-btn,
.user-message-group:hover .delete-msg-btn,
.bot-message-group:hover .regenerate-msg-btn {
    opacity: 1;
}

.edit-msg-btn:hover,
.regenerate-msg-btn:hover {
    color: #3b82f6 !important;
}

.delete-msg-btn:hover {
    color: #ef4444 !important;
}

.edit-msg-btn:disabled,
.delete-msg-btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.35 !important;
}

/* =====================================================================
   Workspace Panel (preview + file manager)
   ===================================================================== */
.workspace-panel {
    position: relative;
    flex-shrink: 0;
    width: 420px;
    min-width: 280px;
    max-width: 70vw;
    height: 100%;
    display: flex;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
}
.dark .workspace-panel {
    background: #1A1A1A;
    border-left-color: rgba(255, 255, 255, 0.08);
}
.workspace-panel.hidden { display: none; }

.workspace-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.workspace-resizer {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 20;
}
.workspace-resizer:hover,
.workspace-resizer.dragging { background: rgba(74, 190, 110, 0.35); }

.workspace-header {
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 0 10px;
    border-bottom: 1px solid #e5e7eb;
}
.dark .workspace-header { border-bottom-color: rgba(255, 255, 255, 0.08); }

.workspace-tabs { display: flex; gap: 2px; }
.workspace-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.workspace-tab i { font-size: 12px; }
.workspace-tab:hover { background: #f1f5f9; color: #334155; }
.workspace-tab.active { background: #EDFDF3; color: #228547; }
.dark .workspace-tab { color: #94a3b8; }
.dark .workspace-tab:hover { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; }
.dark .workspace-tab.active { background: rgba(74, 190, 110, 0.12); color: #4ABE6E; }

.workspace-header-actions { display: flex; align-items: center; gap: 2px; }
.workspace-icon-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.workspace-icon-btn:hover { background: #f1f5f9; color: #334155; }
.workspace-icon-btn.hidden { display: none; }
.dark .workspace-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }

.workspace-body {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
.workspace-body.active { display: flex; }

.workspace-file-title {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px solid #f1f5f9;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}
.workspace-file-title.hidden { display: none; }
.dark .workspace-file-title { color: #94a3b8; border-bottom-color: rgba(255, 255, 255, 0.06); }

.workspace-preview-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
}
.workspace-preview-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}
.workspace-preview-content .ws-pad { padding: 16px; }
.workspace-preview-content img.ws-media,
.workspace-preview-content video.ws-media {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}
.workspace-preview-content audio.ws-media { width: 100%; margin-top: 12px; }
.workspace-preview-content pre {
    margin: 0;
    padding: 16px;
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre;
    overflow: auto;
}

/* Preview editor: fills the panel so the text area is the whole scroll area. */
.workspace-preview-content .ws-editor {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    outline: none;
    resize: none;
    padding: 16px;
    background: transparent;
    color: #1e293b;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.6;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
}
.dark .workspace-preview-content .ws-editor { color: #e2e8f0; }
.workspace-icon-btn.ws-btn-busy { opacity: 0.5; pointer-events: none; }

/* =====================================================================
   Document editor (memory files, skill definitions)
   ===================================================================== */

/* Sized to the viewport rather than to the content: a text area that grows with
   the document would push its own save button off the top of the page. */
textarea.doc-editor {
    display: block;
    width: 100%;
    height: calc(100vh - 280px);
    min-height: 240px;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    color: #1e293b;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    tab-size: 4;
    /* Wrap instead of scrolling sideways: these are prose documents, and a
       horizontal scrollbar hides the end of every long paragraph. `anywhere`
       covers the unbreakable cases (long URLs) that would still overflow. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    overflow-y: auto;
}
.dark textarea.doc-editor { color: #e2e8f0; }

.doc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.doc-action-btn:hover { background: #f1f5f9; color: #334155; }
.dark .doc-action-btn { border-color: rgba(255, 255, 255, 0.1); color: #94a3b8; }
.dark .doc-action-btn:hover { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }

/* primary-500 / primary-600 from the Tailwind theme in chat.html. */
.doc-action-btn-primary {
    border-color: transparent;
    background: #35A85B;
    color: #fff;
}
.doc-action-btn-primary:hover { background: #228547; color: #fff; }
.dark .doc-action-btn-primary { border-color: transparent; background: #35A85B; color: #fff; }
.dark .doc-action-btn-primary:hover { background: #228547; color: #fff; }

.doc-action-btn.doc-btn-busy { opacity: 0.5; pointer-events: none; }

/* Unsaved-changes marker beside the file name in a viewer title. */
.doc-dirty-dot { color: #35A85B; }

.workspace-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #94a3b8;
    font-size: 13px;
    padding: 24px;
    text-align: center;
}
.workspace-empty i { font-size: 26px; opacity: 0.4; }

/* Files tab */
.workspace-files-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
}
.workspace-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
}
.workspace-search i { font-size: 11px; color: #94a3b8; }
.workspace-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13px;
    color: #334155;
}
.dark .workspace-search { background: rgba(255, 255, 255, 0.06); }
.dark .workspace-search input { color: #e2e8f0; }

.workspace-breadcrumb {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 12px 8px;
    font-size: 12px;
    color: #94a3b8;
}
.workspace-breadcrumb .crumb { cursor: pointer; border-radius: 4px; padding: 1px 4px; display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.workspace-breadcrumb .crumb:hover { background: #f1f5f9; color: #334155; }
.dark .workspace-breadcrumb .crumb:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
.workspace-breadcrumb .sep { opacity: 0.5; }
.workspace-breadcrumb .crumb-root {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;         /* keep the meaningful tail (project name) visible */
    text-align: left;
    font-size: 11px;
    opacity: 0.9;
}

.workspace-file-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 6px 12px;
}
.ws-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}
.ws-file-row:hover { background: #f1f5f9; }
.dark .ws-file-row:hover { background: rgba(255, 255, 255, 0.06); }
.ws-file-row.active { background: #EDFDF3; }
.dark .ws-file-row.active { background: rgba(74, 190, 110, 0.12); }
.ws-file-row > i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
}
.ws-file-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .ws-file-name { color: #e2e8f0; }
.ws-file-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: #94a3b8;
}
.ws-file-path {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* File icon colors by kind */
.ws-icon-directory { color: #f59e0b; }
.ws-icon-html { color: #f97316; }
.ws-icon-markdown { color: #6366f1; }
.ws-icon-image { color: #10b981; }
.ws-icon-video { color: #ec4899; }
.ws-icon-audio { color: #8b5cf6; }
.ws-icon-pdf { color: #ef4444; }
.ws-icon-csv { color: #14b8a6; }
.ws-icon-code { color: #3b82f6; }
.ws-icon-office { color: #2563eb; }
.ws-icon-text,
.ws-icon-file { color: #94a3b8; }

/* =====================================================================
   Artifact / File Cards in messages
   ===================================================================== */
.file-card-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
}
.file-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.file-card:hover {
    border-color: #4ABE6E;
    box-shadow: 0 2px 10px -2px rgba(74, 190, 110, 0.25);
}
.dark .file-card { background: #232323; border-color: rgba(255, 255, 255, 0.1); }
.dark .file-card:hover { border-color: #4ABE6E; }
.file-card > i.file-card-icon { font-size: 16px; flex-shrink: 0; }
.file-card-info { min-width: 0; flex: 1; }
.file-card-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .file-card-name { color: #e2e8f0; }
.file-card-sub {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-card-actions { display: flex; gap: 2px; flex-shrink: 0; }
.file-card-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 11px;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.file-card-btn:hover { background: #f1f5f9; color: #334155; }
.dark .file-card-btn:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }

/* Inline path chip (fallback for paths mentioned only in text) */
.file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    margin: 0 1px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 0.88em;
    color: #334155;
    cursor: pointer;
    vertical-align: baseline;
    text-decoration: none;
}
.file-chip:hover { border-color: #4ABE6E; color: #228547; }
.file-chip i { font-size: 0.85em; opacity: 0.7; }
.dark .file-chip { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
.dark .file-chip:hover { border-color: #4ABE6E; color: #4ABE6E; }

/* =====================================================================
   Mention (@) menu
   ===================================================================== */
.mention-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 300px;
    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;
}
.mention-menu.hidden { display: none; }
.dark .mention-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);
}
.mention-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.mention-item:hover,
.mention-item.active { background: #EDFDF3; }
.dark .mention-item:hover,
.dark .mention-item.active { background: rgba(74, 190, 110, 0.1); }
.mention-item > i { width: 15px; text-align: center; font-size: 12px; flex-shrink: 0; }
.mention-item .m-name {
    font-size: 13px;
    color: #334155;
    flex-shrink: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .mention-item .m-name { color: #e2e8f0; }
.mention-item .m-path {
    font-size: 11px;
    color: #94a3b8;
    flex: 1;
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
}
.mention-empty { padding: 10px; font-size: 12px; color: #94a3b8; text-align: center; }

/* Drop target highlight when dragging a workspace file into the chat */
.chat-main.ws-drop-active::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px dashed #4ABE6E;
    border-radius: 14px;
    background: rgba(74, 190, 110, 0.06);
    pointer-events: none;
    z-index: 30;
}

/* Mobile: workspace panel takes over the chat view */
@media (max-width: 768px) {
    .workspace-panel {
        position: absolute;
        inset: 0;
        width: 100% !important;
        max-width: none;
        z-index: 46;
    }
    .workspace-resizer { display: none; }
}

/* =====================================================================
   Agents: cards, detail, composer identity
   ===================================================================== */
/* Team page is a two-pane workbench: a scrollable vertical roster on the left,
   the selected Agent's detail filling the right — the same shape as the desktop
   client. On a narrow screen it collapses to a single column and the detail
   slides over as a full-screen sheet (see the media query below). */
.agents-view.view.active { display: flex; flex-direction: row; }
.agents-view { min-height: 0; overflow: hidden; }
.agents-list-pane {
    display: flex; flex-direction: column; min-height: 0;
    width: 320px; flex-shrink: 0;
    border-right: 1px solid #e2e8f0;
    padding: 18px 14px 8px;
    overflow-y: auto;
}
.dark .agents-list-pane { border-color: rgba(255,255,255,.08); }
.agents-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 0 4px; }
/* A tidier, less shouty header for the roster column. */
.agents-list-head h2 { font-size: 15px; font-weight: 600; }
.agents-list-head p { display: none; }
.agents-list-head > button {
    padding: 6px 12px; font-size: 12.5px; border-radius: 8px;
}
.agents-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agent-card {
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 10px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
/* The status chip floats in the corner instead of taking a row of its own, so
   the "default" card is the same height as the rest of the roster. */
.agent-card-badge {
    position: absolute;
    top: 9px; right: 10px;
    font-size: 9.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 500;
}
.agent-card-badge.agent-chip-on { background: #EDFDF3; color: #17803d; }
.dark .agent-card-badge { background: rgba(255,255,255,.06); color: #94a3b8; }
.dark .agent-card-badge.agent-chip-on { background: rgba(74, 190, 110, .15); color: #86efac; }
.agent-card:hover { background: #f8fafc; }
.dark .agent-card:hover { background: rgba(255,255,255,.04); }
.agent-card.selected { background: #EDFDF3; border-color: transparent; }
.dark .agent-card.selected { background: rgba(74, 190, 110, .14); }
.agent-card.archived { opacity: .55; }
.agent-card-top { display: flex; align-items: center; gap: 10px; padding-right: 44px; min-width: 0; }
.agent-card-top .agent-avatar { flex-shrink: 0; }
.agent-card-name { font-weight: 600; font-size: 13.5px; color: #1e293b; }
.dark .agent-card-name { color: #f1f5f9; }
.agent-card-id { font-size: 11px; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* One line of description under the name, ellipsised — keeps every row the same
   compact height so the roster reads as a clean list, not a wall of cards. */
.agent-card-desc {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .agent-card-desc { color: #94a3b8; }
.agent-card-desc-empty { color: #cbd5e1; }
.dark .agent-card-desc-empty { color: #475569; }
.agent-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.agent-chip {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}
.dark .agent-chip { background: rgba(255,255,255,.06); color: #94a3b8; }
.agent-chip-on { background: #EDFDF3; color: #17803d; }
.dark .agent-chip-on { background: rgba(74, 190, 110, .15); color: #86efac; }

.agent-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
    background: #edfdf3;
    color: #17803d;
}
.agent-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The face an Agent wears until an image is uploaded: its initial on a tinted
   disc. Kept low-saturation, and a tint rather than a solid fill, so a roster
   of a dozen of them reads as one calm list instead of a bag of sweets. Tone 0
   is the neutral one, worn by anything without an id yet (a draft in the
   create modal). */
.agent-avatar-tone-0 { background: #eef1f5; color: #4b5563; }
.agent-avatar-tone-1 { background: #eaf0f7; color: #3f5f80; }
.agent-avatar-tone-2 { background: #ebf3ed; color: #46694e; }
.agent-avatar-tone-3 { background: #f4f1e9; color: #6b5f45; }
.agent-avatar-tone-4 { background: #f5eeeb; color: #7a564d; }
.agent-avatar-tone-5 { background: #f0eef6; color: #574f70; }
.dark .agent-avatar-tone-0 { background: #2a2f36; color: #b6bec9; }
.dark .agent-avatar-tone-1 { background: #26313d; color: #a8c0d6; }
.dark .agent-avatar-tone-2 { background: #263329; color: #a9c7b0; }
.dark .agent-avatar-tone-3 { background: #33302a; color: #cdbe9f; }
.dark .agent-avatar-tone-4 { background: #352c2a; color: #d0b0a7; }
.dark .agent-avatar-tone-5 { background: #2e2b38; color: #b8b0d0; }
.agent-avatar-15 { width: 15px; height: 15px; font-size: 7px; }
.agent-avatar-16 { width: 16px; height: 16px; font-size: 8px; }
.agent-avatar-20 { width: 20px; height: 20px; font-size: 10px; }
.agent-avatar-22 { width: 22px; height: 22px; font-size: 11px; }
.agent-avatar-24 { width: 24px; height: 24px; font-size: 12px; }
.agent-avatar-28 { width: 28px; height: 28px; font-size: 13px; }
.agent-avatar-32 { width: 32px; height: 32px; font-size: 15px; }
.agent-avatar-40 { width: 40px; height: 40px; font-size: 18px; }
.agent-avatar-56 { width: 56px; height: 56px; font-size: 24px; }

/* A drawer rather than a column: the Agent list now sits inside a settings
   tab, which is a normal scrolling page, so the panel cannot rely on being
   the second half of a full-height flex row. */
/* Desktop: the detail is the right pane, filling the space beside the roster.
   `.hidden` (no Agent selected) shows an empty-state placeholder instead of
   collapsing, so the workbench keeps its two-pane shape. */
.agent-detail {
    flex: 1;
    min-width: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.agent-detail.hidden { display: flex; }
.agent-detail.hidden > * { display: none; }
.agent-detail.hidden::before {
    content: attr(data-empty-label);
    margin: auto;
    color: #cbd5e1;
    font-size: 14px;
}
.dark .agent-detail.hidden::before { color: #475569; }
.dark .agent-detail { background: #1A1A1A; }
.agent-detail-header { position: relative; padding: 20px 20px 8px; }
.agent-detail-close {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; border-radius: 8px;
    color: #94a3b8;
}
.agent-detail-close:hover { background: #f1f5f9; }
.dark .agent-detail-close:hover { background: rgba(255,255,255,.06); }
.agent-detail-identity { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.agent-detail-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid #e2e8f0; }
.dark .agent-detail-tabs { border-color: rgba(255,255,255,.08); }
.agent-detail-tab {
    padding: 10px 12px; font-size: 13px; color: #64748b; border-bottom: 2px solid transparent;
}
.agent-detail-tab.active { color: #17803d; border-color: #4ABE6E; font-weight: 600; }
.agent-detail-pane { flex: 1; overflow-y: auto; padding: 16px 20px; }
.agent-core-editor {
    width: 100%; min-height: 520px; padding: 12px;
    background: #f8fafc; color: #1e293b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; border-radius: 10px; resize: vertical; border: 1px solid #e2e8f0;
}
.dark .agent-core-editor { background: #151515; color: #e2e8f0; border-color: rgba(255,255,255,.08); }
/* Read-only rendered markdown, shown instead of the textarea in preview mode.
   Same footprint as the editor so switching modes doesn't jump the layout. */
.agent-core-preview {
    width: 100%; min-height: 520px; padding: 12px 14px;
    background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0;
    overflow-y: auto; font-size: 13px;
}
.dark .agent-core-preview { background: #151515; border-color: rgba(255,255,255,.08); }
.agent-skill-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.dark .agent-skill-row { border-color: rgba(255,255,255,.05); }

/* Custom checkbox: green fill with a white tick when checked, instead of the
   browser default (accent-color renders a black tick that clashes with green).
   Applies to the skills pane's "use all" toggle and each skill row. */
#agent-detail-skills input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex-shrink: 0; margin: 0; cursor: pointer;
    width: 16px; height: 16px; border-radius: 5px;
    border: 1.5px solid #cbd5e1; background: #fff;
    position: relative; transition: background .12s, border-color .12s;
}
.dark #agent-detail-skills input[type="checkbox"] { background: #1f1f1f; border-color: rgba(255,255,255,.2); }
#agent-detail-skills input[type="checkbox"]:hover { border-color: #4ABE6E; }
#agent-detail-skills input[type="checkbox"]:checked {
    background: #4ABE6E; border-color: #4ABE6E;
}
#agent-detail-skills input[type="checkbox"]:checked::after {
    content: ""; position: absolute;
    left: 5px; top: 2px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#agent-detail-skills input[type="checkbox"]:disabled {
    opacity: .5; cursor: not-allowed;
}
.agent-modal {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    display: flex; align-items: center; justify-content: center; z-index: 60;
    backdrop-filter: blur(2px);
}
.agent-modal.hidden { display: none; }
.agent-modal-card-wide { width: min(560px, calc(100% - 32px)) !important; }
.agent-modal-card {
    width: min(460px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: #fff; border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.4);
}
.dark .agent-modal-card { background: #1A1A1A; border: 1px solid rgba(255,255,255,.08); }
.agent-modal-title {
    font-size: 16px; font-weight: 600; color: #1e293b;
    padding: 22px 24px 4px;
}
.dark .agent-modal-title { color: #f1f5f9; }
/* overflow stays visible so an opened dropdown's menu can spill past the last
   field instead of being clipped into a scroll area (which would show a
   scrollbar and trap the options). The card itself scrolls if a form ever
   outgrows the viewport. */
.agent-modal-body { padding: 12px 24px; overflow: visible; }
.agent-modal-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 24px 20px; border-top: 1px solid #f1f5f9;
}
.dark .agent-modal-foot { border-color: rgba(255,255,255,.06); }

/* Shared form vocabulary for the create modal and the detail drawer, so a
   field looks the same wherever it appears: a label above the control, never
   a placeholder standing in for one. */
.agent-field { margin-bottom: 18px; }
.agent-field-label {
    display: block; font-size: 12px; font-weight: 500;
    color: #64748b; margin-bottom: 7px;
}
.dark .agent-field-label { color: #94a3b8; }
.agent-field-hint { font-size: 11px; color: #94a3b8; margin-top: 6px; }
.agent-status-ok { color: #17803d !important; }
.dark .agent-status-ok { color: #86efac !important; }
.agent-status-error { color: #dc2626 !important; }
.dark .agent-status-error { color: #fca5a5 !important; }
#agent-detail-files button[onclick="saveAgentCoreFile()"][disabled] { opacity: 0.55; cursor: default; }
.agent-input {
    width: 100%; height: 40px; padding: 0 12px;
    border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc;
    font-size: 14px; color: #1e293b;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.agent-input::placeholder { color: #cbd5e1; }
.agent-input:focus {
    outline: none; border-color: #4ABE6E;
    box-shadow: 0 0 0 3px rgba(74, 190, 110, .12); background: #fff;
}
/* Responsibilities is a paragraph, not a line: let it breathe and wrap. */
.agent-textarea {
    height: auto; min-height: 84px; padding: 10px 12px;
    line-height: 1.55; resize: vertical; font-family: inherit;
}
.dark .agent-input {
    border-color: #475569; background: rgba(255,255,255,.05); color: #f1f5f9;
}
.dark .agent-input:focus { background: rgba(255,255,255,.07); }
.agent-input-locked {
    width: 100%; min-height: 40px; padding: 9px 12px;
    border-radius: 10px; border: 1px dashed #e2e8f0;
    font-size: 13px; color: #94a3b8; background: #f8fafc;
}
.dark .agent-input-locked { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); }

/* Segmented two-way switch (e.g. shared vs own knowledge base). Kept compact
   so it reads as an inline control rather than a heavy toolbar. */
.agent-seg {
    display: inline-flex; gap: 2px; padding: 2px;
    border-radius: 8px; background: #f1f5f9; border: 1px solid #e2e8f0;
}
.dark .agent-seg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.agent-seg-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 12px; font-weight: 500; color: #64748b; background: transparent;
    transition: background .15s, color .15s;
}
.agent-seg-btn i { font-size: 11px; }
.dark .agent-seg-btn { color: #94a3b8; }
.agent-seg-btn:hover { color: #334155; }
.dark .agent-seg-btn:hover { color: #cbd5e1; }
.agent-seg-btn.active {
    background: #fff; color: #16a34a;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.dark .agent-seg-btn.active { background: rgba(255,255,255,.12); color: #86efac; }

/* An info icon that sits after a field label and reveals its help on hover,
   replacing a permanent paragraph of hint text below the field. The popup
   itself is a JS-positioned element fixed to <body> (see showFieldTip in
   console.js) rather than a CSS ::after, so it can escape an ancestor's
   `overflow: auto` (e.g. the Agent detail drawer) instead of being clipped. */
.agent-field-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.agent-field-label-row .agent-field-label { margin-bottom: 0; }
.agent-field-tip {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; color: #cbd5e1; cursor: help; font-size: 11px;
}
.agent-field-tip:hover { color: #94a3b8; }
.dark .agent-field-tip { color: #64748b; }
.dark .agent-field-tip:hover { color: #94a3b8; }
.agent-tip-popup {
    position: fixed; width: max-content; max-width: 260px; padding: 8px 10px;
    border-radius: 8px; background: #1e293b; color: #f1f5f9;
    font-size: 11px; font-weight: 400; line-height: 1.5; text-align: left; white-space: pre-line;
    opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 200;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.agent-tip-popup.show { opacity: 1; }
.agent-tip-popup::after {
    content: ""; position: absolute; left: var(--tip-arrow-x, 50%); top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1e293b;
}
/* Flipped below the icon when there isn't room above (e.g. near the top of a
   drawer): the arrow points up at the icon instead of down. */
.agent-tip-popup.tip-arrow-top::after {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: #1e293b;
}
.dark .agent-tip-popup { background: #0f172a; }
.dark .agent-tip-popup::after { border-top-color: #0f172a; }
.dark .agent-tip-popup.tip-arrow-top::after { border-bottom-color: #0f172a; }

/* Avatar picker: a live preview beside an emoji grid and an upload button,
   all in the page palette. */
.agent-avatar-picker { display: flex; align-items: flex-start; gap: 14px; }
.agent-avatar-picker-preview { flex-shrink: 0; }
.agent-avatar-picker-body { flex: 1; min-width: 0; padding-top: 4px; }
.agent-avatar-upload {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    padding: 6px 12px; border-radius: 9px;
    border: 1px solid #e2e8f0; background: #fff;
    font-size: 12px; color: #64748b; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.agent-avatar-upload:hover { border-color: #4ABE6E; color: #17803d; }
.dark .agent-avatar-upload { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #94a3b8; }

/* While bytes are in flight: dim the preview and spin a ring over it, and make
   the upload button read as busy so a second click does not stack requests. */
.agent-avatar-picker.is-uploading .agent-avatar-picker-preview { position: relative; }
.agent-avatar-picker.is-uploading .agent-avatar-picker-preview::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(74,190,110,.35); border-top-color: #4ABE6E;
    animation: agent-avatar-spin .7s linear infinite;
}
.agent-avatar-picker.is-uploading .agent-avatar-picker-preview .agent-avatar { opacity: .35; }
.agent-avatar-picker.is-uploading .agent-avatar-upload { opacity: .6; pointer-events: none; }
@keyframes agent-avatar-spin { to { transform: rotate(360deg); } }

/* Detail-drawer buttons, matching the create modal's foot. */
.agent-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* Delete is destructive, so it sits apart from the everyday save/chat buttons. */
.agent-detail-delete { margin-left: auto; }
.agent-btn {
    height: 34px; padding: 0 14px; border-radius: 9px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.agent-btn-primary { background: #4ABE6E; color: #fff; }
.agent-btn-primary:hover { background: #3aa85d; }
.agent-btn-ghost { border: 1px solid #e2e8f0; color: #475569; background: #fff; }
.agent-btn-ghost:hover { border-color: #94a3b8; }
.dark .agent-btn-ghost { background: transparent; border-color: rgba(255,255,255,.12); color: #cbd5e1; }
.agent-btn-text { color: #64748b; background: transparent; }
.agent-btn-text:hover { color: #334155; }
.dark .agent-btn-text:hover { color: #e2e8f0; }
.agent-btn-sm { padding: 4px 8px; font-size: 12px; }
.agent-btn-text.agent-btn-sm { color: #4ABE6E; }
.agent-btn-text.agent-btn-sm:hover { color: #228547; }
.agent-btn-accent { color: #17803d; }
.agent-btn-danger { color: #ef4444; background: transparent; }
.agent-btn-danger:hover { color: #dc2626; }

.composer-identity-row { display: flex; align-items: flex-start; gap: 10px; }
/* The identity chip lives in the toolbar's right group now, so it centers with
   the other chips instead of hanging from the top of the card. */
.composer-identity { position: relative; display: inline-flex; align-items: center; }
.composer-identity.hidden { display: none; }
.composer-agent-btn {
    border-radius: 50%; padding: 0; line-height: 0;
    box-shadow: 0 0 0 2px transparent;
}
.composer-agent-btn { position: relative; }
.composer-agent-btn:hover { box-shadow: 0 0 0 2px #4ABE6E; }
/* Locked only means the owner can no longer be swapped; the button still opens
   its menu, so it keeps a pointer. */
.composer-agent-btn.locked:hover { box-shadow: 0 0 0 2px #cbd5e1; }
.composer-agent-count {
    position: absolute; right: -4px; bottom: -4px;
    min-width: 13px; height: 13px; padding: 0 2px;
    border-radius: 999px; border: 2px solid #fff;
    background: #4ABE6E; color: #fff;
    font-size: 8px; font-weight: 600; line-height: 9px; text-align: center;
}
.dark .composer-agent-count { border-color: #1A1A1A; }

/* The current Agent is marked by its trailing check, not a standing highlight:
   a permanent green fill fought the hover state, so two rows looked selected at
   once. Hover is the only fill; current just tints its text and check. */
.composer-menu-item.current { color: #228547; }
.composer-menu-item.current:hover { background: #EDFDF3; }
.dark .composer-menu-item.current { color: #6EE7A0; }
.dark .composer-menu-item.current:hover { background: rgba(74, 190, 110, .14); }
.composer-menu-item.current > i.fa-check { color: #4ABE6E; }
/* A member already in the conversation is a plain row, not a standing green
   fill (that read as "everything is selected"). A dim ✓ marks that it's in the
   chat; hovering a removable teammate swaps it for a red × (the owner row is a
   non-button and stays put). */
.composer-menu-item.joined .joined-check { color: #94a3b8; }
.composer-menu-item.joined .joined-remove { display: none; }
button.composer-menu-item.joined:hover { background: #FEF2F2; color: #b91c1c; cursor: pointer; }
.dark button.composer-menu-item.joined:hover { background: rgba(239, 68, 68, .12); color: #fca5a5; }
button.composer-menu-item.joined:hover .joined-check { display: none; }
button.composer-menu-item.joined:hover .joined-remove { display: inline; color: #b91c1c; }
.composer-menu-item.joined.is-owner { cursor: default; }
.composer-menu-badge {
    font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 999px;
    background: #f1f5f9; color: #64748b;
}
.dark .composer-menu-badge { background: rgba(255,255,255,.08); color: #94a3b8; }
.composer-menu-item .agent-avatar { flex-shrink: 0; }
.composer-menu-sep { height: 1px; margin: 5px 6px; background: #eef2f6; }
.dark .composer-menu-sep { background: rgba(255, 255, 255, 0.08); }

/* Overlapping faces read as "several people are in here" at a glance, which is
   the only thing this row needs to say. */
.session-faces { display: inline-flex; flex-shrink: 0; }
.session-faces .agent-avatar {
    border: 1.5px solid #fff;
    box-sizing: content-box;
}
.session-faces .agent-avatar + .agent-avatar { margin-left: -8px; }
.dark .session-faces .agent-avatar { border-color: #141414; }
/* A "+N" cap keeps the stack short while still telling how big the group is. */
.session-face-more {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 4px; margin-left: -8px;
    border: 1.5px solid #fff; box-sizing: content-box;
    border-radius: 999px; background: #e2e8f0; color: #475569;
    font-size: 10px; font-weight: 600; line-height: 1;
}
.dark .session-face-more { border-color: #141414; background: #2a2a2a; color: #cbd5e1; }

.bot-face { flex-shrink: 0; line-height: 0; }
.bot-speaker {
    margin: 0 0 4px 2px;
    font-size: 11px; font-weight: 500; color: #64748b;
}
.dark .bot-speaker { color: #94a3b8; }

/* A mention reads as the teammate it names: a rounded chip carrying their face
   and name, so "@我的运营助手" looks addressed rather than typed. */
.mention-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px 1px 2px; border-radius: 999px;
    font-weight: 500; line-height: 1;
    /* The chip carries a 16px avatar, so it is taller than the surrounding
       text. `vertical-align: middle` centres it on the font's x-height, which
       for CJK still leaves it sitting a hair low; the small negative shift
       lands its optical centre on the text centre. */
    vertical-align: middle;
    transform: translateY(-1.5px);
    background: rgba(255, 255, 255, .22);
}
.mention-tag-face {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex-shrink: 0;
}
/* The avatar is an inline <img>; without `block` it rides the text baseline and
   leaves a descender gap that drops it a few px below the name. `block` removes
   that gap so the face and the name share a centre. */
.mention-tag-face .agent-avatar {
    display: block; width: 16px; height: 16px; border-radius: 50%;
}
.mention-tag-name { white-space: nowrap; }
/* In a bot bubble (white surface) the chip needs its own tint to read as a chip. */
.bot-message-group .mention-tag { background: #EDFDF3; color: #17803d; }
.dark .bot-message-group .mention-tag { background: rgba(74, 190, 110, .16); color: #6EE7A0; }

.channel-agent-bind {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; padding: 10px 12px;
    background: #f8fafc; border-radius: 10px;
}
.dark .channel-agent-bind { background: rgba(255,255,255,.04); }
.channel-agent-bind select {
    flex: 1; min-width: 0;
    padding: 6px 8px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #fff; font-size: 13px;
}
.dark .channel-agent-bind select { background: #222; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
/* Bind-agent avatar dropdown fills the row like the old <select> did. */
.channel-agent-bind .cfg-dropdown { flex: 1 1 auto; min-width: 0; width: auto !important; }

/* Narrow screens (phones, split panes): the roster takes the full width and the
   detail slides over it as a sheet only once an Agent is picked. Nothing
   selected -> no empty pane hanging around, just the list. */
@media (max-width: 900px) {
    .agents-list-pane { width: 100%; border-right: none; }
    .agent-detail {
        position: absolute; inset: 0; z-index: 20;
        width: 100%; border-left: none;
        box-shadow: none;
    }
    .agent-detail.hidden { display: none; }
    .agent-detail.hidden::before { content: none; }
}