/* guofeng.css —— 全站国风主题样式
   配色：宣纸暖白 + 墨黑 + 朱砂红印章 + 鼠尾草绿点缀
   字体：标题用书法体(Ma Shan Zheng)，正文用楷体系统字回退 */

:root {
    --xuan-paper:   #f6f2e7;   /* 宣纸底色 */
    --xuan-paper-2: #f3efe4;   /* 页面更外层底色 */
    --ink:          #1a1a1a;   /* 墨黑 */
    --ink-soft:     #3a3a3a;   /* 浅墨 */
    --seal-red:     #b1322f;   /* 朱砂印章红 */
    --bamboo:       #5f7d5a;   /* 竹青绿（点缀/主色） */
    --bamboo-dark:  #46603f;
    --border-soft:  #e0d9c6;   /* 柔和边框 */
    --card-bg:      #fffdf6;   /* 卡片纸白 */
    --muted:        #9a917c;   /* 淡墨注释 */
}

/* 书法标题字体 */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

body {
    background: var(--xuan-paper-2);
    color: var(--ink);
    /* 正文：优先系统楷体，营造国风又保证清晰可读 */
    font-family: "Kaiti SC", "STKaiti", "KaiTi", "楷体",
                 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 书法标题类：用在 App 名、大标题上 */
.brush {
    font-family: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", serif;
    color: var(--ink);
    letter-spacing: 2px;
}

/* 国风卡片 */
.gf-card {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(95, 125, 90, .08);
}

/* 主按钮：墨黑 */
.btn-ink {
    background: var(--ink);
    color: var(--xuan-paper);
    border: none;
    border-radius: 9px;
    letter-spacing: 2px;
}
.btn-ink:hover { background: #000; color: #fff; }

/* 次按钮：竹青描边 */
.btn-bamboo {
    background: transparent;
    color: var(--bamboo-dark);
    border: 1px solid var(--bamboo);
    border-radius: 9px;
}
.btn-bamboo:hover { background: var(--bamboo); color: #fff; }

/* 朱砂印章 */
.seal {
    background: var(--seal-red);
    color: #fff;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    opacity: .85;
    font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}

/* 顶部小标题/副标题 */
.gf-subtitle { color: var(--muted); letter-spacing: 3px; }

/* 让输入框也带点国风纸感 */
.form-control {
    background: #fbf9f2;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
}
.form-control:focus {
    border-color: var(--bamboo);
    box-shadow: 0 0 0 .15rem rgba(95, 125, 90, .15);
}

/* ── 视觉精致化（2026-06）────────────────────────────── */

/* 卡片：更有层次的柔和阴影 + hover 轻微浮起，按钮卡片可点更有反馈 */
.gf-card {
    transition: box-shadow .18s ease, transform .18s ease;
}
.gf-card:hover {
    box-shadow: 0 6px 22px rgba(95, 125, 90, .14);
    transform: translateY(-1px);
}

/* 文字头像（无照片时的圆圈）：竹青柔和渐变 + 细描边 + 内层高光，比纯色更雅
   用法：把原来 background:var(--bamboo) 的圆圈加上 class="gf-avatar" 即可 */
.gf-avatar {
    background: linear-gradient(145deg, #6f8c68 0%, #51714b 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 2px 6px rgba(70, 96, 63, .25),
                inset 0 1px 2px rgba(255, 255, 255, .25);
    font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
    letter-spacing: 0;
}
/* 群聊头像换暖褐渐变，和私聊竹青区分开 */
.gf-avatar.group {
    background: linear-gradient(145deg, #9c8157 0%, #7c6438 100%);
    box-shadow: 0 2px 6px rgba(124, 100, 56, .25),
                inset 0 1px 2px rgba(255, 255, 255, .25);
}
/* 真实头像照片：也加一圈柔和细边，和文字头像观感统一 */
.gf-avatar-img {
    border: 1px solid var(--border-soft);
    box-shadow: 0 2px 6px rgba(70, 96, 63, .18);
    object-fit: cover;
}

/* 国风聊天图标（替代突兀的 💬 emoji）：竹青描边小气泡 */
.chat-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    color: var(--bamboo-dark);
    border: 1px solid var(--border-soft);
    background: #fbf9f2;
    font-size: 15px; flex: 0 0 auto;
    transition: background .15s ease, color .15s ease;
}
.gf-card:hover .chat-ico { background: var(--bamboo); color: #fff; border-color: var(--bamboo); }