/*!
 * 初爱树洞 - 应用主样式（补充层）
 * 主题：初爱粉色系，温暖治愈
 * 完全本地化，无第三方 CDN 依赖
 *
 * 视图布局文件（Home/layouts/home.blade.php、User/layouts/app.blade.php）
 * 已内联核心样式（.sd-card / .sd-form / .sd-detail 等），
 * 本文件作为补充层，提供：
 *   1. 时间胶囊专属动画与样式
 *   2. 私信气泡细节修饰
 *   3. 通用工具类（隐藏、文本截断等）
 *   4. 移动端微调
 *   5. 打印样式预留
 */

/* ===== 时间胶囊专属样式 ===== */

/* 胶囊图标动画：缓慢呼吸 */
.sd-capsule-icon {
    animation: sd-capsule-pulse 2.4s ease-in-out infinite;
}
@keyframes sd-capsule-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.85; }
}

/* 胶囊开启瞬间的过渡动画 */
.sd-capsule-opened {
    animation: sd-capsule-open 0.6s ease-out;
}
@keyframes sd-capsule-open {
    0%   { transform: rotateY(0deg); opacity: 0.5; }
    100% { transform: rotateY(360deg); opacity: 1; }
}

/* 胶囊倒计时标签 */
.sd-capsule-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fff0f5 0%, #ffe0e8 100%);
    color: #ff6b8c;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* 胶囊已开启徽章 */
.sd-capsule-badge-opened {
    background: linear-gradient(135deg, #ff85a2 0%, #ff6b8c 100%);
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

/* 胶囊未开启时的占位文字 */
.sd-capsule-locked-text {
    color: #9a8088;
    font-style: italic;
    letter-spacing: 1px;
    user-select: none;
}


/* ===== 私信气泡细节修饰 ===== */

/* 气泡进入动画 */
.sd-msg-bubble {
    animation: sd-msg-in 0.25s ease-out;
}
@keyframes sd-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 自己的消息：右侧粉色 */
.sd-msg-bubble.mine {
    background: linear-gradient(135deg, #ff85a2 0%, #ff6b8c 100%);
    box-shadow: 0 2px 8px rgba(255, 107, 140, 0.2);
}

/* 对方的消息：左侧白色 */
.sd-msg-bubble.theirs {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* 私信未读小红点 */
.sd-msg-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ff5252;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    animation: sd-dot-blink 1.4s ease-in-out infinite;
}
@keyframes sd-dot-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}


/* ===== 用户中心补充样式 ===== */

/* 用户中心统计卡片悬浮效果增强 */
.sd-stat-card .sd-stat-icon {
    transition: transform 0.3s, background 0.3s;
}
.sd-stat-card:hover .sd-stat-icon {
    transform: scale(1.1) rotate(-5deg);
    background: linear-gradient(135deg, #fff0f5 0%, #ffe0e8 100%);
}

/* Token 显示框：等宽字体 + 防溢出 */
.sd-token-display {
    background: linear-gradient(135deg, #fff8fa 0%, #fff0f5 100%);
    border: 1px dashed #ff85a2;
    border-radius: 8px;
    padding: 14px;
    font-family: "Courier New", Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-all;
    color: #ff6b8c;
    margin: 12px 0;
    user-select: all;
    position: relative;
}
.sd-token-display::before {
    content: "\f084";  /* fa-key */
    font-family: FontAwesome;
    position: absolute;
    top: 8px;
    right: 12px;
    color: #ffc8d4;
    font-size: 16px;
}

/* Token 状态指示器 */
.sd-token-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.sd-token-status::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.sd-token-status.valid::before   { background: #2ecc71; }
.sd-token-status.expired::before { background: #e74c3c; }
.sd-token-status.revoked::before { background: #95a5a6; }


/* ===== 通用工具类 ===== */

/* 文本截断（单行） */
.sd-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文本截断（多行，默认 3 行） */
.sd-text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 隐藏元素（保留布局空间时用 .sd-invisible） */
.sd-hidden    { display: none !important; }
.sd-invisible { visibility: hidden; }

/* 清除浮动 */
.sd-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 文本对齐 */
.sd-text-center { text-align: center; }
.sd-text-right  { text-align: right; }
.sd-text-left   { text-align: left; }

/* 间距工具类 */
.sd-mt-8  { margin-top: 8px !important; }
.sd-mt-16 { margin-top: 16px !important; }
.sd-mb-8  { margin-bottom: 8px !important; }
.sd-mb-16 { margin-bottom: 16px !important; }
.sd-ml-8  { margin-left: 8px !important; }
.sd-mr-8  { margin-right: 8px !important; }


/* ===== 表单增强 ===== */

/* 必填字段标记 */
.sd-req {
    color: #ff6b8c;
    margin-left: 2px;
}

/* 选填字段标记 */
.sd-opt {
    color: #9a8088;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
}

/* 输入框聚焦时的过渡效果 */
.sd-input, .sd-textarea, .sd-select {
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-input:focus, .sd-textarea:focus, .sd-select:focus {
    border-color: #ff85a2;
    box-shadow: 0 0 0 3px rgba(255, 133, 162, 0.12);
}

/* 表单错误状态 */
.sd-input.sd-error, .sd-textarea.sd-error {
    border-color: #e74c3c;
    background: #fef5f5;
}
.sd-form-error {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}
.sd-form-error.show { display: block; }


/* ===== 加载状态 ===== */

/* 全屏加载遮罩 */
.sd-loading-mask {
    position: fixed;
    inset: 0;
    background: rgba(255, 248, 250, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.sd-loading-mask.show { display: flex; }
.sd-loading-mask .sd-spin {
    width: 32px;
    height: 32px;
    border-width: 3px;
}


/* ===== 移动端微调 ===== */

@media (max-width: 560px) {
    /* 胶囊图标在小屏幕下稍小 */
    .sd-capsule-icon { font-size: 18px; }

    /* 私信气泡在小屏幕下占据更多宽度 */
    .sd-msg-bubble { max-width: 85%; }

    /* Token 显示框字体更小 */
    .sd-token-display { font-size: 12px; padding: 10px; }

    /* 用户中心统计卡片间距收紧 */
    .sd-stats-grid { gap: 10px; }
    .sd-stat-card { padding: 14px 10px; }
    .sd-stat-card .sd-stat-value { font-size: 20px; }
}


/* ===== 打印样式 ===== */

@media print {
    .sd-header, .sd-footer, .sd-user-header, .sd-user-sidebar,
    .sd-btn, .sd-btn-primary, .sd-btn-ghost, .sd-load-more,
    .sd-action, .sd-search, .sd-nav-toggle {
        display: none !important;
    }
    .sd-main { padding-top: 0; }
    .sd-card, .sd-detail, .sd-reply-section {
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
    body { background: #fff; color: #000; }
}


/* ===== 可访问性 ===== */

/* 键盘焦点样式增强 */
.sd-btn:focus-visible,
.sd-action:focus-visible,
.sd-input:focus-visible,
.sd-textarea:focus-visible,
.sd-select:focus-visible {
    outline: 2px solid #ff85a2;
    outline-offset: 2px;
}

/* 屏幕阅读器专用（视觉隐藏但可读） */
.sd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ===== 动画偏好 ===== */

@media (prefers-reduced-motion: reduce) {
    .sd-capsule-icon,
    .sd-msg-bubble,
    .sd-msg-unread-dot,
    .sd-stat-card,
    .sd-stat-card .sd-stat-icon {
        animation: none !important;
        transition: none !important;
    }
}