/* =====================================================================
   CowAgent Console Styles
   ===================================================================== */

/* Mobile viewport fixes.
   On mobile browsers `100vh` includes the (collapsible) URL bar, so a full-height
   layout ends up taller than the visible area and leaks a vertical scrollbar/jitter.
   `dvh` tracks the *dynamic* viewport instead. On desktop `dvh` equals `vh`, so this
   is a no-op there and leaves the PC layout untouched. Guarded by @supports so old
   engines keep the `100vh` fallback baked into the markup. */
@supports (height: 100dvh) {
    html.h-screen,
    body.h-screen,
    #app.h-screen,
    #main-content.h-screen,
    .session-panel {
        height: 100dvh;
    }
}

/* Belt-and-braces horizontal-overflow guard for phones. Some inner toolbars are
   laid out as single non-wrapping flex rows that can exceed a narrow viewport; on
   iOS Safari `overflow-x: hidden` alone doesn't always stop the page from panning.
   Scoped to small screens so the desktop layout is completely unaffected. */
@media (max-width: 768px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    /* The header logout icon is redundant on phones (and was overflowing the top
       bar). Hide it on small screens regardless of the JS-toggled `hidden` class. */
    #logout-btn-header { display: none !important; }
}

/* 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; }
/* 门店总控室里锁着的方案页（定位/团购/内容），点了只弹 toast，视觉上淡一档。 */
.sidebar-item.shop-nav-locked { opacity: .55; }

/* 店铺账号的暖色侧栏。类由 renderShopNav() 在「有管家且不是管理员」时加上。
   网吧和管理员不加这个类，下面的规则一条都不会命中，黑底侧栏保持原样。
   选择器比条目上的 hover:bg-white/5 更具体，否则浅色底上悬停仍会变成白字。 */
#sidebar.sidebar-shop {
    background: #fff;
    color: #26313d;
    border-right: 1px solid #e3e9ef;
}
#sidebar.sidebar-shop #sidebar-brand,
#sidebar.sidebar-shop #sidebar-foot {
    border-color: #e3e9ef;
}
#sidebar.sidebar-shop #sidebar-brand {
    height: auto;
    min-height: 4.5rem;
    padding-top: 1.15rem;
    padding-bottom: 1rem;
}
#sidebar.sidebar-shop #sidebar-brand-name {
    color: #26313d;
    font-size: 17px;
    font-weight: 700;
}
#sidebar.sidebar-shop .nav-group-shop {
    color: #8995a4;
}
#sidebar.sidebar-shop .menu-group > button {
    color: #8995a4;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 500;
}
#sidebar.sidebar-shop .menu-group > button:hover {
    color: #26313d;
}
#sidebar.sidebar-shop .sidebar-item {
    color: #3c4654;
}
#sidebar.sidebar-shop .sidebar-item .item-icon {
    color: #8b95a3;
}
#sidebar.sidebar-shop .sidebar-item:hover {
    background: #fff6f1;
    color: #26313d;
}
#sidebar.sidebar-shop .sidebar-item.active {
    background: #fff0e8;
    color: #26313d;
}
#sidebar.sidebar-shop .sidebar-item.active .item-icon {
    color: #df5b2e;
}
/* 图片工作台是外链，不用 sidebar-item，否则点击会被当成站内页。
   颜色跟店铺侧栏其它条目对齐。 */
#sidebar.sidebar-shop .sidebar-link {
    color: #3c4654;
    text-decoration: none;
}
#sidebar.sidebar-shop .sidebar-link .item-icon {
    color: #8b95a3;
}
#sidebar.sidebar-shop .sidebar-link:hover {
    background: #fff6f1;
    color: #26313d;
}
/* 店铺主区域默认白底。gray-50 偏灰，这里盖成纯白；切到深色主题后仍走原来的深色。 */
body.shop-console {
    background-color: #fff;
}
/* 店铺侧栏暂时露出「管理」（智能体、配置、技能、记忆、知识、通道、MCP、定时），
   方便在技能页核对店铺技能是否装上。账号、店铺管理、监控仍按管理员身份单独控制。 */
#sidebar.sidebar-shop #sidebar-foot {
    color: #8995a4;
}
#sidebar.sidebar-shop #sidebar-foot .text-primary-400 {
    color: #df5b2e;
}

/* 工作空间按钮的显隐不能只靠 JS 切 .hidden：workspace.js 自己在
   #view-chat 上挂了一个 MutationObserver（第 1283–1289 行），只要这个
   视图是 active 就无条件把 .hidden 摘掉——门店总控室的四个"对话页"本来
   就活在 #view-chat 里，每次 navigateTo('chat') 触发 class 变化，这个
   观察器就把我们刚隐藏的按钮重新翻出来，而且是微任务，跟
   _requestShopChromeUpdate() 的宏任务谁先谁后并不总是稳的。改用样式层
   兜底：门店对话页/总控室期间给 <body> 打一个标记类，用 !important 直接
   摁住这个按钮，不管 workspace.js 的观察器把 .hidden 加不加得上都不受
   影响——这条规则根本不看 .hidden，赢面不取决于谁先执行。不改
   workspace.js，那是网吧和管理员也在用的公共逻辑。 */
body.shop-chrome-active #workspace-toggle-btn { display: none !important; }

/* 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; }
/* A dropdown inside a scrolling modal body (e.g. the "add vendor" provider
   picker) would otherwise be clipped by the body's overflow-y-auto. While one
   is open, let the body overflow so the menu can extend past it; the menu's own
   max-height keeps it from running off the modal. */
.modal-scroll-body:has(.cfg-dropdown.open) { overflow: visible; }
.modal-scroll-body:has(.cfg-dropdown.open) .cfg-dropdown.open { z-index: 60; }
/* 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(100dvh - 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(100dvh - 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; flex-wrap: wrap;
    padding: 16px 24px 20px; border-top: 1px solid #f1f5f9;
}
.dark .agent-modal-foot { border-color: rgba(255,255,255,.06); }
/* 状态文字放在按钮上方单独一行，不挤压取消/保存：有内容时占满一整行，
   把两个按钮一起挤到下一行（仍然并排，不会变成竖排）；没内容（textContent
   清空后是真正的空节点，:empty 才会命中）时完全不占位，不会在弹窗里
   平白留一条空行。配合 setModalStatus() 摘掉/加回的 opacity-0 一起用。 */
.agent-modal-foot .agent-field-hint { flex: 1 1 100%; order: -1; }
.agent-modal-foot .agent-field-hint:empty { display: none; }

/* 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); }
/* The dropdown list is drawn by the OS, which does not inherit the select's
   translucent background (it falls back to white) but does inherit its text
   colour — leaving near-white text on a near-white list. Give the options an
   opaque dark background of their own so the two match again. */
.dark .agent-input option,
.dark .agent-select option { background-color: #1e293b; color: #f1f5f9; }
.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; }
/* The owner row never turns into a red "remove" affordance on hover — it is the
   main Agent and stays put. */
.composer-menu-item.joined.is-owner:hover { background: transparent; color: inherit; }
.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; }
/* The "main Agent" badge is the one standing marker in the roster, so it reads
   in the brand green rather than the muted grey of an ordinary badge. */
.composer-menu-badge.owner-badge { background: #4ABE6E; color: #fff; }
.dark .composer-menu-badge.owner-badge { background: #4ABE6E; color: #fff; }
.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; }
}

/* ---------------------------------------------------------------------------
   Guided questions on the welcome screen.

   A category panel is not itself clickable: the question inside it is. That
   distinction is the whole layout — six generic cards became four headings with
   four concrete questions each, so the click target had to move down a level.
   --------------------------------------------------------------------------- */
.guide-q {
    position: relative;
    width: 100%;
    text-align: left;
    padding: 4px 8px 4px 16px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: #64748b;
    cursor: pointer;
    background: none;
    border: 0;
    transition: background-color .15s ease, color .15s ease;
}

.guide-q::before {
    content: "·";
    position: absolute;
    left: 6px;
    color: #94a3b8;
}

.guide-q:hover {
    background-color: rgba(100, 116, 139, .09);
    color: #0f172a;
}

.dark .guide-q { color: #94a3b8; }
.dark .guide-q:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #e2e8f0;
}

/* Keyboard users get the same affordance the mouse gets. */
.guide-q:focus-visible {
    outline: 2px solid rgba(16, 185, 129, .5);
    outline-offset: 1px;
}

/* Says why "today" is never in the list, before anyone asks. */
.guide-cutoff {
    margin-top: 14px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

/* =====================================================================
   门店总控室 / 档案 → 方案 面板
   =====================================================================
   版式照搬静态原型（%TEMP%\yizhi-mockup\index.html v4）的 <style>，类名
   全部加 shop- 前缀，跟控制台现有的 Tailwind/console.css 类不会撞车——
   没有管家的账号（网吧、管理员）这些选择器一个都用不上，纯新增，零影响。
   深色模式只给最基本的反色，不追求跟原型一样精致。
   ===================================================================== */

#shop-pane {
    display: none;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: #f7f9fc;
    height: 100%;
}
#shop-pane:not(.hidden) { display: flex; }
.dark #shop-pane { background: #141414; }

