/**
 * 签到页面样式
 *
 * 参考设计图重新实现，使用父主题 CSS 变量
 *
 * @package    Hui
 * @subpackage Checkin
 * @since      1.4.8
 */

/* ============================================================================
 * 页面容器
 * ============================================================================ */

/* 签到页面背景 - 修复导航栏透明问题 */
body.hui-checkin-body {
    background: var(--color-bg-layout);
}

/* 修复导航栏透明问题 - 强制覆盖透明模式 */
body.hui-checkin-body header#masthead.xun-header,
body.hui-checkin-body header#masthead.xun-header.xun-header--transparent,
body.hui-checkin-body header#masthead.xun-header.xun-header--transparent:not(.is-scrolled) {
    background: var(--color-bg-container, #fff) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 修复 logo 颜色 */
body.hui-checkin-body header#masthead.xun-header .xun-logo img,
body.hui-checkin-body header#masthead.xun-header .xun-logo svg {
    filter: none !important;
}

body.hui-checkin-body header#masthead.xun-header .xun-logo-dark {
    display: none !important;
}

body.hui-checkin-body header#masthead.xun-header .xun-logo-light {
    display: block !important;
}

/* 修复导航文字颜色 */
body.hui-checkin-body header#masthead.xun-header .xun-nav a,
body.hui-checkin-body header#masthead.xun-header .xun-nav-link {
    color: var(--color-text) !important;
}

body.hui-checkin-body header#masthead.xun-header .xun-nav a:hover,
body.hui-checkin-body header#masthead.xun-header .xun-nav-link:hover {
    color: var(--xun-secondary, var(--color-secondary)) !important;
}

/* 修复 header actions 颜色 */
body.hui-checkin-body header#masthead.xun-header .xun-header-actions a,
body.hui-checkin-body header#masthead.xun-header .xun-header-actions button,
body.hui-checkin-body header#masthead.xun-header .xun-header-btn {
    color: var(--color-text-secondary) !important;
}

body.hui-checkin-body header#masthead.xun-header .xun-header-actions a:hover,
body.hui-checkin-body header#masthead.xun-header .xun-header-actions button:hover,
body.hui-checkin-body header#masthead.xun-header .xun-header-btn:hover {
    color: var(--color-text) !important;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    :root:not(.light) body.hui-checkin-body header#masthead.xun-header,
    :root:not(.light) body.hui-checkin-body header#masthead.xun-header.xun-header--transparent,
    :root:not(.light) body.hui-checkin-body header#masthead.xun-header.xun-header--transparent:not(.is-scrolled) {
        background: var(--color-bg-container, #1f1f1f) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
    
    :root:not(.light) body.hui-checkin-body header#masthead.xun-header .xun-logo-dark {
        display: block !important;
    }
    
    :root:not(.light) body.hui-checkin-body header#masthead.xun-header .xun-logo-light {
        display: none !important;
    }
}

.dark body.hui-checkin-body header#masthead.xun-header,
.dark body.hui-checkin-body header#masthead.xun-header.xun-header--transparent,
.dark body.hui-checkin-body header#masthead.xun-header.xun-header--transparent:not(.is-scrolled) {
    background: var(--color-bg-container, #1f1f1f) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.dark body.hui-checkin-body header#masthead.xun-header .xun-logo-dark {
    display: block !important;
}

.dark body.hui-checkin-body header#masthead.xun-header .xun-logo-light {
    display: none !important;
}

.hui-checkin-main {
    min-height: calc(100vh - 64px);
    background: var(--color-bg-layout);
    padding-bottom: 2rem;
}

/* 使用父主题容器宽度变量 */
.hui-checkin-container {
    max-width: var(--xun-container-width, 1200px);
    margin: 0 auto;
    padding: 0 1rem;
}

.hui-checkin-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 5rem;
    padding-bottom: 1.5rem;
}

/* ============================================================================
 * 用户信息头部
 * ============================================================================ */

.hui-checkin-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-container);
    border-radius: var(--xun-radius-lg, 12px);
    box-shadow: var(--shadow-card);
}

