/* ==========================================================================
   McHub - Design System Layer
   Loads AFTER app.css. Adds tokens, focus rings, selected states, tooltips,
   modal a11y, dark mode, skeletons, empty states, mobile nav, button system.
   Non-destructive: only overrides where the original is broken.
   ========================================================================== */

:root {
  /* Semantic colors (extend app.css :root) */
  --success: #00897b;
  --success-dark: #00695f;
  --success-light: rgba(0,137,123,0.10);
  --danger: #d32f2f;
  --danger-dark: #b71c1c;
  --danger-light: rgba(211,47,47,0.10);
  --warning: #f57c00;
  --warning-light: rgba(245,124,0,0.10);
  --info: #1976d2;
  --info-light: rgba(25,118,210,0.10);

  /* Neutral surface scale */
  --surface-0: #ffffff;
  --surface-1: #fafafa;
  --surface-2: #f4f4f6;
  --surface-3: #ececef;

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;

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

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(237,66,54,0.30);
  --focus-outline: 2px solid var(--primary);

  /* Z-layers (stop the war) */
  --z-base: 1;
  --z-sidebar: 100;
  --z-header: 250;
  --z-dropdown: 300;
  --z-modal-backdrop: 1000;
  --z-modal: 1001;
  --z-toast: 2000;
  --z-tooltip: 2500;
  --z-cmdk: 2600;
}

/* Dark mode REMOVED - many pages hardcode light backgrounds in inline <style>,
   so theme-flipping the variables would clash. Light theme only for now. */

/* --------------------------------------------------------------------------
   FOCUS RINGS - keyboard users only. Outline-only (no shadow/radius) so we
   don't change the visual size or shape of the focused element.
   Excludes contentEditable / large editor bodies which manage their own focus.
   -------------------------------------------------------------------------- */
:where(button, a):focus-visible,
:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: var(--focus-outline);
  outline-offset: 1px;
}
/* Don't put a ring on contentEditable surfaces - they're not standard form
   controls and the outline visually competes with the cursor + content. */
[contenteditable]:focus,
[contenteditable]:focus-visible,
.notes-editor-body:focus-visible,
.notes-editor-title:focus-visible,
.note-content:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   BUTTON SYSTEM - semantic variants. Kept compatible with existing .btn etc.
   -------------------------------------------------------------------------- */
.btn { font-size: var(--text-base); line-height: 1; gap: 6px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn .material-icons { font-size: 18px; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-dark); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); }

/* Outlined / ghost variants */
.btn-outline-primary { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline-primary:hover { background: rgba(237,66,54,0.08); }

.btn-outline-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-outline-danger:hover { background: var(--danger-light); }

.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-hover); }

/* --------------------------------------------------------------------------
   TOOLTIPS - pure-CSS via [data-tooltip] attribute
   -------------------------------------------------------------------------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f1f2a;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease 0.4s;
  z-index: var(--z-tooltip);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f1f2a;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease 0.4s;
  z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before { opacity: 1; }
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 6px); }
[data-tooltip-pos="bottom"]::before { bottom: auto; top: calc(100% + 1px); border-top-color: transparent; border-bottom-color: #1f1f2a; }
/* Quill toolbar pickers (text color, highlight, font, ...): the open dropdown
   is a CHILD of the picker element, so the picker stays :hover-ed while the
   pointer browses the options and the tooltip would sit on top of the
   swatches. Hide it the moment the picker is expanded. */
.ql-toolbar .ql-picker.ql-expanded[data-tooltip]::before,
.ql-toolbar .ql-picker.ql-expanded[data-tooltip]::after { opacity: 0 !important; }

/* --------------------------------------------------------------------------
   MODAL - a11y-first replacement layer.
   Works with new <div class="ui-modal" role="dialog">… markup.
   -------------------------------------------------------------------------- */
