/* Dashboard Chat Panel Styles */

/* ===== Chat Panel Layout ===== */
.chat-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
    background: transparent;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* Smooth transition for chat mode reveal */
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Chat Header ===== */
.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 24px;
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
    min-height: 48px;
    gap: 12px;
}

.chat-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.chat-anna-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.anna-pulse {
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    opacity: 0;
    animation: annaPulse 3s ease-in-out infinite;
}

@keyframes annaPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.15; transform: scale(1.15); }
}

/* Streaming animation on header avatar */
.chat-anna-avatar.streaming .anna-pulse {
    animation: annaStreamPulse 1.4s ease-in-out infinite;
    opacity: 0.3;
}

.chat-anna-avatar.streaming .anna-icon .avatar-logo {
    animation: annaStreamSpin 2s linear infinite;
}

@keyframes annaStreamPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.25); }
}

@keyframes annaStreamSpin {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(5deg) scale(1.08); }
    50% { transform: rotate(0deg) scale(1); }
    75% { transform: rotate(-5deg) scale(1.08); }
    100% { transform: rotate(0deg) scale(1); }
}

.anna-icon {
    width: 24px;
    height: 24px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anna-icon .avatar-logo {
    width: 24px;
    height: 24px;
}

.chat-title-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-title-text h2 {
    font-size: 16px;
    font-weight: 650;
    color: var(--text-color);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-secondary);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--success-color);
    box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
}

.status-dot.streaming {
    background: var(--warning-color);
    animation: statusPulse 1.2s ease-in-out infinite;
}

.status-dot.error {
    background: var(--error-color, #f87171);
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* STT retry button (inline in status bar) */
.stt-retry-btn {
    margin-left: 6px;
    padding: 1px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid var(--primary-color, #71717a);
    border-radius: 10px;
    background: transparent;
    color: var(--primary-color, #71717a);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.stt-retry-btn:hover {
    background: var(--primary-color, #71717a);
    color: #fff;
}

/* ===== Async Agent Usage Indicator ===== */
.async-agent-usage {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: default;
    margin-left: 8px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.async-agent-usage:hover {
    border-color: var(--primary-color);
}

.async-agent-icon {
    font-size: 13px;
    line-height: 1;
}

.async-agent-count {
    font-weight: 600;
    color: var(--text-color);
    min-width: 8px;
    text-align: center;
}

.async-agent-sep {
    color: var(--text-secondary);
    opacity: 0.5;
}

.async-agent-max {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 8px;
    text-align: center;
}

.async-agent-usage.at-limit .async-agent-count {
    color: var(--warning-color);
}

.async-agent-usage.has-running .async-agent-icon {
    animation: agentPulse 1.5s ease-in-out infinite;
}

@keyframes agentPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ===== Pending Agent Badge ===== */
.pending-agent-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 35%, transparent);
    font-size: 12px;
    color: var(--warning-color);
    cursor: pointer;
    margin-left: 4px;
    flex-shrink: 0;
    transition: all 0.2s;
}

.pending-agent-badge:hover {
    border-color: var(--warning-color);
    background: color-mix(in srgb, var(--warning-color) 18%, transparent);
}

.pending-agent-icon {
    font-size: 12px;
    line-height: 1;
}

.pending-agent-count {
    font-weight: 600;
    min-width: 8px;
    text-align: center;
}

.pending-agent-badge.loading {
    opacity: 0.75;
    pointer-events: none;
}

/* ===== Pending Agents Modal ===== */
#pendingAgentsModal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
}

#pendingAgentsModal.active {
    display: flex;
}

#pendingAgentsModal > .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(2px);
}

.pending-agents-modal {
    position: relative;
    width: min(720px, calc(100vw - 40px));
    max-height: min(76vh, 720px);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#pendingAgentsModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

#pendingAgentsModal .modal-title {
    margin: 0;
    font-size: 16px;
    color: var(--text-color);
}

#pendingAgentsModal .modal-close {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

#pendingAgentsModal .modal-close:hover {
    color: var(--text-color);
    border-color: var(--primary-color);
    background: var(--hover-bg);
}

#pendingAgentsModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    overflow: hidden;
}

.pending-agents-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pending-agents-summary {
    font-size: 13px;
    color: var(--text-secondary);
}

.pending-agents-confirm-all {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--success-color) 55%, transparent);
    background: color-mix(in srgb, var(--success-color) 14%, transparent);
    color: var(--success-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pending-agents-confirm-all:hover:not(:disabled) {
    background: color-mix(in srgb, var(--success-color) 20%, transparent);
}

.pending-agents-confirm-all:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pending-agents-status {
    min-height: 18px;
    font-size: 12px;
    color: var(--text-secondary);
}

.pending-agents-status.error {
    color: var(--error-color, #f87171);
}

.pending-agents-status.success {
    color: var(--success-color);
}

.pending-agents-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    max-height: calc(76vh - 150px);
    padding-right: 4px;
}

.pending-agent-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--background-color);
}

.pending-agent-item-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.pending-agent-id {
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--text-secondary);
}

.pending-agent-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.pending-agent-task {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 6px;
    line-height: 1.45;
}

.pending-agent-compact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pending-agent-compact-main {
    min-width: 0;
    flex: 1;
}

.pending-agent-summary-compact {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pending-agent-confirm-btn {
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--success-color) 55%, transparent);
    background: color-mix(in srgb, var(--success-color) 14%, transparent);
    color: var(--success-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pending-agent-confirm-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--success-color) 20%, transparent);
}

.pending-agent-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pending-agent-details {
    margin-top: 8px;
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
}

.pending-agent-details > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    user-select: none;
}

.pending-agent-details[open] > summary {
    color: var(--text-color);
    margin-bottom: 6px;
}

.pending-agent-details-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pending-agent-detail-row {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.pending-agent-summary {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    line-height: 1.5;
}

.pending-agents-empty {
    text-align: center;
    padding: 28px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ===== Chat Panel Actions ===== */
.chat-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chat-action-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}

.chat-action-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
    opacity: 1;
}

.chat-action-btn.active {
    opacity: 0.85;
}

/* ===== Agent Selector ===== */
.agent-selector {
    position: relative;
}

.agent-selector-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 0.7;
}

.agent-selector-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
    opacity: 1;
}

.agent-selector-icon {
    font-size: 14px;
}

.agent-selector-label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-selector-arrow {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.agent-selector.open .agent-selector-arrow {
    transform: rotate(180deg);
}

/* Agent Dropdown */
.agent-selector-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    width: 280px;
    max-height: 400px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 32px var(--shadow-color);
    z-index: 100;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.agent-selector.open .agent-selector-dropdown {
    display: block;
    animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.agent-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agent-refresh-btn {
    font-size: 14px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    padding: 2px;
    border-radius: 4px;
}

.agent-refresh-btn:hover {
    color: var(--primary-color);
    background: var(--hover-bg);
}

.agent-refresh-btn.spinning {
    animation: spin 0.6s linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.agent-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 10px;
}

.agent-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 6px;
    margin: 2px 6px;
}

.agent-dropdown-item:hover {
    background: var(--hover-bg);
}

.agent-dropdown-item.active {
    background: rgba(0, 255, 65, 0.08);
}

.agent-dropdown-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

.agent-dropdown-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.agent-dropdown-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-dropdown-desc {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-dropdown-check {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    opacity: 0;
    flex-shrink: 0;
}

.agent-dropdown-item.active .agent-dropdown-check {
    opacity: 1;
}

.agent-dropdown-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.agent-dropdown-list {
    max-height: 220px;
    overflow-y: auto;
    padding-bottom: 6px;
}

/* Agent online badge */
.agent-online-badge {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success-color);
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(63, 185, 80, 0.4);
}

/* 休眠中的 Cloud Agent：可选但当前离线，选中后自动唤醒 */
.agent-sleeping-badge {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning-color, #d29922);
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(210, 153, 34, 0.35);
}

.agent-dropdown-item.sleeping .agent-dropdown-desc {
    color: var(--warning-color, #d29922);
    opacity: 0.85;
}

.agent-dropdown-item.sleeping .agent-dropdown-icon {
    opacity: 0.7;
}

/* ===== Chat Messages Area ===== */
.chat-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
}

/* Scrollbar styles */
.chat-messages-area::-webkit-scrollbar {
    width: 5px;
}

.chat-messages-area::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages-area::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.2);
    border-radius: 10px;
}

.chat-messages-area::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.35);
}

/* ===== Scroll-to-Bottom Button ===== */
.chat-scroll-to-bottom {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.chat-scroll-to-bottom.visible {
    opacity: 0.6;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.chat-scroll-to-bottom:hover {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
}

/* ===== Empty State ===== */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 48px 24px;
    gap: 12px;
}

.empty-anna-logo {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-anna-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(128, 128, 128, 0.12), transparent 70%);
}

.empty-anna-icon {
    width: 48px;
    height: 48px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-anna-icon .avatar-logo {
    width: 48px;
    height: 48px;
}

.chat-empty-state h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    letter-spacing: -0.02em;
}

.chat-empty-state p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.7;
}

/* Suggestion Chips */
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
    max-width: 560px;
}

.suggestion-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 450;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.suggestion-chip:hover {
    background: var(--hover-bg);
    border-color: rgba(113, 113, 122, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(113, 113, 122, 0.1);
}

.suggestion-chip:hover .suggestion-icon {
    opacity: 0.9;
}

.suggestion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ===== Chat Messages ===== */
.chat-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: messageSlideIn 0.25s ease-out;
}

@keyframes messageSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-message.user {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.chat-message.assistant {
    align-self: flex-start;
}

/* Message Avatar */
.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 2px;
}

.chat-message.user .msg-avatar {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
}