.hui-checkin-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.hui-checkin-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
}

.hui-checkin-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* 用户等级徽章 */
.hui-checkin-level {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: #fff;
    background: var(--xun-primary, var(--color-primary));
    border-radius: var(--xun-radius-sm, 6px);
    white-space: nowrap;
}

.hui-checkin-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hui-checkin-welcome {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.hui-checkin-user-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.hui-checkin-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hui-checkin-meta-item i {
    font-size: 0.75rem;
    color: var(--color-warning);
}

/* 签到按钮 - 使用变量系统配色 */
.hui-checkin-action {
    flex-shrink: 0;
}

.hui-checkin-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: var(--xun-primary, var(--color-primary));
    border: none;
    border-radius: var(--xun-radius, 8px);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
    white-space: nowrap;
}

.hui-checkin-btn:hover:not(:disabled) {
    background: var(--xun-primary-hover, var(--color-primary-hover));
}

.hui-checkin-btn.is-checked {
    background: var(--color-fill);
    color: var(--color-text-tertiary);
    cursor: default;
}

.hui-checkin-btn.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* 登录按钮样式 */
.hui-checkin-btn--login {
    text-decoration: none;
}

/* 未登录欢迎文字 */
.hui-checkin-welcome--guest {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.hui-checkin-welcome--guest strong {
    color: var(--xun-primary, var(--color-primary));
    font-weight: 600;
}

/* 今日奖励 - 横向布局参考图2 */
.hui-checkin-reward-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--color-fill-quaternary);
    border-radius: var(--xun-radius, 8px);
    flex-shrink: 0;
    min-width: 240px;
}

.hui-checkin-reward-left {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.hui-checkin-reward-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.hui-checkin-reward-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.hui-checkin-reward-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.hui-checkin-reward-right i {
    font-size: 0.875rem;
    color: var(--xun-secondary, var(--color-secondary));
}

.hui-checkin-reward-right i.fa-check-circle {
    color: var(--color-success);
}

/* ============================================================================
 * 三栏布局 - 等高对齐
 * ============================================================================ */

.hui-checkin-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

.hui-checkin-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 中栏和右栏的卡片填满整个高度 */
.hui-checkin-col--center .hui-checkin-card,
.hui-checkin-col--right .hui-checkin-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================================
 * 通用卡片样式
 * ============================================================================ */

.hui-checkin-card {
    background: var(--color-bg-container);
    border-radius: var(--xun-radius-lg, 12px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.hui-checkin-card--full {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hui-checkin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border-secondary);
}

.hui-checkin-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.hui-checkin-card-title i {
    color: var(--xun-secondary, var(--color-secondary));
    font-size: 0.875rem;
}

/* ============================================================================
 * 签到日历 - 参考设计图样式
 * ============================================================================ */

/* 日历卡片保持正方形 */
.hui-checkin-col--left .hui-checkin-card:first-child {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
}

.hui-checkin-card-header--calendar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: none;
}

.hui-checkin-calendar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hui-checkin-calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hui-checkin-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: all 0.2s var(--ease-smooth);
}

.hui-checkin-nav-btn:hover {
    color: var(--xun-primary, var(--color-primary));
    background: var(--color-fill-tertiary);
}

.hui-checkin-calendar-month {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.hui-checkin-month-stats {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.hui-checkin-month-stats strong {
    color: var(--xun-primary, var(--color-primary));
    font-weight: 600;
}

.hui-checkin-calendar {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem;
}

.hui-checkin-calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.hui-checkin-week-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-tertiary);
}

.hui-checkin-calendar-body {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 0.5rem;
}

.hui-checkin-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-fill-quaternary);
    border-radius: var(--xun-radius, 8px);
    transition: all 0.15s var(--ease-smooth);
    cursor: default;
}

.hui-checkin-day--empty {
    background: transparent;
}

.hui-checkin-day-num {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1;
}

.hui-checkin-day-label {
    font-size: 0.625rem;
    color: inherit;
    margin-top: 0.125rem;
}

