/* Create channel / create category / channel permissions dialogs, and the channel-list context menu. */

.nx-dialog:has(.nx-cp-form), .nx-dialog:has(.nx-cp-perms) { background: var(--nx-bg, #15131b); border:1px solid #ffffff10; border-radius:12px; }
.nx-dialog:has(.nx-cp-form) .nx-dialog-header, .nx-dialog:has(.nx-cp-perms) .nx-dialog-header { background: var(--nx-bg, #15131b); border-bottom:0; padding-bottom:4px; }
.nx-dialog:has(.nx-cp-form) h2, .nx-dialog:has(.nx-cp-perms) h2 { font-size:20px; font-weight:700; color: var(--nx-text, #f2eff7); }
.nx-dialog:has(.nx-cp-perms) { width:min(760px, calc(100% - 24px)); }

.nx-cp-form, .nx-cp-perms { display:flex; flex-direction:column; gap:16px; font-size:15px; color:var(--nx-text); }
.nx-cp-sub { margin:-14px 0 4px; font-size:13px; color: var(--nx-muted, #8e879b); }
.nx-cp-form h3, .nx-cp-list h3 { margin:0; font-size:16px; color: var(--nx-text, #f2eff7); display:flex; align-items:center; justify-content:space-between; }

/* channel type cards */
.nx-cp-types { border:0; padding:0; margin:0; display:grid; gap:8px; }
.nx-cp-types legend, .nx-cp-label { font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--nx-soft); margin-bottom:8px; }
.nx-cp-type { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:8px; background: var(--nx-raised, #1e1b26); cursor:pointer; transition:background .15s; }
.nx-cp-type:hover { background:var(--nx-raised); }
.nx-cp-type:has(input:checked) { background:var(--nx-raised); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nx-accent) 66.67%,transparent); }
.nx-cp-type input { accent-color: var(--nx-accent, #9d68e4); width:18px; height:18px; margin:0; }
.nx-cp-type .nx-icon { width:24px; height:24px; color: var(--nx-soft, #c9c3d4); flex:none; }
.nx-cp-type strong, .nx-cp-private strong, .nx-cp-row strong { display:block; font-size:15px; font-weight:600; color: var(--nx-text, #f2eff7); }
.nx-cp-type small, .nx-cp-private small, .nx-cp-row small { display:block; font-size:13px; color: var(--nx-muted, #8e879b); margin-top:2px; line-height:1.35; }

.nx-cp-label { display:flex; flex-direction:column; gap:8px; }
.nx-cp-label input, .nx-cp-name { width:100%; box-sizing:border-box; height:42px; border:0; border-radius:8px; background:var(--nx-rail); color: var(--nx-text, #f2eff7); font:inherit; font-size:16px; text-transform:none; letter-spacing:0; padding:0 12px; outline:none; }
.nx-cp-name { display:flex; align-items:center; gap:6px; padding:0 10px; }
.nx-cp-label .nx-cp-name input { flex:1; min-width:0; height:100%; padding:0; background:none; box-shadow:none; }
.nx-cp-name .nx-icon { width:18px; height:18px; color: var(--nx-muted, #8e879b); display:block; }
.nx-cp-label input:focus, .nx-cp-name:focus-within { box-shadow: 0 0 0 2px var(--nx-accent, #9d68e4); }

/* private row + switch */
.nx-cp-private { display:flex; align-items:center; gap:12px; padding:4px 0; }
.nx-cp-private > .nx-icon { width:20px; height:20px; color: var(--nx-soft, #c9c3d4); flex:none; }
.nx-cp-private > span { flex:1; }
.nx-cp-switch { position:relative; flex:none; width:42px; height:24px; cursor:pointer; }
.nx-cp-switch input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.nx-cp-switch span { position:absolute; inset:0; border-radius:12px; background:var(--nx-accent); transition:background .18s; }
.nx-cp-switch span::after { content: ''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s ease; box-shadow:0 1px 3px #0005; }
.nx-cp-switch input:checked + span { background: var(--nx-accent, #9d68e4); }
.nx-cp-switch input:checked + span::after { transform:translateX(18px); }
.nx-cp-switch input:focus-visible + span { outline: 2px solid var(--nx-accent-light, #d7b6ff); outline-offset:2px; }

/* role picker */
.nx-cp-search { height:38px; border:0; border-radius:8px; background:var(--nx-rail); color: var(--nx-text, #f2eff7); font:inherit; font-size:15px; padding:0 12px; outline:none; }
.nx-cp-roles { display:flex; flex-direction:column; gap:2px; max-height:260px; overflow:auto; }
.nx-cp-role { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:6px; cursor:pointer; }
.nx-cp-role:hover { background:#ffffff08; }
.nx-cp-role input { accent-color: var(--nx-accent, #9d68e4); width:18px; height:18px; margin:0; }
.nx-cp-role i, .nx-cp-tabs i { width:12px; height:12px; border-radius:50%; flex:none; }
.nx-cp-hint, .nx-cp-empty { font-size:13px; color: var(--nx-muted, #8e879b); margin:0; line-height:1.45; }

/* footer buttons */
.nx-cp-footer { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:8px -24px -24px; padding:14px 20px; background: var(--nx-panel, #100e15); border-radius:0 0 12px 12px; }
.nx-cp-perms .nx-cp-footer { position:sticky; bottom:-24px; z-index:2; }
.nx-cp-ghost { background:none; border:0; color:var(--nx-text); font:inherit; font-size:14px; padding:9px 14px; border-radius:6px; cursor:pointer; }
.nx-cp-ghost:hover { text-decoration:underline; }
.nx-cp-primary, .nx-cp-danger { font-size:14px !important; font-weight:600; padding:10px 18px !important; border-radius:8px; border:0; color:#fff; margin:0 !important; }
.nx-cp-primary { background: var(--nx-accent, #9d68e4); }
.nx-cp-primary:hover { background:var(--nx-accent); }
.nx-cp-danger { background:#da373c; }
.nx-cp-danger:hover { background:#c4302f; }
.nx-cp-confirm { margin:0; line-height:1.5; }
.nx-cp-perm-link { display:inline-flex; align-items:center; gap:8px; }
.nx-cp-perm-link .nx-icon { width:16px; height:16px; }

/* permissions editor */
.nx-cp-grid { display:grid; grid-template-columns:200px 1fr; gap:20px; min-height:320px; }
.nx-cp-grid aside { display:flex; flex-direction:column; gap:8px; }
.nx-cp-tabs { display:flex; flex-direction:column; gap:2px; }
.nx-cp-tabs button { display:flex; align-items:center; gap:10px; text-align:left; border:0; background:none; color:var(--nx-soft); font:inherit; font-size:14px; padding:8px 10px; border-radius:6px; cursor:pointer; }
.nx-cp-tabs button:hover { background:#ffffff08; color: var(--nx-text, #f2eff7); }
.nx-cp-tabs button.is-active { background:#ffffff12; color:#fff; }
.nx-cp-add { height:36px; border:1px dashed #ffffff22; border-radius:6px; background:none; color:var(--nx-soft); font:inherit; font-size:14px; padding:0 8px; cursor:pointer; }
.nx-cp-list { display:flex; flex-direction:column; min-width:0; }
.nx-cp-list h3 { padding-bottom:10px; border-bottom:1px solid #ffffff0d; }
.nx-cp-remove { font-size:13px; color:#f08080; }
.nx-cp-row { display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid #ffffff0a; }
.nx-cp-row > span { flex:1; min-width:0; }
.nx-cp-tri { display:flex; flex:none; border-radius:6px; overflow:hidden; border:1px solid #ffffff14; }
.nx-cp-tri button { width:34px; height:30px; display:grid; place-items:center; border:0; background: var(--nx-raised, #1e1b26); color: var(--nx-muted, #8e879b); cursor:pointer; padding:0; }
.nx-cp-tri button + button { border-left:1px solid #ffffff14; }
.nx-cp-tri .nx-icon { width:16px; height:16px; }
.nx-cp-tri b { font-weight:600; font-size:15px; }
.nx-cp-tri button:hover { color: var(--nx-text, #f2eff7); }
.nx-cp-tri .is-deny.is-on { background:#da373c; color:#fff; }
.nx-cp-tri .is-inherit.is-on { background:var(--nx-accent); color:#fff; }
.nx-cp-tri .is-allow.is-on { background:#23a55a; color:#fff; }

/* context menu, Discord-style */
.nx-context-menu { min-width:200px; padding:6px; background:var(--nx-rail); border:1px solid #ffffff12; border-radius:8px; box-shadow:0 12px 40px #000a; backdrop-filter:none; }
.nx-context-menu button { font-size:14px; color:var(--nx-text); padding:8px 10px; border-radius:4px; justify-content:space-between; flex-direction:row-reverse; }
.nx-context-menu button:hover, .nx-context-menu button:focus-visible { background: var(--nx-accent, #9d68e4); color:#fff; }
.nx-context-menu button.is-danger { color:#f47f7f; }
.nx-context-menu button.is-danger:hover, .nx-context-menu button.is-danger:focus-visible { background:#da373c; color:#fff; }
.nx-context-menu hr { border:0; height:1px; background:#ffffff10; margin:4px 6px; }
.nx-sidebar-scroll { -webkit-touch-callout:none; }

@media (max-width:640px) {
  .nx-cp-grid { grid-template-columns:1fr; min-height:0; }
  .nx-cp-tabs { flex-direction:row; overflow-x:auto; }
  .nx-cp-tabs button { white-space:nowrap; }
}

/* drag-and-drop in the channel list */
.nx-drag-ghost { position:fixed; z-index:80; pointer-events:none; margin:0; list-style:none; opacity:.9; background:var(--nx-raised); border-radius:6px; box-shadow:0 10px 30px #0009; transform:rotate(-1deg); }
.nx-drag-ghost .nx-room { background:transparent; }
.nx-drop-line { position:fixed; z-index:79; height:2px; border-radius:2px; background: var(--nx-accent, #9d68e4); pointer-events:none; box-shadow:0 0 0 1px color-mix(in srgb,var(--nx-accent) 33.33%,transparent); }
.nx-drop-line::before { content: ''; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background: var(--nx-accent, #9d68e4); }
.nx-channel-row.is-dragging, .nx-channel-category.is-dragging > summary { opacity:.35; }
.nx-channel-category > summary.is-drop-into { color:#fff; background:color-mix(in srgb,var(--nx-accent) 20.0%,transparent); border-radius:4px; }
.nx-channel-group { min-height:4px; }
body.nx-is-dragging, body.nx-is-dragging * { cursor:grabbing !important; user-select:none !important; -webkit-user-select:none !important; }