.ui-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,15,22,0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal-backdrop);
  padding: 16px;
  animation: ui-fade-in 0.15s ease;
}
.ui-modal {
  background: var(--bg-main);
  color: var(--text-primary);
  border-radius: 12px;
  width: 100%; max-width: 480px;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 18px 48px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.10);
  animation: ui-modal-in 0.18s cubic-bezier(.2,.9,.3,1.2);
  z-index: var(--z-modal);
}
.ui-modal-lg { max-width: 720px; }
.ui-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ui-modal-title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.ui-modal-close {
  background: none; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 22px; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.ui-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Floating close (×) on title-less dialogs: a clearly visible circular button
   at the top-right, so it reads as a real control rather than a faint glyph. */
.ui-modal-close--float {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-hover, #eef0f4);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.ui-modal-close--float:hover { background: var(--border, #d9dce3); color: var(--text-primary); }
.ui-modal-body {
  padding: 20px; overflow-y: auto; flex: 1;
  font-size: var(--text-base); line-height: 1.5;
}
.ui-modal-body p { margin: 0 0 12px; }
.ui-modal-body p:last-child { margin-bottom: 0; }
.ui-modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface-1);
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
.ui-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: var(--text-base);
  background: var(--bg-main);
  color: var(--text-primary);
  margin-top: 8px;
}
.ui-modal-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }

/* Danger-flavoured modal (delete confirms) */
.ui-modal[data-tone="danger"] .ui-modal-title::before {
  content: '⚠ ';
  color: var(--danger);
  margin-right: 4px;
}

@keyframes ui-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes ui-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   SELECTED / ACTIVE STATES - make them visible
   -------------------------------------------------------------------------- */
