/* ------------------------------------------------------------------ */
/* Channels — joined/discover lists, the join screen, the post feed,    */
/* the admin composer, and emoji reactions.                             */
/* Kept in its own file (loaded after styles.css) so this feature can   */
/* keep growing without the main stylesheet getting any bigger.         */
/* ------------------------------------------------------------------ */

.thread-list-section-label { color: #a3aabb; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 14px 14px 6px; text-transform: uppercase; }
.thread-list-section-label:first-child { padding-top: 4px; }
.channel-admin-tag { background: #eee9ff; border-radius: 6px; color: #6a5cf0; font-size: 8px; font-weight: 800; margin-left: 5px; padding: 2px 6px; vertical-align: middle; }
.channel-join-pill { background: linear-gradient(135deg, #6a5cf0, #4d4bc7); border-radius: 999px; color: #fff; flex: 0 0 auto; font-size: 9px; font-weight: 800; padding: 6px 13px; }
.channel-photo-fallback { align-items: center; background: linear-gradient(135deg, #8b5cf6, #6a5cf0); color: #fff; display: flex; justify-content: center; }
.channel-photo-fallback svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 15px; }

body[data-theme="dark"] .thread-list-section-label { color: #6b7290; }
body[data-theme="dark"] .channel-admin-tag { background: rgba(120,104,233,.18); color: #b9adff; }

/* ---- Join screen ---------------------------------------------------- */
.channel-join-screen { align-items: center; display: flex; flex: 1; flex-direction: column; gap: 6px; justify-content: center; padding: 30px 26px; text-align: center; }
.channel-join-screen-icon { align-items: center; background: linear-gradient(135deg, #8b5cf6, #6a5cf0); border-radius: 20px; box-shadow: 0 12px 28px rgba(107,92,240,.28); color: #fff; display: flex; height: 62px; justify-content: center; margin-bottom: 10px; width: 62px; }
.channel-join-screen-icon svg { fill: none; height: 27px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 27px; }
.channel-join-screen h2 { font-size: 17px; margin: 0; }
.channel-join-screen p { color: #7d859a; font-size: 11px; line-height: 1.6; margin: 0; max-width: 300px; }
.channel-join-screen-meta { color: #a3aabb !important; font-size: 9.5px !important; font-weight: 700; }
.channel-join-screen button { margin-top: 14px; max-width: 220px; width: 100%; }
body[data-theme="dark"] .channel-join-screen p { color: #a8afc2; }

/* ---- Feed ------------------------------------------------------------ */
.channel-feed { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.channel-post { animation: bubble-in .18s ease; background: #fff; border: 1px solid #eff0f4; border-radius: 16px; box-shadow: 0 2px 8px rgba(28,35,61,.05); padding: 14px; }
.channel-post-head { align-items: center; display: flex; gap: 9px; margin-bottom: 10px; }
.channel-post-head .thread-item-body strong { font-size: 10.5px; }
.channel-post-head .thread-item-body small { font-size: 9px; }
.channel-post-text { color: #333a4c; font-size: 12px; line-height: 1.6; margin: 0 0 8px; white-space: pre-wrap; }
.channel-post-image { border-radius: 12px; display: block; margin-bottom: 8px; max-height: 340px; object-fit: cover; width: 100%; }
body[data-theme="dark"] .channel-post { background: #171c30; border-color: rgba(255,255,255,.07); }
body[data-theme="dark"] .channel-post-text { color: #e7e9f3; }

.channel-readonly-note { border-top: 1px solid #eff0f4; color: #a3aabb; font-size: 9.5px; line-height: 1.6; padding: 12px 16px; text-align: center; }
body[data-theme="dark"] .channel-readonly-note { border-color: rgba(255,255,255,.07); color: #6b7290; }

/* ---- Reactions --------------------------------------------------------- */
.channel-reaction-row { display: flex; flex-wrap: wrap; gap: 6px; }
.channel-reaction-chip { align-items: center; background: #f6f7fb; border: 1.5px solid #eceefa; border-radius: 999px; display: flex; font-size: 13px; gap: 4px; padding: 5px 10px; transition: transform .12s, background .12s, border-color .12s; }
.channel-reaction-chip:hover { transform: translateY(-1px); }
.channel-reaction-chip span { color: #6a7284; font-size: 9.5px; font-weight: 800; }
.channel-reaction-chip.is-mine { background: #eee9ff; border-color: #cabdff; }
.channel-reaction-chip.is-mine span { color: #6a5cf0; }
body[data-theme="dark"] .channel-reaction-chip { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); }
body[data-theme="dark"] .channel-reaction-chip.is-mine { background: rgba(120,104,233,.22); border-color: rgba(120,104,233,.5); }

/* ---- Admin composer ---------------------------------------------------- */
.channel-compose { flex-wrap: wrap; }
.channel-image-preview { align-items: center; border-top: 1px solid #eff0f4; display: flex; gap: 10px; padding: 10px 14px; }
.channel-image-preview.is-hidden { display: none; }
.channel-image-preview img { border-radius: 10px; height: 46px; object-fit: cover; width: 46px; }
.channel-image-preview button { align-items: center; background: #f2f3f7; border-radius: 50%; color: #6a7284; display: flex; font-size: 16px; height: 26px; justify-content: center; width: 26px; }
body[data-theme="dark"] .channel-image-preview { border-color: rgba(255,255,255,.07); }