/* ==========================================================================
   InfiluxAppSec-Chat — Zoho Cliq Exact UI Theme
   Dark Navigation Rail & Sidebar + Clean Light Multi-Pane Chat Canvas
   ========================================================================== */

:root {
  /* ---- Header & Navigation Surfaces (Dark Slate Navy) ---- */
  --header-bg: #142530;
  --header-border: rgba(255, 255, 255, 0.08);
  --rail-bg: #0c1822;
  --rail-item-hover: #172c3c;
  --rail-item-active: #172c3c;
  --sidebar-bg: #142431;
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-active: #1a3547;
  --sidebar-border: rgba(255, 255, 255, 0.07);

  /* ---- Chat Canvas (Crisp Clean White / Light Canvas) ---- */
  --main-bg: #ffffff;
  --chat-pane-bg: #ffffff;
  --chat-pane-border: #e2e8f0;
  --chat-topbar-bg: #ffffff;
  --chat-topbar-border: #edf2f7;
  --date-pill-bg: #f1f5f9;
  --date-pill-text: #64748b;
  --msg-hover: #f8fafc;
  --attachment-bg: #f8fafc;
  --attachment-border: #e2e8f0;

  /* ---- Infilux / Cliq Signature Colors ---- */
  --brand-orange: #ff6a3d;
  --brand-orange-hover: #f95724;
  --brand-orange-soft: rgba(255, 106, 61, 0.12);
  --accent: #ff6a3d;
  --accent-2: #0ea5e9;
  --primary: #ff6a3d;

  /* ---- Typography Colors ---- */
  --text-nav: #94a3b8;
  --text-nav-bright: #f8fafc;
  --text-nav-muted: #64748b;
  --text-main: #1e293b;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-link: #0284c7;

  /* ---- Status Semantics ---- */
  --online: #10b981;
  --away: #f59e0b;
  --busy: #ef4444;
  --offline: #94a3b8;

  /* ---- Radii & Borders ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- Fonts ---- */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--text-main);
  background-color: var(--header-bg);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.6);
}

/* ==========================================================================
   1. Top Global Header Bar
   ========================================================================== */

.global-header {
  height: 44px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  user-select: none;
  z-index: 50;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 300px;
}

.infilux-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #ff6a3d;
  text-transform: uppercase;
}

.infilux-logo-icon {
  width: 24px;
  height: 24px;
  background: #ff6a3d;
  border-radius: 5px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(255, 106, 61, 0.4);
}

.header-icon-btn {
  color: var(--text-nav);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  transition: all 0.15s ease;
}
.header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Global Search & Action Center */
.header-center {
  flex: 1;
  max-width: 540px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.global-search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  color: #cbd5e1;
  font-size: 13px;
  transition: all 0.15s ease;
}
.global-search-bar:focus-within {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.25);
}
.global-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #f8fafc;
  padding-left: 8px;
  font-size: 12.5px;
}
.global-search-bar input::placeholder {
  color: #64748b;
}

.header-create-btn {
  background: var(--brand-orange);
  color: #ffffff;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 106, 61, 0.35);
  transition: transform 0.12s ease, background 0.12s ease;
}
.header-create-btn:hover {
  background: var(--brand-orange-hover);
  transform: scale(1.05);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-badge-btn {
  position: relative;
  color: var(--text-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
}
.header-badge-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.header-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--brand-orange);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-orange);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Zoho Cliq Exact Profile Flyout Panel */
.rail-profile {
  position: relative;
  display: flex;
  align-items: center;
}

.cliq-profile-flyout {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 999999;
  width: 350px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #1e293b;
  display: flex;
  flex-direction: column;
  animation: flyout-in 0.15s ease-out;
}
.cliq-profile-flyout[hidden] {
  display: none !important;
}

@keyframes flyout-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Flyout Top Grey Header Card */
.flyout-header {
  background: #f4f6f8;
  padding: 22px 18px 16px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #e2e8f0;
}

.flyout-close {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #64748b;
  font-size: 15px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: all 0.12s ease;
}
.flyout-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}

.flyout-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.flyout-avatar {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: #1976d2;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.flyout-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flyout-user-name {
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  margin-bottom: 2px;
}

.flyout-user-email {
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 2px;
}

.flyout-user-id {
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}
.flyout-copy-btn {
  font-size: 11px;
  cursor: pointer;
  opacity: 0.7;
}
.flyout-copy-btn:hover {
  opacity: 1;
}

.flyout-links-row {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.flyout-account-link {
  color: #64748b;
  font-weight: 500;
}
.flyout-account-link:hover {
  color: #0f172a;
  text-decoration: underline;
}
.flyout-dot-separator {
  color: #94a3b8;
}
.flyout-signout-btn {
  color: #ef4444;
  font-weight: 600;
  cursor: pointer;
}
.flyout-signout-btn:hover {
  text-decoration: underline;
}

/* Status Selector Box */
.flyout-status-selector {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  gap: 6px;
}
.status-dot-dropdown {
  display: flex;
  align-items: center;
}
.flyout-status-select {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
}

/* Flyout Body & Sections */
.flyout-body {
  padding: 16px 18px 20px;
  background: #ffffff;
  text-align: left;
}

.flyout-section {
  margin-bottom: 16px;
}
.flyout-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.flyout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
}

.flyout-grid-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #334155;
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.12s ease;
}
.flyout-grid-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.flyout-highlight {
  background: #f1f5f9;
  font-weight: 600;
}
.grid-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   2. Main WorkSpace App Grid
   ========================================================================== */

.app-shell {
  display: grid;
  /* 68px, not 58px: the rail labels are uppercase 9-char words ("CHANNELS",
     "REMINDERS", "CALENDAR") and at 58px they overflowed the column and were
     clipped to "ANNELS" / "MINDERS" / "ENDAR". */
  grid-template-columns: 68px 240px 1fr;
  height: calc(100vh - 44px);
  width: 100vw;
  overflow: hidden;
  background: var(--main-bg);
}

/* ==========================================================================
   3. Navigation Rail (Leftmost Vertical Tab Bar)
   ========================================================================== */

.rail {
  background: var(--rail-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.rail-item {
  width: 100%;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-nav);
  position: relative;
  transition: all 0.15s ease;
  padding: 0 2px;
}
.rail-item:hover {
  color: var(--text-nav-bright);
  background: var(--rail-item-hover);
}
.rail-item.active {
  color: var(--brand-orange);
  background: var(--rail-item-active);
}
.rail-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--brand-orange);
  border-radius: 0 2px 2px 0;
}
.rail-item svg {
  width: 18px;
  height: 18px;
}
.rail-item-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* Belt and braces: if a longer label is ever added, truncate it inside the
     rail rather than letting it spill across the sidebar. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-spacer {
  flex: 1;
}

/* ==========================================================================
   4. Sidebar (Second Column - Remote Work, Pins, Conversations, Threads)
   ========================================================================== */

.sidebar {
  background: var(--sidebar-bg);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  user-select: none;
  border-right: 1px solid var(--sidebar-border);
}

/* Remote Work Toggle */
.sidebar-remote-work {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sidebar-border);
}
.remote-work-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #f1f5f9;
}
.remote-toggle-switch {
  width: 32px;
  height: 18px;
  background: #334155;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.remote-toggle-switch.active {
  background: var(--brand-orange);
}
.remote-toggle-knob {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}
.remote-toggle-switch.active .remote-toggle-knob {
  transform: translateX(14px);
}

/* Section Headers */
.sidebar-section {
  padding: 14px 14px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sidebar-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.03em;
}
/* The actions group together on the right.
   `justify-content: space-between` on the row was spreading THREE children
   across it, which left the folder button stranded in the middle of the
   header with the title on one side and the add button on the other. The
   title takes the space instead, and the buttons sit as a pair. */
.sidebar-section-title { flex: 1; min-width: 0; }
.sidebar-section-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.sidebar-section-action {
  /* A <button> here needs the reset; an <a> does not, and both use this
     class. Without it the buttons render with the browser's own chrome. */
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 22px, not a bare 14px glyph: these sit a few pixels apart and were
     easy to miss and easy to hit the wrong one. */
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #64748b;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.sidebar-section-action:hover {
  color: #ffffff;
  background: rgba(148, 163, 184, 0.16);
}
.sidebar-section-action:focus-visible {
  outline: 2px solid var(--accent, #ff5a1f);
  outline-offset: 1px;
  color: #ffffff;
}
.sidebar-section-action svg { width: 14px; height: 14px; display: block; }

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 2px 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-link:hover {
  background: var(--sidebar-item-hover);
  color: #ffffff;
}
.sidebar-link.active {
  background: var(--sidebar-item-active);
  color: #ffffff;
  font-weight: 600;
}

.sidebar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--offline);
  flex-shrink: 0;
}
.sidebar-dot.active, .sidebar-dot.online { background: var(--online); }
.sidebar-dot.away { background: var(--away); }
.sidebar-dot.busy { background: var(--busy); }
.sidebar-dot.offline { background: var(--offline); }

.sidebar-link .hash {
  color: #94a3b8;
  font-weight: 700;
  font-family: var(--font-mono);
}

.sidebar-show-all {
  display: block;
  padding: 6px 14px;
  font-size: 11.5px;
  color: var(--brand-orange);
  font-weight: 600;
}
.sidebar-show-all:hover {
  text-decoration: underline;
}

/* Sidebar conversation item with hover ⋮ button */
.sidebar-item {
  display: flex;
  align-items: center;
  border-radius: var(--radius-xs);
  position: relative;
}
.sidebar-item .sidebar-link {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}
.sidebar-link-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.sidebar-item-actions {
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  flex-shrink: 0;
  padding-right: 4px;
}
.sidebar-item:hover .sidebar-item-actions,
.sidebar-item.ctx-open .sidebar-item-actions {
  opacity: 1;
  pointer-events: all;
}
.sidebar-more-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.sidebar-more-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}
.sidebar-item:hover .sidebar-link {
  background: var(--sidebar-item-hover);
  color: #ffffff;
}

/* Sidebar Context Menu */
.sidebar-ctx-menu {
  position: fixed;
  background: #1e3448;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 9998;
  min-width: 190px;
  padding: 4px;
  overflow: hidden;
}
.sidebar-ctx-menu[hidden] { display: none; }
.sctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
  text-align: left;
}
.sctx-item svg { flex-shrink: 0; color: #64748b; }
.sctx-item:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}
.sctx-item:hover svg { color: #94a3b8; }
.sctx-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 3px 8px;
}
.sctx-danger { color: #f87171 !important; }
.sctx-danger svg { color: #f87171 !important; }
.sctx-danger:hover { background: rgba(239,68,68,0.15) !important; }

/* Unread dot on sidebar items */
.sidebar-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-orange);
  flex-shrink: 0;
  margin-left: auto;
  display: inline-block;
}



/* ==========================================================================
   5. Chat Canvas (Clean Light White Multi-Pane Design)
   ========================================================================== */

.main {
  background: var(--main-bg) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.main-body {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}

/* Chat Column / Pane */
.chat-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid var(--chat-pane-border);
}

