/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* App-shell rail widths — shared by the #app grid AND the minimised call
     bar so the bar docks over the centre column only (leaving the left nav /
     admin menu and the right panel clickable during a call). Keep these two
     as the single source of truth: change a rail here, both stay in sync. */
  --rail-l: 220px;   /* left sidebar (channels / DMs / admin)  */
  --rail-r: 240px;   /* right panel  (members / call detail)   */
  /* ── NetYou360 brand palette ── */
  --bg-sidebar:    #111111;
  --bg-sidebar-h:  #1c1c1c;
  --bg-main:       #1a1a1a;
  --bg-hover:      #2a2a2a;
  --bg-input:      #1f1f1f;
  --bg-modal:      #242424;
  /* Text ramp — lifted 2026-06-16 for readability (muted #555 was ~2:1 on the
     dark bg, below the WCAG floor). Each tier stays distinct but clears ~4.5:1. */
  --text-primary:  #e6e6e6;
  --text-secondary:#bdbdbd;
  --text-muted:    #9a9a9a;
  --text-white:    #ffffff;
  --text-link:     #cc0066;
  --border:        #333333;
  --border-input:  #444444;
  --accent:        #cc0066;
  --accent-hover:  #aa0055;
  --online:        #2bac76;
  --unread:        #e8912d;
  --danger:        #e01e5a;
  --radius:        6px;
  --radius-lg:     12px;
  --shadow:        0 4px 20px rgba(0,0,0,.6);
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 15px;
}

.hidden { display: none !important; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Auth Screen ─────────────────────────────────────────────────────── */
#auth-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0010 100%);
}

