/* McHub - CSS */
:root {
  /* ===========================================================================
     BRAND TOKENS  -  workspace-overridable.
     A workspace owner/admin can set these three in Admin > Settings > Workspace
     Branding. Defaults below are the McKodev brand (cinnabar red + tangerine).
     theme.js recomputes the derived --primary-* / --accent-* / --bg-sidebar-*
     scale in JS when a workspace picks its own colours, so any brand still gets
     correct hover/soft/ring shades and readable contrast. We only theme the
     rail + accents - the content surfaces stay neutral - so it always looks
     premium without "painting the page".
     =========================================================================== */
  --brand-primary: #ED4236;     /* cinnabar  - primary actions, links, active state */
  --brand-secondary: #1A1A2E;   /* deep navy - the sidebar / rail */
  --brand-accent: #F7861F;      /* tangerine - highlights, secondary CTAs, accents */

  /* Primary scale (defaults shown explicitly; theme.js overrides for custom brands) */
  --primary: var(--brand-primary);
  --primary-dark: #C93529;
  --primary-light: #FF6B5E;
  --primary-soft: #FDECEB;                  /* subtle tinted background */
  --primary-ring: rgba(237, 66, 54, 0.35);  /* focus ring */
  --on-primary: #FFFFFF;                     /* text/icon on a primary fill */

  /* Accent scale */
  --accent: var(--brand-accent);
  --accent-dark: #D86E0C;
  --accent-soft: #FEF0E0;
  --on-accent: #1F2430;   /* dark text on tangerine reads ~6:1 vs ~2.5:1 for white */

  /* Rail / sidebar (driven by --brand-secondary) */
  --bg-sidebar: var(--brand-secondary);
  --bg-sidebar-hover: #252545;
  --bg-sidebar-active: #2D2D52;

  /* Neutral surfaces  -  intentionally NOT themed (keeps content crisp + legible) */
  --bg-main: #FFFFFF;
  --bg-subtle: #F7F8FA;
  --bg-input: #F2F3F5;
  --bg-hover: #F0F1F3;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;

  /* Text */
  --text-primary: #1F2430;
  --text-secondary: #5B6473;
  --text-muted: #8A93A3;
  --text-light: #FFFFFF;

  /* Borders */
  --border: #E6E8EC;
  --border-light: #F0F1F3;

  /* Semantic status  -  kept independent of brand so a red brand != danger */
  --success: #1F9D57;
  --success-soft: #E8F6EE;
  --warning: #E08600;
  --warning-soft: #FCF1DE;
  --danger: #E5484D;
  --danger-soft: #FCE9EA;
  --info: #2F6FEB;
  --info-soft: #E7EEFD;
  --online: #2FB344;
  --away: #F5A623;
  --busy: var(--danger);

  /* Elevation  -  a real scale for consistent, premium depth */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.10);
  --shadow: 0 4px 14px rgba(16,24,40,0.10);
  --shadow-lg: 0 14px 40px rgba(16,24,40,0.16);

  /* Radius scale */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Surface/layout aliases that some rules reference but system.css does NOT
     define. (Semantic colours, type scale and z-index live in system.css
     :root, which loads after this file and is their authority - we don't
     duplicate them here.) --bg-primary fixes ~11 rules that referenced an
     undefined token and were rendering with no background. */
  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-2);
  --bg-content: var(--bg-main);
  --text: var(--text-primary);
  --mobile-tabbar-h: 56px;

  --sidebar-width: 260px;
  --header-height: 56px;
  --thread-width: 350px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-primary); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* Premium, consistent keyboard focus ring across every interactive control.
   Uses :focus-visible so it only shows for keyboard/AT users, not mouse clicks. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Buttons */
/* The transparent 1px border is load-bearing: buttons are auto-height, so a
   bordered variant (.btn-secondary, .btn-outline-*) used to render 2px taller
   than a borderless one (.btn-primary) sitting next to it in the same modal
   footer. Declaring the border on the base makes every variant the same
   height and lets variants swap only the border COLOUR. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 600; transition: background 0.18s, box-shadow 0.18s, transform 0.05s; }
.btn:active { transform: translateY(0.5px); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-full { width: 100%; }
.btn-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-light); font-size: 18px; transition: background 0.2s; }
.btn-icon:hover { background: rgba(255,255,255,0.1); }

/* Bare class="btn" (no variant) is used all over the app for modal
   Cancel/Close buttons. With no background and no border it rendered as
   floating text beside a solid .btn-primary and read as "not a button".
   Give it the secondary look. Exclusions: every real variant, the composer
   send button (.send-btn is .btn.btn-primary but also styled on its own),
   and anything that already sets its own inline background - those are
   deliberately-coloured one-offs (Global Task, Confirm Vote, …) that must
   not gain a grey outline. */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-danger):not(.btn-success):not(.btn-ghost):not(.btn-icon):not(.btn-outline-primary):not(.btn-outline-danger):not(.send-btn):not([style*="background"]) {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-danger):not(.btn-success):not(.btn-ghost):not(.btn-icon):not(.btn-outline-primary):not(.btn-outline-danger):not(.send-btn):not([style*="background"]):hover {
  background: var(--bg-hover);
}

/* ── Busy / in-flight affordances (UI.busy, UI.busyEl, UI.dialog) ──
   currentColor border so the ring is visible on solid, outlined, ghost and
   dark buttons alike without per-variant overrides. */
.btn-spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: mchub-spin 0.6s linear infinite;
}
.btn-busy-label { white-space: nowrap; }
/* Beat system.css `.btn:disabled { opacity: .5 }` - a spinner at half opacity
   reads as "broken", not "working". */
button[aria-busy="true"]:disabled,
a[aria-busy="true"],
.btn[aria-busy="true"] { opacity: 0.9; cursor: progress; }
/* Rows/cards that aren't buttons (UI.busyEl) */
.is-busy { opacity: 0.55; cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.6s; }
}

/* === LOGIN PAGE === */
.login-page { background: linear-gradient(135deg, var(--bg-sidebar) 0%, #16213e 100%); display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-container { width: 100%; max-width: 420px; padding: 20px; }
.login-card { background: #fff; border-radius: 12px; padding: 40px; box-shadow: var(--shadow); }
.login-header { text-align: center; margin-bottom: 30px; }
.logo { font-size: 28px; color: var(--bg-sidebar); }
.logo span { color: var(--primary); }
.tagline { color: var(--text-muted); margin-top: 4px; font-size: 14px; }
.auth-form h2 { font-size: 20px; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.form-group input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; transition: border 0.2s; }
.form-group input:focus { outline: none; border-color: var(--primary); }
.form-error { color: var(--busy); font-size: 13px; margin-top: 10px; min-height: 20px; }
.form-success { color: var(--online); font-size: 13px; margin-top: 10px; padding: 10px; background: rgba(68, 183, 0, 0.1); border-radius: var(--radius); }
.form-switch { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted); }

/* === APP LAYOUT === */
.app-container { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-header { display: flex; align-items: center; height: var(--header-height); background: var(--bg-sidebar); color: var(--text-light); padding: 0 16px; gap: 12px; z-index: 250; flex-shrink: 0; }
.sidebar-toggle { display: none; color: var(--text-light); font-size: 22px; }
.header-business { flex-shrink: 0; }
/* Shared secondary-page header bits (People/Tasks/Settings via AppHeader). */
.header-back { color: var(--text-light); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius); background: var(--bg-sidebar-hover); text-decoration: none; flex-shrink: 0; }
.header-back:hover { background: var(--bg-sidebar-active); text-decoration: none; }
.page-title { font-size: 18px; font-weight: 700; color: var(--text-light); flex: 1; }
.business-select { background: var(--bg-sidebar-hover); color: var(--text-light); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius); padding: 6px 10px; font-size: 14px; max-width: clamp(120px, 28vw, 200px); min-width: 0; }
.business-select option { background: var(--bg-sidebar); }
.header-channel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
#currentChannelName { font-weight: 600; font-size: 16px; white-space: nowrap; }

/* Inline header action button (e.g. "+ Add" on discussions). Sits on the
   dark app-header so colors are tuned for that background. */
.header-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.10); color: var(--text-light);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.header-add-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.header-add-btn:active { transform: translateY(1px); }
.header-add-btn .material-icons { font-size: 15px; opacity: 0.9; }
.channel-topic { font-size: 12px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-user { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.user-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--online); }
.user-status-dot.away { background: var(--away); }
.user-status-dot.busy { background: var(--busy); }
.user-status-dot.offline { background: #888; }
#myUsername { font-size: 14px; }
.user-menu-wrap { position: relative; z-index: 300; }
.user-menu { position: absolute; right: 0; top: 100%; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); min-width: 160px; z-index: 300; overflow: hidden; }
.user-menu a { display: block; padding: 10px 16px; color: var(--text-primary); font-size: 14px; }
.user-menu a:hover { background: var(--bg-hover); text-decoration: none; }
.user-menu hr { border: none; border-top: 1px solid var(--border); margin: 0; }

/* Body */
.app-body { display: flex; flex: 1; overflow: hidden; }

/* Sidebar */
.sidebar { width: var(--sidebar-width); background: var(--bg-sidebar); color: var(--text-light); display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.05); overflow: hidden; }

/* Sidebar tabs */
.sidebar-tabs {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px; border: none; background: none;
  color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  cursor: pointer; transition: color 0.15s, background 0.15s;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.sidebar-tab .material-icons { font-size: 18px; }
.sidebar-tab:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.03); }
.sidebar-tab.active {
  color: #fff; border-bottom-color: var(--primary);
}
.sidebar-tab-content {
  display: none; flex-direction: column;
  overflow-y: auto; flex: 1;
}
.sidebar-tab-content.active { display: flex; }

.sidebar-section { padding: 12px 0; }
.sidebar-page-link {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.06); color: var(--text-light);
  text-decoration: none; font-size: 14px; font-weight: 600;
  transition: background 0.15s;
}
.sidebar-page-link:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }
.sidebar-page-link .material-icons { font-size: 22px; }
.sidebar-page-arrow { margin-left: auto; font-size: 18px !important; opacity: 0.4; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.5); letter-spacing: 0.5px; }
.sidebar-list li { padding: 6px 16px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: background 0.15s; border-left: 3px solid transparent; }
.sidebar-list li:hover { background: var(--bg-sidebar-hover); }
.sidebar-list li.active { background: var(--bg-sidebar-active); border-left-color: var(--primary); }
.sidebar-list li .channel-hash { color: rgba(255,255,255,0.4); font-weight: 700; }
.sidebar-list li .unread-badge { background: var(--primary); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 10px; margin-left: auto; }
.sidebar-list li .dm-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.sidebar-list li .member-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sidebar-list li .member-status.online { background: var(--online); }
.sidebar-list li .member-status.away { background: var(--away); }
.sidebar-list li .member-status.busy { background: var(--busy); }
.sidebar-list li .member-status.offline { background: #555; }
.members-list li { font-size: 13px; color: rgba(255,255,255,0.7); }

/* Task badge in sidebar */
.task-badge {
  display: flex; align-items: center; gap: 2px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--radius-pill); margin-left: auto; flex-shrink: 0;
}

/* Chat area */
.chat-area { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-main); }
.messages-container { flex: 1; overflow: hidden; position: relative; }
.messages-scroll { height: 100%; overflow-y: auto; padding: 16px; }
.typing-indicator { height: 24px; padding: 0 16px; font-size: 13px; color: var(--text-muted); font-style: italic; display: flex; align-items: center; }

/* Messages */
.message { display: flex; gap: 10px; padding: 6px 0; position: relative; }
.message:hover { background: var(--bg-hover); border-radius: var(--radius); }
.message:hover .message-actions { display: flex; }
.message-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.message-body { flex: 1; min-width: 0; }
.message-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.message-sender { font-weight: 600; font-size: 14px; }
.message-time { font-size: 11px; color: var(--text-muted); }
.message-edited { font-size: 11px; color: var(--text-muted); font-style: italic; }
.message-content { font-size: 15px; line-height: 1.55; color: var(--text-primary); word-wrap: break-word; white-space: pre-wrap; }
.message-content.deleted { color: var(--text-muted); font-style: italic; }
.message-file { margin-top: 6px; }
.message-file img { max-width: 400px; max-height: 300px; border-radius: var(--radius); cursor: pointer; }
.message-file .file-card { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.message-file .file-card:hover { background: var(--bg-hover); }
.message-thread-info { margin-top: 4px; font-size: 12px; color: var(--primary); cursor: pointer; }
.message-thread-info:hover { text-decoration: underline; }
/* Floating per-message action toolbar. THE definition - system.css used to
   re-declare position/radius/shadow/border with !important on top of this
   block, so the two had to be read together to know what actually rendered.
   Merged here; system.css no longer touches it. */
.message-actions {
  display: none; position: absolute; right: 12px; top: 4px; z-index: 5;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10); overflow: hidden;
}
.message-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 7px; font-size: 12px; color: var(--text-secondary);
  transition: background 0.12s, color 0.12s;
}
.message-actions button:hover { background: var(--bg-hover); color: var(--primary); }

/* Hide the top-bar Select button while in selection mode - the
   selection toolbar provides Cancel/SelectAll/Forward/Delete instead. */
body.selection-mode #selectModeBtn { display: none; }
.message.system { justify-content: center; }
.message.system .message-content { font-size: 13px; color: var(--text-muted); text-align: center; font-style: italic; }

/* Input area */
.message-input-area { padding: 8px 16px 16px; border-top: 1px solid var(--border-light); position: relative; }
.input-wrap { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; }
.input-wrap:focus-within { border-color: var(--primary); }
#messageInput, #threadInput { flex: 1; border: none; background: transparent; resize: none; outline: none; font-size: 16px; max-height: 120px; min-height: 24px; line-height: 1.4; }
/* Composer control row - attach / AI draft / send / voice note all sit on one
   line, so they all get ONE height (36px, the .btn-icon size). Before this the
   row alternated 32/36/32/36 and looked ragged. */
