/* HMBuyClaw v2.0.7 — 汇麦AI本地通 visual theme.
 * Loaded after console.css so the existing console behavior stays intact.
 */
:root {
    --hm-bg: #f7f8ff;
    --hm-bg-soft: #f0f2ff;
    --hm-panel: #ffffff;
    --hm-panel-strong: #ffffff;
    --hm-sidebar: #eef0f9;
    --hm-ink: #1a2033;
    --hm-muted: #7f849d;
    --hm-border: #dfe2ee;
    --hm-brand: #635bff;
    --hm-brand-strong: #5348e6;
    --hm-brand-soft: rgba(99, 91, 255, 0.12);
}

html.dark {
    --hm-bg: #1a2033;
    --hm-bg-soft: #22283d;
    --hm-panel: #2a2f45;
    --hm-panel-strong: #1a2033;
    --hm-sidebar: #2a2f45;
    --hm-ink: #f7f8ff;
    --hm-muted: #9297ad;
    --hm-border: rgba(255, 255, 255, 0.12);
    --hm-brand: #8b84ff;
    --hm-brand-strong: #b8b3ff;
    --hm-brand-soft: rgba(139, 132, 255, 0.16);
}

html,
body {
    background: var(--hm-bg) !important;
    color: var(--hm-ink);
}

#app,
#main-content,
#content-area,
.chat-main,
#chat-messages,
.view {
    background: var(--hm-bg) !important;
}

#sidebar {
    width: 15rem !important;
    background: var(--hm-sidebar) !important;
    border-right: 1px solid var(--hm-border);
    color: var(--hm-muted) !important;
}

.sidebar-brand {
    height: 3.5rem;
    min-height: 3.5rem;
    border-bottom-color: var(--hm-border) !important;
}

#sidebar .sidebar-brand .brand-title {
    color: var(--hm-ink) !important;
    font-size: 0.875rem;
}

#sidebar .sidebar-brand .brand-subtitle,
#sidebar nav button,
#sidebar .sidebar-footer {
    color: var(--hm-muted) !important;
}

.sidebar-item {
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 0.75rem !important;
}

.sidebar-item:hover {
    background: var(--hm-brand-soft) !important;
    border-color: var(--hm-border);
    color: var(--hm-ink) !important;
}

.sidebar-item.active,
.sidebar-item.active:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(247, 248, 255, 0.9);
    color: var(--hm-ink) !important;
    box-shadow: 0 0 0 1px rgba(26, 32, 51, 0.08);
}

html:not(.dark) .sidebar-item.active,
html:not(.dark) .sidebar-item.active:hover {
    background: #ffffff !important;
    border-color: #afb4c8;
}

.sidebar-item .item-icon,
.sidebar-item.active .item-icon {
    color: var(--hm-brand) !important;
}

.sidebar-item[data-view="models"],
.sidebar-item[data-view="skills"],
.sidebar-item[data-view="knowledge"] {
    display: none !important;
}

.sidebar-footer {
    border-top-color: var(--hm-border) !important;
}

.sidebar-footer span {
    color: var(--hm-muted) !important;
    font-size: 0.875rem !important;
    font-weight: 500;
}

.session-panel {
    background: var(--hm-panel) !important;
    border-right-color: var(--hm-border) !important;
}

.session-panel-header {
    border-bottom-color: var(--hm-border) !important;
}

.session-panel-title,
.session-item.active {
    color: var(--hm-ink) !important;
}

.session-panel-new,
.session-item,
.session-group-label,
.session-empty {
    color: var(--hm-muted) !important;
}

.session-panel-new {
    border-color: var(--hm-border) !important;
}

.session-item:hover,
.session-item.active {
    background: var(--hm-brand-soft) !important;
}

.app-header {
    background: var(--hm-panel-strong) !important;
    border-bottom-color: var(--hm-border) !important;
}

.brand-crumb {
    border: 1px solid var(--hm-brand);
    color: var(--hm-brand-strong);
    background: var(--hm-brand-soft);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}

#login-overlay {
    background: var(--hm-bg) !important;
}