.sidebar-item.active,
.sidebar-channel.active,
.sidebar-dm.active,
.sidebar-row.active,
.notes-list-item.active,
.docs-list-item.active,
.doc-list-item.active,
.note-list-item.active,
[data-active="true"] {
  background: var(--bg-sidebar-active, #2d2d52) !important;
  position: relative;
}
.sidebar .sidebar-item.active::before,
.sidebar .sidebar-channel.active::before,
.sidebar .sidebar-dm.active::before,
.sidebar .sidebar-row.active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

/* Light-surface lists (notes, docs) */
.notes-list-item.active,
.note-list-item.active,
.docs-list-item.active,
.doc-list-item.active {
  background: rgba(237,66,54,0.08) !important;
  border-left: 3px solid var(--primary);
  padding-left: calc(var(--space-3) - 3px) !important;
}

/* --------------------------------------------------------------------------
   SIDEBAR STARS - quieter (smaller + muted), become bright on hover/active
   -------------------------------------------------------------------------- */
.sidebar-fav-star {
  font-size: 12px !important;
  color: rgba(255,179,0,0.55) !important;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s, font-size 0.15s;
}
.sidebar-item:hover .sidebar-fav-star,
.sidebar-item.active .sidebar-fav-star {
  opacity: 1;
  color: #ffb300 !important;
  font-size: 14px !important;
}
.sidebar-item.has-unread .sidebar-fav-star { opacity: 0.4; }

/* Generic star toggle pattern (future use) */
.sidebar-row .star-toggle,
.sidebar-item .star-toggle,
[data-favorite-toggle] {
  opacity: 0;
  transition: opacity 0.15s;
}
.sidebar-row:hover [data-favorite-toggle],
.sidebar-row:hover .star-toggle,
.sidebar-item:hover [data-favorite-toggle],
.sidebar-item:hover .star-toggle,
[data-favorited="true"] [data-favorite-toggle],
[data-favorited="true"] .star-toggle,
.is-favorited [data-favorite-toggle],
.is-favorited .star-toggle {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   STATUS PILLS - semantic colors for document/task statuses
   -------------------------------------------------------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.status-pill[data-status="draft"]    { background: var(--surface-3); color: var(--text-secondary); }
.status-pill[data-status="pending"]  { background: var(--warning-light); color: var(--warning); }
.status-pill[data-status="signed"],
.status-pill[data-status="completed"],
.status-pill[data-status="approved"] { background: var(--success-light); color: var(--success); }
.status-pill[data-status="cancelled"],
.status-pill[data-status="rejected"] { background: var(--danger-light); color: var(--danger); }
.status-pill[data-status="in_progress"],
.status-pill[data-status="in-progress"]  { background: var(--info-light); color: var(--info); }

/* --------------------------------------------------------------------------
   SKELETON LOADERS
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.skeleton-line { height: 12px; margin: 6px 0; }
.skeleton-line.w-25 { width: 25% }
.skeleton-line.w-50 { width: 50% }
.skeleton-line.w-75 { width: 75% }
.skeleton-line.w-100 { width: 100% }
.skeleton-circle { border-radius: 50%; }
.skeleton-message {
  display: flex; gap: 12px; padding: 8px 16px; align-items: flex-start;
}
.skeleton-message .skeleton-circle { width: 36px; height: 36px; flex-shrink: 0; }
.skeleton-message > div:last-child { flex: 1; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* --------------------------------------------------------------------------
   EMPTY STATES
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px;
  color: var(--text-secondary);
  min-height: 200px;
}
.empty-state-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-radius: 50%;
  margin-bottom: 16px;
  color: var(--text-muted);
}
.empty-state-icon .material-icons { font-size: 32px; }
.empty-state-title { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty-state-body { font-size: var(--text-base); margin-bottom: 16px; max-width: 320px; }
.empty-state .btn { margin-top: 4px; }

/* --------------------------------------------------------------------------
   CONNECTION STATUS INDICATOR
   -------------------------------------------------------------------------- */
.connection-banner {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -100%);
  background: var(--warning);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  transition: transform 0.25s cubic-bezier(.2,.9,.3,1.2);
}
.connection-banner.show { transform: translate(-50%, 0); }
.connection-banner[data-state="reconnecting"] { background: var(--warning); }
.connection-banner[data-state="offline"] { background: var(--danger); }
.connection-banner[data-state="restored"] { background: var(--success); }
.connection-banner .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

/* --------------------------------------------------------------------------
   COMMAND PALETTE (Cmd+K)
   -------------------------------------------------------------------------- */
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,15,22,0.55);
  backdrop-filter: blur(2px);
  z-index: var(--z-cmdk);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
  animation: ui-fade-in 0.15s ease;
}
.cmdk {
  background: var(--bg-main);
  border-radius: 12px;
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
}
.cmdk-input {
  width: 100%;
  padding: 16px 20px;
  border: none; outline: none;
  background: transparent;
  font-size: var(--text-md);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.cmdk-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.cmdk-section { padding: 8px 14px 4px; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 6px;
  cursor: pointer; font-size: var(--text-base); color: var(--text-primary);
}
.cmdk-item .material-icons { font-size: 18px; color: var(--text-muted); }
.cmdk-item.active, .cmdk-item:hover { background: var(--bg-hover); }
.cmdk-item .kbd { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; }
.cmdk-empty { padding: 32px 20px; text-align: center; color: var(--text-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   KEYBOARD SHORTCUT HELP
   -------------------------------------------------------------------------- */
.shortcut-help { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.shortcut-help dt { font-weight: 500; color: var(--text-secondary); }
.shortcut-help dd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); }
.kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--text-primary);
  box-shadow: 0 1px 0 var(--border);
}

/* --------------------------------------------------------------------------
   USER AVATAR (header dropdown)
   -------------------------------------------------------------------------- */
.user-avatar-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08);
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-light);
  cursor: pointer;
}
.user-avatar-pill:hover { background: rgba(255,255,255,0.14); }
.user-avatar-circle {
  width: 26px; height: 26px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   MOBILE BOTTOM TAB BAR
   -------------------------------------------------------------------------- */
.mobile-tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: var(--z-header);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.mobile-tabbar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted);
  font-size: 10px;
  padding: 4px 0;
  text-decoration: none;
}
.mobile-tabbar a .material-icons { font-size: 22px; }
.mobile-tabbar a.active { color: var(--primary); }

/* --mobile-tabbar-h is measured at runtime by ui.js. Falls back to 64px
   (a safe default for the icon+label stack on most phones) if JS hasn't
   measured yet - better to over-reserve than under-reserve. */
:root { --mobile-tabbar-h: 64px; }

