/* ============================================================
   style.css - 公共样式
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

.wall {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
}

/* ---------- 便利贴 wrap ---------- */
.note-wrap {
    position: absolute;
    animation: noteFadeIn .35s ease both;
    will-change: transform; 
}

/* ---------- 方形便利贴 ---------- */
.note {
    position: relative;
    width: 200px;
    min-height: 170px;
    padding: 18px 16px 34px;
    box-shadow: 3px 5px 15px rgba(0,0,0,.18);
    border-radius: 2px;
    font-size: .88rem;
    line-height: 1.5;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: box-shadow .2s;
    background-image: linear-gradient(180deg, rgba(255,255,255,.5) 0%, transparent 30%);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    overflow: hidden;
}
.note:active { cursor: grabbing; }
.note::before {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 60px; height: 20px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.note:hover { box-shadow: 5px 8px 25px rgba(0,0,0,.3); }

.note .note-content {
    position: relative;
    z-index: 1;
    max-height: 108px;
    overflow: hidden;
    word-break: break-word;
}

.note .meta {
    position: absolute;
    right: 10px; bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    font-size: .62rem;
    color: #888;
    pointer-events: none;
    z-index: 2;
    line-height: 1.3;
}
.note .author {
    font-weight: 600;
    color: rgba(0,0,0,.55);
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note .time { font-size: .56rem; color: rgba(0,0,0,.4); }

/* ---------- 爱心形状 ---------- */
.note.note-heart {
    width: 220px;
    min-height: 220px;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    background: transparent !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88 C20 65 5 45 5 30 C5 15 18 5 30 5 C40 5 47 12 50 20 C53 12 60 5 70 5 C82 5 95 15 95 30 C95 45 80 65 50 88 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 88 C20 65 5 45 5 30 C5 15 18 5 30 5 C40 5 47 12 50 20 C53 12 60 5 70 5 C82 5 95 15 95 30 C95 45 80 65 50 88 Z' fill='black'/></svg>");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    background-color: var(--note-bg, #F8BBD0) !important;
    padding: 42px 22px 58px 22px;
    filter: drop-shadow(3px 5px 12px rgba(0,0,0,.22));
    overflow: hidden;
}
.note.note-heart::before { display: none; }
.note.note-heart:hover {
    filter: drop-shadow(5px 8px 22px rgba(0,0,0,.35));
    box-shadow: none;
}
.note.note-heart .note-content {
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    max-height: 88px;
    overflow: hidden;
    word-break: break-word;
}
.note.note-heart .meta {
    right: 50%;
    transform: translateX(50%);
    bottom: 80px;
    align-items: center;
    text-align: center;
    font-size: .56rem;
}
.note.note-heart .author { max-width: 150px; font-size: .56rem; }
.note.note-heart .time   { font-size: .5rem; }

/* ---------- 删除键 ---------- */
.note-wrap .delete-btn {
    position: absolute;
    top: -6px; right: -6px;
    font-size: 14px; font-weight: bold;
    color: #fff; text-decoration: none;
    background: #e74c3c;
    width: 22px; height: 22px;
    line-height: 22px; text-align: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
    transition: .2s;
    z-index: 50;
    cursor: pointer;
    touch-action: manipulation;
}
.note-wrap .delete-btn:hover,
.note-wrap .delete-btn:active {
    background: #c0392b;
    transform: scale(1.15);
}
.note-wrap-heart .delete-btn { top: 6px; right: 6px; }

/* ---------- 空状态 ---------- */
.empty-tip {
    position: absolute;
    top: 45%; left: 50%;
    transform: translate(-50%, -50%);
    color: #ccc; font-size: 1rem;
}
.empty-tip-inline {
    color: #ccc;
    text-align: center;
    padding-top: 120px;
    font-size: 1.1rem;
}

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    top: 70px; left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(0,0,0,.78);
    color: #fff;
    padding: 10px 22px;
    border-radius: 22px;
    font-size: .9rem;
    z-index: 10000;
    opacity: 0;
    transition: opacity .3s, transform .3s;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: rgba(46,160,67,.92); }
.toast.error   { background: rgba(215,60,60,.92); }

/* ---------- 淡入动画 ---------- */
@keyframes noteFadeIn {
    from { opacity: 0; transform: scale(.85) rotate(var(--rot, 0deg)); }
    to   { opacity: 1; transform: scale(1)   rotate(var(--rot, 0deg)); }
}

/* ---------- 删除动画（整张 wrap 一起消失，含红叉） ---------- */
.note-wrap.removing {
    animation: noteFadeOut .3s ease forwards;
    pointer-events: none;
}
.note-wrap.removing .delete-btn {
    opacity: 0;
    transition: opacity .15s;
}
@keyframes noteFadeOut {
    from { opacity: 1; transform: scale(1)   rotate(var(--rot, 0deg)); }
    to   { opacity: 0; transform: scale(.6)  rotate(var(--rot, 0deg)); }
}

/* ---------- 新贴高亮 ---------- */
.note-wrap.new-note {
    animation: noteFadeIn .35s ease both, newHighlight 1.2s ease .35s;
}
@keyframes newHighlight {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(118,75,162,0)); }
    30%      { filter: drop-shadow(0 0 14px rgba(118,75,162,.85)); }
}

/* ---------- 手机端 ---------- */
@media (max-width: 600px) {
    .note {
        width: 140px; min-height: 120px;
        font-size: .72rem;
        padding: 14px 12px 28px;
        line-height: 1.4;
    }
    .note .note-content { max-height: 76px; }
    .note .meta { font-size: .52rem; right: 6px; bottom: 5px; }
    .note .author { font-size: .52rem; max-width: 110px; }
    .note .time   { font-size: .46rem; }

    .note.note-heart {
        width: 150px; min-height: 150px;
        padding: 30px 16px 42px 16px;
    }
    .note.note-heart .note-content { font-size: 9px; line-height: 1.35; max-height: 62px; }
    .note.note-heart .meta { bottom: 50px; font-size: .5rem; }
    .note.note-heart .author { font-size: .5rem; max-width: 100px; }
    .note.note-heart .time   { font-size: .44rem; }

    .note-wrap .delete-btn {
        width: 20px; height: 20px; line-height: 20px;
        font-size: 13px; top: -5px; right: -5px;
    }
    .note-wrap-heart .delete-btn { top: 5px; right: 5px; }
}