/*
 * Persistent Virtual Office chrome.
 * 办公室画布、头像、家具和天气属于领域视觉；这里只统一其外围壳层，不覆盖画布绘制和运行时几何。
 */
.main-container {
    background: var(--ui-canvas);
    box-shadow: none;
}

.toolbar {
    min-height: 52px;
    padding: var(--ui-space-md);
    gap: var(--ui-space-xs);
    background: var(--ui-toolbar);
    border-top: 1px solid var(--ui-border);
    scrollbar-color: var(--ui-border-strong) var(--ui-toolbar);
}

.toolbar::-webkit-scrollbar-track { background: var(--ui-toolbar); }
.toolbar::-webkit-scrollbar-thumb { background: var(--ui-border-strong); }
.toolbar-divider { background: var(--ui-border-strong); }

.toolbar button,
.toolbar > a > button {
    min-height: 34px;
    padding: 0 var(--ui-space-lg);
    color: var(--ui-text-primary);
    background: var(--ui-panel);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    box-shadow: none;
    font-family: var(--ui-font-family);
    font-size: var(--ui-font-size-label);
    line-height: var(--ui-line-height-label);
}

.toolbar button:hover,
.toolbar > a > button:hover {
    color: var(--ui-accent);
    background: var(--ui-surface);
    border-color: var(--ui-accent);
}

.toolbar button:active,
.toolbar > a > button:active {
    transform: none;
    background: var(--ui-accent-soft);
}

.toolbar button:focus-visible,
.toolbar > a > button:focus-visible,
.sidebar-edge:focus-visible {
    outline: 2px solid var(--ui-info);
    outline-offset: 2px;
}

.toolbar button.active-edit,
.toolbar button.active-edit:hover {
    color: var(--ui-success) !important;
    background: var(--ui-success-soft) !important;
    border-color: var(--ui-success) !important;
    box-shadow: none;
}

.sidebar-edge {
    width: 24px;
    color: var(--ui-text-muted);
    background: var(--ui-toolbar);
    border-inline: 1px solid var(--ui-border);
}

.sidebar-edge:hover {
    color: var(--ui-accent);
    background: var(--ui-panel);
}

.sidebar {
    color: var(--ui-text-primary);
    background: var(--ui-surface);
    border-left: 1px solid var(--ui-border);
    scrollbar-color: var(--ui-border-strong) var(--ui-surface);
}

.sidebar::-webkit-scrollbar-track { background: var(--ui-surface); }
.sidebar::-webkit-scrollbar-thumb { background: var(--ui-border-strong); }
.sidebar > section,
.sidebar > .section,
.sidebar .pc-monitor,
.sidebar .api-usage {
    border-color: var(--ui-border);
    background: var(--ui-panel);
}

.brand {
    border-bottom: 1px solid var(--ui-border-strong);
}

.brand h2 { color: var(--ui-text-primary); text-shadow: none; }
.brand h3 { color: var(--ui-text-muted); }

.modal { background: var(--ui-overlay); }
.modal-content {
    color: var(--ui-text-primary);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-xl);
    box-shadow: var(--ui-shadow-panel);
}
.modal-header {
    background: var(--ui-surface);
    border-bottom-color: var(--ui-border);
}
.modal-content h2 { color: var(--ui-text-primary); }
.modal-role { color: var(--ui-text-muted); }
.modal-section {
    background: var(--ui-panel);
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-md);
}
.modal-section h3 { color: var(--ui-text-primary); }
.close-btn { color: var(--ui-text-muted); }
.close-btn:hover { color: var(--ui-text-primary); }
.close-btn:focus-visible { outline: 2px solid var(--ui-info); outline-offset: 2px; }

.pc-monitor,
.api-usage-monitor {
    background: var(--ui-panel);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
}
.pc-monitor-toggle:hover { color: var(--ui-info); }

/* 面板的位置、尺寸和拖拽状态继续由现有 JS 与 --sms-toolbar-clearance 等运行时变量控制。 */
.sms-panel,
.chat-panel {
    color: var(--ui-text-primary);
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
    box-shadow: var(--ui-shadow-panel);
}

.sms-header,
.chat-header {
    color: var(--ui-text-primary);
    background: var(--ui-toolbar);
    border-bottom: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl) var(--ui-radius-xl) 0 0;
    font-family: var(--ui-font-family);
}

/* 聊天头部右侧操作必须始终可达；可变的 Agent/状态文案先收缩并省略。 */
.chat-header > .chat-agent-select {
    min-width: 88px;
    flex: 1 1 160px;
}