#welcome-screen {
    justify-content: flex-start !important;
    min-height: 100%;
    height: auto !important;
    padding-top: clamp(3rem, 7vh, 6.5rem) !important;
    padding-bottom: 7.5rem !important;
}

.hm-welcome-shell {
    width: min(100%, 70rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hm-welcome-logo {
    width: clamp(6.5rem, 8.5vw, 9rem);
    height: clamp(6.5rem, 8.5vw, 9rem);
    filter: drop-shadow(0 18px 28px rgba(99, 91, 255, 0.18));
}

.hm-welcome-title {
    margin-top: 1.8rem;
    margin-bottom: 0 !important;
    color: var(--hm-ink) !important;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hm-welcome-subtitle {
    margin-top: 1.55rem;
    margin-bottom: 0 !important;
    color: var(--hm-muted) !important;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
}

.hm-quick-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(2.2rem, 6vh, 4.5rem);
}

.hm-quick-card {
    min-height: 6.3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--hm-border) !important;
    border-radius: 0.8rem !important;
    background: var(--hm-panel-strong) !important;
    color: var(--hm-ink);
    box-shadow: 0 8px 24px rgba(11, 15, 29, 0.08);
}

.hm-quick-card:hover {
    border-color: var(--hm-brand) !important;
    background: var(--hm-panel) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(11, 15, 29, 0.14);
}

.hm-quick-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--hm-brand-soft);
    color: var(--hm-brand);
    font-size: 1.1rem;
}

.hm-quick-label {
    color: var(--hm-ink) !important;
    font-size: 1rem;
    font-weight: 650;
}

.chat-composer {
    background: transparent !important;
    border-top-color: var(--hm-border) !important;
    padding-top: 0.75rem;
    padding-bottom: 1rem;
}

.chat-composer > div {
    max-width: 48rem !important;
}

.composer-shell {
    padding: 0.55rem;
    border: 1px solid var(--hm-border);
    border-radius: 14px;
    background: var(--hm-panel) !important;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px -12px rgba(17, 17, 17, 0.18);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.composer-shell:focus-within {
    border-color: var(--hm-brand);
    box-shadow: 0 0 0 3px var(--hm-brand-soft), 0 8px 24px -12px rgba(17, 17, 17, 0.18);
}

#chat-input {
    color: var(--hm-ink) !important;
    background: transparent !important;
    border-color: transparent !important;
    font-size: 0.96rem;
}

#chat-input:focus {
    box-shadow: none !important;
}

#chat-input::placeholder {
    color: var(--hm-muted) !important;
}

#new-chat-btn,
#clear-context-btn,
#attach-btn {
    color: var(--hm-muted) !important;
}

#new-chat-btn:hover,
#clear-context-btn:hover,
#attach-btn:hover {
    color: var(--hm-ink) !important;
    background: var(--hm-brand-soft) !important;
}

#send-btn {
    border-radius: 999px !important;
}

#send-btn:disabled {
    color: var(--hm-muted) !important;
    background: var(--hm-bg-soft) !important;
}

.bg-primary-500,
.hover\:bg-primary-500:hover,
.hover\:bg-primary-600:hover {
    background-color: var(--hm-brand) !important;
}

.text-primary-400,
.text-primary-500,
.hover\:text-primary-400:hover,
.hover\:text-primary-500:hover {
    color: var(--hm-brand) !important;
}

.border-primary-400,
.border-primary-500,
.focus\:border-primary-400:focus,
.focus\:border-primary-500:focus,
.focus\:border-primary-600:focus {
    border-color: var(--hm-brand) !important;
}

@media (max-width: 1023px) {
    #sidebar {
        width: 15rem !important;
    }

    .brand-crumb {
        display: none;
    }
}

@media (max-width: 700px) {
    #welcome-screen {
        padding: 2rem 1rem 6rem !important;
    }

    .hm-welcome-title {
        font-size: 2rem;
        text-align: center;
    }

    .hm-quick-grid {
        grid-template-columns: 1fr;
        margin-top: 2rem;
    }

    .hm-quick-card {
        min-height: 5rem;
        padding: 1rem;
    }
}