/* 🐕 小狗的家 — notes.css */

    /* ========== 留言卡片 ========== */
    .note-card {
      padding: 15px;
      margin-bottom: 12px;
      border-radius: 12px;
    }
    .note-card-cheng {
      background: linear-gradient(135deg, #f4fff7 0%, #e8f8ec 100%);
      border-left: 4px solid #81c784;
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
    }
    .note-card-cheng:hover {
      transform: translateX(2px);
      box-shadow: var(--shadow-sm);
    }
    .note-card-cheng .note-from {
      color: #4caf50;
    }
    .note-card-koginu {
      background: linear-gradient(135deg, #fffaf3 0%, #fff0e0 100%);
      border-left: 4px solid var(--c-primary-light);
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
    }
    .note-card-koginu:hover {
      transform: translateX(2px);
      box-shadow: var(--shadow-sm);
    }
    .note-card-koginu .note-from {
      color: #e07b39;
    }
    .note-unread {
      border-left-width: 5px !important;
      box-shadow: 0 2px 8px rgba(211, 84, 0, 0.15);
    }
    .note-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .note-from {
      font-weight: bold;
      font-size: 14px;
    }
    .note-time {
      font-size: 11px;
      color: #999;
    }

    .image-upload-area { margin-top: 10px; }
    .image-preview { margin-top: 10px; }
    .image-preview img { max-width: 150px; max-height: 100px; border-radius: 8px; }
    .image-preview .remove-btn { margin-left: 8px; cursor: pointer; color: #f44336; font-size: 14px; }
    .note-image { margin-top: 10px; display: inline-block; margin-right: 8px; }
    .note-image img { max-width: 120px; max-height: 120px; border-radius: 8px; cursor: pointer; object-fit: cover; }
    .reply-image { margin-top: 8px; display: inline-block; }
    .reply-image img { max-width: 100px; max-height: 100px; border-radius: 6px; cursor: pointer; object-fit: cover; }

    .note-content {
      margin-top: 10px;
      line-height: 1.6;
      white-space: pre-wrap;
      font-size: 14px;
      word-break: break-word;
    }
    .note-actions {
      margin-top: 12px;
      display: flex;
      gap: 8px;
    }
    
    /* ========== 回复区域 ========== */
    .replies {
      margin-top: 12px;
      margin-left: 15px;
      border-left: 2px solid #ffe0c0;
      padding-left: 12px;
    }
    @media (min-width: 768px) {
      .replies {
        margin-left: 20px;
        padding-left: 15px;
      }
    }
    .reply-card {
      padding: 10px;
      margin-bottom: 8px;
      border-radius: 8px;
    }
    .reply-card-cheng {
      background: #f5fff7;
    }
    .reply-card-cheng .note-from {
      color: #4caf50;
    }
    .reply-card-koginu {
      background: #fffaf5;
    }
    .reply-card-koginu .note-from {
      color: #e07b39;
    }
    .reply-form {
      margin-top: 10px;
      display: none;
    }
    .reply-form.active {
      display: block;
    }
    .reply-form .textarea {
      min-height: 60px;
    }
    


    /* ========== 记忆宫殿上传 ========== */
    .palace-status {
      display: flex; gap: 12px; flex-wrap: wrap;
      margin-bottom: 15px; padding: 10px 14px;
      background: linear-gradient(135deg, #fff9f0, #fff3e0);
      border-radius: 10px; border: 1px solid #ffe0c0;
    }
    .palace-stat {
      font-size: 13px; color: #b8860b; font-weight: 500;
    }
    .upload-drop-zone {
      border: 2px dashed #ffe0c0; border-radius: 14px;
      padding: 35px 20px; text-align: center; cursor: pointer;
      transition: all 0.3s; background: white;
    }
    .upload-drop-zone:hover, .upload-drop-zone.dragover {
      border-color: #e07b39; background: #fff9f0; transform: scale(1.01);
    }
    .upload-drop-icon { font-size: 36px; margin-bottom: 8px; }
    .upload-drop-text { font-size: 15px; color: #666; margin-bottom: 4px; }
    .upload-drop-hint { font-size: 12px; color: #bbb; }
    .upload-progress { margin-top: 10px; }
    .upload-progress-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 12px; background: #fff9f0; border-radius: 8px;
      margin-bottom: 6px; font-size: 13px;
    }
    .upload-progress-item .filename { flex: 1; color: #555; word-break: break-all; }
    .upload-progress-item .filesize { color: #aaa; font-size: 12px; margin: 0 10px; }
    .upload-progress-item .status { font-size: 16px; }
    .uploaded-files-header {
      display: flex; justify-content: space-between; align-items: center;
      margin: 18px 0 10px; padding-bottom: 8px;
      border-bottom: 1px solid #ffe0c0; font-size: 14px; color: #b8860b; font-weight: 600;
    }
    .uploaded-file-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px; background: white; border-radius: 10px;
      margin-bottom: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
      font-size: 13px;
    }
    .uploaded-file-name { flex: 1; color: #444; word-break: break-all; }
    .uploaded-file-size { color: #aaa; font-size: 12px; margin: 0 12px; white-space: nowrap; }
    .uploaded-file-del { background: none; border: none; cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 6px; }
    .uploaded-file-del:hover { background: #ffe0e0; }
    .mine-status {
      margin-top: 12px; padding: 10px 14px; border-radius: 10px;
      background: #f0fff0; border: 1px solid #c8e6c9; font-size: 13px; color: #2e7d32;
    }
    .mine-status.mining {
      background: #fff8e1; border-color: #ffe082; color: #f57f17;
    }