/* #chat-main 收窄成右边的"管家对话栏"（对应原型的 .chat-col）。 */
.chat-main.shop-narrow { flex: 0 0 430px; }

/* composer 底部工具条在全宽对话页挤得下（new-chat/清除上下文/附件/分隔线/
   工作空间选择器/权限选择器 一行，模型选择器/身份/优化/麦克风/发送 另一
   行靠右），到 430px 的门店对话栏就会互相重叠、模型名被压住（QA 报告过）。
   先试过换成两行、右对齐，实测看着是"断成两截、中间空一大块"，观感比
   重叠还差（第二轮 QA 报告）。改成压缩着排单行：图标缩小、工作空间选择器
   收成纯图标（跟权限选择器本来就是这个做法一致）、模型选择器去掉图标只
   留名字、Agent 身份头像隐藏（门店页头部 #shop-chat-header 已经显示了是
   在跟谁说话，composer 里再来一个是重复信息）、"智能优化输入"隐藏（不是
   "发消息/发照片给管家"这条主路径上的东西）。发送和附件按钮不在这次精简
   范围内，保持原尺寸、始终清楚可点。只在这个作用域下生效，全宽对话页的
   composer 一个像素都不碰。 */
.chat-main.shop-narrow .composer-toolbar { gap: 3px; }
.chat-main.shop-narrow .composer-group { gap: 1px; }
.chat-main.shop-narrow .composer-icon-btn { width: 26px; height: 26px; font-size: 12px; }
.chat-main.shop-narrow .composer-divider { margin: 0 3px; }
.chat-main.shop-narrow .composer-chip { padding: 3px 7px; font-size: 11px; }
/* 工作空间选择器收成纯图标——门店页面的"默认空间"文字对管家对话没有
   意义，跟权限选择器共用同一套"只留图标"视觉（.composer-chip-icon-only
   本来就是给权限选择器写的，这里直接复用）。 */
.chat-main.shop-narrow #workspace-selector-btn .composer-chip-label,
.chat-main.shop-narrow #workspace-selector-btn .composer-chip-caret { display: none; }
/* 模型选择器去掉领头的芯片图标，只留模型名——"只显示模型名"是用户自己
   要求的展示方式，caret 保留，点了还能换模型。 */
.chat-main.shop-narrow #model-selector-btn { max-width: 96px; }
.chat-main.shop-narrow #model-selector-btn > i:first-child { display: none; }
.chat-main.shop-narrow .composer-identity { display: none !important; }
.chat-main.shop-narrow #optimize-btn { display: none; }

/* 经营助手的空对话欢迎语 + 引导卡片，不该出现在管家的固定会话里（QA
   报告）。纯 CSS 隐藏而不是一次性 JS 清空：#welcome-screen 会被
   loadHistory()/newChat() 反复整块重建，用 CSS 挂在 .shop-narrow 这个
   作用域上就不用在每个重建路径后面都补一次隐藏调用。 */
.chat-main.shop-narrow #welcome-screen { display: none; }

/* 管家身份头部（原型 .chat-head）：头像 + 名字/说明 + 当前页面 badge。
   常驻在消息区上方，不随消息滚动——所以是 #chat-messages 的兄弟节点，
   不是它的孩子。只在门店对话页出现，JS 按 shopPaneMode 切 hidden。 */