/* Topbar in Chat Pane */
.topbar {
  height: 52px;
  background: var(--chat-topbar-bg);
  border-bottom: 1px solid var(--chat-topbar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  box-shadow: 0 1px 0 #edf2f7;
}

.topbar-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), #f97316);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(255,106,61,0.25);
}
.topbar-avatar-channel {
  background: #f1f5f9;
  box-shadow: none;
  border: 1px solid #e2e8f0;
}
.topbar-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.topbar-title-group {
  min-width: 0;
}
.topbar h1 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
}
.topbar-presence {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.topbar-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  display: inline-block;
}
.topbar-divider {
  color: #cbd5e1;
  margin: 0 2px;
}
.topbar-meta-dot {
  opacity: 0.7;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-btn {
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.topbar-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.topbar-btn.active {
  color: var(--brand-orange);
  background: var(--brand-orange-soft);
}
.topbar-btn-pin {
  font-size: 11.5px;
  border: 1px solid #e2e8f0;
}
.topbar-btn-pin.active {
  border-color: rgba(255,106,61,0.3);
}
.topbar-btn-close:hover {
  background: #fee2e2;
  color: #ef4444;
}
.topbar-divider-line {
  width: 1px;
  height: 18px;
  background: #e2e8f0;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Date Pill Separator */
.date-pill {
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Chat Empty State */
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px 40px;
  flex: 1;
}
.chat-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
}
.chat-empty-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-orange), #f97316);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(255,106,61,0.25);
}
.chat-empty-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  font-family: var(--font-display);
}
.chat-empty-sub {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  max-width: 360px;
  line-height: 1.6;
}

/* Older messages sentinel (infinite scroll upward) */
.older-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  min-height: 40px;
}
.older-loader {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}
.older-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: var(--brand-orange);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Beginning-of-conversation marker */
.chat-beginning {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 16px;
  text-align: center;
}
.chat-beginning-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  color: #64748b;
}
.chat-beginning-text {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  font-weight: 500;
}
.chat-beginning-text strong { color: #475569; }


/* Message Feed */
.message-feed {
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  /* Allow absolutely positioned action bars to appear */
  position: relative;
}

.date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 10px;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  z-index: 4;
}

.msg {
  display: flex;
  gap: 12px;
  padding: 6px 20px;
  border-radius: 0;
  position: relative;
  transition: background 0.1s ease;
  margin: 0;
  overflow: visible;
}
.msg:hover {
  background: #f8fafc;
}

/* Show time on hover in left gutter */
.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.msg-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.msg-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 2px;
}
.msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.msg-author {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.msg-time {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}
/* Read receipts. Three states, and they mean different things:
   sent (one faint tick), seen by somebody (two ticks), seen by everyone in
   the conversation (two ticks, coloured). Always visible rather than
   revealed on hover — a tick you have to go looking for cannot answer
   "did they see it?", which is the only question it exists for. */
.msg-receipt {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  line-height: 0;
}
.msg-receipt .tick-two { opacity: 0; }
.msg-receipt.is-seen .tick-two { opacity: 1; }
.msg-receipt.is-all { color: #0ea5e9; }
@media (prefers-reduced-motion: no-preference) {
  .msg-receipt .tick-two,
  .msg-receipt { transition: opacity .18s ease, color .18s ease; }
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.msg-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #1e293b;
  word-break: break-word;
}
.msg-text .mention {
  color: var(--brand-orange);
  font-weight: 600;
  background: var(--brand-orange-soft);
  padding: 1px 5px;
  border-radius: 3px;
}
.msg-edited-tag {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-left: 6px;
}
.msg-deleted {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
}

/* Thread reply count link (shows when replies > 0) */
.thread-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #0284c7;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  transition: all 0.12s ease;
}
.thread-reply-link:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}

/* ── JS-driven Floating Hover Bar (appended to body) ── */
#msg-hover-bar {
  position: fixed;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease;
  height: 32px;
  padding: 0 2px;
  gap: 2px;
}
#msg-hover-bar.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.mhb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 26px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
  border-radius: 4px;
  font-size: 14px;
  padding: 0;
}
.mhb-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.mhb-btn.active {
  color: var(--brand-orange);
}
.mhb-delete:hover {
  background: #fef2f2 !important;
  color: #ef4444 !important;
}


/* Keep old .msg-actions hidden (inline template fallback) */
.msg-actions { display: none !important; }

.msg-text .mention {
  color: var(--brand-orange);
  font-weight: 600;
  background: var(--brand-orange-soft);
  padding: 0 4px;
  border-radius: 3px;
}

/* Message body — markdown rendering */
.msg-text strong {
  font-weight: 700;
  color: #0f172a;
}
.msg-text em {
  font-style: italic;
  color: #374151;
}
.msg-text del {
  text-decoration: line-through;
  color: #94a3b8;
}
.msg-code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #e11d48;
}
.msg-code-block {
  display: block;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
}
.msg-link {
  color: #0284c7;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.msg-link:hover {
  color: #0369a1;
}

/* Reaction count badge */
.reaction-count {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
}

/* Audio / Video Call Log Pill */
.call-log-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  margin-top: 4px;
  font-size: 12.5px;
}
.call-log-card .call-again-link {
  color: #0284c7;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.call-log-card .call-again-link:hover {
  text-decoration: underline;
}

/* Attachments */
.msg-attachments {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attachment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--attachment-bg);
  border: 1px solid var(--attachment-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: #1e293b;
}
.attachment-card:hover {
  border-color: #cbd5e1;
}

/* Reactions */
.reactions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.reaction-pill {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.reaction-pill:hover {
  background: #f1f5f9;
}
.reaction-pill.mine {
  border-color: var(--brand-orange);
  background: var(--brand-orange-soft);
  color: var(--brand-orange);
}

/* Floating Message Actions */
.msg-actions {
  display: none;
  position: absolute;
  top: -12px;
  right: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 10;
  overflow: hidden;
}
.msg-actions button {
  padding: 4px 8px;
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-actions button:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Typing Indicator */
.typing-indicator {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  padding: 2px 24px;
  min-height: 18px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s ease;
  font-family: var(--font-display);
}
.typing-indicator:empty {
  opacity: 0;
}

.composer {
  padding: 10px 20px 16px;
  background: #ffffff;
  border-top: 1px solid #edf2f7;
  flex-shrink: 0;
}

.composer-box {
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: 10px 14px 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.composer-box:focus-within {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.12) !important;
}

/* Reply strip inside composer */
.composer-reply-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff7f5;
  border: 1px solid rgba(255,106,61,0.2);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--brand-orange);
  font-weight: 600;
}
.composer-reply-cancel {
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}
.composer-reply-cancel:hover {
  color: #475569;
  background: #f1f5f9;
}

.composer-input {
  width: 100%;
  border: none;
  resize: none;
  outline: none;
  font-size: 13.5px;
  color: #0f172a;
  min-height: 28px;
  max-height: 150px;
  background: transparent;
  padding: 0;
  margin-bottom: 8px;
  line-height: 1.5;
}
.composer-input::placeholder {
  color: #94a3b8;
}

.composer-file-name {
  font-size: 11.5px;
  color: var(--brand-orange);
  font-weight: 600;
  margin-bottom: 4px;
}

.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}

.composer-tools-left {
  display: flex;
  align-items: center;
  gap: 2px;
}
.composer-separator {
  width: 1px;
  height: 16px;
  background: #e2e8f0;
  margin: 0 6px;
  flex-shrink: 0;
}
.composer-tool-btn {
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}
.composer-tool-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.composer-tools-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-send-btn {
  background: var(--brand-orange);
  color: #ffffff;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 8px rgba(255,106,61,0.3);
}
.composer-send-btn:hover {
  background: var(--brand-orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255,106,61,0.4);
}
.composer-send-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255,106,61,0.3);
}

/* Typing Indicator */
.typing-indicator {
  padding: 4px 20px;
  font-size: 11.5px;
  color: var(--brand-orange);
  height: 20px;
  font-style: italic;
  font-weight: 500;
}

/* ==========================================================================
   7. Generic / Account / Admin Pages
   ========================================================================== */

.page {
  padding: 28px 36px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: #f8fafc;
}

.page h1 {
  font-size: 21px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #0f172a;
  font-family: var(--font-display);
}

.page .lede {
  color: #64748b;
  margin: 0 0 20px;
  font-size: 13px;
}

/* ---- Page Tab Navigation ---- */
.page-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 24px;
  margin-top: 4px;
}
.page-tab {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.15s ease;
  position: relative;
  bottom: -2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.page-tab:hover {
  color: #0f172a;
  border-bottom-color: #cbd5e1;
}
.page-tab.active {
  color: var(--brand-orange);
  border-bottom: 2px solid var(--brand-orange);
  background: transparent;
}

/* ---- Tab Panels ---- */
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

/* ---- Settings Page Layout ---- */
.settings-page {
  max-width: 780px !important;
}
.settings-header {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.settings-header-avatar {
  display: flex;
  align-items: center;
  gap: 20px;
}
.settings-avatar-lg {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--brand-orange);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid #f1f5f9;
  box-shadow: 0 2px 12px rgba(255,106,61,0.25);
}
.settings-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings-header-name {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-display);
  margin-bottom: 2px;
}
.settings-header-email {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
}
.settings-header-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.settings-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.settings-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.settings-card-sub {
  font-size: 12.5px;
  color: #64748b;
  margin-bottom: 20px;
}
.settings-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.settings-avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: var(--brand-orange);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #e2e8f0;
}
.settings-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings-status-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-size: 13px;
  color: #334155;
  font-weight: 500;
  margin-top: 8px;
}
.settings-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--online);
  flex-shrink: 0;
}
.settings-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  margin-top: 4px;
}

/* ---- Badge online variant ---- */
.badge-online { background: #dcfce7; color: #15803d; }

/* ---- Stat Cards ---- */
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.card-sub {
  font-size: 12px;
  color: #64748b;
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}
.badge-success { background: #dcfce7; color: #15803d; }
.badge-muted { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.badge-accent { background: var(--brand-orange-soft); color: var(--brand-orange); }
.badge-danger { background: #fee2e2; color: #b91c1c; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.12s ease;
}
.btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn-primary {
  background: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background: var(--brand-orange-hover) !important;
  border-color: var(--brand-orange-hover) !important;
}
.btn-danger {
  color: #ef4444;
  border-color: #fca5a5;
  background: #fef2f2;
}
.btn-danger:hover {
  background: #fee2e2;
  border-color: #ef4444;
}
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}
.btn-lg {
  padding: 10px 20px;
  font-size: 13.5px;
}

.form-group {
  margin-bottom: 14px;
}
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #334155;
}
.form-group input, .form-group select, .form-group textarea, .form-control {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  font-size: 13px;
  background: #ffffff;
  color: #0f172a;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.2);
}

.person-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px);
}