/* 奖励日图标 */
.hui-checkin-day-reward {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.75rem;
    color: var(--color-warning);
}

/* 已签到状态 */
.hui-checkin-day--checked {
    background: oklch(from var(--xun-primary, var(--color-primary)) l c h / 0.1);
}

.hui-checkin-day--checked .hui-checkin-day-num {
    color: var(--xun-primary, var(--color-primary));
    font-weight: 600;
}

/* 今天状态 */
.hui-checkin-day--today {
    background: var(--xun-primary, var(--color-primary));
}

.hui-checkin-day--today .hui-checkin-day-num {
    color: #fff;
    font-weight: 600;
}

.hui-checkin-day--today .hui-checkin-day-label {
    color: rgba(255, 255, 255, 0.8);
}

.hui-checkin-day--today .hui-checkin-day-reward {
    color: #fff;
}

/* 今天+已签到 */
.hui-checkin-day--today.hui-checkin-day--checked {
    background: var(--xun-primary, var(--color-primary));
}

/* 日历底部图例 */
.hui-checkin-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border-secondary);
    margin-top: auto;
}

.hui-checkin-legend {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.hui-checkin-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.hui-checkin-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.hui-checkin-legend-dot--checked {
    background: var(--xun-primary, var(--color-primary));
}

.hui-checkin-legend-dot--today {
    background: var(--xun-primary, var(--color-primary));
}

.hui-checkin-legend-dot--reward {
    background: var(--color-warning);
}

/* ============================================================================
 * 连续签到奖励 - 参考图2样式
 * ============================================================================ */

.hui-checkin-streak-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: none;
}

.hui-checkin-streak-stats {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.hui-checkin-streak-stats strong {
    color: var(--xun-primary, var(--color-primary));
    font-weight: 600;
}

.hui-checkin-streak-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.75rem;
    padding: 0.75rem 1.25rem 1.25rem;
}

.hui-checkin-streak-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: var(--color-bg-container);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--xun-radius, 8px);
    transition: all 0.2s var(--ease-smooth);
    position: relative;
}

.hui-checkin-streak-item:hover {
    border-color: var(--xun-primary, var(--color-primary));
}

/* 已领取状态 */
.hui-checkin-streak-item.is-claimed {
    background: var(--color-fill-quaternary);
    border-color: transparent;
}

.hui-checkin-streak-item.is-claimed .hui-checkin-streak-icon {
    color: var(--color-success);
}

.hui-checkin-streak-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    color: var(--color-warning);
}

.hui-checkin-streak-icon i {
    font-size: inherit;
}

/* 已领取显示勾选图标 */
.hui-checkin-streak-item.is-claimed .hui-checkin-streak-icon i::before {
    content: "\f058"; /* fa-check-circle */
}

.hui-checkin-streak-days {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.hui-checkin-streak-reward {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

/* 进度条 */
.hui-checkin-streak-progress {
    width: 100%;
    height: 3px;
    background: var(--color-border-secondary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.hui-checkin-streak-progress-fill {
    height: 100%;
    background: var(--xun-primary, var(--color-primary));
    border-radius: 2px;
    transition: width 0.3s var(--ease-smooth);
}

/* ============================================================================
 * 签到排行榜 - 参考图2样式
 * ============================================================================ */

.hui-checkin-ranking-tabs {
    display: flex;
    gap: 0.5rem;
}

.hui-checkin-tab {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--xun-radius, 8px);
    cursor: pointer;
    transition: all 0.15s var(--ease-smooth);
}

.hui-checkin-tab:hover {
    color: var(--color-text);
    background: var(--color-fill-tertiary);
}

.hui-checkin-tab.is-active {
    color: #fff;
    background: var(--xun-primary, var(--color-primary));
}

/* 今日签到统计 */
.hui-checkin-ranking-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    background: var(--color-fill-quaternary);
    border-radius: var(--xun-radius, 8px);
    margin: 0.75rem 1rem;
}

.hui-checkin-ranking-stats i {
    color: var(--color-text-tertiary);
}

.hui-checkin-ranking-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.75rem 0.75rem;
}

.hui-checkin-ranking-list {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.hui-checkin-ranking-list.is-active {
    display: flex;
}

.hui-checkin-ranking-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-container);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--xun-radius, 8px);
    transition: all 0.15s var(--ease-smooth);
}