.attach-btn { color: var(--text-muted); font-size: 20px; width: 36px; height: 36px; }
.send-btn { padding: 6px 16px; min-height: 36px; flex-shrink: 0; }

/* Inline thread replies */
.inline-thread {
  margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--primary);
  background: rgba(0,0,0,0.02); border-radius: 0 8px 8px 0;
}
.inline-thread-replies { display: flex; flex-direction: column; gap: 6px; }
.inline-reply {
  display: flex; gap: 8px; align-items: flex-start; padding: 4px 0;
}
.inline-thread-input {
  display: flex; gap: 6px; align-items: center; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border-light);
}
.inline-thread-text {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 10px; font-size: 13px; outline: none; background: #fff;
}
.inline-thread-text:focus { border-color: var(--primary); }
.inline-thread-send {
  background: var(--primary); color: #fff; border: none; border-radius: var(--radius);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.inline-thread-send:hover { background: var(--primary-dark); }

/* Floating tasks widget - top-right, below the header/banners. */
.floating-tasks {
  position: fixed; top: calc(var(--header-height) + 108px); right: 16px; bottom: auto; z-index: 200;
}
.floating-tasks-toggle {
  display: flex; align-items: center; gap: 5px;
  background: var(--danger); color: #fff; border: none; border-radius: var(--radius-pill);
  padding: 8px 16px; cursor: pointer; box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 700; transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.floating-tasks-toggle:hover { transform: translateY(-1px); box-shadow: 0 16px 44px rgba(16,24,40,0.22); }
.floating-tasks-toggle[data-count="0"] { background: var(--success); }
.floating-tasks-count { font-size: 12px; }
.floating-tasks-panel {
  position: absolute; top: 100%; right: 0; bottom: auto; margin-top: 8px;
  width: 340px; max-height: 420px; background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  overflow: hidden; display: flex; flex-direction: column;
}
.floating-tasks-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.floating-tasks-list { flex: 1; overflow-y: auto; max-height: 360px; }
.floating-task-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.1s;
  font-size: 13px;
}
.floating-task-item:hover { background: var(--bg-hover); }
.floating-task-item:last-child { border-bottom: none; }
.floating-task-item .ft-icon { flex-shrink: 0; margin-top: 2px; }
.floating-task-item .ft-info { flex: 1; min-width: 0; }
.floating-task-item .ft-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floating-task-item .ft-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 8px; }
.floating-task-item.ft-overdue { background: var(--danger-soft); }
.floating-task-item.ft-overdue .ft-title { color: var(--danger); }
.floating-tasks-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; }

@media (max-width: 480px) {
  .floating-tasks-panel { width: calc(100vw - 32px); right: -8px; }
}

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: #fff; border-radius: 12px; padding: 24px; max-width: 440px; width: 90%; box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto; }
/* Wide legacy modals: when the content declares its own width (note version
   history's two-pane layout), let the container grow instead of clipping it
   at 440px (which cut off the Restore button behind a horizontal scrollbar). */
.modal:has(.note-history-modal) { max-width: min(880px, 94vw); width: min(880px, 94vw); }
.note-history-modal { max-width: 100%; }
.modal h3 { margin-bottom: 16px; }
.modal .form-group { margin-bottom: 14px; }
.modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* Toast */
/* pointer-events:none is load-bearing: the container is parked over the
   bottom-right corner - directly on top of the composer's send button - and
   toasts are purely informational (nothing binds a click). Without this the
   send button is dead for the toast's full lifetime after any action that
   reports success. */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 20px; border-radius: var(--radius); color: #fff; font-size: 14px; box-shadow: var(--shadow); animation: slideIn 0.3s ease; pointer-events: none; }
.toast.success { background: var(--online); }
.toast.error { background: var(--busy); }
.toast.info { background: var(--bg-sidebar); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes pwa-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.4); } 50% { box-shadow: 0 0 0 8px rgba(229,57,53,0); } }

/* Responsive */
@media (max-width: 768px) {
  /* The fixed drawers start BELOW the header AND the unfulfilled-task banner
     (its height is mirrored into --task-banner-height by app.js) so the red
     bar never sits on top of the workspace switcher / sidebar. */
  .sidebar-toggle { display: block; }
  .sidebar { position: fixed; left: -100%; top: calc(var(--header-height) + var(--task-banner-height, 0px)); bottom: 0; z-index: 50; transition: left 0.3s ease; width: 280px; }
  .sidebar.open { left: 0; }
  .sidebar-overlay { display: none; position: fixed; inset: 0; top: calc(var(--header-height) + var(--task-banner-height, 0px)); background: rgba(0,0,0,0.4); z-index: 49; }
  .sidebar.open ~ .sidebar-overlay { display: block; }
  .header-business { display: none; }
  .sidebar.open .sidebar-business-mobile { display: block !important; }
  .thread-panel { position: fixed; right: 0; top: calc(var(--header-height) + var(--task-banner-height, 0px)); bottom: 0; z-index: 50; width: 100%; max-width: 400px; }
  .channel-topic { display: none; }
  .header-channel { font-size: 14px; }
}