/* Stat Cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.stat-card .n {
  font-size: 26px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #0f172a;
  margin-bottom: 4px;
}
.stat-card .l {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

/* Data Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.data-table th {
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background: #f8fafc;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Empty States */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.empty-state h2 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 12px 0 6px;
}
.empty-state p {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Alerts & Messages */
.messages-alerts {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
}
.alert-error, .alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.alert-info {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #075985;
}
.alert-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

/* Icon Circles */
.auth-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
}
.auth-icon-circle.success {
  background: #dcfce7;
  color: #15803d;
}
.auth-icon-circle.danger {
  background: #fee2e2;
  color: #dc2626;
}
.auth-icon-circle.info {
  background: #e0f2fe;
  color: #0284c7;
}

/* Call Room Grid & Controls */
.call-room {
  display: flex;
  flex-direction: column;
  /* .main above already resolves to the correct on-screen height (its own
     ancestor .app-shell uses dvh with --header-h subtracted specifically
     for mobile browsers — see the max-width: 900px rules). 100% here just
     has to inherit that, not recompute it — a second, independent dvh
     figure on this element would come out taller than .main actually is
     and get clipped by its overflow: hidden instead. overflow: hidden is
     what actually keeps a tall grid (many tiles) from pushing the controls
     off screen; before this, the room had no height boundary of its own
     children to respect at all. */
  height: 100%;
  min-height: 0;
  background: radial-gradient(120% 140% at 15% -10%, #1c2c4a 0%, #0f172a 45%, #0b1120 100%);
  color: #ffffff;
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.call-room .call-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  flex-shrink: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 0 12px;
  min-width: 0;
}
.call-room .call-topbar h1 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Participant count and call duration — things you could previously only
   work out by counting tiles yourself or watching a clock elsewhere. */
.call-topbar-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.call-topbar-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.call-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-height: 0;
  overflow-y: auto;
}
/* "Ringing…" / "No answer" / "Declined" / "Call ended" — states the call
   room previously had no way to show at all; the grid just sat empty. */
.call-status-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 18px;
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: #e2e8f0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  align-self: center;
}
.call-status-banner::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange, #f97316);
  animation: call-status-pulse 1.4s ease-in-out infinite;
}
@keyframes call-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .call-status-banner::before { animation: none; }
}
.call-tile {
  background: linear-gradient(160deg, #24314f 0%, #1a2438 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
}
.call-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No active video track — an audio call, or someone's camera is off. A
   flat black rectangle used to be the only thing here, indistinguishable
   from a frozen/broken stream; this reads unambiguously as "on purpose." */
.call-tile.is-video-off video { visibility: hidden; }
.call-tile.is-video-off::after {
  content: "📷";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  opacity: 0.32;
  filter: grayscale(1);
}
.call-tile-label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Call controls — an icon dock (primary) plus a row of labelled pills
   (secondary, mostly host-only). Previously every control, from "Mute" to
   "Waiting room off", was the same plain text .btn — fine at 7 buttons on a
   1440px screen, unusable at 7 buttons on a 360px one. Primary actions are
   now icon-only circles (title="" carries the accessible name and the
   tooltip), which is both the density fix and, for the camera button
   specifically, the "make it simple" ask itself: one glyph that changes
   color, not a button whose whole sentence changes.
   -------------------------------------------------------------------------- */
/* Row, not column: primary and secondary used to always stack as two
   separate lines regardless of how much width was actually available —
   on anything wider than a phone that was empty space going unused
   while the controls took twice the height they needed. Now they sit on
   one line and only wrap onto a second when the viewport genuinely runs
   out of room (the same flex-wrap the two groups already had). */
.call-controls {
  position: relative; /* containing block for the #call-reactions popover */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  flex-shrink: 0;
}
.cc-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}
/* A quiet vertical rule between the two groups now that they share a
   line — without it, "Leave" and "Add participant" ran together with
   nothing marking where one group's meaning ends and the other's begins. */
.cc-secondary {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.callctl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
  flex-shrink: 0;
}
.callctl:hover { background: rgba(255, 255, 255, 0.13); }
.callctl:active { transform: scale(0.96); }
.callctl:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.callctl:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary: fixed circles, icon only — the label exists for screen
   readers and the native tooltip (title=), never drawn. 44px rather than
   the original 52px: still comfortably past the 44px minimum touch
   target (see the @media (pointer: coarse) rule further down), just
   less oversized on a desktop pointer where nobody needs a target that
   large. */
.cc-primary .callctl {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
}
.cc-primary .callctl-icon { font-size: 18px; line-height: 1; }
.cc-primary .callctl-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Muted / camera-off / hand-not-raised-anymore — a state you're IN, distinct
   from is-active below (a mode you turned ON, like sharing your screen). */
.cc-primary .callctl.is-off {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(248, 113, 113, 0.4);
  color: #fca5a5;
}
.cc-primary .callctl.is-off:hover { background: rgba(239, 68, 68, 0.28); }

.cc-hangup {
  background: #dc2626;
  border-color: #dc2626;
}
.cc-hangup:hover { background: #ef4444; }
.cc-hangup:disabled { background: #7f1d1d; border-color: #7f1d1d; }

/* Secondary: icon + visible label pills — less frequent, host-mostly
   controls where a state ("waiting room on") isn't legible from a glyph
   alone. Smaller and visually quieter than the primary dock on purpose. */
.cc-secondary .callctl-sm {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.cc-secondary .callctl-icon { font-size: 13px; }
.callctl-sm.is-active,
.call-controls .btn.is-active {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: #fff;
}

/* --- calls: screenshare, roster, reactions, in-call chat ------------------ */
.call-body {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
}
.call-body .call-grid {
  flex: 1;
}
/* A shared screen must never be cropped the way a webcam tile can be —
   `cover` would slice the edges off shared documents and terminals. */
.call-tile.is-sharing video {
  object-fit: contain;
  background: #000;
}
.call-tile.is-sharing {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: -2px;
}
/* Full-bleed spotlight while someone is sharing their screen — the
   Teams/Zoom convention: the share fills essentially the whole video
   area, and everyone's camera becomes a small floating strip in one
   corner instead of competing for the same space. An earlier version of
   this gave the share only ~72% of the height with everyone else
   wrapping onto a strip BELOW it; still too small for the fine print and
   UI elements sharing exists to show, and not the layout people actually
   expect from every other call app they use.
   Taking the shared tile fully out of flow (position: absolute; inset: 0)
   is what makes this work with plain flexbox for the corner stack: the
   remaining tiles lay out as if the shared one were never there at all —
   right-aligned, bottom-anchored, stacking upward as more people join —
   with no per-tile positioning math needed.
   :has() degrades safely on a browser too old to support it — the grid
   simply falls back to the equal-tile layout above, not a broken one. */
.call-grid:has(.call-tile.is-sharing) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
}
.call-grid:has(.call-tile.is-sharing) .call-tile.is-sharing {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  max-height: none;
  z-index: 0;
}
.call-grid:has(.call-tile.is-sharing) .call-tile:not(.is-sharing) {
  position: relative;
  z-index: 1;
  flex: 0 0 150px;
  width: 150px;
  height: 100px;
  aspect-ratio: auto;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.75);
}
.call-tile-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
}
.call-badge {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  color: #fff;
}
.call-tile-kick {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.call-reaction-pop {
  position: absolute;
  bottom: 40px;
  left: 50%;
  font-size: 30px;
  animation: call-reaction-float 2.4s ease-out forwards;
  pointer-events: none;
}
@keyframes call-reaction-float {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1.1); }
}
.call-sidepanel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #1e293b;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.call-sidepanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.csp-close {
  display: none;   /* shown only alongside the mobile drawer, below */
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.csp-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.call-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  font-size: 12.5px;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.call-chat-row strong { color: #a5b4fc; }
.call-chat-form {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.call-chat-form input {
  flex: 1;
  min-width: 0;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-size: 12.5px;
}
/* A floating popover now, opened by #btn-react — not a row that used to
   sit permanently in the flow, five emoji buttons tall, whether or not
   anyone had touched it in the last hour. That was the single biggest
   chunk of the controls area's height for the least-used control in it. */
.call-reactions {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
  z-index: 30;
}
.call-reactions[hidden] { display: none; }
.call-reactions button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 17px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.call-reactions button:hover { background: rgba(255, 255, 255, 0.18); }
.call-reactions button:active { transform: scale(0.9); }

/* The mobile chat toggle lives in the primary control dock but has nothing
   to do on a desktop-width screen, where the panel beside the grid is
   already visible all the time. */
.cc-mobile-only { display: none; }
#btn-toggle-chat.has-unread::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-orange, #f97316);
  border: 2px solid #0f172a;
}
#btn-toggle-chat { position: relative; }
.call-add-dialog {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.call-add-dialog.is-open { display: flex; }
/* A column: head and foot hold their place, only the list scrolls.
   Previously `overflow-y: auto` was on this whole box, so a workspace with
   48 people scrolled the title off the top and pushed the confirm button
   below the fold — the dialog appeared as a wall of checkboxes with no
   visible way to close it. */
.call-add-dialog-inner {
  background: #1e293b;
  border-radius: var(--radius-md);
  width: min(460px, 92%);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.cad-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.cad-title { flex: 1; min-width: 0; }
.call-add-dialog-inner h2 { font-size: 15px; margin: 0 0 4px; color: #fff; }
.call-add-dialog-inner .muted { font-size: 12px; color: #94a3b8; margin: 0; }
.cad-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cad-close:hover { background: rgba(148, 163, 184, 0.16); color: #fff; }
.cad-close:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }

.cad-search {
  margin: 12px 20px 4px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 13px;
}
.cad-search:focus { outline: none; border-color: #60a5fa; }

.call-add-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
.call-add-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e2e8f0;
  font-size: 13px;
  cursor: pointer;
  padding: 7px 8px;
  border-radius: 7px;
}
.call-add-list label:hover { background: rgba(148, 163, 184, 0.12); }
.call-add-list label.is-hidden { display: none; }
.cad-nomatch { padding: 0 20px 10px; }

.cad-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}
.cad-count { font-size: 12px; color: #94a3b8; }
.cad-actions { display: flex; gap: 8px; }
.cad-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 780px) {
  .call-room { padding: 12px; }
  .call-room .call-topbar { margin-bottom: 10px; padding-bottom: 8px; }
  .call-room .call-topbar h1 { font-size: 16px; }
  .call-topbar-meta { gap: 6px; }
  .call-topbar-stat { font-size: 11px; }
  .call-body { flex-direction: column; }

  /* The spotlight layout's floating corner tiles are sized for a
     desktop-width screen — at 150x100px each, more than a couple stacked
     in the corner starts covering a meaningful fraction of a phone-width
     shared screen instead of just sitting unobtrusively over one edge. */
  .call-grid:has(.call-tile.is-sharing) {
    padding: 10px;
    gap: 6px;
  }
  .call-grid:has(.call-tile.is-sharing) .call-tile:not(.is-sharing) {
    flex-basis: 80px;
    width: 80px;
    height: 54px;
  }

  /* A drawer, not a permanent block that was always there whether or not
     anyone was looking at it — that used to claim a fixed slice of a phone
     screen's height regardless, which was the biggest single contributor
     to the video area looking squeezed. */
  .call-sidepanel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: min(64vh, 520px);
    z-index: 40;
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.7);
    transform: translateY(calc(100% + 20px));
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
  }
  .call-sidepanel.is-open { transform: translateY(0); }
  .csp-close { display: inline-flex !important; }

  .cc-mobile-only { display: flex; }

  .call-controls { margin-top: 10px; gap: 10px; }
  /* The primary size is already 44px at the desktop base now — the
     minimum touch target (see @media (pointer: coarse) below) — so
     there's nothing left to shrink here; a mobile-specific override
     used to make these BIGGER than desktop, backwards from the actual
     goal of using space more carefully on the smaller screen. */
  .cc-secondary {
    /* The divider reads fine inline next to primary on a wide row; once
       wrapped onto its own line below it, a left border with nothing
       to its left just looks like a stray mark. */
    padding-left: 0;
    border-left: none;
    margin-top: 2px;
  }
}

@media (max-width: 560px) {
  /* One tile filling the space it actually has, rather than a fixed 16:9
     box centered in whatever room is left over — with one or two
     participants and a tall phone screen, that empty margin above and
     below was most of the screen. */
  .call-grid { grid-auto-rows: minmax(200px, 1fr); }
  .call-tile { aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .call-sidepanel { transition: none; }
}

/* --------------------------------------------------------------------------
   Incoming call toast

   `call-notifications.js` builds this and appends it to <body> when somebody
   rings you. It had NO stylesheet rules of any kind, so it rendered as a
   plain block in normal flow at the very bottom of the page: a stray phone
   icon and two lines of dark-on-dark text, usually below the fold. An
   incoming call is the one notification that has to be impossible to miss.

   Fixed rather than absolute: it must stay put while the page behind it
   scrolls, and it must survive being raised from any screen.
   -------------------------------------------------------------------------- */
.call-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: min(340px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.65);
  animation: call-toast-in 180ms ease-out;
}

@keyframes call-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Somebody who has asked for less motion still gets the toast — it simply
   arrives without sliding. */
@media (prefers-reduced-motion: reduce) {
  .call-toast { animation: none; }
}

.call-toast-caller {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.call-toast-caller .badge {
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
  padding: 9px 10px;
  border-radius: 10px;
}
/* The caller's name was inheriting the page's dark body colour on a dark
   panel, which is why it read as almost invisible. */
.call-toast-caller .name {
  color: #f1f5f9;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-toast-caller .room {
  color: #94a3b8;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.call-toast-actions {
  display: flex;
  gap: 8px;
}
/* Equal width, so neither answer is the easy one to hit by accident. */
.call-toast-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 560px) {
  .call-toast { left: 16px; right: 16px; bottom: 16px; width: auto; }
}



/* ==========================================================================
   8. Auth Pages (Infilux Theme)
   ========================================================================== */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--header-bg);
  padding: 20px;
}
.auth-card {
  width: 380px;
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.auth-logo-badge {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}
.auth-logo {
  width: 44px;
  height: 44px;
  background: var(--brand-orange);
  border-radius: var(--radius-xs);
  color: #ffffff;
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card h1 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #0f172a;
}
.auth-card p.sub {
  color: #64748b;
  font-size: 12.5px;
  margin: 0 0 20px;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.input-icon-wrap .input-icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
  flex-shrink: 0;
}
.input-icon-wrap input {
  padding-left: 36px !important;
  width: 100%;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.auth-link {
  color: var(--brand-orange);
  font-weight: 600;
  text-decoration: none;
}
.auth-link:hover {
  text-decoration: underline;
}
.auth-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 12.5px;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
}

/* ==========================================================================
   9. Zoho Cliq Styled Interactive Calendar
   ========================================================================== */

.calendar-sidebar {
  display: flex;
  flex-direction: column;
}

.calendar-filter-list {
  padding: 4px 8px;
}
.calendar-filter-list li {
  margin-bottom: 4px;
}
.cal-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  color: var(--text-nav);
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}
.cal-checkbox-label:hover {
  background: var(--sidebar-item-hover);
  color: var(--text-nav-bright);
}
.cal-checkbox-label input[type="checkbox"] {
  display: none;
}
.cal-custom-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  transition: all 0.15s ease;
}
.cal-checkbox-label input[type="checkbox"]:checked + .cal-custom-check {
  background: #10b981;
  border-color: #10b981;
}
.cal-checkbox-label input[type="checkbox"]:checked + .cal-custom-check.ch-check {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
}
.cal-checkbox-label input[type="checkbox"]:checked + .cal-custom-check::after {
  content: "";
  display: block;
  width: 3.5px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}
