/* ============ 小克 & 番茄 - 设计 Token ============ */
:root {
    /* 番茄取色：深绿 c0c7a8 / 磨砂浅绿 d8e4da / 冷灰蓝 e5e9e8 / 暖灰边框 dbdac8 */
    --color-bg: #F4F3EC;
    --color-bg-gradient:
        radial-gradient(circle at 78% 12%, rgba(192, 199, 168, 0.55) 0%, transparent 42%),
        radial-gradient(circle at 15% 28%, rgba(229, 233, 232, 0.7) 0%, transparent 38%),
        linear-gradient(165deg, #FAF9F4 0%, #F2F1E8 45%, #D8E4DA 100%);
    --color-text: #3A3A33;
    --color-text-muted: #A6A496;
    --color-border: rgba(192, 199, 168, 0.28);
    --color-accent: #A8B98E;
    --color-accent-soft: rgba(192, 199, 168, 0.22);
    --color-accent-strong: #8B9C72;
    --color-card: rgba(255, 255, 255, 0.55);
    --color-card-solid: #FFFFFF;
    --color-card-alt: rgba(216, 228, 218, 0.45);

    /* 顶部栏/导航：冷灰蓝磨砂 */
    --color-header-bg: linear-gradient(180deg, rgba(229, 233, 232, 0.6) 0%, rgba(216, 228, 218, 0.35) 100%);
    --color-header-border: rgba(192, 199, 168, 0.25);
    --color-online: #A8B98E;
    --color-frame: #DBDAC8;

    /* Soft Neumorphism 双向阴影 */
    --shadow-soft-light: -6px -6px 14px rgba(255, 255, 255, 0.8);
    --shadow-soft-dark: 8px 8px 18px rgba(180, 188, 160, 0.18);

    /* 强调色 - 与天数数字同色 */
    --gradient-accent: var(--color-accent-strong);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "Roboto Mono", "Courier New", monospace;

    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --radius-pill: 22px;

    --nav-height: 64px;

    /* iOS 风格弹性过渡曲线 */
    --ease-ios: cubic-bezier(0.36, 0.66, 0.04, 1);
    --ease-ios-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg-gradient);
    background-attachment: fixed;
    background-size: 100% 100%;
    color: var(--color-text);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

a, button, .card, .nav-item, .session-row, .icon-btn {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* ============ 顶部栏（磨砂） ============ */
.app-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-header-border);
    background: var(--color-header-bg);
    backdrop-filter: blur(32px) saturate(140%);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.app-header h1 {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin: 0;
}

.icon-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 18px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s var(--ease-ios-soft), color 0.2s;
}

.icon-btn:hover, .icon-btn.active {
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

/* ============ 底部导航栏（磨砂） ============ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: var(--color-header-bg);
    backdrop-filter: blur(32px) saturate(140%);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    border-top: 1px solid var(--color-header-border);
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 50;
}

.bottom-nav-inner {
    display: flex;
    width: 100%;
    max-width: 600px;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 11px;
    transition: color 0.2s var(--ease-ios-soft), transform 0.2s var(--ease-ios);
}

.nav-item .nav-icon {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s var(--ease-ios);
}

.nav-item.active {
    color: var(--color-accent-strong);
    font-weight: 600;
}

.nav-item.active .nav-icon {
    transform: translateY(-2px) scale(1.08);
}

/* 中央突出按钮（聊天入口） */
.nav-item.nav-center {
    position: relative;
}

.nav-item.nav-center .nav-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-16px);
    box-shadow: -3px -3px 8px rgba(255,255,255,0.7), 5px 8px 16px rgba(120, 145, 115, 0.35);
    transition: transform 0.25s var(--ease-ios);
}

.nav-item.nav-center .nav-icon svg {
    width: 22px;
    height: 22px;
}

.nav-item.nav-center span:last-child {
    transform: translateY(-12px);
}

.nav-item.nav-center.active .nav-icon {
    transform: translateY(-18px) scale(1.05);
}

.nav-item.nav-center.active {
    color: var(--color-accent-strong);
}

/* ============ 容器 / 留白 ============ */
.page-container {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: calc(var(--nav-height) + 16px);
}

.page-container.no-nav {
    padding-bottom: 16px;
}

/* ============ 通用卡片（磨砂渐变） ============ */
.card {
    background: linear-gradient(165deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.4) 100%);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-light), var(--shadow-soft-dark);
    transition: transform 0.2s var(--ease-ios), box-shadow 0.2s var(--ease-ios);
}

.card:active {
    transform: scale(0.985);
}

.num-mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ============ 头像 ============ */
.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    font-weight: 600;
    box-shadow: -2px -2px 5px rgba(255,255,255,0.6), 3px 3px 8px rgba(140, 165, 135, 0.35);
}

.avatar.lg {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

/* ============ 线性图标 ============ */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
}

.icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.nav-icon.icon {
    width: 22px;
    height: 22px;
}