.chat-message.user .msg-avatar .user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.chat-message.assistant .msg-avatar {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 2px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Anna logo avatar images */
.avatar-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.avatar-logo-light {
    display: none;
}

[data-theme="light"] .avatar-logo-dark {
    display: none;
}

[data-theme="light"] .avatar-logo-light {
    display: block;
}

/* Message Bubble */
.msg-bubble {
    position: relative;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: var(--chat-font-size, 14px);
    line-height: 1.65;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.chat-message.user .msg-bubble {
    background: linear-gradient(135deg, #4f7df5 0%, #6366f1 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow:
        0 1px 3px rgba(99, 102, 241, 0.12),
        0 4px 12px rgba(99, 102, 241, 0.08);
}

.chat-message.assistant .msg-bubble {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-bottom-left-radius: 6px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .chat-message.assistant .msg-bubble {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 2px 12px rgba(0, 0, 0, 0.04);
}

/* ===== Message Timestamp ===== */
.msg-time {
    font-size: 11px;
    line-height: 1;
    margin-top: 6px;
    opacity: 0.45;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    user-select: none;
}

.chat-message.user .msg-time {
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}

.chat-message.assistant .msg-time {
    color: var(--text-secondary);
}

/* Markdown Content in Messages */
.msg-bubble .msg-content {
    overflow-wrap: break-word;
    overflow-x: auto;
}

.msg-bubble .msg-content p {
    margin: 0 0 8px 0;
}

.msg-bubble .msg-content p:last-child {
    margin-bottom: 0;
}

.msg-bubble .msg-content ul,
.msg-bubble .msg-content ol {
    margin: 4px 0;
    padding-left: 20px;
}

.msg-bubble .msg-content li {
    margin: 2px 0;
}

.msg-bubble .msg-content h1,
.msg-bubble .msg-content h2,
.msg-bubble .msg-content h3,
.msg-bubble .msg-content h4 {
    margin: 12px 0 6px 0;
    font-weight: 600;
    color: var(--text-color);
}

.msg-bubble .msg-content h1 { font-size: 18px; }
.msg-bubble .msg-content h2 { font-size: 16px; }
.msg-bubble .msg-content h3 { font-size: 15px; }

/* Tables */
.msg-bubble .msg-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    font-size: 13px;
    overflow-x: auto;
    display: block;
}

.msg-bubble .msg-content thead {
    background: rgba(255, 255, 255, 0.05);
}

.msg-bubble .msg-content th,
.msg-bubble .msg-content td {
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    text-align: left;
    white-space: nowrap;
}

.msg-bubble .msg-content th {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
}

.msg-bubble .msg-content tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Horizontal Rule */
.msg-bubble .msg-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 12px 0;
}

.msg-bubble .msg-content blockquote {
    border-left: 3px solid var(--primary-color);
    margin: 8px 0;
    padding: 4px 12px;
    color: var(--text-secondary);
    background: rgba(0, 255, 65, 0.03);
    border-radius: 0 6px 6px 0;
}

.msg-bubble .msg-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.msg-bubble .msg-content a:hover {
    text-decoration: underline;
}

.msg-bubble .msg-content code:not(pre code) {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

.chat-message.user .msg-bubble .msg-content code:not(pre code) {
    background: rgba(255, 255, 255, 0.2);
}

/* Code Blocks */
.msg-bubble .msg-content pre {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.code-block-wrapper {
    position: relative;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}

.code-block-lang {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.code-copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.code-copy-btn:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.code-copy-btn.copied {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.msg-bubble .msg-content pre code {
    display: block;
    padding: 12px;
    font-size: 13px;
    line-height: 1.5;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    overflow-x: auto;
}

/* ===== Thinking Block ===== */
.thinking-block {
    margin: 8px 0;
    border: 1px solid rgba(168, 130, 255, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(168, 130, 255, 0.05);
}

.thinking-block.thinking-hidden {
    display: none;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(168, 130, 255, 0.1);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.thinking-header:hover {
    background: rgba(168, 130, 255, 0.18);
}

.thinking-icon {
    font-size: 14px;
}

.thinking-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    opacity: 0.85;
}

.thinking-status {
    font-size: 12px;
}

.thinking-status.thinking-streaming {
    color: var(--warning-color);
    animation: statusPulse 1s ease-in-out infinite;
}

.thinking-status.thinking-done {
    color: var(--success-color);
}

.thinking-toggle {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.thinking-block.expanded .thinking-toggle {
    transform: rotate(90deg);
}

.thinking-body {
    display: none;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.6;
    border-top: 1px solid rgba(168, 130, 255, 0.2);
    color: var(--text-secondary);
    max-height: 400px;
    overflow-y: auto;
}

.thinking-block.expanded .thinking-body {
    display: block;
}

.thinking-content {
    white-space: pre-wrap;
    word-break: break-word;
}

.thinking-content p {
    margin: 0 0 8px 0;
}

.thinking-content p:last-child {
    margin-bottom: 0;
}

/* Thinking toggle button in header */
.thinking-toggle-btn {
    position: relative;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.thinking-toggle-btn.active {
    opacity: 1;
}

.thinking-toggle-btn::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(168, 130, 255);
    opacity: 0;
    transition: opacity 0.2s;
}

.thinking-toggle-btn.active::after {
    opacity: 1;
}

/* Light theme adjustments */
[data-theme="light"] .thinking-block {
    border-color: rgba(128, 90, 213, 0.3);
    background: rgba(128, 90, 213, 0.04);
}

[data-theme="light"] .thinking-header {
    background: rgba(128, 90, 213, 0.08);
}

[data-theme="light"] .thinking-header:hover {
    background: rgba(128, 90, 213, 0.14);
}

[data-theme="light"] .thinking-body {
    border-top-color: rgba(128, 90, 213, 0.15);
}

/* Tool Call Blocks */
.tool-call-block {
    margin: 8px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
}

.tool-call-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.tool-call-header:hover {
    background: rgba(0, 0, 0, 0.2);
}

.tool-call-icon {
    font-size: 14px;
}

.tool-call-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
}

.tool-call-status {
    font-size: 12px;
}

.tool-call-status.running {
    color: var(--warning-color);
    animation: statusPulse 1s ease-in-out infinite;
}

.tool-call-status.done {
    color: var(--success-color);
}

.tool-call-status.error {
    color: var(--error-color);
}

.tool-call-toggle {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.tool-call-block.expanded .tool-call-toggle {
    transform: rotate(90deg);
}

.tool-call-body {
    display: none;
    padding: 8px 12px;
    font-size: 12px;
    border-top: 1px solid var(--border-color);
}

.tool-call-block.expanded .tool-call-body {
    display: block;
}

.tool-call-section {
    margin-bottom: 6px;
}

.tool-call-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.tool-call-section pre {
    margin: 0;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    overflow-x: auto;
    color: var(--text-color);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ===== Tool Toggle Button ===== */
.tool-toggle-btn {
    position: relative;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.tool-toggle-btn.active {
    opacity: 1;
}

.tool-toggle-btn::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--success-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.tool-toggle-btn.active::after {
    opacity: 1;
}

/* ===== TTS Toggle Button ===== */
.tts-toggle-btn {
    position: relative;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.tts-toggle-btn.active {
    opacity: 1;
}

.tts-toggle-btn::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-color, #667eea);
    opacity: 0;
    transition: opacity 0.2s;
}

.tts-toggle-btn.active::after {
    opacity: 1;
}

/* ===== Plan Toggle Button ===== */
.plan-toggle-btn {
    position: relative;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.plan-toggle-btn.active {
    opacity: 1;
}

.plan-toggle-btn::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #71717a;
    opacity: 0;
    transition: opacity 0.2s;
}

.plan-toggle-btn.active::after {
    opacity: 1;
}

/* ===== Tool Hidden State ===== */
.tool-call-block.tool-hidden {
    display: none;
}

/* ===== Verbatim Display Blocks (_display) ===== */
/* Host-rendered, byte-exact plugin output. Attributed cards — visually
   distinct from assistant prose (trust boundary), and NOT hidden when tool
   traces are toggled off: they are reply content, not debug info. */
.display-blocks {
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.display-block-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-color, #d97757);
    border-radius: 8px;
    background: rgba(217, 119, 87, 0.05);
    overflow: hidden;
}

.display-block-badge {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 5px 12px 0;
    user-select: none;
}

.display-block-body {
    padding: 6px 12px 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

.display-block-body > :first-child {
    margin-top: 0;
}

.display-block-body > :last-child {
    margin-bottom: 0;
}

.display-block-body pre {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    overflow-x: auto;
}

.display-block-body code {
    font-size: 12.5px;
}

.display-block-body img {
    max-width: 100%;
    border-radius: 6px;
}

/* ===== Plan Tool Styling ===== */
.tool-call-block.tool-call-plan {
    border-color: rgba(113, 113, 122, 0.3);
    background: rgba(113, 113, 122, 0.06);
}

.tool-call-block.tool-call-plan .tool-call-header {
    background: rgba(113, 113, 122, 0.1);
}

.tool-call-block.tool-call-plan .tool-call-header:hover {
    background: rgba(113, 113, 122, 0.15);
}

/* ===== Persistent Plan Card (sticky) ===== */
.plan-card {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: -20px -20px 8px -20px;
    padding: 0;
    border-bottom: 1px solid rgba(113, 113, 122, 0.2);
    background: rgba(18, 18, 24, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 13px;
    transition: opacity 0.3s, transform 0.3s;
}

.plan-card-enter {
    opacity: 0;
    transform: translateY(-12px);
}

.plan-card-pending .plan-card-bar-fill {
    opacity: 0.6;
}

.plan-card-hidden {
    display: none;
}

.plan-card-done {
    border-bottom-color: rgba(34, 197, 94, 0.25);
}

/* Header */
.plan-card-header {
    padding: 14px 20px 10px;
    cursor: pointer;
    user-select: none;
}

.plan-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-card-icon {
    font-size: 16px;
    line-height: 1;
}

.plan-card-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);
    flex: 1;
}

.plan-card-counter {
    font-size: 12px;
    font-weight: 600;
    color: rgba(113, 113, 122, 0.9);
    background: rgba(113, 113, 122, 0.12);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

.plan-card-done .plan-card-counter {
    color: rgba(34, 197, 94, 0.9);
    background: rgba(34, 197, 94, 0.12);
}

.plan-card-collapse {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    transition: transform 0.25s;
}

.plan-card-collapsed .plan-card-collapse {
    transform: rotate(-90deg);
}

/* Status line */
.plan-card-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    transition: color 0.3s;
}

.plan-card-done .plan-card-status {
    color: rgba(34, 197, 94, 0.8);
}

/* Progress bar */
.plan-card-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.plan-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #71717a, #a1a1aa);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card-bar-fill.done {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

/* Steps list */
.plan-card-steps {
    padding: 6px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
    max-height: 600px;
    overflow: hidden;
}

.plan-card-collapsed .plan-card-steps {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Individual step */
.plan-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    transition: background 0.2s, opacity 0.3s;
}

.plan-step:hover {
    background: rgba(255, 255, 255, 0.03);
}

.plan-step-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* Step SVG icons */
.plan-step-svg {
    width: 18px;
    height: 18px;
}

.plan-step-svg.pending circle {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
}

.plan-step-svg.done circle {
    fill: rgba(34, 197, 94, 0.15);
    stroke: #22c55e;
    stroke-width: 1.5;
}

.plan-step-svg.done path {
    fill: none;
    stroke: #22c55e;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 0;
    animation: planCheckDraw 0.4s ease forwards;
}

@keyframes planCheckDraw {
    from { stroke-dashoffset: 12; }
    to { stroke-dashoffset: 0; }
}

.plan-step-svg.blocked circle {
    fill: none;
    stroke: var(--error-color);
    stroke-width: 1.5;
}

.plan-step-svg.blocked path {
    fill: none;
    stroke: var(--error-color);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Step spinner (in-progress) */
.plan-step-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(113, 113, 122, 0.2);
    border-top-color: #71717a;
    border-radius: 50%;
    animation: planSpin 0.8s linear infinite;
}

@keyframes planSpin {
    to { transform: rotate(360deg); }
}

/* Step body */
.plan-step-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    line-height: 1.5;
}

.plan-step-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 18px;
}

.plan-step-title {
    color: var(--text-color);
    font-size: 13px;
}

.plan-step-completed .plan-step-title {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.15);
}

.plan-step-in_progress .plan-step-title {
    color: var(--text-color);
    font-weight: 500;
}

.plan-step-not_started .plan-step-title {
    color: var(--text-secondary);
}

.plan-step-blocked .plan-step-title {
    color: var(--error-color);
    opacity: 0.8;
}

.plan-step-result {
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    padding-left: 22px;
    line-height: 1.4;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ===== Subagent Tool Styling ===== */
.tool-call-block.tool-call-subagent {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.06);
}

.tool-call-block.tool-call-subagent .tool-call-header {
    background: rgba(245, 158, 11, 0.1);
}

.tool-call-block.tool-call-subagent .tool-call-header:hover {
    background: rgba(245, 158, 11, 0.15);
}

/* ===== Subagent Result Block ===== */
.subagent-result-block {
    margin: 8px 0;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(245, 158, 11, 0.04);
}

.subagent-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    user-select: none;
}

.subagent-result-icon {
    font-size: 16px;
}

.subagent-result-toggle {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s;
}

.subagent-result-block:not(.expanded) .subagent-result-toggle {
    transform: rotate(-90deg);
}

.subagent-result-body {
    display: none;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.6;
}

.subagent-result-block.expanded .subagent-result-body {
    display: block;
}

/* ===== Agent Badge (main vs sub) ===== */
.agent-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.agent-badge-main {
    background: rgba(113, 113, 122, 0.12);
    color: #a1a1aa;
    border: 1px solid rgba(113, 113, 122, 0.2);
}

.agent-badge-sub {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Sub-agent avatar icon */
.sub-agent-icon {
    font-size: 16px;
    line-height: 1;
}

/* Tool real-name label */
.tool-call-realname {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* ===== Main Agent label on .msg-text when subagent is present ===== */
.chat-message.has-subagent .msg-text:first-child::before {
    content: '🤖 Main Agent';
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #a1a1aa;
    margin-bottom: 6px;
    padding: 2px 8px;
    background: rgba(113, 113, 122, 0.08);
    border: 1px solid rgba(113, 113, 122, 0.15);
    border-radius: 4px;
    display: inline-block;
}

/* ===== Agent Continuation Divider ===== */
.agent-continuation-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    user-select: none;
}

.agent-cont-line {
    flex: 1;
    height: 1px;
    background: rgba(113, 113, 122, 0.2);
}

.agent-cont-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #a1a1aa;
    white-space: nowrap;
    padding: 2px 10px;
    background: rgba(113, 113, 122, 0.08);
    border: 1px solid rgba(113, 113, 122, 0.15);
    border-radius: 4px;
}

/* Post-subagent text continuation segment */
.msg-text-continuation {
    margin-top: 4px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }



@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* ===== Chat Input Area ===== */
.chat-input-area {
    padding: 16px 20px 20px;
    border-top: none;
    background: transparent;
    flex-shrink: 0;
}

/* ===== Chat Input Toolbar (action buttons above input) ===== */
.chat-input-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 4px 8px;
}

.chat-input-toolbar .chat-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chat-input-toolbar .chat-action-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border: none;
    background: transparent;
    opacity: 0.6;
    transition: all 0.2s;
}

.chat-input-toolbar .chat-action-btn:hover {
    opacity: 1;
    background: var(--hover-bg);
}

.chat-input-toolbar .chat-action-btn.active {
    opacity: 0.85;
}

.chat-input-toolbar .agent-selector-btn {
    border: none;
    background: transparent;
    opacity: 0.7;
    font-size: 12px;
    padding: 4px 8px;
}

.chat-input-toolbar .agent-selector-btn:hover {
    opacity: 1;
    background: var(--hover-bg);
}

/* ===== Attachment Preview Bar ===== */
.chat-attachments-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 4px;
    max-height: 160px;
    overflow-y: auto;
}

.chat-attachments-preview.hidden {
    display: none;
}

.attachment-preview-item {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--background-color);
    flex-shrink: 0;
}

.attachment-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attachment-preview-item.file-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 72px;
    max-width: 140px;
    padding: 4px 8px;
    gap: 2px;
}

.attachment-file-icon {
    font-size: 20px;
}

.attachment-file-name {
    font-size: 10px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

/* ===== Document Pills (chat history) ===== */
.msg-attachments--docs {
    flex-direction: column;
    gap: 4px;
}

.msg-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(4px);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.15s;
    max-width: 280px;
    cursor: pointer;
}
.msg-doc-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.msg-doc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 20px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.msg-doc-pill--pdf .msg-doc-badge    { background: #ef4444; }
.msg-doc-pill--office .msg-doc-badge { background: #3b82f6; }
.msg-doc-pill--text .msg-doc-badge   { background: #71717a; }
.msg-doc-pill--archive .msg-doc-badge{ background: #f59e0b; }
.msg-doc-pill--audio .msg-doc-badge  { background: #10b981; }
.msg-doc-pill--video .msg-doc-badge  { background: #ec4899; }

.msg-doc-name {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.msg-doc-open {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.msg-doc-pill:hover .msg-doc-open {
    opacity: 0.7;
}

/* Light theme overrides — doc pills live inside the user bubble which
   always has a blue/indigo gradient, so keep white-on-dark treatment */
[data-theme="light"] .msg-doc-pill {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
[data-theme="light"] .msg-doc-pill:hover {
    background: rgba(255, 255, 255, 0.28);
}
[data-theme="light"] .msg-doc-name {
    color: #fff;
}
[data-theme="light"] .msg-doc-open {
    color: #fff;
}

/* Upload preview pill variant */
.attachment-preview-pill {
    position: relative;
    height: auto;
    width: auto;
}
.attachment-preview-pill .attachment-remove-btn {
    position: static;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.6;
}
.attachment-preview-pill:hover .attachment-remove-btn {
    opacity: 1;
}

.attachment-remove-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.attachment-preview-item:hover .attachment-remove-btn {
    opacity: 1;
}

/* ===== Attach Button ===== */
.chat-attach-btn {
    order: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-attach-btn:hover {
    color: var(--primary-color);
    background: rgba(0, 255, 65, 0.08);
}

/* ===== Voice Input Button ===== */
.chat-voice-btn {
    position: relative;
    order: 10;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-voice-btn:hover {
    color: var(--primary-color);
    background: rgba(0, 255, 65, 0.08);
}

.chat-voice-btn.recording {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    animation: voice-btn-glow 1.5s ease-in-out infinite;
}

@keyframes voice-btn-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.voice-recording-pulse {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: voice-pulse 1s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

[data-theme="light"] .chat-voice-btn:hover {
    background: rgba(0, 180, 40, 0.08);
}

[data-theme="light"] .chat-voice-btn.recording {
    background: rgba(239, 68, 68, 0.08);
}

/* ===== Voice Call Button ===== */
.chat-voice-call-btn {
    position: relative;
    order: 11;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: 2px;
}

.chat-voice-call-btn:hover {
    color: var(--primary-color);
    background: rgba(0, 255, 65, 0.08);
}

.chat-voice-call-btn.active {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    animation: voice-call-glow 2s ease-in-out infinite;
}

.chat-voice-call-btn.active .voice-call-icon { display: none; }
.chat-voice-call-btn.active .voice-call-icon-active { display: block !important; }
.chat-voice-call-btn:not(.active) .voice-call-icon-active { display: none; }

@keyframes voice-call-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.voice-call-pulse {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: voice-call-pulse-anim 1.2s ease-in-out infinite;
}

@keyframes voice-call-pulse-anim {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

[data-theme="light"] .chat-voice-call-btn:hover {
    background: rgba(0, 180, 40, 0.08);
}

[data-theme="light"] .chat-voice-call-btn.active {
    background: rgba(34, 197, 94, 0.08);
}

/* ===== Voice Call Overlay ===== */
.voice-call-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.voice-call-overlay.active {
    opacity: 1;
    visibility: visible;
}

.voice-call-panel {
    width: 360px;
    max-width: 90vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.voice-call-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 255, 65, 0.15), rgba(0, 200, 255, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    position: relative;
}

.voice-call-avatar::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(34, 197, 94, 0.3);
    animation: voice-avatar-ring 2s ease-in-out infinite;
}

@keyframes voice-avatar-ring {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 1; }
}

.voice-call-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.voice-call-status {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.voice-call-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    animation: status-blink 1.5s ease-in-out infinite;
}

@keyframes status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.voice-call-transcript {
    width: 100%;
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}

.voice-call-transcript .user-text {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.voice-call-transcript .anna-text {
    color: var(--primary-color);
}

.voice-call-visualizer {
    width: 100%;
    height: 48px;
}

.voice-call-visualizer canvas {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.voice-call-timer {
    font-size: 14px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.voice-call-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.voice-call-end-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 20px;
}

.voice-call-end-btn:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.voice-call-mute-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-call-mute-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.voice-call-mute-btn.muted {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.voice-call-interrupt-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.voice-call-interrupt-btn:hover {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

/* ===== Drag & Drop Overlay ===== */
.chat-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    pointer-events: none;
}

.chat-drop-overlay.hidden {
    display: none;
}

.chat-drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.chat-drop-icon {
    font-size: 40px;
    animation: dropBounce 1s ease-in-out infinite;
}

.chat-drop-label {
    font-size: 16px;
    font-weight: 500;
}

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

/* ===== Attachments in User Messages ===== */
.msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.msg-attachment-thumb {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.msg-attachment-thumb:hover {
    transform: scale(1.03);
}

.msg-attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msg-attachment-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
}

.msg-attachment-file .att-icon {
    font-size: 16px;
}

.msg-attachment-file .att-name {
    color: var(--text-secondary);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Image Lightbox ===== */
.chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
}

.chat-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chat-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 0;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 18px 18px 12px;
    min-height: 56px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.chat-input-wrapper:focus-within {
    border-color: rgba(113, 113, 122, 0.4);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 24px rgba(113, 113, 122, 0.08),
        0 0 0 2px rgba(113, 113, 122, 0.08);
}

.chat-input {
    flex: 0 0 100%;
    width: 100%;
    order: -2;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.5;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 150px;
    min-height: 32px;
    padding: 4px 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .chat-input {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* Voice waveform canvas: full width, stay with textarea */
.chat-input-wrapper .voice-waveform-canvas {
    flex: 0 0 100%;
    order: -1;
}

/* Hidden file input: out of visual flow */
.chat-input-wrapper #chatFileInput {
    order: -3;
}

.chat-input::placeholder {
    color: var(--text-secondary);
}

.chat-send-btn,
.chat-stop-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-send-btn {
    order: 11;
}

.chat-stop-btn {
    order: 12;
}

.chat-send-btn {
    background: linear-gradient(135deg, #71717a, #71717a);
    color: #fff;
}

.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chat-send-btn:not(:disabled):hover {
    transform: scale(1.05);
    box-shadow: 0 3px 12px rgba(113, 113, 122, 0.3);
}

.chat-stop-btn {
    background: var(--error-color);
    color: #fff;
}

.chat-stop-btn:hover {
    background: #ff6b6b;
    transform: scale(1.05);
}

.hidden {
    display: none !important;
}

/* Agent selector ordering when inside wrapper (landing mode) */
.chat-input-wrapper > .agent-selector {
    order: 0;
}

.chat-input-wrapper .agent-selector-btn {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    gap: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    opacity: 1;
    transition: all 0.2s ease;
}

.chat-input-wrapper .agent-selector-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-color);
}

[data-theme="light"] .chat-input-wrapper .agent-selector-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
}

[data-theme="light"] .chat-input-wrapper .agent-selector-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-color);
}

/* Agent selector dropdown: open upward when inside wrapper */
.chat-input-wrapper .agent-selector-dropdown {
    bottom: calc(100% + 6px);
    left: 0;
    right: auto;
}

/* Model selector ordering when inside wrapper */
.chat-input-wrapper > .chat-model-selector {
    order: 1;
}

/* In-wrapper model selector button style */
.chat-input-wrapper .chat-model-selector-btn {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    gap: 5px;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.chat-input-wrapper .chat-model-selector-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-color);
}

[data-theme="light"] .chat-input-wrapper .chat-model-selector-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
}

[data-theme="light"] .chat-input-wrapper .chat-model-selector-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-color);
}

/* ===== Chat Input Footer (hidden — model selector always in wrapper) ===== */
.chat-input-footer {
    display: none;
}

.chat-footer-selectors {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ===== Status Indicators (session mode + agent status) ===== */
.chat-status-indicators {
    display: flex;
    align-items: center;
    gap: 6px;
    order: 2;
}

.chat-status-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: default;
    border: 1px solid transparent;
}

/* Session mode indicator */
.chat-session-indicator {
    background: rgba(113, 113, 122, 0.08);
    border-color: rgba(113, 113, 122, 0.15);
    color: rgba(113, 113, 122, 0.9);
}

.chat-session-indicator .indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #71717a;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(113, 113, 122, 0.5);
}

.chat-session-indicator.zen .indicator-dot {
    background: #10b981;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}

.chat-session-indicator.zen {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
    color: rgba(16, 185, 129, 0.9);
}

/* Agent status indicator */
.chat-agent-indicator {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: pointer;
}

.chat-agent-indicator:hover {
    filter: brightness(1.25);
}

/* 磁盘可用量（心跳携带，仅有数据时展示） */
.chat-agent-indicator .indicator-disk {
    font-size: 10px;
    opacity: 0.75;
    flex-shrink: 0;
    padding-left: 6px;
    border-left: 1px solid currentColor;
    white-space: nowrap;
}

.chat-agent-indicator .indicator-disk[hidden] {
    display: none;
}

/* 可用空间 < 20% → 磁盘告警（琥珀/红色，盖过类型色调） */
.chat-agent-indicator .indicator-disk.warn {
    color: #f59e0b;
    opacity: 1;
    font-weight: 600;
}

.chat-agent-indicator.disk-warn {
    border-color: rgba(245, 158, 11, 0.45);
}

[data-theme="light"] .chat-agent-indicator .indicator-disk.warn {
    color: #d97706;
}

.chat-agent-indicator .indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-secondary);
    opacity: 0.5;
}

.chat-agent-indicator.online .indicator-dot {
    background: #10b981;
    opacity: 1;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}

.chat-agent-indicator.online {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.chat-agent-indicator.offline .indicator-dot {
    background: var(--text-secondary);
    opacity: 0.4;
}

/* Sleeping (resolvable Cloud Agent, wakes on use) — amber breathing dot */
.chat-agent-indicator.sleeping .indicator-dot {
    background: #f59e0b;
    opacity: 1;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
    animation: agentDotBreath 2.4s ease-in-out infinite;
}

@keyframes agentDotBreath {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Waking capsule (wake-latency-speedup P2): while a Cloud Agent wake is in
   flight the window manager sets body.cloud-agent-waking — the indicator dot
   pulses amber→sky regardless of the per-render state classes (which are
   wiped and re-added by updateAgentIndicator on every refresh). */
body.cloud-agent-waking .chat-agent-indicator .indicator-dot {
    background: linear-gradient(90deg, #f59e0b, #38bdf8);
    opacity: 1;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.55);
    animation: agentDotWaking 1.2s ease-in-out infinite;
}

@keyframes agentDotWaking {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.35); }
}

/* Agent type icon (cloud / monitor) — colored via container tint */
.chat-agent-indicator .indicator-type-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.chat-agent-indicator .indicator-type-icon[hidden] {
    display: none;
}

.chat-agent-indicator .indicator-type-icon svg {
    display: block;
}

/* Type tint — Cloud (sky blue) vs Local (violet); placed after .online so it
   wins the container colors, while the status dot keeps green/amber/gray. */
.chat-agent-indicator.cloud {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.18);
    color: #38bdf8;
}

.chat-agent-indicator.local {
    background: rgba(113, 113, 122, 0.08);
    border-color: rgba(113, 113, 122, 0.18);
    color: #a1a1aa;
}

/* Offline overrides the type tint back to neutral (icon still shows the type) */
.chat-agent-indicator.offline.cloud,
.chat-agent-indicator.offline.local {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

[data-theme="light"] .chat-agent-indicator {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .chat-session-indicator {
    background: rgba(113, 113, 122, 0.06);
    border-color: rgba(113, 113, 122, 0.12);
    color: #71717a;
}

[data-theme="light"] .chat-session-indicator.zen {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.12);
    color: #059669;
}

[data-theme="light"] .chat-agent-indicator.online {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.1);
    color: #059669;
}

[data-theme="light"] .chat-agent-indicator.cloud {
    background: rgba(14, 165, 233, 0.07);
    border-color: rgba(14, 165, 233, 0.16);
    color: #0284c7;
}

[data-theme="light"] .chat-agent-indicator.local {
    background: rgba(113, 113, 122, 0.07);
    border-color: rgba(113, 113, 122, 0.16);
    color: #52525b;
}

[data-theme="light"] .chat-agent-indicator.offline.cloud,
[data-theme="light"] .chat-agent-indicator.offline.local {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}

.chat-model-badge {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(0, 255, 65, 0.08);
    border: 1px solid rgba(0, 255, 65, 0.15);
    border-radius: 4px;
    color: var(--primary-color);
    font-weight: 500;
    white-space: nowrap;
}

.chat-model-badge:empty {
    display: none;
}

/* ===== Chat Model Selector ===== */
.chat-model-selector {
    position: relative;
    flex-shrink: 0;
}

.chat-model-selector-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(0, 255, 65, 0.08);
    border: 1px solid rgba(0, 255, 65, 0.15);
    border-radius: 4px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
}

.chat-model-selector-btn:hover {
    background: rgba(0, 255, 65, 0.14);
    border-color: rgba(0, 255, 65, 0.3);
}

.chat-model-selector-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.7;
}

.chat-model-selector-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-model-selector-arrow {
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: transform 0.2s;
}

.chat-model-selector.open .chat-model-selector-arrow {
    transform: rotate(180deg);
}

.chat-model-selector-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 300px;
    max-width: 420px;
    max-height: 360px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    overflow: hidden;
    animation: chatModelDropFadeIn 0.15s ease;
}

@keyframes chatModelDropFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-model-selector.open .chat-model-selector-dropdown {
    display: block;
}

.chat-model-dropdown-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.chat-model-dropdown-list {
    overflow-y: auto;
    max-height: 310px;
    padding: 4px;
}

.chat-model-dropdown-loading {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
}

.chat-model-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 8px;
}

.chat-model-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.chat-model-dropdown-item.active {
    background: rgba(0, 255, 65, 0.08);
}

.chat-model-dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.chat-model-dropdown-item-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-model-dropdown-item-provider {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-model-dropdown-item-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.chat-model-meta-tag {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    white-space: nowrap;
    font-weight: 500;
}

.chat-model-meta-tag.multiplier {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.15);
}

.chat-model-dropdown-item-check {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

/* ===== Light Theme: Model Selector ===== */
[data-theme="light"] .chat-model-selector-btn {
    background: rgba(0, 128, 0, 0.06);
    border-color: rgba(0, 128, 0, 0.12);
}

[data-theme="light"] .chat-model-selector-btn:hover {
    background: rgba(0, 128, 0, 0.1);
    border-color: rgba(0, 128, 0, 0.2);
}

[data-theme="light"] .chat-model-selector-dropdown {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .chat-model-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .chat-model-dropdown-item.active {
    background: rgba(0, 128, 0, 0.06);
}

[data-theme="light"] .chat-model-meta-tag {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ===== Chat Mode Selector (Zen / Normal) ===== */
.chat-mode-selector {
    position: relative;
    flex-shrink: 0;
}

.chat-mode-selector-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 4px;
    color: #a78bfa;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
}

.chat-mode-selector-btn:hover {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.3);
}

.chat-mode-selector-icon {
    font-size: 11px;
}

.chat-mode-selector-label {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-mode-selector-arrow {
    font-size: 9px;
    opacity: 0.7;
    transition: transform 0.2s;
}

.chat-mode-selector.open .chat-mode-selector-arrow {
    transform: rotate(180deg);
}

.chat-mode-selector-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    max-width: 360px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    overflow: hidden;
    animation: chatModeDropFadeIn 0.15s ease;
    padding: 4px;
}

@keyframes chatModeDropFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-mode-selector.open .chat-mode-selector-dropdown {
    display: block;
}

.chat-mode-dropdown-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 10px;
}

.chat-mode-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.chat-mode-dropdown-item.active {
    background: rgba(139, 92, 246, 0.08);
}

.chat-mode-dropdown-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
    margin-top: 1px;
}