/* File Viewer / Lightbox */
.fileviewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fileviewer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
.fileviewer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 95vw;
  max-height: 95vh;
  width: 100%;
  z-index: 1;
}
.fileviewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}
.fileviewer-filename {
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fileviewer-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
/* ── One shape for every action in the file-viewer toolbar ──
   Send to / Annotate / Delete are <button>s, Open-in-new-tab and Download are
   <a>s, and they had drifted apart: the Download link had no border, radius 10
   instead of 6, and wasn't flex, so it sat taller and rounder than its
   neighbours. Geometry is declared once here; each control keeps its own
   colour rule. Deliberately only border-WIDTH/STYLE - the variants below set
   their own border-color via the `border` shorthand and must keep it.
   Specificity is (0,2,0) to match the mobile icon-only overrides further down
   the file, which come later and therefore still win on small screens. */
.fileviewer-toolbar-actions .fileviewer-sendto-btn,
.fileviewer-toolbar-actions .fileviewer-annotate-btn,
.fileviewer-toolbar-actions .fileviewer-delete-btn,
.fileviewer-toolbar-actions .fileviewer-newtab-btn,
.fileviewer-toolbar-actions .fileviewer-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fileviewer-toolbar-actions .fileviewer-newtab-btn:hover,
.fileviewer-toolbar-actions .fileviewer-download-btn:hover { text-decoration: none; }

/* Icon-only, so it keeps the shared height and border but loses the label
   padding that the text buttons need. */
.fileviewer-toolbar-actions .fileviewer-newtab-btn {
  color: #fff;
  padding: 6px 10px;
  border-color: rgba(255, 255, 255, 0.2);
}
.fileviewer-toolbar-actions .fileviewer-newtab-btn:hover { background: rgba(255, 255, 255, 0.14); }

.fileviewer-toolbar-actions .fileviewer-download-btn {
  color: #fff;
  background: var(--primary);
  border-color: transparent;
}
.fileviewer-toolbar-actions .fileviewer-download-btn:hover {
  background: var(--primary-dark);
  text-decoration: none;
}
.fileviewer-close-btn {
  color: #fff;
  font-size: 28px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}
.fileviewer-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.fileviewer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
/* Gallery navigation */
.fileviewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: rgba(255,255,255,0.15); border: none;
  color: #fff; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.fileviewer-nav:hover { background: rgba(255,255,255,0.3); }
.fileviewer-nav .material-icons { font-size: 32px; }
.fileviewer-prev { left: 16px; }
.fileviewer-next { right: 16px; }
@media (max-width: 480px) {
  .fileviewer-nav { width: 36px; height: 36px; }
  .fileviewer-nav .material-icons { font-size: 24px; }
  .fileviewer-prev { left: 6px; }
  .fileviewer-next { right: 6px; }
}

.fileviewer-image {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.fileviewer-pdf {
  width: 90vw;
  height: 80vh;
  border: none;
  border-radius: var(--radius);
  background: #fff;
}
.fileviewer-pdf-fallback {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 15px;
  padding: 40px;
}

/* Read Receipts */
.read-receipt {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  user-select: none;
  position: relative;
  letter-spacing: -2px;
  font-weight: 600;
}
.read-receipt.read {
  color: #34b7f1;
}
.read-receipt:hover {
  opacity: 0.7;
}
.read-receipt-tooltip {
  position: fixed;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 8px 0;
  z-index: 1000;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: normal;
  font-weight: 400;
}
.read-receipt-tooltip-header {
  padding: 4px 12px 6px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.read-receipt-item {
  padding: 4px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.read-receipt-item strong {
  font-weight: 500;
}
.read-receipt-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Material Icons sizing in buttons */
.btn-icon .material-icons { font-size: 20px; }
.message-actions .material-icons { font-size: 18px; }
.sidebar-heading .material-icons { font-size: 20px; }
.send-btn .material-icons { font-size: 20px; }
.attach-btn .material-icons { font-size: 22px; }

/* Voice Note Button */
.vnote-btn {
  color: var(--text-muted); font-size: 20px; width: 36px; height: 36px;
  flex-shrink: 0; border: none; background: none; cursor: pointer;
  border-radius: 50%; transition: background 0.15s, color 0.15s;
}
.vnote-btn:hover { background: rgba(0,137,123,0.1); color: #00897b; }
.vnote-btn .material-icons { font-size: 22px; }

/* Voice Note Recording Bar */
.vnote-recording {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg-input);
  border: 1px solid var(--danger); border-radius: var(--radius);
  animation: vnoteSlideIn 0.2s ease;
}
@keyframes vnoteSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Cancel and Send are a matched pair either side of the timer - same circle. */
.vnote-cancel {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--danger-soft); color: var(--danger); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.15s;
}
.vnote-cancel:hover { filter: brightness(0.96); }
.vnote-recording-info {
  flex: 1; display: flex; align-items: center; gap: 10px;
}
.vnote-pulse {
  width: 12px; height: 12px; border-radius: 50%; background: var(--danger);
  animation: vnotePulse 1s ease-in-out infinite;
}
@keyframes vnotePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } }
.vnote-timer {
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.vnote-send {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--success); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.15s;
}
.vnote-send:hover { filter: brightness(1.15); }

/* Transcribe Button on Audio Messages */
/* AI Transcribe icon button */
.ai-transcribe-btn {
  border: none; background: none; color: #9c27b0; cursor: pointer;
  padding: 4px; border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.ai-transcribe-btn:hover { background: rgba(156,39,176,0.1); }
.ai-transcribe-btn:disabled { opacity: 0.5; cursor: default; }
.ai-transcribe-done { color: #4caf50; padding: 4px; display: inline-flex; align-items: center; }
.ai-transcribe-done .material-icons { font-size: 20px; }
.ai-transcribe-btn .material-icons { font-size: 20px; }

.vnote-transcribe-btn {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: none; color: var(--text-muted); font-size: 11px;
  cursor: pointer; transition: all 0.15s;
}
.vnote-transcribe-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: #00897b; }
.vnote-transcribe-btn .material-icons { font-size: 14px; }
.vnote-transcript {
  margin-top: 6px; padding: 8px 10px; font-size: 13px; line-height: 1.5;
  background: var(--bg-hover); border-radius: 8px; color: var(--text-primary);
  border-left: 3px solid #00897b;
}
.user-menu a .material-icons { vertical-align: middle; margin-right: 4px; }

@media (max-width: 768px) {
  /* Hide secondary navbar items to save space */
  #peopleLink, #createMeetingBtn { display: none !important; }
  /* Tasks, Protocols, Search and Select collapse to icon-only on mobile so the
     header fits. font-size:0 hides the bare text label (and the BETA tag),
     then the icon is restored - the absolutely-positioned count badges keep
     their own inline font-size, so they still show. */
  #tasksLink, #protocolsLink, #searchOpenBtn, #selectModeBtn { font-size: 0 !important; padding: 6px 8px !important; }
  #tasksLink .material-icons, #protocolsLink .material-icons,
  #searchOpenBtn .material-icons, #selectModeBtn .material-icons { font-size: 22px; }
  #protocolsLink sup { display: none !important; }
  /* Floating tasks widget - top-right, below header/banners (does not block the composer) */
  .floating-tasks { top: calc(var(--header-height) + 108px); right: 8px; bottom: auto; }
  .floating-tasks-toggle { padding: 7px 13px; font-size: 12px; }
  .floating-tasks-panel { width: calc(100vw - 16px); right: -4px; max-height: 70vh; }
  /* Profile dropdown: pin to the viewport's right edge so it can never get
     pushed off-screen by a tight header. */
  .user-menu {
    position: fixed; top: calc(var(--header-height) + 6px); right: 8px; left: auto;
    min-width: 190px; max-width: calc(100vw - 16px);
  }
  /* Mobile has no hover, so the toolbar is revealed by long-press / tap
     (.actions-open, set in app code) instead of being stuck open on every
     message. `!important` is needed to beat `.message:hover .message-actions`,
     which sticky-hover still fires on touch. (Was a pair of competing blocks
     here and in system.css; folded into this one.) */
  .message-actions { display: none !important; opacity: 1; }
  .message.actions-open .message-actions { display: flex !important; }
  .message-actions button { padding: 6px 8px; }
  /* Bigger touch targets for checklist items */
  .vote-option, .my-task-item { min-height: 40px; }
  /* Make modals fill more of the screen */
  .modal { max-width: 95vw; padding: 16px; }
  /* Bigger font in input */
  #messageInput { font-size: 16px; } /* prevents iOS zoom */
}

/* Block iOS native text-selection callout (Copy / Search with Google) on
   message bubbles. Without this, long-press triggers the OS menu and the
   app's own action menu can never show. Scoped to touch devices so desktop
   can still select-and-copy text with the mouse. Copy is exposed through
   the in-app message action menu instead. */
@media (pointer: coarse) {
  .message,
  .message-body,
  .message-content,
  .message-sender,
  .message-time {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* Editing a message uses a real textarea - keep selection working there. */
  .message textarea,
  .message input {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
  }
}

@media (max-width: 480px) {
  .app-header { padding: 0 8px; gap: 6px; }
  .messages-scroll { padding: 8px; }
  .message-input-area { padding: 8px; }
  .business-select { max-width: 120px; font-size: 13px; }
  .header-channel { font-size: 13px; min-width: 0; flex: 1; }
  .header-channel #currentChannelName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Hide channel settings on very small screens */
  #channelSettingsBtn { display: none; }
  /* Tighter image grid */
  .image-grid { max-width: 100%; }
  /* Share out targets stack on tiny screens */
  .share-targets { grid-template-columns: 1fr; }
}

/* === ATTACHMENT POPUP === */
.attach-popup {
  position: absolute;
  bottom: 100%;
  left: 8px;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 6px 0;
  min-width: 200px;
  z-index: 100;
  animation: attachPopupIn 0.15s ease;
}
@keyframes attachPopupIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.attach-popup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.15s;
}
.attach-popup-item:hover {
  background: var(--bg-hover);
}
.attach-popup-item:first-child {
  border-radius: 10px 10px 0 0;
}
.attach-popup-item:last-child {
  border-radius: 0 0 10px 10px;
}
.attach-popup-item .material-icons {
  font-size: 22px;
  color: var(--text-secondary);
  width: 28px;
  text-align: center;
}
.attach-popup-item:hover .material-icons {
  color: var(--primary);
}

/* Drag active state */
.messages-container.drag-active {
  background: rgba(237, 66, 54, 0.04);
  outline: 2px dashed var(--primary);
  outline-offset: -4px;
}

/* === FILE PREVIEW CARD (before sending) === */
/* Upload Progress Bar */
.upload-progress-bar {
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 10px; animation: previewSlideIn 0.2s ease;
}
.upload-progress-info {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px;
}
.upload-progress-icon { font-size: 20px; color: #00897b; }
.upload-progress-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-pct { font-size: 12px; font-weight: 700; color: #00897b; min-width: 36px; text-align: right; }
.upload-progress-track {
  height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.upload-progress-fill {
  height: 100%; width: 0%; background: #00897b; border-radius: 3px;
  transition: width 0.2s ease;
}

.file-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: previewSlideIn 0.2s ease;
}
@keyframes previewSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.file-preview-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.file-preview-icon {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-preview-icon .material-icons {
  font-size: 28px;
  color: #fff;
}
.file-preview-info {
  flex: 1;
  min-width: 0;
}
.file-preview-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-preview-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.file-preview-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.file-preview-remove:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--busy);
}
.file-preview-annotate {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.file-preview-annotate:hover {
  background: rgba(25, 118, 210, 0.1);
  color: #1976d2;
}
.file-preview-annotate .material-icons {
  font-size: 18px;
}

/* === FILE ATTACHMENTS IN MESSAGES === */

/* Image grid (consecutive images from same sender) */
.image-grid {
  display: grid; gap: 4px; margin-top: 4px;
  max-width: 400px; border-radius: 10px; overflow: hidden;
}
.image-grid-2 { grid-template-columns: 1fr 1fr; }
.image-grid-4 { grid-template-columns: 1fr 1fr; }
.image-grid-6 { grid-template-columns: 1fr 1fr 1fr; }
.image-grid-item {
  overflow: hidden; position: relative; aspect-ratio: 1;
  background: #f0f0f0;
}
.image-grid-item img {
  width: 100%; height: 100%; object-fit: cover; cursor: pointer;
  transition: transform 0.15s;
}
.image-grid-item img:hover { transform: scale(1.05); }
/* Per-image delete affordance. Speaks the same visual language as the
   floating .message-actions toolbar (white chip, hairline border, soft
   shadow, muted glyph that goes hot on hover) instead of the old black
   translucent circle, so hovering a message and hovering an image in that
   message no longer produce two different-looking controls. */
.image-grid-delete {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; padding: 0;
  background: #fff; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background 0.12s, color 0.12s;
}
.image-grid-delete .material-icons { font-size: 18px; color: inherit; }
.image-grid-delete:hover { background: var(--bg-hover); color: var(--danger); }
.image-grid-item:hover .image-grid-delete { display: flex; }

/* Image attachment */
.file-attachment-image img {
  max-width: 300px;
  max-height: 260px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s, transform 0.2s;
  display: block;
}
.file-attachment-image img:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transform: scale(1.01);
}
.file-attachment-image-name {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Video attachment */
.file-attachment-video {
  max-width: 350px;
}
.file-video-player {
  width: 100%;
  max-width: 350px;
  border-radius: 10px;
  display: block;
  background: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.file-attachment-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.file-attachment-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.file-attachment-size {
  flex-shrink: 0;
  color: var(--text-muted);
}
.file-attachment-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  text-decoration: none;
}
.file-attachment-download .material-icons {
  font-size: 16px;
}
.file-attachment-download:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--primary);
  text-decoration: none;
}

/* Audio player card */
.audio-player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 360px;
}
.audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s;
}
.audio-play-btn:hover {
  background: var(--primary-dark);
}
.audio-play-btn:active {
  transform: scale(0.95);
}
.audio-play-btn .material-icons {
  font-size: 22px;
}
.audio-player-body {
  flex: 1;
  min-width: 0;
}
.audio-player-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.audio-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.audio-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}
.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.1s linear;
}
.audio-time {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 32px;
}
.audio-player-size {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Document / file cards */
.file-doc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  max-width: 340px;
  transition: background 0.15s, box-shadow 0.15s;
}
.file-doc-card:hover {
  background: var(--bg-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Accent left border by file type */
.file-doc-pdf { border-left: 3px solid #F44336; }
.file-doc-word { border-left: 3px solid #2196F3; }
.file-doc-xls { border-left: 3px solid #4CAF50; }
.file-doc-txt { border-left: 3px solid #607D8B; }
.file-doc-generic { border-left: 3px solid #78909C; }

.file-doc-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-doc-icon .material-icons {
  font-size: 24px;
}
.file-doc-info {
  flex: 1;
  min-width: 0;
}
.file-doc-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-doc-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.file-doc-action {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.15s;
}
.file-doc-action .material-icons {
  font-size: 20px;
}
.file-doc-card:hover .file-doc-action {
  color: var(--primary);
}
.file-doc-actions-row {
  display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.file-doc-action-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: none;
  color: var(--text-secondary); cursor: pointer;
  text-decoration: none; transition: all 0.15s; font-family: inherit;
}
.file-doc-action-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.file-doc-action-link .material-icons { font-size: 14px; }
.file-doc-sign-link { color: #9c27b0 !important; border-color: rgba(156,39,176,0.3) !important; }
.file-doc-sign-link:hover { background: rgba(156,39,176,0.08) !important; }

/* === UNREAD BADGES === */
.unread-badge {
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  display: inline-block;
  margin-left: auto;
  flex-shrink: 0;
}

.sidebar-item.has-unread .sidebar-item-name {
  font-weight: 700;
  color: var(--text-light);
}

/* Org badge used by the unified "All Workspaces" inbox (M / A / V chips). */
.org-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  text-transform: uppercase;
}
#currentChannelName .org-badge {
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 11px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Sidebar heading unread count */
.sidebar-heading .heading-unread {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-left: 4px;
}

/* Favorite star in sidebar */
.sidebar-fav-star {
  font-size: 14px;
  color: #ffb300;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

/* === CONTEXT MENU === */
.context-menu {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  min-width: 180px;
  padding: 4px 0;
  animation: ctxMenuIn 0.12s ease;
}
@keyframes ctxMenuIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s;
}
.context-menu-item:hover {
  background: var(--bg-hover);
}
.context-menu-item .material-icons {
  font-size: 18px;
  color: var(--text-secondary);
}

/* ── Image Annotation Tool ── */
.annotate-overlay {
  position: fixed; inset: 0; z-index: 2500;
  display: flex; flex-direction: column;
  background: rgba(0,0,0,0.92);
}
.annotate-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: #1a1d23;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0; flex-wrap: wrap; gap: 8px;
}
.annotate-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.annotate-tool {
  width: 38px; height: 38px; border: none; border-radius: 8px;
  background: transparent; color: #aaa; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.annotate-tool:hover { background: rgba(255,255,255,0.1); color: #fff; }
.annotate-tool.active { background: var(--primary, #e53935); color: #fff; }
.annotate-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.15); margin: 0 4px; }
.annotate-color {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: all 0.15s; flex-shrink: 0;
}
.annotate-color:hover { transform: scale(1.15); }
.annotate-color.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.annotate-width {
  width: 38px; height: 38px; border: none; border-radius: 8px;
  background: transparent; color: #aaa; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.annotate-width:hover { background: rgba(255,255,255,0.1); color: #fff; }
.annotate-width.active { background: rgba(255,255,255,0.15); color: #fff; }
/* Action controls share ONE fixed height, box model and radius so the
   cancel / update / destination select / send-copy row lines up evenly
   instead of each control being a slightly different size. */
.annotate-actions { display: flex; align-items: center; gap: 8px; }
.annotate-cancel, .annotate-update, .annotate-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; box-sizing: border-box;
  border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.annotate-actions .material-icons { font-size: 18px; }
.annotate-cancel {
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: #ccc; font-weight: 500;
}
.annotate-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.annotate-update {
  border: 1px solid #00897b; background: transparent; color: #4db6ac;
}
.annotate-update:hover { background: #00897b; color: #fff; }
.annotate-update:disabled { opacity: 0.6; cursor: not-allowed; }
.annotate-send {
  border: 1px solid transparent; padding: 0 20px;
  background: var(--primary, #e53935); color: #fff;
}
.annotate-send:hover { filter: brightness(1.1); }
.annotate-send:disabled { opacity: 0.6; cursor: not-allowed; }
.annotate-canvas-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 16px;
}
#annotateCanvas { border-radius: 4px; box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.annotate-text-input {
  position: fixed; z-index: 2600; padding: 4px 8px;
  background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px; color: inherit; font-size: 16px; font-weight: bold;
  outline: none; min-width: 100px;
}
.fileviewer-annotate-btn {
  display: flex; align-items: center; gap: 4px; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
  background: transparent; color: #fff; cursor: pointer; font-size: 13px;
  transition: all 0.15s;
}
.fileviewer-annotate-btn:hover { background: var(--primary, #e53935); border-color: transparent; }
.fileviewer-sendto-btn {
  display: flex; align-items: center; gap: 4px; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
  background: transparent; color: #fff; cursor: pointer; font-size: 13px;
  transition: all 0.15s;
}
.fileviewer-sendto-btn:hover { background: #1976d2; border-color: transparent; }

/* ── @Mentions ── */
.mention {
  background: rgba(229, 57, 53, 0.15); color: #e53935;
  padding: 1px 5px; border-radius: 4px; font-weight: 500; font-size: 0.95em;
}
.mention-me {
  background: rgba(229, 57, 53, 0.3); font-weight: 700;
}
.mention-all {
  background: rgba(255, 152, 0, 0.2); color: #ff9800; font-weight: 600;
}

/* Mention autocomplete popup */
.mention-popup {
  position: fixed; z-index: 1500;
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  max-height: 280px; overflow-y: auto; display: none;
}
.mention-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; transition: background 0.1s;
}
.mention-item:hover, .mention-item.active {
  background: #f5f5f5;
}
.mention-item:first-child { border-radius: 10px 10px 0 0; }
.mention-item:last-child { border-radius: 0 0 10px 10px; }
.mention-item-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.mention-item-avatar.special {
  background: #ff9800;
}
.mention-item-name {
  font-weight: 500; color: var(--text-primary); font-size: 13px;
}
.mention-item-username {
  color: var(--text-muted); font-size: 12px; margin-left: auto;
}

/* ── Markdown in Messages ── */
.message-content code {
  background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em; color: #f8b4b4;
}
/* ── Full Markdown Rendering ── */
.message-content p { margin: 4px 0; }
.message-content p:first-child { margin-top: 0; }
.message-content p:last-child { margin-bottom: 0; }

.message-content strong { color: inherit; font-weight: 700; }
.message-content em { color: inherit; font-style: italic; }
.message-content del { text-decoration: line-through; opacity: 0.7; }

/* Headings - full hierarchy */
.message-content h1 { font-size: 1.5em; font-weight: 700; margin: 12px 0 6px; border-bottom: 1px solid var(--border, #2a2d35); padding-bottom: 4px; }
.message-content h2 { font-size: 1.3em; font-weight: 700; margin: 10px 0 4px; border-bottom: 1px solid var(--border, #2a2d35); padding-bottom: 3px; }
.message-content h3 { font-size: 1.15em; font-weight: 700; margin: 8px 0 4px; }
.message-content h4 { font-size: 1.05em; font-weight: 700; margin: 6px 0 2px; }
.message-content h5 { font-size: 1em; font-weight: 700; margin: 4px 0 2px; }
.message-content h6 { font-size: 0.9em; font-weight: 700; margin: 4px 0 2px; color: var(--text-muted, #aaa); }

/* Links */
.message-content a { color: #42a5f5; text-decoration: none; }
.message-content a:hover { text-decoration: underline; color: #64b5f6; }

/* Inline code */
.message-content code {
  background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Liberation Mono', monospace;
  font-size: 0.88em; color: #f8b4b4; word-break: break-word;
}

/* Code blocks */
.md-code-block {
  position: relative; margin: 8px 0; border-radius: 8px; overflow: hidden;
  background: #0d1117; border: 1px solid rgba(255,255,255,0.08);
}
.md-code-lang {
  position: absolute; top: 0; right: 0; padding: 2px 10px;
  font-size: 11px; color: #666; background: rgba(255,255,255,0.05);
  border-radius: 0 8px 0 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.md-code-block pre {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  background: transparent; border: none; border-radius: 0;
}
.md-code-block pre code {
  background: transparent; padding: 0; color: #c9d1d9;
  font-size: 0.85em; line-height: 1.5;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

/* Standalone pre (without .md-code-block wrapper) */
.message-content > pre {
  background: #0d1117; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 14px 16px; margin: 8px 0; overflow-x: auto;
}
.message-content > pre code {
  background: transparent; padding: 0; font-size: 0.85em; color: #c9d1d9;
}

/* Blockquotes - nested support */
.message-content blockquote {
  border-left: 3px solid var(--primary, #e53935); margin: 8px 0; padding: 6px 14px;
  color: var(--text-muted, #aaa); background: rgba(255,255,255,0.02); border-radius: 0 6px 6px 0;
}
.message-content blockquote blockquote { border-left-color: #ff9800; margin: 4px 0; }
.message-content blockquote p { margin: 2px 0; }

/* Lists */
.message-content ul, .message-content ol { margin: 6px 0; padding-left: 24px; }
.message-content li { margin: 3px 0; line-height: 1.5; }
.message-content li > ul, .message-content li > ol { margin: 2px 0; }
.message-content li > p { margin: 2px 0; }

/* Task lists */
.md-task { list-style: none; margin-left: -20px; }
.md-task input[type="checkbox"] { display: none; }
.md-task-check { margin-right: 4px; }

/* Tables - full support */
.message-content table {
  border-collapse: collapse; margin: 8px 0; width: auto; max-width: 100%;
  font-size: 0.9em; overflow-x: auto; display: block;
}
.message-content thead { background: rgba(255,255,255,0.05); }
.message-content th {
  border: 1px solid var(--border, #2a2d35); padding: 6px 12px;
  font-weight: 600; text-align: left;
}
.message-content td {
  border: 1px solid var(--border, #2a2d35); padding: 6px 12px;
}
.message-content tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* Horizontal rule */
.message-content hr {
  border: none; border-top: 1px solid var(--border, #2a2d35); margin: 12px 0;
}

/* Images inline in markdown */
.message-content img, .md-inline-img {
  max-width: 100%; max-height: 400px; border-radius: 8px; margin: 4px 0;
  cursor: pointer;
}

/* Definition lists (if supported) */
.message-content dl { margin: 6px 0; }
.message-content dt { font-weight: 700; margin-top: 4px; }
.message-content dd { margin-left: 20px; color: var(--text-muted, #aaa); }

/* Footnotes */
.message-content .footnotes { font-size: 0.85em; color: var(--text-muted, #aaa); border-top: 1px solid var(--border, #2a2d35); margin-top: 12px; padding-top: 8px; }
.message-content .footnotes ol { padding-left: 20px; }

/* Abbreviations */
.message-content abbr { text-decoration: underline dotted; cursor: help; }

/* ── Task Manager ── */
.task-creator h3 { margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.task-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-input); color: var(--text-primary);
  font-size: 14px; font-family: inherit;
}
.task-input:focus { border-color: var(--primary); outline: none; }
.task-input::placeholder { color: var(--text-muted); }
.task-input:focus { border-color: var(--primary, #e53935); outline: none; }
.form-row { display: flex; gap: 12px; }
.task-checklist { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 10; }
.task-checklist-item:last-child .assignee-dropdown {
  bottom: 100%; top: auto; margin-top: 0; margin-bottom: 2px;
}
.task-checklist-item {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 6px; background: var(--bg-primary, #ffffff);
}
.task-checklist-item .checklist-item-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.task-checklist-item .checklist-item-header .checklist-text { flex: 1 1 auto; min-width: 0; }
.task-checklist-item .checklist-item-header .task-remove-item { flex: 0 0 auto; }
.task-checklist-item .checklist-item-row2 {
  display: flex; gap: 8px; align-items: center; width: 100%; flex-wrap: wrap;
}
.task-checklist-item .checklist-due { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 6px 8px; max-width: 100%; }
.task-checklist-item .assignee-search-wrap { flex: 1 1 auto; min-width: 100px; position: relative; }
.task-checklist-item .assignee-search-input { width: 100%; }
.assignee-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  background: var(--bg-primary, #ffffff); border: 1px solid var(--border); border-radius: 8px;
  max-height: 180px; overflow-y: auto; margin-top: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.assignee-dropdown.open { display: block; background: var(--bg-primary, #ffffff); }
.assignee-dropdown-item {
  padding: 7px 12px; font-size: 13px; cursor: pointer; transition: background 0.1s;
  background: var(--bg-primary, #ffffff);
}
.assignee-dropdown-item:hover { background: var(--bg-hover); }
.assignee-dropdown-empty {
  padding: 8px 12px; font-size: 12px; color: var(--text-muted); text-align: center;
}
.assignee-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.assignee-tags:empty { display: none; margin-bottom: 0; }
.assignee-tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--primary, #1976d2); color: #fff;
  font-size: 11px; font-weight: 500; padding: 2px 4px 2px 8px; border-radius: 12px;
}
.assignee-tag-remove {
  background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer;
  font-size: 14px; padding: 0 2px; line-height: 1; display: flex; align-items: center;
}
.assignee-tag-remove:hover { color: #fff; }
.task-remove-item {
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: transparent; color: #666; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.task-remove-item:hover { background: rgba(244,67,54,0.15); color: #f44336; }
.task-add-item {
  display: flex; align-items: center; gap: 4px; padding: 6px 12px;
  border: 1px dashed var(--border, #2a2d35); border-radius: 8px;
  background: transparent; color: var(--text-muted, #888); cursor: pointer;
  font-size: 13px; margin-top: 4px; transition: all 0.15s;
}
.task-add-item:hover { border-color: var(--primary); color: var(--primary); }

/* PWA Share Picker */
.share-picker { max-width: 480px; }
.share-files-preview {
  display: flex; flex-direction: column; gap: 8px; margin: 12px 0;
  max-height: 200px; overflow-y: auto;
  padding: 10px; background: #f8f9fa; border-radius: 8px;
}
.share-file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px; background: #fff; border-radius: 6px;
}
.share-file-item img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 4px;
}
.share-file-item .material-icons {
  font-size: 32px; color: var(--text-muted); width: 40px; text-align: center;
}
.share-file-info { flex: 1; min-width: 0; }
.share-file-name {
  font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.share-file-size { font-size: 11px; color: var(--text-muted); }
.share-text-preview {
  background: #f8f9fa; border-radius: 8px; padding: 10px;
  font-size: 13px; margin: 12px 0; max-height: 100px; overflow-y: auto;
  word-wrap: break-word;
}
.share-targets-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
}
.share-target-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  cursor: pointer; transition: background 0.1s; font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.share-target-item:last-child { border-bottom: none; }
.share-target-item:hover { background: var(--bg-hover, #f5f5f5); }
.share-target-item .material-icons { font-size: 18px; color: var(--text-muted); }

/* Forwarded label on messages */
.msg-forwarded-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted); font-style: italic;
  margin-bottom: 2px;
}
.msg-forwarded-label .material-icons { font-size: 13px; }

/* Task approval per-item */
.task-item-approved {
  color: #4caf50; display: inline-flex; align-items: center; margin-left: auto; flex-shrink: 0;
}
.task-item-approve-btn {
  background: none; border: 1px solid #ff9800; color: #ff9800; border-radius: 6px;
  padding: 1px 6px; cursor: pointer; display: inline-flex; align-items: center;
  margin-left: auto; flex-shrink: 0; transition: all 0.15s;
}
.task-item-approve-btn:hover { background: rgba(255,152,0,0.1); }
.task-card-actions {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.task-approvers-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 4px; font-family: inherit;
  transition: all 0.15s;
}
.task-approvers-btn:hover { border-color: #1565c0; color: #1565c0; }

/* ── Emoji Reactions ── */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.msg-reaction {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-primary);
  cursor: pointer; font-size: 13px; transition: all 0.15s;
  font-family: inherit;
}
.msg-reaction:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.msg-reaction.reacted {
  background: rgba(0,137,123,0.1); border-color: #00897b;
}
.msg-reaction-emoji { font-size: 16px; line-height: 1; }
.msg-reaction-count { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.msg-reaction.reacted .msg-reaction-count { color: #00897b; }
.msg-reaction-add {
  padding: 2px 6px; color: var(--text-muted); border-style: dashed;
}
.msg-reaction-add:hover { color: var(--text-primary); }

/* Reaction hover card - who reacted, one per line, with when they reacted.
   pointer-events: none so it can never trap the hover away from the pill. */
.reaction-hover-card {
  position: fixed; z-index: var(--z-tooltip, 900);
  background: #1f1f2a; color: #fff;
  border-radius: 8px; padding: 8px 10px;
  font-size: 12px; line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  pointer-events: none;
  max-width: 260px; max-height: 240px; overflow: hidden;
}
.reaction-hover-card .rhc-title {
  font-weight: 600; margin-bottom: 4px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.reaction-hover-card .rhc-row {
  display: flex; justify-content: space-between; gap: 14px; white-space: nowrap;
}
.reaction-hover-card .rhc-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.reaction-hover-card .rhc-time { color: rgba(255,255,255,0.65); font-size: 11px; }

/* Emoji Picker */
.emoji-picker {
  position: fixed; z-index: 500;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  padding: 10px; width: 252px;
  animation: emojiPickerIn 0.15s ease;
}
@keyframes emojiPickerIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.emoji-picker-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.emoji-picker-item {
  width: 28px; height: 28px; border: none; background: none;
  border-radius: 6px; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s;
}
.emoji-picker-item:hover { background: var(--bg-hover); }

/* ── Socket connection status bar ── */
.socket-status {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 16px; font-size: 12px; font-weight: 600;
  z-index: 150; text-align: center;
}
.socket-status-ok {
  background: #4caf50; color: #fff;
}
.socket-status-reconnecting {
  background: #ff9800; color: #fff;
}
.socket-status-offline {
  background: #f44336; color: #fff;
}
.socket-spin {
  animation: socketSpin 1s linear infinite;
}
@keyframes socketSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Quoted message (inside message body) ── */
.msg-quoted {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--bg-hover);
  border-left: 3px solid #00897b;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.15s;
  max-width: 100%;
}
.msg-quoted:hover { filter: brightness(0.97); }
.msg-quoted-icon {
  font-size: 18px !important; color: #00897b;
  margin-top: 1px; flex-shrink: 0;
}
.msg-quoted-body { flex: 1; min-width: 0; }
.msg-quoted-sender {
  font-weight: 700; color: #00897b; font-size: 12px;
  margin-bottom: 2px;
}
.msg-quoted-text {
  color: var(--text-secondary);
  white-space: pre-wrap; word-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Brief flash highlight when scrolling to a quoted message */
.msg-flash {
  animation: msgFlash 1.5s ease;
}
@keyframes msgFlash {
  0%, 100% { background: transparent; }
  30% { background: rgba(0,137,123,0.2); }
}

/* ── Search dropdown above composer ── */
.search-dropdown {
  position: absolute;
  bottom: 100%;
  left: 16px;
  right: 16px;
  max-height: 50vh;
  overflow-y: auto;
  background: var(--bg-content, #fff);
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
  z-index: 50;
}
.search-results-header {
  padding: 8px 14px;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-light);
  position: sticky; top: 0;
  background: var(--bg-content, #fff);
}
.search-result-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.1s;
}
.search-result-row:last-child { border-bottom: none; }
.search-result-row:hover { background: var(--bg-sidebar-hover, rgba(0,0,0,0.04)); }
.search-result-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-bottom: 2px;
}
.search-result-target { font-weight: 600; color: var(--primary, #e53935); }
.search-result-sender { color: var(--text); font-weight: 500; }
.search-result-time { color: var(--text-muted); margin-left: auto; font-size: 11px; }
.search-result-snippet {
  font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-snippet mark {
  background: #fff59d; color: inherit; padding: 0 2px; border-radius: 2px;
}
.search-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ── Quote preview above input ── */
.quote-preview-wrap {
  display: flex; align-items: stretch; gap: 8px;
  padding: 8px 12px; margin-bottom: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-left: 3px solid #00897b;
  border-radius: 10px;
  animation: previewSlideIn 0.2s ease;
}
.quote-preview-wrap .msg-quoted {
  flex: 1; background: none; border-left: none; padding: 0; margin: 0;
  cursor: default;
}
.quote-preview-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 4px; border-radius: 6px;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s;
}
.quote-preview-close:hover { background: rgba(244,67,54,0.1); color: #f44336; }
.quote-preview-close .material-icons { font-size: 18px; }

/* ── Collaborative Notes ── */
/* Sidebar */
.note-sidebar-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  cursor: pointer; border-radius: 6px; transition: background 0.1s;
  font-size: 13px;
}
.note-sidebar-item:hover { background: var(--bg-sidebar-hover); }
.note-sidebar-icon { font-size: 18px; color: #00897b; }
.note-sidebar-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-shared-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: rgba(0,137,123,0.12); color: #00897b; font-weight: 600;
}
.note-collab-count {
  font-size: 10px; padding: 1px 6px; border-radius: 6px;
  background: rgba(33,150,243,0.12); color: #42a5f5; font-weight: 600;
}
.sidebar-empty {
  font-size: 12px; color: var(--text-muted); padding: 6px 12px; font-style: italic;
}

/* ── Note Full Document View ── */
.note-view {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}

/* Top bar */
.note-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.note-back-btn {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  padding: 6px; border-radius: 8px; display: flex; align-items: center;
  transition: background 0.15s;
}
.note-back-btn:hover { background: var(--bg-hover); }
.note-topbar-info {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
}
.note-topbar-title {
  font-weight: 600; font-size: 15px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.note-topbar-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.note-topbar-collab {
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
}
.note-topbar-btn {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 6px; border-radius: 6px; display: flex; align-items: center;
  transition: background 0.15s, color 0.15s;
}
.note-topbar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.note-topbar-delete:hover { color: #f44336; background: rgba(244,67,54,0.08); }

/* Toolbar */
.note-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.note-tb-btn {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  padding: 6px; border-radius: 6px; display: flex; align-items: center;
  transition: background 0.15s, color 0.15s;
}
.note-tb-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.note-tb-btn.active { background: rgba(0,137,123,0.12); color: #00897b; }
.note-tb-btn .material-icons { font-size: 20px; }
.note-tb-sep {
  width: 1px; height: 20px; background: var(--border); margin: 0 6px;
}

/* Document scroll area */
.note-doc-scroll {
  flex: 1; overflow-y: auto; padding: 32px 48px;
  background: var(--bg-main);
}
@media (max-width: 768px) {
  .note-doc-scroll { padding: 20px 16px; }
}

/* Document title */
.note-doc-title {
  width: 100%; border: none; background: none;
  font-size: 28px; font-weight: 700; color: var(--text-primary);
  outline: none; padding: 0; margin-bottom: 20px;
  font-family: inherit;
}
.note-doc-title::placeholder { color: var(--text-muted); }

/* Document body (contenteditable) */
.note-doc-body {
  min-height: 400px; outline: none;
  font-size: 15px; line-height: 1.8; color: var(--text-primary);
  font-family: inherit;
}
.note-doc-body:empty::before {
  content: attr(placeholder);
  color: var(--text-muted); pointer-events: none;
}
/* ── Collab editor (Quill + Yjs) cursors and presence ── */
.collab-cursors {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 5;
}
.collab-caret {
  position: absolute; width: 2px;
  pointer-events: none; opacity: 0.85;
}
.collab-caret-flag {
  position: absolute; top: -16px; left: 0;
  font-size: 10px; font-weight: 600; color: #fff;
  padding: 2px 6px; border-radius: 3px 3px 3px 0;
  white-space: nowrap; pointer-events: none;
}
.note-presence {
  display: flex; align-items: center; gap: 4px; margin-right: 8px;
}
.note-presence-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap;
}
.note-presence-pill .pp-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.7);
}
.collab-editor { position: relative; }

/* Aggressively strip every default border/background Quill snow draws so the
   editor reads as flowing document content, not a boxed widget. */
.collab-editor .ql-toolbar,
.collab-editor .ql-toolbar.ql-snow,
.collab-editor .ql-container,
.collab-editor .ql-container.ql-snow,
.collab-editor .ql-editor {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.collab-editor .ql-container.ql-snow { font-family: inherit; }
.collab-editor .ql-toolbar.ql-snow {
  padding: 0 0 12px;
  margin-bottom: 12px;
}
.collab-editor .ql-toolbar.ql-snow .ql-formats { margin-right: 14px; }
.collab-editor .ql-toolbar.ql-snow .ql-formats:last-child { margin-right: 0; }
.collab-editor .ql-toolbar.ql-snow button {
  width: 26px; height: 26px; padding: 3px; border-radius: 4px;
}
.collab-editor .ql-toolbar.ql-snow button:hover { background: rgba(0,0,0,0.06); }
.collab-editor .ql-toolbar.ql-snow button.ql-active {
  background: rgba(0,0,0,0.08); color: var(--text-primary);
}

/* ── Google-Docs-style page layout ──
   Soft gray canvas, one centered white "sheet" with document margins, and a
   rounded Docs-blue formatting toolbar pinned to the top while you scroll. */
.note-doc-scroll { background: #f1f4f9; padding: 18px 16px 110px; }
.note-page {
  max-width: 880px; margin: 0 auto;
  background: var(--bg-card, #fff);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(60,64,67,0.12), 0 8px 24px rgba(60,64,67,0.08);
  padding: 0 76px 110px;
  min-height: 82vh;
}
.note-page .note-doc-title {
  padding-top: 40px; margin-bottom: 4px;
  font-size: 32px; letter-spacing: -0.3px;
}
/* Toolbar: rounded Docs-blue bar, sticky, hovering just above the text. */
.note-page .ql-toolbar.ql-snow {
  position: sticky; top: 8px; z-index: 30;
  background: #edf2fa !important;
  border: 1px solid rgba(60,64,67,0.06) !important;
  border-radius: 24px;
  margin: 10px -40px 30px;
  padding: 6px 16px !important;
  box-shadow: 0 1px 4px rgba(60,64,67,0.14);
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 3px;
}
.note-page .ql-toolbar.ql-snow .ql-formats {
  margin-right: 6px; padding-right: 8px;
  border-right: 1px solid rgba(60,64,67,0.14);
  display: inline-flex; align-items: center; gap: 1px;
}
.note-page .ql-toolbar.ql-snow .ql-formats:last-child { border-right: 0; padding-right: 0; }
.note-page .ql-toolbar.ql-snow button {
  width: 28px; height: 28px; padding: 4px; border-radius: 6px;
  color: #444746;
}
.note-page .ql-toolbar.ql-snow button:hover { background: rgba(68,71,70,0.10); }
.note-page .ql-toolbar.ql-snow button.ql-active {
  background: #d3e3fd; color: #0b57d0;
}
.note-page .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: #0b57d0; }
.note-page .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: #0b57d0; }
.note-page .ql-toolbar.ql-snow .ql-picker { font-size: 13px; color: #444746; }
.note-page .ql-toolbar.ql-snow .ql-picker-label { border-radius: 6px; }
.note-page .ql-toolbar.ql-snow .ql-picker-label:hover { background: rgba(68,71,70,0.10); }
.note-page .ql-toolbar.ql-snow .ql-picker-options {
  border-radius: 10px; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 16px rgba(60,64,67,0.2); padding: 6px;
}

/* Document typography - reads like a real doc, not a form field. */
.note-page .ql-editor {
  font-size: 15.5px; line-height: 1.75; color: #1f1f1f;
  padding-bottom: 40px;
}
.note-page .ql-editor h1 { font-size: 28px; font-weight: 700; margin: 26px 0 10px; line-height: 1.25; color: #1f1f1f; }
.note-page .ql-editor h2 { font-size: 21px; font-weight: 700; margin: 22px 0 8px;  line-height: 1.3;  color: #1f1f1f; }
.note-page .ql-editor h3 { font-size: 16.5px; font-weight: 700; margin: 18px 0 6px; color: #434343; }
.note-page .ql-editor p { margin: 0 0 6px; }
.note-page .ql-editor li { margin: 3px 0; }
.note-page .ql-editor blockquote {
  border-left: 3px solid #c7d3e8; background: #f8fafd;
  margin: 10px 0; padding: 8px 16px; border-radius: 0 8px 8px 0;
  color: #4a5568;
}
.note-page .ql-editor pre,
.note-page .ql-editor .ql-code-block-container {
  background: #f6f8fa !important; color: #24292f !important;
  border: 1px solid #e4e8ee; border-radius: 8px;
  padding: 12px 16px; margin: 10px 0;
  font-size: 13px;
}
.note-page .ql-editor code { background: #f0f2f5; border-radius: 4px; padding: 1px 5px; font-size: 13px; color: #c7254e; }
.note-page .ql-editor a { color: #0b57d0; }
.note-page .ql-editor img { max-width: 100%; border-radius: 6px; }
.note-page .ql-editor hr { border: 0; border-top: 1px solid #e0e0e0; margin: 18px 0; }

/* .MD button in the note top bar - same footprint and color as its icon
   siblings (icons render 24px tall inside 6px padding), so the row of
   buttons reads as one uniform set. */
.note-topbar-md {
  font-weight: 800; font-size: 11px; letter-spacing: 0.4px;
  min-height: 36px; min-width: 36px;
  justify-content: center;
}

/* No mobile reflow for notes: on narrow screens the page keeps its DESKTOP
   layout and is scaled to fit (notes.js sets a zoom factor on .note-page),
   scrollable and pinch-zoomable - like viewing the desktop site. */
@media (max-width: 900px) {
  .note-doc-scroll { padding: 10px 8px 80px; }
}

/* Body - document typography */
.collab-editor .ql-editor {
  min-height: 480px;
  padding: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
}
.collab-editor .ql-editor.ql-blank::before {
  left: 0; right: 0; font-style: normal; color: var(--text-muted);
}

/* Headings - clear hierarchy, document-like spacing */
.collab-editor .ql-editor h1 { font-size: 26px; font-weight: 700; margin: 22px 0 8px; line-height: 1.3; }
.collab-editor .ql-editor h2 { font-size: 20px; font-weight: 700; margin: 20px 0 8px; line-height: 1.3; }
.collab-editor .ql-editor h3 { font-size: 17px; font-weight: 700; margin: 18px 0 6px; line-height: 1.35; }

/* Paragraphs */
.collab-editor .ql-editor p { margin: 0 0 10px; }

/* Lists - comfortable spacing, no cramped Quill defaults */
.collab-editor .ql-editor ol,
.collab-editor .ql-editor ul {
  padding-left: 1.6em; margin: 6px 0 14px;
}
.collab-editor .ql-editor li { padding-left: 4px; margin: 4px 0; line-height: 1.7; }

/* Checklist (list:check) - modern rounded checkboxes */
.collab-editor .ql-editor li[data-list="checked"] > .ql-ui::before,
.collab-editor .ql-editor li[data-list="unchecked"] > .ql-ui::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 15px; height: 15px;
  border: 1.5px solid #b0b4ba; border-radius: 3px; background: #fff;
  margin-right: 4px;
}
.collab-editor .ql-editor li[data-list="checked"] > .ql-ui::before {
  background: #00897b; border-color: #00897b;
}
.collab-editor .ql-editor li[data-list="checked"] {
  color: var(--text-muted); text-decoration: line-through;
}

/* Tables - clean borders */
.collab-editor .ql-editor table { border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.collab-editor .ql-editor table td, .collab-editor .ql-editor table th {
  border: 1px solid rgba(0,0,0,0.12); padding: 6px 10px;
}
.collab-editor .ql-editor table th { background: rgba(0,0,0,0.03); font-weight: 600; }
/* Resized cells keep their content instead of stretching the column back out */
.collab-editor .ql-editor table[style*="fixed"] td { overflow-wrap: break-word; }
/* While a column border is being dragged: keep the resize cursor everywhere
   and stop text selection from fighting the drag */
body.collab-col-resizing, body.collab-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Links */
.collab-editor .ql-editor a { color: #1565c0; text-decoration: underline; }

.note-doc-body h1, .note-doc-body h2, .note-doc-body h3,
.note-doc-body h4, .note-doc-body h5, .note-doc-body h6 {
  font-weight: 700; margin: 16px 0 8px; color: var(--text-primary); line-height: 1.3;
}
.note-doc-body h1 { font-size: 24px; }
.note-doc-body h2 { font-size: 20px; }
.note-doc-body h3 { font-size: 18px; }
.note-doc-body h4 { font-size: 16px; }
.note-doc-body h5 { font-size: 14px; }
.note-doc-body h6 { font-size: 13px; color: var(--text-muted); }
.note-doc-body ul, .note-doc-body ol {
  padding-left: 24px; margin: 8px 0;
}
.note-doc-body li { margin: 4px 0; }
.note-doc-body blockquote {
  margin: 8px 0; padding: 6px 12px;
  border-left: 3px solid #00897b;
  background: rgba(0,137,123,0.06);
  color: var(--text-secondary, var(--text-primary));
  border-radius: 0 6px 6px 0;
}
.note-doc-body code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em; background: rgba(0,0,0,0.06);
  padding: 1px 5px; border-radius: 4px;
}
.note-doc-body pre {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.55;
  background: rgba(0,0,0,0.06); color: var(--text-primary);
  padding: 10px 12px; margin: 8px 0;
  border-radius: 6px; overflow-x: auto;
  white-space: pre;
}
.note-doc-body pre code { background: none; padding: 0; font-size: inherit; }
.note-doc-body hr {
  border: none; border-top: 1px solid var(--border); margin: 14px 0;
}
.note-doc-body table {
  border-collapse: collapse; margin: 8px 0; font-size: 14px;
}
.note-doc-body th, .note-doc-body td {
  border: 1px solid var(--border); padding: 6px 10px; text-align: left;
}
.note-doc-body th { background: rgba(0,0,0,0.04); font-weight: 600; }
.note-doc-body a { color: #1976d2; text-decoration: underline; }
.note-doc-body img { max-width: 100%; border-radius: 6px; }

/* Inline checkbox rows - integrated into document body */
.note-cb-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 3px 0; margin: 0;
  line-height: 1.8;
}
.note-inline-cb {
  accent-color: #00897b; width: 17px; height: 17px;
  flex-shrink: 0; cursor: pointer; margin: 4px 0 0 0;
  border-radius: 3px;
}
.note-cb-label {
  flex: 1; outline: none; min-width: 20px;
  font-size: inherit; line-height: inherit;
  color: inherit;
}
.note-cb-label:empty::before {
  content: 'Type here...'; color: var(--text-muted); pointer-events: none;
}
.note-cb-done {
  text-decoration: line-through; color: var(--text-muted);
}

/* ── Note/Doc reference cards in chat ── */
.ref-card {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  font-family: inherit; color: var(--text-primary);
  margin-top: 4px;
}
.ref-card .material-icons { font-size: 18px; }
.ref-note { border-color: rgba(0,137,123,0.3); }
.ref-note .material-icons { color: #00897b; }
.ref-note:hover { background: rgba(0,137,123,0.06); border-color: #00897b; }
.ref-doc { border-color: rgba(156,39,176,0.3); }
.ref-doc .material-icons { color: #9c27b0; }
.ref-doc:hover { background: rgba(156,39,176,0.06); border-color: #9c27b0; }

/* ── File Cabinet Integration ── */
.fc-send-btn { color: #00897b !important; }
.fc-send-btn:hover { background: rgba(0,137,123,0.1) !important; }

.fc-modal { min-width: 340px; max-width: 480px; }
.fc-modal h3 { margin-bottom: 4px; }

.fc-select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-input);
  color: var(--text-primary); font-size: 14px; font-family: inherit;
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 32px;
}
.fc-select:focus { border-color: #00897b; }

/* Admin panel File Cabinet eye button */
.fc-eye-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; line-height: 1;
}
.fc-eye-btn:hover { color: var(--text-primary); }

/* Doc file picker button */
.doc-file-pick-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 16px; border: 2px dashed var(--border); border-radius: 10px;
  background: var(--bg-input); color: var(--text-muted);
  font-size: 14px; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.doc-file-pick-btn:hover { border-color: #9c27b0; background: rgba(156,39,176,0.04); }
.doc-file-pick-btn .material-icons { font-size: 22px; color: #9c27b0; }

/* ── DocSign - Document Viewer & Signing ── */
.doc-sign-action-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px; border: none;
  background: #9c27b0; color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: filter 0.15s;
}
.doc-sign-action-btn:hover { filter: brightness(1.15); }
.doc-sign-action-btn .material-icons { font-size: 18px; }

.doc-viewer-scroll {
  flex: 1; overflow-y: auto; padding: 24px;
  background: #e0e0e0; /* gray bg like PDF viewers */
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

.doc-page-wrap {
  position: relative; background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  max-width: 100%;
}
.doc-page-canvas {
  display: block; max-width: 100%; height: auto;
}
.doc-sig-overlay {
  position: absolute; inset: 0; pointer-events: none;
}
.doc-page-label {
  text-align: center; font-size: 11px; color: var(--text-muted);
  padding: 6px 0; background: #f9f9f9; border-top: 1px solid #eee;
}

/* Placed signatures */
.doc-placed-sig {
  position: absolute; pointer-events: auto;
}
.doc-placed-sig img {
  width: 100%; height: auto; display: block;
}
.doc-sig-label {
  font-size: 9px; color: #9c27b0; text-align: center;
  white-space: nowrap; margin-top: 1px; font-weight: 600;
}
/* Drag handle for a placed signature. Sits at the top-LEFT so it doesn't
   collide with the action chip (top-right) or the resize handle
   (bottom-right). Hover-only - keeps the signature itself uncluttered. */
.doc-sig-drag-handle {
  position: absolute; top: -10px; left: -10px;
  width: 20px; height: 20px; padding: 0;
  background: #2196f3; color: #fff; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,0.25); z-index: 6;
}
.doc-sig-drag-handle .material-icons { font-size: 14px; color: #fff; }
.doc-sig-drag-handle:active { cursor: grabbing; }
.doc-placed-sig:hover .doc-sig-drag-handle { display: flex; }
/* Frozen-while-pending-removal signatures don't expose the handle -
   they're not editable until the creator resolves the request. */
.doc-placed-sig.pending-removal:hover .doc-sig-drag-handle,
.doc-placed-sig.pending-removal:hover .doc-resize-handle {
  display: none; opacity: 0;
}

/* Hover-revealed action chip on a placed signature. Creator sees a red
   "remove" (×); the signer sees a neutral "request removal" (undo). */
.doc-sig-action-chip {
  position: absolute; top: -10px; right: -10px;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: none; background: #9c27b0; color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25); z-index: 6;
}
.doc-sig-action-chip.danger { background: #f44336; }
.doc-sig-action-chip .material-icons { font-size: 14px; color: #fff; }
.doc-sig-action-chip:hover { filter: brightness(1.1); }
.doc-placed-sig:hover .doc-sig-action-chip { display: flex; }

/* Visual marker for a signature whose removal is pending creator approval.
   Amber dashed outline + a small "Removal pending" badge along the top. */
.doc-placed-sig.pending-removal {
  outline: 2px dashed #f59e0b; outline-offset: 2px;
}
.doc-sig-pending-badge {
  position: absolute; top: -22px; left: 0; right: 0;
  text-align: center; font-size: 10px; font-weight: 700;
  color: #92400e; background: #fef3c7;
  border: 1px solid #fcd34d; border-radius: 4px;
  padding: 2px 6px; white-space: nowrap;
}

/* Activity panel - events, avatars, Approve/Deny buttons next to a
   pending removal request. */
.doc-activity-item {
  display: flex; gap: 10px; padding: 10px 4px; font-size: 12px;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.doc-activity-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-activity-body { flex: 1; min-width: 0; }
.doc-activity-line { color: var(--text-primary); line-height: 1.45; }
.doc-activity-when { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.doc-activity-reason {
  margin-top: 6px; padding: 6px 10px;
  background: #f7f8fa; border-left: 3px solid #d1d5db;
  border-radius: 0 4px 4px 0; font-size: 12px; color: var(--text-secondary);
  font-style: italic;
}
.doc-activity-actions { display: flex; gap: 6px; margin-top: 8px; }
.doc-activity-btn {
  background: #f7f8fa; border: 1px solid transparent; border-radius: 6px;
  padding: 5px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.doc-activity-btn.approve { background: #ecfdf5; color: #065f46; }
.doc-activity-btn.approve:hover { background: #065f46; color: #fff; border-color: #065f46; }
.doc-activity-btn.deny { background: #fef2f2; color: #991b1b; }
.doc-activity-btn.deny:hover { background: #991b1b; color: #fff; border-color: #991b1b; }
.doc-activity-resolved {
  margin-top: 6px; padding: 4px 10px;
  font-size: 11px; font-weight: 600; border-radius: 4px;
  display: inline-block;
}
.doc-activity-resolved.approved { background: #ecfdf5; color: #065f46; }
.doc-activity-resolved.denied { background: #fef2f2; color: #991b1b; }
.doc-activity-resolved.pending { background: #fef3c7; color: #92400e; }

/* Placement mode */
.doc-placing .doc-page-wrap { cursor: crosshair; }
.doc-placing .doc-sig-overlay { pointer-events: auto; cursor: crosshair; }
.doc-filling .doc-page-wrap { cursor: text !important; }
.doc-filling .doc-sig-overlay { cursor: text !important; }
.doc-place-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; background: #9c27b0; color: #fff;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
  animation: forwardToolbarSlide 0.2s ease;
}
.doc-place-hint .material-icons { font-size: 20px; }

/* Text fields on document */
.doc-field {
  position: absolute; pointer-events: auto;
  min-width: 60px;
  /* Anchor the field's vertical CENTER to its stored (x,y) instead of the
     top-left, so the field appears AT the click point rather than dropping
     below it (input padding + border made the visual offset ~20-30px). */
  transform: translateY(-50%);
}
/* Hover-revealed delete chip - quick way to remove a single placed field
   without entering it first to open the toolbar's delete button. */
.doc-field-delete-handle {
  position: absolute; top: -10px; right: -10px;
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%;
  background: #f44336; color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  z-index: 6;
}
.doc-field-delete-handle .material-icons { font-size: 14px; color: #fff; }
.doc-field-delete-handle:hover { background: #d32f2f; }
.doc-field:hover .doc-field-delete-handle { display: flex; }
.doc-field-input {
  border: 1px dashed rgba(33,150,243,0.4); background: rgba(255,255,255,0.85);
  padding: 2px 6px; border-radius: 3px; outline: none; color: #111;
  font-family: inherit; min-width: 60px; width: 100%;
}
.doc-field-input:focus { border-color: #2196f3; background: #fff; box-shadow: 0 0 0 2px rgba(33,150,243,0.2); }
.doc-resize-handle {
  position: absolute; bottom: -4px; right: -4px; width: 12px; height: 12px;
  background: #2196f3; border-radius: 2px; cursor: nwse-resize; z-index: 5;
  opacity: 0; transition: opacity 0.15s;
}
.doc-field:hover .doc-resize-handle,
.doc-placed-sig:hover .doc-resize-handle { opacity: 1; }

/* Fill mode active bar */
.doc-fill-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 16px; background: #2196f3; color: #fff;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.doc-fill-bar button {
  background: rgba(255,255,255,0.2); color: #fff; border: none; padding: 4px 12px;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit;
}
.doc-fill-bar button:hover { background: rgba(255,255,255,0.3); }

/* Floating text toolbar */
.doc-text-toolbar {
  position: fixed; z-index: 500;
  display: flex; align-items: center; gap: 2px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.doc-text-toolbar button {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  padding: 4px 6px; border-radius: 4px; display: flex; align-items: center;
  font-family: inherit; font-size: 12px;
}
.doc-text-toolbar button:hover { background: var(--bg-hover); color: var(--text-primary); }
.doc-text-toolbar button .material-icons { font-size: 18px; }
.doc-text-toolbar select {
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px;
  font-size: 12px; background: #fff; cursor: pointer;
}
.doc-tt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }

/* Signature pad */
.sig-pad-modal { max-width: 520px; }
.sig-pad-canvas {
  width: 100%; border: 2px dashed var(--border); border-radius: 10px;
  cursor: crosshair; background: #fff; touch-action: none;
}

/* ── Selection mode (multi-select messages) ── */
.message {
  position: relative;
  transition: background 0.18s ease, padding 0.18s ease;
}
body.selection-mode .message {
  cursor: pointer; user-select: none;
  padding-left: 36px;
}
body.selection-mode .message::after {
  content: '';
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-primary);
  transition: all 0.18s ease;
  box-sizing: border-box;
}
.message.selected {
  background: rgba(0,137,123,0.08) !important;
  border-radius: 8px;
}
.message.selected::after {
  content: '\2713';
  border-color: #00897b;
  background: #00897b;
  color: #fff;
  font-family: 'Material Icons', sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
body.selection-mode .message-actions { display: none !important; }

/* ── Selection toolbar ── */
.forward-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 100;
  animation: forwardToolbarSlide 0.2s ease;
}
@keyframes forwardToolbarSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.forward-toolbar-count {
  display: flex; align-items: baseline; gap: 6px;
  flex: 1;
  color: var(--text-primary);
}
.forward-toolbar-count #forwardCount {
  font-size: 18px; font-weight: 700; color: #00897b;
}
.forward-toolbar-count-label {
  font-size: 13px; color: var(--text-muted); font-weight: 500;
}
.forward-toolbar-actions {
  display: flex; align-items: center; gap: 6px;
}
.forward-toolbar-btn {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; padding: 8px 14px; border-radius: 8px;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.forward-toolbar-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.forward-toolbar-btn.icon-only {
  padding: 8px;
  width: 36px; height: 36px;
  justify-content: center;
}
.forward-toolbar-btn .material-icons { font-size: 20px; }
.forward-toolbar-btn.primary {
  background: #00897b; color: #fff;
}
.forward-toolbar-btn.primary:hover {
  background: #00766b;
  color: #fff;
}
#forwardDeleteBtn:hover {
  background: rgba(244,67,54,0.1);
  color: #f44336;
}

/* Forward target picker */
.forward-picker { max-width: 460px; }
.forward-selected-targets {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; min-height: 0;
}
.forward-chip {
  background: #e3f2fd; color: #1565c0; padding: 3px 10px;
  border-radius: 12px; font-size: 11px; font-weight: 600;
}
.forward-targets-list {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
}
.forward-target-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  cursor: pointer; transition: background 0.1s; font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.forward-target-row:last-child { border-bottom: none; }
.forward-target-row:hover { background: var(--bg-hover, #f5f5f5); }
.forward-target-row.selected { background: #e3f2fd; }
.forward-target-row .material-icons { font-size: 18px; color: var(--text-muted); }
.forward-target-name { flex: 1; }

/* Share Out modal */
.share-out-modal { max-width: 420px; }
.share-preview {
  background: #f8f9fa; border-radius: 8px; padding: 12px;
  font-size: 13px; color: var(--text-secondary); margin: 12px 0;
  max-height: 100px; overflow-y: auto; word-wrap: break-word;
  border-left: 3px solid var(--primary);
}
.share-targets {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.share-target {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; text-decoration: none; color: var(--text-primary);
  background: none; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all 0.15s; text-align: left; font-family: inherit;
}
.share-target:hover { border-color: var(--primary); background: var(--bg-hover, #f5f5f5); }
.share-icon {
  width: 32px; height: 32px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}

/* Discussions modal */
.discussion-creator { max-width: 500px; }
.disc-selected-members {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.disc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e3f2fd; color: #1565c0; padding: 4px 10px;
  border-radius: 16px; font-size: 12px; font-weight: 600;
}
.disc-chip-remove {
  background: none; border: none; color: #1565c0; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0; margin-left: 2px;
}
.disc-member-list {
  max-height: 240px; overflow-y: auto; margin-top: 8px;
  border: 1px solid var(--border); border-radius: 8px;
}
.disc-member-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.disc-member-row:last-child { border-bottom: none; }
.disc-add-btn {
  background: var(--primary); color: #fff; border: none;
  padding: 4px 12px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.disc-add-btn.added { background: #4caf50; }
.disc-add-btn:disabled { opacity: 0.6; cursor: default; }
.disc-admin-btn {
  background: transparent; border: 1px solid var(--border); color: #888;
  padding: 2px 6px; border-radius: 6px; cursor: pointer; line-height: 1;
}
.disc-admin-btn.is-admin { color: #00897b; border-color: #00897b; background: #e0f2f1; }
.disc-admin-btn:disabled { opacity: 0.4; cursor: default; }
.disc-admin-badge {
  font-size: 11px; font-weight: 600; color: #00897b;
  background: #e0f2f1; padding: 2px 8px; border-radius: 10px;
}

/* Slash command popup */
.slash-cmd-popup {
  position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); overflow-y: auto; max-height: 50vh; z-index: 50;
}
.slash-cmd-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
  transition: background 0.1s;
}
.slash-cmd-item:hover, .slash-cmd-item.active { background: var(--bg-hover, #f5f5f5); }
/* Commands the user is not cleared for: shown but visibly locked. */
.slash-cmd-item.blocked { opacity: 0.6; }
.slash-cmd-item.blocked:hover, .slash-cmd-item.blocked.active { background: var(--danger-soft, #fce9ea); }

/* Vote Card in Chat */
.vote-card {
  background: #f8f9fa; border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin: 8px 0; max-width: 500px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); color: var(--text-primary);
}
.vote-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.vote-card-title { font-weight: 700; font-size: 15px; flex: 1; }
.vote-card-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.vote-card-meta { display: flex; gap: 12px; margin-bottom: 10px; }
.vote-options-container { display: flex; flex-direction: column; gap: 6px; }
.vote-option {
  position: relative; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; transition: border-color 0.15s;
}
.vote-option:not(.ended):hover { border-color: #1565c0; }
.vote-option.voted { border-color: #1565c0; border-width: 2px; }
.vote-option-bar-bg {
  position: absolute; inset: 0; background: transparent;
}
.vote-option-bar-fill {
  height: 100%; background: rgba(21,101,192,0.08); transition: width 0.4s ease;
}
.vote-option-content {
  position: relative; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; padding: 8px 12px; gap: 8px;
}
.vote-option-label { font-size: 13px; font-weight: 500; }
.vote-option-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.vote-option-voters {
  position: relative; z-index: 1; padding: 0 12px 6px;
  font-size: 11px; color: var(--text-muted); line-height: 1.3;
}
.vote-card-actions {
  display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;
}
.vote-end-btn, .vote-edit-btn, .vote-reset-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text-secondary);
  display: flex; align-items: center; gap: 3px; transition: all 0.15s;
}
.vote-end-btn:hover { background: #ffebee; color: #f44336; border-color: #f44336; }
.vote-edit-btn:hover { background: #e3f2fd; color: #1565c0; border-color: #1565c0; }
.vote-reset-btn:hover { background: #fff3e0; color: #ef6c00; border-color: #ef6c00; }

/* Vote creator modal */
.vote-options-list { display: flex; flex-direction: column; gap: 6px; }
.vote-option-row {
  display: flex; align-items: center; gap: 8px;
}
.vote-option-num { font-weight: 700; color: var(--text-muted); font-size: 13px; width: 20px; }
.vote-option-row .vote-option-text { flex: 1; }

/* Task Card in Chat */
.task-card {
  background: #f8f9fa; border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin: 8px 0; max-width: 500px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); color: var(--text-primary);
}
.task-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.task-card-icon { font-size: 22px; }
.task-card-title { font-weight: 700; font-size: 15px; flex: 1; color: var(--text-primary); }
.task-card-desc {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;
  line-height: 1.4;
}
.task-card-meta {
  display: flex; align-items: center; gap: 12px; font-size: 12px;
  color: var(--text-muted, #aaa); margin-bottom: 8px;
}
.task-card-meta .material-icons { vertical-align: middle; }
.task-priority { display: flex; align-items: center; gap: 2px; font-weight: 600; }
.task-due { display: flex; align-items: center; gap: 3px; }

/* Status badges */
.task-status {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  display: flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap;
}
.task-status-pending { background: rgba(158,158,158,0.2); color: #9e9e9e; }
.task-status-in_progress { background: rgba(33,150,243,0.2); color: #42a5f5; }
.task-status-done { background: rgba(76,175,80,0.2); color: #4caf50; }
.task-status-confirmed { background: rgba(76,175,80,0.3); color: #66bb6a; }
.task-status-cancelled { background: rgba(244,67,54,0.2); color: #ef5350; }

/* Progress bar */
.task-progress-bar {
  height: 4px; background: rgba(0,0,0,0.1); border-radius: 2px;
  margin-bottom: 10px; overflow: hidden;
}
.task-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.task-progress-label { margin-left: auto; font-weight: 600; }

/* Checklist in card */
.task-checklist-list { display: flex; flex-direction: column; gap: 4px; }
.task-checklist-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-radius: 6px; transition: background 0.1s;
}
.task-checklist-row[style*="cursor:pointer"]:hover { background: rgba(255,255,255,0.05); }
.task-item-text { font-size: 13px; flex: 1; color: var(--text-primary); }
.task-item-done { text-decoration: line-through; opacity: 0.6; }
.task-item-failed { text-decoration: line-through; color: #c62828; opacity: 0.75; }
.task-status-closed { background: rgba(178,106,0,0.15); color: #b26a00; }
.task-item-assignee {
  font-size: 11px; padding: 1px 8px; border-radius: 8px;
  background: rgba(33,150,243,0.15); color: #42a5f5; white-space: nowrap;
}
.task-item-due {
  font-size: 11px; padding: 1px 8px; border-radius: 8px;
  background: rgba(255,152,0,0.12); color: #fb8c00; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2px;
}

/* Confirm button */
.task-confirm-btn {
  display: flex; align-items: center; gap: 4px; padding: 8px 16px;
  border: none; border-radius: 8px; margin-top: 10px; width: 100%;
  justify-content: center; font-size: 13px; font-weight: 600;
  background: linear-gradient(135deg, #4caf50, #43a047); color: #fff;
  cursor: pointer; transition: filter 0.15s;
}
.task-confirm-btn:hover { filter: brightness(1.1); }

/* Annotation destination selector */
.annotate-dest { display: flex; align-items: center; gap: 4px; }
.annotate-dest-select {
  height: 38px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  background: rgba(255,255,255,0.1); color: #fff; font-size: 13px;
  max-width: 200px; cursor: pointer;
}
.annotate-dest-select option, .annotate-dest-select optgroup { background: #1a1d23; color: #eee; }

/* ── Channel Settings Panel ── */
.cs-panel h3 { margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.cs-panel h4 { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cs-info { margin-bottom: 16px; }
.cs-section { margin-bottom: 16px; }
.cs-add-member { display: flex; gap: 8px; margin-bottom: 10px; }
.cs-member-list { max-height: 250px; overflow-y: auto; }
.cs-member {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; transition: background 0.1s;
}
.cs-member:hover { background: var(--bg-hover); }
.cs-member-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.cs-member-name { flex: 1; font-size: 13px; }
.cs-remove-member {
  width: 24px; height: 24px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: var(--text-muted);
  opacity: 0; transition: all 0.15s;
}
.cs-member:hover .cs-remove-member { opacity: 1; }
.cs-remove-member:hover { background: rgba(244,67,54,0.15); color: #f44336; }
.cs-danger { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cs-danger-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: transparent;
  color: var(--text-secondary); cursor: pointer; font-size: 13px; width: 100%;
  margin-bottom: 8px; transition: all 0.15s;
}
.cs-danger-btn:hover { border-color: #f44336; color: #f44336; background: rgba(244,67,54,0.05); }
.cs-danger-delete { border-color: #f44336; color: #f44336; }
.cs-danger-delete:hover { background: #f44336; color: #fff; }

/* ── Meeting Scheduler ── */
.meet-creator h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.meet-attendee-list {
  max-height: 200px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; padding: 4px;
}
.meet-attendee {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; cursor: pointer; transition: background 0.1s;
}
.meet-attendee:hover { background: var(--bg-hover); }
.meet-attendee-noemail { opacity: 0.5; }
.meet-attendee-cb { flex-shrink: 0; accent-color: #00897b; }
.meet-attendee-name { font-size: 13px; font-weight: 500; }
.meet-attendee-email { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.meet-extras { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.meet-extra-toggle {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: background 0.1s; font-size: 13px;
}
.meet-extra-toggle:hover { background: var(--bg-hover); }
.meet-extra-toggle input { accent-color: #00897b; }
.meet-additional { margin-top: 4px; }
.meet-additional summary {
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}
.meet-additional summary:hover { color: var(--text-primary); }

/* Meeting Card in Chat */
.meeting-card {
  background: #f8f9fa; border: 1px solid var(--border); border-left: 4px solid #00897b;
  border-radius: 12px; padding: 14px; margin: 8px 0; max-width: 480px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.meeting-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.meeting-card-icon { font-size: 22px; color: #00897b; }
.meeting-card-title { font-weight: 700; font-size: 15px; flex: 1; color: var(--text-primary); }
.meeting-status {
  font-size: 11px; display: flex; align-items: center; gap: 3px; font-weight: 600;
}
.meeting-card-meta {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px;
  color: var(--text-secondary); margin-bottom: 10px;
}
.meeting-card-meta span { display: flex; align-items: center; gap: 3px; }
.meeting-link-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600;
  background: #00897b; color: #fff; text-decoration: none;
  transition: filter 0.15s;
}
.meeting-link-btn:hover { filter: brightness(1.1); text-decoration: none; color: #fff; }

/* Meeting Mode Toggle (Start Now / Schedule) */
.meet-mode-toggle {
  display: flex; gap: 0; margin-bottom: 14px; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.meet-mode-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border: none; background: var(--bg-primary); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.meet-mode-btn:hover { background: var(--bg-hover); }
.meet-mode-btn.active {
  background: #00897b; color: #fff;
}

/* ── Incoming Call Ring Overlay ── */
.meeting-ring-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: ringFadeIn 0.3s ease;
}
@keyframes ringFadeIn { from { opacity: 0; } to { opacity: 1; } }

.meeting-ring-card {
  background: #1a1a2e; border-radius: 24px; padding: 40px 48px;
  text-align: center; position: relative; min-width: 320px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.meeting-ring-pulse {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(0,137,123,0.3);
  animation: ringPulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
.meeting-ring-icon {
  font-size: 56px; color: #00897b; position: relative; z-index: 1;
  animation: ringBounce 0.6s ease-in-out infinite alternate;
}
@keyframes ringBounce {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.meeting-ring-title {
  font-size: 22px; font-weight: 700; color: #fff; margin: 16px 0 6px;
}
.meeting-ring-caller {
  font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 32px;
}
.meeting-ring-actions {
  display: flex; gap: 24px; justify-content: center;
}
.meeting-ring-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: none; border-radius: 16px; padding: 16px 28px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: transform 0.1s, filter 0.15s;
  color: #fff;
}
.meeting-ring-btn:active { transform: scale(0.95); }
.meeting-ring-btn .material-icons { font-size: 32px; }
.meeting-ring-decline { background: #f44336; }
.meeting-ring-decline:hover { filter: brightness(1.15); }
.meeting-ring-accept { background: #00c853; }
.meeting-ring-accept:hover { filter: brightness(1.15); }

/* ── Document text field drag handle ── */
.doc-field-drag-handle {
  position: absolute;
  top: -20px;
  left: 0;
  background: #2196f3;
  color: #fff;
  border-radius: 4px 4px 0 0;
  padding: 0 5px;
  cursor: grab;
  display: none;
  align-items: center;
  font-size: 13px;
  height: 20px;
  user-select: none;
  z-index: 7;
}
.doc-field-drag-handle:active { cursor: grabbing; }
.doc-field-drag-handle .material-icons { font-size: 14px; }
.doc-field:hover .doc-field-drag-handle { display: flex; }

/* ── Note Version History Modal ── */
.note-history-modal { width: min(820px, 92vw); }
.note-history-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  height: 420px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-primary);
}
.note-history-list {
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
}
.note-history-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.note-history-item:hover { background: var(--bg-hover); }
.note-history-item.selected { background: rgba(0,137,123,0.12); }
.note-history-when {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.note-history-who {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.note-history-head {
  background: #00897b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  letter-spacing: 0.4px;
}
.note-history-label {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.note-history-preview {
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--bg-primary);
}
.note-history-preview-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.note-history-preview-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 0;
}
.note-history-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
@media (max-width: 640px) {
  .note-history-body {
    grid-template-columns: 1fr;
    height: auto;
    max-height: 70vh;
  }
  .note-history-list { max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Note Find & Replace Bar ── */
.note-findbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.note-findbar[hidden] { display: none; }
.note-findbar-icon {
  font-size: 18px;
  color: var(--text-muted);
}
.note-findbar-input {
  flex: 1;
  min-width: 140px;
  max-width: 280px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.note-findbar-input:focus {
  border-color: #00897b;
  box-shadow: 0 0 0 2px rgba(0,137,123,0.15);
}
.note-findbar-count {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.note-findbar-btn {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 12px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.note-findbar-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.note-findbar-btn .material-icons { font-size: 18px; }
.note-findbar-text { padding: 4px 10px; font-weight: 500; }
.note-findbar-toggle {
  font-weight: 600;
  border-color: var(--border);
  padding: 3px 8px;
}
.note-findbar-toggle.active {
  background: rgba(0,137,123,0.12);
  color: #00897b;
  border-color: #00897b;
}
.note-findbar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}
.note-findbar-close { margin-left: auto; }

/* ════ Mobile polish (file viewer, doc/notes topbar) ════ */
@media (max-width: 768px) {
  /* File viewer: full-screen, opaque, toolbar that fits. The overlay also
     blocks touch scroll-through (the "flickering while scrolling" bug came
     from the chat scrolling behind the half-transparent viewer). */
  .fileviewer-overlay {
    touch-action: none;
    overscroll-behavior: contain;
  }
  .fileviewer-backdrop { background: rgba(0, 0, 0, 0.96); }
  .fileviewer-container {
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
  }
  .fileviewer-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.65);
  }
  .fileviewer-filename { flex: 1 1 100%; font-size: 12px; }
  .fileviewer-toolbar-actions {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Icon-only buttons on small screens: collapse the text labels, keep icons */
  .fileviewer-toolbar-actions .fileviewer-sendto-btn,
  .fileviewer-toolbar-actions .fileviewer-annotate-btn,
  .fileviewer-toolbar-actions .fileviewer-download-btn {
    font-size: 0;
    gap: 0;
    padding: 8px 10px;
  }
  .fileviewer-toolbar-actions .material-icons { font-size: 20px !important; }
  .fileviewer-toolbar-actions button,
  .fileviewer-toolbar-actions a { color: #fff; }
  .fileviewer-content { flex: 1; min-height: 0; touch-action: pinch-zoom pan-x pan-y; }
  .fileviewer-content img { max-width: 100vw; max-height: calc(100dvh - 110px); }
  .fileviewer-nav { display: none !important; } /* swipe targets too small; arrows overlap image */

  /* Doc/Notes topbar (DocSign viewer + collaborative notes): wrap instead of
     overflowing off-screen; actions get their own scrollable row. */
  .note-topbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; }
  .note-topbar-info { min-width: 0; flex: 1 1 auto; }
  .note-topbar-info .note-topbar-title {
    max-width: 38vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .note-topbar-actions {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .note-topbar-actions .doc-sign-action-btn { flex-shrink: 0; padding: 6px 10px; font-size: 12px; }
  .note-topbar-actions .note-topbar-btn { flex-shrink: 0; }

  /* DocSign side panel (comments/activity) becomes full-width below the doc */
  .doc-viewer-body { flex-direction: column; }
  .doc-side-panel { width: 100% !important; max-height: 45dvh; border-left: none !important; border-top: 1px solid var(--border); }

  /* Quill toolbar in notes: compact so it fits two rows max */
  .collab-editor .ql-toolbar.ql-snow { padding: 6px 8px; }
  .collab-editor .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
}

/* Copy-mode: a message switched into selectable mode by the Copy action.
   Must beat the touch-device user-select:none on messages. */
.message .message-content.allow-select,
.message .message-content.allow-select * {
  -webkit-touch-callout: default !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}
.message .message-content.allow-select::selection,
.message .message-content.allow-select *::selection { background: rgba(229, 57, 53, 0.25); }

/* Pin button in the sidebar tab row */
.sidebar-tab-pin {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.35);
  padding: 0 10px; display: flex; align-items: center;
  flex-shrink: 0;
}
.sidebar-tab-pin .material-icons { font-size: 17px; transform: rotate(45deg); transition: transform .15s, color .15s; }
.sidebar-tab-pin:hover { color: rgba(255,255,255,0.7); }
.sidebar-tab-pin.pinned { color: var(--primary); }
.sidebar-tab-pin.pinned .material-icons { transform: rotate(0deg); }

/* ── Quill code blocks: override the default dark "terminal" theme with a
      light, premium style so a note that uses a code block doesn't render as a
      jarring dark slab in an otherwise light document. ────────────────────── */
.ql-snow .ql-editor .ql-code-block-container,
.ql-snow .ql-editor pre.ql-syntax,
.note-doc-body .ql-code-block-container,
.note-doc-body pre {
  background: #f6f8fa !important;
  color: #1f2430 !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

/* ── System message icon chip (meeting/task/vote/note/doc) ─────────────── */
.message-content .sys-msg-icon {
  font-size: 17px; vertical-align: middle; margin-right: 5px;
  position: relative; top: -1px; color: var(--text-secondary);
}

/* ── Document signing: collapse the action row into a styled dropdown on
      mobile so the buttons never overflow the topbar. ───────────────────── */
.doc-actions-group { display: flex; align-items: center; gap: 8px; }
/* Desktop: the coloured pills (.doc-sign-action-btn) and the bare icon
   buttons (.note-topbar-btn) sit in the SAME row. Pills were 30px tall from
   padding alone while the icon buttons were 36px from their 24px glyph, so
   the row stepped up and down across it. One box for both. The mobile
   dropdown block below re-declares these at the same specificity and comes
   later, so small screens are unaffected. */
.doc-actions-group .doc-sign-action-btn,
.doc-actions-group .note-topbar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; border-radius: 8px;
  border: 1px solid transparent; box-sizing: border-box;
}
.doc-actions-group .note-topbar-btn { padding: 6px 9px; }
.doc-actions-group .note-topbar-btn .material-icons { font-size: 20px; }
.doc-actions-kebab { display: none; }
.dsa-label { display: none; }
@media (max-width: 768px) {
  .note-view .note-topbar { position: relative; }
  .doc-actions-kebab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
    color: var(--text-secondary); background: none; border: none;
  }
  .doc-actions-kebab.active { background: var(--bg-hover); color: var(--text-primary); }
  .doc-actions-group {
    position: absolute; top: calc(100% + 6px); right: 8px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px;
    min-width: 220px; max-width: calc(100vw - 24px); z-index: 70; display: none;
  }
  .doc-actions-group.open { display: flex; }
  .doc-actions-group .doc-sign-action-btn,
  .doc-actions-group .note-topbar-btn {
    width: 100%; justify-content: flex-start; gap: 10px;
    border-radius: 8px; padding: 10px 12px; height: auto; font-size: 14px;
  }
  .doc-actions-group .dsa-label { display: inline; }
}

/* ── FileViewer: read-only document panes (text / docx / excel / fallback) ── */
.fileviewer-doc-pane {
  background: #fff; border-radius: 10px; width: min(940px, 94vw);
  max-height: calc(100vh - 120px); overflow: auto; padding: 18px 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.fileviewer-doc-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 180px; color: var(--text-secondary); font-size: 14px; text-align: center;
}
.fileviewer-text {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #222;
}
/* docx-preview injects its own page wrapper; keep it fluid inside the pane */
.fileviewer-docx { padding: 0; background: #e8e8ec; }
.fileviewer-docx .docx-wrapper { background: transparent; padding: 14px 0; }
.fileviewer-docx .docx-wrapper > section.docx { margin: 0 auto 14px; box-shadow: 0 2px 8px rgba(0,0,0,.18); max-width: 100%; }
/* spreadsheet table */
.fileviewer-sheet-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; position: sticky; top: -18px; background: #fff; padding: 6px 0; }
.fileviewer-sheet-tab {
  border: 1px solid var(--border); background: #f6f6f8; border-radius: 6px 6px 0 0;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-secondary);
}
.fileviewer-sheet-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.fileviewer-sheet-body { overflow: auto; }
.fileviewer-sheet-body table { border-collapse: collapse; font-size: 12.5px; }
.fileviewer-sheet-body td, .fileviewer-sheet-body th {
  border: 1px solid #e0e0e4; padding: 4px 9px; white-space: nowrap; max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; color: #222;
}
.fileviewer-sheet-body tr:first-child td { background: #f3f3f6; font-weight: 600; position: sticky; top: 0; }
@keyframes mchub-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  .fileviewer-doc-pane { width: 96vw; padding: 12px; max-height: calc(100dvh - 100px); }
}

/* ── Notes: tables (Quill table module) ─────────────────────────────────── */
.collab-editor .ql-editor { overflow-x: auto; }  /* wide tables scroll, never crush */
.collab-editor .ql-editor table {
  border-collapse: collapse; width: 100%; margin: 10px 0;
}
.collab-editor .ql-editor td {
  border: 1px solid #ddd; padding: 8px 10px; min-width: 90px;
  word-break: break-word; vertical-align: top;
}
/* First row reads as the header: brand light fill, bold - Cinnabar stays
   reserved for accents so printed docs stay clean. */
.collab-editor .ql-editor table tr:first-child td {
  background: #FAF7F1; font-weight: 700;
}
/* Contextual table menu in the toolbar */
.ql-toolbar .collab-table-menu { border-left: 1px solid #e0e0e0; padding-left: 6px; margin-left: 2px; }
.ql-toolbar .collab-table-menu .material-icons { color: #444; }
.ql-toolbar .ql-table-insert { width: 28px; }
/* Shared-note previews keep table structure readable too */
.note-body-rendered table, .note-preview table { border-collapse: collapse; max-width: 100%; }
.note-body-rendered td, .note-preview td { border: 1px solid #ddd; padding: 6px 8px; }

/* ── Notes: document feel ──────────────────────────────────────────────────
   The editor reads like a document, not a text box: a centered content
   column with margins, comfortable line-height, and real spacing between
   paragraphs, headings, lists and tables. */
.collab-editor .ql-editor {
  padding: 30px max(30px, calc((100% - 920px) / 2)) 90px;
  font-size: 15px;
  line-height: 1.68;
  color: #1f2329;
}
.collab-editor .ql-editor p { margin: 0 0 0.55em; }
.collab-editor .ql-editor h1 { font-size: 1.9em; font-weight: 800; margin: 1em 0 0.45em; line-height: 1.25; }
.collab-editor .ql-editor h2 { font-size: 1.45em; font-weight: 700; margin: 0.95em 0 0.4em; line-height: 1.3; }
.collab-editor .ql-editor h3 { font-size: 1.18em; font-weight: 700; margin: 0.85em 0 0.35em; }
.collab-editor .ql-editor ul, .collab-editor .ql-editor ol { margin: 0 0 0.6em; }
.collab-editor .ql-editor blockquote { margin: 0.6em 0; }
.collab-editor .ql-editor table { margin: 14px 0 18px; }

/* ── Multi-upload previews + viewer delete ── */

/* Staged-files list in the composer: one card per file + an n/5 counter */
.file-preview-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  max-height: 40vh;
  overflow-y: auto;
}
.file-preview-list .file-preview-card {
  margin-bottom: 0;
}
.file-preview-count {
  align-self: flex-end;
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 4px;
}

/* Delete button in the file viewer toolbar - danger accent, same shape as
   the Send to / Annotate buttons */
.fileviewer-delete-btn {
  display: flex; align-items: center; gap: 4px; padding: 6px 14px;
  border: 1px solid rgba(244, 67, 54, 0.55); border-radius: 6px;
  background: transparent; color: #ff8a80; cursor: pointer; font-size: 13px;
  transition: all 0.15s;
}
.fileviewer-delete-btn:hover {
  background: #e53935; border-color: transparent; color: #fff;
}
.fileviewer-delete-btn .material-icons { color: inherit; }

@media (max-width: 768px) {
  /* Collapse the Delete label to icon-only, matching the other toolbar buttons */
  .fileviewer-toolbar-actions .fileviewer-delete-btn {
    font-size: 0;
    gap: 0;
    padding: 8px 10px;
    color: #ff8a80;
  }
}

/* ── Sidebar filter ── */
/* Sticky search box at the top of the Chats pane. It sits OUTSIDE the lists,
   which are rebuilt wholesale on every socket/unread/badge event. */
.sidebar-filter {
  position: sticky; top: 0; z-index: 5;
  flex: 0 0 auto;
  padding: 10px 12px 6px;
  background: var(--bg-sidebar);
}
.sidebar-filter-box {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
  transition: border-color 0.15s, background 0.15s;
}
.sidebar-filter-box:focus-within {
  background: rgba(255,255,255,0.11);
  border-color: var(--primary);
}
.sidebar-filter-icon.material-icons {
  font-size: 18px; color: rgba(255,255,255,0.45); flex-shrink: 0;
}
.sidebar-filter-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: none; outline: none; padding: 0; margin: 0;
  background: transparent; color: var(--text-light);
  font-family: inherit; font-size: 13px; line-height: 20px;
}
.sidebar-filter-input::placeholder { color: rgba(255,255,255,0.35); }
.sidebar-filter-clear {
  flex-shrink: 0; border: none; background: transparent;
  color: rgba(255,255,255,0.5); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.sidebar-filter-clear:hover { color: #fff; background: rgba(255,255,255,0.14); }

/* "No matches" line - shown only when the filter empties every section */
.sidebar-filter-empty { padding: 10px 16px; }

/* Filter results: rows and whole sections toggled by Sidebar.applyFilter().
   !important so an owning module's inline display can't resurrect them. */
.sidebar-list li.sidebar-filter-hidden { display: none !important; }
.sidebar-section.sidebar-section-filtered { display: none !important; }

/* ── File-viewer toolbar: the zoom cluster and gallery counter ──
   The button normalisation above covered Send to / Annotate / Delete /
   Open-in-new-tab / Download, but the zoom controls and the "2 of 5" counter
   were left as bare inline elements with no sizing, so they rendered ~14px and
   ~19px tall against their 36px neighbours and the row visibly stepped down in
   the middle. Same 36px rhythm here; the zoom buttons stay square because they
   are icon-only. */
.fileviewer-toolbar-actions .fileviewer-zoom-group {
  display: none;              /* toggled to inline-flex for images by _showCurrent */
  align-items: center;
  gap: 4px;
  min-height: 36px;
}
.fileviewer-toolbar-actions .fileviewer-zoom-group > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.fileviewer-toolbar-actions .fileviewer-zoom-group > button:hover {
  background: rgba(255, 255, 255, 0.16);
}
.fileviewer-toolbar-actions .fileviewer-counter,
.fileviewer-toolbar-actions .fileviewer-zoom-level {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

/* ── Workspace name on the sign-in screen ──
   Shown when the address resolves to a workspace (attendout.mchub.ng ->
   "Attendout Workspace"); hidden on the bare domain. Sits under the logo and
   above the form, so it reads as the destination you are signing in to. */
.login-workspace {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #1a1d21);
  text-align: center;
  letter-spacing: 0.2px;
  overflow-wrap: anywhere;   /* long workspace names must not widen the card */
}