.cal-filter-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-sidebar-upcoming {
  padding: 4px 12px;
  max-height: 220px;
  overflow-y: auto;
}
.cal-sidebar-group {
  margin-bottom: 12px;
}
.cal-sidebar-group-date {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-nav-muted);
  margin-bottom: 4px;
}
.cal-sidebar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--text-nav);
  font-size: 12px;
}
.cal-sidebar-item:hover {
  background: var(--sidebar-item-hover);
  color: var(--text-nav-bright);
}
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-event { background: #3b82f6; }
.dot-call { background: #10b981; }
.cal-sidebar-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main Calendar Layout */
.calendar-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}

/* Calendar Top Toolbar */
.cal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  gap: 16px;
}
.cal-topbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cal-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-header-icon {
  color: #64748b;
}
.cal-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.cal-nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cal-btn {
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-btn-secondary {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
}
.cal-btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.cal-nav-arrows {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.cal-arrow-btn {
  width: 28px;
  height: 26px;
  background: #ffffff;
  color: #475569;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cal-arrow-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cal-arrow-btn:first-child {
  border-right: 1px solid #e2e8f0;
}
.cal-range-label {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  min-width: 140px;
}

.cal-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cal-view-selector-dropdown {
  position: relative;
}
.cal-view-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-xs);
  background: #ffffff;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.cal-view-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.cal-view-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 4px;
  z-index: 100;
  min-width: 110px;
}
.cal-view-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  font-size: 12.5px;
  color: #334155;
  border-radius: var(--radius-xs);
  cursor: pointer;
  background: transparent;
}
.cal-view-option:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cal-view-option.active {
  background: var(--brand-orange-soft);
  color: var(--brand-orange);
  font-weight: 700;
}

.cal-btn-create-event {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-orange);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.cal-btn-create-event:hover {
  background: var(--brand-orange-hover);
}
.cal-btn-danger {
  background: #ef4444;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.cal-btn-danger:hover {
  background: #dc2626;
}
.cal-rsvp-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  flex: 1;
}
.cal-rsvp-btn:hover { background: #f8fafc; border-color: #94a3b8; }
.cal-rsvp-btn.is-selected {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #ffffff;
}

/* Calendar Body Area */
.cal-body-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.cal-view-panel {
  display: none;
  flex: 1;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.cal-view-panel.active {
  display: flex;
}

/* Week View Grid */
.cal-week-header {
  display: grid;
  grid-template-columns: 70px 1fr;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  padding-right: 6px; /* scrollbar compensation */
}
.cal-header-tz {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f1f5f9;
  padding: 8px 4px;
}
.cal-header-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-header-day {
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid #f1f5f9;
}
.cal-header-day:last-child {
  border-right: none;
}
.cal-header-day-num-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
}
.cal-header-day.today .cal-header-day-num-wrap {
  color: #2563eb;
  font-weight: 700;
}
.cal-header-day.today .cal-header-day-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cal-week-scroll-body, .cal-day-scroll-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.cal-time-grid {
  display: grid;
  grid-template-columns: 70px 1fr;
  position: relative;
  min-height: 1344px; /* 24 hours * 56px */
}
.cal-time-col {
  border-right: 1px solid #f1f5f9;
}
.cal-time-slot-label {
  height: 56px;
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
  padding-right: 12px;
  margin-top: -7px;
  box-sizing: border-box;
}
.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}
.cal-single-day-col {
  position: relative;
  display: block;
}
.cal-day-col {
  border-right: 1px solid #f1f5f9;
  position: relative;
}
.cal-day-col:last-child {
  border-right: none;
}
.cal-day-col.today-col {
  background: rgba(239, 246, 255, 0.25);
}
.cal-hour-slot {
  height: 56px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.1s ease;
}
.cal-hour-slot:hover {
  background: rgba(255, 106, 61, 0.04);
}

/* Red Live Current Time Line Indicator */
.cal-current-time-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ef4444;
  z-index: 20;
  pointer-events: none;
}
.cal-current-time-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
}

/* Event Cards positioned on the grid */
.cal-events-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.cal-event-card {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: var(--radius-xs);
  padding: 4px 6px;
  font-size: 11.5px;
  line-height: 1.25;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  z-index: 10;
}
.cal-event-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 15;
}
.cal-event-card.is-event {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  color: #1e3a8a;
}
.cal-event-card.is-call {
  background: #ecfdf5;
  border-left: 3px solid #10b981;
  color: #064e3b;
}
.cal-event-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-time {
  font-size: 10.5px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Month View Grid */
.cal-month-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  padding: 8px 0;
}
.cal-month-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, 1fr);
  overflow: hidden;
}
.cal-month-cell {
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  padding: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.1s ease;
}
.cal-month-cell:hover {
  background: #f8fafc;
}
.cal-month-cell.other-month {
  background: #fafafa;
  opacity: 0.6;
}
.cal-month-cell-header {
  margin-bottom: 4px;
}
.cal-month-date-num {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.cal-month-date-num.today-badge {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
}
.cal-month-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.cal-month-event-chip {
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cal-month-event-chip.is-event {
  background: #dbeafe;
  color: #1e40af;
}
.cal-month-event-chip.is-call {
  background: #d1fae5;
  color: #065f46;
}

/* Day View Header */
.cal-day-header {
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.cal-single-day-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.cal-single-day-title .day-num {
  font-size: 20px;
}
.cal-single-day-title.today .day-num {
  color: #2563eb;
}

/* Agenda View */
.cal-agenda-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  max-width: 850px;
}
.cal-agenda-group {
  margin-bottom: 24px;
}
.cal-agenda-group-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 10px;
}
.cal-agenda-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-agenda-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.cal-agenda-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cal-agenda-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.cal-agenda-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.cal-agenda-card-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  display: flex;
  gap: 6px;
}

/* Modals */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
  padding: 16px;
}
.cal-modal-box {
  background: #ffffff;
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 480px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.cal-modal-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
}
.cal-modal-close {
  color: #94a3b8;
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
}
.cal-modal-close:hover {
  color: #0f172a;
}
.cal-modal-box form, .cal-detail-body {
  padding: 18px 20px;
}
.cal-form-group {
  margin-bottom: 14px;
}
.cal-form-group label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.cal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cal-input, .cal-select, .cal-textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  font-size: 13px;
  background: #ffffff;
  color: #0f172a;
}
.cal-input:focus, .cal-select:focus, .cal-textarea:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.2);
}
.cal-attendees-picker {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-xs);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-attendee-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.cal-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.cal-detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #334155;
}
.cal-detail-icon {
  font-size: 15px;
}
.cal-detail-desc {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 13px;
  color: #475569;
}
.cal-detail-desc p {
  margin: 0;
  white-space: pre-wrap;
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 0 0 1fr; }
  .rail, .sidebar { display: none; }
}