.chat-mode-dropdown-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.chat-mode-dropdown-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.chat-mode-dropdown-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    opacity: 0.8;
}

.chat-mode-dropdown-check {
    color: #8b5cf6;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    visibility: hidden;
    margin-top: 2px;
}

.chat-mode-dropdown-item.active .chat-mode-dropdown-check {
    visibility: visible;
}

/* Light theme */
[data-theme="light"] .chat-mode-selector-btn {
    background: rgba(109, 40, 217, 0.06);
    border-color: rgba(109, 40, 217, 0.12);
    color: #7c3aed;
}

[data-theme="light"] .chat-mode-selector-btn:hover {
    background: rgba(109, 40, 217, 0.1);
    border-color: rgba(109, 40, 217, 0.2);
}

[data-theme="light"] .chat-mode-selector-dropdown {
    background: #fff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .chat-mode-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .chat-mode-dropdown-item.active {
    background: rgba(109, 40, 217, 0.06);
}

[data-theme="light"] .chat-mode-dropdown-check {
    color: #7c3aed;
}

/* Zen mode active indicator on button */
.chat-mode-selector.zen-active .chat-mode-selector-btn {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.35);
    color: #a78bfa;
}

[data-theme="light"] .chat-mode-selector.zen-active .chat-mode-selector-btn {
    background: rgba(109, 40, 217, 0.12);
    border-color: rgba(109, 40, 217, 0.25);
    color: #7c3aed;
}

