/* ===== 核心風格 ===== */
:root {
    --bg: linear-gradient(135deg,#0ea5e9 0%,#8b5cf6 50%,#ec4899 100%);
    --card-bg: rgba(255,255,255,0.85);
    --card-border: rgba(255,255,255,0.35);
    --fg: #0f172a; --fg-soft: #334155; --accent: #7c3aed;
    --accent-2: #0ea5e9; --accent-3: #ec4899; --muted: #64748b;
    --btn-fg: #ffffff; --radius-xl: 20px; --radius-2xl: 28px;
    --shadow-1: 0 10px 25px rgba(15,23,42,0.15);
    --shadow-2: 0 20px 45px rgba(15,23,42,0.18);
    --sans: "Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root {
    --card-bg: rgba(13,18,30,0.72); --card-border: rgba(255,255,255,0.08);
    --fg: #e5e7eb; --fg-soft: #cbd5e1; --muted: #94a3b8;
    }
}
html, body { min-height: 100%; }
body {
    margin: 0; font-family: var(--sans); color: var(--fg);
    background: var(--bg) fixed; padding: clamp(16px, 3vw, 32px);
}
.app {
    width: 100%; max-width: 1200px; background: var(--card-bg);
    backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid var(--card-border); border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2); overflow: hidden; margin: 0 auto;
}
.app__header { position: relative; padding: clamp(20px, 4vw, 36px); border-bottom: 1px solid var(--card-border); }
.badge {
    display: inline-block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 999px; color: var(--btn-fg);
    background: linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 50%,var(--accent-3) 100%);
    box-shadow: var(--shadow-1);
}
h1 { margin: 12px 0 6px; font-size: clamp(22px, 3.2vw, 32px); font-weight: 800; }
.subtitle { margin: 0; color: var(--muted); font-size: clamp(14px, 1.8vw, 16px); }
.app__body { padding: 22px clamp(20px, 4vw, 36px); }

/* ===== 公告欄與便利貼風格 ===== */
.bulletin-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    min-height: 50vh;
}
.note {
    position: relative;
    background-color: #ffff88;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    color: #333;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: grab;
    height: 350px;
    display: flex;
    flex-direction: column;
}
.note:active { cursor: grabbing; }
.note.sortable-ghost { opacity: 0.4; background: var(--accent); }
.note:hover { transform: scale(1.03); box-shadow: 10px 10px 20px rgba(0,0,0,0.25); }

.note-footer {
    margin-top: 15px; font-size: 13px; color: #777;
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0; /*確保 footer 不會被壓縮*/
}
.note-author { display: flex; align-items: center; }

/* --- 右下角控制按鈕區塊 --- */
.note-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.note-controls button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 16px;
    transition: color 0.2s, transform 0.2s;
    padding: 2px;
}
.note-controls button:hover {
    color: var(--accent);
    transform: scale(1.1);
}
.note-controls .like-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}
.note-controls .like-btn i.liked {
    color: var(--accent-2);
    font-weight: 900;
}
.note-controls .delete-btn:hover {
    color: var(--accent-3);
}

.add-note-section {
    padding: 20px; margin-bottom: 30px; background: rgba(255,255,255,0.2);
    border-radius: var(--radius-xl); border: 1px solid var(--card-border);
}
textarea {
    width: 100%; height: 100px; padding: 10px; border-radius: 10px;
    border: 1px solid var(--card-border); font-family: var(--sans); font-size: 16px;
    box-sizing: border-box; margin-bottom: 10px; resize: vertical;
}

.btn {
    appearance: none; border: 0; padding: 14px 18px; font-weight: 800;
    font-size: 16px; border-radius: 14px; color: var(--btn-fg); cursor: pointer;
    box-shadow: var(--shadow-1); text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%); }
.btn--danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.btn--warning { background: linear-gradient(135deg, #f97316 0%, #f59e0b 100%); }
.btn--info { background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%); }

/* ===== 顏色選擇與 Modal 風格 ===== */
.color-palette { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; align-items: center; }
.color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color 0.2s; }
.color-swatch.selected { border-color: var(--accent); }
.custom-color-picker { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--muted); cursor: pointer; }
.custom-color-picker input[type="color"] { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; place-items: center; z-index: 1000; }
.modal-content { width: min(500px, 90vw); padding: 30px; background: var(--card-bg); border-radius: var(--radius-xl); }
.modal-content h3 { margin-top: 0; }