@media (max-width: 768px) {
  .mobile-tabbar { display: flex; }
  /* Pages with natural body scroll (tasks, notes, docs, etc.) just need
     bottom padding so content doesn't slide under the tabbar. */
  body[data-mobile-nav] {
    padding-bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
  /* The chat (index.html) uses a flex layout pinned to 100vh. Padding on
     body doesn't help - we have to actually shrink the container so the
     message composer sits above the tabbar. */
  body[data-mobile-nav] .app-container {
    height: calc(100vh - var(--mobile-tabbar-h) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--mobile-tabbar-h) - env(safe-area-inset-bottom, 0px));
  }
  /* Notes/docs pages use a similar 100vh-minus-header pattern. */
  body[data-mobile-nav] .notes-layout,
  body[data-mobile-nav] .doc-layout {
    height: calc(100vh - 52px - var(--mobile-tabbar-h) - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - 52px - var(--mobile-tabbar-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --------------------------------------------------------------------------
   MESSAGE GROUPING - used when consecutive messages from same sender
   are emitted with .message.grouped
   -------------------------------------------------------------------------- */
.message.grouped .message-avatar,
.message.grouped .message-header { display: none; }
.message.grouped { padding-top: 1px !important; padding-bottom: 1px !important; margin-top: 0 !important; }
.message.grouped .message-content,
.message.grouped .image-grid,
.message.grouped .message-file { margin-left: 46px; }
.message.grouped .message-thread-info { margin-left: 46px; }
/* Show timestamp on hover only for grouped messages */
.message.grouped:hover::before {
  content: attr(data-time-relative);
  position: absolute; left: 0; top: 4px;
  width: 46px; text-align: center;
  font-size: 10px; color: var(--text-muted);
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   MESSAGE ACTIONS TOOLBAR - anchor inside hovered message (desktop)
   On mobile: hidden by default, revealed when message is .actions-open
   (long-press / tap-to-toggle elsewhere in app code).
   -------------------------------------------------------------------------- */
.message-actions {
  top: 4px !important;
  right: 12px !important;
  z-index: 5;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
  border: 1px solid var(--border) !important;
}
.message-actions button { transition: background 0.12s; }
.message-actions button:hover { background: var(--bg-hover) !important; color: var(--primary) !important; }

/* Override the always-visible mobile rule (app.css:558) so the floating
   toolbar isn't permanently stuck across every message on small screens. */
@media (max-width: 768px) {
  .message-actions { display: none !important; opacity: 1 !important; }
  .message.actions-open .message-actions { display: flex !important; }
}

/* --------------------------------------------------------------------------
   FILE DOC-SIGN-LINK - make it less !important-y by re-asserting cleanly
   (kept compatible with the original colors)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TASK CHECKLIST ROW - let badges wrap to a second line so the long
   "Sunday 10th May, 06:00 PM" date doesn't squeeze the title into a
   1-word-wide column.
   -------------------------------------------------------------------------- */
.task-checklist-row {
  flex-wrap: wrap !important;
  row-gap: 4px !important;
}
.task-item-text {
  flex: 1 1 220px !important;   /* grow & shrink, but never below 220px before wrapping */
  min-width: 180px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   SIDEBAR SECONDARY TABS - Notes / Documents under the Docs pane.
   Sits inside #sidebarPaneDocs. Same visual language as the parent
   .sidebar-tabs but smaller and with a softer underline.
   -------------------------------------------------------------------------- */
.sidebar-subtabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 4px;
}
.sidebar-subtab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 6px;
  border: none; background: none;
  color: rgba(255,255,255,0.55);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.sidebar-subtab:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.03); }
.sidebar-subtab.active {
  color: #fff;
  border-bottom-color: var(--primary);
  background: rgba(237,66,54,0.08);
}
.sidebar-subpane { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.sidebar-subpane.active { display: flex; flex-direction: column; }

@media (max-width: 480px) {
  .sidebar-subtab { padding: 10px 4px; font-size: 11px; }
  .sidebar-subtab .material-icons { font-size: 14px !important; }
}

/* --------------------------------------------------------------------------
   COLLABORATOR AVATAR STACK - "who's live in this doc/note" indicator.
   Use:  <div class="collab-stack" data-tooltip="…">{ avatar circles }</div>
   Each child .collab-avatar renders as a small circle, overlapping the
   previous one. UI.renderCollabStack() builds these from a list of users.
   -------------------------------------------------------------------------- */
.collab-stack {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse; /* so first user is on top in the stack */
  margin-right: 8px;
}
.collab-stack .collab-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  border: 2px solid var(--bg-main, #fff);
  margin-left: -8px; /* overlap */
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.collab-stack .collab-avatar:last-child { margin-left: 0; }
.collab-stack .collab-avatar.more {
  background: var(--surface-3, #ececef);
  color: var(--text-secondary);
  font-size: 10px;
}
.collab-stack .collab-avatar[data-status="online"]::after {
  content: '';
  position: absolute; bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  background: var(--online, #44b700);
  border-radius: 50%;
  border: 2px solid var(--bg-main, #fff);
}

/* --------------------------------------------------------------------------
   NOTE IMAGE LINKS
   New images are inserted as text links (📷 filename). Clicking opens the
   FileViewer preview. We deliberately avoid inline <img> embeds because
   Quill + Yjs reflow on inline images caused noticeable rendering thrash
   on long notes / many collaborators.
   Legacy inline images (in old note bodies) get a hard size cap and a
   click cursor - minimal styling, no per-image observers.
   -------------------------------------------------------------------------- */
.collab-editor .ql-editor a[href*="/uploads/"] {
  display: inline-block;
  background: rgba(0,137,123,0.10);
  color: #00695f !important;
  border-radius: 6px;
  padding: 1px 8px;
  text-decoration: none !important;
  font-weight: 500;
  border: 1px solid rgba(0,137,123,0.20);
  transition: background 0.12s;
}
.collab-editor .ql-editor a[href*="/uploads/"]:hover {
  background: rgba(0,137,123,0.18);
  text-decoration: none !important;
}

/* Legacy inline images - keep them visible but bounded so old notes
   don't blow up the layout. No hover effects, no observer. */
.collab-editor .ql-editor img,
.notes-editor-body img {
  max-width: 240px;
  max-height: 200px;
  border-radius: 6px;
  cursor: zoom-in;
  margin: 4px 0;
  background: #fff;
  /* Native browser lazy-load - no JS observer needed. */
}

/* Drag-and-drop highlight on the editor while a file hovers over it */
.collab-editor-dropping,
.collab-editor.collab-editor-dropping {
  outline: 2px dashed var(--primary);
  outline-offset: -6px;
  background: rgba(237,66,54,0.04);
}

/* --------------------------------------------------------------------------
   ANNOTATION TOOL - visible selected color, white-on-white fix
   -------------------------------------------------------------------------- */
.annotate-color { position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }
.annotate-color[data-selected="true"]::after {
  content: '';
  position: absolute; inset: -4px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   ENSURE MODAL OVERLAY (legacy id) does not bleed under our new modals
   -------------------------------------------------------------------------- */
#modalOverlay { z-index: var(--z-modal-backdrop); }

/* --------------------------------------------------------------------------
   ARIA-LIVE region (visually hidden but accessible)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   HEADER NAV BUTTONS - replace inline-style nightmare in index.html
   -------------------------------------------------------------------------- */
.header-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-light);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.header-nav-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.20); text-decoration: none; }
.header-nav-btn .material-icons { font-size: 16px; }
.header-nav-btn[data-variant="primary"] {
  background: var(--primary);
  border-color: var(--primary-dark);
}
.header-nav-btn[data-variant="primary"]:hover { background: var(--primary-dark); }
.header-nav-btn[data-variant="success"] {
  background: var(--success);
  border-color: var(--success-dark);
}
.header-nav-btn[data-variant="success"]:hover { background: var(--success-dark); }

/* --------------------------------------------------------------------------
   SHARED PAGE CHROME (AppHeader pages: Tasks / Protocols / Settings / People)
   -------------------------------------------------------------------------- */
/* Nav buttons in the shared header - same look as the chat header nav. */
.ah-nav { display: flex; gap: 8px; margin-left: 4px; }
.ah-nav .header-nav-btn.active { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.28); }
@media (max-width: 900px) { .ah-nav { display: none; } } /* mobile: tabbar covers navigation */

/* THE chat sidebar, rendered by AppHeader on every page. Reuses the chat's
   own .sidebar look (app.css); this block only positions it as a fixed
   full-height rail and adds the logo row. */
.app-shell-sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-width, 260px);
  z-index: 260;
  display: flex; flex-direction: column;
}
.app-shell-logo {
  color: #fff; font-weight: 800; font-size: 20px; letter-spacing: -0.5px;
  padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.app-shell-logo span { color: var(--primary, #CD2B1D); }
.app-shell-scroll { overflow-y: auto; flex: 1; padding: 12px 0 20px; }
.app-shell-sidebar .sidebar-item { cursor: pointer; }
body.has-app-shell { padding-left: var(--sidebar-width, 260px); }
@media (max-width: 900px) {
  .app-shell-sidebar { display: none; }
  body.has-app-shell { padding-left: 0; }
}

/* Mobile: ONLY the avatar shows in the header user pill - the name (and its
   dot/chevron) hides so the page title / person name gets the room. Applies
   to the chat header pill and the shared AppHeader pill alike. */
@media (max-width: 768px) {
  .user-avatar-pill .ah-user-name-wrap,
  .user-avatar-pill #myUsername,
  .user-avatar-pill #myStatusDot,
  .user-avatar-pill > span:not(.user-avatar-circle) { display: none !important; }
  .user-avatar-pill { padding: 4px; }
}

/* Hamburger on shared-header pages: slides the shell sidebar in as a mobile overlay. */
@media (max-width: 900px) {
  body.shell-sidebar-open .app-shell-sidebar {
    display: flex; width: min(300px, 82vw);
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  }
}

/* Shared header pins to the top while the page scrolls (shell pages). */
body.has-app-shell .app-header { position: sticky; top: 0; }

/* Workspace badge on cross-workspace items in the shell Docs pane. */
.shell-biz-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85);
  border-radius: 999px; padding: 2px 8px; max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-shell-sidebar .sidebar-tabs { flex-shrink: 0; }

/* McHub emblem beside the wordmark in the sidebar logo block. */
.app-shell-logo { display: flex; align-items: center; gap: 9px; }
.app-shell-logo-img { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }

/* McHub logo in the top nav bar (chat page; shell pages carry it in the rail
   corner which sits on the same visual row). Desktop only - mobile keeps the
   header lean for the page/person name. */
.app-header-logo {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  color: #fff; font-weight: 800; font-size: 19px; letter-spacing: -0.4px;
  padding-right: 6px;
}
.app-header-logo img { width: 28px; height: 28px; border-radius: 8px; }
.app-header-logo span { color: var(--primary, #CD2B1D); }
@media (max-width: 768px) { .app-header-logo { display: none; } }

/* Alignment: the chat header's logo block spans exactly the sidebar width
   with a divider, so the workspace switcher (and everything after it) starts
   on the same vertical line as the content column - identical to the rail
   pages. The rail logo block matches the header height for the same reason. */
@media (min-width: 769px) {
  .app-header .app-header-logo {
    width: var(--sidebar-width, 260px);
    box-sizing: border-box;
    align-self: stretch;
    margin-left: -16px;             /* header has 16px padding; line starts at x=0 */
    padding-left: 16px;
    border-right: 1px solid rgba(255,255,255,0.08);
  }
}
.app-shell-logo {
  height: var(--header-height, 56px);
  box-sizing: border-box;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 0;
}

/* Chat: the drawer logo shows on mobile only (desktop has it in the header,
   sized to the sidebar for the alignment line). Same block as the rail pages,
   so both drawers read identically. */
.app-shell-logo-mobile { display: none; }
@media (max-width: 768px) { .app-shell-logo-mobile { display: flex; } }

/* Shell drawer: the WORKSPACE block shows when the drawer is open on mobile,
   exactly like the chat's drawer. */
@media (max-width: 900px) {
  body.shell-sidebar-open .app-shell-sidebar .sidebar-business-mobile { display: block !important; }
}