/* ==========================================================================
   10. Files, Notes, Tasks Page Components
   ========================================================================== */

/* Files Grid */
.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.file-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.file-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}
.file-card-thumb {
  width: 100%;
  height: 120px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.file-card-info {
  padding: 10px 12px;
}
.file-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.file-card-meta {
  font-size: 11px;
  color: #94a3b8;
}

/* Notes Grid */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.note-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  min-height: 140px;
}
.note-card:hover {
  border-color: var(--brand-orange);
  box-shadow: 0 4px 16px rgba(255,106,61,0.1);
  transform: translateY(-2px);
}
.note-card-icon {
  font-size: 20px;
  margin-bottom: 10px;
}
.note-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-card-body {
  font-size: 12.5px;
  color: #64748b;
  flex: 1;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.note-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  color: #94a3b8;
}

/* Task Kanban Board */
.task-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
.task-col {
  background: #f1f5f9;
  border-radius: var(--radius-md);
  padding: 14px 12px;
}
.task-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}
.task-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.task-col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
}
.task-col-empty {
  font-size: 12.5px;
  color: #94a3b8;
  padding: 16px;
  text-align: center;
}
.task-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s ease;
}
.task-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.task-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}
.task-card-title a {
  color: inherit;
  text-decoration: none;
}
.task-card-title a:hover {
  color: var(--brand-orange);
}
.task-card-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
  line-height: 1.5;
}
.task-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 10px;
}
.task-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.task-move-btn {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
}
.task-move-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.task-move-done {
  background: var(--brand-orange-soft);
  border-color: rgba(255,106,61,0.3);
  color: var(--brand-orange);
}
.task-move-done:hover {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #ffffff;
}

/* ── Multi-Pane Column Layout ────────────────────────── */
.main-body {
  display: flex;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-x: auto; /* Enable horizontal scrolling for stacked columns */
  overflow-y: hidden;
  background: #ffffff;
  gap: 0;
  scroll-behavior: smooth;
}

.chat-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid var(--chat-pane-border);
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Fixed Zoho-Cliq-style column width applies ONLY once a second pane is
   open — a lone conversation should still fill the screen (the earlier
   ".main" rules above already say `flex: 1` for that, and this used to
   silently fight them: this rule set `width: 380px` but never touched
   flex-grow/flex-basis, so that earlier `flex: 1` kept winning regardless
   of how many panes were open — every open pane just split the container
   width evenly instead of any pane staying a fixed size. Two panes on a
   1440px desktop still looked like "two panes", so nobody noticed; two
   panes each squeezed to half of a 400px PHONE screen was the same bug,
   just finally too broken to miss.

   flex-grow is 1, not 0: two panes open on a wide desktop window
   previously stayed pinned at exactly 380px each regardless of how much
   room was left over, which just moved the empty space from "between
   the panes" to "one dead grey stripe on the right of the second one" —
   still wasted, just relocated. min-width is what stops that same grow
   from re-creating the ORIGINAL squeeze: flexbox honours min-width as a
   hard floor no matter what flex-grow/shrink would otherwise produce, so
   three or four panes still settle at a readable 380px and overflow into
   the horizontal scroll .main-body already provides, instead of
   shrinking to fit. min(380px, 100vw) keeps that floor from overhanging
   a phone narrower than 380px itself. */
.chat-column:not(:only-of-type) {
  flex: 1 1 min(380px, 100vw);
  min-width: min(380px, 100vw);
}

/* Highlight border glow on focus */
.chat-column.focus-glow {
  box-shadow: inset 0 0 0 2px rgba(255,106,61,0.3), 0 0 12px rgba(255,106,61,0.25);
  border-color: var(--brand-orange) !important;
}

/* Close button style for columns */
.pane-close-btn {
  color: #94a3b8;
  transition: color 0.15s ease, background 0.15s ease;
  border-radius: 4px;
}
.pane-close-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* ── Zoho Cliq style Options Dropdown Menu ────────────────── */
.msg-options-dropdown {
  position: fixed;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  width: 210px;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  animation: dropdownFadeIn 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-header-tabs {
  display: flex;
  border-bottom: 1px solid #f1f5f9;
  padding: 0 6px 6px;
  margin-bottom: 4px;
}
.dropdown-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.dropdown-tab-btn.active {
  background: #f1f5f9;
  color: #0f172a;
}
.dropdown-options-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease, color 0.1s ease;
  width: 100%;
}
.dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.dropdown-item span {
  font-size: 14px;
  display: inline-block;
  width: 18px;
  text-align: center;
}
.dropdown-item-danger {
  color: #ef4444 !important;
}
.dropdown-item-danger:hover {
  background: #fef2f2 !important;
}

/* ── Inline Message Editor ─────────────────────────── */
.inline-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  padding: 8px;
}
.inline-editor-textarea {
  width: 100%;
  min-height: 52px;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;
  font-size: 13.5px;
  line-height: 1.5;
  color: #0f172a;
  font-family: inherit;
}
.inline-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.inline-editor-actions button {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  transition: all 0.1s ease;
}
.inline-editor-actions .inline-editor-save {
  background: var(--brand-orange);
  color: #ffffff;
  border-color: var(--brand-orange);
}
.inline-editor-actions .inline-editor-save:hover {
  background: var(--brand-orange-hover);
}
.inline-editor-actions .inline-editor-cancel:hover {
  background: #f1f5f9;
}

/* ── Thread Panel (Dynamic side-by-side view) ───────── */
.thread-panel {
  width: 350px;
  flex-shrink: 0;
  border-left: 1px solid var(--chat-pane-border);
  background: #ffffff;
  display: none;
  flex-direction: column;
  height: 100%;
  position: relative;
  box-shadow: -4px 0 16px rgba(0,0,0,0.03);
}
.thread-panel.open {
  display: flex;
}
.thread-panel-header {
  height: 52px;
  border-bottom: 1px solid var(--chat-topbar-border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-primary);
  font-family: var(--font-display);
}
.thread-panel-close {
  font-size: 22px;
  color: #94a3b8;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
}
.thread-panel-close:hover {
  color: #0f172a;
}
.thread-replies {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.thread-composer {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--chat-topbar-border);
  background: #f8fafc;
}
.thread-composer .composer-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: 6px 10px;
}
.thread-composer .composer-input {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-size: 13px;
  padding: 4px 0;
  height: 20px;
  line-height: 1.5;
  background: transparent;
}
.thread-composer .composer-send {
  background: var(--brand-orange);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s ease;
}
.thread-composer .composer-send:hover {
  background: var(--brand-orange-hover);
}

/* ── Emoji Picker Popover ─────────────────────────── */
.emoji-picker-popover {
  position: fixed;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  padding: 8px;
  width: 156px;
  animation: popoverFadeIn 0.12s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  justify-items: center;
  align-items: center;
}

.emoji-item {
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: transform 0.12s ease, background 0.12s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

.emoji-item:hover {
  background: #f1f5f9;
  transform: scale(1.25);
}

/* ── More actions modal styling ───────────────────── */
.msg-preview-card {
  transition: border-color 0.15s ease;
}
.more-action-row {
  transition: all 0.12s ease;
}
.more-action-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
#more-actions-search:focus {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,106,61,0.2);
}

/* ── Files Toolbar CSS ───────────────────────────── */
.toolbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.12s ease;
}
.toolbar-icon-btn:hover, .toolbar-icon-btn.active {
  background: #f1f5f9;
  color: #0f172a;
}
.toolbar-dropdown-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}
.popover-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  color: #334155;
  font-size: 12.5px;
  text-decoration: none;
  text-align: left;
  border: none;
  background: transparent;
  transition: background 0.1s ease;
  box-sizing: border-box;
}
.popover-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.popover-item.active {
  font-weight: 700;
  color: var(--brand-orange) !important;
}
.sender-option:hover {
  background: #f1f5f9;
}
#sender-search-input:focus {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,106,61,0.2);
}

/* List View Layout for Files */
.files-grid.files-list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.files-grid.files-list-view .file-card {
  flex-direction: row !important;
  height: 56px !important;
  align-items: center !important;
  padding: 8px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.files-grid.files-list-view .file-card-thumb {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0 !important;
  border-radius: 4px !important;
}
.files-grid.files-list-view .file-card-info {
  margin-top: 0 !important;
  margin-left: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  flex: 1 !important;
  align-items: center !important;
}

/* Grid Large View variant */
.files-grid.grid-large {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
.files-grid.grid-large .file-card-thumb {
  height: 160px !important;
}

/* Grid Small View variant */
.files-grid.grid-small {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
}
.files-grid.grid-small .file-card-thumb {
  height: 90px !important;
}
.files-grid.grid-small .file-card-thumb span {
  font-size: 20px !important;
}
.files-grid.grid-small .file-card-name {
  font-size: 11px !important;
}
.files-grid.grid-small .file-card-meta {
  font-size: 10px !important;
}

/* Visibility toggles for files grid/list views */
.grid-only-size {
  display: inline !important;
}
.list-only-meta {
  display: none !important;
}
.files-grid.files-list-view .grid-only-size {
  display: none !important;
}
.files-grid.files-list-view .list-only-meta {
  display: inline !important;
}

/* User Profile Flyout Panel styling */
.profile-flyout-panel {
  position: fixed;
  top: 60px; /* underneath headers */
  right: -430px; /* start hidden */
  width: 420px;
  height: calc(100vh - 60px);
  background: #ffffff;
  border-left: 1px solid #cbd5e1;
  box-shadow: -10px 0 35px -5px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  transition: right 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.profile-flyout-panel.open {
  right: 0;
}

.profile-tab {
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-tab:hover {
  color: var(--brand-orange);
}

.profile-tab.active {
  color: var(--brand-orange) !important;
  border-bottom: 2px solid var(--brand-orange) !important;
  font-weight: 700 !important;
}

/* Image Lightbox Modal */
.image-lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(8px);
  z-index: 2100 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.image-lightbox-modal:not([hidden]) {
  opacity: 1 !important;
  visibility: visible !important;
}

.lightbox-content {
  max-width: 90% !important;
  max-height: 85% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.lightbox-content img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-lightbox-modal:not([hidden]) .lightbox-content img {
  transform: scale(1) !important;
}

.lightbox-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 24px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, transform 0.15s !important;
  z-index: 2200 !important;
}

.lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.05) !important;
}
.attachment-image {
  cursor: zoom-in !important;
  transition: opacity 0.15s ease;
}
.attachment-image:hover {
  opacity: 0.9;
}









/* --- continuous media sync progress -------------------------------------- */
.media-progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--border, #e2e8f0);
  overflow: hidden;
}
.media-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #6366f1);
  transition: width .6s ease;
}