.chat-disclaimer {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mention shortcut hint (above the input wrapper). Subtle, single line,
   never blocks layout. Uses --text-secondary to follow theme switches. */
.chat-mention-hint {
    margin: 0 4px 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    opacity: 0.65;
    text-align: center;
    user-select: none;
    pointer-events: none;
}
.chat-mention-hint kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 0 5px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
[data-theme="light"] .chat-mention-hint kbd {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ===== Light Theme ===== */
[data-theme="light"] .chat-panel {
    background: transparent;
    box-shadow: none;
}

[data-theme="light"] .chat-panel-header {
    background: transparent;
}

[data-theme="light"] .chat-input-wrapper {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .chat-input-area {
    background: transparent;
}

[data-theme="light"] .attachment-preview-item {
    border-color: #e2e8f0;
    background: #f5f7fa;
}

[data-theme="light"] .attachment-remove-btn {
    background: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .attachment-preview-pill {
    background: #f0f2f5;
    border: 1px solid #d0d7de;
}
[data-theme="light"] .attachment-preview-pill:hover {
    background: #e5e8ec;
}
[data-theme="light"] .attachment-preview-pill .msg-doc-name {
    color: #1f2328;
}
[data-theme="light"] .attachment-preview-pill .attachment-remove-btn {
    background: rgba(0, 0, 0, 0.12);
    color: #1f2328;
}
[data-theme="light"] .attachment-preview-pill .attachment-remove-btn:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .attachment-file-name {
    color: #424a53;
}

[data-theme="light"] .msg-attachment-thumb {
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .msg-attachment-file {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .chat-drop-overlay {
    background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .chat-scroll-to-bottom {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .chat-scroll-to-bottom:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .chat-drop-overlay-content {
    color: var(--text-color);
}

[data-theme="light"] .chat-message.assistant .msg-bubble {
    background: #f5f7fa;
    border-color: #e2e8f0;
}

[data-theme="light"] .msg-bubble .msg-content code:not(pre code) {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .msg-bubble .msg-content thead {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .msg-bubble .msg-content tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .suggestion-chip {
    background: #f8f9fa;
    border-color: #e2e8f0;
}

[data-theme="light"] .suggestion-chip:hover {
    background: #edf2f7;
}

[data-theme="light"] .agent-selector-dropdown {
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .agent-dropdown-item.active {
    background: rgba(0, 128, 0, 0.06);
}

[data-theme="light"] .tool-call-block {
    background: #f8f9fa;
}

[data-theme="light"] .tool-call-header {
    background: #edf2f7;
}

[data-theme="light"] .tool-call-header:hover {
    background: #e2e8f0;
}

[data-theme="light"] .display-block-card {
    background: rgba(217, 119, 87, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .display-block-body pre {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .plan-card {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(113, 113, 122, 0.15);
}

[data-theme="light"] .plan-card-bar {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .plan-step:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .plan-step-completed .plan-step-title {
    text-decoration-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .plan-step-svg.pending circle {
    stroke: #94a3b8;
}

[data-theme="light"] .plan-step-spinner {
    border-color: rgba(113, 113, 122, 0.15);
    border-top-color: #71717a;
}

[data-theme="light"] .tool-call-block.tool-call-plan {
    background: rgba(113, 113, 122, 0.04);
}

[data-theme="light"] .tool-call-block.tool-call-plan .tool-call-header {
    background: rgba(113, 113, 122, 0.08);
}

[data-theme="light"] .tool-call-block.tool-call-subagent {
    background: rgba(245, 158, 11, 0.04);
}

[data-theme="light"] .tool-call-block.tool-call-subagent .tool-call-header {
    background: rgba(245, 158, 11, 0.08);
}

[data-theme="light"] .subagent-result-block {
    background: rgba(245, 158, 11, 0.03);
}

[data-theme="light"] .subagent-result-header {
    background: rgba(245, 158, 11, 0.06);
}

[data-theme="light"] .agent-badge-main {
    background: rgba(113, 113, 122, 0.08);
    color: #71717a;
}

[data-theme="light"] .agent-badge-sub {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
}

[data-theme="light"] .chat-message.has-subagent .msg-text:first-child::before {
    color: #71717a;
    background: rgba(113, 113, 122, 0.06);
    border-color: rgba(113, 113, 122, 0.12);
}

[data-theme="light"] .agent-cont-line {
    background: rgba(113, 113, 122, 0.15);
}

[data-theme="light"] .agent-cont-label {
    color: #71717a;
    background: rgba(113, 113, 122, 0.06);
    border-color: rgba(113, 113, 122, 0.12);
}

[data-theme="light"] .code-block-header {
    background: #f1f5f9;
}

[data-theme="light"] .chat-model-badge {
    background: rgba(0, 128, 0, 0.06);
    border-color: rgba(0, 128, 0, 0.12);
}

/* =====================================================
   Landing Mode — Gemini-style centered input
   ===================================================== */

/* Transition when switching between landing and chat modes */
.chat-panel {
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Landing mode: transparent, borderless, top-biased optical centering.
   flex-start + vh padding pins the stack near the optical center (~25% title,
   ~50% input) and keeps it stable when banners appear/disappear. */
.chat-panel.landing-mode {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    justify-content: flex-start;
    padding-top: clamp(32px, 10vh, 120px);
    overflow: visible;
}

/* Short viewports: reduce the top bias so the input stays fully visible */
@media (max-height: 560px) {
    .chat-panel.landing-mode {
        padding-top: 16px;
    }
}

/* Hide header in landing mode */
.chat-panel.landing-mode .chat-panel-header {
    opacity: 0;
    max-height: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* On mobile, keep header visible in landing mode for the sidebar toggle */
@media (max-width: 768px) {
    .chat-panel.landing-mode .chat-panel-header {
        opacity: 1;
        max-height: 60px;
        padding: 8px 12px;
        pointer-events: auto;
        overflow: visible;
        background: transparent;
        border-bottom: none;
    }

    /* Hide everything in the header except the sidebar toggle */
    .chat-panel.landing-mode .chat-panel-header .chat-anna-avatar,
    .chat-panel.landing-mode .chat-panel-header .chat-title-text,
    .chat-panel.landing-mode .chat-panel-header .async-agent-usage,
    .chat-panel.landing-mode .chat-panel-header .pending-agent-badge {
        display: none;
    }
}

/* Chat header reveal animation (when exiting landing mode) */
.chat-panel-header {
    transition: opacity 0.4s ease 0.15s, max-height 0.4s ease 0.15s;
}

/* Hide actual chat messages in landing mode so only empty state shows */
.chat-panel.landing-mode .chat-message,
.chat-panel.landing-mode .history-divider {
    display: none;
}

/* Messages area shrinks to content in landing mode */
.chat-panel.landing-mode .chat-messages-area {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0 20px 20px;
    min-height: auto;
}

/* Empty state: large, elegant, Gemini-style greeting */
.chat-panel.landing-mode .chat-empty-state {
    padding: 0;
    gap: 8px;
}

.chat-panel.landing-mode .empty-anna-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
}

.chat-panel.landing-mode .empty-anna-glow {
    inset: -14px;
    background: radial-gradient(circle, rgba(113, 113, 122, 0.12), transparent 70%);
    animation: landingGlow 5s ease-in-out infinite;
}

@keyframes landingGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.12); }
}

.chat-panel.landing-mode .empty-anna-icon .avatar-logo {
    width: 56px;
    height: 56px;
}

.chat-panel.landing-mode .chat-empty-state h3 {
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #e4e4e7 0%, #a1a1aa 50%, #52525b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: landingGradientShift 8s ease-in-out infinite;
    background-size: 200% 200%;
}

@keyframes landingGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.chat-panel.landing-mode .chat-empty-state p {
    font-size: 16px;
    color: var(--text-secondary);
    opacity: 0.8;
    margin: 0;
}

/* Hide suggestion chips inside empty state in landing mode */
.chat-panel.landing-mode .chat-empty-state .chat-suggestions {
    display: none;
}

/* Hide scroll-to-bottom & drop overlay in landing mode */
.chat-panel.landing-mode .chat-scroll-to-bottom,
.chat-panel.landing-mode .chat-drop-overlay {
    display: none;
}

/* Input area: centered, wider, more prominent */
.chat-panel.landing-mode .chat-input-area {
    max-width: 768px;
    width: 100%;
    border-top: none;
    background: transparent;
    padding: 0 20px 12px;
    align-self: center;
    position: relative;
    z-index: 10;
}

/* Hide toolbar in landing mode */
.chat-panel.landing-mode .chat-input-toolbar {
    display: none;
}

/* Chat input area transition (for smooth mode switch) */
.chat-input-area {
    transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
               padding 0.4s ease,
               background 0.4s ease,
               border-color 0.4s ease;
}

/* ===== Landing Mode: Input Box (now same layout as chat mode, kept for landing-specific overrides) ===== */
/* (Base wrapper, textarea, and button styles are now unified — see .chat-input-wrapper above) */

/* In landing mode: hide session indicator but keep agent indicator visible */
.chat-panel.landing-mode .chat-session-indicator {
    display: none;
}

/* ===== Chat Mode Pills (Main Soul / Zen Mode) ===== */
/* Hidden by default (chat mode); shown only in landing mode */
.chat-mode-pills {
    display: none;
    align-items: stretch;
    gap: 8px;
    padding: 4px 4px 0;
    max-width: 768px;
    width: 100%;
    align-self: center;
}

/* In non-landing mode, pills are hidden (session indicator replaces them) */
.chat-mode-pills {
    padding: 6px 0 0;
}

.chat-mode-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    color: var(--text-secondary);
    position: relative;
}

.chat-mode-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.chat-mode-pill.active {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    color: var(--text-color);
}

.chat-mode-pill.active::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.5);
}

.chat-mode-pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.6;
}

.chat-mode-pill.active .chat-mode-pill-icon {
    opacity: 0.9;
}

.chat-mode-pill-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.chat-mode-pill-desc {
    font-size: 10px;
    opacity: 0.6;
    white-space: nowrap;
}

/* Light theme */
[data-theme="light"] .chat-mode-pill {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .chat-mode-pill:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .chat-mode-pill.active {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Landing mode: pills visible and positioned below input area */
.chat-panel.landing-mode .chat-mode-pills {
    display: flex;
    padding: 8px 20px 0;
    animation: landingSuggestionsIn 0.4s ease-out 0.15s both;
}

/* ===== Landing Expand Button ===== */
.landing-expand-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: center;
    margin-top: 20px;
    padding: 10px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: landingExpandBtnIn 0.5s ease-out 0.3s both;
    backdrop-filter: blur(8px);
}

.chat-panel.landing-mode .landing-expand-btn {
    display: flex;
}

@keyframes landingExpandBtnIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.landing-expand-btn svg {
    transition: transform 0.3s ease;
}

.landing-expand-btn:hover {
    background: rgba(113, 113, 122, 0.06);
    border-color: rgba(113, 113, 122, 0.3);
    color: var(--text-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(113, 113, 122, 0.08);
}

.landing-expand-btn:hover svg {
    transform: translateY(-2px);
}

.landing-expand-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

[data-theme="light"] .landing-expand-btn {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .landing-expand-btn:hover {
    background: rgba(113, 113, 122, 0.05);
    border-color: rgba(113, 113, 122, 0.25);
    box-shadow: 0 4px 16px rgba(113, 113, 122, 0.06);
}

/* ===== Back to Landing Button (in chat header) ===== */
.back-to-landing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.back-to-landing-btn svg {
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-landing-btn:hover svg {
    opacity: 1;
    transform: scale(1.1);
}

.back-to-landing-btn:hover {
    background: rgba(113, 113, 122, 0.08);
}

/* Hide back-to-landing button when already in landing mode */
.chat-panel.landing-mode .back-to-landing-btn {
    display: none;
}

/* Landing mode entrance animation */
.chat-panel.landing-mode .chat-empty-state {
    animation: landingGreetingIn 0.5s ease-out;
}

@keyframes landingGreetingIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.chat-panel.landing-mode .chat-input-area {
    animation: landingInputIn 0.5s ease-out 0.08s both;
}

@keyframes landingInputIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Exit landing mode transition */
.chat-panel.landing-exit .chat-empty-state {
    animation: landingGreetingOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes landingGreetingOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-30px) scale(0.96); }
}

@keyframes landingSuggestionsOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}

.chat-panel.landing-exit .landing-expand-btn {
    animation: landingExpandBtnOut 0.2s ease-in forwards;
}

.chat-panel.landing-exit .chat-mode-pills {
    animation: landingSuggestionsOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes landingExpandBtnOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}

/* Chat panel reveal animation (when chat mode activates) */
.chat-panel.chat-reveal {
    animation: chatPanelReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes chatPanelReveal {
    from {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
    to {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }
}

/* Messages area fade-in when chat mode activates */
.chat-panel.chat-reveal .chat-messages-area {
    animation: chatMessagesReveal 0.4s ease-out 0.2s both;
}

@keyframes chatMessagesReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Chat input area transition when entering chat mode */
.chat-panel.chat-reveal .chat-input-area {
    animation: chatInputReveal 0.4s ease-out 0.1s both;
}

@keyframes chatInputReveal {
    from { opacity: 0.6; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Chat-to-Landing Transition ===== */
.chat-panel.chat-to-landing .chat-panel-header {
    animation: chatHeaderFadeOut 0.3s ease-in forwards;
}

.chat-panel.chat-to-landing .chat-messages-area {
    animation: chatMessagesFadeOut 0.25s ease-in forwards;
}

.chat-panel.chat-to-landing .chat-input-area {
    animation: chatInputFadeOut 0.2s ease-in forwards;
}

@keyframes chatHeaderFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

@keyframes chatMessagesFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes chatInputFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}

/* ===== Light Theme: Landing Mode ===== */
[data-theme="light"] .chat-panel.landing-mode .chat-empty-state h3 {
    background: linear-gradient(135deg, #52525b 0%, #27272a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
}

[data-theme="light"] .chat-panel.landing-mode .empty-anna-glow {
    background: radial-gradient(circle, rgba(113, 113, 122, 0.08), transparent 70%);
}

/* ===== Landing Mode: Responsive ===== */
@media (max-width: 768px) {
    /* Mobile keeps the header visible, so use a smaller top bias */
    .chat-panel.landing-mode {
        padding-top: clamp(8px, 4vh, 48px);
    }

    .chat-panel.landing-mode .chat-empty-state h3 {
        font-size: 26px;
    }

    .chat-panel.landing-mode .chat-empty-state p {
        font-size: 14px;
    }

    .chat-panel.landing-mode .chat-input-area {
        padding: 0 12px 8px;
    }

    .chat-panel.landing-mode .chat-messages-area {
        padding: 0 12px 16px;
    }

    .chat-input-wrapper {
        border-radius: 24px;
        padding: 14px 14px 10px;
    }

    /* On mobile, truncate model label in wrapper */
    .chat-input-wrapper .chat-model-selector-label {
        max-width: 100px;
    }

    .chat-input-wrapper .chat-model-selector-arrow {
        display: none;
    }

    /* Hide status indicator labels on mobile, keep dots */
    .chat-status-indicator .indicator-label {
        display: none;
    }

    .chat-mode-pills {
        padding: 6px 12px 0;
    }

    .chat-mode-pill-desc {
        display: none;
    }
}

@media (max-width: 380px) {
    .chat-panel.landing-mode .chat-empty-state h3 {
        font-size: 22px;
    }

    /* On very small screens, hide model label entirely */
    .chat-input-wrapper .chat-model-selector-label {
        display: none;
    }

    /* Hide status indicators on very small screens */
    .chat-status-indicators {
        display: none;
    }
}

/* ===== Responsive ===== */

/* Tablet */
@media (max-width: 1024px) {
    .chat-panel {
        height: calc(100vh - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 12px;
    }

    .chat-messages-area {
        padding: 16px;
    }

    .plan-card {
        margin: -16px -16px 8px -16px;
    }

    .chat-message {
        max-width: 90%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 0 !important;
    }

    .chat-panel {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }

    .chat-panel-header {
        padding: 8px 12px;
        min-height: 48px;
    }

    .chat-title-text h2 {
        font-size: 15px;
    }

    .chat-anna-avatar {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .anna-icon {
        font-size: 16px;
    }

    .agent-selector-label {
        max-width: 80px;
        font-size: 12px;
    }

    .agent-selector-btn {
        padding: 5px 8px;
        gap: 4px;
    }

    .agent-selector-dropdown {
        width: calc(100vw - 24px);
        right: -8px;
    }

    .chat-messages-area {
        padding: 12px;
        gap: 12px;
    }

    .plan-card {
        margin: -12px -12px 8px -12px;
    }

    .plan-card-header {
        padding: 10px 14px 8px;
    }

    .plan-card-steps {
        padding: 4px 14px 10px;
    }

    .chat-message {
        max-width: 92%;
        gap: 8px;
    }

    .msg-avatar {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        font-size: 12px;
    }

    .msg-bubble {
        padding: 8px 12px;
        font-size: var(--chat-font-size, 13px);
        border-radius: 10px;
    }

    /* On mobile, always show copy button (no hover) */
    .msg-copy-btn {
        opacity: 0.6;
        width: 24px;
        height: 24px;
        top: 4px;
        right: 4px;
    }

    .msg-time {
        font-size: 10px;
    }

    .chat-input-area {
        padding: 10px 12px 14px;
    }

    .chat-input-toolbar {
        padding: 0 0 6px;
    }

    .chat-input-toolbar .chat-action-btn {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .chat-input-toolbar .chat-panel-actions {
        gap: 4px;
    }

    .chat-input-wrapper {
        padding: 8px 12px;
        border-radius: 16px;
    }

    .chat-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .chat-empty-state {
        padding: 24px 16px;
    }

    .chat-empty-state h3 {
        font-size: 20px;
    }

    .chat-suggestions {
        flex-direction: column;
        width: 100%;
    }

    .suggestion-chip {
        justify-content: center;
    }

    .chat-input-footer {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 4px;
    }

    .chat-disclaimer {
        font-size: 10px;
    }

    .chat-model-selector-dropdown {
        min-width: 260px;
        max-width: calc(100vw - 40px);
    }

    .msg-attachment-thumb {
        width: 80px;
        height: 80px;
    }

    .attachment-preview-item {
        width: 56px;
        height: 56px;
    }
}

/* Small mobile */
@media (max-width: 380px) {
    .agent-selector-label {
        display: none;
    }

    .chat-panel-title .chat-title-text h2 {
        font-size: 14px;
    }
}

/* hljs theme sync is handled by dashboard-chat.js */

/* ===== History Messages & Divider ===== */

.history-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    margin: 4px 0;
    opacity: 0.45;
}

.history-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-secondary, rgba(255,255,255,0.1)), transparent);
}

.history-divider-label {
    font-size: 10px;
    color: var(--text-tertiary, rgba(255,255,255,0.35));
    white-space: nowrap;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 500;
}

[data-theme="light"] .history-divider-line {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
}

[data-theme="light"] .history-divider-label {
    color: rgba(0,0,0,0.35);
}

.history-message {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.history-message:hover {
    opacity: 1;
}

/* ===== Skeleton Loading State ===== */
.chat-skeleton-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    flex: 1;
}

.skeleton-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: skeletonFadeIn 0.3s ease;
}

.skeleton-message.user {
    flex-direction: row-reverse;
}

.skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--skeleton-bg, rgba(255,255,255,0.06));
    flex-shrink: 0;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-bubble {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 65%;
    min-width: 120px;
}

.skeleton-line {
    height: 14px;
    border-radius: 7px;
    background: var(--skeleton-bg, rgba(255,255,255,0.06));
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.long { width: 95%; }
.skeleton-line.full { width: 100%; }

.skeleton-message:nth-child(2) .skeleton-line { animation-delay: 0.15s; }
.skeleton-message:nth-child(3) .skeleton-line { animation-delay: 0.3s; }
.skeleton-message:nth-child(4) .skeleton-line { animation-delay: 0.45s; }
.skeleton-message:nth-child(5) .skeleton-line { animation-delay: 0.6s; }
.skeleton-message:nth-child(6) .skeleton-line { animation-delay: 0.75s; }

@keyframes skeletonPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes skeletonFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-theme="light"] .skeleton-avatar,
[data-theme="light"] .skeleton-line {
    background: rgba(0,0,0,0.06);
}

/* ===== Correction Applied Block ===== */
.correction-applied-block {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 8px 0;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.correction-icon {
    font-size: 14px;
}

.correction-label {
    font-weight: 500;
    color: #3b82f6;
}

[data-theme="light"] .correction-applied-block {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}

/* ===== Reconnect Banner (network error recovery) ===== */
.reconnect-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 10px 0 4px;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.30);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    animation: reconnectSlideIn 0.25s ease-out;
}

@keyframes reconnectSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reconnect-banner-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.reconnect-banner-text {
    flex: 1;
    line-height: 1.4;
}

.reconnect-banner-btn {
    flex-shrink: 0;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid var(--primary-color, #71717a);
    border-radius: 6px;
    background: var(--primary-color, #71717a);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
}

.reconnect-banner-btn:hover {
    opacity: 0.85;
}

.reconnect-banner-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-theme="light"] .reconnect-banner {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
}

/* ===== Stream-End Pill =====
 * Inline status indicator rendered after an assistant message when the
 * SSE stream terminates for any non-success reason (cancelled / timed
 * out / failed / connection lost). Designed to feel like a system tag,
 * not a notification — quiet, premium, never blocking the message body.
 *
 * Three tonal variants share the same shape; only the accent color and
 * subtle backdrop tint differ. Glass surface adapts to light/dark theme.
 */
.stream-end-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 2px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    animation: streamEndFadeIn 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
    max-width: 100%;
}

@keyframes streamEndFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stream-end-pill__icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
}

.stream-end-pill__body {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.stream-end-pill__label {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.stream-end-pill__detail {
    color: var(--text-secondary);
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}

.stream-end-pill__action {
    margin-left: 4px;
    padding: 3px 12px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    flex-shrink: 0;
}

.stream-end-pill__action:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}

.stream-end-pill__action:active {
    transform: translateY(0.5px);
}

.stream-end-pill__action:disabled,
.stream-end-pill__action.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
}

/* — Variant: neutral (cancelled) — */
.stream-end-pill--neutral .stream-end-pill__icon {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

/* — Variant: warn (timeout / connection lost) — */
.stream-end-pill--warn {
    background: rgba(251, 191, 36, 0.07);
    border-color: rgba(251, 191, 36, 0.22);
}
.stream-end-pill--warn .stream-end-pill__icon {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
}
.stream-end-pill--warn .stream-end-pill__action {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.30);
    color: #fde68a;
}
.stream-end-pill--warn .stream-end-pill__action:hover {
    background: rgba(251, 191, 36, 0.16);
    border-color: rgba(251, 191, 36, 0.40);
}

/* — Variant: error (task failed) — */
.stream-end-pill--error {
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(239, 68, 68, 0.24);
}
.stream-end-pill--error .stream-end-pill__icon {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}
.stream-end-pill--error .stream-end-pill__label {
    color: #fecaca;
}
.stream-end-pill--error .stream-end-pill__action {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.30);
    color: #fecaca;
}
.stream-end-pill--error .stream-end-pill__action:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.42);
}

/* — Light theme adjustments — */
[data-theme="light"] .stream-end-pill {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
[data-theme="light"] .stream-end-pill__icon {
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
}
[data-theme="light"] .stream-end-pill__action {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}
[data-theme="light"] .stream-end-pill__action:hover {
    background: rgba(15, 23, 42, 0.10);
    border-color: rgba(15, 23, 42, 0.20);
}
[data-theme="light"] .stream-end-pill--warn {
    background: rgba(217, 119, 6, 0.06);
    border-color: rgba(217, 119, 6, 0.22);
}
[data-theme="light"] .stream-end-pill--warn .stream-end-pill__icon {
    background: rgba(217, 119, 6, 0.14);
    color: #b45309;
}
[data-theme="light"] .stream-end-pill--warn .stream-end-pill__action {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.25);
    color: #92400e;
}
[data-theme="light"] .stream-end-pill--error {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.20);
}
[data-theme="light"] .stream-end-pill--error .stream-end-pill__icon {
    background: rgba(220, 38, 38, 0.14);
    color: #b91c1c;
}
[data-theme="light"] .stream-end-pill--error .stream-end-pill__label {
    color: #991b1b;
}
[data-theme="light"] .stream-end-pill--error .stream-end-pill__action {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.25);
    color: #991b1b;
}

/* On narrow screens, allow detail to wrap instead of being clipped. */
@media (max-width: 540px) {
    .stream-end-pill {
        flex-wrap: wrap;
        border-radius: 14px;
    }
    .stream-end-pill__detail {
        white-space: normal;
        max-width: none;
    }
}

/* Reconnect notice (inline, used during auto-reconnect) */
.reconnect-notice {
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* ===== Chat Input — streaming state hint ===== */
.chat-input-wrapper {
    position: relative;
}

.chat-input::placeholder {
    transition: color 0.2s ease;
}

/* ===== Generated Image Block ===== */
.generated-image-block {
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    transition: box-shadow 0.2s ease;
}

.generated-image-block:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.generated-image-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e0e0e0);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.generated-image-icon {
    font-size: 16px;
}

.generated-image-model {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary, #888);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 4px;
}

.generated-image-wrapper {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
}

.generated-image {
    max-width: 100%;
    max-height: 512px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    object-fit: contain;
}

.generated-image:hover {
    transform: scale(1.02);
    opacity: 0.95;
}

.generated-image-prompt {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    font-style: italic;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.generated-image-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.generated-image-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.generated-image-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary, #e0e0e0);
}

/* Inline generated images (rendered inside markdown text) */
/* Constrain markdown-rendered images inside message text */
.msg-text img {
    max-width: 100%;
    max-height: 512px;
    border-radius: 8px;
    object-fit: contain;
    cursor: pointer;
}

.generated-image-inline {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}

.generated-image-inline .generated-image {
    max-width: 100%;
    max-height: 480px;
    border-radius: 8px;
    cursor: pointer;
}

/* Light theme overrides */
[data-theme="light"] .generated-image-block {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .generated-image-block:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .generated-image-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .generated-image-model {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

[data-theme="light"] .generated-image-wrapper {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .generated-image-prompt {
    border-top-color: rgba(0, 0, 0, 0.06);
    color: #666;
}

[data-theme="light"] .generated-image-actions {
    border-top-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .generated-image-action-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #666;
}

[data-theme="light"] .generated-image-action-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
}

/* ===== Message Copy Button ===== */
.msg-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    z-index: 5;
    backdrop-filter: blur(8px);
}

.msg-bubble:hover .msg-copy-btn {
    opacity: 1;
}

.msg-copy-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    transform: scale(1.08);
}

.msg-copy-btn.copied {
    background: rgba(34, 197, 94, 0.6);
    color: #fff;
}

.chat-message.user .msg-copy-btn {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.chat-message.user .msg-copy-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.chat-message.user .msg-copy-btn.copied {
    background: rgba(34, 197, 94, 0.7);
}

[data-theme="light"] .msg-copy-btn {
    background: rgba(255, 255, 255, 0.7);
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .msg-copy-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .msg-copy-btn.copied {
    background: rgba(34, 197, 94, 0.5);
    color: #fff;
    border-color: transparent;
}

/* ===== Font Size Control ===== */
.font-size-control {
    position: relative;
}

.font-size-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    padding: 0 8px;
    min-width: 42px;
    justify-content: center;
}

.font-size-icon {
    font-size: 15px;
    font-weight: 700;
    font-family: Georgia, 'Times New Roman', serif;
}

.font-size-value {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.65;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.font-size-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 100;
    white-space: nowrap;
}

.font-size-dropdown.open {
    display: flex;
}

.font-size-action {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.font-size-action:hover {
    background: var(--hover-bg);
    color: var(--primary-color);
}

[data-theme="light"] .font-size-dropdown {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ===== Voice Waveform Canvas ===== */
.voice-waveform-canvas {
    flex: 1;
    height: 34px;
    min-width: 0;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    animation: waveformFadeIn 0.3s ease-out;
}

.voice-waveform-canvas.hidden {
    display: none;
}

@keyframes waveformFadeIn {
    from { opacity: 0; transform: scaleY(0.5); }
    to { opacity: 1; transform: scaleY(1); }
}

/* Recording state: hide the textarea, show the canvas */
.chat-input-wrapper:has(.voice-waveform-canvas:not(.hidden)) .chat-input {
    display: none;
}

/* Recording state: hide the attach button while recording */
.chat-input-wrapper:has(.voice-waveform-canvas:not(.hidden)) .chat-attach-btn {
    display: none;
}

[data-theme="light"] .voice-waveform-canvas {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.12);
}

/* =====================================================
   Proactive Settings Modal
   ===================================================== */
#proactiveModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#proactiveModal.active {
    display: flex;
}

#proactiveModal > .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: block !important;
    opacity: 1 !important;
}

#proactiveModal > .modal-content {
    position: relative;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    animation: proactiveModalSlideIn 0.3s ease;
}

.proactive-modal {
    max-width: 560px;
    width: 90%;
}

@keyframes proactiveModalSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

#proactiveModal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

#proactiveModal .modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

#proactiveModal .modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    transition: var(--transition);
    line-height: 1;
}

#proactiveModal .modal-close:hover {
    color: var(--text-color);
}

#proactiveModal .modal-body {
    padding: 20px 24px;
}

/* --- Setting groups --- */
.proactive-setting-group {
    margin-bottom: 20px;
}

.proactive-setting-group:last-child {
    margin-bottom: 0;
}

.proactive-group-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0 0 10px 0;
}

