/* ------------------------------------------------------------- */
/* Interaction Board 2.0 Styles (Light Mode - Threads Style) */
/* ------------------------------------------------------------- */
:root { --bg-body: #ffffff; --bg-card: #ffffff; --text-primary: #000000; --text-secondary: #555555; --accent-color: #000000; --border-color: #d8d8d8; --line-color: #c0c0c0; --hover-bg: #f5f5f5; --toast-bg: #333; --danger-color: #d32f2f; --success-color: #00bf3c; --input-bg: #ffffff; }
body { background-color: var(--bg-body); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.navbar-light .navbar-nav .nav-link { color: #000000; font-weight: 500; }
.section-top { height: 70px; }
/* Main Layout */
.thread-container { max-width: 640px; margin: 20px auto; padding-bottom: 80px; border: 1px solid var(--border-color); border-radius: 24px; min-height: calc(100vh - 120px); overflow: hidden; background-color: var(--bg-card); box-shadow: 0 4px 12px rgba(0,0,0,0.02); }
.post-card { background-color: var(--bg-card); border-bottom: 1px solid var(--border-color); padding: 16px 20px; position: relative; transition: background-color 0.1s; }
.post-card:hover { cursor: pointer; background-color: #fafafa; }
.post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.user-info { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: #000; }
.verified-icon { color: #1da1f2; font-size: 0.8rem; }
.post-time { color: var(--text-secondary); font-size: 0.85rem; font-weight: 400; }
.post-content { color: var(--text-primary); margin-bottom: 8px; font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; margin-left: 0; font-weight: 400; }
/* Post Actions */
.post-actions { display: flex; gap: 16px; margin-top: 12px; margin-left: -8px; }
.action-btn { background: none; border: none; color: #333; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer; }
.action-btn:hover { background-color: rgba(0,0,0,0.05); color: #000; }
.action-btn i { font-size: 1.25rem; stroke-width: 2px; }
.action-btn.active { color: var(--danger-color); }
.action-btn.bookmarked { color: var(--text-primary); }
.like-count { font-size: 0.8rem; color: var(--text-secondary); margin-left: 4px; min-width: 16px; }
/* Creating a Post */
.new-post-wrapper { background-color: var(--bg-card); border-bottom: 1px solid var(--border-color); padding: 20px; margin-bottom: 0; border-radius: 0; }
.user-avatar-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.post-input-area { width: 100%; display: flex; gap: 16px; }
.input-col { flex: 1; }
.role-select { background-color: #f5f5f5; color: #000; border: none; border-radius: 12px; font-size: 0.85rem; padding: 6px 12px; margin-bottom: 12px; cursor: pointer; font-weight: 600; outline: none; }
.role-select:disabled { background-color: #fff; color: #999; }
.post-textarea { width: 100%; background: transparent; border: none; color: var(--text-primary); resize: none; min-height: 48px; outline: none; font-size: 1rem; }
.post-textarea::placeholder { color: #999; }
.post-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.post-btn { background-color: #000; color: #fff; border: none; font-weight: 600; padding: 8px 20px; border-radius: 20px; font-size: 0.9rem; opacity: 0.3; pointer-events: none; transition: opacity 0.2s; }
.post-btn.active { opacity: 1; pointer-events: auto; cursor: pointer; }
.media-trigger-btn { color: var(--text-secondary); background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 4px; display: none; }
.media-trigger-btn:hover { color: var(--text-primary); }
/* Recursive Thread Styles */
.thread-item { position: relative; }
.thread-line { position: absolute; left: 20px; top: 56px; bottom: 0; width: 2px; background-color: var(--line-color); display: none; }
.has-reply > .thread-line { display: block; }
.thread-reply { padding-left: 0; }
.reply-connector { position: absolute; left: 20px; top: -10px; bottom: 0; width: 2px; background-color: var(--line-color); border-bottom-left-radius: 8px; z-index: 1; }
/* Roles Colors - Refined for Light Mode */
.role-label { font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; margin-left: 8px; font-weight: 600; vertical-align: middle; letter-spacing: 0.5px; }
.role-1 { background-color: #f0f0f0; color: #333; } /* 一般 */
.role-2 { background-color: #fff1f2; color: #e0245e; } /* 英雄候補 - Gentle Red */
.role-3 { background-color: #fff9db; color: #b58900; } /* 委託者 - Gentle Gold */
.role-4 { background-color: #e8f5fe; color: #1da1f2; } /* 築台者 - Gentle Blue */
.role-5 { background-color: #f3e5f5; color: #9c27b0; } /* 會長 - Gentle Purple */
.role-6 { background-color: #000; color: #fff; } /* 反對者 - Stark Black */
/* Media Grid */
.media-grid { display: grid; gap: 4px; margin-top: 12px; border-radius: 12px; overflow: hidden; max-width: 100%; border: 1px solid rgba(0,0,0,0.1); }
.media-grid.grid-1 { grid-template-columns: 1fr; }
.media-grid.grid-2 { grid-template-columns: 1fr 1fr; }
.media-grid.grid-3 { grid-template-columns: 1fr 1fr; }
.media-grid.grid-3 img:first-child { grid-row: span 2; }
.media-grid.grid-4 { grid-template-columns: 1fr 1fr; } /* 2x2 Grid */
.media-item { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; cursor: zoom-in; max-height: 500px; display: block; }
.video-wrapper { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.video-player { width: 100%; height: 100%; object-fit: contain; }
.play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.9); font-size: 3rem; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
/* Fullscreen Media Modal */
.media-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.95); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(5px); }
.media-modal.show { opacity: 1; pointer-events: auto; }
.modal-content-media { max-width: 95%; max-height: 95%; object-fit: contain; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border-radius: 8px; }
.modal-close { position: absolute; top: 20px; right: 20px; color: #000; background: none; border: none; font-size: 2.5rem; cursor: pointer; z-index: 10000; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255,255,255,0.8); }
.modal-close:hover { background-color: #fff; }
.modal-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.8); border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; z-index: 10000; }
.modal-nav:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.modal-prev { left: 20px; }
.modal-next { right: 20px; }
.avatar-md { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.nested-wrapper { margin-left: 20px; border-left: 2px solid var(--line-color); padding-left: 0; margin-top: 0; }
.parent-line { position: absolute; width: 2px; background-color: var(--line-color); top: 30px; left: 20px; bottom: -20px; }
.reply-btn-sm { font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; margin-top: 4px; display: inline-block; font-weight: 500; }
.reply-btn-sm:hover { color: var(--text-primary); }
/* Custom Icons substitutions for simple exquisiteness */
.fa-heart, .fa-thumbs-down, .fa-comment, .fa-bookmark, .fa-paper-plane { font-weight: 300; } 
/* Avatar Selector */
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; max-height: 150px; overflow-y: auto; padding: 4px; }
.avatar-option { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: 0.2s; }
.avatar-option:hover { transform: scale(1.1); }
.avatar-option.selected { border-color: #000; transform: scale(1.1); }
/* Reply Input Box */
.reply-input-box { background-color: #fafafa; border-radius: 12px; padding: 12px 16px; margin: 8px 20px 0 44px; border: 1px solid var(--border-color); }
.reply-textarea { width: 100%; background: #fff; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); resize: none; min-height: 60px; outline: none; font-size: 0.9rem; padding: 10px; }
.reply-textarea:focus { border-color: #000; }
/* Dislike Count */
.dislike-count { font-size: 0.8rem; color: var(--text-secondary); margin-left: 4px; min-width: 16px; }