/* ==========================================================================
   css/components/faq.css
   Split from app.html (build 2026.10.08.9-beta), original lines 4090-4155.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* Q&A (FAQ) collapsible cards */
.qna-card { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--bg-surface); overflow: hidden; }
.qna-q { display: flex; align-items: center; gap: 11px; padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--text-primary); user-select: none; }
.qna-q:hover { background: var(--bg-hover); }
.qna-chev { flex-shrink: 0; transition: transform .18s ease; color: var(--text-muted); }
.qna-card.open .qna-chev { transform: rotate(90deg); }
.qna-q-text { flex: 1; min-width: 0; }
.qna-a { display: none; padding: 2px 16px 16px 41px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; word-break: break-word; }
.qna-card.open .qna-a { display: block; }
.qna-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity .15s ease; }
.qna-card:hover .qna-actions, .qna-card.open .qna-actions { opacity: 1; }
.qna-actions button { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; }
.qna-actions button:hover { color: var(--text-primary); background: var(--bg-elevated); }

/* Gallery app: masonry image wall */
.gal-grid { flex:1; overflow-y:auto; padding:16px; column-width:220px; column-gap:12px; }
.gal-grid.gal-drop { outline:2px dashed var(--accent); outline-offset:-8px; background:var(--accent-dim); }
.gal-item { break-inside:avoid; margin:0 0 12px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg-surface); }
.gal-item img { width:100%; display:block; cursor:zoom-in; }
.gal-cap { padding:8px 11px 4px; font-size:13px; color:var(--text-secondary); line-height:1.4; word-break:break-word; }
.gal-meta { display:flex; align-items:center; gap:6px; padding:7px 11px; font-size:11.5px; color:var(--text-muted); }
.gal-del { margin-left:auto; flex-shrink:0; width:22px; height:22px; border:none; border-radius:6px; background:color-mix(in srgb,var(--red,#ed4245) 15%,transparent); color:var(--red,#ed4245); cursor:pointer; font-size:16px; line-height:1; opacity:0; transition:opacity .15s; }
.gal-item:hover .gal-del { opacity:1; }
/* Channel settings modal */
.ch-settings-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 900; align-items: center; justify-content: center; }
.ch-settings-overlay.open { display: flex; animation: overlay-in 0.15s ease; }
.ch-settings-overlay.open .ch-settings-modal { animation: modal-pop 0.22s var(--ease-out, ease); }
.ch-settings-modal { background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); width: 520px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
.ch-settings-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ch-settings-head h2 { font-family: var(--font-display,'Space Grotesk',sans-serif); font-size: 17px; font-weight: 700; }
.ch-settings-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ch-settings-tabs::-webkit-scrollbar { display: none; }
.ch-settings-tab-btn { padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; background: none; border-top: none; border-left: none; border-right: none; white-space: nowrap; flex-shrink: 0; }
.ch-settings-tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.ch-settings-body { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.ch-settings-field { display: flex; flex-direction: column; gap: 6px; }
.ch-settings-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px; }
.ch-settings-input { background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text-primary); font-size: 14px; font-family: var(--font-body); }
.ch-settings-input:focus { outline: none; border-color: var(--accent); }
.perm-role-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.perm-role-name { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.perm-toggles { display: flex; gap: 8px; }
.perm-toggle { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--text-muted); cursor: pointer; }
.perm-toggle input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
/* Server settings modal */
.srv-settings-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 900; align-items: center; justify-content: center; }
.srv-settings-overlay.open { display: flex; animation: overlay-in 0.15s ease; }
.srv-settings-overlay.open .srv-settings-modal { animation: modal-pop 0.22s var(--ease-out, ease); }
.srv-settings-modal { background: var(--bg-deep, #13141c); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); width: 780px; max-width: 96vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.srv-settings-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.srv-settings-head h2 { font-family: var(--font-display,'Space Grotesk',sans-serif); font-size: 17px; font-weight: 700; }
.webhook-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.webhook-name { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; }
.webhook-url { font-size: 11px; color: var(--text-muted); flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webhook-del { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 12px; color: var(--red,#ef4444); cursor: pointer; }
.webhook-del:hover { background: rgba(239,68,68,0.1); }
/* Spoiler and code block */
.spoiler { background: var(--bg-active); color: transparent; border-radius: 3px; cursor: pointer; padding: 0 2px; user-select: none; transition: color 0.1s; }
.spoiler.revealed { color: var(--text-primary); background: var(--bg-hover); }
/* Code blocks stay a DARK editor in EVERY theme (github-dark ground), so the inlined
   github-dark syntax colours always have the dark background they're designed for. In
   light mode the block used to take the light --bg-void, leaving light-on-light,
   unreadable syntax ("cursed light mode"). Fixed dark ground fixes that everywhere. */
pre { background: #0d1117; border: none; border-radius: var(--radius-sm); margin: 4px 0; overflow-x: auto; }
pre > code.hljs { background: #0d1117 !important; padding: 12px 14px; font-size: 13px; border-radius: var(--radius-sm); font-family: 'JetBrains Mono', 'Fira Code', monospace; }
pre code { background: none; border: none; padding: 12px 14px; font-size: 13px; display: block; font-family: 'JetBrains Mono', 'Fira Code', monospace; }