.proactive-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}

.proactive-main-toggle {
    padding: 14px 16px;
    background: var(--hover-bg);
    border-radius: 10px;
    margin-bottom: 8px;
}

.proactive-setting-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.proactive-setting-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.proactive-setting-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* --- Toggle switch --- */
.proactive-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.proactive-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.proactive-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border-color);
    border-radius: 24px;
    transition: 0.3s;
}

.proactive-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.proactive-toggle input:checked + .proactive-toggle-slider {
    background: var(--primary-color, #71717a);
}

.proactive-toggle input:checked + .proactive-toggle-slider::before {
    transform: translateX(20px);
}

/* --- Autonomy cards --- */
.proactive-autonomy-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.proactive-autonomy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.proactive-autonomy-card:hover {
    border-color: var(--primary-color, #71717a);
    background: var(--hover-bg);
}

.proactive-autonomy-card.active {
    border-color: var(--primary-color, #71717a);
    background: rgba(113, 113, 122, 0.08);
}

.proactive-autonomy-icon {
    font-size: 20px;
}

.proactive-autonomy-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.proactive-autonomy-desc {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* --- Number input --- */
.proactive-number-input {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.proactive-num-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    border: none;
    color: var(--text-color);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.proactive-num-btn:hover {
    background: var(--border-color);
}

.proactive-number-input input[type="number"] {
    width: 48px;
    height: 32px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: 500;
    -moz-appearance: textfield;
}

.proactive-number-input input[type="number"]::-webkit-outer-spin-button,
.proactive-number-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Quiet hours --- */
.proactive-quiet-hours {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.proactive-quiet-separator {
    font-size: 12px;
    color: var(--text-secondary);
}

.proactive-quiet-hours select,
.proactive-select {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 80px;
}

.proactive-quiet-hours select:focus,
.proactive-select:focus {
    outline: none;
    border-color: var(--primary-color, #71717a);
}

/* --- Save actions --- */
.proactive-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.proactive-save-btn {
    padding: 8px 24px;
    background: var(--primary-color, #71717a);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.proactive-save-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.proactive-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.proactive-save-status {
    font-size: 13px;
    color: var(--text-secondary);
    transition: opacity 0.3s;
}

.proactive-save-status.success {
    color: #22c55e;
}

.proactive-save-status.error {
    color: #ef4444;
}

/* --- Settings body collapse --- */
.proactive-settings-body {
    transition: opacity 0.3s, max-height 0.3s;
}

.proactive-settings-body.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* --- Proactive btn active state --- */
/* =====================================================
   Proactive Button – Premium Animated Style
   ===================================================== */
.proactive-settings-btn {
    position: relative;
    overflow: visible !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.proactive-btn-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.proactive-btn-svg {
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease, filter 0.3s ease;
}

/* Glow layer (hidden by default) */
.proactive-btn-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(113, 113, 122, 0.35) 0%, transparent 70%);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Ripple ring (hidden by default) */
.proactive-btn-ripple {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid rgba(113, 113, 122, 0);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

/* Hover state (gentle) */
.proactive-settings-btn:hover {
    border-color: rgba(113, 113, 122, 0.5) !important;
    background: rgba(113, 113, 122, 0.06) !important;
    transform: scale(1.05);
}

.proactive-settings-btn:hover .proactive-btn-svg {
    stroke: #71717a;
    transform: rotate(30deg);
    filter: drop-shadow(0 0 3px rgba(113, 113, 122, 0.4));
}

.proactive-settings-btn:hover .proactive-btn-glow {
    opacity: 0.5;
}

/* Active press */
.proactive-settings-btn:active {
    transform: scale(0.95);
}

/* ===== Proactive ON state ===== */
.proactive-settings-btn.proactive-on {
    background: linear-gradient(135deg, rgba(113, 113, 122, 0.12), rgba(113, 113, 122, 0.12)) !important;
    border-color: rgba(113, 113, 122, 0.45) !important;
    box-shadow:
        0 0 10px rgba(113, 113, 122, 0.15),
        0 0 20px rgba(113, 113, 122, 0.06);
}

.proactive-settings-btn.proactive-on .proactive-btn-svg {
    stroke: #71717a;
    animation: proactiveSpin 8s linear infinite, proactivePulseStroke 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(113, 113, 122, 0.5));
}

.proactive-settings-btn.proactive-on .proactive-btn-glow {
    opacity: 1;
    animation: proactiveGlowPulse 3s ease-in-out infinite;
}

.proactive-settings-btn.proactive-on .proactive-btn-ripple {
    opacity: 1;
    animation: proactiveRipple 3s ease-out infinite;
}

/* Hover when ON */
.proactive-settings-btn.proactive-on:hover {
    box-shadow:
        0 0 14px rgba(113, 113, 122, 0.25),
        0 0 28px rgba(113, 113, 122, 0.1);
    background: linear-gradient(135deg, rgba(113, 113, 122, 0.18), rgba(113, 113, 122, 0.18)) !important;
}

.proactive-settings-btn.proactive-on:hover .proactive-btn-svg {
    filter: drop-shadow(0 0 6px rgba(113, 113, 122, 0.6));
}

/* ===== Keyframe Animations ===== */

/* Slow sun-like spin */
@keyframes proactiveSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Gentle stroke brightness pulse */
@keyframes proactivePulseStroke {
    0%, 100% { stroke: #71717a; }
    50% { stroke: #a1a1aa; }
}

/* Glow breathing */
@keyframes proactiveGlowPulse {
    0%, 100% {
        opacity: 0.5;
        background: radial-gradient(circle, rgba(113, 113, 122, 0.25) 0%, transparent 70%);
    }
    50% {
        opacity: 1;
        background: radial-gradient(circle, rgba(113, 113, 122, 0.4) 0%, transparent 70%);
    }
}

/* Expanding ring ripple */
@keyframes proactiveRipple {
    0% {
        transform: scale(1);
        border-color: rgba(113, 113, 122, 0.5);
        opacity: 1;
    }
    70% {
        transform: scale(1.8);
        border-color: rgba(113, 113, 122, 0.08);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        border-color: rgba(113, 113, 122, 0);
        opacity: 0;
    }
}

/* Light theme adjustments */
[data-theme="light"] .proactive-settings-btn:hover {
    background: rgba(113, 113, 122, 0.08) !important;
    border-color: rgba(113, 113, 122, 0.5) !important;
}

[data-theme="light"] .proactive-settings-btn:hover .proactive-btn-svg {
    stroke: #52525b;
}

[data-theme="light"] .proactive-settings-btn.proactive-on {
    background: linear-gradient(135deg, rgba(113, 113, 122, 0.1), rgba(82, 82, 91, 0.1)) !important;
    border-color: rgba(113, 113, 122, 0.4) !important;
    box-shadow:
        0 0 10px rgba(113, 113, 122, 0.12),
        0 0 20px rgba(113, 113, 122, 0.05);
}

[data-theme="light"] .proactive-settings-btn.proactive-on .proactive-btn-svg {
    stroke: #52525b;
    filter: drop-shadow(0 0 3px rgba(113, 113, 122, 0.4));
}

[data-theme="light"] .proactive-settings-btn.proactive-on:hover {
    box-shadow:
        0 0 14px rgba(113, 113, 122, 0.2),
        0 0 28px rgba(113, 113, 122, 0.08);
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .proactive-modal {
        width: 95%;
        max-width: none;
    }

    .proactive-autonomy-cards {
        grid-template-columns: 1fr;
    }

    .proactive-setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .proactive-quiet-hours,
    .proactive-number-input,
    .proactive-select {
        width: 100%;
    }
}

/* =====================================================
   Proactive Real-time Notification
   ===================================================== */

.proactive-notification {
    animation: proactiveNotifSlideIn 0.4s ease;
}

@keyframes proactiveNotifSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.proactive-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #71717a, #71717a);
    color: #fff;
    letter-spacing: 0.04em;
}

[data-theme="light"] .proactive-badge {
    background: linear-gradient(135deg, #52525b, #52525b);
}

.sub-agent-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    letter-spacing: 0.04em;
}

[data-theme="light"] .sub-agent-badge {
    background: linear-gradient(135deg, #d97706, #dc2626);
}

.sub-agent-task {
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.85em;
}

.sub-agent-summary {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--border-color, #3f3f46);
    border-radius: 0 6px 6px 0;
    background: var(--bg-secondary, rgba(255,255,255,0.03));
    font-size: 0.9em;
}

/* =====================================================
   Proactive OFF — Enticing glow effect
   ===================================================== */
.proactive-settings-btn:not(.proactive-on) .proactive-btn-glow {
    opacity: 1;
    animation: proactiveEnticeGlow 3s ease-in-out infinite;
}

.proactive-settings-btn:not(.proactive-on) .proactive-btn-ripple {
    opacity: 1;
    animation: proactiveEnticeRipple 4s ease-out infinite;
}

.proactive-settings-btn:not(.proactive-on) .proactive-btn-svg {
    animation: proactiveEnticePulse 3s ease-in-out infinite;
}

@keyframes proactiveEnticeGlow {
    0%, 100% {
        opacity: 0;
        background: radial-gradient(circle, rgba(113, 113, 122, 0.08) 0%, transparent 70%);
    }
    50% {
        opacity: 0.7;
        background: radial-gradient(circle, rgba(113, 113, 122, 0.22) 0%, transparent 70%);
    }
}

@keyframes proactiveEnticeRipple {
    0% {
        transform: scale(1);
        border-color: rgba(113, 113, 122, 0);
        opacity: 0;
    }
    15% {
        border-color: rgba(113, 113, 122, 0.25);
        opacity: 0.6;
    }
    60% {
        transform: scale(1.6);
        border-color: rgba(113, 113, 122, 0.06);
        opacity: 0.2;
    }
    100% {
        transform: scale(1.9);
        border-color: rgba(113, 113, 122, 0);
        opacity: 0;
    }
}

@keyframes proactiveEnticePulse {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(113, 113, 122, 0));
        stroke: currentColor;
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(113, 113, 122, 0.35));
        stroke: #a1a1aa;
    }
}

/* Light theme entice */
[data-theme="light"] .proactive-settings-btn:not(.proactive-on) .proactive-btn-svg {
    animation: proactiveEnticePulseLight 3s ease-in-out infinite;
}

@keyframes proactiveEnticePulseLight {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(113, 113, 122, 0));
        stroke: currentColor;
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(113, 113, 122, 0.3));
        stroke: #71717a;
    }
}

/* =====================================================
   Proactive Upgrade Modal (Free user)
   ===================================================== */
#proactiveUpgradeModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2100;
    align-items: center;
    justify-content: center;
}

#proactiveUpgradeModal.active {
    display: flex;
}

#proactiveUpgradeModal > .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
}

.proactive-upgrade-modal {
    position: relative;
    max-width: 440px;
    width: 90%;
    background: var(--surface-color);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(168, 85, 247, 0.08);
    animation: proUpgradeSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes proUpgradeSlideIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.proactive-upgrade-modal .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.proactive-upgrade-modal .modal-close:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.proactive-upgrade-body {
    position: relative;
    padding: 40px 32px 32px;
    text-align: center;
}

/* Decorative glow orb */
.proactive-upgrade-glow-orb {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(99, 102, 241, 0.08) 40%, transparent 70%);
    pointer-events: none;
    animation: proUpgradeOrbPulse 4s ease-in-out infinite;
}

@keyframes proUpgradeOrbPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.proactive-upgrade-icon {
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.15);
    animation: proUpgradeIconFloat 3s ease-in-out infinite;
    position: relative;
}

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

