/* ============================================================
   dog-letters.css - 📮 狗宝来信 / 旅行日记
   手写信纸 + 明信片风格；配色沿用项目暖色扁平体系
   ============================================================ */

/* ---------------- 通用 ---------------- */
.dl-wrap { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 10px; }

/* ---------------- 信纸 ---------------- */
.dl-paper {
    position: relative;
    width: 100%;
    background:
        repeating-linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0px,
            rgba(255, 255, 255, 0) 27px,
            rgba(160, 130, 100, 0.13) 27px,
            rgba(160, 130, 100, 0.13) 28px),
        linear-gradient(180deg, #fffdf7 0%, #fdf6e8 100%);
    border: 1px solid rgba(160, 130, 100, 0.28);
    border-radius: 12px;
    padding: 14px 16px 16px;
    box-shadow: 0 3px 10px rgba(107, 79, 63, 0.12), inset 0 0 40px rgba(210, 180, 140, 0.10);
    animation: dl-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    overflow: hidden;
}
@keyframes dl-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* 左上角一小块「胶带」 */
.dl-paper::before {
    content: '';
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
    width: 74px; height: 14px;
    background: rgba(255, 226, 160, 0.55);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(107, 79, 63, 0.10);
    pointer-events: none;
}

/* ---------------- 信头 ---------------- */
/* 信纸上的轻量小标记：分类 / 第几篇 / 连续故事进度 / 纪念 */
.dl-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin: 6px 0 8px;
}
.dl-tag {
    font-size: 0.72rem; line-height: 1.5;
    padding: 1px 8px; border-radius: 999px;
    color: #8a6a48; background: #fbf1e2;
    border: 1px solid #efe0c8;
    white-space: nowrap;
}
.dl-tag.num   { color: #9a7b52; background: transparent; border-style: dashed; }
.dl-tag.story { color: #7a5c9a; background: #f4eefb; border-color: #e4d8f2; }
.dl-tag.memo  { color: #b06a2c; background: #fdeee0; border-color: #f4dcc2; }

.dl-title {
    font-size: 1.06rem; font-weight: 700; color: #6b4a2f;
    letter-spacing: 0.02em; line-height: 1.35;
}
.dl-meta {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    font-size: 0.78rem; color: #a08a72;
}
.dl-meta span { white-space: nowrap; }
.dl-rule {
    height: 1px; margin: 9px 0 11px;
    background: linear-gradient(90deg, rgba(160,130,100,0.05), rgba(160,130,100,0.35), rgba(160,130,100,0.05));
}

/* ---------------- 正文 ---------------- */
.dl-body { display: flex; flex-direction: column; gap: 9px; }
.dl-body p {
    margin: 0;
    font-size: 0.94rem; line-height: 1.78; color: #53402f;
    text-align: justify;
    word-break: break-word;
}
/* 极短句的信（一句话）居中一点、留白多一点 */
.dl-body.dl-body--short p { text-align: center; color: #6b4a2f; padding: 6px 0; }

/* ---------------- 署名 + 爪印 ---------------- */
.dl-sign {
    display: flex; align-items: center; justify-content: flex-end; gap: 7px;
    margin-top: 14px; font-size: 0.86rem; color: #8a6f56;
}
.dl-paw { width: 20px; height: 20px; flex: 0 0 auto; opacity: 0.72; }
.dl-paw svg { display: block; width: 100%; height: 100%; }

/* ---------------- 奖励（与正文分离） ---------------- */
.dl-gift {
    display: flex; align-items: center; gap: 9px;
    margin-top: 12px; padding: 9px 12px;
    background: linear-gradient(180deg, #fff6e0, #ffeac4);
    border: 1px dashed rgba(206, 160, 90, 0.55);
    border-radius: 10px;
    font-size: 0.86rem; color: #8a6534;
    animation: dl-in 0.4s 0.12s both cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.dl-gift .ico { font-size: 1.1rem; }
.dl-gift b { color: #b8801f; }

/* ---------------- 底部动作 ---------------- */
.dl-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 2px; }
.dl-actions .gb-btn { min-width: 96px; }

/* ---------------- 旅行日记（收藏页） ---------------- */
.dl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dl-tab {
    padding: 4px 11px; border-radius: 999px; cursor: pointer;
    font-size: 0.8rem; color: #8a6f56;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(160, 130, 100, 0.28);
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.dl-tab:hover { background: #fff4dd; }
.dl-tab.on { background: #ffd98a; border-color: #e0ac4a; color: #6b4a2f; font-weight: 700; }

.dl-diary { display: flex; flex-direction: column; gap: 7px; max-height: 62vh; overflow-y: auto; padding-right: 3px; }
.dl-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; text-align: left;
    background: linear-gradient(180deg, #fffdf7, #fdf6e8);
    border: 1px solid rgba(160, 130, 100, 0.24);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
}
.dl-card:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(107, 79, 63, 0.13); border-color: rgba(206, 160, 90, 0.55); }
.dl-card .thumb {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    background: rgba(255, 233, 190, 0.75);
    border: 1px solid rgba(206, 160, 90, 0.32);
}
.dl-card .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-card .txt b {
    font-size: 0.88rem; color: #5b452f; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-card .txt small { font-size: 0.74rem; color: #a08a72; }
.dl-card .flag { flex: 0 0 auto; font-size: 0.9rem; }
.dl-card.unread { border-color: rgba(224, 140, 60, 0.55); background: linear-gradient(180deg, #fffaf0, #fff1d8); }
.dl-card.unread .txt b::after { content: ' NEW'; font-size: 0.62rem; color: #d9762b; vertical-align: super; }

.dl-empty { padding: 26px 12px; text-align: center; font-size: 0.88rem; color: #a08a72; line-height: 1.7; }
.dl-stat { margin-top: 10px; font-size: 0.76rem; color: #a08a72; text-align: center; line-height: 1.6; }

/* ---------------- 新信提醒（主界面 chip / 房间热点） ---------------- */
#btn-dogletter { position: relative; }
#btn-dogletter .dl-dot {
    position: absolute; top: -3px; right: -3px;
    width: 9px; height: 9px; border-radius: 50%;
    background: #e8563c; border: 1.5px solid #fff;
    animation: dl-pulse 1.8s ease-in-out infinite;
}
@keyframes dl-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: 0.72; } }

/* 房间桌子上的信（复用 .room-mail）的角标：
   平时显示 3 封藏信的进度（0/3），有未读狗宝来信时换成「新」。
   ★ 这里的信封**不拦截点击** —— 它仍然是「信件匣」总入口，
     里面同时放着 3 封藏信、最终信和狗宝来信（见 letters.js）。
     所以只做视觉提示，不改点击行为，否则就看不到那 3 封信了。 */
.room-mail .badge.dl-badge-new {
    background: #e8563c;
    color: #fff;
    animation: dl-pulse 1.8s ease-in-out infinite;
}

/* 已读标记 */
.dl-read-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.76rem; color: #7a9c72;
}

/* ---------------- 窄屏适配 ---------------- */
@media (max-width: 420px) {
    .dl-paper { padding: 12px 12px 14px; border-radius: 10px; }
    .dl-title { font-size: 1rem; }
    .dl-body p { font-size: 0.9rem; line-height: 1.72; }
    .dl-meta { font-size: 0.74rem; gap: 3px 8px; }
    .dl-diary { max-height: 56vh; }
    .dl-actions .gb-btn { min-width: 0; flex: 1 1 auto; }
}

/* 大屏居中一点 */
@media (min-width: 720px) {
    .dl-wrap { max-width: 520px; }
}