/* ── Emoji picker ────────────────────────────────────────────────────────
   Replaces a twelve-item grid. Fixed-positioned and placed by JS against
   whichever button opened it, so one instance serves the composer, the
   hover bar and the reaction "+" without three copies of 1,786 spans in
   the DOM. */
.emoji-picker {
  position: fixed;
  z-index: 1200;
  width: 336px;
  height: 396px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .06);
  overflow: hidden;
  font-size: 13px;
}
.emoji-picker[hidden] { display: none; }

.emoji-head {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.emoji-search-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}
.emoji-search-input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }

.emoji-tone-picker { position: relative; flex: none; }
.emoji-tone-toggle,
.emoji-tone {
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 5px;
  border-radius: 6px;
}
.emoji-tone-toggle:hover, .emoji-tone:hover { background: #f1f5f9; }
.emoji-tone-list {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 20px -6px rgba(15,23,42,.25);
  z-index: 1;
}
.emoji-tone-list[hidden] { display: none; }

.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  overflow-x: auto;
  scrollbar-width: none;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tab {
  flex: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
  opacity: .55;
}
.emoji-tab:hover { background: #f1f5f9; opacity: 1; }
.emoji-tab.is-active { opacity: 1; background: #e0f2fe; }

.emoji-body { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.emoji-heading {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 8px 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #ffffff;
}
.emoji-heading:empty { display: none; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 1px;
}
.emoji-cell {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  padding: 5px 0;
  border-radius: 6px;
}
.emoji-cell:hover { background: #f1f5f9; }
.emoji-cell:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }

.emoji-empty { padding: 24px 8px; text-align: center; color: #94a3b8; }
.emoji-empty[hidden] { display: none; }

.emoji-preview {
  flex: none;
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
  color: #64748b;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-color-scheme: dark) {
  .emoji-picker { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
  .emoji-head, .emoji-tabs, .emoji-preview { border-color: #1e293b; }
  .emoji-heading { background: #0f172a; color: #64748b; }
  .emoji-search-input { background: #1e293b; border-color: #334155; color: #e2e8f0; }
  .emoji-cell:hover, .emoji-tab:hover, .emoji-tone:hover, .emoji-tone-toggle:hover { background: #1e293b; }
  .emoji-tab.is-active { background: #0c4a6e; }
  .emoji-tone-list { background: #0f172a; border-color: #1e293b; }
}

/* ── Rich message formatting ─────────────────────────────────────────────
   Code blocks keep their own whitespace and scroll inside their own box.
   Before this, newlines inside a code block were replaced with <br> by the
   renderer, so a pasted stack trace arrived as one long line. */
.msg-text > p { margin: 0 0 6px; }
.msg-text > p:last-child { margin-bottom: 0; }

.msg-code-wrap {
  position: relative;
  margin: 6px 0;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #f8fafc;
  overflow: hidden;
}
.msg-code-lang {
  display: block;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
pre.msg-code-block {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;               /* the block scrolls, not the conversation */
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  tab-size: 4;
}
pre.msg-code-block code {
  display: block;
  white-space: pre;               /* the whole point — preserve the paste */
  background: none;
  padding: 0;
  border: none;
  font: inherit;
  color: #0f172a;
}
code.msg-code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: break-spaces;
}

.msg-text blockquote {
  margin: 6px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid #cbd5e1;
  color: #475569;
}
.msg-text blockquote blockquote { margin: 4px 0; }

.msg-text ul, .msg-text ol { margin: 6px 0; padding-left: 22px; }
.msg-text li { margin: 2px 0; }
.msg-text li > ul, .msg-text li > ol { margin: 2px 0; }

.msg-text hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid #e2e8f0;
}

.msg-table-wrap { margin: 6px 0; overflow-x: auto; }
.msg-table { border-collapse: collapse; font-size: 12.5px; }
.msg-table th, .msg-table td {
  border: 1px solid #e2e8f0;
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}
.msg-table th { background: #f8fafc; font-weight: 600; }

.custom-emoji {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  object-fit: contain;
}
.emoji-cell .custom-emoji { width: 22px; height: 22px; vertical-align: middle; }

/* Pygments output. A small, deliberately restrained palette rather than a
   full theme — a code block in a conversation is read at a glance, and
   twelve colours make it harder, not easier. */
.hl-k, .hl-kd, .hl-kn, .hl-kp, .hl-kr, .hl-kt { color: #7c3aed; font-weight: 600; }
.hl-s, .hl-s1, .hl-s2, .hl-sb, .hl-sc, .hl-sd, .hl-se, .hl-sh, .hl-si, .hl-sx { color: #0f7454; }
.hl-c, .hl-c1, .hl-cm, .hl-cs, .hl-cp { color: #94a3b8; font-style: italic; }
.hl-m, .hl-mi, .hl-mf, .hl-mh, .hl-mo { color: #b45309; }
.hl-nf, .hl-fm { color: #1d4ed8; }
.hl-nc, .hl-nn { color: #0e7490; }
.hl-nb, .hl-bp { color: #9333ea; }
.hl-o, .hl-ow { color: #475569; }
.hl-nd { color: #b45309; }
.hl-err { color: #b91c1c; }

@media (prefers-color-scheme: dark) {
  .msg-code-wrap { background: #0b1220; border-color: #1e293b; }
  .msg-code-lang { background: #111c2f; border-color: #1e293b; color: #94a3b8; }
  pre.msg-code-block code { color: #e2e8f0; }
  code.msg-code { background: #1e293b; border-color: #334155; color: #e2e8f0; }
  .msg-text blockquote { border-left-color: #334155; color: #94a3b8; }
  .msg-table th, .msg-table td { border-color: #1e293b; }
  .msg-table th { background: #111c2f; }
  .msg-text hr { border-top-color: #1e293b; }
  .hl-k, .hl-kd, .hl-kn, .hl-kp, .hl-kr, .hl-kt { color: #c4b5fd; }
  .hl-s, .hl-s1, .hl-s2, .hl-sb, .hl-sc, .hl-sd, .hl-se, .hl-sh, .hl-si, .hl-sx { color: #6ee7b7; }
  .hl-c, .hl-c1, .hl-cm, .hl-cs, .hl-cp { color: #64748b; }
  .hl-m, .hl-mi, .hl-mf, .hl-mh, .hl-mo { color: #fbbf24; }
  .hl-nf, .hl-fm { color: #93c5fd; }
  .hl-nc, .hl-nn { color: #67e8f9; }
  .hl-nb, .hl-bp { color: #d8b4fe; }
  .hl-o, .hl-ow { color: #94a3b8; }
}

/* ── Voice notes ─────────────────────────────────────────────────────────
   The <audio> element keeps no `controls`: the browser default is a
   full-width bar that dwarfs a fifteen-second message. The play button and
   waveform below drive it instead, and the element stays real so keyboard
   control and media keys keep working. */
.vn-player {
  --vn-bar: #cbd5e1;
  --vn-bar-played: #0ea5e9;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 7px 12px 7px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  max-width: 340px;
}
.vn-player audio { display: none; }

.vn-play {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #0ea5e9;
  cursor: pointer;
  position: relative;
}
.vn-play::before {
  content: "";
  position: absolute;
  top: 50%; left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.vn-play.is-playing::before {
  border: none;
  width: 9px; height: 10px;
  background: #fff;
  /* Two bars from one box, so pause needs no second element. */
  clip-path: polygon(0 0, 33% 0, 33% 100%, 0 100%, 0 0, 67% 0, 100% 0, 100% 100%, 67% 100%, 67% 0);
  left: 50%;
}
.vn-play:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

.vn-wave { flex: 1; min-width: 90px; height: 28px; cursor: pointer; }
.vn-elapsed {
  flex: none;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  min-width: 32px;
  text-align: right;
}
.vn-download { flex: none; color: #94a3b8; display: inline-flex; padding: 2px; }
.vn-download:hover { color: #0f172a; }

.vn-recorder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #475569;
}
.vn-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #dc2626;
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .vn-dot { animation: vn-pulse 1.1s ease-in-out infinite; }
}
@keyframes vn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.vn-time { font-variant-numeric: tabular-nums; font-weight: 600; color: #0f172a; }
.vn-hint { color: #94a3b8; margin-right: auto; }

.vn-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
}
.vn-ready { font-size: 12px; color: #0f7454; }
.composer-tool-btn.is-active { color: #dc2626; }

@media (prefers-color-scheme: dark) {
  .vn-player { --vn-bar: #475569; background: #111c2f; border-color: #1e293b; }
  .vn-recorder, .vn-preview { border-top-color: #1e293b; }
  .vn-time { color: #e2e8f0; }
  .vn-download:hover { color: #e2e8f0; }
}

/* ── Sticker / GIF picker ───────────────────────────────────────────────── */
.media-picker {
  position: fixed;
  z-index: 1200;
  width: 340px;
  height: 380px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .28);
  overflow: hidden;
  font-size: 13px;
}
.media-picker[hidden] { display: none; }

.mp-tabs { display: flex; border-bottom: 1px solid #f1f5f9; }
.mp-tab {
  flex: 1;
  border: none;
  background: none;
  cursor: pointer;
  padding: 9px 0;
  font: inherit;
  font-weight: 600;
  color: #94a3b8;
  border-bottom: 2px solid transparent;
}
.mp-tab.is-active { color: #0f172a; border-bottom-color: #0ea5e9; }

.mp-head { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; }
.mp-search {
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}
.mp-search:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }

.mp-body { flex: 1; overflow-y: auto; padding: 8px 10px 12px; }
.mp-status { padding: 28px 12px; text-align: center; color: #94a3b8; }
.mp-heading {
  margin: 8px 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.mp-grid-wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.mp-cell {
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 8px;
  aspect-ratio: 1;
  overflow: hidden;
}
.mp-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-grid-wide .mp-cell img { object-fit: cover; }
.mp-cell:hover { background: #f1f5f9; }
.mp-cell:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }

/* ── Translation ─────────────────────────────────────────────────────────
   Shown UNDER the original, never replacing it: the original is what was
   actually said, and a machine translation presented in its place would
   quietly become the record. */
.msg-translation {
  margin-top: 6px;
  padding: 7px 10px;
  border-left: 3px solid #0ea5e9;
  background: #f0f9ff;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: #0f172a;
}
.msg-translation-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 3px;
}
.msg-translation-hide {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  color: #64748b;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .media-picker { background: #0f172a; border-color: #1e293b; color: #e2e8f0; }
  .mp-tabs, .mp-head { border-color: #1e293b; }
  .mp-tab.is-active { color: #e2e8f0; }
  .mp-search { background: #1e293b; border-color: #334155; color: #e2e8f0; }
  .mp-cell:hover { background: #1e293b; }
  .msg-translation { background: #0c2537; color: #e2e8f0; }
}

/* A channel you may read but not post in. Shown in place of the composer
   rather than as a disabled composer: a text box you can type into and
   never send from is a worse answer than no text box. */
.composer-readonly {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 13px;
  background: #f8fafc;
}
@media (prefers-color-scheme: dark) {
  .composer-readonly { background: #111c2f; border-top-color: #1e293b; color: #94a3b8; }
}

/* ── Sidebar folders ─────────────────────────────────────────────────────
   43 channels in one flat list is a list people stop scanning. Folders are
   per person: how somebody arranges their own sidebar is not a fact about
   the channels. */
.sidebar-folder { margin-bottom: 2px; }

.sidebar-folder-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 8px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-nav-muted, #94a3b8);
  text-align: left;
  border-radius: 5px;
}
.sidebar-folder-head:hover { background: rgba(148, 163, 184, .14); }
.sidebar-folder-head:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }

.sidebar-folder-caret { flex: none; transform: rotate(90deg); }
.sidebar-folder.is-collapsed .sidebar-folder-caret { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .sidebar-folder-caret { transition: transform .15s ease; }
}

.sidebar-folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-folder-count {
  flex: none;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

.sidebar-folder.is-collapsed .sidebar-folder-body { display: none; }
.sidebar-folder-body { margin-left: 8px; }

.sidebar-folder-empty {
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--text-nav-muted, #94a3b8);
  opacity: .7;
}

.sidebar-channel { cursor: grab; }
.sidebar-channel.is-dragging { opacity: .45; cursor: grabbing; }
.is-drop-target {
  outline: 2px dashed rgba(14, 165, 233, .55);
  outline-offset: -2px;
  border-radius: 6px;
}

.sidebar-tag {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(14, 165, 233, .18);
  color: #0ea5e9;
}

/* ── Drag and drop ───────────────────────────────────────────────────────
   The drop target is the whole room, not a small zone in the composer:
   people aim at the conversation, not at the text box. */
/* The overlay is absolutely positioned, so the pane has to be the
   containing block. Without this it escapes to the nearest positioned
   ancestor and covers the whole app. */
.chat-column { position: relative; }

.dropzone-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 249, 255, .93);
  border: 2px dashed #0ea5e9;
  border-radius: 10px;
  pointer-events: none;      /* or the overlay eats its own drop event */
}
.dropzone-overlay[hidden] { display: none; }
.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #0284c7;
  text-align: center;
}
.dropzone-inner strong { font-size: 15px; }
.dropzone-inner span { font-size: 12.5px; color: #64748b; }

.dropzone-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #f1f5f9;
}
.dropzone-tray[hidden] { display: none; }

.dropzone-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  padding: 5px 6px 5px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 12px;
}
.dropzone-thumb {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 4px;
  flex: none;
}
.dropzone-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
}
.dropzone-size { color: #94a3b8; flex: none; font-variant-numeric: tabular-nums; }
.dropzone-remove {
  flex: none;
  border: none;
  background: none;
  cursor: pointer;
  color: #64748b;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
}
.dropzone-remove:hover { background: #e2e8f0; color: #0f172a; }

/* ── File versions ───────────────────────────────────────────────────── */
.version-history { padding: 16px; }
.version-history-title { margin: 0 0 4px; font-size: 14px; }
.version-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.version-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.version-item.is-latest { border-color: #0ea5e9; background: #f0f9ff; }
.version-number {
  flex: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  padding-top: 1px;
}
.version-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.version-meta .muted { font-size: 11.5px; }
.version-note { font-size: 12px; color: #475569; }

@media (prefers-color-scheme: dark) {
  .dropzone-overlay { background: rgba(12, 37, 55, .93); }
  .dropzone-tray { border-top-color: #1e293b; }
  .dropzone-chip { background: #111c2f; border-color: #1e293b; }
  .dropzone-name { color: #e2e8f0; }
  .dropzone-remove:hover { background: #1e293b; color: #e2e8f0; }
  .version-item { border-color: #1e293b; }
  .version-item.is-latest { background: #0c2537; }
}

/* A branding logo sits in the header strip beside the product name. Height
   is fixed and width is free, because a workspace's logo is whatever shape
   it is and squashing it to a square is worse than letting it be wide. */
.infilux-logo-img {
  height: 26px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* ── Form dialog ─────────────────────────────────────────────────────────
   One dialog renders every form, from the definition the server returns.
   The client rendering is a convenience — the server validates every
   submission against its own stored definition regardless. */
.wf-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .48);
}
.wf-box {
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px 20px;
  box-shadow: 0 18px 48px -12px rgba(15, 23, 42, .4);
}
.wf-title { margin: 0 0 4px; font-size: 17px; }
.wf-description { margin: 0 0 14px; color: #64748b; font-size: 13px; line-height: 1.55; }

.wf-form { display: grid; gap: 14px; }
.wf-field { display: grid; gap: 4px; }
.wf-field > label { font-size: 13px; font-weight: 600; color: #0f172a; }
.wf-required { color: #dc2626; }
.wf-help { font-size: 12px; color: #94a3b8; }

.wf-error { font-size: 12px; color: #b91c1c; }
.wf-error:empty { display: none; }
.wf-field.has-error .input { border-color: #dc2626; }

.wf-banner {
  margin-bottom: 12px;
  padding: 9px 12px;
  border-radius: 7px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 13px;
}
.wf-banner[hidden] { display: none; }

.wf-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.wf-note { flex: 1; font-size: 12px; color: #94a3b8; }

@media (prefers-color-scheme: dark) {
  .wf-box { background: #0f172a; color: #e2e8f0; }
  .wf-field > label { color: #e2e8f0; }
  .wf-footer { border-top-color: #1e293b; }
  .wf-banner { background: #2c1614; border-color: #7f1d1d; color: #fca5a5; }
}

/* ── Widget tabs ─────────────────────────────────────────────────────────
   A widget renders the same cards a bot posts, so it inherits the card
   styling. What is added here is the pane around them and the two states a
   widget can be in that a posted card never is: broken, and empty. */
.widget-pane { display: grid; gap: 10px; max-width: 720px; }

.widget-card { margin: 0; }

.widget-error {
  padding: 14px 16px;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  border-radius: 8px;
  background: #fef2f2;
  color: #7f1d1d;
}
.widget-error strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.widget-error p { margin: 0; font-size: 12.5px; line-height: 1.55; }

/* An empty tab reads as "nothing to show today", which is a different and
   much more misleading statement than "this is broken" — so the two look
   different on purpose. */
.widget-empty {
  padding: 32px 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

.widget-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  font-size: 12px;
}

.msg-card-btn-inert {
  opacity: .5;
  cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
  .widget-error { background: #2c1614; border-color: #7f1d1d; color: #fca5a5; }
}

/* ── Call audio & background settings ────────────────────────────────────
   A control the browser cannot honour is shown disabled with the reason
   beside it, so the panel reports what this device can do rather than what
   is possible somewhere. */
.call-settings {
  position: absolute;
  right: 20px;
  bottom: 84px;
  z-index: 60;
  /* min() so this degrades on its own on anything narrower than ~370px —
     the fixed 340px this used to be had no fallback at all and clipped off
     the left edge of the screen on an ordinary phone, unlike every other
     floating panel in the call room (.call-sidepanel, .call-add-dialog-inner,
     .call-lobby-panel), which all already sized themselves this way. */
  width: min(340px, calc(100vw - 40px));
  max-height: 70vh;
  overflow-y: auto;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 12px;
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6);
}
.call-settings[hidden] { display: none; }
@media (max-width: 780px) {
  /* Below this width the call room's own controls shrink and shift too
     (see the .call-room rules above), so anchoring to a fixed `right`/
     `bottom` risks overlapping the shrunken control dock instead of
     sitting above it. A centered bottom sheet, matching .call-sidepanel's
     own mobile treatment, keeps it clear regardless of exactly how tall
     the controls end up being on a given phone. */
  .call-settings {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-height: min(70vh, 520px);
  }
}

.cs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #1e293b;
}
.cs-head h2 { margin: 0; font-size: 14px; flex: 1; }
.cs-close {
  border: none;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}
.cs-close:hover { color: #e2e8f0; }

.cs-body { padding: 12px 16px 16px; }
.cs-section { margin-bottom: 14px; }
.cs-heading {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #64748b;
}

.cs-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  cursor: pointer;
}
.cs-row input { margin-top: 2px; flex: none; }
.cs-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-row strong { font-size: 13px; font-weight: 600; }
.cs-row small { font-size: 11.5px; color: #94a3b8; line-height: 1.45; }

/* Disabled, with the reason — not hidden. Somebody looking for background
   blur needs to know it is unavailable here, not wonder where it went. */
.cs-row.is-unavailable { cursor: not-allowed; opacity: .58; }
.cs-row.is-unavailable small { color: #f0a58a; }

.cs-applied {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(148, 163, 184, .12);
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.5;
}
.cs-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.5;
}

/* ── Quick switcher & shortcut cheatsheet ────────────────────────────────
   Ctrl+K opens this rather than focusing the search bar. Search is the last
   row, so the old behaviour is one keystroke away rather than gone. */
.switcher {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 20px;
  background: rgba(15, 23, 42, .45);
}
.switcher[hidden] { display: none; }

.switcher-box {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px -16px rgba(15, 23, 42, .5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.switcher-input {
  border: none;
  border-bottom: 1px solid #e2e8f0;
  padding: 15px 18px;
  font: inherit;
  font-size: 15px;
  outline: none;
  background: transparent;
  color: #0f172a;
}

.switcher-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}
.switcher-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
}
.switcher-row.is-active { background: #e0f2fe; }
.switcher-row:hover { background: #f1f5f9; }

.switcher-icon {
  flex: none;
  width: 15px;
  text-align: center;
  color: #94a3b8;
  font-weight: 600;
}
.switcher-label {
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.switcher-hint {
  color: #94a3b8;
  font-size: 12px;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.switcher-badge {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(14, 165, 233, .16);
  color: #0284c7;
}
.switcher-empty { padding: 26px 14px; text-align: center; color: #94a3b8; font-size: 13px; }

.switcher-note { margin: 0; padding: 0 18px; color: #94a3b8; font-size: 12px; }
.switcher-note:empty { display: none; }

.switcher-foot {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-top: 1px solid #f1f5f9;
  font-size: 11.5px;
  color: #94a3b8;
}
.switcher kbd {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  margin-right: 3px;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #f8fafc;
  font-family: inherit;
  font-size: 10.5px;
  color: #475569;
  text-align: center;
}

.shortcut-help .switcher-box { padding: 20px 22px 16px; max-width: 460px; }
.shortcut-title { margin: 0 0 12px; font-size: 16px; }
.shortcut-group {
  margin: 14px 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #94a3b8;
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  color: #0f172a;
}
.shortcut-keys { flex: none; min-width: 118px; }

@media (prefers-color-scheme: dark) {
  .switcher-box { background: #0f172a; }
  .switcher-input { color: #e2e8f0; border-bottom-color: #1e293b; }
  .switcher-label, .shortcut-row { color: #e2e8f0; }
  .switcher-row.is-active { background: #0c4a6e; }
  .switcher-row:hover { background: #1e293b; }
  .switcher-foot { border-top-color: #1e293b; }
  .switcher kbd { background: #1e293b; border-color: #334155; color: #cbd5e1; }
}

/* ==========================================================================
   Call log — /calls/history/
   Was an attendance audit table: a Host column you had to compare against
   your own name to work out which way a call went, and a grey "Missed"
   badge indistinguishable from "Declined". A call log is read at a glance
   or not at all, so direction and missed-ness carry the weight here.
   ========================================================================== */

.call-log-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.clf {
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
  text-decoration: none;
}
.clf:hover { color: var(--text-primary); }
.clf.is-on {
  background: var(--accent, #ff5a1f);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.clf-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.call-log { display: flex; flex-direction: column; }
.call-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.call-row:last-child { border-bottom: none; }

.call-row-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-muted);
  font-size: 16px;
}
/* Missed is the one state somebody is scanning for, so it is the one thing
   that is coloured. */
.call-row.is-missed .call-row-icon { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.call-row.is-missed .call-row-who { color: #f87171; }

.call-row-main { flex: 1; min-width: 0; }
.call-row-who {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.call-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.call-row-when { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.call-row-actions { flex-shrink: 0; }
.call-row-actions form { margin: 0; }

@media (max-width: 620px) {
  .call-row-when { display: none; }
}

/* Attendance line inside a call-log row. Secondary to the call itself, but
   it is the only record kept of who actually turned up. */
.call-row-att { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.cra {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.16);
  font-size: 10.5px;
  font-weight: 600;
}
.cra-in { background: rgba(34, 197, 94, 0.18); color: #4ade80; }

/* ==========================================================================
   CA3 — waiting room
   ========================================================================== */

.lobby-card {
  background: var(--card-bg, #161a21);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 32px;
  text-align: center;
}
.lobby-card h1 { font-size: 20px; margin: 0 0 10px; }
.lobby-icon { font-size: 40px; line-height: 1; margin-bottom: 14px; }
.lobby-icon-no { color: #f87171; }
.lobby-note { color: var(--text-muted); font-size: 14px; margin: 0 auto 8px; max-width: 42ch; }
.lobby-sub { color: var(--text-muted); font-size: 12.5px; margin: 0 0 22px; }

/* The host's panel. Hidden until somebody knocks — a panel that is always
   there but usually empty trains people to ignore it, which defeats the
   point of a waiting room. */
.call-lobby-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 25;
  width: min(310px, 80%);
  background: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.clp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  font-size: 13px;
  color: #e2e8f0;
}
.clp-list { list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto; }
.clp-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
}
.clp-list li:hover { background: rgba(148, 163, 184, 0.1); }
.clp-who {
  font-size: 13px;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clp-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* CA2 — the consent banner. Deliberately unmissable: a recording nobody
   noticed being told about is the situation the whole feature has to avoid. */
.call-recording-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: rgba(239, 68, 68, 0.14);
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
}
.crb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: crb-pulse 1.6s ease-in-out infinite;
}
@keyframes crb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .crb-dot { animation: none; } }

/* ==========================================================================
   RESPONSIVE LAYER — phone / tablet
   ==========================================================================

   The app was desktop-only in practice. The shell is a three-column grid
   (68px rail + 240px sidebar + content), and the single mobile rule that
   existed did this:

       @media (max-width: 900px) {
         .app-shell { grid-template-columns: 0 0 1fr; }
         .rail, .sidebar { display: none; }
       }

   ...which hides BOTH navigation columns and puts nothing in their place.
   On a phone you could see a conversation but had no way to reach any other
   one — no channel list, no rail, no menu. That is why the site was only
   usable with "Request desktop site": at desktop width the columns come
   back, and 308px of chrome on a 360px screen is at least navigable by
   pinch-zooming.

   This layer replaces that dead end with an off-canvas drawer. The rail and
   sidebar keep their real markup and simply slide in over the content, so
   every existing link keeps working and no template had to be restructured.

   Appended at the end of the file deliberately: later rules win, so these
   override the desktop cascade without editing rules another branch may be
   touching.
   -------------------------------------------------------------------------- */

/* Combined drawer width, shared by both panels so they translate together.
   The sidebar is capped against the viewport so it can never exceed the
   screen on a small phone, while leaving a strip of scrim to tap on. */
:root {
  --rail-w: 68px;
  --sidebar-w: 240px;
  --header-h: 44px;
  --drawer-w: calc(var(--rail-w) + var(--sidebar-w));
}

.nav-toggle { display: none; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(2px);
  border: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}
.nav-scrim.is-visible { opacity: 1; }

/* ---------- Tablet: keep both columns, just narrower ------------------- */
@media (max-width: 1180px) and (min-width: 901px) {
  :root { --sidebar-w: 200px; }
  .app-shell { grid-template-columns: var(--rail-w) var(--sidebar-w) 1fr; }
  .global-search-bar { width: min(320px, 32vw); }
}

/* ---------- Phone + small tablet: drawer ------------------------------- */
@media (max-width: 900px) {
  :root { --sidebar-w: min(240px, calc(86vw - 68px)); }

  /* Content takes the whole width; the nav columns leave the grid flow. */
  .app-shell {
    grid-template-columns: 1fr;
    /* 100vh is wrong on mobile browsers — it counts the address bar that
       scrolls away, so the layout is taller than the visible area and the
       composer sits under the chrome. dvh tracks the real viewport; the vh
       line stays as the fallback for browsers without it. */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    width: 100%;   /* not 100vw: that includes the scrollbar and overflows */
  }

  /* The single rule this layer exists to undo. */
  .rail, .sidebar { display: flex; }

  .rail, .sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    z-index: 90;
    transform: translateX(calc(-1 * var(--drawer-w)));
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
  }
  .rail    { left: 0;            width: var(--rail-w); }
  .sidebar { left: var(--rail-w); width: var(--sidebar-w); }

  body.nav-open .rail,
  body.nav-open .sidebar { transform: translateX(0); }

  /* Prevent the page behind the drawer from scrolling under the finger. */
  body.nav-open { overflow: hidden; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 2px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    /* NOT inherit: that pulled body's default text color (--text-main,
       #1e293b — a dark slate meant for the white content area) onto this
       button's dark header background, rendering the three-line icon
       nearly invisible. Every other header control (.header-icon-btn,
       .header-badge-btn) already sets --text-nav explicitly for exactly
       this reason; this one was just never exercised on a desktop
       viewport, where it's display: none and the gap goes unnoticed. */
    color: var(--text-nav);
    cursor: pointer;
    flex: none;
  }
  .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-nav-bright);
  }

  /* Header: the search field is the first thing to go — it has a dedicated
     full-screen page, and the brand + actions matter more in 360px. */
  .header-center { display: none; }
  .global-header { padding-left: 6px; padding-right: 6px; gap: 4px; }
  .header-left   { gap: 4px; min-width: 0; }
  .header-left .infilux-brand { min-width: 0; }
  .header-right  { gap: 2px; }

  .main { min-width: 0; }
}

/* ---------- Small phones ---------------------------------------------- */
@media (max-width: 560px) {
  /* Wide content must scroll inside its own box, never the page body. */
  .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page { padding-left: 12px; padding-right: 12px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .files-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .call-grid { grid-template-columns: 1fr; }

  /* Hide the brand wordmark, keep the mark — the hamburger and actions need
     the room more than the name does. */
  .infilux-brand span:not(.infilux-logo-icon) { display: none; }
}

/* ---------- Touch ergonomics ------------------------------------------ */
@media (pointer: coarse) {
  /* 44px is the smallest reliably tappable target. Buttons in this app are
     sized for a mouse and several land near 28px. min-height only, so
     nothing that is already larger gets shrunk. */
  .btn, .header-icon-btn, .header-badge-btn, .nav-toggle,
  .call-controls button { min-height: 44px; }
  .btn-sm { min-height: 38px; }

  /* iOS zooms the whole page when a focused input is under 16px. */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="number"], textarea, select {
    font-size: 16px;
  }
}

/* ---------- Notch / home indicator ------------------------------------ */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    .global-header { padding-left: max(6px, env(safe-area-inset-left)); }
    .app-shell     { padding-bottom: env(safe-area-inset-bottom); }
  }
}

/* Someone who has asked for less motion gets the drawer without the slide. */
@media (prefers-reduced-motion: reduce) {
  .rail, .sidebar, .nav-scrim { transition: none; }
}

/* ---------- Overlay panels on small screens ----------------------------
   Two panels are sized for a desktop viewport and were wider than, or
   flush with, a 360px phone:

     .cliq-profile-flyout   350px, absolute, right-aligned under the header
     .profile-flyout-panel  420px, fixed, slides in from the right

   At 360px the first leaves a 10px margin and the second is simply wider
   than the screen — it would slide in and push a horizontal scrollbar onto
   the whole document. Both become near-full-width sheets instead, which is
   the normal phone pattern for this kind of panel.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .cliq-profile-flyout {
    position: fixed;
    top: var(--header-h);
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - var(--header-h) - 16px);
  }

  .profile-flyout-panel {
    top: var(--header-h);
    width: min(420px, 92vw);
    /* Must stay in step with the width above, or the panel peeks on-screen
       while "closed" and the page gains a horizontal scrollbar. */
    right: calc(-1 * min(420px, 92vw) - 10px);
    height: calc(100dvh - var(--header-h));
  }
  .profile-flyout-panel.is-open,
  .profile-flyout-panel.open { right: 0; }
}

/* Zoho sync visibility. The most important thing on that page: a sync that
   runs happily while seeing one person's conversations satisfies every other
   indicator and delivers nothing. */
.zs-visibility-warning {
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.55;
}
.zs-visibility-warning strong { color: #fecaca; display: block; margin-bottom: 6px; font-size: 14.5px; }
.zs-visibility-warning p { margin: 0 0 8px; }
.zs-vw-steps { color: #fde68a; }
.zs-visibility-ok {
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  border-radius: 10px;
  padding: 11px 16px;
  margin-bottom: 20px;
  font-size: 13px;
}

/* --- chat connection state ------------------------------------------------
   Shown only when the socket is NOT healthy. Overlaid rather than inserted
   into the flow so appearing/disappearing never reflows the message feed
   under the reader's cursor. */
.chat-conn-state{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  z-index:40; padding:5px 13px; border-radius:99px;
  font-size:12px; font-weight:500; letter-spacing:.01em;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.28); pointer-events:none;
  max-width:calc(100% - 24px); text-align:center;
}
.chat-conn-state.is-connecting,
.chat-conn-state.is-reconnecting{ background:#fde9c8; color:#7a4e08; }
.chat-conn-state.is-offline{ background:#f9d9d9; color:#8f2222; }
.chat-conn-state.is-stale{ background:#dbe7f6; color:#1d4d80; pointer-events:auto; cursor:pointer; }
@media (prefers-color-scheme: dark){
  .chat-conn-state.is-connecting,
  .chat-conn-state.is-reconnecting{ background:#3a2c10; color:#f0c674; }
  .chat-conn-state.is-offline{ background:#3a1a1a; color:#f0a0a0; }
  .chat-conn-state.is-stale{ background:#16293d; color:#8fbde8; }
}