.proactive-upgrade-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 6px 0;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.proactive-upgrade-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
}

/* Feature list */
.proactive-upgrade-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
    text-align: left;
}

.proactive-upgrade-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--hover-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s, background 0.2s;
}

.proactive-upgrade-feature:hover {
    border-color: rgba(168, 85, 247, 0.25);
    background: rgba(168, 85, 247, 0.04);
}

.proactive-upgrade-feature-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.proactive-upgrade-feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.proactive-upgrade-feature-text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
}

.proactive-upgrade-feature-text span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* CTA button */
.proactive-upgrade-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 14px rgba(168, 85, 247, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.1);
}

.proactive-upgrade-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(168, 85, 247, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.12);
}

.proactive-upgrade-cta:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(168, 85, 247, 0.2);
}

.proactive-upgrade-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 10px 0 0 0;
    opacity: 0.7;
}

/* Light theme */
[data-theme="light"] .proactive-upgrade-modal {
    border-color: rgba(139, 92, 246, 0.15);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.15),
        0 0 40px rgba(139, 92, 246, 0.06);
}

[data-theme="light"] .proactive-upgrade-glow-orb {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.12) 0%, rgba(79, 70, 229, 0.06) 40%, transparent 70%);
}

[data-theme="light"] .proactive-upgrade-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(79, 70, 229, 0.08));
    border-color: rgba(139, 92, 246, 0.12);
}

[data-theme="light"] .proactive-upgrade-cta {
    background: linear-gradient(135deg, #9333ea, #4f46e5);
}

/* Responsive */
@media (max-width: 480px) {
    .proactive-upgrade-modal {
        width: 95%;
        max-width: none;
        border-radius: 16px;
    }

    .proactive-upgrade-body {
        padding: 32px 20px 24px;
    }
}

/* ===== Zen Mode ===== */

/* Zen 模式保留原版 Anna logo（品牌优先），仅通过靶紫色呼吸光晕
   + 副标题文案切换（JS）传达模式变化 — 克制、安静、不加装饰 */

/* 旧的 zen 换装 logo 已弃用，始终隐藏 */
.avatar-logo-zen-dark,
.avatar-logo-zen-light {
    display: none !important;
}

/* Zen glow — 绿色光晕转为靶紫色，节奏更缓慢 */
.empty-anna-logo.zen-costume .empty-anna-glow {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.1), transparent 70%);
    animation: zenGlow 6s ease-in-out infinite;
}

@keyframes zenGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.18); }
}

/* Zen 下环绕粒子也改为紫色系，保持色调统一 */
.empty-anna-logo.zen-costume::before {
    background: rgba(139, 92, 246, 0.6);
}

.empty-anna-logo.zen-costume::after {
    background: rgba(99, 102, 241, 0.5);
}

/* Zen 副标题：柔和紫色，与光晕呼应 */
.chat-empty-state p.zen-hint {
    color: #a78bfa;
}

[data-theme="light"] .chat-empty-state p.zen-hint {
    color: #7c3aed;
}

/* Old zen landing toggle styles removed — now using .chat-mode-selector in footer */

/* Old zen mode btn styles (kept for backwards compat with zen badge) */
.zen-mode-btn {
    position: relative;
}

.zen-mode-btn.zen-active {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.08);
    opacity: 1;
}

.zen-mode-btn.zen-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
}

/* Zen badge in header */
.zen-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
}

.zen-badge:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* Zen mode chat panel visual changes — borderless design, no borders to tint */

/* ===== Sandbox Mode ===== */

.sandbox-control {
    position: relative;
    display: inline-block;
}

.sandbox-mode-btn {
    position: relative;
}

.sandbox-mode-btn.sandbox-active {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    opacity: 1;
}

.sandbox-mode-btn.sandbox-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
}

.sandbox-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 1000;
    min-width: 260px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0;
    margin-bottom: 6px;
}

.sandbox-dropdown.show {
    display: block;
}

.sandbox-dropdown-header {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sandbox-dropdown-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sandbox-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary, #1f2937);
    cursor: pointer;
}

.sandbox-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #f59e0b;
    cursor: pointer;
}

.sandbox-path-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sandbox-path-input-wrap label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
}

.sandbox-path-input-wrap input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--input-bg, #f9fafb);
    color: var(--text-primary, #1f2937);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.sandbox-path-input-wrap input[type="text"]:focus {
    border-color: #f59e0b;
}

.sandbox-save-btn {
    align-self: flex-end;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #f59e0b;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.sandbox-save-btn:hover {
    background: #d97706;
}

/* ===== @ Mention Dropdown ===== */

.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 12px;
    right: 12px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-secondary, #1e1e2e);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
    z-index: 100;
    margin-bottom: 8px;
    padding: 4px;
    backdrop-filter: blur(12px);
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.mention-item:hover {
    background: rgba(255, 255, 255, 0.10);
}

.mention-item.selected {
    background: rgba(113, 113, 122, 0.18);
    border-left: 3px solid #71717a;
    padding-left: 9px;
}

.mention-item-icon {
    font-size: 18px;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(113, 113, 122, 0.1);
    border-radius: 6px;
}

.mention-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mention-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e4e4e7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-item-desc {
    font-size: 11px;
    color: var(--text-tertiary, #71717a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-item-check {
    font-size: 14px;
    color: #71717a;
    flex-shrink: 0;
}

/* ===== Mention Tags (above input) ===== */

.mention-tags-container {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}

.mention-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 6px;
    background: rgba(113, 113, 122, 0.12);
    border: 1px solid rgba(113, 113, 122, 0.25);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary, #a1a1aa);
    transition: background 0.15s, border-color 0.15s;
}

.mention-tag:hover {
    background: rgba(113, 113, 122, 0.18);
    border-color: rgba(113, 113, 122, 0.4);
}

.mention-tag-icon {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.mention-tag-icon img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}