.hui-checkin-ranking-item:hover {
    border-color: var(--xun-secondary, var(--color-secondary));
}

/* 第一名特殊样式 - 金色背景 */
.hui-checkin-ranking-item.is-first {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
    border-color: #ffd966;
}

.hui-checkin-ranking-item.is-first:hover {
    border-color: #ffcc00;
}

/* 第二名特殊样式 - 银色/蓝色背景 */
.hui-checkin-ranking-item.is-second {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
    border-color: #a8d8ea;
}

.hui-checkin-ranking-item.is-second:hover {
    border-color: #7ec8e3;
}

/* 第三名特殊样式 - 铜色/橙色背景 */
.hui-checkin-ranking-item.is-third {
    background: linear-gradient(135deg, #fff5eb 0%, #ffedd9 100%);
    border-color: #ffb347;
}

.hui-checkin-ranking-item.is-third:hover {
    border-color: #ff9500;
}

.hui-checkin-ranking-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
    background: var(--color-fill-tertiary);
    border-radius: var(--xun-radius-sm, 6px);
    flex-shrink: 0;
}

/* 第一名皇冠 */
.hui-checkin-ranking-rank.is-top-1 {
    color: #ff9500;
    background: linear-gradient(135deg, #fff3cc 0%, #ffe699 100%);
}

.hui-checkin-ranking-rank.is-top-1 i {
    font-size: 0.875rem;
}

.hui-checkin-ranking-rank.is-top-2 {
    color: #fff;
    background: linear-gradient(135deg, #a8d8ea 0%, #7ec8e3 100%);
}

.hui-checkin-ranking-rank.is-top-3 {
    color: #fff;
    background: linear-gradient(135deg, #ffb347 0%, #ff9500 100%);
}

.hui-checkin-ranking-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--color-bg-container);
    box-shadow: var(--shadow-xs);
}

.hui-checkin-ranking-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.hui-checkin-ranking-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hui-checkin-ranking-time {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

/* 前三名时间颜色 */
.hui-checkin-ranking-item.is-first .hui-checkin-ranking-time {
    color: #cc8800;
}

.hui-checkin-ranking-item.is-second .hui-checkin-ranking-time {
    color: #5a9fd4;
}

.hui-checkin-ranking-item.is-third .hui-checkin-ranking-time {
    color: #cc7a00;
}

.hui-checkin-ranking-days {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
    flex-shrink: 0;
}

/* ============================================================================
 * 签到心情 - 参考图样式
 * ============================================================================ */

.hui-checkin-mood-count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
    margin-left: 0.25rem;
}

.hui-checkin-mood-form {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border-secondary);
}

/* 未登录提示 */
.hui-checkin-mood-guest {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
    background: var(--color-fill-quaternary);
    border-radius: var(--xun-radius, 8px);
    text-align: center;
}

/* 已发表心情显示 */
.hui-checkin-mood-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-fill-quaternary);
    border-radius: var(--xun-radius, 8px);
}

.hui-checkin-mood-current i {
    color: var(--xun-primary, var(--color-primary));
}

.hui-checkin-mood-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hui-checkin-mood-input {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-fill-quaternary);
    border: 1px solid transparent;
    border-radius: var(--xun-radius, 8px);
    transition: all 0.15s var(--ease-smooth);
}

.hui-checkin-mood-input:focus {
    outline: none;
    border-color: var(--xun-primary, var(--color-primary));
    background: var(--color-bg-container);
}

.hui-checkin-mood-input::placeholder {
    color: var(--color-text-quaternary);
}

.hui-checkin-mood-submit {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    background: var(--xun-primary, var(--color-primary));
    border: none;
    border-radius: var(--xun-radius, 8px);
    cursor: pointer;
    transition: all 0.15s var(--ease-smooth);
    white-space: nowrap;
}