.auth-card {
  background: var(--bg-modal); border-radius: var(--radius-lg);
  padding: 40px 36px; width: 400px;
  box-shadow: var(--shadow); animation: fadeUp .35s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-logo {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 6px;
}

.auth-logo-img {
  width: 48px; height: 48px; object-fit: contain;
}

.auth-logo h1 { font-size: 24px; font-weight: 800; color: var(--text-white); }
.auth-sub { text-align: center; color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.field input {
  padding: 10px 12px; border-radius: var(--radius);
  border: 1.5px solid var(--border-input); background: var(--bg-main);
  color: var(--text-white); font-size: 14px; outline: none;
  transition: border-color .2s;
}
.field input:focus { border-color: var(--accent); }

.form-error {
  background: rgba(224,30,90,.15); border: 1px solid var(--danger);
  border-radius: var(--radius); padding: 8px 12px;
  color: #ff6b8a; font-size: 13px; margin-bottom: 10px;
}

.auth-switch { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-secondary); }
.auth-footer { margin-top: 22px; display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 12px; color: var(--text-secondary); }
.auth-footer a { color: var(--text-secondary); text-decoration: none; }
.auth-footer a:hover { color: var(--accent); text-decoration: underline; }

/* Password reveal */
.pw-reveal { text-align: center; }
.pw-icon { font-size: 40px; margin-bottom: 8px; }
.pw-reveal h2 { font-size: 20px; color: var(--text-white); margin-bottom: 6px; }
.pw-reveal p  { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.pw-box {
  background: var(--bg-main); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px;
}
.pw-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 14px; }
.pw-row span { color: var(--text-secondary); }
.pw-row strong { color: var(--text-white); }
.pw-main { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.pw-main strong { font-size: 20px; letter-spacing: 2px; color: #2bac76; }
.pw-warn { font-size: 12px; color: var(--unread); margin: 10px 0 16px; }

/* Email code screen (registration verification / login 2FA) */
.code-sub { text-align: center; color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.code-input {
  width: 100%; text-align: center;
  font-size: 30px; font-weight: 700; letter-spacing: 12px; text-indent: 12px;
  padding: 14px 0; margin-bottom: 14px;
  background: var(--bg-main); color: var(--text-white);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  outline: none; font-variant-numeric: tabular-nums;
}
.code-input:focus { border-color: var(--accent); }
.code-status { color: var(--text-secondary); margin-left: 6px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  padding: 10px 20px; border-radius: var(--radius);
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 600; border: none; cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(.98); }
.btn-primary.full { width: 100%; margin-top: 4px; padding: 12px; }

.btn-ghost {
  padding: 8px 16px; border-radius: var(--radius);
  background: transparent; color: var(--text-secondary);
  border: 1.5px solid var(--border-input); font-size: 14px; cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-danger {
  padding: 8px 16px; border-radius: var(--radius);
  background: transparent; color: var(--danger);
  border: 1.5px solid var(--danger); font-size: 13px; cursor: pointer;
  transition: background .15s;
}
.btn-danger:hover { background: rgba(224,30,90,.15); }

.icon-btn {
  background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 6px;
  /* Explicit color so SVG `stroke="currentColor"` doesn't fall back to the
     user-agent default (black on Chromium/Firefox, system blue on iOS). */
  color: #fff;
  transition: background .15s;
}
.icon-btn:hover { background: var(--bg-hover); }

/* ── App Layout ──────────────────────────────────────────────────────── */
#app {
  display: grid;
  grid-template-columns: var(--rail-l) 1fr var(--rail-r);
  height: 100vh; overflow: hidden;
}

/* ── Update notifications ─────────────────────────────────────────────── */
.update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: 34px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent, #cc0066); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .2px;
  padding: 0 16px; cursor: pointer; text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.update-banner::before { content: '↻'; font-size: 15px; font-weight: 700; }
.update-banner:hover { background: var(--accent-hover, #aa0055); }
.update-banner.hidden { display: none; }
/* Push the app + login below the banner so nothing is covered. */
body.has-update-banner #app,
body.has-update-banner #login-screen { height: calc(100vh - 34px); margin-top: 34px; }

.update-notice {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
}
.update-notice.hidden { display: none; }
.update-notice-box {
  background: var(--bg-modal, #242424); color: var(--text-primary, #d4d4d4);
  border: 1px solid var(--border, #333); border-radius: 12px;
  padding: 26px 30px; text-align: center; max-width: 320px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.update-notice-spinner {
  width: 30px; height: 30px; margin: 0 auto 14px;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent, #cc0066);
  border-radius: 50%; animation: update-spin .8s linear infinite;
}
@keyframes update-spin { to { transform: rotate(360deg); } }
.update-notice-text { font-size: 14px; margin-bottom: 18px; }
.update-notice-ok {
  background: var(--accent, #cc0066); color: #fff; border: none; border-radius: 8px;
  padding: 8px 24px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.update-notice-ok:hover { background: var(--accent-hover, #aa0055); }

/* ── Channel call logs: in-chat card + detail window ─────────────────── */
.call-card {
  margin: 6px 16px; max-width: 460px; flex-shrink: 0;
  background: var(--bg-input, #1f1f1f); border: 1px solid var(--border, #333);
  border-radius: 10px; overflow: hidden; transition: border-color .15s, background .15s;
}
.call-card.openable { cursor: pointer; }
.call-card.openable:hover { border-color: var(--accent, #cc0066); background: var(--bg-hover, #2a2a2a); }
.call-card-inner { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.call-card-icon { font-size: 20px; flex-shrink: 0; }
.call-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.call-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary, #d4d4d4); }
.call-card-sub { font-size: 12.5px; color: var(--text-secondary, #8a8a8a); }
.call-card-live { font-size: 11px; color: #2ecc71; font-weight: 600; margin-left: 4px; }
.call-card-proc { font-size: 11px; color: var(--text-secondary, #8a8a8a); font-weight: 500; margin-left: 4px; }
.call-card-open { font-size: 12px; color: var(--accent, #cc0066); font-weight: 600; white-space: nowrap; }

.call-window { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.call-window.hidden { display: none; }
.call-window-box {
  background: var(--bg-modal, #242424); color: var(--text-primary, #d4d4d4);
  border: 1px solid var(--border, #333); border-radius: 12px;
  width: 540px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.call-window-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border, #333); }
.call-window-head span { font-size: 16px; font-weight: 700; }
.call-window-close { background: none; border: none; color: var(--text-secondary, #8a8a8a); font-size: 18px; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.call-window-close:hover { color: var(--text-white, #fff); background: var(--bg-hover, #2a2a2a); }
.call-window-body { padding: 18px 20px; overflow-y: auto; }
.cw-loading { color: var(--text-secondary, #8a8a8a); text-align: center; padding: 24px 0; }
.cw-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--text-secondary, #8a8a8a); margin-bottom: 16px; }
.cw-meta b { color: var(--text-primary, #d4d4d4); font-weight: 600; }
.cw-section { margin-bottom: 16px; }
.cw-section.muted { color: var(--text-secondary, #8a8a8a); font-size: 13px; }
.cw-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary, #8a8a8a); margin-bottom: 8px; font-weight: 600; }
.cw-attendees { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cw-attendees li { background: var(--bg-input, #1f1f1f); border: 1px solid var(--border, #333); border-radius: 14px; padding: 4px 12px; font-size: 13px; }
.cw-trans-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cw-trans-toggle { background: none; border: none; color: var(--text-primary, #d4d4d4); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.cw-copy { background: var(--accent, #cc0066); color: #fff; border: none; border-radius: 7px; padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cw-copy:hover { background: var(--accent-hover, #aa0055); }
.cw-transcript { white-space: pre-wrap; background: var(--bg-sidebar, #111); border: 1px solid var(--border, #333); border-radius: 8px; padding: 12px; max-height: 340px; overflow: auto; margin: 0; font: 12.5px/1.6 ui-monospace, Menlo, monospace; color: var(--text-primary, #d4d4d4); }
.cw-transcript.hidden { display: none; }

/* Add-to-Kanban picker (call window) + card-modal Calls section */
.cw-kanban-btn { background: var(--bg-input, #1f1f1f); color: var(--text-primary, #d4d4d4); border: 1px solid var(--border, #333); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cw-kanban-btn:hover { border-color: var(--accent, #cc0066); color: var(--accent, #cc0066); }
.cw-kanban-panel { margin-top: 10px; }
.cw-kanban-panel.hidden { display: none; }
.cw-card-search, .cw-card-new-input { width: 100%; background: var(--bg-input, #1f1f1f); border: 1px solid var(--border-input, #444); border-radius: 7px; padding: 8px 10px; color: var(--text-primary, #d4d4d4); font-size: 13px; outline: none; }
.cw-card-search:focus, .cw-card-new-input:focus { border-color: var(--accent, #cc0066); }
.cw-card-list { list-style: none; margin: 8px 0; padding: 0; max-height: 180px; overflow: auto; border: 1px solid var(--border, #333); border-radius: 8px; }
.cw-card-list li { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border, #333); }
.cw-card-list li:last-child { border-bottom: none; }
.cw-card-list li[data-card-id] { cursor: pointer; }
.cw-card-list li[data-card-id]:hover { background: var(--bg-hover, #2a2a2a); color: var(--accent, #cc0066); }
.cw-card-list li.muted { color: var(--text-secondary, #8a8a8a); }
.cw-card-new { display: flex; gap: 8px; }
.cw-card-new-btn { background: var(--accent, #cc0066); color: #fff; border: none; border-radius: 7px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cw-card-new-btn:hover { background: var(--accent-hover, #aa0055); }
.cw-kanban-done { font-size: 13px; color: #2ecc71; font-weight: 600; padding: 6px 0; }
.cw-kanban-done.error { color: var(--danger, #e01e5a); }
#cm-calls-section .cm-calls-list { display: flex; flex-direction: column; gap: 6px; }
.cm-call-row { background: var(--bg-input, #1f1f1f); border: 1px solid var(--border, #333); border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.cm-call-row:hover { border-color: var(--accent, #cc0066); }

/* ── Call History (right panel) ──────────────────────────────────────── */
.callhist-section { margin-top: 4px; border-top: 1px solid var(--border); }
.callhist-section.hidden { display: none; }
.callhist-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; }
.callhist-header .users-section-label { margin: 0; }
.callhist-scroll { max-height: 320px; overflow-y: auto; padding: 0 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.callhist-card {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-input, #1f1f1f); border: 1px solid var(--border, #333);
  border-radius: 8px; padding: 7px 10px;
}
.callhist-card.openable { cursor: pointer; transition: border-color .15s, background .15s; }
.callhist-card.openable:hover { border-color: var(--accent, #cc0066); background: var(--bg-hover, #2a2a2a); }
.callhist-card .call-card-icon { font-size: 16px; flex-shrink: 0; }
.callhist-card .call-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.callhist-card .call-card-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #d4d4d4); }
.callhist-card .call-card-sub { font-size: 11.5px; color: var(--text-secondary, #8a8a8a); }

/* Kanban mode: hide chat columns, show board spanning columns 2-3 */
#kanban-view {
  display: none;
  grid-column: 2 / 4;
  flex-direction: column;
  background: var(--bg-main);
  overflow: hidden;
}
#app.kanban-active #kanban-view { display: flex; }
#app.kanban-active #main,
#app.kanban-active #right-panel { display: none; }

#kanban-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-main); flex-shrink: 0;
}
#kanban-header h2 {
  font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0;
}
#kanban-back-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted); padding: 6px 10px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
#kanban-back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── Board filter + sort bar (Group C) ──────────────────────────────── */
#kanban-filter-bar:empty { display: none; }
#kanban-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg-main); flex-shrink: 0;
}
.kfb-search {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-sidebar); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 5px 9px; color: var(--text-muted);
}
.kfb-search input {
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 13px; width: 160px;
}
.kfb-select {
  font-size: 12px; padding: 6px 8px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-sidebar);
  color: var(--text-primary); cursor: pointer; outline: none; max-width: 150px;
}
.kfb-select:focus { border-color: var(--accent); }
.kfb-clear {
  font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius);
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  cursor: pointer;
}
.kfb-clear:hover { color: var(--text-primary); background: var(--bg-hover); }
.kfb-clear.hidden { display: none; }
.kfb-note { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.kfb-note.hidden { display: none; }
#kanban-filter-bar.active { border-bottom-color: var(--accent); }

#kanban-board {
  display: flex; flex-direction: row; gap: 14px;
  padding: 20px; overflow-x: auto; align-items: flex-start;
  flex: 1;
}
#kanban-board::-webkit-scrollbar { height: 6px; }
#kanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.kb-loading, .kb-error, .kb-empty {
  padding: 32px 20px; color: var(--text-muted); font-size: 14px;
}
.kb-error { color: var(--danger); }

.kb-col {
  width: 260px; min-width: 260px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 130px);
}
.kb-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.kb-col-name  { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.kb-col-count {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-hover); border-radius: 10px; padding: 1px 7px;
}

.kb-cards {
  flex: 1; overflow-y: auto; padding: 4px 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.kb-cards::-webkit-scrollbar { width: 4px; }
.kb-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.kb-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
  transition: border-color .12s, box-shadow .12s;
  cursor: grab;
}
.kb-card:hover { border-color: var(--accent); }
.kb-card:active { cursor: grabbing; }

/* SortableJS drag states */
.kb-card-ghost {
  opacity: .4;
  background: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-card));
  border: 1px dashed var(--accent);
}
.kb-card-ghost * { visibility: hidden; }
.kb-card-chosen {
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  border-color: var(--accent);
}
.kb-card-drag {
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  border-color: var(--accent);
  cursor: grabbing;
}

/* Empty column needs a min height so users can drop into it */
.kb-cards { min-height: 40px; }
.kb-cards.sortable-empty { background: rgba(255,255,255,.02); border-radius: var(--radius); }
.kb-card-title { font-size: 13px; color: var(--text-primary); line-height: 1.4; margin-bottom: 8px; }
.kb-card-meta  { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kb-card-author { font-size: 11px; color: var(--text-muted); }
.kb-card-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Board Archive column — permanent, far right; drag a card here to archive it */
.kb-archive-col {
  width: 220px; min-width: 220px;
  background: var(--bg-sidebar);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 130px);
  opacity: .9;
}
.kb-archive-col.expanded { width: 260px; min-width: 260px; opacity: 1; }
.kb-archive-header { display: flex; align-items: center; gap: 6px; padding: 12px 12px 8px; }
.kb-archive-icon { font-size: 14px; }
.kb-archive-toggle {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--bg-hover); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 3px 9px; cursor: pointer;
}
.kb-archive-toggle:hover { color: var(--text-primary); border-color: var(--accent); }
.kb-archive-drop {
  flex: 1; overflow-y: auto; padding: 4px 10px; min-height: 60px;
  display: flex; flex-direction: column; gap: 7px;
}
.kb-card-archived { cursor: pointer; }
.kb-card-archived:hover { border-color: var(--accent); }
.kb-card-archived .kb-card-title { margin-bottom: 6px; }
.kb-archived-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kb-archived-from { font-size: 10px; color: var(--text-muted); font-style: italic; }
.kb-archived-restore {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  padding: 2px 8px; cursor: pointer; white-space: nowrap;
}
.kb-archived-restore:hover { border-color: var(--accent); }
.kb-archive-msg { font-size: 12px; color: var(--text-muted); text-align: center; padding: 12px 4px; }

.kb-move-select {
  font-size: 11px; padding: 2px 4px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-main);
  color: var(--text-muted); cursor: pointer;
}
.kb-card-delete {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 12px; cursor: pointer; padding: 2px 5px; border-radius: 4px;
  line-height: 1;
}
.kb-card-delete:hover { color: var(--danger); background: rgba(224,30,90,.1); }

.kb-add-row {
  display: flex; gap: 6px; padding: 8px 10px 12px;
  flex-shrink: 0;
}
.kb-add-input {
  flex: 1; font-size: 12px; padding: 6px 9px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-main); color: var(--text-primary); outline: none;
}
.kb-add-input:focus { border-color: var(--accent); }
.kb-add-btn {
  font-size: 12px; padding: 6px 10px; border-radius: var(--radius);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  white-space: nowrap; font-weight: 600; transition: background .12s;
}
.kb-add-btn:hover:not(:disabled) { background: var(--accent-h, #1a73b8); }
.kb-add-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Column management (A2) ──────────────────────────────────────────── */
.kb-col-header { gap: 6px; }
.kb-col-grip {
  flex-shrink: 0; cursor: grab; color: var(--text-muted);
  font-size: 12px; opacity: .45; line-height: 1; user-select: none;
}
.kb-col-grip:hover { opacity: .9; }
.kb-col-grip:active { cursor: grabbing; }
.kb-col-name-input {
  flex: 1; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  padding: 2px 4px; outline: none;
}
.kb-col-name-input:hover  { border-color: var(--border); }
.kb-col-name-input:focus  { background: var(--bg-main); border-color: var(--accent); }
.kb-col-del {
  flex-shrink: 0; background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  font-size: 12px; padding: 2px 5px; border-radius: 4px; line-height: 1;
  opacity: .5; transition: opacity .12s, color .12s, background .12s;
}
.kb-col-header:hover .kb-col-del { opacity: 1; }
.kb-col-del:hover { color: var(--danger); background: rgba(224,30,90,.1); }

/* Add-list composer at the end of the board */
.kb-add-col {
  width: 260px; min-width: 260px; height: fit-content;
  display: flex; gap: 6px; align-items: center;
  padding: 10px;
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.kb-add-col-input {
  flex: 1; min-width: 0; font-size: 13px; padding: 7px 9px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-main); color: var(--text-primary); outline: none;
}
.kb-add-col-input:focus { border-color: var(--accent); }
.kb-add-col-btn {
  font-size: 12px; padding: 7px 10px; border-radius: var(--radius);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  white-space: nowrap; font-weight: 600; transition: background .12s;
}
.kb-add-col-btn:hover:not(:disabled) { background: var(--accent-h, #1a73b8); }
.kb-add-col-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Column drag states (reorder) */
.kb-col.sortable-ghost { opacity: .4; border: 1px dashed var(--accent); }
.kb-col.sortable-drag  { box-shadow: 0 12px 32px rgba(0,0,0,.5); }

/* ── Card face: define --bg-card so it renders visibly ──────────────── */
:root { --bg-card: #222222; }

/* ── Card face indicators ─────────────────────────────────────────────── */
.kb-card { position: relative; overflow: hidden; }

/* Priority dot — top-right corner of card */
.kb-priority-dot {
  position: absolute; top: 9px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%;
}
.kb-priority-dot[data-p="high"]   { background: #e01e5a; }
.kb-priority-dot[data-p="medium"] { background: #e8912d; }
.kb-priority-dot[data-p="low"]    { background: #2eb67d; }

/* Label strips below title */
.kb-label-strips {
  display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap;
}
.kb-card-label-strip {
  height: 5px; border-radius: 3px; flex: 1; min-width: 28px; max-width: 48px;
}

/* Card meta row rework */
.kb-card-indicators { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kb-card-right-meta { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.kb-card-assignees  { display: flex; align-items: center; }
.kb-card-assignees > * { margin-left: -5px; border: 2px solid var(--bg-card); border-radius: 50%; }
.kb-card-assignees > *:first-child { margin-left: 0; }

/* Due date badge */
.kb-card-due {
  font-size: 10px; padding: 2px 6px; border-radius: 10px;
  background: var(--bg-hover); color: var(--text-muted);
}
.kb-card-due.overdue   { background: rgba(224,30,90,.18); color: #e01e5a; font-weight: 700; }
.kb-card-due.due-today { background: rgba(232,145,45,.18); color: #e8912d; font-weight: 700; }

/* Checklist progress badge */
.kb-card-checklist-badge {
  font-size: 10px; padding: 2px 6px; border-radius: 10px;
  background: var(--bg-hover); color: var(--text-muted);
}
.kb-card-checklist-badge.complete { background: rgba(46,182,125,.18); color: #2eb67d; }

/* ── Card Detail Modal ────────────────────────────────────────────────── */
.cm-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.7); backdrop-filter: blur(3px);
  align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 32px 16px;
}
.cm-overlay.active { display: flex; }

.cm-modal {
  background: var(--bg-modal); border-radius: var(--radius-lg);
  width: 100%; max-width: 860px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  animation: fadeUp .2s ease;
  position: relative; overflow: hidden;
}

.cm-loading { padding: 60px; text-align: center; color: var(--text-muted); }

/* Header */
.cm-header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px 0;
}
.cm-title-wrap { flex: 1; }
.cm-title-input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-size: 18px; font-weight: 700;
  line-height: 1.3; resize: none; font-family: inherit;
  border-radius: var(--radius); padding: 4px 6px; margin: -4px -6px;
  transition: background .15s;
}
.cm-title-input:hover, .cm-title-input:focus { background: var(--bg-hover); }
.cm-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius); line-height: 1; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.cm-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Body: two-column */
.cm-body {
  display: flex; gap: 0; padding: 0;
}
.cm-main {
  flex: 1; padding: 16px 20px 24px; min-width: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.cm-sidebar {
  width: 200px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding: 16px 14px 24px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Sections */
.cm-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px;
}
.cm-sb-section { display: flex; flex-direction: column; gap: 6px; }
.cm-sb-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}

/* Description — the most prominent content block: clearly an editable area,
   a stronger heading, and a touch larger than the Activity section. */
#cm-desc-section .cm-section-title {
  font-size: 13px; color: var(--text-secondary);
}
.cm-desc-view {
  font-size: 15px; color: var(--text-primary); line-height: 1.65;
  min-height: 54px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-input); border: 1px solid var(--border); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cm-desc-view:hover { background: var(--bg-hover); border-color: var(--accent); }
.cm-desc-view.empty { color: var(--text-muted); font-style: italic; }

/* Card Shares (Loom-style async video) */
#cm-shares-section { margin-top: 16px; }
#cm-shares-section .cm-section-title { font-size: 13px; color: var(--text-secondary); }
.cm-shares-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.cm-shares-empty { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
.cm-share-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--bg-input); border: 1px solid var(--border);
}
.cm-share-ico { font-size: 18px; flex-shrink: 0; }
.cm-share-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-share-title {
  font-size: 14px; color: var(--text-primary); font-weight: 600; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cm-share-title:hover { color: var(--accent); text-decoration: underline; }
.cm-share-meta { font-size: 11px; color: var(--text-muted); }
.cm-share-act {
  background: transparent; border: none; cursor: pointer; font-size: 15px;
  width: 32px; height: 32px; border-radius: 8px; color: var(--text-secondary); flex-shrink: 0;
}
.cm-share-act:hover { background: var(--bg-hover); }
.cm-desc-edit {
  width: 100%; background: var(--bg-input); border: 1.5px solid var(--border-input);
  border-radius: var(--radius); color: var(--text-primary); font-size: 15px;
  font-family: inherit; line-height: 1.6; padding: 12px 14px; resize: vertical;
  outline: none; min-height: 120px; transition: border-color .15s;
}
.cm-desc-edit:focus { border-color: var(--accent); }
.cm-desc-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Buttons reused in modal */
.cm-btn {
  font-size: 12px; padding: 5px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-hover);
  color: var(--text-primary); cursor: pointer; font-weight: 600;
  transition: background .12s, border-color .12s;
}
.cm-btn:hover { background: #333; border-color: #555; }
.cm-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cm-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cm-btn.danger { color: var(--danger); }
.cm-btn.danger:hover { background: rgba(224,30,90,.1); border-color: var(--danger); }
.cm-btn.small { font-size: 11px; padding: 3px 8px; }

/* Priority picker */
.cm-priority-row { display: flex; flex-direction: column; gap: 4px; }
.cm-priority-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 5px 8px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  transition: background .12s; text-align: left;
}
.cm-priority-btn:hover { background: var(--bg-hover); }
.cm-priority-btn.active { background: var(--bg-hover); border-color: var(--border); color: var(--text-primary); }
.cm-priority-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Labels in sidebar */
.cm-label-list { display: flex; flex-direction: column; gap: 3px; }
.cm-label-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 6px; border-radius: var(--radius);
  cursor: pointer; transition: background .12s; color: var(--text-secondary);
}
.cm-label-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.cm-label-row.active { color: var(--text-primary); }
.cm-label-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.cm-label-check { margin-left: auto; font-size: 11px; color: var(--online); }
.cm-new-label-form { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.cm-new-label-form input[type="text"] {
  font-size: 12px; padding: 4px 7px; border-radius: var(--radius);
  border: 1px solid var(--border-input); background: var(--bg-input);
  color: var(--text-primary); outline: none;
}
.cm-new-label-form input[type="text"]:focus { border-color: var(--accent); }
.cm-color-row { display: flex; gap: 4px; flex-wrap: wrap; }
.cm-color-dot {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: border-color .1s;
}
.cm-color-dot.selected { border-color: #fff; }

/* Assignees in sidebar */
.cm-assignee-assigned { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.cm-assignee-empty { font-size: 11px; color: var(--text-muted); padding: 2px 2px; }
.cm-assignee-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 6px 6px; border-radius: var(--radius);
  line-height: 1.6;
  color: var(--text-secondary); transition: background .12s;
}
.cm-assignee-chip:hover { background: var(--bg-hover); }
.cm-assignee-chip .cm-assignee-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-assignee-chip.primary { color: var(--text-primary); }
.cm-assignee-chip.primary .cm-assignee-name { font-weight: 700; }
.cm-assignee-primary-tag {
  display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 600;
  letter-spacing: .04em; line-height: 1.5; text-transform: uppercase;
  color: var(--online); border: 1px solid var(--online); border-radius: 8px;
  padding: 1px 6px; vertical-align: middle;
}
.cm-assignee-remove {
  margin-left: auto; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px; line-height: 1; padding: 0 2px;
  border-radius: var(--radius); transition: color .12s, background .12s;
}
.cm-assignee-remove:hover { color: var(--danger, #e5484d); background: var(--bg-hover); }

/* Assignee @search */
.cm-assignee-search-wrap { position: relative; }
.cm-assignee-search {
  width: 100%; box-sizing: border-box; font-size: 12px;
  padding: 5px 8px; border-radius: var(--radius);
  border: 1px solid var(--border-input); background: var(--bg-input);
  color: var(--text-primary); outline: none;
}
.cm-assignee-search:focus { border-color: var(--accent, #5865f2); }
.cm-assignee-results {
  display: none; flex-direction: column; gap: 2px; margin-top: 4px;
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated, var(--bg-input)); padding: 3px;
}
.cm-assignee-results.open { display: flex; }
.cm-assignee-result {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 6px; border-radius: var(--radius);
  cursor: pointer; color: var(--text-secondary); transition: background .12s;
}
.cm-assignee-result:hover { background: var(--bg-hover); color: var(--text-primary); }
.cm-assignee-result .cm-assignee-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── In-app share viewer ──────────────────────────────────────────────── */
.sv-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0, 0, 0, .72);
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0px))
           calc(16px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
}
.sv-panel {
  background: var(--bg-elevated, var(--bg-input));
  border: 1px solid var(--border); border-radius: 14px;
  width: min(960px, 100%); max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.sv-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.sv-titles { flex: 1; min-width: 0; }
.sv-title {
  font-weight: 700; font-size: 15px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sv-sub { font-size: 12px; color: var(--text-muted); }
.sv-close {
  border: none; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 8px 10px; border-radius: 8px; flex: none;
  min-width: 40px; min-height: 40px;
}
.sv-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.sv-body {
  background: #000; display: flex; align-items: center; justify-content: center;
  min-height: 120px;
}
.sv-body video { display: block; width: 100%; max-height: min(72dvh, 700px); background: #000; }
.sv-state { color: var(--text-muted); font-size: 13px; padding: 40px 20px; text-align: center; }

/* Due date */
.cm-due-input {
  font-size: 12px; padding: 5px 8px; border-radius: var(--radius);
  border: 1px solid var(--border-input); background: var(--bg-input);
  color: var(--text-primary); outline: none; width: 100%;
  color-scheme: dark;
}
.cm-due-input:focus { border-color: var(--accent); }
.cm-due-clear { font-size: 11px; color: var(--text-muted); cursor: pointer; }
.cm-due-clear:hover { color: var(--danger); }

/* Checklists in main column */
.cm-checklist { display: flex; flex-direction: column; gap: 6px; }
.cm-checklist-header {
  display: flex; align-items: center; gap: 8px;
}
.cm-checklist-title {
  font-size: 13px; font-weight: 700; color: var(--text-primary); flex: 1;
}
.cm-checklist-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 5px; border-radius: 4px; }
.cm-checklist-del:hover { color: var(--danger); }
.cm-progress-bar {
  height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.cm-progress-fill {
  height: 100%; background: var(--online); border-radius: 2px;
  transition: width .3s ease;
}
.cm-item-row {
  display: flex; align-items: center; gap: 8px;
}
.cm-item-cb { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.cm-item-text {
  flex: 1; font-size: 13px; color: var(--text-primary); line-height: 1.4;
  cursor: pointer;
}
.cm-item-text.checked { text-decoration: line-through; color: var(--text-muted); }
.cm-item-del { background: none; border: none; color: transparent; cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.cm-item-row:hover .cm-item-del { color: var(--text-muted); }
.cm-item-del:hover { color: var(--danger) !important; }
.cm-add-item {
  display: flex; gap: 6px; align-items: center; margin-top: 2px;
  padding-left: 23px;
}
.cm-add-item input {
  flex: 1; font-size: 12px; padding: 4px 8px;
  border-radius: var(--radius); border: 1px solid var(--border-input);
  background: var(--bg-input); color: var(--text-primary); outline: none;
}
.cm-add-item input:focus { border-color: var(--accent); }

/* Comments / Activity */
.cm-comment { display: flex; gap: 10px; }
.cm-comment-body { flex: 1; min-width: 0; }
.cm-comment-header { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.cm-comment-header strong { color: var(--text-primary); font-weight: 600; }
.cm-comment-text {
  font-size: 13px; color: var(--text-primary); line-height: 1.5;
  background: var(--bg-hover); border-radius: var(--radius);
  padding: 8px 10px;
}
.cm-comment-actions { display: flex; gap: 4px; margin-top: 3px; }
.cm-comment-del, .cm-comment-edit {
  font-size: 11px; color: var(--text-muted); cursor: pointer;
  background: none; border: none; padding: 2px 4px;
}
.cm-comment-del:hover { color: var(--danger); }
.cm-comment-edit:hover { color: var(--text-primary); }
.cm-comment-edited { font-style: italic; opacity: .7; }
.cm-comment-editor { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.cm-comment-edit-input {
  width: 100%; font-size: 13px; line-height: 1.5; resize: vertical;
  background: var(--bg-main); color: var(--text-primary);
  border: 1px solid var(--accent); border-radius: var(--radius); padding: 8px 10px;
  outline: none; font-family: inherit;
}
.cm-comment-edit-actions { display: flex; gap: 6px; }

/* Activity log lines (interleaved with comments) */
.cm-activity { display: flex; align-items: flex-start; gap: 9px; padding: 1px 0; }
.cm-activity-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border);
  margin: 7px 11px; flex-shrink: 0;
}
.cm-activity-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.cm-activity-text strong { color: var(--text-secondary); font-weight: 600; }
.cm-activity-time { opacity: .7; white-space: nowrap; }
.cm-new-comment { display: flex; flex-direction: column; gap: 6px; }
.cm-new-comment textarea {
  width: 100%; background: var(--bg-input); border: 1.5px solid var(--border-input);
  border-radius: var(--radius); color: var(--text-primary); font-size: 13px;
  font-family: inherit; padding: 8px 10px; resize: vertical; outline: none; min-height: 68px;
  transition: border-color .15s;
}
.cm-new-comment textarea:focus { border-color: var(--accent); }

/* Attachments */
.cm-att-list { display: flex; flex-direction: column; gap: 4px; }
.cm-att-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary); padding: 4px 6px;
  border-radius: var(--radius); background: var(--bg-hover);
}
.cm-att-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-att-name a { color: var(--accent); }
.cm-att-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 1px 4px; }
.cm-att-del:hover { color: var(--danger); }
.cm-att-upload { display: none; }

/* Danger zone */
.cm-danger { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }

/* Responsive: stack on narrow screens */
@media (max-width: 640px) {
  .cm-body { flex-direction: column; }
  .cm-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}

/* ── Project channel sidebar items ───────────────────────────────────── */
.proj-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: var(--radius);
  font-size: 14px; color: var(--text-secondary);
  cursor: pointer; position: relative;
  transition: background .1s;
}
.proj-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.proj-item.active { background: var(--accent); color: #fff; }
.proj-item.has-unread { font-weight: 700; color: var(--text-primary); }
.proj-ch-icon { flex-shrink: 0; opacity: .7; }

/* ── Left Sidebar ────────────────────────────────────────────────────── */
#sidebar {
  background: var(--bg-sidebar);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border); overflow: hidden;
}

.workspace-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

.ws-name { display: flex; align-items: center; gap: 8px; }
.ws-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.ws-name strong { color: var(--text-white); font-size: 15px; font-weight: 700; }

.nav-avatar {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; overflow: hidden;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.nav-section {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px 4px; margin-top: 4px;
}
.nav-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .6px; }

.add-btn {
  width: 20px; height: 20px; border-radius: 4px;
  background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.add-btn:hover { background: var(--bg-hover); color: var(--text-white); }

#channel-list, #dm-list { list-style: none; padding: 0 6px; }

/* Collapsible nav sections — hidden overflow rows + the show-more/less toggle */
.nav-collapsed { display: none !important; }
.nav-more {
  list-style: none; cursor: pointer;
  margin: 2px 6px 0; padding: 4px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.nav-more:hover { background: var(--bg-hover); color: var(--text-primary); }

.channel-item, .dm-item {
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  color: var(--text-secondary); font-size: 14px;
  transition: background .12s, color .12s; position: relative;
}
.channel-item:hover, .dm-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.channel-item.active, .dm-item.active { background: var(--accent); color: #fff; }
.channel-item .ch-prefix { font-size: 16px; opacity: .7; flex-shrink: 0; }
.channel-item .ch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.unread-badge {
  background: var(--unread); color: #fff;
  border-radius: 10px; font-size: 11px; font-weight: 700;
  padding: 1px 6px; margin-left: auto;
}

.dm-avatar {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden;
}
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

.online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); margin-left: auto; flex-shrink: 0; }

.sidebar-footer {
  padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.footer-user { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.footer-links { display: flex; align-items: center; justify-content: space-between; }
.admin-link { font-size: 12px; color: var(--text-link); }

/* Sign-out button inside the profile modal */
.btn-logout-modal {
  width: 100%; padding: 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--danger);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-logout-modal:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Help button inside the profile modal */
.btn-help-modal {
  width: 100%; padding: 11px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-help-modal:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Help & Guide overlay ────────────────────────────────────────────── */
#help-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#help-overlay.hidden { display: none; }
#help-modal {
  width: 100%; max-width: 920px; height: 80vh; max-height: 820px;
  background: var(--bg-modal, #1b1b1b);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
#help-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#help-header strong { font-size: 16px; color: var(--text-white); flex: 1; }
.help-back, .help-close {
  background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; border-radius: 8px; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.help-close { font-size: 16px; }
.help-back:hover, .help-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.help-back.hidden { display: none; }

#help-body { flex: 1; display: flex; min-height: 0; }
#help-nav {
  width: 230px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border); padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.help-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 14px; text-align: left; width: 100%;
}
.help-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.help-nav-item.active { background: var(--accent); color: #fff; }
.help-nav-icon { width: 20px; text-align: center; flex-shrink: 0; }

#help-content {
  flex: 1; overflow-y: auto; padding: 24px 28px;
  -webkit-overflow-scrolling: touch; color: var(--text-primary);
}
#help-content h2 { font-size: 21px; color: var(--text-white); margin: 0 0 12px; }
#help-content h3 { font-size: 16px; color: var(--text-white); margin: 22px 0 8px; }
#help-content p  { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px; }
#help-content ul { margin: 0 0 12px; padding-left: 22px; }
#help-content li { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 5px; }
#help-content strong { color: var(--text-primary); }
.help-tip {
  background: rgba(54,197,240,.1); border-left: 3px solid #36C5F0;
  border-radius: 6px; padding: 10px 12px; margin: 14px 0 !important;
  font-size: 13px !important;
}

/* Screenshot slots — show a friendly placeholder until the PNG is added */
.help-shot {
  margin: 14px 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--bg-main);
}
.help-shot img { display: block; width: 100%; height: auto; }
.help-shot.missing img { display: none; }
.help-shot-ph {
  display: none; align-items: center; justify-content: center; gap: 8px;
  min-height: 120px; color: var(--text-muted); font-size: 13px;
  background: repeating-linear-gradient(45deg, var(--bg-main), var(--bg-main) 10px, var(--bg-sidebar) 10px, var(--bg-sidebar) 20px);
}
.help-shot.missing .help-shot-ph { display: flex; }
.help-shot-cam { font-size: 18px; }
.help-shot figcaption {
  padding: 8px 12px; font-size: 12px; color: var(--text-muted);
  border-top: 1px solid var(--border); background: var(--bg-sidebar);
}

/* Mobile: full-screen, switch between the topic list and the article */
@media (max-width: 768px) {
  #help-overlay { padding: 0; }
  #help-modal { max-width: 100%; height: 100%; max-height: none; border-radius: 0; }
  #help-header { padding-top: max(14px, env(safe-area-inset-top)); }
  #help-body { position: relative; }
  #help-nav { width: 100%; border-right: none; }
  #help-content { display: none; }
  #help-overlay.show-content #help-nav { display: none; }
  #help-overlay.show-content #help-content { display: block; }
  #help-content { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
/* Desktop: both panes visible, no back button needed */
@media (min-width: 769px) {
  #help-back { display: none !important; }
  #help-content { display: block !important; }
  #help-nav { display: flex !important; }
}

/* ── Main ────────────────────────────────────────────────────────────── */
#main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg-main); }

#chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}

.header-left { display: flex; align-items: center; gap: 8px; }
.header-prefix { font-size: 18px; color: var(--text-secondary); font-weight: 300; }
#header-channel { font-size: 16px; font-weight: 700; color: var(--text-white); }
.header-desc {
  font-size: 13px; color: var(--text-muted);
  border-left: 1.5px solid var(--border); padding-left: 10px; margin-left: 4px;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-right { display: flex; align-items: center; gap: 10px; }
.online-count { font-size: 13px; color: var(--text-secondary); }

/* "Project" button in the chat header — opens the kanban board, sits next to
   the call button. Visibility toggled by .hidden (see _updateProjectBtn). */
.proj-header-btn {
  background: var(--bg-hover); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  min-height: 32px; padding: 0 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  flex-shrink: 0; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.proj-header-btn:not(.hidden) { display: inline-flex; align-items: center; gap: 6px; }
.proj-header-btn:hover { border-color: var(--accent); }
.proj-header-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Messages ────────────────────────────────────────────────────────── */
#messages-area {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
#messages-area::-webkit-scrollbar { width: 6px; }
#messages-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.msg {
  display: flex; gap: 10px; padding: 4px 8px; border-radius: 6px;
  position: relative; transition: background .1s;
}
.msg:hover { background: var(--bg-hover); }
.msg:hover .msg-actions { opacity: 1; }

.msg.system { justify-content: center; padding: 4px 0; }
.msg-system-text { font-size: 12px; color: var(--text-muted); font-style: italic; }

.msg-avatar-wrap {
  width: 36px; height: 36px; flex-shrink: 0; margin-top: 2px;
}

.msg-avatar {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; overflow: hidden;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.msg.grouped .msg-avatar-wrap { visibility: hidden; }
.msg.grouped .msg-header { display: none; }

.msg-body { flex: 1; min-width: 0; }
.msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-name { font-weight: 700; font-size: 14px; color: var(--text-white); }
.msg-time { font-size: 11px; color: var(--text-muted); }

.msg-text { font-size: 14px; color: var(--text-primary); line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }

/* Thread indicator */
.thread-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 5px; cursor: pointer; padding: 3px 6px;
  border-radius: 4px; border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.thread-indicator:hover { background: rgba(17,100,163,.1); border-color: var(--accent); }
.thread-indicator .ti-avatars { display: flex; gap: -4px; }
.thread-indicator .ti-avatar {
  width: 18px; height: 18px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff; overflow: hidden;
  border: 1.5px solid var(--bg-hover);
}
.thread-indicator .ti-count { font-size: 12px; color: var(--accent); font-weight: 600; }
.thread-indicator .ti-label { font-size: 12px; color: var(--text-secondary); }

/* Message hover actions */
.msg-actions {
  position: absolute; right: 8px; top: 4px;
  display: flex; gap: 2px; opacity: 0; transition: opacity .15s;
  background: var(--bg-modal); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px;
}
.msg-action-btn {
  background: transparent; border: none; cursor: pointer; padding: 4px 6px;
  font-size: 14px; border-radius: 4px; color: var(--text-secondary);
  transition: background .1s, color .1s;
}
.msg-action-btn:hover { background: var(--bg-hover); color: var(--text-white); }

/* Edited / deleted indicators */
.msg-edited  { font-size: 11px; color: var(--text-muted); font-style: italic; }
.msg-deleted { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* Inline message editor */
.msg-edit-input {
  width: 100%; box-sizing: border-box; resize: none; min-height: 60px;
  background: var(--bg-input, #222); color: var(--text-white); border: 1px solid var(--accent);
  border-radius: 6px; padding: 8px; font-size: 14px; font-family: inherit; line-height: 1.4;
  outline: none;
}
.msg-edit-actions {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.msg-edit-actions .msg-edit-save {
  background: var(--accent); color: #fff; border: none; border-radius: 5px;
  padding: 4px 14px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.msg-edit-actions .msg-edit-save:hover { opacity: .85; }
.msg-edit-actions .msg-edit-cancel {
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 5px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.msg-edit-actions .msg-edit-cancel:hover { background: var(--bg-hover); }
.msg-edit-hint { font-size: 11px; color: var(--text-muted); }

/* Reactions */
.reactions-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip {
  display: flex; align-items: center; gap: 3px;
  background: var(--bg-hover); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 2px 7px; cursor: pointer; font-size: 13px;
  transition: border-color .15s;
}
.reaction-chip:hover { border-color: var(--accent); }
.reaction-chip.mine { border-color: var(--accent); background: rgba(17,100,163,.2); }
.r-count { font-size: 11px; color: var(--text-secondary); }

/* Date divider */
.date-divider {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; margin: 8px 0;
}
.date-divider::before, .date-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.date-divider span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── Typing ───────────────────────────────────────────────────────────── */
.typing-indicator { padding: 4px 28px; font-size: 13px; color: var(--text-secondary); min-height: 22px; }
.typing-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 4px; }
.typing-dots span {
  width: 5px; height: 5px; background: var(--text-secondary);
  border-radius: 50%; animation: bounce .9s infinite ease;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-5px); }
}

/* ── Input Bar ───────────────────────────────────────────────────────── */
#input-bar { padding: 10px 20px 16px; flex-shrink: 0; }
/* Highlight the composer while a file is dragged over it (paste/drag attach). */
#input-bar.drag-over { outline: 2px dashed var(--accent); outline-offset: -3px; border-radius: var(--radius-lg); background: rgba(204,0,102,.06); }

.input-wrap {
  display: flex; align-items: flex-end;
  background: var(--bg-input); border: 1.5px solid var(--border-input);
  border-radius: 10px; overflow: hidden; transition: border-color .2s;
}
.input-wrap:focus-within { border-color: var(--accent); }

.message-input {
  flex: 1; min-height: 40px; max-height: 180px;
  padding: 10px 14px; color: var(--text-primary);
  font-size: 14px; line-height: 1.5; outline: none; overflow-y: auto;
  word-wrap: break-word;
}
.message-input:empty::before {
  content: attr(data-placeholder); color: var(--text-muted); pointer-events: none;
}

.input-actions { display: flex; align-items: center; gap: 4px; padding: 6px 8px; }
.emoji-btn { background: transparent; border: none; cursor: pointer; font-size: 18px; padding: 4px; border-radius: 4px; color: #fff; transition: background .15s; }
.emoji-btn:hover { background: var(--bg-hover); }
.send-btn {
  width: 32px; height: 32px; border-radius: 6px; background: var(--accent);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:active { transform: scale(.92); }
.send-btn svg { width: 16px; height: 16px; fill: #fff; }

/* ── Right Panel ─────────────────────────────────────────────────────── */
#right-panel {
  background: var(--bg-sidebar); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}

.panel-header {
  padding: 14px 16px; font-size: 14px; font-weight: 700;
  color: var(--text-white); border-bottom: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
}

#members-panel, #thread-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* The middle (Online + Offline + Call History) scrolls inside .members-scroll;
   the panel itself stays a fixed flex column so the mini calendar below the
   wrapper is PINNED to the rail's bottom edge instead of riding the content
   (it used to float up when the lists were short and sink below the fold when
   they were long). */
.members-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 0; }
.members-scroll::-webkit-scrollbar { width: 4px; }
.members-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

#users-online, #users-offline { padding: 0; }

.users-section-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .6px; padding: 4px 16px;
}

#online-users-list { list-style: none; padding: 0 8px; }

.user-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border-radius: 6px; cursor: pointer; transition: background .12s;
}
.user-item:hover { background: var(--bg-hover); }

.user-avatar {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.status-dot {
  position: absolute; bottom: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--bg-sidebar); background: var(--online);
}
.user-name { font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-item.me .user-name { color: var(--text-primary); }
.you-tag { font-size: 11px; color: var(--text-muted); margin-left: 2px; }

/* Offline users — faded but still clickable */
.user-item.offline { opacity: .55; }
.user-item.offline .user-avatar { filter: grayscale(.6); }
.user-item.offline:hover { opacity: .85; }

/* DM list — offline DMs dimmed */
.dm-item.offline { opacity: .6; }
.dm-item.offline:hover { opacity: 1; }
.dm-item.offline .dm-avatar { filter: grayscale(.5); }

/* DMs with unread messages — full opacity and bold username */
.dm-item.has-unread { opacity: 1 !important; }
.dm-item.has-unread .dm-avatar { filter: none !important; }
.dm-item.has-unread span { color: var(--text-white) !important; font-weight: 600; }

/* Channels with unread messages — bold name, full contrast */
.channel-item.has-unread .ch-name { font-weight: 700; color: var(--text-white); }

/* Section count next to "Online" / "Offline" labels */
.users-section-count {
  font-weight: 600; color: var(--text-muted);
  margin-left: 4px; letter-spacing: 0;
}

/* Tighter spacing between the two sections */
#users-offline { margin-top: 14px; }

/* ── Thread Panel ────────────────────────────────────────────────────── */
#thread-parent-msg {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; overflow-y: auto; max-height: 200px;
}

.thread-divider {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .6px;
  padding: 8px 16px 4px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}

#thread-messages { flex: 1; overflow-y: auto; padding: 8px 0; }
#thread-messages::-webkit-scrollbar { width: 4px; }
#thread-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.thread-input-bar { padding: 8px 12px; border-top: 1px solid var(--border); flex-shrink: 0; }

.close-thread-btn {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px;
  transition: background .15s, color .15s;
}
.close-thread-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Thread messages are smaller */
#thread-parent-msg .msg, #thread-messages .msg {
  padding: 4px 8px;
}

/* ── Modal ───────────────────────────────────────────────────────────── */
#modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 200; display: flex; align-items: center; justify-content: center;
}
#modal-box {
  background: var(--bg-modal); border-radius: var(--radius-lg);
  padding: 34px; width: 540px; max-width: calc(100vw - 24px); max-height: 92vh; overflow-y: auto;
  position: relative; box-shadow: var(--shadow); animation: fadeUp .2s ease;
}
.modal-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 4px;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-title { font-size: 20px; font-weight: 700; color: var(--text-white); margin-bottom: 4px; }
.modal-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 22px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal-field label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.modal-field input, .modal-field textarea {
  padding: 10px 12px; border-radius: var(--radius);
  border: 1.5px solid var(--border-input); background: var(--bg-main);
  color: var(--text-white); font-size: 14px; outline: none; font-family: inherit;
  transition: border-color .2s;
}
.modal-field input:focus, .modal-field textarea:focus { border-color: var(--accent); }
.modal-field textarea { resize: vertical; min-height: 70px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

/* Verified email-change controls in the profile modal */
.email-pending {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 11px;
}
.email-pending strong { color: var(--text-primary); }
.email-pending .btn-sm { margin-left: auto; }
#email-change-area .btn-sm {
  font-size: 12.5px; font-weight: 600; padding: 7px 13px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg-hover); color: var(--text-primary); cursor: pointer;
}
#email-change-area .btn-sm:hover { border-color: var(--accent); }
#email-change-area .btn-sm.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Email-notification toggles in the profile modal */
.notif-prefs { margin-bottom: 4px; }
.notif-prefs-title { font-size: 14px; font-weight: 700; color: var(--text-white); margin-bottom: 4px; }
.notif-prefs-note { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.45; }
.notif-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: 14px; color: var(--text-primary); cursor: pointer; }
.notif-row + .notif-row { border-top: 1px solid var(--border); }
.notif-toggle { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 24px; border-radius: 24px; background: var(--border-input, #444); cursor: pointer; flex-shrink: 0; transition: background .18s; outline: none; }
.notif-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; }
.notif-toggle:checked { background: var(--accent, #cc0066); }
.notif-toggle:checked::after { transform: translateX(18px); }

/* Avatar upload in profile */
.avatar-upload-area {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.avatar-preview {
  width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-label {
  font-size: 13px; color: var(--text-link); cursor: pointer;
}
.avatar-upload-label:hover { text-decoration: underline; }

/* ── Emoji Picker ────────────────────────────────────────────────────── */
.emoji-picker {
  position: fixed; z-index: 100;
  background: var(--bg-modal); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px;
  box-shadow: var(--shadow); width: 280px;
}
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-btn-item {
  font-size: 20px; text-align: center; padding: 4px; cursor: pointer;
  border-radius: 4px; background: transparent; border: none; transition: background .1s;
}
.emoji-btn-item:hover { background: var(--bg-hover); }

/* ── Scrollbars ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Mobile-only helpers (hidden on desktop) ─────────────────────────── */
.mobile-only { display: none; }
#mobile-tab-bar { display: none; }   /* shown only inside the 768px block below */

/* ══════════════════════════════════════════════════════════════════════
   iOS / Mobile viewport fixes (apply everywhere, not just narrow screens)
   - 100vh on iOS includes the address bar so content gets clipped. Use
     dynamic viewport units with fallbacks for older browsers.
   - Use -webkit-fill-available as the iOS-specific safety net.
   ══════════════════════════════════════════════════════════════════════ */
html { height: -webkit-fill-available; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  /* Prevent text inflation on landscape rotate on iOS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth momentum scroll everywhere */
  -webkit-overflow-scrolling: touch;
  /* Stop iOS double-tap zoom on the chrome */
  touch-action: manipulation;
}

#app {
  /* Override the desktop 100vh with dynamic viewport height */
  height: 100vh;
  height: 100dvh;
  height: -webkit-fill-available;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE LAYOUT  (≤ 768px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─ Auth screen — full-bleed on mobile ────────────────────────────── */
  #auth-screen { padding: 16px; align-items: flex-start; padding-top: 8vh; }
  .auth-card { width: 100%; max-width: 100%; padding: 28px 22px; }

  /* ─ App shell ─────────────────────────────────────────────────────── */
  #app {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  /* ─ Bottom tab bar ────────────────────────────────────────────────── */
  #mobile-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    z-index: 50;
  }
  .mob-tab {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    background: transparent; border: none;
    color: var(--text-secondary);
    font-size: 11px; font-weight: 500;
    cursor: pointer; position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    text-decoration: none;          /* for the Admin <a> tab */
  }
  .mob-tab.hidden { display: none !important; }
  .mob-tab.active { color: var(--accent); }
  .mob-tab:active { opacity: .7; }
  .mob-tab svg { flex-shrink: 0; }
  .mob-tab-badge {
    position: absolute;
    top: 5px; right: calc(50% - 18px);
    min-width: 16px; height: 16px;
    background: var(--unread); color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 8px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }
  .mob-tab-badge.hidden { display: none !important; }

  /* ─ Sidebar = full-screen list panel ──────────────────────────────── */
  #sidebar {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Stop above the tab bar */
    bottom: calc(56px + env(safe-area-inset-bottom));
    width: 100%; max-width: 100%;
    transform: none !important;   /* override desktop-style drawer */
    transition: none !important;
    box-shadow: none;
    z-index: 10;
    display: flex; flex-direction: column;
    overflow: hidden;
  }

  /* Workspace header: compact, notch-safe */
  #sidebar .workspace-header {
    padding: max(14px, env(safe-area-inset-top)) 16px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
  }

  /* Scrollable nav fills the rest of the sidebar */
  #sidebar .sidebar-nav {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Footer is empty on mobile — username hidden, Admin lives in the bottom
     tab bar, and Sign out moved into the profile modal. Hide it entirely so
     the channel/DM list uses the full height. */
  #sidebar .sidebar-footer { display: none; }

  /* ─ Tab panel content: show one panel at a time ───────────────────── */
  /* Channels tab (default — no .mob-tab-dms on #app) */
  #app:not(.mob-tab-dms) #mob-dms-panel     { display: none; }
  /* DMs tab */
  #app.mob-tab-dms #mob-channels-panel      { display: none; }
  /* Customers tab */
  #app:not(.mob-tab-customers) #mob-cc-panel { display: none; }
  #app.mob-tab-customers #mob-channels-panel,
  #app.mob-tab-customers #mob-dms-panel      { display: none; }

  /* ─ Section labels — more breathing room in full-width list ─────── */
  .nav-section { padding: 14px 16px 6px; }
  .nav-label { font-size: 12px; letter-spacing: .05em; }

  /* ─ Channel / Project / DM list items — uniform, legible, easy to tap ─ */
  /* Full-width lists so every row and its separator line spans edge-to-edge */
  #channel-list, #dm-list, #project-list { padding: 0; }

  .channel-item,
  .proj-item,
  .dm-item {
    min-height: 60px; padding: 14px 16px;
    font-size: 17px; font-weight: 600; gap: 13px;
    color: var(--text-primary);
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .channel-item .ch-name,
  .proj-item .ch-name,
  .dm-item .ch-name { font-size: 17px; }
  /* Leading glyph/icon — uniform slot so all names start at the same x */
  .channel-item .ch-prefix,
  .channel-item .ch-lock,
  .proj-item .proj-ch-icon { width: 19px; height: 19px; font-size: 19px; opacity: .55; flex-shrink: 0; }
  .channel-item:active,
  .proj-item:active,
  .dm-item:active { background: var(--bg-hover); }
  /* Active item: keep the accent highlight but readable */
  .channel-item.active,
  .proj-item.active,
  .dm-item.active { color: #fff; font-weight: 700; }
  .dm-avatar { width: 34px; height: 34px; }

  /* Hide the per-channel leave (✕) button on mobile — declutters rows */
  .ch-leave-btn { display: none !important; }

  /* ─ Main (chat) view — hidden until a channel is opened ──────────── */
  #main { display: none; }

  /* When a channel/DM is open: full-screen chat, hide list + tab bar */
  #app.mobile-chat-open #sidebar         { display: none; }
  #app.mobile-chat-open #mobile-tab-bar  { display: none; }
  #app.mobile-chat-open #main {
    display: flex; flex-direction: column;
    position: fixed; inset: 0;
    z-index: 20; height: 100%;
  }

  /* ─ Project board (kanban) — full-screen layer over the chat view ──── */
  /* On mobile #app is `display:block`, so the desktop grid-column rules
     don't apply. The board must be a fixed full-screen layer, and it has to
     win over the mobile-chat-open #main rule above (equal specificity, so
     it relies on coming later in source). */
  #app.kanban-active #main { display: none; }
  #app.kanban-active #mobile-tab-bar { display: none; }
  #app.kanban-active #kanban-view {
    display: flex;
    position: fixed; inset: 0;
    z-index: 30; height: 100%;
    grid-column: auto;            /* neutralise the desktop grid placement */
  }
  #kanban-header { padding-top: max(10px, env(safe-area-inset-top)); }

  /* Filter bar: one horizontally-scrollable row on mobile (saves height) */
  #kanban-filter-bar {
    flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px;
    -webkit-overflow-scrolling: touch;
  }
  #kanban-filter-bar > * { flex-shrink: 0; }
  .kfb-search input { width: 120px; }
  .kfb-note { display: none !important; }   /* no room on mobile */

  /* ─ Back button ───────────────────────────────────────────────────── */
  /* mobile-only means hidden on desktop; also hide in list view */
  #mobile-back-btn { display: none !important; }
  #app.mobile-chat-open #mobile-back-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
  }

  /* ─ Mobile-only elements ──────────────────────────────────────────── */
  /* Show all .mobile-only elements on mobile */
  .mobile-only { display: inline-flex !important; align-items: center; justify-content: center; }
  /* But hide the old hamburger (replaced by bottom tabs) */
  #sidebar-toggle-btn { display: none !important; }
  /* And hide the back button in list view (overridden above for chat view) */
  #mobile-back-btn { display: none !important; }

  /* ─ Chat header — decluttered: back · name · [manage] · call · ⋮ ──── */
  #chat-header {
    padding: 0 8px 8px;
    padding-top: max(8px, env(safe-area-inset-top));
    gap: 6px; min-height: 52px; flex-shrink: 0;
  }
  .header-left { gap: 4px; min-width: 0; flex: 1; }
  #header-channel {
    font-size: 17px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
  }
  .header-desc { display: none; }
  .online-count { display: none; }
  .header-right { gap: 4px; flex-shrink: 0; }

  /* HIG 44pt minimum touch targets */
  .icon-btn { min-width: 44px; min-height: 44px; }

  /* Declutter: these live in the ⋮ overflow menu on mobile, not the header */
  #chat-header #pins-btn,
  #chat-header #notif-btn,
  #chat-header #search-btn,
  #chat-header #invite-btn,
  #chat-header #members-toggle-btn { display: none !important; }

  /* Overflow (⋮) button */
  #mobile-more-btn {
    position: relative;
    background: transparent; border: none; color: var(--text-primary);
    cursor: pointer; border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-more-btn:active { background: var(--bg-hover); }
  .mobile-more-dot {
    position: absolute; top: 9px; right: 10px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--unread); border: 1.5px solid var(--bg-main);
  }
  .mobile-more-dot.hidden { display: none !important; }

  /* Overflow dropdown menu */
  #mobile-more-menu {
    position: absolute;
    top: calc(max(8px, env(safe-area-inset-top)) + 46px);
    right: 8px;
    min-width: 210px;
    background: var(--bg-modal, #1b1b1b);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,.6);
    padding: 6px;
    z-index: 240;
    animation: fadeIn .12s ease;
  }
  #mobile-more-menu.hidden { display: none !important; }
  .mob-more-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 12px;
    background: transparent; border: none; border-radius: 8px;
    color: var(--text-primary); font-size: 15px; text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mob-more-item:active { background: var(--bg-hover); }
  .mob-more-item svg { flex-shrink: 0; opacity: .85; }
  .mob-more-item span { flex: 1; }
  .mob-more-count {
    background: var(--unread); color: #fff;
    font-size: 11px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    padding: 0 5px; display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto !important;
  }
  .mob-more-count.hidden { display: none !important; }

  /* Call button shrinks to an icon on mobile (label hidden elsewhere) */
  .call-start-btn { flex-shrink: 0; }

  /* ─ Right panel (still a drawer from the right) ───────────────────── */
  #right-panel {
    position: fixed; top: 0; bottom: 0; right: 0;
    width: 92vw; max-width: 380px; z-index: 220;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
    box-shadow: -4px 0 32px rgba(0,0,0,.55);
    will-change: transform;
    padding-right: env(safe-area-inset-right);
  }
  #right-panel.open { transform: translateX(0); }
  #right-panel .panel-header { padding-top: max(14px, env(safe-area-inset-top)); }

  /* ─ Backdrop (right panel only now) ──────────────────────────────── */
  #drawer-backdrop {
    position: fixed; inset: 0; z-index: 210;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    animation: fadeIn .18s ease;
  }
  #drawer-backdrop.hidden { display: none; }

  /* ─ Messages ──────────────────────────────────────────────────────── */
  #messages-area {
    padding: 10px 10px 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1; overflow-y: auto;
  }
  .msg { padding: 6px; }
  .msg-avatar-wrap, .msg-avatar { width: 34px; height: 34px; }
  .msg-text { font-size: 15px; line-height: 1.45; }
  .msg-time { font-size: 11px; }
  .msg-actions { display: none !important; }

  /* ─ Input bar ─────────────────────────────────────────────────────── */
  #input-bar {
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    flex-shrink: 0;
    background: var(--bg-main);
    border-top: 1px solid var(--border);
  }
  .input-wrap { background: var(--bg-input); border-radius: 10px; padding: 4px 6px; }
  .message-input {
    font-size: 16px;        /* prevents iOS zoom */
    padding: 8px; min-height: 24px; max-height: 35vh; overflow-y: auto;
  }
  .send-btn, .emoji-btn { min-width: 40px; min-height: 40px; }
  .field input, .field textarea, .field select { font-size: 16px; }

  /* ─ Modals — bottom-sheet style ──────────────────────────────────── */
  #modal-overlay { padding: 0; align-items: flex-end; }
  #modal-box {
    width: 100%; max-width: 100%;
    max-height: 92vh; max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    animation: slideUp .25s cubic-bezier(.22,.61,.36,1);
  }
  #modal-box::before {
    content: ''; display: block;
    width: 40px; height: 4px;
    background: var(--border); border-radius: 2px;
    margin: 8px auto 12px;
  }

  /* ─ Emoji picker — bottom sheet ──────────────────────────────────── */
  .emoji-picker {
    right: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 100%; max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 14px 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .emoji-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .emoji-btn-item { font-size: 26px; padding: 10px 4px; }

  /* Thread close button hidden on mobile */
  #thread-close-btn { display: none !important; }

  /* User/member list items */
  .user-avatar { width: 36px; height: 36px; }
  .user-item { padding: 8px 10px; min-height: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Mobile message tap bar — appears above a tapped message on ≤768px
   (position:fixed so it lives outside media queries)
   ══════════════════════════════════════════════════════════════════════ */
/* Mobile message action sheet — a bottom sheet. Replaces the old single-row
   floating bar, which was wider than a phone viewport and cut off Delete. */
.msg-sheet-backdrop {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: sheetFade .15s ease;
}
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
.msg-sheet {
  width: 100%; max-width: 520px;
  background: var(--bg-modal);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  box-shadow: 0 -8px 32px rgba(0,0,0,.55);
  animation: sheetUp .24s cubic-bezier(.22,1,.36,1);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.msg-sheet-reacts {
  display: flex; gap: 4px;
  padding: 8px 2px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.msg-sheet-react {
  flex: 1 1 0; font-size: 25px;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 0; border-radius: 12px; min-height: 50px;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s, transform .1s;
}
.msg-sheet-react:active { background: var(--bg-hover); transform: scale(.88); }
.msg-sheet-more { font-size: 22px; font-weight: 700; color: var(--text-secondary); }
.msg-sheet-actions { display: flex; flex-direction: column; gap: 2px; }
.msg-sheet-action {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 10px;
  background: transparent; border: none; cursor: pointer;
  font-size: 16px; color: var(--text-primary); text-align: left;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.msg-sheet-action:active { background: var(--bg-hover); }
.msg-sheet-action.danger { color: var(--danger); }
.msg-sheet-ico { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
.msg-sheet-cancel {
  width: 100%; margin-top: 10px; padding: 14px;
  background: var(--bg-hover); border: none; border-radius: 12px;
  font-size: 16px; font-weight: 600; color: var(--text-primary);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.msg-sheet-cancel:active { background: var(--border); }
/* legacy highlight class — retained harmlessly */
.msg.msg-tapped { background: rgba(255,255,255,.05); }

/* ══════════════════════════════════════════════════════════════════════
   Slide-up animation for bottom sheets
   ══════════════════════════════════════════════════════════════════════ */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════
   Very small phones (≤ 380px)  — extra tightening
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  #header-channel { font-size: 15px; max-width: 44vw; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .call-start-btn { width: 40px; height: 40px; }
  .emoji-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   Search panel
   ══════════════════════════════════════════════════════════════════════ */
#search-panel {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}

.search-input-wrap {
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.search-input-icon {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
#search-input {
  width: 100%; padding: 8px 10px 8px 30px;
  background: var(--bg-input); border: 1.5px solid var(--border-input);
  border-radius: var(--radius); color: var(--text-white); font-size: 14px;
  outline: none; transition: border-color .2s;
  /* Remove native search cancel button */
  -webkit-appearance: none;
}
#search-input:focus { border-color: var(--accent); }
#search-input::-webkit-search-cancel-button { display: none; }

.search-status {
  padding: 6px 14px;
  font-size: 12px; color: var(--text-muted);
  flex-shrink: 0;
}

#search-results {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
}

/* ── Result cards ──────────────────────────────────────────────────── */
.search-result-card {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.search-result-card:hover { background: var(--bg-hover); }
.search-result-card:last-child { border-bottom: none; }

.sr-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.sr-source {
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; flex-shrink: 0;
}
.sr-channel { background: rgba(204,0,102,.15); color: var(--accent); }
.sr-dm      { background: rgba(43,172,118,.15); color: var(--online); }

.sr-time {
  font-size: 11px; color: var(--text-muted); margin-left: auto;
  white-space: nowrap;
}

.sr-body {
  display: flex; gap: 8px; align-items: flex-start;
}
.sr-avatar { flex-shrink: 0; }
.sr-content { flex: 1; min-width: 0; }
.sr-name {
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 3px;
}
.sr-text {
  font-size: 13px; color: var(--text-primary);
  line-height: 1.4;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Search term highlight inside result cards */
mark.search-hl {
  background: rgba(204,0,102,.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Attachment preview (above input bar) ───────────────────────────── */
#attachment-preview { padding: 6px 12px 0; }
.att-preview {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-modal); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 10px;
  max-width: 100%; overflow: hidden;
}
.att-preview.uploading { opacity: .7; }
.att-preview-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.att-preview-icon { font-size: 22px; flex-shrink: 0; }
.att-preview-info { display: flex; flex-direction: column; min-width: 0; }
.att-preview-name {
  font-size: 13px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.att-preview-size, .att-preview-status { font-size: 11px; color: var(--text-muted); }
.att-preview-remove {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 3px; margin-left: auto;
  transition: color .15s;
}
.att-preview-remove:hover { color: var(--danger); }

/* ── Composer attachment strip (multiple per message, #31) ──────────────── */
.att-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-modal); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 8px 6px 6px; max-width: 240px;
}
.att-chip.uploading { opacity: .7; }
.att-chip.failed { border-color: var(--danger); }
.att-chip-thumb { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.att-chip-icon { font-size: 20px; width: 38px; text-align: center; flex-shrink: 0; }
.att-chip-info { display: flex; flex-direction: column; min-width: 0; }
.att-chip-name { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.att-chip-meta { font-size: 11px; color: var(--text-muted); }
.att-chip.failed .att-chip-meta { color: var(--danger); }
.att-chip-remove {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 3px; flex-shrink: 0;
  transition: color .15s;
}
.att-chip-remove:hover { color: var(--danger); }

/* ── Inline image in message ────────────────────────────────────────── */
.msg-attachment { margin-top: 6px; }
/* Gallery wrapper: lay multiple attachments out, and cap image size only when
   there are 2+ so a single image keeps its natural display (#31). */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-attachments .msg-attachment { margin-top: 0; }
.msg-attachments:has(.msg-attachment + .msg-attachment) .msg-img {
  max-width: 200px; max-height: 200px; object-fit: cover;
}
.msg-img {
  max-width: 360px; max-height: 300px;
  border-radius: var(--radius); cursor: zoom-in;
  display: block; object-fit: contain;
  border: 1px solid var(--border);
  transition: opacity .15s;
}
.msg-img:hover { opacity: .88; }

/* ── File card ──────────────────────────────────────────────────────── */
.msg-file-card {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-modal); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px; max-width: 320px;
}
.file-card-icon { font-size: 24px; flex-shrink: 0; }
.file-card-info { flex: 1; min-width: 0; }
.file-card-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-card-size { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.file-card-dl {
  flex-shrink: 0; color: var(--text-secondary); padding: 4px; border-radius: 4px;
  display: flex; align-items: center; transition: color .15s, background .15s;
}
.file-card-dl:hover { color: var(--text-white); background: var(--bg-hover); text-decoration: none; }

/* ── Link preview card ──────────────────────────────────────────────── */
.link-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
  padding: 10px 12px;
  max-width: 480px;
  border-left: 3px solid var(--accent, #CC0066);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-modal);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.link-preview:hover { background: var(--bg-hover); text-decoration: none; }
.link-preview-text  { flex: 1; min-width: 0; }
.link-preview-site  {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent, #CC0066);
  margin-bottom: 3px;
}
.link-preview-title {
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-preview-desc {
  font-size: 13px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}
.link-preview-url {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-preview-img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  flex-shrink: 0;
}

/* ── Image lightbox ─────────────────────────────────────────────────── */
#img-lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
#img-lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.88);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#img-lightbox-img {
  position: relative; z-index: 1;
  max-width: 94vw; max-height: 90dvh;
  object-fit: contain; border-radius: var(--radius-lg);
  box-shadow: 0 8px 48px rgba(0,0,0,.7);
  animation: fadeUp .2s ease;
  cursor: pointer; /* tap/click anywhere on the image closes it */
}
#img-lightbox-close {
  position: absolute; z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  background: rgba(0,0,0,.72); border: none; color: #fff;
  font-size: 22px; cursor: pointer; border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
#img-lightbox-close:hover { background: rgba(255,255,255,.15); }

/* ── Context view banner ────────────────────────────────────────────── */
#context-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  background: rgba(204,0,102,.12);
  border-bottom: 1px solid rgba(204,0,102,.3);
  font-size: 13px; color: var(--text-secondary);
  flex-shrink: 0;
}
#context-banner strong { color: var(--text-primary); }
#context-back-btn {
  margin-left: auto; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: var(--radius);
  padding: 3px 10px; font-size: 12px; cursor: pointer;
  transition: background .15s, color .15s;
}
#context-back-btn:hover { background: var(--bg-hover); color: var(--text-white); }

/* ── Highlighted target message ─────────────────────────────────────── */
.msg.msg-highlight {
  background: rgba(204,0,102,.08);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--msg-pad, 12px) - 3px);
  animation: hlFade 2.5s ease forwards;
}
@keyframes hlFade {
  0%   { background: rgba(204,0,102,.18); }
  100% { background: rgba(204,0,102,.04); }
}

/* ── @mention spans (rendered inside messages) ──────────────────────── */
.mention {
  display: inline;
  background: rgba(204,0,102,.12);
  color: var(--accent);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
}
.mention:hover { background: rgba(204,0,102,.22); }
/* Current user's own mention — more prominent highlight */
.mention.mention-me {
  background: rgba(204,0,102,.22);
  color: #ff3399;
  border: 1px solid rgba(204,0,102,.45);
}

/* ── Mention autocomplete dropdown ──────────────────────────────────── */
#mention-dropdown {
  position: fixed;
  z-index: 300;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
  animation: fadeUp .15s ease;
}
#mention-dropdown::-webkit-scrollbar { width: 4px; }
#mention-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.mention-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.mention-item:last-child { border-bottom: none; }
.mention-item:hover, .mention-item.active { background: var(--bg-hover); }

.mention-item-av {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.mention-item-name { font-size: 14px; font-weight: 600; color: var(--text-white); }
.mention-item-full { font-size: 12px; color: var(--text-secondary); margin-left: auto; padding-left: 8px; }

/* ── Mention toast notification ─────────────────────────────────────── */
.mention-toast {
  position: fixed; bottom: 24px; right: 20px; z-index: 400;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-modal);
  border: 1px solid rgba(204,0,102,.4);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg); padding: 12px 16px;
  box-shadow: var(--shadow); cursor: pointer;
  max-width: 320px; min-width: 240px;
  opacity: 0; transform: translateX(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.mention-toast.visible { opacity: 1; transform: translateX(0); }
.mention-toast:hover { background: var(--bg-hover); }
.mention-toast-bell { font-size: 18px; flex-shrink: 0; }
.mention-toast-body { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.mention-toast-body strong { color: var(--text-white); }

/* ── Undo toast (archive actions) ───────────────────────────────────── */
.undo-toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 400;
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 16px;
  box-shadow: var(--shadow);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity .22s ease, transform .22s ease;
}
.undo-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.undo-toast-msg { font-size: 13px; color: var(--text-primary); }
.undo-toast-btn {
  background: transparent; border: none; color: var(--accent);
  font-size: 13px; font-weight: 700; cursor: pointer; padding: 2px 4px;
  border-radius: 4px;
}
.undo-toast-btn:hover { text-decoration: underline; }

/* ── Kanban archive button + Archive view ───────────────────────────── */
#kanban-archive-btn {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted); padding: 6px 10px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
#kanban-archive-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.archive-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  margin: 14px 0 6px;
}
.archive-group-label:first-child { margin-top: 0; }
.archive-empty { color: var(--text-muted); font-size: 14px; padding: 20px 0; text-align: center; }
.archive-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 6px; background: var(--bg-main);
}
.archive-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.archive-row-icon { font-size: 16px; flex-shrink: 0; }
.archive-row-title {
  font-size: 14px; color: var(--text-primary); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.archive-row-sub { font-size: 12px; color: var(--text-muted); }
.archive-row-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Bell icon badge ─────────────────────────────────────────────────── */
.notif-btn-wrap { position: relative; }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff;
  border-radius: 10px; font-size: 10px; font-weight: 700;
  padding: 1px 4px; min-width: 16px; text-align: center;
  border: 1.5px solid var(--bg-main);
  pointer-events: none;
}

/* ── Notifications panel ─────────────────────────────────────────────── */
#notif-panel {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}

#notif-list {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
}
#notif-list::-webkit-scrollbar { width: 4px; }
#notif-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.notif-loading {
  padding: 20px 16px;
  font-size: 13px; color: var(--text-muted); text-align: center;
}

.notif-empty {
  padding: 32px 16px;
  font-size: 13px; color: var(--text-muted); text-align: center;
}

.notif-card {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.notif-card:hover { background: var(--bg-hover); }
.notif-card:last-child { border-bottom: none; }
.notif-card.unread { background: rgba(204,0,102,.05); }
.notif-card.unread:hover { background: rgba(204,0,102,.1); }

.notif-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}

.notif-where {
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 10px; flex-shrink: 0;
}
.notif-where-ch { background: rgba(204,0,102,.15); color: var(--accent); }
.notif-where-dm { background: rgba(43,172,118,.15); color: var(--online); }
.notif-where-board { background: rgba(54,197,240,.15); color: #36C5F0; }

.notif-time {
  font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap;
}

.notif-body {
  display: flex; gap: 8px; align-items: flex-start;
}
.notif-avatar { flex-shrink: 0; }
.notif-content { flex: 1; min-width: 0; }
.notif-name {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.notif-text {
  font-size: 13px; color: var(--text-primary); line-height: 1.4;
  margin-top: 2px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Dashboard notifications modal shows the full read+unread history. Give it a
   stronger read/unread cue than the bell: unread renders bold, read stays
   normal weight. Scoped to .railmodal so the bell panel is unaffected. */
.railmodal .notif-card.unread .notif-name,
.railmodal .notif-card.unread .notif-text { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   Landscape phones — wider but very short screens
   Reduce header height, allow more messages on-screen
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  #chat-header { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  #messages-area { padding: 6px 10px 10px; }
  .msg { padding: 3px 6px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Markdown message rendering (#12)
   ══════════════════════════════════════════════════════════════════════ */
.msg-text code {
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'Consolas','Monaco','Courier New',monospace;
  font-size: 0.88em;
  color: #e8a0c0;
}
.msg-text pre {
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  margin: 6px 0;
}
.msg-text pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
  color: var(--text-primary);
}
.msg-text blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 4px 0;
  color: var(--text-secondary);
  font-style: italic;
}
.msg-text ul, .msg-text ol {
  padding-left: 20px;
  margin: 4px 0;
}
.msg-text li { margin: 2px 0; }
.msg-text h1,.msg-text h2,.msg-text h3 {
  font-size: 1em;
  font-weight: 700;
  margin: 4px 0 2px;
  color: var(--text-white);
}
.msg-text p { margin: 0; }
.msg-text p + p { margin-top: 4px; }
.msg-text strong, .msg-text b { color: var(--text-white); }
.msg-text a { color: var(--text-link); text-decoration: none; }
.msg-text a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   Push notification permission banner (#6)
   ══════════════════════════════════════════════════════════════════════ */
.push-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(204,0,102,.15) 0%, rgba(204,0,102,.08) 100%);
  border-bottom: 1px solid rgba(204,0,102,.25);
  font-size: 13px;
  color: var(--text-primary);
  flex-shrink: 0;
}
.push-banner.hidden { display: none !important; }
.push-banner-icon { font-size: 18px; flex-shrink: 0; }
.push-banner-text { flex: 1; line-height: 1.4; }
.push-banner-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.push-banner-btn:hover { background: var(--accent-hover); }
.push-banner-dismiss {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.push-banner-dismiss:hover { color: var(--text-primary); }

/* ── Big branded "Enable notifications" prompt (installed app, first authed launch) ── */
.push-prompt {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); padding: 24px;
  animation: pushPromptFade .18s ease;
}
.push-prompt.hidden { display: none !important; }
@keyframes pushPromptFade { from { opacity: 0; } to { opacity: 1; } }
.push-prompt-card {
  background: var(--bg-modal, #242424);
  border: 1px solid var(--border, #333);
  border-radius: 18px;
  padding: 38px 28px 24px;
  max-width: 400px; width: 100%;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.push-prompt-icon {
  width: 86px; height: 86px; margin: 0 auto 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #cc0066), var(--accent-hover, #aa0055));
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; line-height: 1;
  box-shadow: 0 8px 24px rgba(204,0,102,.4);
}
.push-prompt-title {
  font-size: 23px; font-weight: 800; margin: 0 0 12px;
  color: var(--text-primary, #fff);
}
.push-prompt-body {
  font-size: 15px; line-height: 1.55;
  color: var(--text-secondary, #b0b0b0);
  margin: 0 0 28px;
}
.push-prompt-enable {
  display: block; width: 100%;
  background: var(--accent, #cc0066); color: #fff;
  border: none; border-radius: 12px;
  padding: 16px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.push-prompt-enable:hover { background: var(--accent-hover, #aa0055); }
.push-prompt-later {
  display: block; width: 100%;
  background: none; border: none;
  color: var(--text-secondary, #8a8a8a);
  font-size: 14px; font-weight: 600;
  padding: 14px 0 4px; margin-top: 4px; cursor: pointer;
}
.push-prompt-later:hover { color: var(--text-primary, #fff); }

/* ── Archived channel banner ────────────────────────────────────────── */
.archived-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 193, 7, 0.12);
  border-bottom: 1px solid rgba(255, 193, 7, 0.25);
  color: #ffc107;
  font-size: 13px;
}
.archived-banner.hidden { display: none; }

/* ── Pin indicator on messages ──────────────────────────────────────── */
.pin-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.pin-indicator svg { opacity: .7; }
.msg-action-btn.pin-btn.pinned { color: var(--accent); }

/* ── Pins panel ─────────────────────────────────────────────────────── */
.pin-card {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.pin-card:hover { background: var(--bg-hover); }
.pin-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.pin-card-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.pin-card-name  { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pin-card-time  { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.pin-card-text  {
  font-size: 13px; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.4;
}
.pin-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.pin-card-pinned-by { font-size: 11px; color: var(--text-muted); }
.pin-card-unpin {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--text-muted); padding: 2px 6px;
  border-radius: 4px; transition: color .15s, background .15s;
}
.pin-card-unpin:hover { color: var(--accent); background: var(--bg-hover); }

/* ── Private channels — lock icon + leave button ────────────────────── */
.ch-lock {
  flex-shrink: 0;
  opacity: .65;
  display: inline-block;
  vertical-align: middle;
}
/* Hover-reveal leave button inside private channel items */
.ch-leave-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  margin-left: auto;
  flex-shrink: 0;
}
.channel-item.is-private:hover .ch-leave-btn { display: inline-flex; }
.ch-leave-btn:hover { color: #e01e5a; background: rgba(224,30,90,.12); }

/* ── Modal — private channel toggle row ─────────────────────────────── */
.modal-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  cursor: pointer;
}
.modal-toggle-label { display: flex; flex-direction: column; gap: 3px; }
.modal-toggle-label strong { font-size: 14px; color: var(--text-primary); }
.modal-toggle-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.modal-toggle-row input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent);
}

/* ── Invite modal user list ─────────────────────────────────────────── */
.invite-user-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius);
  padding: 4px 0;
  margin-bottom: 4px;
}
.invite-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .1s;
}
.invite-user-row:hover { background: var(--bg-hover); }
.invite-user-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.invite-user-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.invite-user-name { flex: 1; font-size: 13px; color: var(--text-primary); }
.invite-user-check { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent); }

/* ── Customer messages (agent inbox) ─────────────────────────────────── */
#cc-list { list-style: none; margin: 0; padding: 0; }
.cc-conv { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; cursor: pointer; border-left: 3px solid transparent; }
.cc-conv:hover { background: var(--bg-hover); }
.cc-conv.active { background: var(--bg-hover); border-left-color: var(--accent); }
.cc-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cc-conv-name { font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-conv-proj { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.cc-conv-snip { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-empty { padding: 12px 16px; font-size: 13px; color: var(--text-muted); }
.cc-section-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; margin-left: 8px; }
.cc-conv.needs-reply .cc-conv-name { font-weight: 700; }
.cc-conv.needs-reply .cc-conv-name::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }

/* Customer conversation rendered in the main message area */
.cc-thread { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.cc-row { display: flex; flex-direction: column; max-width: 72%; }
.cc-row.visitor { align-self: flex-start; align-items: flex-start; }
.cc-row.agent   { align-self: flex-end;   align-items: flex-end; }
.cc-row.system  { align-self: center; max-width: 90%; }
.cc-meta { font-size: 11px; color: var(--text-muted); margin: 0 4px 2px; }
.cc-text { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.cc-row.visitor .cc-text { background: var(--bg-hover); color: var(--text-primary); border-bottom-left-radius: 4px; }
.cc-row.agent   .cc-text { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.cc-row.system  .cc-text { background: transparent; color: var(--text-muted); font-size: 12px; text-align: center; }
.cc-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.cc-bar-status { font-size: 12px; font-weight: 700; margin-right: auto; }
.cc-bar-status.open { color: #2eb67d; }
.cc-bar-status.closed { color: var(--text-muted); }
.cc-resolve-btn { padding: 5px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-hover); color: var(--text-primary); cursor: pointer; }
.cc-resolve-btn:hover { border-color: var(--accent); }
.cc-alert-btn { padding: 5px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.cc-alert-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cc-alert-btn:disabled { opacity: .55; cursor: default; background: var(--bg-hover); color: var(--text-muted); border-color: var(--border); }
.cc-typing { padding: 2px 16px 8px; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════
   CALENDAR — mini month (right rail) + expanded modal
   Events come from /api/calendar/events (kanban due dates, access-scoped).
   ══════════════════════════════════════════════════════════════════════ */
.minical-section {
  border-top: 1px solid var(--border);
  padding: 10px 12px 12px;
  flex-shrink: 0;
}
.minical-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.minical-controls { display: flex; gap: 2px; }
.minical-nav {
  width: 22px; height: 22px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-secondary);
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.minical-nav:hover { background: var(--bg-hover); color: var(--text-primary); }
.minical-month { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.minical-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.minical-dow {
  font-size: 9px; font-weight: 700; color: var(--text-muted);
  text-align: center; text-transform: uppercase; padding-bottom: 2px;
}
.minical-day {
  position: relative;
  height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-secondary);
  cursor: default; user-select: none;
}
.minical-day.out { opacity: .32; }
.minical-day.has-events { cursor: pointer; font-weight: 600; color: var(--text-primary); }
.minical-day.has-events:hover { background: var(--bg-hover); }
.minical-day.today {
  background: var(--accent); color: #fff; font-weight: 700;
}
.minical-day.today.has-events:hover { filter: brightness(1.1); background: var(--accent); }
.minical-dots {
  position: absolute; bottom: 2px; left: 0; right: 0;
  display: flex; gap: 2px; justify-content: center; pointer-events: none;
}
.minical-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.minical-day.today .minical-dot { background: #fff; }

/* Day popover (event list for one day) */
.minical-pop {
  position: fixed; z-index: 750;
  width: 240px; max-height: 300px; overflow-y: auto;
  background: var(--bg-modal); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.5);
  padding: 8px;
}
.minical-pop-date { font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 2px 4px 6px; text-transform: uppercase; }
.minical-pop-item {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  background: transparent; border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 6px 8px; margin-bottom: 2px;
}
.minical-pop-item:hover { background: var(--bg-hover); }
.minical-pop-title { font-size: 12px; font-weight: 600; color: var(--text-primary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minical-pop-proj { font-size: 11px; color: var(--text-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minical-pop-item.overdue .minical-pop-title { color: #ff6b81; }

/* ── Expanded calendar modal ── */
.calmodal-backdrop {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.calmodal {
  width: min(1100px, 94vw); height: min(780px, 92vh);
  background: var(--bg-main); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.calmodal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.calmodal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); min-width: 170px; }
.calmodal-btn {
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-hover);
  color: var(--text-primary); font-size: 13px; padding: 5px 12px; cursor: pointer;
}
.calmodal-btn:hover { border-color: var(--accent); }
.calmodal-mine { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin-left: 8px; }
.calmodal-spacer { flex: 1; }
.calmodal-feed-btn { font-size: 12px; color: var(--text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; }
.calmodal-feed-btn:hover { color: var(--text-primary); }
.calmodal-close {
  border: none; background: transparent; color: var(--text-secondary);
  font-size: 18px; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
}
.calmodal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.calmodal-dows { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.calmodal-dow { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding: 6px 10px; }
.calmodal-grid {
  flex: 1; display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr; overflow-y: auto;
}
.calmodal-cell {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 5px 6px; min-height: 92px; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
}
.calmodal-cell:nth-child(7n) { border-right: none; }
.calmodal-cell.out { background: rgba(0,0,0,.18); }
.calmodal-cellnum { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.calmodal-cell.out .calmodal-cellnum { opacity: .4; }
.calmodal-cellnum.today {
  background: var(--accent); color: #fff; border-radius: 6px;
  display: inline-block; padding: 0 6px; align-self: flex-start;
}
.calmodal-chip {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--text-primary);
  background: var(--chip-bg, rgba(204,0,102,.18));
  border-left: 3px solid var(--chip-edge, var(--accent));
  border-radius: 5px; padding: 2px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calmodal-chip:hover { filter: brightness(1.25); }
.calmodal-chip.overdue { border-left-color: #ff4d6a; color: #ff8fa0; }
.calmodal-more { font-size: 10px; color: var(--text-muted); padding-left: 4px; }
.calmodal-foot {
  border-top: 1px solid var(--border); padding: 10px 18px;
  display: flex; align-items: center; gap: 10px; min-height: 46px;
}
.calmodal-feed-url {
  flex: 1; font-size: 12px; padding: 6px 9px;
  background: var(--bg-input); border: 1px solid var(--border-input);
  border-radius: 7px; color: var(--text-primary);
}
.calmodal-foot-note { font-size: 11px; color: var(--text-muted); }

/* Mobile: the right rail does not exist — hide the mini calendar (the
   expanded modal still works if opened by other entry points later). */
@media (max-width: 768px) {
  .minical-section { display: none; }
  .calmodal { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* ── Rail pop-outs (Directory / Call History expand — mirrors the calendar ⛶) ── */
.rail-expand {
  width: 22px; height: 22px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-secondary);
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rail-expand:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Narrow list flavour of the calendar modal, shared by both pop-outs */
.calmodal-narrow { width: min(560px, 94vw); height: min(720px, 90vh); }
.calmodal-body { flex: 1; overflow-y: auto; padding: 10px 16px 14px; }
.calmodal-body::-webkit-scrollbar { width: 4px; }
.calmodal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.calmodal-search {
  width: 100%; font-size: 13px; padding: 8px 10px; margin-bottom: 8px;
  background: var(--bg-input); border: 1px solid var(--border-input);
  border-radius: 7px; color: var(--text-primary); outline: none;
}
.calmodal-search:focus { border-color: var(--accent); }
.railmodal-userlist { list-style: none; padding: 0 0 8px; }
.railmodal-userlist .user-item { padding: 6px 8px; }
.railmodal-callhist { display: flex; flex-direction: column; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════════
   MY DASHBOARD — personal full-screen view (same takeover pattern as the
   kanban board: sidebar stays, #main + #right-panel give way).
   ══════════════════════════════════════════════════════════════════════ */
.dash-btn {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px 2px; padding: 8px 10px; width: calc(100% - 24px);
  background: var(--bg-sidebar-h); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary);
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.dash-btn:hover { background: var(--bg-hover); }
.dash-btn-ico { font-size: 14px; }
.dash-badge {
  margin-left: auto; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 7px;
}
.dash-badge.hidden { display: none; }

#dashboard-view {
  display: none;
  grid-column: 2 / 4;
  flex-direction: column;
  background: var(--bg-main);
  overflow: hidden;
}
#app.dashboard-active #dashboard-view { display: flex; }
#app.dashboard-active #main,
#app.dashboard-active #right-panel { display: none; }

#dash-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#dash-header h2 { font-size: 17px; margin: 0; color: var(--text-primary); }
#dash-date { margin-left: auto; font-size: 13px; color: var(--text-muted); }

#dash-chips {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 14px 20px 0; flex-shrink: 0;
}
.dash-chip {
  background: var(--bg-sidebar); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.dash-chip-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.dash-chip-num { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.dash-chip-sub { font-size: 12px; font-weight: 600; color: #ff6b81; margin-left: 6px; }

#dash-grid {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; padding: 14px 20px 20px; align-items: start;
}
.dash-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-tile {
  background: var(--bg-sidebar); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}
.dash-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
.dash-link {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--text-muted); text-decoration: underline;
}
.dash-link:hover { color: var(--text-primary); }

.dash-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 8px; background: var(--bg-input);
  margin-bottom: 6px; cursor: pointer; font-size: 13px; color: var(--text-primary);
}
.dash-row:hover { background: var(--bg-hover); }
.dash-row-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.dash-row-sub { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.dash-row-sub.due-today { color: #ffb020; font-weight: 600; }
.dash-row-sub.overdue { color: #ff6b81; font-weight: 600; }
.dash-pill {
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 9px; padding: 1px 8px; flex-shrink: 0;
}
.dash-mention {
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
}
.dash-cc-needs { border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.dash-group {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 4px;
}
.dash-group:first-child { margin-top: 0; }
.dash-subhead {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 4px;
}
.dash-empty { color: var(--text-muted); font-size: 12px; padding: 4px 2px 6px; }
#dash-due-soon { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
#dash-due-soon b { color: var(--text-primary); font-weight: 600; }

/* Mobile: My Dashboard as a full-screen layer (mirrors the kanban takeover) */
@media (max-width: 768px) {
  /* Reveal the entry point — sits at the top of the list, above Channels +
     Direct, so it shows on both tabs. Also reachable from the in-chat ⋮ menu. */
  .dash-btn { display: flex; }

  /* On mobile #app is display:block, so the desktop grid-column placement does
     nothing. Make the dashboard a fixed full-screen layer and hide the chat and
     tab bar underneath it, exactly like the project board. */
  #app.dashboard-active #main           { display: none; }
  #app.dashboard-active #mobile-tab-bar { display: none; }
  #app.dashboard-active #dashboard-view {
    display: flex;
    position: fixed; inset: 0;
    z-index: 30; height: 100%;
    grid-column: auto;                  /* neutralise the desktop grid placement */
  }
  #dash-header { padding-top: max(14px, env(safe-area-inset-top)); }
  #dash-date  { display: none; }                          /* no room beside the title */
  #dash-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* 2 x 2 */
  #dash-grid  { grid-template-columns: 1fr; }              /* stack the two columns */
}