.mention-tag-name {
    font-weight: 500;
    color: var(--text-primary, #d4d4d8);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-tag-remove {
    background: none;
    border: none;
    color: var(--text-tertiary, #71717a);
    font-size: 14px;
    cursor: pointer;
    padding: 0 0 0 2px;
    line-height: 1;
    transition: color 0.15s;
}

.mention-tag-remove:hover {
    color: #ef4444;
}

/* ===== Light theme overrides ===== */

[data-theme="light"] .mention-dropdown {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mention-item:hover {
    background: rgba(113, 113, 122, 0.10);
}

[data-theme="light"] .mention-item.selected {
    background: rgba(113, 113, 122, 0.15);
    border-left: 3px solid #71717a;
    padding-left: 9px;
}

[data-theme="light"] .mention-item-name {
    color: #18181b;
}

[data-theme="light"] .mention-item-desc {
    color: #71717a;
}

[data-theme="light"] .mention-tag {
    background: rgba(113, 113, 122, 0.08);
    border-color: rgba(113, 113, 122, 0.2);
}

[data-theme="light"] .mention-tag-name {
    color: #71717a;
}

[data-theme="light"] .mention-tags-container {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ===== Mention tags in user messages ===== */

.msg-mentions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.msg-mention-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 11px;
}

.msg-mention-icon {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.msg-mention-icon img {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
}

.msg-mention-name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* # app mentions in user/assistant bubbles — neutral accent matches input chip */
.msg-mention-tag.app {
    background: rgba(113, 113, 122, 0.18);
}
.chat-message.user .msg-mention-tag.app {
    background: rgba(255, 255, 255, 0.22);
}
[data-theme="light"] .chat-message.assistant .msg-mention-tag.app {
    background: rgba(113, 113, 122, 0.12);
}
[data-theme="light"] .chat-message.assistant .msg-mention-tag.app .msg-mention-name {
    color: #71717a;
}

[data-theme="light"] .chat-message.assistant .msg-mention-tag {
    background: rgba(113, 113, 122, 0.08);
}

[data-theme="light"] .chat-message.assistant .msg-mention-name {
    color: #71717a;
}

/* User bubble mentions must stay high-contrast on the blue gradient */
.chat-message.user .msg-mention-tag {
    background: rgba(255, 255, 255, 0.18);
}

.chat-message.user .msg-mention-name {
    color: #fff;
}

/* ===========================================================================
   # App mention overrides (neutral accent to differentiate from @ executa)
   =========================================================================== */
.mention-tag.app-tag {
    background: rgba(113, 113, 122, 0.18);
    border-color: rgba(113, 113, 122, 0.45);
}
.mention-tag.app-tag .mention-tag-name {
    color: #a1a1aa;
}
[data-theme="light"] .mention-tag.app-tag {
    background: rgba(113, 113, 122, 0.12);
    border-color: rgba(113, 113, 122, 0.35);
}
[data-theme="light"] .mention-tag.app-tag .mention-tag-name {
    color: #52525b;
}
.mention-dropdown.app-mention-dropdown {
    border-color: rgba(113, 113, 122, 0.4);
}

/* ===========================================================================
   Sticky pinned mentions (@ / #) — visually distinct chip + clear-all button.
   See docs/design/sticky-mentions-and-apps.md.
   =========================================================================== */
.mention-tag.sticky {
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.55);
}
.mention-tag-pin {
    font-size: 11px;
    line-height: 1;
    margin-right: 2px;
    opacity: 0.85;
}
.mention-tag-clear-all {
    appearance: none;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    background: transparent;
    color: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.mention-tag-clear-all:hover {
    opacity: 1;
    border-color: rgba(248, 113, 113, 0.7);
    color: #fca5a5;
}
[data-theme="light"] .mention-tag-clear-all {
    border-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .mention-tag-clear-all:hover {
    border-color: rgba(220, 38, 38, 0.6);
    color: #dc2626;
}

/* ================================================================== */
/* Apple-style App Deck (persistent dock)                              */
/* Anchored to the bottom of .main-content (authed dashboard, deck is  */
/* a direct child of <main>) or .chat-panel (guest shell).             */
/* Visible on LANDING and in APPS VIEW. Hidden in chat mode — it       */
/* overlapped the pinned input — EXCEPT when the WM has minimized      */
/* windows shelved in it (they must stay reachable).                   */
/* ================================================================== */

.anna-app-deck {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    padding: 80px 16px 0; /* top room for hover lift + tooltip — must NOT clip */
    pointer-events: none; /* container is transparent; only inner is interactive */
    z-index: 950; /* above the app window layer (900) — macOS dock semantics */
    overflow: visible;
    animation: annaDeckFadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
}

.chat-panel {
    position: relative; /* anchor for absolute deck (guest shell) */
}

/* Chat mode (authed): hide the dock unless it shelves minimized windows */
body:not(.dashboard--apps-view)
    .main-content:has(.chat-panel:not(.landing-mode))
    > .anna-app-deck:not(:has(.anna-app-deck-min-item)) {
    display: none;
}

/* Guest shell: deck lives INSIDE .chat-panel (no WM / no minimized shelf) */
body.guest-shell .chat-panel:not(.landing-mode) .anna-app-deck {
    display: none;
}

/* Chat mode: the dock exists solely to keep minimized windows reachable —
   collapse the launcher track (and the shelf's divider against it) so only
   the minimized shelf remains in the pill. */
body:not(.dashboard--apps-view)
    .main-content:has(.chat-panel:not(.landing-mode))
    > .anna-app-deck .anna-app-deck-track {
    display: none;
}
body:not(.dashboard--apps-view)
    .main-content:has(.chat-panel:not(.landing-mode))
    > .anna-app-deck .anna-app-deck-minimized {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* Chat mode with a visible dock (minimized windows shelved): lift the pinned
   input above the dock via panel padding. Do NOT shrink the panel height —
   the deck is bottom-anchored to .main-content, whose height follows the
   panel, so shrinking moves the anchor (and the dock) up by the same amount
   and the overlap never clears. Padding keeps the anchor at the viewport
   bottom and raises only the panel's inner content. */
.main-content:has(> .anna-app-deck .anna-app-deck-min-item)
    .chat-panel:not(.landing-mode) {
    padding-bottom: 108px; /* deck: 16px bottom offset + ~78px pill + gap */
}
@media (max-width: 768px) {
    .main-content:has(> .anna-app-deck .anna-app-deck-min-item)
        .chat-panel:not(.landing-mode) {
        padding-bottom: 96px; /* smaller deck icons on narrow viewports */
    }
}

/* Apps view: reserve room so the last grid row scrolls clear of the dock */
body.dashboard--apps-view .apps-view-grid {
    padding-bottom: 132px;
}

@keyframes annaDeckFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.anna-app-deck-inner {
    pointer-events: auto;
    display: flex;
    align-items: flex-end;
    padding: 10px 14px;
    max-width: min(820px, calc(100vw - 32px));
    /* MUST stay visible — any non-visible overflow on EITHER axis (incl. auto)
       silently clips the hover lift on the other axis (per CSS spec). The deck
       caps visible app count at the JS layer, so horizontal scroll isn't
       needed; surplus apps live behind the "Browse App Store" chip. */
    overflow: visible;

    background: rgba(28, 28, 30, 0.55);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 18px 50px rgba(0, 0, 0, 0.40),
        0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Inner track — pure flex row, no overflow constraint, lets icons lift freely. */
.anna-app-deck-track {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    overflow: visible;
}

[data-theme="light"] .anna-app-deck-inner {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04),
        0 16px 40px rgba(0, 0, 0, 0.10),
        0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ----- Deck item (app icon button) ----- */
.anna-app-deck-item {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;          /* squircle-like */
    background: rgba(255, 255, 255, 0.04);
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: visible;            /* allow tooltip to escape */
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        opacity    150ms ease,
        filter     200ms ease;
    transform-origin: bottom center;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}

.anna-app-deck-item .deck-icon-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.18);
}

.anna-app-deck-item img,
.anna-app-deck-item .deck-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.anna-app-deck-item .deck-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, #71717a, #71717a);
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

/* Disabled (not enabled) — desaturate */
.anna-app-deck-item.is-disabled {
    filter: grayscale(0.6) opacity(0.55);
}
.anna-app-deck-item.is-disabled:hover {
    filter: grayscale(0.2) opacity(0.85);
}

/* Admin-pinned (locked) — small lock badge in the lower-right of the icon.
   The item is force-shown and cannot be dragged or removed; cursor stays the
   default launcher cursor (no grab affordance). */
.anna-app-deck-item.is-locked .deck-icon-wrap {
    cursor: pointer;
}
.anna-app-deck-item .deck-lock-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(20, 20, 24, 0.82);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 4;
}
[data-theme="light"] .anna-app-deck-item .deck-lock-badge {
    background: rgba(60, 60, 67, 0.92);
    border-color: rgba(255, 255, 255, 0.95);
}

/* Hover: gentle lift on the hovered icon ONLY.
   Note: macOS Dock magnifies neighbours too, but in a 56px row that
   feels jittery — neighbours visibly jump on micro mouse moves.
   Per user feedback, isolate the hover so only the targeted icon
   reacts. Keep the lift moderate so the dock baseline doesn't bounce. */
.anna-app-deck-item:hover {
    transform: translateY(-8px) scale(1.12);
    z-index: 3;
}
.anna-app-deck-item:hover .deck-icon-wrap {
    box-shadow:
        0 18px 28px rgba(0, 0, 0, 0.40),
        0 4px 10px rgba(0, 0, 0, 0.22);
}

.anna-app-deck-item:active {
    transform: translateY(-3px) scale(1.04);
    transition-duration: 120ms;
}

/* Running indicator — Apple-dock style dot under apps with an open window.
   The deck now doubles as the dock (the standalone bottom bar was removed),
   so a launched app shows a small glowing pip beneath its icon. */
.anna-app-deck-item.is-running::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
    transition: opacity 200ms ease;
}
[data-theme="light"] .anna-app-deck-item.is-running::after {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: none;
}

/* Drag-and-drop reorder (macOS-style) */
.anna-app-deck-item.is-dragging {
    opacity: 0.35;
    transform: scale(0.95);
    cursor: grabbing;
}
.anna-app-deck-item.drop-before {
    box-shadow: -3px 0 0 0 #71717a;
}
.anna-app-deck-item.drop-after {
    box-shadow: 3px 0 0 0 #71717a;
}
/* While a drag is in progress, suppress hover magnify so the row stays
   stable and the drop-indicator reads cleanly. */
.anna-app-deck.is-reordering .anna-app-deck-item:hover {
    transform: none;
}

.anna-app-deck-item:focus-visible {
    outline: none;
}
.anna-app-deck-item:focus-visible .deck-icon-wrap {
    box-shadow:
        0 0 0 2px var(--bg-color, #0c0c10),
        0 0 0 4px rgba(113, 113, 122, 0.7),
        0 6px 12px rgba(0, 0, 0, 0.25);
}

/* ----- Tooltip (app name) ----- */
.anna-app-deck-item .deck-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px) scale(0.92);
    background: rgba(28, 28, 30, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1.4, 0.5, 1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .anna-app-deck-item .deck-tooltip {
    background: rgba(255, 255, 255, 0.96);
    color: #1c1c1e;
    border-color: rgba(0, 0, 0, 0.06);
}
.anna-app-deck-item .deck-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(28, 28, 30, 0.92);
}
[data-theme="light"] .anna-app-deck-item .deck-tooltip::after {
    border-top-color: rgba(255, 255, 255, 0.96);
}
.anna-app-deck-item:hover .deck-tooltip,
.anna-app-deck-item:focus-visible .deck-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ----- Divider before the "Browse" chip ----- */
.anna-app-deck-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 36px;
    margin: 0 4px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.18), transparent);
    align-self: center;
}
[data-theme="light"] .anna-app-deck-divider {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.12), transparent);
}

/* ----- Browse-more chip ----- */
.anna-app-deck-more {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 220ms cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
    position: relative;
    transform-origin: bottom center;
}
.anna-app-deck-more svg {
    display: block;
    flex: 0 0 auto;
}
.anna-app-deck-more:hover {
    transform: translateY(-7px) scale(1.10);
    border-color: rgba(113, 113, 122, 0.55);
    border-style: solid;
    color: #a5b4fc;
    background: rgba(113, 113, 122, 0.10);
    box-shadow: 0 14px 26px rgba(113, 113, 122, 0.20);
}
[data-theme="light"] .anna-app-deck-more {
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--text-secondary);
}
[data-theme="light"] .anna-app-deck-more:hover {
    color: #52525b;
    background: rgba(113, 113, 122, 0.08);
}

/* ----- Empty state ----- */
.anna-app-deck-empty {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 6px 10px 6px 14px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 6px;
}
.anna-app-deck-empty a {
    color: #a5b4fc;
    text-decoration: none;
    font-weight: 600;
}
.anna-app-deck-empty a:hover { text-decoration: underline; }

/* ----- Skeleton placeholders while loading ----- */
.anna-app-deck-skeleton {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.anna-app-deck-skeleton span {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: annaDeckShimmer 1.4s ease-in-out infinite;
}
[data-theme="light"] .anna-app-deck-skeleton span {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
}
@keyframes annaDeckShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- Responsive: shrink + reposition on small screens ----- */
@media (max-width: 640px) {
    .anna-app-deck {
        bottom: 14px;
        padding: 0 12px;
    }
    .anna-app-deck-inner {
        gap: 6px;
        padding: 8px 10px;
        border-radius: 20px;
    }
    .anna-app-deck-item,
    .anna-app-deck-more,
    .anna-app-deck-skeleton span {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }
    .anna-app-deck-item:hover {
        transform: translateY(-6px) scale(1.10);
    }
}

/* Reduced motion: keep static, no lift / shimmer */
@media (prefers-reduced-motion: reduce) {
    .anna-app-deck { animation: none; }
    .anna-app-deck-item,
    .anna-app-deck-more { transition: none; }
    .anna-app-deck-item:hover,
    .anna-app-deck-item:hover + .anna-app-deck-item,
    .anna-app-deck-item:has(+ .anna-app-deck-item:hover),
    .anna-app-deck-more:hover {
        transform: none;
    }
    .anna-app-deck-skeleton span { animation: none; }
}

/* ----- Minimized-window shelf (macOS Dock 右侧最小化区) ----- */
/* Populated by AnnaAppWM._syncMinimizedShelf(); one item per minimized
   window. Click restores; the window genie-scales to/from this slot. */
.anna-app-deck-minimized {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    overflow: visible;
}
.anna-app-deck-minimized[hidden] { display: none; }
[data-theme="light"] .anna-app-deck-minimized {
    border-left-color: rgba(0, 0, 0, 0.10);
}
/* Slightly muted icon so "minimized window" reads apart from launchers */
.anna-app-deck-min-item .deck-icon-wrap {
    filter: saturate(0.8) brightness(0.92);
}
.anna-app-deck-min-item:hover .deck-icon-wrap {
    filter: none;
}
.anna-app-deck-min-item .deck-min-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(20, 20, 24, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 4;
}
[data-theme="light"] .anna-app-deck-min-item .deck-min-badge {
    background: rgba(60, 60, 67, 0.92);
    border-color: rgba(255, 255, 255, 0.95);
}

/* ----- Right-click context menu (macOS-style) ----- */
.anna-deck-context-menu {
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    padding: 6px;
    background: rgba(28, 28, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    color: #fff;
    font-size: 13px;
    user-select: none;
    animation: annaDeckCtxIn 120ms ease-out;
}
[data-theme="light"] .anna-deck-context-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.08);
    color: #1c1c1e;
}
@keyframes annaDeckCtxIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.anna-deck-context-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}
.anna-deck-context-menu button:hover,
.anna-deck-context-menu button:focus-visible {
    background: rgba(113, 113, 122, 0.85);
    color: #fff;
    outline: none;
}
.anna-deck-context-menu button.is-danger:hover {
    background: #d73a49;
}
.anna-deck-context-menu .anna-deck-ctx-divider {
    height: 1px;
    margin: 4px 2px;
    background: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .anna-deck-context-menu .anna-deck-ctx-divider {
    background: rgba(0, 0, 0, 0.08);
}
.anna-deck-context-menu .anna-deck-ctx-locked {
    padding: 7px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    cursor: default;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
[data-theme="light"] .anna-deck-context-menu .anna-deck-ctx-locked {
    color: rgba(0, 0, 0, 0.40);
}

/* ══════════════════════════════════════════════════════════════════════
 * Permission gate dialog — shown when an app can't be opened because some
 * declared App/Executa permission isn't granted yet. Deep-links to
 * /apps/installed?app=<id> where the unified permission modal auto-opens.
 * ══════════════════════════════════════════════════════════════════════ */
.perm-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.24s ease;
}
.perm-gate-overlay.is-open { opacity: 1; }
.perm-gate-overlay.is-closing { opacity: 0; }

.perm-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 22, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.perm-gate-panel {
    position: relative;
    width: min(440px, calc(100vw - 40px));
    padding: 26px 26px 20px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface-color, #fff);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px -24px rgba(8, 11, 22, 0.7);
    transform: translateY(14px) scale(0.96);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.perm-gate-overlay.is-open .perm-gate-panel { transform: translateY(0) scale(1); opacity: 1; }
.perm-gate-overlay.is-closing .perm-gate-panel { transform: translateY(10px) scale(0.97); opacity: 0; }

[data-theme="dark"] .perm-gate-panel {
    background: #12151f;
    border-color: rgba(255, 255, 255, 0.08);
}

.perm-gate-glow {
    position: absolute;
    inset: -50% -20% auto -20%;
    height: 160px;
    background: radial-gradient(60% 100% at 30% 0%, rgba(113, 113, 122, 0.35), transparent 70%),
                radial-gradient(50% 100% at 80% 0%, rgba(56, 189, 248, 0.28), transparent 72%);
    filter: blur(24px);
    pointer-events: none;
}

.perm-gate-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.perm-gate-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(113, 113, 122, 0.12);
    border: 1px solid rgba(113, 113, 122, 0.22);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
}
.perm-gate-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.perm-gate-headtext h3 {
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.01em;
}
.perm-gate-headtext p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-secondary, #6b7280);
}

.perm-gate-list {
    position: relative;
    list-style: none;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(113, 113, 122, 0.06);
    border: 1px solid rgba(113, 113, 122, 0.16);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.perm-gate-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
}
.perm-gate-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(120deg, #52525b, #a1a1aa);
    box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.14);
}

/* "sensitive" badge on higher-impact scopes (Agent / Credentials / Storage) */
.perm-gate-risk {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 999px;
    padding: 1px 8px;
}
[data-theme="dark"] .perm-gate-risk {
    color: #fbbf24;
}