#shop-chat-header {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    border-bottom: 1px solid #e8edf2; flex-shrink: 0;
}
#shop-chat-header.hidden { display: none; }
.dark #shop-chat-header { border-color: rgba(255, 255, 255, .08); }
.shop-chat-header-face {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: #fff0e8; color: #dc5328; display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
}
.dark .shop-chat-header-face { background: rgba(220, 83, 40, .2); color: #f0a37e; }
.shop-chat-header-text { min-width: 0; flex: 1; }
.shop-chat-header-text strong { display: block; font-size: 15px; color: #26313d; }
.dark .shop-chat-header-text strong { color: #e2e8f0; }
.shop-chat-header-text small { display: block; font-size: 12px; color: #9aa5b1; margin-top: 1px; }
.dark .shop-chat-header-text small { color: #64748b; }
.shop-chat-header-badge {
    flex-shrink: 0; font-size: 12px; font-weight: 650; white-space: nowrap;
    padding: 5px 11px; border-radius: 99px; background: #fff0e8; color: #db582c;
}
.dark .shop-chat-header-badge { background: rgba(220, 83, 40, .18); color: #f0a37e; }
.shop-chat-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.shop-chat-clear { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border: 0; background: transparent; color: #718096; font-size: 12px; cursor: pointer; }
.shop-chat-clear:hover:not(:disabled) { color: #dc5328; }
.shop-chat-clear:disabled { opacity: .45; cursor: not-allowed; }

/* 空会话时管家的引导语——不是真实消息，样式故意比真消息气泡简单：没有
   复制/朗读按钮、没有时间戳，避免被当成模型说过的话。是否显示、显示
   什么由 console.js 的 _updateShopChatGreet() 算，这里的选择器只兜底
   "离开门店对话页无论如何都不显示"。 */
/* 横向 padding 交给 chat.html 上的 Tailwind 工具类（px-4/sm:px-6/py-3）
   去对齐真实消息气泡的边距（bot-message-group 用的是同一组类）——这里
   不再自己写 padding，免得跟 Tailwind 抢，对不齐消息区的左右边界。 */
.shop-greet { max-width: 88%; flex-shrink: 0; }
.chat-main.shop-narrow .shop-greet.hidden { display: none; }
.chat-main:not(.shop-narrow) .shop-greet { display: none !important; }
.shop-greet-face {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: #fff0e8; color: #dc5328; display: grid; place-items: center;
    font-weight: 700; font-size: 12px; margin-top: 2px;
}
.dark .shop-greet-face { background: rgba(220, 83, 40, .2); color: #f0a37e; }
.shop-greet-content {
    background: #f8fafc; border-radius: 14px; padding: 12px 15px;
    font-size: 14px; line-height: 1.7; color: #47535f;
}
.dark .shop-greet-content { background: rgba(255, 255, 255, .04); color: #cbd5e1; }

/* 操作 chip 容器（补下一类 / 生成定位诊断 / 确认，没问题 / 我想改）。
   跟 .shop-greet 一样是 #chat-messages 的兄弟节点，不在消息流里。样式
   照抄原型的 .chip。 */
.shop-action-chips {
    display: flex; align-items: center; justify-content: flex-end;
    column-gap: 8px; row-gap: 8px; flex-wrap: wrap;
    margin-top: 10px; padding: 10px 16px 12px;
    border-top: 1px solid #e7edf2;
    background: rgba(248, 250, 252, .92);
}
.chat-main.shop-narrow .shop-action-chips.hidden { display: none; }
.chat-main:not(.shop-narrow) .shop-action-chips { display: none !important; }
.dark .shop-action-chips {
    border-top-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
}
.shop-chip {
    border: 1px solid #e2e8ee; border-radius: 10px; background: #fff; color: #718092;
    padding: 8px 12px; font-size: 13px; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.shop-chip:hover { background: #fff0e8; border-color: #f2cbbd; color: #db5b31; }
.dark .shop-chip { background: #1a1a1a; border-color: rgba(255, 255, 255, .12); color: #a3aab5; }
.dark .shop-chip:hover { background: rgba(232, 92, 45, .16); border-color: rgba(232, 92, 45, .35); color: #f0a37e; }

.shop-workspace { flex: 1; min-width: 0; overflow: auto; padding: 38px 44px 60px; }
.shop-wrap { max-width: 1180px; margin: 0 auto; }
.shop-eyebrow { font-size: 13px; color: #df5b2e; font-weight: 650; letter-spacing: .035em; }
.shop-page-title { font-size: 32px; margin: 12px 0 8px; letter-spacing: -.03em; color: #1c2530; }
.dark .shop-page-title { color: #f1f5f9; }
.shop-page-sub { font-size: 15px; margin: 0 0 26px; line-height: 1.7; }
.shop-muted { color: #8591a0; }
.dark .shop-muted { color: #8a93a3; }

.shop-panel {
    background: #fff; border: 1px solid #e3e9f0; border-radius: 16px;
    padding: 26px; box-shadow: 0 8px 30px rgba(44, 67, 91, .025);
}
.dark .shop-panel { background: #1a1a1a; border-color: rgba(255, 255, 255, .08); box-shadow: none; }

.shop-button {
    border: 1px solid #dfe5ec; border-radius: 10px; padding: 11px 18px;
    background: #fff; color: #344150; font-weight: 600; font-size: 14px;
    cursor: pointer; transition: transform .15s, background .15s, border-color .15s;
}
.shop-button:hover { transform: translateY(-1px); border-color: #e9a389; }
.shop-button-primary { background: #e85c2d; border-color: #e85c2d; color: #fff; }
.shop-button-primary:hover { background: #d85126; }
.shop-button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.dark .shop-button { background: #232323; border-color: rgba(255, 255, 255, .12); color: #e2e8f0; }
.dark .shop-button-primary { background: #e85c2d; border-color: #e85c2d; color: #fff; }

.shop-badge {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 650;
    white-space: nowrap; background: #f1f4f7; color: #778598;
}
.shop-badge-orange { background: #fff0e8; color: #db582c; }
.shop-badge-green { background: #eaf8f0; color: #21875b; }
.shop-badge-neutral { background: #f1f4f7; color: #778598; }
.dark .shop-badge { background: rgba(255, 255, 255, .08); color: #a3aab5; }
.dark .shop-badge-orange { background: rgba(232, 92, 45, .18); color: #f0a37e; }
.dark .shop-badge-green { background: rgba(33, 135, 91, .2); color: #7fd8ab; }

.shop-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-section-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 38px 0 16px; }
.shop-section-line h2 { margin: 0; font-size: 19px; color: inherit; }
.shop-section-line span { color: #8b96a4; font-size: 13px; }
.shop-section-line-compact { margin: 0 0 22px; flex-wrap: wrap; }
.shop-section-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 收起管家不跟底部保存按钮挤在一起。颜色跟卡片走，不用实心橙。 */
.shop-butler-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; flex: none;
    border: 1px solid #e3e9f0; background: #fff; color: #344150;
    border-radius: 12px; padding: 8px 14px 8px 8px; cursor: pointer; text-align: left;
}
.shop-butler-toggle:hover { background: #f7f8fa; border-color: #d5dde6; }
.shop-butler-toggle-mark {
    width: 32px; height: 32px; border-radius: 9px; background: #f3f5f8; color: #5c6b7a;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    font-size: 18px; font-weight: 700;
}
.shop-butler-toggle-mark::before { content: "›"; }
.shop-butler-toggle.is-collapsed { background: #f7f8fa; color: #26313d; border-color: #d5dde6; }
.shop-butler-toggle.is-collapsed:hover { background: #f1f4f7; }
.shop-butler-toggle.is-collapsed .shop-butler-toggle-mark { background: #e8edf2; color: #3d4b5c; }
.shop-butler-toggle.is-collapsed .shop-butler-toggle-mark::before { content: "‹"; }
.shop-butler-toggle-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.shop-butler-toggle-label { font-size: 14px; font-weight: 750; }
/* 按钮只留「收起管家 / 展开管家」，说明文字不展示。 */
.shop-butler-toggle-hint { display: none; }
.shop-butler-toggle.is-collapsed .shop-butler-toggle-hint { color: #738193; }
.dark .shop-butler-toggle { background: #232323; border-color: rgba(255, 255, 255, .12); color: #e2e8f0; }
.dark .shop-butler-toggle-mark { background: rgba(255, 255, 255, .06); color: #cbd5e1; }
.dark .shop-butler-toggle-hint,
.dark .shop-butler-toggle.is-collapsed .shop-butler-toggle-hint { color: #94a3b8; }
#shop-butler-hide {
    border: 1px solid #e3e9f0; background: #fff; color: #344150;
    font-weight: 650; font-size: 13px; border-radius: 999px; padding: 6px 12px;
}
.dark #shop-butler-hide { background: #232323; border-color: rgba(255, 255, 255, .12); color: #e2e8f0; }
/* 经营助手不提供语言和背景色切换，界面固定白底、简体中文。 */
body.shop-console #lang-selector,
body.shop-console #theme-toggle { display: none !important; }

/* 运营登录后只留「产出审核」这一组。其它组即使被别的脚本摘掉 hidden 也不显示。 */
body.ops-console #nav-chat-group,
body.ops-console #nav-shop-tools,
body.ops-console #nav-manage-group,
body.ops-console #menu-monitor-group {
    display: none !important;
}
body.ops-console #menu-ops-group {
    display: block !important;
}
.shop-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.shop-actions-between { justify-content: space-between; }
.shop-text-link { font-size: 14px; color: #dc582d; font-weight: 650; }

/* 总控室 */
.shop-lead-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .8fr); gap: 18px; margin-top: 24px; }
.shop-lead-card { border-color: #efc3b3; background: linear-gradient(135deg, #fff, #fffaf7); }
.dark .shop-lead-card { border-color: rgba(232, 92, 45, .35); background: linear-gradient(135deg, #1a1a1a, #201a17); }
.shop-lead-card h2 { font-size: 24px; max-width: 780px; line-height: 1.45; margin: 12px 0 10px; }
.shop-lead-card p { max-width: 750px; line-height: 1.7; margin: 0; }
.shop-slim-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; }
.shop-slim-card h3 { margin: 4px 0 0; font-size: 18px; }
.shop-slim-card p { line-height: 1.7; margin: 0; }
.shop-bar { height: 8px; background: #f1f4f7; border-radius: 99px; overflow: hidden; margin: 16px 0 8px; max-width: 500px; }
.shop-bar i { display: block; height: 100%; background: #e85c2d; border-radius: 99px; transition: width .4s; }
.dark .shop-bar { background: rgba(255, 255, 255, .08); }

.shop-card-grid { display: grid; gap: 16px; }
.shop-card-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shop-card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-card-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-module-card, .shop-tool-card {
    appearance: none; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.shop-module-card {
    position: relative; min-height: 155px; padding: 21px;
    background: #fff; border: 1px solid #e3e9f0; border-radius: 15px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.shop-module-card:hover, .shop-tool-card:hover { background: #fff8f4; }
.dark .shop-module-card, .dark .shop-tool-card { background: #1a1a1a; border-color: rgba(255, 255, 255, .08); }
.dark .shop-module-card:hover, .dark .shop-tool-card:hover { background: #221d1a; }
.shop-module-title { font-size: 16px; font-weight: 700; }
.shop-module-card small { color: #84909e; line-height: 1.5; }
.shop-card-arrow { position: absolute; right: 18px; top: 20px; color: #b2bcc7; font-size: 18px; }
.shop-tool-card { min-height: 180px; padding: 25px; background: #fff; border: 1px solid #e3e9f0; border-radius: 15px; display: flex; flex-direction: column; gap: 8px; }
.shop-tool-card strong { font-size: 19px; }
.shop-tool-card p { color: #778598; font-size: 14px; line-height: 1.7; flex: 1; margin: 0; }
.shop-disabled { opacity: .5; border-style: dashed; cursor: default; }
.shop-disabled:hover { background: #fff; }
.dark .shop-disabled:hover { background: #1a1a1a; }

/* 基础资料页 */
.shop-collect-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 18px; margin-top: 4px; }
.shop-collect-nav { align-self: start; padding: 12px; position: sticky; top: 0; }
.shop-collect-nav button {
    width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px;
    border: 0; border-radius: 9px; background: none; text-align: left; color: #708091; cursor: pointer;
}
.shop-collect-nav button:hover { background: #fff8f4; }
.dark .shop-collect-nav button:hover { background: rgba(232, 92, 45, .1); }
.shop-collect-nav button.shop-selected { background: #fff0e8; color: #d85b31; font-weight: 700; }
.dark .shop-collect-nav button.shop-selected { background: rgba(232, 92, 45, .18); color: #f0a37e; }
.shop-collect-nav .shop-num {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: #f0f3f7; flex: none; font-size: 12px;
}
.shop-collect-nav button.shop-cat-done .shop-num { background: #e8f7ef; color: #268c60; }
/* 225px 固定宽的导航栏，四字类名 + 状态文字很容易挤到换行（QA 报告过）。
   .shop-name 不让类名自己折行，容器实在窄到放不下就省略号截断，不折成
   竖排单字；.shop-st 状态文字（"缺 N"/锁定提示）同理不折行，宁可让它
   紧贴在类名右边也不要换行——它已经改成最短写法，正常宽度下够用。 */
.shop-collect-nav .shop-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1;
}
.shop-collect-nav .shop-st { margin-left: auto; font-size: 11px; font-weight: 600; color: #db582c; white-space: nowrap; flex: none; }
.shop-collect-nav button.shop-cat-done .shop-st { color: #268c60; }
.shop-collect-nav button.shop-locked { color: #b7c0ca; cursor: not-allowed; }
.shop-collect-nav button.shop-locked:hover { background: none; }
.dark .shop-collect-nav { background: #1a1a1a; }

.shop-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shop-field { display: grid; gap: 7px; margin-bottom: 18px; font-size: 14px; color: #536273; font-weight: 600; }
.dark .shop-field { color: #c3cad4; }
.shop-field-full { grid-column: 1 / -1; }
.shop-field-lbl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-field-input {
    width: 100%; box-sizing: border-box; border: 1px solid #dce3eb; border-radius: 9px;
    padding: 11px 13px; background: #fff; color: #26313d; font: inherit; font-size: 14px;
    font-weight: 500; line-height: 1.6;
}
.shop-field-input:focus { outline: none; border-color: #e85c2d; box-shadow: 0 0 0 3px #fff0e8; }
.dark .shop-field-input { background: #161616; border-color: rgba(255, 255, 255, .12); color: #e2e8f0; }
.dark .shop-field-input:focus { box-shadow: 0 0 0 3px rgba(232, 92, 45, .15); }
.shop-field-input-long { min-height: 96px; resize: vertical; }
.shop-field-butler {
    margin-left: auto; border: 0; background: none; color: #dc582d; font-size: 12px;
    font-weight: 650; cursor: pointer; padding: 0; white-space: nowrap;
}
.shop-field-butler:hover { text-decoration: underline; }
.dark .shop-field-butler { color: #f0a37e; }
.shop-actions-tight { margin-top: 0; }
.shop-field-val {
    border: 1px solid #dce3eb; border-radius: 9px; padding: 11px 13px;
    background: #fff; color: #26313d; font-size: 14px; font-weight: 500; min-height: 44px;
    line-height: 1.6; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    cursor: pointer; transition: border-color .15s, box-shadow .15s; text-align: left; width: 100%;
}
.dark .shop-field-val { background: #161616; border-color: rgba(255, 255, 255, .12); color: #e2e8f0; }
.shop-field-val-long { align-items: flex-start; min-height: 90px; }
.shop-field-val:hover { border-color: #e85c2d; box-shadow: 0 0 0 3px #fff0e8; }
.dark .shop-field-val:hover { box-shadow: 0 0 0 3px rgba(232, 92, 45, .15); }
.shop-field-val-empty { color: #a7b1bc; border-style: dashed; background: #fafbfd; font-weight: 500; }
.dark .shop-field-val-empty { background: #161616; }
.shop-field-val-ro { background: #f5f8fb; cursor: default; color: #708091; }
.dark .shop-field-val-ro { background: #202020; color: #8a93a3; }
.shop-field-val-ro:hover { border-color: #dce3eb; box-shadow: none; }
.shop-field-go { font-size: 12px; color: #dc582d; font-weight: 650; white-space: nowrap; opacity: 0; transition: opacity .15s; flex: none; }
.shop-field-val:hover .shop-field-go { opacity: 1; }
.shop-flash { animation: shop-flash 1.4s ease-out; }
@keyframes shop-flash {
    0% { background: #fff0e8; border-color: #e85c2d; }
    100% { background: #fff; }
}
.dark .shop-flash { animation: shop-flash-dark 1.4s ease-out; }
@keyframes shop-flash-dark {
    0% { background: rgba(232, 92, 45, .25); border-color: #e85c2d; }
    100% { background: #161616; }
}

.shop-upload {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; text-align: center; min-height: 130px; padding: 16px; background: #fafbfd;
    border: 1px dashed #cad5e0; border-radius: 13px; color: #49586a; cursor: pointer; margin: 0 0 18px;
    transition: border-color .15s;
}
.dark .shop-upload { background: #161616; border-color: rgba(255, 255, 255, .15); color: #c3cad4; }
.shop-upload:hover { border-color: #e85c2d; }
.shop-upload-icon { font-size: 24px; color: #e05d32; }
.shop-upload small { color: #8b96a4; }
.shop-upload strong { font-size: 14px; }
.shop-upload-has { align-items: stretch; text-align: left; padding: 14px; border-style: solid; background: #fff; }
.dark .shop-upload-has { background: #1a1a1a; }
.shop-upload-thumbs { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 8px; }
.shop-upload-thumb {
    padding: 6px 10px; border-radius: 8px; font-size: 11px; color: #6b4a3a;
    background: linear-gradient(135deg, #f2e4db, #d9c4b7); max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-upload-thumb-doc { background: linear-gradient(135deg, #e2ebf3, #c9d7e4); color: #4b607a; }
.shop-upload-thumb-img { width: 96px; height: 72px; object-fit: cover; padding: 0; }
.shop-upload-preview { display: inline-flex; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: zoom-in; }
.shop-draft-preview {
    min-width: 0; flex: 1 1 auto; margin-right: auto;
    font-size: 13px; line-height: 1.5; color: #596879;
}
.dark .shop-draft-preview { color: #aeb8c5; }
.shop-draft-error { color: #dc2626; margin-top: 6px; }
.shop-chip:disabled { opacity: .55; cursor: default; }
.shop-upload-preview[aria-disabled="true"] { cursor: default; }
.shop-upload-preview:focus-visible { outline: 2px solid #cf7046; outline-offset: 3px; }
.shop-upload-thumb small { display: block; margin-top: 4px; white-space: normal; font-size: 10px; }
.shop-why { background: #f5f8fb; border-radius: 12px; padding: 15px 18px; margin-top: 4px; }
.dark .shop-why { background: rgba(255, 255, 255, .04); }
.shop-why p { margin: 5px 0 0; color: #708091; font-size: 14px; line-height: 1.7; }
.dark .shop-why p { color: #a3aab5; }

/* 阶段条 + 三个方案页 */
.shop-stage-bar {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 24px;
    background: #fff; border: 1px solid #e6ebf1; border-radius: 14px; padding: 14px; gap: 10px;
}
.dark .shop-stage-bar { background: #1a1a1a; border-color: rgba(255, 255, 255, .08); }
.shop-stage { display: flex; align-items: center; gap: 9px; color: #9aa5b0; font-size: 13px; font-weight: 600; }
.shop-stage-current { color: #d95a2f; }
.shop-stage-done { color: #268c60; }
.shop-stage-num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f1f4f7; }
.dark .shop-stage-num { background: rgba(255, 255, 255, .08); }
.shop-stage-current .shop-stage-num { background: #fff0e8; }
.shop-stage-done .shop-stage-num { background: #e8f7ef; }
.dark .shop-stage-current .shop-stage-num { background: rgba(232, 92, 45, .2); }
.dark .shop-stage-done .shop-stage-num { background: rgba(33, 135, 91, .2); }

.shop-summary-sheet { background: #fff; border: 1px solid #efbcaa; border-radius: 18px; padding: 32px; margin-top: 22px; }
.dark .shop-summary-sheet { background: #1a1a1a; border-color: rgba(232, 92, 45, .3); }
.shop-summary-kicker { color: #df5b2e; font-size: 13px; font-weight: 700; letter-spacing: .05em; margin-bottom: 10px; }
.shop-summary-sheet h2 { font-size: 26px; line-height: 1.45; max-width: 900px; margin: 0 0 24px; color: inherit; }
.shop-conclusion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.shop-conclusion-grid > div { display: grid; gap: 7px; background: #f9fafc; border-radius: 11px; padding: 15px; }
.dark .shop-conclusion-grid > div { background: rgba(255, 255, 255, .04); }
.shop-conclusion-grid small { color: #8593a1; }
.shop-conclusion-grid strong { font-size: 14px; }

.shop-insight p { font-size: 14px; color: #748192; line-height: 1.75; margin: 0; }
.dark .shop-insight p { color: #a3aab5; }
.shop-insight h3 { color: #344253; margin: 0 0 8px; font-size: 15px; }
.dark .shop-insight h3 { color: #e2e8f0; }
.shop-detail-panel { margin-top: 18px; }
.shop-detail-panel summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.shop-report-copy { padding-top: 20px; color: #627184; line-height: 1.85; }
.dark .shop-report-copy { color: #a3aab5; }
.shop-report-copy h3 { color: #26313d; margin-top: 15px; font-size: 14px; }
.dark .shop-report-copy h3 { color: #e2e8f0; }
.shop-report-copy p { max-width: 900px; margin: 6px 0 0; }

.shop-deal-flow { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; gap: 10px; align-items: center; }
.shop-deal-flow > div { display: grid; gap: 7px; background: #fff7f2; border-radius: 13px; padding: 18px; }
.dark .shop-deal-flow > div { background: rgba(232, 92, 45, .1); }
.shop-deal-flow span, .shop-deal-flow small { color: #a06a56; font-size: 13px; }
.dark .shop-deal-flow span, .dark .shop-deal-flow small { color: #d6a48d; }
.shop-deal-flow strong { font-size: 18px; }
.shop-flow-arrow { color: #e85c2d; text-align: center; font-size: 22px; }
.shop-price { font-size: 22px; color: #e25b2e; font-weight: 750; }
.shop-deal-card dl, .shop-script-card dl { margin: 0; }
.shop-deal-card dl > div, .shop-script-card dl > div {
    display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid #edf0f4;
}
.dark .shop-deal-card dl > div, .dark .shop-script-card dl > div { border-color: rgba(255, 255, 255, .08); }
.shop-deal-card dt, .shop-script-card dt { color: #8a96a3; font-size: 13px; }
.shop-deal-card dd, .shop-script-card dd { margin: 0; font-size: 14px; color: #344253; }
.dark .shop-deal-card dd, .dark .shop-script-card dd { color: #d5dae1; }
.shop-historical { padding: 16px 18px; margin-top: 16px; border-radius: 11px; background: #f1f4f7; color: #738193; font-size: 14px; }
.dark .shop-historical { background: rgba(255, 255, 255, .05); color: #a3aab5; }

.shop-metrics-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.shop-metrics-row > div { display: grid; gap: 6px; padding: 16px; background: #f8fafc; border-radius: 11px; }
.dark .shop-metrics-row > div { background: rgba(255, 255, 255, .04); }
.shop-metrics-row strong { font-size: 17px; }
.shop-view-switch { display: flex; gap: 8px; margin: 16px 0 4px; }
.shop-view-switch button { border: 1px solid #e3e9f0; background: #fff; color: #52606d; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.shop-view-switch button.active { background: #fff4ee; border-color: #f0d3c4; color: #c4552c; font-weight: 700; }
.shop-module-heading { margin: 18px 0 8px; }
.shop-module-heading h3 { margin: 0; font-size: 16px; }
.shop-module-heading p { margin: 4px 0 0; color: #8b96a4; font-size: 13px; }
.shop-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shop-shelf-slot { background: #fff; border: 1px solid #e6ebf1; border-radius: 14px; padding: 14px; }
.shop-shelf-slot small { color: #8b96a4; }
.shop-shelf-slot h3 { margin: 6px 0; font-size: 15px; }
.shop-sheet-band { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.shop-sheet-band strong { display: block; margin-bottom: 4px; }
.shop-visual-slot { display: grid; align-content: center; min-height: 180px; background: #f7f8fa; color: #52606d; }
.shop-visual-slot span { display: block; margin-top: 8px; color: #8b96a4; font-size: 13px; }
.shop-view-qr { margin-top: 18px; }
.shop-qr-svg svg { width: 180px; height: 180px; display: block; margin-top: 12px; }
.shop-result-head { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, .9fr); gap: 16px; margin-top: 8px; }
.shop-result-card { background: #fff; border: 1px solid #e6ebf1; border-radius: 16px; padding: 22px 24px; }
.dark .shop-result-card { background: #1a1a1a; border-color: rgba(255, 255, 255, .08); }
.shop-result-card h3 { margin: 6px 0 10px; font-size: 22px; line-height: 1.4; }
.shop-result-card p { margin: 0; color: #5c6b7a; line-height: 1.7; }
.shop-quote { margin-top: 14px; padding: 12px 14px; background: #f7f8fa; border-radius: 12px; color: #344150; line-height: 1.6; }
.dark .shop-quote { background: rgba(255, 255, 255, .04); color: #e2e8f0; }
.shop-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.shop-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; background: #f3f5f8; color: #52606d; font-size: 12px; font-weight: 650; }
.shop-pill-orange { background: #fff4ee; color: #c4552c; }
.shop-key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.shop-key-fact { background: #fff; border: 1px solid #e6ebf1; border-radius: 14px; padding: 14px 16px; }
.dark .shop-key-fact { background: #1a1a1a; border-color: rgba(255, 255, 255, .08); }
.shop-key-fact small { color: #8b96a4; font-size: 12px; }
.shop-key-fact strong { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; }
.shop-path { display: grid; gap: 8px; margin-top: 8px; }
.shop-path-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; background: #fff; border: 1px solid #e6ebf1; border-radius: 12px; padding: 12px 14px; }
.dark .shop-path-step { background: #1a1a1a; border-color: rgba(255, 255, 255, .08); }
.shop-path-step strong { color: #c4552c; }
.shop-path-step small { display: block; color: #8b96a4; margin-top: 4px; }
.shop-bundle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shop-bundle-primary { border-color: #f0d3c4; background: #fffdfb; }
.shop-detail-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; margin-top: 10px; font-size: 13px; line-height: 1.55; }
.shop-detail-row strong { color: #8b96a4; font-weight: 650; }
.shop-matrix-wrap { overflow-x: auto; margin-top: 16px; background: #fff; border: 1px solid #e6ebf1; border-radius: 14px; }
.shop-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.shop-matrix th, .shop-matrix td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
.shop-matrix th { color: #8b96a4; font-weight: 650; }
.shop-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 22px 0 16px; }
.shop-tabs button {
    flex: none; border: 1px solid #e2e8ee; border-radius: 9px; background: #fff; color: #718092;
    padding: 11px 15px; cursor: pointer;
}
.dark .shop-tabs button { background: #1a1a1a; border-color: rgba(255, 255, 255, .1); color: #a3aab5; }
.shop-tabs button.active { background: #fff0e8; border-color: #f2cbbd; color: #db5b31; font-weight: 700; }
.dark .shop-tabs button.active { background: rgba(232, 92, 45, .2); border-color: rgba(232, 92, 45, .4); color: #f0a37e; }
.shop-topic-list > div { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #ecf0f3; padding: 15px 0; }
.dark .shop-topic-list > div { border-color: rgba(255, 255, 255, .08); }
.shop-topic-list > div:last-child { border: 0; }
.shop-topic-list > div > span { color: #8996a4; font-size: 13px; min-width: 60px; }
.shop-topic-list > div > strong { flex: 1; font-size: 14px; }
.shop-check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
.shop-check-list label { display: flex; gap: 11px; align-items: center; background: #f8fafc; border-radius: 9px; padding: 12px; }
.dark .shop-check-list label { background: rgba(255, 255, 255, .04); }
.shop-check-list input { accent-color: #e85c2d; width: 16px; height: 16px; }

/* 锁定提示 toast，独立于门店总控室的其它组件 */
.shop-toast {
    position: fixed; left: 50%; top: 80px; transform: translateX(-50%);
    background: #273748; color: #fff; padding: 10px 16px; border-radius: 11px;
    font-size: 13px; z-index: 60; box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
}
.shop-toast.hidden { display: none; }

/* 侧边栏锁图标 + 门店总控室入口的响应式收窄 */
.shop-lock-icon { color: #9aa5b0; }

@media (max-width: 1280px) {
    .chat-main.shop-narrow { flex: 0 0 380px; }
    .shop-workspace { padding: 26px 26px 50px; }
    .shop-card-grid-four { grid-template-columns: repeat(2, 1fr); }
    .shop-collect-layout { grid-template-columns: 1fr; }
    .shop-collect-nav { display: flex; overflow: auto; position: static; gap: 4px; }
    .shop-collect-nav button { min-width: 160px; }
}
@media (max-width: 900px) {
    #view-chat.active.shop-mode { flex-direction: column; }
    .chat-main.shop-narrow { flex: 1 1 auto; max-height: 45vh; }
    #shop-pane { max-height: 55vh; }
    .shop-lead-grid { grid-template-columns: 1fr; }
    .shop-form-grid { grid-template-columns: 1fr; gap: 0; }
    .shop-page-title { font-size: 26px; }
    .shop-deal-flow, .shop-result-head, .shop-bundle-grid, .shop-key-facts, .shop-shelf { grid-template-columns: 1fr; }
    .shop-flow-arrow { transform: rotate(90deg); }
    .shop-metrics-row { grid-template-columns: 1fr 1fr; }
    .shop-conclusion-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
    .shop-action-chips { padding-left: 12px; padding-right: 12px; }
    .shop-chip { padding-left: 10px; padding-right: 10px; }
}

/* 收起右侧管家时，左边档案吃掉整行宽度。展开按钮挂在 #view-chat 上，
   不放进 #chat-main，否则一起被藏掉。方案页没有表单上的切换按钮时才显示。 */
#view-chat.shop-mode { position: relative; }
#view-chat.shop-butler-hidden > #chat-main { display: none !important; }
#view-chat.shop-butler-hidden > #shop-pane {
    flex: 1 1 auto; width: auto; max-width: none; max-height: none;
}
.shop-butler-show {
    display: none; position: absolute; top: 16px; right: 28px; z-index: 8;
    border: 1px solid #e8c3b4; border-radius: 10px; background: #fff; color: #db582c;
    font-weight: 650; font-size: 13px; padding: 8px 12px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(44, 67, 91, .08);
}
/* :not(.hidden)：店员没有管家，JS 给按钮加 .hidden；这条带 ID 的选择器优先级比工具类
   .hidden 高，不排除就会把它重新显示出来。 */
#view-chat.shop-mode.shop-butler-hidden .shop-butler-show:not(.shop-butler-show-off):not(.hidden) { display: inline-flex; }
.dark .shop-butler-show {
    background: #1a1a1a; border-color: rgba(232, 92, 45, .4); color: #f0a37e;
}
#shop-butler-hide { white-space: nowrap; }

/* 爆品 / 团购结果页。版式对齐静态确认版，只挂在 .shop-v8 里，
   不改定位页，也不带静态页里的编辑、导出和确认按钮。 */
.shop-v8 {
    --accent: #df5b2e;
    --soft: #fff0e8;
    --line: #e3e9ef;
    --muted: #758397;
    --green: #23885e;
    color: #26313d;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    container-type: inline-size;
}
.shop-v8 h2,
.shop-v8 h3,
.shop-v8 h4,
.shop-v8 strong { font-weight: 700; }
.shop-v8 .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
}
.shop-v8 .card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; color: #26313d; }
.shop-v8 .card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.shop-v8 .eyebrow { display: block; margin: 0 0 6px; font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: 0; }
.shop-v8 .badge {
    display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 99px;
    font-size: 11px; font-weight: 400; background: #f0f3f6; color: #758397;
}
.shop-v8 .badge.orange { background: var(--soft); color: var(--accent); }
.shop-v8 .badge.green { background: #eaf8f0; color: var(--green); }
.shop-v8 .result-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.shop-v8 .result-layout {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 15px; align-items: stretch;
}
.shop-v8 .primary-product {
    min-height: 244px; display: flex; flex-direction: column; justify-content: space-between;
    border-color: #e9b8a6; background: #fffaf7;
}
.shop-v8 .primary-product .eyebrow { margin: 0; }
.shop-v8 .primary-product h3 { font-size: 27px; font-weight: 700; line-height: 1.25; margin: 7px 0 10px; }
.shop-v8 .primary-product p { max-width: 62ch; }
.shop-v8 .primary-product .quote { margin: 0; }
.shop-v8 .quote { margin: 16px 0 0; color: #354454; font-size: 19px; line-height: 1.55; font-weight: 400; }
.shop-v8 .key-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-v8 .result-layout > .key-facts { grid-template-rows: repeat(2, minmax(92px, 1fr)); }
.shop-v8 .primary-layout .key-facts { align-content: start; }
.shop-v8 .key-fact { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-height: 92px; }
.shop-v8 .key-fact small { display: block; color: #8c98a5; font-size: 11px; font-weight: 400; margin-bottom: 5px; }
.shop-v8 .key-fact strong { display: block; font-size: 15px; line-height: 1.45; font-weight: 700; }
.shop-v8 .analysis-hero {
    background: #fff; border: 1px solid #e9b8a6; border-radius: 15px; padding: 27px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.shop-v8 .analysis-hero h2 { margin: 8px 0; font-size: 23px; line-height: 1.35; color: #26313d; }
.shop-v8 .analysis-hero p { margin: 0; color: var(--muted); }
.shop-v8 .result-toolbar { display: flex; align-items: center; margin: 18px 0 13px; }
.shop-v8 .view-switch {
    display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #fafcfd;
}
.shop-v8 .view-switch button {
    border: 0; background: transparent; color: #758397; border-radius: 6px; padding: 7px 11px; font-size: 12px; cursor: pointer;
}
.shop-v8 .view-switch button.active { background: #fff; color: var(--accent); font-weight: 700; box-shadow: 0 1px 2px rgba(38, 49, 61, .06); }
.shop-v8 .tabs { display: flex; gap: 8px; overflow: auto; margin: 0 0 13px; }
.shop-v8 .tab {
    flex: none; border: 1px solid var(--line); background: #fff; color: #718092;
    border-radius: 8px; padding: 9px 14px; white-space: nowrap; cursor: pointer; font-size: 13px;
}
.shop-v8 .tab.active { background: var(--soft); border-color: #f1c3b2; color: var(--accent); font-weight: 700; }
.shop-v8 .module-heading {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 28px 0 12px;
    grid-column: auto; font-size: inherit;
}
.shop-v8 .module-heading h3 { margin: 0; font-size: 18px; color: #26313d; font-weight: 700; }
.shop-v8 .module-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.shop-v8 .grid { display: grid; gap: 15px; }
.shop-v8 .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shop-v8 .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-v8 .section { margin-top: 15px; }
.shop-v8 .callout { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 16px 18px; }
.shop-v8 .callout p { margin: 0; }
.shop-v8 .warning-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.shop-v8 .decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-v8 .decision-card { border-top: 3px solid #cbd5dd; height: 100%; }
.shop-v8 .decision-card.recommended { border-color: var(--green); background: #fbfffd; }
.shop-v8 .decision-card .letter {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: #f0f3f6; color: #6f7c8b; font-weight: 800; margin-bottom: 10px;
}
.shop-v8 .decision-card.recommended .letter { background: #eaf8f0; color: var(--green); }
.shop-v8 .dna-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shop-v8 .dna-cell { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-height: 114px; }
.shop-v8 .dna-cell small { display: block; color: #8c98a5; font-size: 11px; margin-bottom: 5px; }
.shop-v8 .dna-cell strong { display: block; font-size: 14px; line-height: 1.45; }
.shop-v8 .direction-row {
    display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 15px; align-items: center;
    padding: 13px 0; border-bottom: 1px solid #edf0f3;
}
.shop-v8 .direction-row strong { color: #26313d; }
.shop-v8 .direction-row:last-child { border-bottom: 0; }
.shop-v8 .direction-row p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.shop-v8 .direction-row small { color: var(--muted); font-size: 12px; font-weight: 400; }
.shop-v8 .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 13px 0; border-bottom: 1px solid #edf0f3; }
.shop-v8 .row:last-child { border-bottom: 0; }
.shop-v8 .row strong { font-size: 14px; color: #26313d; flex: none; }
.shop-v8 .row span { color: var(--muted); font-size: 13px; line-height: 1.55; text-align: right; }
.shop-v8 .compact-list { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; list-style: disc; }
.shop-v8 .compact-list li { margin: 5px 0; }
.shop-v8 .callout h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.4; color: #26313d; }
.shop-v8 .callout.warn { border-left-color: #c78d28; background: #fffbf2; }
.shop-v8 .callout p + p { margin-top: 8px; }
.shop-v8 .card p.quote { margin: 8px 0 0; color: #354454; font-size: 19px; line-height: 1.55; }
.shop-v8 .quote-card p { margin: 8px 0 0; color: #354454; font-size: 16px; line-height: 1.55; }
.shop-v8 .spread-card > strong { display: block; margin: 0 0 8px; font-size: 15px; color: #26313d; }
.shop-v8 .spread-card p { margin: 0; }
.shop-v8 .appendix { margin-top: 14px; }
.shop-v8 .appendix summary { cursor: pointer; color: #546578; font-size: 13px; font-weight: 700; }
.shop-v8 .appendix p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.shop-v8 .split-title { margin: 16px 0 0; font-size: 15px; }
.shop-v8 .empty-inline { padding: 18px; background: #fafcfd; border: 1px dashed #cbd6de; border-radius: 9px; color: #8a96a4; font-size: 13px; }
.shop-v8 .card p.route-note { margin-top: 8px; font-size: 12px; }
.shop-v8 .summary-sheet { background: #fff; border: 1px solid #e7c2b4; border-radius: 15px; padding: 25px; }
.shop-v8 .sheet-header { border-bottom: 1px solid #f0e0da; padding-bottom: 18px; margin-bottom: 18px; }
.shop-v8 .sheet-header h3 { margin: 5px 0 4px; font-size: 28px; line-height: 1.18; color: #26313d; }
.shop-v8 .sheet-header p { margin: 0; color: var(--muted); max-width: 65ch; }
.shop-v8 .sheet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-v8 .sheet-cell { border-top: 1px solid var(--line); padding: 12px 4px; min-height: 76px; }
.shop-v8 .sheet-cell small { display: block; color: #8c98a5; font-size: 11px; margin-bottom: 5px; }
.shop-v8 .sheet-cell strong { display: block; font-size: 14px; line-height: 1.45; }
.shop-v8 .sheet-band { border-top: 1px solid #f0c6b5; padding: 14px 0 0; margin-top: 12px; }
.shop-v8 .sheet-band strong { display: block; font-size: 13px; margin-bottom: 4px; color: #a94f2f; }
.shop-v8 .sheet-band p { margin: 0; color: #765f58; font-size: 13px; line-height: 1.55; }
.shop-v8 .onepage-dna { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.shop-v8 .onepage-dna div { background: #f7f9fa; border-radius: 9px; padding: 11px; font-size: 12px; color: #536273; }
.shop-v8 .purchase-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; align-items: stretch; }
.shop-v8 .path-step {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-height: 110px;
}
.shop-v8 .path-step:not(:last-child)::after {
    content: "→"; position: absolute; right: -14px; top: 37%; color: var(--accent); font-size: 18px; z-index: 1;
}
.shop-v8 .path-step strong { display: block; font-size: 13px; margin-bottom: 5px; color: #26313d; line-height: 1.35; }
.shop-v8 .path-step span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.shop-v8 .responsive-table { width: 100%; overflow-x: auto; border-radius: 10px; }
.shop-v8 .matrix-table {
    width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 13px;
}
.shop-v8 .matrix-table th, .shop-v8 .matrix-table td {
    padding: 12px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid #edf0f3;
}
.shop-v8 .matrix-table th { background: #fafcfd; color: #667587; font-weight: 700; font-size: 11px; white-space: nowrap; }
.shop-v8 .matrix-table tr:last-child td { border-bottom: 0; }
.shop-v8 .matrix-table td { color: #536273; }
.shop-v8 .matrix-table td:first-child { color: #26313d; font-weight: 700; }
.shop-v8 .locked-mark {
    display: inline-flex; margin-left: 5px; padding: 2px 6px; border-radius: 99px;
    background: #eaf8f0; color: var(--green); font-size: 10px; font-weight: 700;
}
.shop-v8 .bundle-card { height: 100%; border-top: 3px solid #d8e1e8; }
.shop-v8 .bundle-card.hero-upgrade { border-top-color: #d08a42; }
.shop-v8 .bundle-card.premium-alternative { border-top-color: #7c91a6; }
.shop-v8 .bundle-card.primary-bundle { border-top-color: var(--accent); background: #fffaf7; }
.shop-v8 .offer-summary { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.shop-v8 .offer-summary h3 { margin: 4px 0 0; font-size: 18px; }
.shop-v8 .bundle-detail { display: grid; gap: 7px; margin-top: 13px; border-top: 1px solid #edf0f3; padding-top: 11px; }
.shop-v8 details.bundle-detail { display: block; }
.shop-v8 details.bundle-detail summary { cursor: pointer; color: #58697a; font-size: 13px; font-weight: 700; }
.shop-v8 details.bundle-detail .detail-row { margin-top: 8px; }
.shop-v8 .detail-row { display: grid; grid-template-columns: minmax(100px, .42fr) minmax(0, 1fr); gap: 10px; font-size: 12px; }
.shop-v8 .detail-row strong { color: #536273; font-weight: 700; }
.shop-v8 .detail-row span { color: var(--muted); }
.shop-v8 .primary-layout { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: 15px; align-items: stretch; }
.shop-v8 .result-actions { display: flex; gap: 8px; align-items: center; margin-top: 15px; }
.shop-v8 .studio-link {
    display: inline-flex; align-items: center; background: var(--accent); color: #fff;
    border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; text-decoration: none;
    white-space: nowrap;
}
.shop-v8 button.studio-link { border: 0; cursor: pointer; font-family: inherit; }
.shop-v8 .studio-link:hover { color: #fff; filter: brightness(1.05); }
.shop-v8 a.visual-placeholder { text-decoration: none; color: #8b98a5; cursor: pointer; }
.shop-v8 a.visual-placeholder:hover { border-color: #efad96; background: #fff7f3; }
.shop-v8 .visual-placeholder {
    min-height: 300px; border: 1px dashed #c8d4de; border-radius: 12px; background: #fafcfd;
    display: grid; place-items: center; text-align: center; padding: 22px; color: #8b98a5;
}
.shop-v8 .visual-placeholder strong { display: block; color: #536273; font-size: 16px; margin-bottom: 5px; }
.shop-v8 .visual-placeholder span { font-size: 12px; }
.shop-v8 .shelf-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .32fr); gap: 15px; align-items: start; }
.shop-v8 .shelf-main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.shop-v8 .addon-rail { background: #fbf8fd; border: 1px solid #ded2ed; border-radius: 10px; padding: 15px; }
.shop-v8 .addon-rail h4 { margin: 0 0 6px; font-size: 14px; color: #695581; }
.shop-v8 .addon-rail p { margin: 0; color: #796d87; font-size: 12px; line-height: 1.55; }
.shop-v8 .shelf-slot { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 15px; min-height: 132px; }
.shop-v8 .shelf-slot:not(:last-child)::after {
    content: "→"; position: absolute; right: -14px; top: 40%; color: var(--accent); font-size: 18px; z-index: 1;
}
.shop-v8 .shelf-slot:nth-child(4n)::after { display: none; }
.shop-v8 .shelf-slot.primary-shelf { border-color: #e9b8a6; background: #fffaf7; }
.shop-v8 .shelf-slot small { color: #8592a0; font-size: 12px; }
.shop-v8 .shelf-slot h4 { margin: 7px 0 5px; font-size: 15px; }
.shop-v8 .shelf-slot p { margin: 0; color: var(--muted); font-size: 12px; }
.shop-v8 .material-card { border-top: 3px solid #d8e1e8; }
.shop-v8 .material-card.priority-high { border-top-color: var(--accent); }
.shop-v8 .material-visual {
    min-height: 92px; border-radius: 9px; background: #fff3ea; border: 1px solid #f0d6ca;
    display: grid; place-items: center; text-align: center; padding: 12px; color: #a35436;
    font-size: 15px; font-weight: 700; margin-bottom: 4px;
}
.shop-v8 .material-visual.cool { background: #edf5fb; border-color: #dbe8f1; color: #55718a; }
.shop-v8 .material-visual.green { background: #eef8f1; border-color: #dceee3; color: #4f7e61; }
.shop-v8 .check-group { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 15px; }
.shop-v8 .check-group h4 { margin: 0 0 9px; font-size: 14px; }
.shop-v8 .check-row { padding: 9px 0; border-top: 1px solid #edf0f3; font-size: 13px; color: #536273; }
.shop-v8 .check-row:first-of-type { border-top: 0; }
.shop-v8 .result-timeline { display: grid; gap: 10px; position: relative; }
.shop-v8 .result-timeline::before { content: ""; position: absolute; left: 13px; top: 17px; bottom: 17px; width: 1px; background: #efc4b5; }
.shop-v8 .timeline-stage { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.shop-v8 .stage-mark {
    position: relative; z-index: 1; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
    background: var(--soft); border: 1px solid #f0c6b5; color: var(--accent); font-size: 11px; font-weight: 700;
}
.shop-v8 .stage-body { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.shop-v8 .stage-body h4 { margin: 0 0 5px; font-size: 15px; }
.shop-v8 .stage-body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.shop-v8 .stage-body p + p { margin-top: 6px; }
.shop-v8 .stage-body p strong { color: #26313d; }
.shop-v8.shop-view-qr { margin-top: 18px; }
.shop-v8.shop-position { margin-top: 4px; }
.shop-v8.shop-position .positioning-hero {
    background: #fff; border: 1px solid #e9b8a6; border-radius: 15px; padding: 27px;
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 24px; align-items: stretch;
}
.shop-v8.shop-position .positioning-hero .eyebrow { margin: 0; }
.shop-v8.shop-position .positioning-hero h2 { font-size: 28px; line-height: 1.3; margin: 8px 0 10px; color: #26313d; }
.shop-v8.shop-position .positioning-hero-main > p { color: var(--muted); margin: 0; max-width: 760px; font-size: 16px; line-height: 1.55; }
.shop-v8.shop-position .positioning-hero-side { border-left: 1px solid var(--line); padding-left: 22px; display: grid; gap: 12px; align-content: start; }
.shop-v8.shop-position .positioning-store-chooser { display: grid; gap: 5px; color: #7b8794; font-size: 11px; }
.shop-v8.shop-position .positioning-store-chooser strong { color: #7b8794; font-size: 11px; line-height: 1.55; }
.shop-v8.shop-position .positioning-hero-note { background: #fff8f4; border-radius: 10px; padding: 12px 14px; }
.shop-v8.shop-position .positioning-hero-note span { display: block; color: #a75b40; font-size: 11px; }
.shop-v8.shop-position .positioning-hero-note strong { display: block; color: #4b3a35; font-size: 14px; margin-top: 4px; line-height: 1.55; }
.shop-v8.shop-position .positioning-hero-note small { display: block; color: #8a96a4; font-size: 11px; margin-top: 4px; line-height: 1.5; }
.shop-v8.shop-position .positioning-metadata { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.shop-v8.shop-position .positioning-tabs { margin-top: 18px; }
.shop-v8.shop-position .positioning-tabs .tab { font-size: 16px; line-height: 1.55; }
.shop-v8.shop-position .positioning-overview-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 15px; margin-top: 20px; align-items: stretch; }
.shop-v8.shop-position .section { margin-top: 26px; }
.shop-v8.shop-position .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 12px; flex-wrap: nowrap; }
.shop-v8.shop-position .section-head h3 { margin: 0; font-size: 18px; line-height: 1.35; color: #26313d; font-weight: 700; white-space: nowrap; }
.shop-v8.shop-position .section-head span { margin-left: auto; color: #929daa; font-size: 12px; line-height: 1.4; text-align: right; white-space: nowrap; }
.shop-v8.shop-position .layer-cards { margin-bottom: 15px; }
.shop-v8.shop-position .callout h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.4; color: #26313d; }
.shop-v8.shop-position .callout p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.shop-v8.shop-position .callout p.quote { margin: 0 0 8px; color: #334253; font-size: 15px; font-weight: 400; line-height: 1.55; }
.shop-v8.shop-position .card h3 { line-height: 1.55; }
.shop-v8.shop-position .positioning-feature-card { border-top: 3px solid var(--accent); }
.shop-v8.shop-position .positioning-claim { padding: 11px 0; border-bottom: 1px solid #edf0f3; }
.shop-v8.shop-position .positioning-claim:last-child { border-bottom: 0; }
.shop-v8.shop-position .positioning-claim-label { color: #8a96a4; font-size: 11px; }
.shop-v8.shop-position .positioning-claim-value { color: #334253; font-size: 14px; line-height: 1.6; margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.shop-v8.shop-position .positioning-claim-value.is-empty { color: #8a96a4; }
.shop-v8.shop-position .positioning-claim .result-meta { margin-top: 5px; }
.shop-v8.shop-position .positioning-list .result-meta,
.shop-v8.shop-position .memory-core .result-meta { margin-top: 4px; }
.shop-v8.shop-position .pos-claim { margin-top: 12px; }
.shop-v8.shop-position .pos-claim:first-child { margin-top: 0; }
.shop-v8.shop-position .pos-claim small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.shop-v8.shop-position .pos-claim p { margin: 0; color: #354454; font-size: 14px; line-height: 1.65; }
.shop-v8.shop-position .positioning-list { display: grid; gap: 8px; }
.shop-v8.shop-position .positioning-list-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 0; border-bottom: 1px solid #edf0f3; color: #516173; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.shop-v8.shop-position .positioning-list-item:last-child { border-bottom: 0; }
.shop-v8.shop-position .positioning-list-index { color: var(--accent); font-weight: 700; font-size: 11px; padding-top: 2px; }
.shop-v8.shop-position .empty-inline { padding: 18px; background: #fafcfd; border: 1px dashed #cbd6de; border-radius: 9px; color: #8a96a4; font-size: 13px; }
.shop-v8.shop-position .status-callout { background: #fff8f4; border-radius: 10px; padding: 15px; color: #70402f; }
.shop-v8.shop-position .status-callout strong { display: block; font-size: 18px; }
.shop-v8.shop-position .status-callout p { color: #8a96a4; font-size: 12px; margin: 6px 0 0; }
.shop-v8.shop-position .positioning-chain { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.shop-v8.shop-position .positioning-chain span { background: #f7f9fa; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.shop-v8.shop-position .positioning-chain b { color: var(--accent); }
.shop-v8.shop-position .route-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.shop-v8.shop-position .candidate-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 15px; align-items: start; }
.shop-v8.shop-position .candidate-list { display: grid; gap: 8px; align-content: start; }
.shop-v8.shop-position .candidate-item { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 13px; text-align: left; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; cursor: pointer; }
.shop-v8.shop-position .candidate-item:hover { border-color: #e5a48e; }
.shop-v8.shop-position .candidate-item.active { background: var(--soft); border-color: #e5a48e; }
.shop-v8.shop-position .candidate-item.winner { box-shadow: inset 3px 0 0 var(--green); }
.shop-v8.shop-position .candidate-index { color: var(--accent); font-weight: 800; font-size: 12px; }
.shop-v8.shop-position .candidate-item strong { display: block; font-size: 13px; color: #334253; line-height: 1.45; }
.shop-v8.shop-position .candidate-item small { display: block; color: #84909d; font-size: 11px; margin-top: 4px; }
.shop-v8.shop-position .candidate-detail { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; min-width: 0; }
.shop-v8.shop-position .candidate-detail h3 { margin: 10px 0 7px; font-size: 21px; }
.shop-v8.shop-position .candidate-detail > p { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.6; }
.shop-v8.shop-position .memory-core { background: #fff8f4; border: 1px solid #edc0b0; border-radius: 12px; padding: 19px; margin-bottom: 14px; }
.shop-v8.shop-position .memory-core .quote { margin: 7px 0 0; }
.shop-v8.shop-position .activation-list { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; }
.shop-v8.shop-position .activation-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid #edf0f3; }
.shop-v8.shop-position .activation-row:last-child { border-bottom: 0; }
.shop-v8.shop-position .activation-row > strong { padding-top: 2px; color: #516173; font-size: 14px; }
.shop-v8.shop-position .score-details { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 13px; }
.shop-v8.shop-position .score-details summary,
.shop-v8.shop-position .selling-detail summary,
.shop-v8.shop-position .evidence-detail summary { cursor: pointer; color: #5a6c7d; font-size: 13px; font-weight: 700; line-height: 1.55; }
.shop-v8.shop-position .score-details > .empty-inline { margin-top: 12px; }
.shop-v8.shop-position .score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.shop-v8.shop-position .score-cell { background: #f7f9fa; border-radius: 8px; padding: 10px; min-width: 0; }
.shop-v8.shop-position .score-cell span { display: block; color: #758397; font-size: 11px; overflow-wrap: anywhere; }
.shop-v8.shop-position .score-cell strong { display: block; color: #354454; font-size: 18px; margin-top: 3px; }
.shop-v8.shop-position .score-cell small { display: block; color: #8a96a4; font-size: 10px; line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; }
.shop-v8.shop-position .evidence-note { margin: 10px 0 0; color: #8a96a4; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.shop-v8.shop-position .selling-detail { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin: 9px 0; min-width: 0; }
.shop-v8.shop-position .selling-detail summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; overflow-wrap: anywhere; }
.shop-v8.shop-position .selling-detail summary .badge { flex: none; }
.shop-v8.shop-position .selling-detail .grid,
.shop-v8.shop-position .evidence-detail .grid { margin-top: 12px; gap: 0 18px; }
.shop-v8.shop-position .evidence-detail { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; margin: 8px 0; min-width: 0; }
.shop-v8.shop-position .evidence-detail summary { overflow-wrap: anywhere; }
.shop-v8.shop-position .evidence-detail summary .badge { vertical-align: 1px; }
.shop-v8.shop-position details > summary { list-style: none; display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.shop-v8.shop-position details > summary::-webkit-details-marker { display: none; }
.shop-v8.shop-position details > summary::marker { content: ''; }
.shop-v8.shop-position details > summary::before { content: '+'; display: inline-grid; place-items: center; box-sizing: border-box; width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; border: 1px solid #bdc9d3; border-radius: 4px; background: #fff; color: #708092; font-size: 13px; font-weight: 400; line-height: 1; }
.shop-v8.shop-position details[open] > summary::before { content: '\2212'; background: #fff8f4; border-color: #e5a48e; color: var(--accent); }
.shop-v8.shop-position .fold-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding-left: 24px; color: #5a6c7d; font-size: 13px; font-weight: 700; line-height: 1.55; }
.shop-v8.shop-position .fold-title { min-width: 0; overflow-wrap: anywhere; }
.shop-v8.shop-position .fold-head .badge,
.shop-v8.shop-position details > summary .badge { flex: none; }
.shop-v8.shop-position .selling-detail summary,
.shop-v8.shop-position .selling-detail .fold-head { align-items: flex-start; }
.shop-v8.shop-position .selling-detail .fold-title { flex: 1 1 auto; }
.shop-v8.shop-position .fold-body { margin-top: 8px; }
.shop-v8.shop-view-qr .shop-qr-svg svg { width: 180px; height: 180px; display: block; margin-top: 12px; }
@container (max-width: 980px) {
    .shop-v8 .dna-grid, .shop-v8 .onepage-dna, .shop-v8 .shelf-main, .shop-v8 .decision-grid,
    .shop-v8 .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-v8.shop-position .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop-v8 .path-step::after, .shop-v8 .shelf-slot::after { display: none; }
    .shop-v8 .primary-layout, .shop-v8 .shelf-layout { grid-template-columns: 1fr; }
    .shop-v8.shop-position .positioning-hero { grid-template-columns: 1fr; }
    .shop-v8.shop-position .positioning-hero-side { border-left: 0; border-top: 1px solid var(--line); padding: 15px 0 0; }
    .shop-v8.shop-position .positioning-overview-grid { grid-template-columns: 1fr 1fr; }
    .shop-v8.shop-position .candidate-layout { grid-template-columns: 1fr; }
    .shop-v8.shop-position .candidate-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .shop-v8.shop-position .score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 680px) {
    .shop-v8 .result-layout { grid-template-columns: 1fr; }
    .shop-v8.shop-position .positioning-overview-grid,
    .shop-v8.shop-position .candidate-list,
    .shop-v8.shop-position .score-grid { grid-template-columns: 1fr; }
    .shop-v8.shop-position .positioning-hero { padding: 20px; }
    .shop-v8.shop-position .positioning-hero h2 { font-size: 23px; }
    .shop-v8.shop-position .grid.three { grid-template-columns: 1fr; }
    .shop-v8 .primary-product { min-height: 0; }
}
@container (max-width: 520px) {
    .shop-v8 .grid.two, .shop-v8 .grid.three, .shop-v8 .key-facts, .shop-v8 .sheet-grid,
    .shop-v8 .decision-grid, .shop-v8 .dna-grid, .shop-v8 .purchase-path,
    .shop-v8 .shelf-main, .shop-v8 .onepage-dna { grid-template-columns: 1fr; }
    .shop-v8 .direction-row, .shop-v8 .detail-row { grid-template-columns: 1fr; gap: 4px; }
    .shop-v8 .row { display: block; }
    .shop-v8 .row span { display: block; text-align: left; margin-top: 4px; }
    .shop-v8.shop-position .activation-row { grid-template-columns: 1fr; gap: 2px; }
    .shop-v8.shop-position .section-head span { white-space: normal; max-width: 46%; }
    .shop-v8.shop-position .selling-detail .grid,
    .shop-v8.shop-position .evidence-detail .grid { grid-template-columns: 1fr; }
    .shop-v8 .sheet-header h3, .shop-v8 .primary-product h3 { font-size: 22px; }
    .shop-v8 .summary-sheet, .shop-v8 .analysis-hero { padding: 16px; }
    .shop-v8 .visual-placeholder { min-height: 160px; }
}