.hui-checkin-mood-submit:hover {
    background: var(--xun-primary-hover, var(--color-primary-hover));
}

.hui-checkin-mood-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hui-checkin-mood-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hui-checkin-mood-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.hui-checkin-mood-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.hui-checkin-mood-content {
    flex: 1;
    min-width: 0;
}

/* 气泡样式 */
.hui-checkin-mood-bubble {
    position: relative;
    padding: 0.75rem 1rem;
    background: var(--color-fill-secondary);
    border-radius: 0 var(--xun-radius-lg, 12px) var(--xun-radius-lg, 12px) var(--xun-radius-lg, 12px);
}

/* 气泡小三角 */
.hui-checkin-mood-bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent var(--color-fill-secondary) transparent transparent;
}

.hui-checkin-mood-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
    word-break: break-word;
}

.hui-checkin-mood-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.375rem;
}

.hui-checkin-mood-name {
    color: var(--color-text-secondary);
}

.hui-checkin-mood-dot {
    color: var(--color-text-quaternary);
}

.hui-checkin-mood-time {
    color: var(--color-text-tertiary);
}

/* ============================================================================
 * 空状态
 * ============================================================================ */

.hui-checkin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
}

.hui-checkin-empty p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

/* ============================================================================
 * 响应式适配
 * ============================================================================ */

/* 平板端 */
@media (max-width: 1024px) {
    .hui-checkin-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .hui-checkin-col--right {
        grid-column: span 2;
    }
    
    /* 日历不再强制正方形 */
    .hui-checkin-col--left .hui-checkin-card:first-child {
        aspect-ratio: auto;
    }
}