.perm-gate-error {
    position: relative;
    margin: -10px 0 14px;
    font-size: 12.5px;
    color: #dc2626;
}

.perm-gate-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* Granular-review escape hatch — de-emphasized, pushed to the left */
.perm-gate-btn-link {
    margin-right: auto;
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-left: 4px;
    padding-right: 4px;
}
.perm-gate-btn-link:hover {
    background: transparent;
    color: var(--text-primary, #0f172a);
}
[data-theme="dark"] .perm-gate-btn-link:hover {
    color: #e5e7eb;
}
.perm-gate-btn {
    padding: 9px 18px;
    border-radius: 11px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary, #0f172a);
    background: transparent;
    border: 1px solid var(--border-color, #e5e7eb);
    transition: background 0.15s, transform 0.1s, filter 0.15s;
}
.perm-gate-btn:hover { background: var(--hover-bg, rgba(0, 0, 0, 0.05)); }
.perm-gate-btn:active { transform: translateY(1px); }
[data-theme="dark"] .perm-gate-btn { border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .perm-gate-btn:hover { background: rgba(255, 255, 255, 0.06); }

.perm-gate-btn-primary {
    color: #fff;
    border: none;
    background: linear-gradient(120deg, #52525b, #a1a1aa);
    box-shadow: 0 8px 20px -8px rgba(113, 113, 122, 0.8);
}
.perm-gate-btn-primary:hover { filter: brightness(1.06); background: linear-gradient(120deg, #52525b, #a1a1aa); }

/* ============================================================
   Dashboard view toggle (Chat / Apps) + Apps view SpringBoard
   grid — docs/design/dashboard-apps-view.md §7
   ============================================================ */

.main-content { position: relative; }

/* The overflow chip is a <button> when it switches to the Apps view (G7). */
button.anna-app-deck-more { padding: 0; font: inherit; }

/* Danger primary for the uninstall confirm (reuses perm-gate visuals, §7.8) */
.perm-gate-btn-danger {
    color: #fff;
    border: none;
    background: linear-gradient(120deg, #dc2626, #ef4444);
    box-shadow: 0 8px 20px -8px rgba(239, 68, 68, 0.8);
}
.perm-gate-btn-danger:hover { filter: brightness(1.06); }

.dashboard-view-toggle {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60; /* below the WM window layer, above both views */
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    background: var(--bg-secondary, var(--surface-color, #f4f4f5));
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.dashboard-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.dashboard-view-tab:hover { color: var(--text-color, var(--text-primary, #0f172a)); }
.dashboard-view-tab.active {
    color: var(--text-color, var(--text-primary, #0f172a));
    background: var(--bg-primary, var(--card-bg, #fff));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Chat 面板隐藏方式：不销毁 DOM/状态（SSE、任务轮询、WM 均继续运行） */
body.dashboard--apps-view .chat-panel { display: none; }

/* ----- Apps view container ----- */
.apps-view {
    height: calc(100vh - 32px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 12px;
    animation: apps-view-in 0.12s ease-out;
}
@keyframes apps-view-in {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.apps-view-search {
    display: flex;
    justify-content: center;
    padding: 64px 32px 8px;
}
.apps-view-search input {
    width: min(420px, 100%);
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, var(--surface-color, #f4f4f5));
    color: var(--text-color, var(--text-primary, #0f172a));
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.apps-view-search input:focus {
    border-color: var(--primary-color, #C96442);
    box-shadow: 0 0 0 3px var(--primary-rgba-010, rgba(201, 100, 66, 0.1));
}
.apps-view-search input:disabled { opacity: 0.45; }

/* ----- Grid ----- */
.apps-view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 28px 12px;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 32px 48px;
}

.apps-view-skeleton {
    display: contents;
}
.apps-view-skeleton span {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 16px;
    background: var(--hover-bg, rgba(0, 0, 0, 0.06));
    animation: apps-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes apps-skeleton-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.apps-view-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border: none;
    background: transparent;
    border-radius: 14px;
    cursor: pointer;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.apps-view-item:focus-visible {
    outline: 2px solid var(--primary-color, #C96442);
    outline-offset: 2px;
}

.apps-icon-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: visible;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.apps-view-item:hover .apps-icon-wrap { transform: scale(1.08); }
.apps-icon-wrap img,
.apps-icon-wrap .apps-icon-fallback {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.apps-icon-wrap img { display: block; }
/* Same specificity as the sizing rule above so flex centering wins. */
.apps-icon-wrap .apps-icon-fallback,
.apps-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-dark, #a1533a), var(--primary-color, #C96442));
}

.apps-view-item-name {
    max-width: 96px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--text-color, var(--text-primary, #0f172a));
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.apps-view-item.is-disabled { opacity: 0.45; }

/* Running indicator dot (synced by AnnaAppWM.syncDeckIndicators) */
.apps-view-item .apps-running-dot {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-secondary, #6b7280);
    opacity: 0;
    transition: opacity 0.15s;
}
.apps-view-item.is-running .apps-running-dot { opacity: 1; }

/* deck_pinned pin badge */
.apps-view-item .apps-pin-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-secondary, var(--surface-color, #f4f4f5));
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.apps-view-item.is-pinned .apps-pin-badge { display: flex; }

/* update_available blue dot */
.apps-view-item .apps-update-dot {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3b82f6;
    border: 1.5px solid var(--bg-primary, #fff);
    display: none;
}
.apps-view-item.has-update .apps-update-dot { display: block; cursor: pointer; }
.apps-view-item.has-update .apps-update-dot:hover { transform: scale(1.35); }

/* ----- In-place update (app-update-in-place-phase1 §3.3) ----- */
/* Registered property → the conic fan animates smoothly between ticks. */
@property --update-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* 扇形进度遮罩:已完成扇区透出(变暗的)图标,剩余部分深色 scrim。 */
.apps-icon-wrap.is-updating,
.anna-app-deck-item .deck-icon-wrap.is-updating {
    transition: --update-progress 0.3s ease;
}
.apps-icon-wrap.is-updating img,
.apps-icon-wrap.is-updating .apps-icon-fallback,
.deck-icon-wrap.is-updating img,
.deck-icon-wrap.is-updating .deck-fallback {
    filter: grayscale(0.4) brightness(0.8);
}
.apps-icon-wrap.is-updating::after,
.deck-icon-wrap.is-updating::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        transparent calc(var(--update-progress, 0) * 1%),
        rgba(0, 0, 0, 0.55) 0
    );
    pointer-events: none;
    z-index: 2;
}
.apps-icon-wrap.is-updating::after { border-radius: 16px; }
/* 更新中禁用悬停放大,视觉聚焦在进度上 */
.apps-view-item:hover .apps-icon-wrap.is-updating { transform: none; }

/* Dock update dot(网格 .apps-update-dot 的 Dock 版) */
.anna-app-deck-item .deck-update-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3b82f6;
    border: 1.5px solid var(--bg-primary, #fff);
    display: none;
    z-index: 3;
    cursor: pointer;
}
.anna-app-deck-item.has-update .deck-update-dot { display: block; }
.anna-app-deck-item.has-update .deck-update-dot:hover { transform: scale(1.35); }

/* 「已更新」绿色对勾角标(§3.3.1,首次打开新版本时清除) */
@keyframes apps-updated-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.apps-view-item .apps-updated-badge,
.anna-app-deck-item .deck-updated-badge {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    border: 1.5px solid var(--bg-primary, #fff);
    z-index: 3;
    pointer-events: none;
}
.apps-view-item .apps-updated-badge { top: -4px; left: -4px; }
.anna-app-deck-item .deck-updated-badge { top: -3px; right: -3px; }
.apps-view-item.is-recently-updated:not(.has-update) .apps-updated-badge,
.anna-app-deck-item.is-recently-updated:not(.has-update) .deck-updated-badge {
    display: flex;
    animation: apps-updated-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 打开时更新提示的「此版本不再提醒」行(复用 perm-gate 面板) */
.perm-gate-panel .app-update-snooze {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 2px 12px;
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    user-select: none;
}
.perm-gate-panel .app-update-snooze input { accent-color: #3b82f6; }

/* App Store trailing tile */
.apps-view-store-tile .apps-icon-fallback {
    background: transparent;
    border: 1.5px dashed var(--border-color, #cbd5e1);
    color: var(--text-secondary, #6b7280);
    box-shadow: none;
}
.apps-view--editing .apps-view-store-tile { display: none; }

/* ----- Edit mode (iOS wiggle) ----- */
@keyframes apps-wiggle {
    0%   { transform: rotate(-1.6deg); }
    100% { transform: rotate(1.6deg); }
}
.apps-view--editing .apps-view-item:not(.apps-view-store-tile) {
    animation: apps-wiggle 0.28s ease-in-out infinite alternate;
    cursor: grab;
}
.apps-view--editing .apps-view-item:nth-child(2n) { animation-delay: 0.14s; }
.apps-view--editing .apps-view-item.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.apps-view--editing .apps-view-item.drop-before::before,
.apps-view--editing .apps-view-item.drop-after::after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--primary-color, #C96442);
}
.apps-view--editing .apps-view-item.drop-before::before { left: -7px; }
.apps-view--editing .apps-view-item.drop-after::after { right: -7px; }

@media (prefers-reduced-motion: reduce) {
    .apps-view--editing .apps-view-item:not(.apps-view-store-tile) {
        animation: none;
        outline: 1.5px dashed var(--primary-color, #C96442);
        outline-offset: 3px;
        border-radius: 14px;
    }
    .apps-view { animation: none; }
}

/* Remove (uninstall) corner badge — visible only while editing */
.apps-view-remove {
    position: absolute;
    top: -6px;
    left: -6px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: none;
    font-size: 13px;
    line-height: 1;
    color: var(--text-color, #0f172a);
    background: var(--bg-secondary, var(--surface-color, #e5e7eb));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.apps-view--editing .apps-view-item:not(.apps-view-store-tile) .apps-view-remove { display: flex; }
.apps-view-remove:hover { background: #ef4444; color: #fff; }

/* Done button (edit mode) */
.apps-view-done {
    position: fixed;
    top: 14px;
    right: 24px;
    z-index: 61;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--primary-color, #C96442);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ----- Empty / error states ----- */
.apps-view-empty,
.apps-view-error {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 64px 16px;
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
    text-align: center;
}
.apps-view-empty a { color: var(--primary-color, #C96442); text-decoration: none; }
.apps-view-error button {
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: transparent;
    color: var(--text-color, var(--text-primary, #0f172a));
    cursor: pointer;
}
.apps-view-error button:hover { background: var(--hover-bg, rgba(0, 0, 0, 0.05)); }

/* ===== Apps view folders (dashboard-apps-view-folders.md §8.7) ===== */

/* Folder tile: 2×2 member-logo collage on a rounded plate */
.apps-folder-tile .apps-folder-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    width: 64px;
    height: 64px;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.06));
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}
.apps-folder-tile .apps-folder-collage img,
.apps-folder-tile .apps-folder-mini-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.apps-folder-tile .apps-folder-mini-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-primary, #fff);
}

/* Combine ring: drop target's center band while dragging over (§8.3) */
.apps-combine-target .apps-icon-wrap {
    outline: 2px solid var(--primary-color, #C96442);
    outline-offset: 3px;
    border-radius: 18px;
    transform: scale(1.08);
    transition: transform 0.12s ease;
}

/* Folder expand overlay (§8.4) — reuses perm-gate backdrop system */
.apps-folder-overlay .apps-folder-panel {
    position: relative;
    z-index: 1;
    width: min(560px, 92vw);
    max-height: min(70vh, 640px);
    overflow-y: auto;
    margin: auto;
    padding: 22px 26px 30px;
    border-radius: 20px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}
.apps-folder-overlay { display: flex; align-items: center; justify-content: center; }
.apps-folder-head { text-align: center; margin-bottom: 14px; }
.apps-folder-name {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color, var(--text-primary, #0f172a));
}
.apps-folder-name-input {
    max-width: 260px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-color, var(--text-primary, #0f172a));
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    outline: none;
}
.apps-folder-name-input:focus { border-color: var(--primary-color, #C96442); }
.apps-folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 20px 10px;
    padding: 4px 0 0;
    max-width: none;
    margin: 0;
}

/* Context-menu flyout submenu (Move to Folder ▸, §8.5) */
.anna-deck-ctx-subwrap { position: relative; }
.anna-deck-ctx-subwrap > .has-submenu::after {
    content: '▸';
    float: right;
    margin-left: 12px;
    opacity: 0.55;
}
.anna-deck-ctx-submenu {
    display: none;
    position: absolute;
    left: calc(100% - 4px);
    top: -4px;
    min-width: 140px;
}
.anna-deck-ctx-subwrap:hover .anna-deck-ctx-submenu,
.anna-deck-ctx-subwrap.is-open .anna-deck-ctx-submenu { display: block; }

/* Folder tiles wiggle with everything else; no uninstall ×; reduced motion
   falls back with the existing .apps-view--editing rule. */
[data-theme="dark"] .apps-folder-tile .apps-folder-collage {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .apps-folder-tile .apps-folder-mini-fallback { background: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .apps-folder-overlay .apps-folder-panel { box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); }


/* ----- Dark theme tweaks ----- */
[data-theme="dark"] .dashboard-view-toggle { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .apps-view-remove { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .apps-icon-wrap img,
[data-theme="dark"] .apps-icon-wrap .apps-icon-fallback { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }

/* ----- Mobile ----- */
@media (max-width: 768px) {
    .dashboard-view-toggle { top: 10px; }
    .dashboard-view-tab { padding: 4px 11px; font-size: 12px; }
    .apps-view-search { padding-top: 56px; }
    .apps-view-grid {
        grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
        gap: 22px 8px;
        padding: 16px 16px 40px;
    }
    .apps-icon-wrap,
    .apps-icon-wrap img,
    .apps-icon-wrap .apps-icon-fallback,
    .apps-view-skeleton span { width: 56px; height: 56px; border-radius: 14px; }
    .apps-view-done { top: 10px; right: 12px; }
}

/* ===== 登录初始化后台横幅（degate §5.2） ===== */
/* 右上角固定：与居中的 Chat/Apps 切换条（.dashboard-view-toggle, top 14px）
   同一行高、互不遮挡；z-index 低于切换条（60）与 Done（61），后者只在 Apps
   编辑模式出现，届时横幅整体隐藏（见下方 dashboard--apps-editing 规则）。 */
.ob-banner {
    position: fixed;
    top: 14px;
    right: 24px;
    z-index: 59;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-color);
    background: var(--card-bg, var(--bg-secondary));
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    max-width: min(46vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-banner::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color);
    flex-shrink: 0;
    animation: ob-banner-breathe 1.8s ease-in-out infinite;
}

.ob-banner:hover { transform: translateY(-1px); }

/* Apps 编辑模式：让位给同角落的 Done 按钮（编辑是短暂操作态） */
body.dashboard--apps-editing .ob-banner { display: none; }

.ob-banner.is-warn {
    color: var(--warning-color, #d97706);
    border-color: rgba(217, 119, 6, 0.4);
}

.ob-banner.is-warn::before {
    background: var(--warning-color, #d97706);
    animation: none;
}

@keyframes ob-banner-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

[data-theme="dark"] .ob-banner { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); }

/* 窄屏：切换条与右上角空间不足，退到底部居中（deck 上方），避免与顶部元素挤压 */
@media (max-width: 640px) {
    .ob-banner {
        top: auto;
        bottom: 96px;
        right: 50%;
        transform: translateX(50%);
        max-width: calc(100vw - 32px);
    }
    .ob-banner:hover { transform: translateX(50%) translateY(-1px); }
}