/* --- Gemini Shortcode 专用样式 (已优化兼容主题暗黑模式) --- */

/* 1. 定义可复用的 CSS 变量 (不再定义背景色) */
:root {
    --gemini-border-color: #e0e0e0;
    --gemini-header-bg-color: #f5f5f5;
    --gemini-header-text-color: #333;
    --gemini-content-text-color: #212121;
    --gemini-icon-color: #4a90e2;
    --gemini-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* 2. 使用媒体查询，为其他变量重写暗黑模式的值 */
@media (prefers-color-scheme: dark) {
    :root {
        /* 这里是精心挑选的一套暗黑模式颜色 */
        --gemini-bg-color: #282c34;
        /* 深邃的炭灰色，而非纯黑 */
        --gemini-border-color: #404552;
        --gemini-header-bg-color: #333842;
        --gemini-header-text-color: #e2e2e2;
        --gemini-content-text-color: #d1d1d1;
        --gemini-icon-color: #63a4ff;
        --gemini-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }
}

/* 3. 在组件样式中，移除对背景色的应用 */
.gemini-response {
    border: 1px solid var(--gemini-border-color);
    box-shadow: var(--gemini-shadow);
    border-radius: 12px;
    margin: 2em 0;
    overflow: hidden;
    /* 让颜色切换更平滑 (背景色的 transition 可以移除，但保留也无妨) */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 其他样式保持不变，它们依然会根据 prefers-color-scheme 切换 */
.gemini-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--gemini-header-bg-color);
    padding: 8px 16px;
    font-weight: 600;
    color: var(--gemini-header-text-color);
    border-bottom: 1px solid var(--gemini-border-color);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.gemini-header svg {
    color: var(--gemini-icon-color);
    transition: color 0.3s ease;
}

.gemini-content {
    padding: 16px;
    transition: color 0.3s ease;
}

.gemini-content a {
    color: var(--gemini-icon-color);
}

.gemini-content code {
    padding: 2px 6px;
    border-radius: 4px;
}