/* 移动端 */
@media (max-width: 768px) {
    .hui-checkin-page {
        padding-top: 4rem;
        gap: 1rem;
    }
    
    /* 头部区域重新布局 */
    .hui-checkin-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }
    
    .hui-checkin-user {
        flex: none;
    }
    
    .hui-checkin-avatar {
        width: 48px;
        height: 48px;
    }
    
    .hui-checkin-welcome {
        font-size: 0.9375rem;
    }
    
    .hui-checkin-user-meta {
        font-size: 0.75rem;
        gap: 0.75rem;
    }
    
    /* 今日奖励和签到按钮横向排列 */
    .hui-checkin-header > .hui-checkin-reward-section,
    .hui-checkin-header > .hui-checkin-action {
        flex: none;
    }
    
    .hui-checkin-reward-section {
        padding: 0.75rem 1rem;
        min-width: auto;
    }
    
    .hui-checkin-reward-left {
        gap: 0;
    }
    
    .hui-checkin-reward-title {
        font-size: 0.8125rem;
    }
    
    .hui-checkin-reward-date {
        font-size: 0.6875rem;
    }
    
    .hui-checkin-reward-right {
        font-size: 0.75rem;
    }
    
    .hui-checkin-btn {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
    }
    
    /* 未登录欢迎文字 */
    .hui-checkin-welcome--guest {
        font-size: 0.875rem;
    }
    
    /* 三栏变单栏 */
    .hui-checkin-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .hui-checkin-col--right {
        grid-column: span 1;
    }
    
    /* 日历卡片 */
    .hui-checkin-col--left .hui-checkin-card:first-child {
        aspect-ratio: auto;
    }
    
    .hui-checkin-card-header--calendar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.875rem 1rem;
    }
    
    .hui-checkin-calendar-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .hui-checkin-calendar {
        padding: 0 0.75rem;
    }
    
    .hui-checkin-calendar-header {
        gap: 0.25rem;
        margin-bottom: 0.375rem;
    }
    
    .hui-checkin-week-day {
        height: 28px;
        font-size: 0.75rem;
    }
    
    .hui-checkin-calendar-body {
        gap: 0.375rem;
    }
    
    .hui-checkin-day {
        border-radius: var(--xun-radius-sm, 6px);
    }
    
    .hui-checkin-day-num {
        font-size: 0.875rem;
    }
    
    .hui-checkin-day-label {
        font-size: 0.5rem;
    }
    
    .hui-checkin-day-reward {
        top: 2px;
        right: 2px;
        font-size: 0.625rem;
    }
    
    .hui-checkin-calendar-footer {
        padding: 0.75rem 1rem;
    }
    
    .hui-checkin-legend {
        gap: 1rem;
    }
    
    .hui-checkin-legend-item {
        font-size: 0.75rem;
        gap: 0.375rem;
    }
    
    .hui-checkin-legend-dot {
        width: 6px;
        height: 6px;
    }
    
    /* 累签宝箱 */
    .hui-checkin-streak-header {
        padding: 0.875rem 1rem;
    }
    
    .hui-checkin-streak-list {
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        gap: 0.5rem;
        padding: 0.5rem 1rem 1rem;
    }
    
    .hui-checkin-streak-item {
        padding: 0.75rem 0.375rem;
    }
    
    .hui-checkin-streak-icon {
        width: 32px;
        height: 32px;
        font-size: 1.25rem;
    }
    
    .hui-checkin-streak-days {
        font-size: 0.8125rem;
    }
    
    .hui-checkin-streak-reward {
        font-size: 0.6875rem;
    }
    
    /* 排行榜 */
    .hui-checkin-card-header {
        padding: 0.75rem 1rem;
    }
    
    .hui-checkin-card-title {
        font-size: 0.8125rem;
    }
    
    .hui-checkin-ranking-tabs {
        gap: 0.25rem;
    }
    
    .hui-checkin-tab {
        padding: 0.25rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .hui-checkin-ranking-stats {
        margin: 0.5rem 0.75rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .hui-checkin-ranking-content {
        padding: 0 0.5rem 0.5rem;
        max-height: 280px;
    }
    
    .hui-checkin-ranking-list {
        gap: 0.375rem;
    }
    
    .hui-checkin-ranking-item {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }
    
    .hui-checkin-ranking-rank {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .hui-checkin-ranking-avatar {
        width: 32px;
        height: 32px;
    }
    
    .hui-checkin-ranking-name {
        font-size: 0.8125rem;
    }
    
    .hui-checkin-ranking-time {
        font-size: 0.6875rem;
    }
    
    .hui-checkin-ranking-days {
        font-size: 0.8125rem;
    }
    
    /* 心情 */
    .hui-checkin-mood-count {
        font-size: 0.75rem;
    }
    
    .hui-checkin-mood-form {
        padding: 0.625rem 0.75rem;
    }
    
    .hui-checkin-mood-guest {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .hui-checkin-mood-current {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .hui-checkin-mood-input {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .hui-checkin-mood-submit {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .hui-checkin-mood-list {
        padding: 0.5rem;
        gap: 0.625rem;
        max-height: 280px;
    }
    
    .hui-checkin-mood-avatar {
        width: 36px;
        height: 36px;
    }
    
    .hui-checkin-mood-bubble {
        padding: 0.625rem 0.875rem;
    }
    
    .hui-checkin-mood-text {
        font-size: 0.875rem;
    }
    
    .hui-checkin-mood-meta {
        font-size: 0.6875rem;
        margin-top: 0.25rem;
    }
    
    /* 空状态 */
    .hui-checkin-empty {
        padding: 1.5rem 1rem;
    }
    
    .hui-checkin-empty p {
        font-size: 0.75rem;
    }
}

/* 超小屏幕 */
@media (max-width: 375px) {
    .hui-checkin-page {
        padding-top: 3.5rem;
    }
    
    .hui-checkin-header {
        padding: 0.875rem;
    }
    
    .hui-checkin-avatar {
        width: 44px;
        height: 44px;
    }
    
    .hui-checkin-welcome {
        font-size: 0.875rem;
    }
    
    .hui-checkin-streak-list {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hui-checkin-streak-item {
        padding: 0.625rem 0.25rem;
    }
    
    .hui-checkin-streak-icon {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }
    
    .hui-checkin-streak-days {
        font-size: 0.75rem;
    }
    
    .hui-checkin-streak-reward {
        font-size: 0.625rem;
    }
}