/* ===== 頁首按鈕區塊 ===== */
.header-actions { position: absolute; top: clamp(15px, 3vw, 20px); right: clamp(15px, 4vw, 36px); display: flex; gap: 10px; align-items: center; }
.header-actions .btn { padding: 8px 12px; font-size: 14px; font-weight: 600; }
.header-actions .header-link { color: var(--fg); text-decoration: none; font-weight: 600; margin-left: 15px; }
.status-badge { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; display: flex; align-items: center; gap: 6px; }
.status-badge--anon { background-color: #10b981; color: #fff; }
.status-badge--locked { background-color: var(--muted); color: var(--btn-fg); }
.status-badge--admin { background-color: var(--accent); color: var(--btn-fg); }
.status-badge--rating { background-color: #3b82f6; color: #fff; }

/* ===== 資訊圖示與彈出視窗風格 ===== */
.info-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 5px; font-size: 14px; opacity: 0.6; transition: opacity 0.2s; }
.info-btn:hover { opacity: 1; color: var(--accent); }
.info-popover { position: absolute; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow-2); padding: 15px; z-index: 1010; width: max-content; max-width: 350px; font-size: 14px; line-height: 1.6; color: var(--fg); }
.info-popover strong { color: var(--accent); }
.info-popover pre { white-space: pre-wrap; word-wrap: break-word; background-color: rgba(0,0,0,0.05); padding: 8px; border-radius: 8px; margin-top: 5px; font-family: monospace; }

/* [新增] 複製按鈕的樣式 */
.copy-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0 5px;
    font-size: 14px;
    opacity: 0.6;
    transition: all 0.2s;
    vertical-align: middle; /* 確保與文字垂直對齊 */
}
.copy-btn:hover {
    opacity: 1;
    color: var(--accent);
}
/* 複製成功時的圖示顏色 */
.copy-btn i.bi-clipboard-check-fill {
    color: #10b981;
}


/* ===== 內容截斷與編號顯示 ===== */
.note-number {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: rgba(220, 38, 38, 0.7);
    padding: 2px 8px;
    border-radius: 4px;
    display: none;
    z-index: 5;
    pointer-events: none;
}
.bulletin-board.show-numbers .note-number {
    display: block;
}

/* ===== 動畫效果 ===== */
@keyframes fadeOutShrink {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.8); }
}
.note.deleting {
    animation: fadeOutShrink 0.4s ease-out forwards;
}

/* ===== RWD 手機版響應式設計 ===== */
@media (max-width: 820px) {
    .app__header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .header-actions {
        position: static;
        order: 2;
        flex-wrap: wrap; 
        justify-content: flex-start;
        width: 100%; 
        margin-top: 20px;
    }
    .header-title-group {
        order: 1;
    }
    h1 {
       font-size: 20px;
    }
}


/* ===== 附件上傳與顯示樣式 ===== */
.image-upload-wrapper {
    margin: 15px 0;
}
.image-upload-wrapper .btn {
    padding: 8px 12px;
    font-size: 14px;
}
.image-preview {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.attachment-preview-item .remove-img-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--accent-3);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.note-image {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 6px;
    z-index: 2;
}


/* ===== 便利貼內部滾動樣式 ===== */
.note-content {
    flex-grow: 1; /* 讓內容區塊自動填滿剩餘空間 */
    overflow-y: auto; /* 讓內容區塊在垂直方向溢出時，自動顯示捲軸 */
    white-space: pre-wrap; 
    word-wrap: break-word;
    min-height: 0; /* 解決 flexbox 中滾動失效的問題 */
    padding-right: 10px; /* 為捲軸預留一點空間，避免文字被遮擋 */
}

.attachments-container {
    overflow-y: auto; /* 如果附件太多，讓附件區塊可以滾動 */
    max-height: 150px; /* 限制附件區塊的最大高度 */
    flex-shrink: 0; /* 防止附件區塊被過度壓縮 */
}