.chat-header > :is(.chat-status, .chat-feishu-live-status) {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-header-spacer {
    min-width: 0;
    flex: 1 1 0;
}

.chat-header-btns {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 32px;
    align-items: center;
    gap: var(--ui-space-xs);
    flex: 0 0 auto;
    margin-left: var(--ui-space-sm);
}

.chat-header-btns > :is(
    .chat-compact-context,
    .chat-new-session,
    .chat-move-btn,
    .chat-close
) {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    background: transparent;
    color: var(--ui-text-muted);
    box-shadow: none;
    font-family: var(--ui-font-family);
    font-size: 14px;
    line-height: 1;
    transform: none;
}

.chat-header-btns > :is(
    .chat-compact-context,
    .chat-new-session,
    .chat-move-btn,
    .chat-close
):hover:not(:disabled) {
    border-color: transparent;
    background: var(--ui-panel);
    color: var(--ui-text-primary);
}

.chat-header-btns > :is(
    .chat-compact-context,
    .chat-new-session,
    .chat-move-btn,
    .chat-close
):active:not(:disabled) {
    transform: translateY(1px);
}

.chat-header-btns > :is(
    .chat-compact-context,
    .chat-new-session,
    .chat-move-btn,
    .chat-close
):disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.chat-header-btns > .chat-close { font-size: 18px; }

.sms-sidebar,
.sms-thread-header,
.chat-model-bar,
.chat-input-row,
.chat-sessions-panel {
    background: var(--ui-panel);
    border-color: var(--ui-border);
}

.sms-input,
.chat-input,
.chat-agent-select {
    color: var(--ui-text-primary);
    background: var(--ui-canvas);
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-md);
    font-family: var(--ui-font-family);
}

.sms-input:focus,
.chat-input:focus,
.chat-agent-select:focus-visible {
    border-color: var(--ui-info);
    outline: 2px solid var(--ui-info);
    outline-offset: 1px;
}

.sms-thread-item:hover,
.chat-session-item:hover { background: var(--ui-toolbar); }
.sms-thread-item.active,
.chat-session-item.active {
    background: var(--ui-info-soft);
    border-color: var(--ui-info);
}

.sms-header .sms-close,
.chat-close,
.chat-secondary-close,
.sms-move-btn,
.chat-move-btn,
.chat-new-session {
    color: var(--ui-text-muted);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.sms-header .sms-close:hover,
.chat-close:hover,
.chat-secondary-close:hover,
.sms-move-btn:hover,
.chat-move-btn:hover,
.chat-new-session:hover {
    color: var(--ui-text-primary);
    background: var(--ui-panel);
    border-color: var(--ui-border);
}

.chat-status.connected { color: var(--ui-success); }
.chat-status.connecting { color: var(--ui-warning); }
.chat-status.disconnected { color: var(--ui-danger); }

.browser-panel,
.browser-viewer-panel,
.browser-viewer-shell {
    color: var(--ui-text-primary);
    background: var(--ui-surface);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-panel);
}

.browser-panel-header,
.browser-viewer-header,
.browser-toolbar {
    background: var(--ui-toolbar);
    border-color: var(--ui-border);
}

* {
    scrollbar-color: var(--ui-border-strong) transparent;
}

*:focus-visible {
    scroll-margin: var(--ui-space-xl);
}

@media (max-width: 900px) {
    .main-container { background: var(--ui-canvas); }
    .toolbar { margin: 0; padding: var(--ui-space-sm); }
    .sidebar-edge { width: 100%; height: 28px; border: 0; border-block: 1px solid var(--ui-border); }
    .sidebar { border-left: 0; border-top: 1px solid var(--ui-border); }
    .modal-content { width: calc(100dvw - 24px); max-height: calc(100dvh - 24px); }
}

@media (max-width: 560px) {
    .toolbar button,
    .toolbar > a > button { min-height: 36px; }
    .sms-panel,
    .chat-panel { max-width: 100vw; border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }

    .chat-header-btns {
        grid-auto-columns: 28px;
        gap: var(--ui-space-xxs);
        margin-left: var(--ui-space-xs);
    }

    .chat-header-btns > :is(
        .chat-compact-context,
        .chat-new-session,
        .chat-move-btn,
        .chat-close
    ) {
        width: 28px;
        min-width: 28px;
        height: 28px;
        min-height: 28px;
        border-radius: var(--ui-radius-md);
    }
}