/* Version: 2026.07.07.04 | Improve Google Calendar invite card contrast for WCAG AA accessibility */



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary-color: #1A2B5B;
  --secondary-color: #2354b3;
  --accent-color: #F99338;
  --accent-hover: #e07b20;
  --bg-color: #f4f6f9;
  --card-bg: #ffffff;
  --text-color: #2d3748;
  --border-color: rgba(26, 43, 91, 0.08);
  --header-height: 70px;
  --agenda-w: 380px;      /* pinned agenda column width */
  --agenda-gap: 24px;     /* gutter between page content and the pinned agenda */
  --theme-color: #2354b3;
  --theme-bg: rgba(35, 84, 179, 0.07);
  --theme-hover: #1a3d8a;
  --theme-border: 3px solid #2354b3;
  --reaction-pill-bg: rgba(35, 84, 179, 0.07);
  --reaction-pill-border: rgba(35, 84, 179, 0.15);
  --reaction-pill-hover: rgba(35, 84, 179, 0.12);
  --spinner-color: #2354b3;
  --read-more-shadow: rgba(35, 84, 179, 0.35);
  --read-more-shadow2: rgba(35, 84, 179, 0.3);
  --author-width: 210px;
  --content-padding-left: 25px;
  /* Award / recognition palette (leaderboards, hall of fame) */
  --gold: #FFC63D;
  --silver: #C0C7D1;
  --bronze: #D99A5B;
  --text-muted: #64748b;
}

body.mode-announcements {
  --theme-color: #F99338;
  --theme-bg: rgba(249, 147, 56, 0.07);
  --theme-hover: #e07820;
  --theme-border: 3px solid #F99338;
  --reaction-pill-bg: rgba(249, 147, 56, 0.07);
  --reaction-pill-border: rgba(249, 147, 56, 0.2);
  --reaction-pill-hover: rgba(249, 147, 56, 0.12);
  --spinner-color: #F99338;
  --read-more-shadow: rgba(249, 147, 56, 0.35);
  --read-more-shadow2: rgba(249, 147, 56, 0.3);
}

body.mode-home {
  --theme-color: #F99338;
  --theme-bg: rgba(249, 147, 56, 0.07);
  --theme-hover: #e07820;
  --theme-border: 3px solid #F99338;
  --reaction-pill-bg: rgba(249, 147, 56, 0.12);
  --reaction-pill-border: rgba(249, 147, 56, 0.25);
  --reaction-pill-hover: rgba(249, 147, 56, 0.18);
  --spinner-color: #F99338;
}

@media (max-width: 1300px) { :root { --author-width: 180px; --content-padding-left: 20px; } }
@media (max-width: 1050px) { :root { --author-width: 150px; --content-padding-left: 15px; } }

:focus-visible {
  outline: 3px solid var(--secondary-color) !important;
  outline-offset: 2px !important;
}

/* Skip-to-content link: visually hidden until keyboard-focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100001;
  background: var(--primary-color);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  font-family: "Roboto", sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Layout & Wrapper ──────────────────────────────────────────────────────── */
.main-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
}

.site-content-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page-content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 30px;
}

/* ── Site Header ────────────────────────────────────────────────────────────── */
.site-header {
  background: #1c2b3f;
  box-shadow: 0 4px 12px rgba(26, 43, 91, 0.05);
  border-bottom: 1px solid var(--border-color);
  height: var(--header-height);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.site-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo-img {
  display: inline-block;
  max-height: 56px;
  max-width: 225px;
  padding: 8px 4px 8px 12px;
  vertical-align: middle;
}

/* ── Navigation Menu (Submenus up to 2 levels) ──────────────────────────────── */
.site-navigation {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-item {
  position: relative;
}

.nav-link {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #f9f9f9;
  padding: 8px 14px;
  border-radius: 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.nav-item:hover > .nav-link {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

/* Active section: orange accent bar under the label marks "you are here".
   No pill, so it stays distinct from the hover state. */
.nav-item.active > .nav-link {
  color: #ffffff;
}

.nav-item.active > .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 1px;
  height: 2.5px;
  border-radius: 2px;
  background: #f99338;
}

.nav-arrow {
  font-size: 9px;
  opacity: 0.7;
}

/* Level 1 Submenu */
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  border: 1px solid rgba(26, 43, 91, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13, 20, 48, 0.15);
  min-width: 200px;
  padding: 8px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1100;
}

.nav-item:hover .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
}

.submenu-item {
  position: relative;
}

.submenu-link {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4a5568;
  padding: 10px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s, color 0.15s;
}

.submenu-item:hover .submenu-link {
  background: rgba(26, 43, 91, 0.06);
  color: var(--primary-color);
}

.submenu-item.active .submenu-link {
  background: rgba(26, 43, 91, 0.10);
  color: var(--primary-color);
  font-weight: 700;
  border-left: 3px solid var(--primary-color);
  padding-left: 17px;
}

/* Level 2 Sub-submenu */
.nav-sub-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(10px);
  background: #ffffff;
  border: 1px solid rgba(26, 43, 91, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13, 20, 48, 0.15);
  min-width: 180px;
  padding: 8px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1200;
}

.submenu-item:hover .nav-sub-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(2px);
}

.sub-submenu-link {
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #4a5568;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  transition: background 0.15s, color 0.15s;
}

.sub-submenu-item:hover .sub-submenu-link {
  background: rgba(26, 43, 91, 0.06);
  color: var(--primary-color);
}

.sub-submenu-item.active .sub-submenu-link {
  background: rgba(26, 43, 91, 0.10);
  color: var(--primary-color);
  font-weight: 700;
  border-left: 3px solid var(--primary-color);
  padding-left: 13px;
}

/* Search Trigger Link */
.search-nav-btn {
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── User Session Profile Nav ─────────────────────────────────────────── */
.user-profile-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.15s;
  margin-left: 20px;
  position: relative;
}

.user-profile-nav:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.user-nav-name {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #f9f9f9;
}

/* ── Announcement Bar ───────────────────────────────────────────────────────── */
.announcement-bar {
  padding: 10px 24px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  position: relative;
  z-index: 990;
}

.announcement-content a {
  color: inherit;
  font-weight: 800;
  transition: opacity 0.2s;
}

.announcement-content a:hover {
  opacity: 0.8;
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────────── */
.breadcrumbs-container {
  padding: 12px 0 4px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #5f6368;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-item:not(:last-child)::after {
  content: "\203A";
  font-size: 14px;
  color: #a0aec0;
  line-height: 1;
}

.breadcrumb-link {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb-link:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.breadcrumb-text {
  color: #2d3748;
}

.breadcrumb-item.active .breadcrumb-text {
  font-weight: 700;
  color: var(--primary-color);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
  background: #2354b3;
  border-top: 1px solid var(--border-color);
  padding: 30px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
}

.footer-container {
  width: calc(100% - 60px);
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

.footer-websites-row {
  color: #f9f9f9;
  font-weight: 600;
}

.footer-header {
  color: #f9f9f9;
  font-family: Montserrat, Arial;
  font-size: 10.0pt;
  font-weight: 600;
  vertical-align: baseline;
}

.footer-link {
  color: #f9f9f9;
  font-family: Montserrat, Arial;
  font-size: 10.0pt;
  font-weight: 500;
  text-decoration: underline;
  vertical-align: baseline;
  transition: opacity 0.15s;
}

.footer-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.footer-copyright {
  font-size: 11px;
  color: #a0aec0;
  font-weight: 500;
}

/* ── Floating Admin Panel & Preview Mode ────────────────────────────────────── */
.admin-preview-banner {
  background: #c53030;
  color: #ffffff;
  padding: 8px 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  position: relative;
  z-index: 2000;
}

.preview-exit-btn {
  background: #ffffff;
  color: #c53030;
  border: none;
  border-radius: 4px;
  padding: 2px 10px;
  font-weight: 800;
  text-decoration: none;
  font-size: 10px;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

.preview-exit-btn:hover {
  opacity: 0.9;
}

.admin-floating-panel {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-panel-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 8px 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}

.admin-panel-btn:hover {
  background: var(--secondary-color);
  transform: translateY(-1px);
}

.admin-panel-btn.link-preview-btn {
  background: #4a154b;
}

.admin-panel-btn.link-preview-btn:hover {
  background: #601e61;
}

/* ── Floating Corner Widgets ────────────────────────────────────────────────── */
.floating-widget-corner {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.widget-circle-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(26,43,91,0.25);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  border: none;
}

.widget-circle-btn:hover {
  transform: scale(1.08);
}

.widget-circle-btn.slack-widget {
  background: #e3ada1;
  color: var(--primary-color);
}

.widget-circle-btn.slack-widget:hover {
  background: #dca396;
}

/* ── Lightbox & General Modals ──────────────────────────────────────────────── */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(13,20,48,0.9);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  animation: zoom 0.3s;
}

@keyframes zoom {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.lightbox-close:hover {
  color: #bbb;
}

#lightbox-caption {
  margin: 15px auto 0;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 15px;
}

/* Lightbox Gallery Navigation */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #ffffff;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
  z-index: 1000000;
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.05);
}

.lightbox-prev:active,
.lightbox-next:active {
  transform: translateY(-50%) scale(0.95);
}

#lightbox-counter {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Shared Page Headers ────────────────────────────────────────────────────── */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 3px solid #2354b3;
  margin-bottom: 20px;
  padding-bottom: 0;
  height: 45px;
}
.page-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 8px;
  line-height: 1;
  letter-spacing: -0.5px;
  font-family: "Montserrat", sans-serif;
}

/* ── Google Drive Doc CSS Scoping reset ─────────────────────────────────────── */
.drive-doc-content {
  font-family: "Roboto", sans-serif !important;
  font-size: 15px;
  line-height: 1.75;
  color: #2d3748;
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - 250px) !important;
  margin: 0 auto;
  background: #ffffff;
  padding: 24px !important;
  box-sizing: border-box !important;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.drive-doc-content * {
  font-family: "Roboto", sans-serif !important;
}

.drive-doc-content h1,
.drive-doc-content h1 *,
.drive-doc-content h2,
.drive-doc-content h2 *,
.drive-doc-content h3,
.drive-doc-content h3 *,
.drive-doc-content h4,
.drive-doc-content h4 * {
  font-family: "Montserrat", sans-serif !important;
}

.drive-doc-content h1,
.drive-doc-content h1 span {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--primary-color) !important;
  margin-top: 20px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 10px;
  line-height: 1.2 !important;
}

.drive-doc-content h2,
.drive-doc-content h2 span {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
  margin-top: 30px;
  margin-bottom: 14px;
  line-height: 1.2 !important;
}

.drive-doc-content h3,
.drive-doc-content h3 span {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--primary-color) !important;
  margin-top: 24px;
  margin-bottom: 12px;
  line-height: 1.2 !important;
}

.drive-doc-content p {
  margin-bottom: 16px;
}

.drive-doc-content ul,
.drive-doc-content ol {
  margin-left: 24px;
  margin-bottom: 16px;
}

.drive-doc-content li {
  margin-bottom: 6px;
}

.drive-doc-content a,
.drive-doc-content a * {
  color: var(--secondary-color) !important;
  text-decoration: underline !important;
}

.drive-doc-content a:hover,
.drive-doc-content a:hover * {
  color: var(--primary-color) !important;
}

/* Scoped tables styling for premium intranet document render */
.drive-doc-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 20px !important;
}

.drive-doc-content td,
.drive-doc-content th {
  padding: 10px !important;
  border: 1px solid var(--border-color) !important;
}

/* ── Autogenerated CSS for detailed modal / DMs ───────────────────────────── */
/* These are standard styles in the legacy Apps Script replicated to core.css */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.highlighted-mention {
  animation: pulse 1s 3 ease-in-out;
  background: #ffebb3 !important;
  border-radius: 3px;
  padding: 1px 4px;
}

/* Responsive constraints */
@media (max-width: 900px) {
  .site-header {
    height: auto;
    padding: 12px 0;
  }
  .header-container {
    flex-direction: column;
    gap: 12px;
  }
  .site-navigation {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-left: 0;
  }
  .nav-menu {
    gap: 4px;
  }
  .nav-link {
    font-size: 11px;
    padding: 6px 10px;
  }
  .nav-item.active > .nav-link::after {
    left: 10px;
    right: 10px;
  }
  .user-profile-nav {
    display: none;
  }
  .site-content-container {
    width: calc(100% - 24px);
  }
}

/* ── Dynamic Layout Resets for Inbox, Feed, and Home ───────────────────────── */
body.layout-inbox, body.mode-inbox {
  height: 100vh;
  overflow: hidden;
}
body.layout-inbox .main-content-wrapper, body.mode-inbox .main-content-wrapper {
  padding-top: 0;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}
body.layout-inbox .site-content-container, body.mode-inbox .site-content-container {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
}
body.layout-inbox .page-content-body, body.mode-inbox .page-content-body {
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
}
body.layout-inbox .site-footer, body.mode-inbox .site-footer {
  display: none;
}

/* Groups layout — identical to inbox: full-height, flush edges, no footer */
body.mode-groups {
  height: 100vh;
  overflow: hidden;
}
body.mode-groups .main-content-wrapper {
  padding-top: 0;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}
body.mode-groups .site-content-container {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
}
body.mode-groups .page-content-body {
  margin-top: 0;
  margin-bottom: 0;
  height: 100%;
}
body.mode-groups .site-footer {
  display: none;
}

/* Feed layout clean scaling */
body.layout-feed .main-content-wrapper,
body.mode-feed .main-content-wrapper,
body.mode-announcements .main-content-wrapper,
body.layout-home .main-content-wrapper,
body.mode-home .main-content-wrapper {
  padding-top: 0;
}
body.layout-feed .site-content-container,
body.mode-feed .site-content-container,
body.mode-announcements .site-content-container,
body.layout-home .site-content-container,
body.mode-home .site-content-container {
  width: 100%;
  max-width: none;
  margin: 0;
}
body.layout-feed .page-content-body,
body.mode-feed .page-content-body,
body.mode-announcements .page-content-body,
body.layout-home .page-content-body,
body.mode-home .page-content-body {
  margin-top: 0;
  margin-bottom: 0;
}

/* Applications layout max-width override */
body.layout-applications .site-content-container,
body.mode-applications .site-content-container {
  max-width: 1440px;
  width: 100%;
}

/* Full-width pages header container override */
body.layout-inbox .site-header .header-container,
body.mode-inbox .site-header .header-container,
body.layout-groups .site-header .header-container,
body.mode-groups .site-header .header-container,
body.layout-orgchart .site-header .header-container,
body.mode-orgchart .site-header .header-container {
  max-width: 100%;
  padding: 0 20px 0 10px;
}

/* ── Layout Modals Styling (Site-wide) ────────────────────────────────────── */
.slack-dm-modal,
.profile-card-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(13, 20, 48, 0.6);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 20000;
}

.slack-dm-modal.open,
.profile-card-modal.open {
  opacity: 1;
}

.slack-dm-modal-content {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(13,20,48,0.25);
  border: 1px solid rgba(26,43,91,0.12);
  width: 480px;
  max-width: 90%;
  padding: 25px;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-sizing: border-box;
}

.slack-dm-modal.open .slack-dm-modal-content {
  transform: scale(1);
}

.slack-dm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(26,43,91,0.08);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.slack-dm-modal-header h3 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
}

.slack-dm-modal-close {
  font-size: 28px;
  font-weight: 700;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
}

.slack-dm-modal-close:hover {
  color: var(--primary-color);
}

.slack-dm-recipient {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  background: #f4f6f9;
  padding: 10px 15px;
  border-radius: 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
}

.slack-dm-recipient-label {
  color: #666;
  font-weight: 600;
}

.slack-dm-recipient-name {
  color: var(--primary-color);
  font-weight: 700;
}

.slack-dm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ── Inline Reply Editor ──────────────────────────────────────────────── */
.slack-inline-editor {
  width: 100%;
  background: #f4f6f9;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
  margin: 0;
  padding: 0 16px;
  position: relative;
  z-index: 10;
}
.slack-inline-editor.open {
  max-height: 380px;
  opacity: 1;
  margin: 0;
  padding: 16px;
  border: none;
  border-top: 1px solid rgba(26, 43, 91, 0.08);
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
}
.slack-inline-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.slack-inline-editor-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.slack-user-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--theme-bg);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--reaction-pill-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--theme-color);
  align-self: flex-start;
}
.slack-user-badge img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.slack-textarea-wrapper {
  margin-bottom: 20px;
  position: relative;
}

.slack-textarea {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  border: 1px solid rgba(26,43,91,0.12);
  padding: 12px;
  font-family: "Lora", Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  color: #333;
  overflow-y: auto;
  box-sizing: border-box;
}
.slack-textarea:focus,
.slack-textarea:focus-visible {
  outline: none !important;
  /* Visible focus ring (replaces the removed outline) */
  box-shadow: 0 0 0 3px var(--read-more-shadow) !important;
  border-color: var(--theme-color) !important;
}

.formatting-toolbar {
  display: flex;
  gap: 2px;
  background: #e2e8f0;
  padding: 5px 8px;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(26,43,91,0.1);
  border-bottom: none;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.formatting-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.formatting-btn:hover {
  background: #cbd5e1;
  color: var(--primary-color);
}

.toolbar-sep {
  width: 1px;
  height: 18px;
  background: rgba(26,43,91,0.18);
  margin: 0 4px;
  flex-shrink: 0;
  display: inline-block;
}

.slack-editor-wysiwyg {
  overflow-y: auto;
  text-align: left;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  height: 110px;
  padding: 10px;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(26,43,91,0.1);
  font-family: "Lora", serif;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  color: #333;
}

.slack-editor-wysiwyg[placeholder]:empty:before {
  content: attr(placeholder);
  color: #888;
  font-style: italic;
  pointer-events: none;
}

.slack-editor-wysiwyg a {
  color: #2354b3;
  text-decoration: underline;
}

.slack-modal-btn {
  padding: 8px 20px;
  border-radius: 50px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.slack-modal-btn-secondary {
  background: #f0f4ff;
  border: 1px solid rgba(35,84,179,0.14);
  color: var(--primary-color);
}

.slack-modal-btn-secondary:hover {
  background: #dde8ff;
}

.slack-modal-btn-primary {
  background: #2354b3;
  color: #fff;
  box-shadow: 0 4px 10px rgba(35,84,179,0.15);
}

.slack-modal-btn-primary:hover {
  background: #1a3a8a;
}

.slack-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary-color);
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(13,20,48,0.25);
  z-index: 20002;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.slack-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.profile-card-content {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 60px rgba(13,20,48,0.25);
  border: 1px solid rgba(26,43,91,0.12);
  width: 760px;
  max-width: 95%;
  height: 90vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.profile-card-modal.open .profile-card-content {
  transform: scale(1);
}

.profile-modal-loader {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.profile-modal-loader.active {
  opacity: 1;
  pointer-events: auto;
}

.profile-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(26,43,91,0.1);
  border-left-color: #1a73e8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.profile-card-scrollable {
  flex-grow: 1;
  overflow-y: auto;
}

.profile-banner-bg {
  height: 120px;
  flex-shrink: 0;
}

/* Collapsing header: slim sticky bar that fades in once identity scrolls off */
.profile-compact-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 60px 11px 20px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(26, 43, 91, 0.08);
  border-radius: 20px 20px 0 0;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 9;
}

.profile-compact-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.profile-compact-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.profile-compact-text {
  min-width: 0;
}

.profile-compact-name {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1f1f1f;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-compact-title {
  font-size: 12px;
  color: #5f6368;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-header-info {
  text-align: center;
  padding: 0 24px 20px;
}

.profile-modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.3);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 11;
  line-height: 1;
}

.profile-modal-close-btn:hover {
  background: rgba(0,0,0,0.5);
  color: #fff;
}

.profile-avatar-wrapper {
  margin-top: -72px;
  display: inline-block;
  position: relative;
}

.profile-avatar-img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  object-fit: cover;
}

.profile-main-name {
  font-size: 26px;
  font-weight: 700;
  color: #1f1f1f;
  margin: 8px 0 4px;
}

.profile-main-title {
  font-size: 18px;
  color: #5f6368;
  margin: 0;
  font-weight: 500;
}

.profile-main-dept {
  font-size: 15px;
  color: #80868b;
  margin: 2px 0 10px;
}

.profile-status-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.profile-badge-active {
  background: #e6f4ea;
  color: #137333;
}

.profile-badge-ooo {
  background: #fce8e6;
  color: #c5221f;
}

.profile-badge-location {
  background: #e8f0fe;
  color: #1a73e8;
}

.profile-badge-time {
  background: #f1f3f4;
  color: #3c4043;
}

.profile-badge-slack {
  background: #f3e8ff;
  color: #6b21a8;
  border: 1px solid #e9d5ff;
  max-width: 250px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}

.profile-badge-former {
  background: #f1f3f4;
  color: #5f6368;
  border: 1px solid #dadce0;
}

.profile-quick-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 14px 0 4px;
}

.profile-action-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  width: 90px;
}

.profile-action-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #dadce0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1a73e8;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.profile-action-wrapper:hover .profile-action-circle {
  background: #f4f8ff;
  border-color: #1a73e8;
  box-shadow: 0 2px 6px rgba(26,115,232,0.15);
}

.profile-action-circle svg {
  width: 28px;
  height: 28px;
}

.profile-action-label {
  font-size: 11px;
  font-weight: 600;
  color: #5f6368;
  text-align: center;
}

.profile-details-body {
  padding: 24px;
}

.profile-section-card {
  background: #f4f8fd;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
  border: 1px solid #e2ecf8;
}

.profile-card-title {
  font-size: 15px;
  font-weight: 500;
  color: #1f1f1f;
  margin-bottom: 14px;
}

.profile-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f3f4;
}

.profile-info-row:last-child {
  border-bottom: none;
}

.profile-info-icon {
  color: #5f6368;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.profile-info-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.profile-info-content {
  flex-grow: 1;
  min-width: 0;
}

.profile-info-val {
  font-size: 14px;
  color: #202124;
  font-weight: 500;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.profile-info-label {
  font-size: 13px;
  color: #70757a;
  text-transform: capitalize;
}

/* ── Profile header: unified meta chips (pronouns · pronunciation · place · time) */
.profile-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 2px;
}
.profile-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #5f6368;
  background: #f1f3f4;
  padding: 3px 11px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Profile: tiled contact / about fields ─────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profile-tile {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: #fff;
  border: 1px solid #e6edf6;
  border-radius: 12px;
  padding: 11px 13px;
  min-width: 0;
}
.profile-tile-wide { grid-column: 1 / -1; }
.profile-tile-icon {
  color: #5f6368;
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
}
.profile-tile-icon svg { width: 18px; height: 18px; fill: currentColor; }
.profile-tile-body { min-width: 0; flex: 1; }
.profile-tile-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8a94a6;
  margin-bottom: 3px;
}
.profile-tile-val {
  font-size: 13.5px;
  color: #202124;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.profile-tile-val a { color: #1a73e8; text-decoration: none; }
.profile-tile-val a:hover { text-decoration: underline; }
.profile-gcontacts-link {
  display: block;
  margin-top: 12px;
  color: #1a73e8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 560px) {
  .profile-grid { grid-template-columns: 1fr; }
}

.reports-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reports-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.reports-item:hover {
  background: #f0f4ff;
}

.reports-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.reports-info {
  flex: 1;
}

.reports-name {
  font-size: 14px;
  font-weight: 600;
  color: #202124;
}

.reports-title {
  font-size: 12px;
  color: #5f6368;
}

.reports-location {
  font-size: 11px;
  color: #70757a;
  background: #e8f0fe;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Timeline */
.profile-timeline {
  display: grid;
  grid-template-columns: 1fr 50px 1fr;
  row-gap: 30px;
  position: relative;
  margin: 10px 0;
  align-items: center;
}

.profile-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: #80868b;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-row {
  display: contents;
}

.timeline-left {
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  gap: 12px;
  z-index: 2;
  cursor: pointer;
}

.timeline-center {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.timeline-right {
  grid-column: 3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 12px;
  z-index: 2;
  cursor: pointer;
}

.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #80868b;
}

.timeline-dot.last-dot {
  width: 16px;
  height: 16px;
}

.timeline-text {
  max-width: 140px;
}

.timeline-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-title {
  font-size: 11.5px;
  color: #5f6368;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-root-avatar-container {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 2;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-root-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teardrop-avatar-container {
  width: 40px;
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform 0.2s, box-shadow 0.2s;
  background: #fff;
}

.teardrop-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-45deg) scale(1.42);
  transition: transform 0.2s;
}

.teardrop-left {
  border-radius: 50% 0 50% 50%;
  transform: translateX(16.72px) rotate(45deg);
}

.teardrop-right {
  border-radius: 50% 50% 50% 0;
  transform: translateX(-16.72px) rotate(45deg);
}

.timeline-left:hover .teardrop-left {
  transform: translate(16.72px,-2px) rotate(45deg);
  box-shadow: 0 4px 10px rgba(26,115,232,0.25);
}

.timeline-right:hover .teardrop-right {
  transform: translate(-16.72px,-2px) rotate(45deg);
  box-shadow: 0 4px 10px rgba(26,115,232,0.25);
}

.timeline-target-info {
  text-align: center;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}

.timeline-target-name {
  font-size: 15px;
  font-weight: 700;
  color: #202124;
}

.timeline-target-title {
  font-size: 13px;
  color: #5f6368;
  margin-top: 2px;
}

/* Bullet list (tli) */
.tli {
  display: flex;
  flex-direction: column;
  gap: 1px;
  pointer-events: none;
}

.tli-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tli-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.tli-num {
  font-size: 5px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  width: 6px;
  text-align: right;
  color: inherit;
}

.tli-line {
  display: inline-block;
  width: 12px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes status-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(var(--scroll-overflow, 0px)); }
}

/* ── User Profile Dropdown ─────────────────────────────────────────────────── */
.user-nav-arrow {
  opacity: 0.8;
  color: #f9f9f9;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.user-profile-nav:hover .user-nav-arrow {
  color: #ffffff;
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(26, 43, 91, 0.1);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13, 20, 48, 0.15);
  min-width: 220px;
  padding: 8px 0;
  display: none;
  z-index: 1100;
  animation: dropdownFadeIn 0.2s ease-out;
}

.user-dropdown-menu.show {
  display: block;
}

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

.user-dropdown-item {
  display: block;
  padding: 10px 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #2d3748;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}

.user-dropdown-item:hover {
  background: #f4f6f9;
  color: #2354b3;
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(26, 43, 91, 0.08);
  margin: 6px 0;
}

.user-dropdown-item.logout-link {
  color: #dc2626;
}

.user-dropdown-item.logout-link:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* ── User Status Modal ──────────────────────────────────────────────────────── */
.status-emoji-trigger-container {
  position: relative;
}

.status-emoji-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px dashed #cbd5e0;
  background: #f7fafc;
  color: #4a5568;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: all 0.15s ease;
  padding: 0;
}

.status-emoji-btn:hover {
  border-color: #2354b3;
  background: #edf2f7;
  color: #2354b3;
}

.status-emoji-btn img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.status-emoji-picker-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #ffffff;
  border: 1px solid rgba(26, 43, 91, 0.15);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(13, 20, 48, 0.25);
  width: 260px;
  height: 280px;
  z-index: 10100;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: dropdownFadeIn 0.2s ease-out;
}

.status-emoji-picker-search {
  padding: 8px;
  border-bottom: 1px solid rgba(26, 43, 91, 0.08);
}

.status-emoji-picker-search input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(26, 43, 91, 0.12);
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.status-emoji-picker-categories {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-emoji-category-sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-emoji-cat-title {
  font-size: 10px;
  font-weight: 800;
  color: #a0aec0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.status-emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.status-emoji-item {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.status-emoji-item:hover {
  background: #edf2f7;
}

.status-emoji-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.status-emoji-item span {
  font-size: 18px;
  line-height: 1;
}

.user-status-modal {
  position: fixed;
  inset: 0;
  background: rgba(13, 20, 48, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
}

.user-status-modal-content {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(13, 20, 48, 0.25);
  width: calc(100% - 32px);
  max-width: 500px;
  padding: 24px;
  border: 1px solid rgba(26, 43, 91, 0.08);
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.user-status-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1.5px solid rgba(26, 43, 91, 0.06);
  padding-bottom: 12px;
}

.user-status-modal-header h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
  margin: 0;
}

.user-status-modal-close {
  font-size: 24px;
  font-weight: 600;
  color: #a0aec0;
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1;
}

.user-status-modal-close:hover {
  color: var(--primary-color);
}

.status-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #4a5568;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-fields-row {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}

.status-emoji-picker-container {
  width: 140px;
}

.status-emoji-input-wrapper {
  position: relative;
}

.status-emoji-input {
  width: 100%;
  padding: 10px;
  border: 1.5px solid #cbd5e0;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  outline: none;
}

.status-emoji-input:focus {
  border-color: #2354b3;
}

.quick-emojis {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  justify-content: space-between;
}

.quick-emoji-btn {
  background: #f4f6f9;
  border: 1px solid rgba(26, 43, 91, 0.08);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}

.quick-emoji-btn:hover {
  background: #2354b3;
  transform: translateY(-1px);
}

.status-text-container {
  flex: 1;
}

.status-text-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  font-family: inherit;
}

.status-text-input:focus {
  border-color: #2354b3;
}

.status-expiration-container {
  margin-bottom: 24px;
}

.datetime-wrapper {
  display: flex;
  gap: 8px;
}

.status-datetime-input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid #cbd5e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.status-datetime-input:focus {
  border-color: #2354b3;
}

.clear-datetime-btn {
  background: #f4f6f9;
  border: 1.5px solid #cbd5e0;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.15s;
}

.clear-datetime-btn:hover {
  background: #e2e8f0;
}

.field-hint {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.4;
}

.user-status-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1.5px solid rgba(26, 43, 91, 0.06);
  padding-top: 16px;
}

.status-modal-btn {
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  font-family: inherit;
}

.status-modal-btn-secondary {
  background: #edf2f7;
  color: #4a5568;
}

.status-modal-btn-secondary:hover {
  background: #e2e8f0;
}

.status-modal-btn-clear {
  background: #fee2e2;
  color: #dc2626;
  margin-right: auto;
}

.status-modal-btn-clear:hover {
  background: #fecaca;
}

.status-modal-btn-primary {
  background: #2354b3;
  color: #ffffff;
}

.status-modal-btn-primary:hover {
  background: #1a3d8a;
}


/* ── Shared message rendering: files, videos, link previews ──────────────
   Used by Groups, Latest Feed, and any future page using renderAttachments.
   Defined here once so page-specific CSS files don't duplicate these. */

.msg-attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 8px;
  width: 100%;
}

.msg-attachment-img-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(26, 43, 91, 0.08);
  box-shadow: 0 4px 12px rgba(26, 43, 91, 0.03);
  transition: transform 0.2s, box-shadow 0.2s;
  flex: 1 1 200px;
  max-height: 240px;
  max-width: calc(33.333% - 7px);
  min-width: 150px;
  box-sizing: border-box !important;
}

.msg-attachment-img-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(26, 43, 91, 0.08);
}

.msg-attachment-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  max-width: 100%;
}

.msg-attachment-gallery.single-image .msg-attachment-img-wrapper {
  max-width: min(360px, 100%);
  max-height: 270px;
  width: auto;
  height: auto;
  box-sizing: border-box !important;
}

.msg-attachment-gallery.single-image .msg-attachment-img {
  max-width: 100%;
  max-height: 270px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}


.msg-file-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #f4f6f9; border: 1px solid rgba(26,43,91,0.08);
  padding: 10px 14px; border-radius: 10px; text-decoration: none;
  color: var(--primary-color); font-family: "Montserrat", sans-serif;
  font-size: 13px; font-weight: 600; transition: background 0.2s, border-color 0.2s;
  width: fit-content; max-width: 100%;
}
.msg-file-pill:hover { background: #eef2fc; border-color: rgba(35,84,179,0.2); }
.msg-file-icon { font-size: 16px; flex-shrink: 0; }

.msg-video-card {
  display: flex; align-items: center; gap: 12px;
  background: #f0f4ff; border: 1px solid rgba(35,84,179,0.15);
  border-radius: 12px; padding: 12px 16px; text-decoration: none;
  color: var(--primary-color); transition: background 0.2s; width: fit-content; max-width: 100%;
}
.msg-video-card:hover { background: #e4ecff; }
.msg-video-thumb-wrap {
  position: relative; width: 80px; height: 56px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0; background: var(--primary-color);
  display: flex; align-items: center; justify-content: center;
}
.msg-video-thumb { width: 100%; height: 100%; object-fit: cover; }
.msg-video-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.msg-video-play-icon::after {
  content: ""; border-left: 18px solid rgba(255,255,255,0.9);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px;
}
.msg-video-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-video-label {
  font-size: 10px; font-weight: 700; color: #2354b3; text-transform: uppercase;
  letter-spacing: 0.8px; font-family: "Montserrat", sans-serif;
}
.msg-video-name {
  font-size: 13px; font-weight: 600; color: var(--primary-color);
  font-family: "Montserrat", sans-serif; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}

.msg-link-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; margin-bottom: 8px; }
.msg-link-preview {
  display: flex; flex-direction: column;
  border-left: 4px solid rgba(35,84,179,0.35); background: #f7f9fc;
  border-radius: 0 10px 10px 0; padding: 10px 14px; text-decoration: none;
  color: inherit; transition: background 0.2s; overflow: hidden;
  flex: 1 1 calc(50% - 5px); min-width: 260px;
}
.msg-link-preview:hover { background: #eef2fc; border-left-color: #2354b3; }
.msg-link-preview-title {
  font-size: 14px; font-weight: 700; color: #2354b3; margin-bottom: 4px;
  font-family: "Montserrat", sans-serif; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.msg-link-preview-text {
  font-size: 12px; color: #4a5568; line-height: 1.5;
  font-family: "Montserrat", sans-serif;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 6px; white-space: pre-wrap;
}
.msg-link-preview-source {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: #5a6782; text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 4px; font-family: "Montserrat", sans-serif;
}
.msg-link-preview-source-icon { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; flex-shrink: 0; }
.msg-link-preview-thumb {
  margin-top: 8px; width: 100%; max-height: 200px; border-radius: 8px;
  object-fit: cover; display: block; cursor: pointer;
}

/* ── Message Card Structure ────────────────────────────────────────────────── */

.author-column {
  flex: 0 0 var(--author-width);
  width: var(--author-width);
  min-width: var(--author-width);
  max-width: var(--author-width);
  background: var(--theme-bg);
  padding: 25px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-right: 4px solid var(--theme-color);
  box-sizing: border-box !important;
}
.author-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--theme-color);
  margin-bottom: 12px;
}
.author-name { font-size: 14px; font-weight: 800; color: var(--primary-color); margin-bottom: 4px; line-height: 1.2; font-family: "Montserrat", sans-serif; }
.author-title { font-size: 12px; color: #666; line-height: 1.3; font-style: italic; }

.message-content {
  flex: 1;
  padding: 25px 25px 25px var(--content-padding-left);
  display: flex;
  flex-direction: column;
  box-sizing: border-box !important;
}
.msg-title { font-size: 17px; color: var(--primary-color); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.3px; font-family: "Montserrat", sans-serif; }
.msg-title a { color: var(--theme-color); text-decoration: none; font-weight: 800; }
.msg-title a:hover { text-decoration: underline; }
.msg-text { font-family: "Lora", Georgia, serif; font-size: 14px; color: #333333; line-height: 1.75; overflow-wrap: break-word; word-break: break-word; }
.msg-text a { color: var(--theme-color); }
.msg-text ul,
.msg-text ol,
.reply-text ul,
.reply-text ol { padding-left: 24px; margin: 4px 0; }
.msg-text li,
.reply-text li { margin: 2px 0; }
.msg-text-block { margin-bottom: 0; }

.slack-mention { color: var(--theme-color); font-weight: 700; text-decoration: none; transition: color 0.2s; }
.slack-mention:hover { text-decoration: underline; }

/* ── Reply / Thread Drawer Structure ──────────────────────────────────── */
.reply-author-col {
  flex: 0 0 200px;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  background: var(--theme-bg);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
  border-right: 3px solid var(--theme-color);
  box-sizing: border-box !important;
  position: relative;
}
.reply-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--theme-color); flex-shrink: 0; }
.reply-avatar-placeholder { background: rgba(26, 43, 91, 0.08); }
.reply-author-name { font-size: 11px; font-weight: 800; color: var(--primary-color); font-family: "Montserrat", sans-serif; line-height: 1.2; }
.reply-author-title { font-size: 11px; color: #666; font-style: italic; line-height: 1.3; }
.reply-body { flex: 1; min-width: 0; padding: 12px 15px; display: flex; flex-direction: column; box-sizing: border-box !important; }
.reply-time { font-size: 11px; color: #5f6368; display: block; margin-bottom: 5px; }
.reply-text { font-family: "Lora", Georgia, serif; font-size: 13px; color: #333; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.reply-text a { color: var(--theme-color); }
.reply-body .msg-reactions { margin-top: 8px; margin-bottom: 0; }
.reply-body .reaction-pill { font-size: 11px; padding: 2px 7px; }

.thread-reply + .thread-reply:not(.reply-consecutive) {
  border-top: 1px solid rgba(26, 43, 91, 0.18);
}

.thread-reply.reply-consecutive .reply-author-col > :not(.reply-timeline-connector) {
  display: none;
}

.thread-reply.reply-consecutive .reply-body {
  padding-top: 4px;
}

/* Timeline vertical connector elements */
.reply-timeline-connector {
  display: none;
  position: relative;
  width: 2px;
  background: rgba(35, 84, 179, 0.15); /* Subtle color */
  margin: 0 auto;
}

/* Show connector only inside consecutive reply threads */
.thread-reply:has(+ .reply-consecutive) .reply-timeline-connector,
.thread-reply.reply-consecutive .reply-timeline-connector {
  display: block;
}

/* First reply's connector stretches to fill remaining height, top cap */
.thread-reply:not(.reply-consecutive):has(+ .reply-consecutive) .reply-timeline-connector {
  flex: 1;
  margin-top: 10px;
  margin-bottom: -14px;
}
.thread-reply:not(.reply-consecutive):has(+ .reply-consecutive) .reply-timeline-connector::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 2px;
  background: rgba(35, 84, 179, 0.15);
}

/* Middle replies connector spans 100% height plus top/bottom padding overflow */
.thread-reply.reply-consecutive:has(+ .reply-consecutive) .reply-timeline-connector {
  height: calc(100% + 28px);
  margin-top: -14px;
  margin-bottom: -14px;
}

/* Last reply's connector has a fixed height, bottom cap */
.thread-reply.reply-consecutive:not(:has(+ .reply-consecutive)) .reply-timeline-connector {
  height: calc(24px + 14px);
  margin-top: -14px;
  margin-bottom: 0;
  flex: none;
}
.thread-reply.reply-consecutive:not(:has(+ .reply-consecutive)) .reply-timeline-connector::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 2px;
  background: rgba(35, 84, 179, 0.15);
}

.reply-author-col .action-bar {
  margin-top: 6px;
}

.reply-author-col .action-btn {
  background: rgba(26, 43, 91, 0.05);
  border-color: rgba(26, 43, 91, 0.1);
  width: 26px;
  height: 26px;
  padding: 4px;
}

/* Compact reply column — same width as full column, just hides title/status/actions */
.reply-compact .reply-author-title,
.reply-compact .author-slack-status,
.reply-compact .action-bar { display: none; }

.drawer-reply-action-row {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  width: 100%;
  padding: 12px 16px;
  background: #f4f6f9;
  border-top: 1px solid rgba(26, 43, 91, 0.08);
  border-radius: 0;
}

.reply-in-slack-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--theme-color);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  transition: background 0.2s;
}

.reply-in-slack-btn:hover {
  background: var(--theme-color-hover, #1d4b9e);
}

.thread-reply {
  display: flex;
  gap: 0;
  border-radius: 0;
  overflow: visible;
  background: #ffffff;
  box-shadow: none;
  border: none;
}

.thread-reply + .thread-reply:not(.reply-consecutive) {
  border-top: 1px solid rgba(26, 43, 91, 0.18);
}

.thread-reply.reply-consecutive .reply-author-col > :not(.reply-timeline-connector) {
  display: none;
}

.thread-reply.reply-consecutive .reply-body {
  padding-top: 4px;
}

/* ── Slack Status Badge ── */
.author-slack-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6b4ca0;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 6px;
  gap: 3px;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
  width: 100%;
  cursor: default;
}

.author-slack-status img.slack-status-emoji {
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}

.author-slack-status .slack-status-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  vertical-align: middle;
}

.author-slack-status .slack-status-text.scrolling {
  overflow: visible;
  text-overflow: clip;
  animation: status-scroll 3s 0.3s ease-in-out forwards;
}



/* ── Shared Component CSS ─────────────────────────────────────────────────── */

/* ── Reaction pills ───────────────────────────────────────────────────── */
.msg-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.reaction-pill {
  position: relative; display: inline-flex; align-items: center;
  background: var(--reaction-pill-bg); border: 1px solid var(--reaction-pill-border);
  border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 700;
  color: var(--primary-color); cursor: default; transition: background 0.2s; white-space: nowrap;
}
.reaction-pill:hover { background: var(--reaction-pill-hover); }
.reaction-pill::after {
  content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); margin-bottom: 6px;
  background-color: rgba(26, 43, 91, 0.95); color: #fff; padding: 8px 12px;
  border-radius: 6px; font-size: 11px; white-space: normal; width: max-content;
  max-width: 300px; text-align: left; opacity: 0; visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s; pointer-events: none; z-index: 100;
  font-weight: 500; line-height: 1.4; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.reaction-pill::before {
  content: ""; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); margin-bottom: 2px; border-width: 4px;
  border-style: solid; border-color: rgba(26, 43, 91, 0.95) transparent transparent transparent;
  opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none; z-index: 100;
}
.reaction-pill:hover::after, .reaction-pill:hover::before { opacity: 1; visibility: visible; }
.reaction-pill.user-reacted { background: var(--reaction-pill-hover); border-color: var(--theme-color); }
.add-reaction-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--reaction-pill-bg); border: 1px solid var(--reaction-pill-border);
  border-radius: 50%; width: 24px; height: 24px; font-size: 14px; font-weight: 700;
  color: var(--theme-color); cursor: pointer; transition: all 0.2s; padding: 0; line-height: 1;
}
.add-reaction-btn:hover { background: var(--reaction-pill-hover); transform: scale(1.1); }

/* ── Action bar ───────────────────────────────────────────────────────── */
.action-bar { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.action-btn {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 50%;
  width: 32px; height: 32px; padding: 6px; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.action-btn:hover { border-color: var(--primary-color); transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.action-btn svg { width: 100%; height: 100%; }
.action-btn.love-btn:hover { border-color: #e8326a !important; background-color: #fff5f7 !important; }

/* ── Tooltip ──────────────────────────────────────────────────────────── */
#mfa-tooltip {
  position: fixed; background: var(--primary-color); color: #fff; font-size: 11px;
  white-space: nowrap; padding: 5px 9px; border-radius: 6px; pointer-events: none;
  opacity: 0; transition: opacity 0.18s; z-index: 999999;
  font-family: "Montserrat", sans-serif; font-weight: 600; line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); display: none;
}

/* ── Modal scroll locks ───────────────────────────────────────────────── */
body.dm-modal-open, body.profile-modal-open, body.lb-modal-open { overflow: hidden; }

/* ── Autocomplete popover ─────────────────────────────────────────────── */
.slack-autocomplete-popover {
  display: none; position: absolute; bottom: 40px; left: 10px;
  background: #fff; border: 1px solid rgba(26, 43, 91, 0.15);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(13, 20, 48, 0.18);
  z-index: 20020; width: 260px; max-height: 220px; overflow-y: auto;
}
.slack-autocomplete-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  cursor: pointer; font-family: "Montserrat", sans-serif; font-size: 12px;
  transition: background 0.12s;
}
.slack-autocomplete-item:hover, .slack-autocomplete-item.active { background: #f0f4ff; }
.slack-autocomplete-item img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ── Toolbar list icon (tli) ──────────────────────────────────────────── */
.tli { display: flex; flex-direction: column; gap: 1px; pointer-events: none; }
.tli-row { display: flex; align-items: center; gap: 3px; }
.tli-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tli-num { font-size: 5px; font-weight: 900; font-family: Arial, Helvetica, sans-serif; line-height: 1; width: 6px; text-align: right; color: inherit; }
.tli-line { display: inline-block; width: 12px; height: 2px; background: currentColor; border-radius: 1px; }

/* ── Emoji Picker ─────────────────────────────────────────────────────── */
.emoji-reaction-picker {
  position: absolute; background: #fff; border: 1px solid rgba(26, 43, 91, 0.15);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(13, 20, 48, 0.25);
  width: 260px; height: 300px; z-index: 20005; display: none;
  flex-direction: column; overflow: hidden;
}
.emoji-picker-search { padding: 8px; border-bottom: 1px solid rgba(26, 43, 91, 0.08); }
.emoji-picker-search input {
  width: 100%; padding: 5px 8px; border-radius: 6px;
  border: 1px solid rgba(26, 43, 91, 0.12); font-size: 11px; outline: none;
}
.emoji-picker-categories { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 10px; }
.emoji-picker-cat-title {
  font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 800;
  color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.emoji-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.emoji-picker-item {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; transition: background 0.15s;
}
.emoji-picker-item:hover { background: #f0f4ff; }
.emoji-picker-item img { width: 20px; height: 20px; object-fit: contain; }
.emoji-picker-item span { font-size: 18px; }

/* ── Link Editor Popover ──────────────────────────────────────────────── */
#link-editor-popover {
  position: fixed; z-index: 20010; background: #fff;
  border: 1px solid rgba(26, 43, 91, 0.15); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(13, 20, 48, 0.18); padding: 10px 12px;
  display: none; align-items: center; gap: 7px; min-width: 300px;
}
#link-editor-input {
  flex: 1; padding: 6px 10px; border: 1px solid rgba(26, 43, 91, 0.2);
  border-radius: 6px; font-family: "Montserrat", sans-serif; font-size: 12px;
  color: var(--primary-color); outline: none; min-width: 0;
}
#link-editor-input:focus { border-color: #2354b3; }
#link-editor-apply {
  background: #2354b3; color: #fff; border: none; border-radius: 6px;
  padding: 6px 11px; font-family: "Montserrat", sans-serif; font-size: 12px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
#link-editor-apply:hover { background: #1a3d8a; }
#link-editor-remove {
  background: #f4f6f9; color: #c0392b; border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 6px; padding: 6px 9px; font-family: "Montserrat", sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#link-editor-remove:hover { background: #fdf0ef; }
#link-editor-close {
  background: none; border: none; color: #999; font-size: 18px;
  cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}

/* ── Love Bubble Viewer Modal ─────────────────────────────────────────── */
.love-bubble-modal {
  display: none; position: fixed; z-index: 20002; left: 0; top: 0;
  width: 100vw; height: 100vh; background-color: rgba(13, 20, 48, 0.65);
  backdrop-filter: blur(8px); align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.love-bubble-modal.open { opacity: 1; }
.love-bubble-modal-content {
  background: #f4f6f9; border-radius: 20px;
  box-shadow: 0 16px 60px rgba(13, 20, 48, 0.30);
  border: 1px solid rgba(26, 43, 91, 0.12); width: 90vw; max-width: 90vw;
  height: 90vh; max-height: 90vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.love-bubble-modal.open .love-bubble-modal-content { transform: scale(1); }
.love-bubble-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px 14px; border-bottom: 2px solid #e8326a; flex-shrink: 0;
  background: #fff; border-radius: 20px 20px 0 0; position: sticky; top: 0; z-index: 5;
}
.love-bubble-modal-title {
  font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 800;
  color: var(--primary-color); display: flex; align-items: center; gap: 8px;
}
.love-bubble-modal-close {
  font-size: 28px; font-weight: 700; color: #999; cursor: pointer;
  transition: color 0.2s; line-height: 1; border: none; background: none; padding: 0;
}
.love-bubble-modal-close:hover { color: var(--primary-color); }
.love-bubble-modal .love-btn { display: none !important; }

@keyframes mention-highlight-pulse {
  0%   { background-color: rgba(232, 50, 106, 0.15); box-shadow: 0 0 0 0 rgba(232, 50, 106, 0.4); transform: scale(1); }
  50%  { background-color: rgba(232, 50, 106, 0.35); box-shadow: 0 0 0 6px rgba(232, 50, 106, 0); transform: scale(1.05); }
  100% { background-color: rgba(232, 50, 106, 0.15); box-shadow: 0 0 0 0 rgba(232, 50, 106, 0); transform: scale(1); }
}
.slack-mention.highlighted-mention {
  animation: mention-highlight-pulse 2s infinite ease-in-out;
  display: inline-block; padding: 2px 8px !important; border-radius: 4px;
  font-weight: 800 !important; border: 1.5px solid #e8326a !important;
  color: #e8326a !important; z-index: 10;
}

/* ── Love Bubble Post Modal ───────────────────────────────────────────── */
.lb-post-modal {
  display: none; position: fixed; z-index: 20003; left: 0; top: 0;
  width: 100vw; height: 100vh; background-color: rgba(13, 20, 48, 0.65);
  backdrop-filter: blur(8px); align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.lb-post-modal.open { opacity: 1; }
.lb-post-modal-content {
  background: #f4f6f9; border-radius: 20px;
  box-shadow: 0 16px 60px rgba(13, 20, 48, 0.30);
  border: 1px solid rgba(26, 43, 91, 0.12); width: 560px; max-width: 95%;
  max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column;
  transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lb-post-modal.open .lb-post-modal-content { transform: scale(1); }
.lb-post-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px 14px; border-bottom: 2px solid #e8326a; flex-shrink: 0;
  background: #fff; border-radius: 20px 20px 0 0;
}
.lb-post-modal-body { padding: 20px 24px; }
.lb-post-textarea {
  width: 100%; height: 120px; border-radius: 12px;
  border: 1px solid rgba(26, 43, 91, 0.12); padding: 12px;
  font-family: "Lora", Georgia, serif; font-size: 14px; line-height: 1.5;
  resize: none; outline: none; color: #333; transition: border-color 0.2s;
}
.lb-post-textarea:focus { border-color: #e8326a; }
.lb-post-target {
  display: flex; align-items: center; gap: 10px; background: #fff8fb;
  border: 1px solid rgba(232, 50, 106, 0.2); border-radius: 12px;
  padding: 12px; margin-bottom: 16px;
}
.lb-post-target-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid #e8326a;
}
.lb-post-target-name { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--primary-color); font-size: 14px; }

/* ── Preferences Panel ────────────────────────────────────────────────── */
.prefs-panel {
  position: fixed; top: 0; right: 0; width: 360px; height: 100vh;
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; z-index: 20002;
  font-family: 'Montserrat', sans-serif;
}
.prefs-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px; border-bottom: 1px solid #e0e7ff; flex-shrink: 0;
}
.prefs-panel-title { font-size: 18px; font-weight: 800; color: var(--primary-color); }
.prefs-close-btn { background: none; border: none; font-size: 22px; color: #64748b; cursor: pointer; padding: 0 4px; line-height: 1; }
.prefs-close-btn:hover { color: var(--primary-color); }
.prefs-panel-body { flex: 1; overflow-y: auto; padding: 4px 0 24px; }
.prefs-section-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: #a0aec0; text-transform: uppercase; padding: 16px 20px 8px; }
.prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid #f7f8fc; }
.prefs-row-info { flex: 1; min-width: 0; }
.prefs-row-name { font-size: 13px; font-weight: 700; color: var(--primary-color); margin-bottom: 2px; }
.prefs-row-desc { font-size: 11px; color: #64748b; line-height: 1.4; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e0; border-radius: 24px; transition: background 0.2s; }
.toggle-slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-slider { background: var(--primary-color); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* ── Inline Reply Editor ──────────────────────────────────────────────── */
.inline-reply-container {
  display: none; margin: 8px 0 4px; border: 1px solid rgba(35, 84, 179, 0.2);
  border-radius: 10px; overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0; opacity: 0; background: #fff;
}
.inline-reply-container.open { max-height: 360px; opacity: 1; display: block; }
.inline-reply-header { padding: 8px 12px 4px; }
.inline-reply-user-badge { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #666; font-family: "Montserrat", sans-serif; }
.inline-reply-user-badge img { width: 22px; height: 22px; border-radius: 50%; }
.inline-reply-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 12px 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Personal Calendar — pad button, agenda slideout, event modal, now/next, toast
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header calendar-pad button (monochrome, abstract, inherits menu color) ── */
.calendar-pad-btn {
  position: relative; box-sizing: border-box; padding: 0;
  width: 29px; height: 29px; border: 1.3px solid currentColor; border-radius: 6px;
  color: #f9f9f9; background: transparent; box-shadow: none;
  display: flex; align-items: flex-end; justify-content: center; line-height: 1;
}
/* the "header strip" of the pad */
.calendar-pad-btn::before {
  content: ''; position: absolute; top: 6px; left: 0; right: 0;
  border-top: 1.1px solid currentColor; opacity: 0.7;
}
.calendar-pad-btn .calpad-day {
  font-size: 12px; font-weight: 800; padding-bottom: 3px;
}
/* hover matches the rest of the nav (see .nav-item:hover .nav-link) */
.nav-item:hover .calendar-pad-btn { border-radius: 6px; }

/* ── Agenda slideout ────────────────────────────────────────────────────── */
.agenda-backdrop {
  position: fixed; inset: 0; background: rgba(13, 20, 48, 0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 20000;
}
.agenda-backdrop.open { opacity: 1; visibility: visible; }
.agenda-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: var(--agenda-w); max-width: 90vw;
  background: #f7f9fc; box-shadow: -8px 0 32px rgba(13, 20, 48, 0.22);
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20001; display: flex; flex-direction: column;
  font-family: "Montserrat", sans-serif;
}
.agenda-panel.open { transform: translateX(0); }
/* Pin mode: agenda becomes a fixed right column (desktop only). Reserve exactly the panel width;
   every page then behaves as it does unpinned, just in a narrower viewport. */
body.agenda-pinned { padding-right: var(--agenda-w); }
body.agenda-pinned .agenda-panel { box-shadow: -4px 0 20px rgba(13, 20, 48, 0.10); }
body.agenda-pinned .agenda-backdrop { display: none; }
body.agenda-pinned .feedback-fab { right: calc(var(--agenda-w) + var(--agenda-gap)); }
body.agenda-pinned .meeting-toast { left: 0; right: var(--agenda-w); width: auto; }
/* Org Chart uses fixed, full-viewport chrome that ignores body padding — pull it to the panel. */
body.agenda-pinned #org-chart-wrapper,
body.agenda-pinned #loading,
body.agenda-pinned #error-msg,
body.agenda-pinned #orgchart-page-title { right: var(--agenda-w); }
body.agenda-pinned #person-search,
body.agenda-pinned #cache-badge { right: calc(16px + var(--agenda-w)); }
/* Only the document pages (feed/announcements/home) center content with an inner max-width, which
   collapses to the left once the narrowed area drops below it — give just those a symmetric gutter.
   Immersive apps (inbox/groups/orgchart) and default pages keep their edges exactly as unpinned. */
@media (min-width: 1024px) {
  body.agenda-pinned.mode-feed .main-content-wrapper,
  body.agenda-pinned.mode-announcements .main-content-wrapper,
  body.agenda-pinned.mode-home .main-content-wrapper {
    padding-left: var(--agenda-gap); padding-right: var(--agenda-gap); box-sizing: border-box;
  }
}
@media (max-width: 1023px) { body.agenda-pinned { padding-right: 0; } }
.agenda-header {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-height); box-sizing: border-box; padding: 0 16px 0 20px;
  background: #1c2b3f; color: #fff; flex-shrink: 0; /* height + bg match .site-header */
}
.agenda-header-left { min-width: 0; }
.agenda-header-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.agenda-title { font-size: 18px; font-weight: 800; }
.agenda-date { font-size: 12px; font-weight: 600; opacity: 0.8; margin-top: 2px; cursor: pointer; }
.agenda-date:hover { opacity: 1; text-decoration: underline; }
.agenda-nav-btn {
  background: rgba(255, 255, 255, 0.12); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 8px; font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.agenda-nav-btn:hover { background: rgba(255, 255, 255, 0.26); }
.agenda-today-btn {
  background: rgba(255, 255, 255, 0.12); border: none; color: #fff; height: 28px; padding: 0 12px;
  border-radius: 8px; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 0.4px; cursor: pointer; transition: background 0.15s; margin-right: 2px;
}
.agenda-today-btn:hover { background: rgba(255, 255, 255, 0.26); }
.agenda-pin-btn.active { background: var(--accent-color, #F99338); color: #fff; }
.agenda-pin-btn.active:hover { background: var(--accent-hover, #e07b20); }
.agenda-pin-btn { display: none; } /* desktop-only (shown ≥1024px below) */
@media (min-width: 1024px) { .agenda-pin-btn { display: flex; } }
.agenda-close {
  background: none; border: none; color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; opacity: 0.85; padding: 0 4px; margin-left: 2px;
}
.agenda-close:hover { opacity: 1; }
.agenda-allday {
  padding: 10px 16px; border-bottom: 1px solid rgba(26, 43, 91, 0.08);
  display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; background: #fff;
}
.agenda-allday-pill {
  background: rgba(35, 84, 179, 0.10); color: var(--secondary-color, #2354b3);
  border: 1px solid rgba(35, 84, 179, 0.18); border-radius: 14px;
  padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-allday-pill:hover { background: rgba(35, 84, 179, 0.18); }
.agenda-allday-pill.src-org,
.agenda-allday-pill.src-holiday,
.agenda-allday-pill.src-keydate { background: #eef1f6; color: #64748b; border-color: #d7dce6; }
.agenda-allday-pill.src-keydate { border-color: rgba(249, 147, 56, 0.4); }
.agenda-body { flex: 1; overflow-y: auto; padding: 18px 16px 40px; }
.agenda-scale { position: relative; }
.agenda-hour { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(26, 43, 91, 0.08); }
.agenda-hour-label {
  position: absolute; top: -7px; left: 0; width: 46px; text-align: right;
  font-size: 10px; font-weight: 700; color: #94a3b8; background: #f7f9fc; padding-right: 4px;
}
.agenda-event {
  position: absolute; box-sizing: border-box; border-radius: 8px; overflow: hidden;
  background: #fff; border-left: 3px solid var(--secondary-color, #2354b3);
  box-shadow: 0 1px 4px rgba(13, 20, 48, 0.12); padding: 4px 8px; cursor: pointer;
  transition: box-shadow 0.15s;
}
.agenda-event:hover { box-shadow: 0 3px 10px rgba(13, 20, 48, 0.22); z-index: 5; }
.agenda-event.past { opacity: 0.5; }
.agenda-event.current { border-left-color: var(--accent-color, #F99338); background: #fff8f0; }
/* Shared org / US-CA / holiday events sit slightly behind and muted vs the user's own */
.agenda-event.src-user { z-index: 2; }
.agenda-event.src-org,
.agenda-event.src-holiday,
.agenda-event.src-keydate { background: #eef1f6; border-left-color: #b6c0cf; box-shadow: none; z-index: 1; }
.agenda-event.src-keydate { border-left-color: rgba(249, 147, 56, 0.55); }
.agenda-event.src-org .agenda-event-title,
.agenda-event.src-holiday .agenda-event-title,
.agenda-event.src-keydate .agenda-event-title { color: #64748b; font-weight: 700; }
.agenda-event.src-org .agenda-event-time,
.agenda-event.src-holiday .agenda-event-time,
.agenda-event.src-keydate .agenda-event-time { color: #94a3b8; }
.agenda-event-time { font-size: 10px; font-weight: 700; color: #64748b; }
.agenda-event-title {
  font-size: 12px; font-weight: 700; color: var(--primary-color, var(--primary-color));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agenda-event-join-dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: #34a853;
}
.agenda-now-line { position: absolute; left: 46px; right: 0; height: 0; border-top: 2px solid #ea4335; z-index: 6; }
.agenda-now-dot { position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #ea4335; }
.agenda-empty { position: absolute; left: 0; right: 0; text-align: center; color: #94a3b8; font-size: 13px; font-weight: 700; }

/* ── Event-detail modal ─────────────────────────────────────────────────── */
.agenda-event-modal {
  display: none; position: fixed; inset: 0; z-index: 20005;
  background: rgba(13, 20, 48, 0.6); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s;
  font-family: "Montserrat", sans-serif; padding: 20px;
}
.agenda-event-modal.open { display: flex; opacity: 1; }
.agenda-event-content {
  position: relative; background: #fff; border-radius: 18px; width: 460px; max-width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 26px 26px 24px;
  box-shadow: 0 20px 60px rgba(13, 20, 48, 0.3);
  transform: scale(0.94); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.agenda-event-modal.open .agenda-event-content { transform: scale(1); }
.agenda-event-close {
  position: absolute; top: 14px; right: 16px; background: none; border: none;
  font-size: 22px; color: #94a3b8; cursor: pointer; line-height: 1;
}
.aem-title { font-size: 19px; font-weight: 800; color: var(--primary-color, var(--primary-color)); margin: 0 30px 12px 0; }
.aem-meta { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.aem-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #334155; font-weight: 600; }
.aem-ico { flex-shrink: 0; }
.aem-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.aem-btn {
  padding: 9px 18px; border-radius: 22px; font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer; border: none; font-family: inherit;
}
.aem-btn-join { background: #34a853; color: #fff; }
.aem-btn-join:hover { background: #2c9247; }
.aem-btn-cal { background: rgba(35, 84, 179, 0.10); color: var(--secondary-color, #2354b3); }
.aem-btn-cal:hover { background: rgba(35, 84, 179, 0.18); }
.aem-rsvp { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(26, 43, 91, 0.08); }
.aem-rsvp-label { font-size: 13px; font-weight: 700; color: #334155; }
.aem-rsvp-btns { display: flex; gap: 6px; }
.rsvp-btn {
  padding: 6px 16px; border-radius: 18px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: #fff; border: 1.5px solid #cbd5e1; color: #475569; font-family: inherit; transition: all 0.15s;
}
.rsvp-btn:hover { border-color: var(--secondary-color, #2354b3); color: var(--secondary-color, #2354b3); }
.rsvp-btn.active { background: var(--secondary-color, #2354b3); border-color: var(--secondary-color, #2354b3); color: #fff; }
.rsvp-btn:disabled { opacity: 0.6; cursor: default; }
.aem-desc {
  margin-top: 18px; padding: 16px 0 6px; border-top: 1px solid rgba(26, 43, 91, 0.08);
  font-size: 13px; line-height: 1.6; color: #334155; font-weight: 600;
  max-height: 220px; overflow-y: auto; word-break: break-word;
}
.aem-desc a { color: var(--secondary-color, #2354b3); word-break: break-all; }

/* Guest list */
.aem-guests { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(26, 43, 91, 0.08); }
.aem-guests-head { font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.aem-guests-list { max-height: 92px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.aem-guest { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.aem-guest .guest-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.aem-guest .guest-name { flex: 1; min-width: 0; color: #334155; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aem-guest .guest-org { color: #64748b; font-weight: 600; }
.aem-guest .guest-status { font-size: 11px; font-weight: 700; flex-shrink: 0; }
.guest-dot.st-yes   { background: #34a853; } .guest-status.st-yes   { color: #15803d; }
.guest-dot.st-no    { background: #ea4335; } .guest-status.st-no    { color: #b91c1c; }
.guest-dot.st-maybe { background: #f9ab00; } .guest-status.st-maybe { color: #a16207; }
.guest-dot.st-none  { background: #cbd5e1; } .guest-status.st-none  { color: #64748b; }

/* ── Now / Next block (The Latest) ──────────────────────────────────────── */
.now-next-block {
  margin: 0 0 18px; display: flex; flex-direction: row; gap: 12px; align-items: stretch;
  font-family: "Montserrat", sans-serif;
}
.nn-row {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: 12px; padding: 12px 16px; box-shadow: 0 2px 10px rgba(13, 20, 48, 0.08);
  border-left: 4px solid var(--secondary-color, #2354b3);
}
.nn-row.nn-now { border-left-color: var(--accent-color, #F99338); background: #fff8f0; }
.nn-label {
  flex-shrink: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--secondary-color, #2354b3); width: 42px;
}
.nn-row.nn-now .nn-label { color: var(--accent-color, #F99338); }
.nn-events { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nn-event { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nn-conflict .nn-event + .nn-event { border-top: 1px solid rgba(26, 43, 91, 0.10); padding-top: 8px; }
.nn-main { flex: 1; min-width: 0; }
.nn-title { font-size: 14px; font-weight: 800; color: var(--primary-color, var(--primary-color)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-time { font-size: 12px; font-weight: 600; color: #64748b; margin-top: 1px; }
.nn-actions { display: flex; gap: 8px; flex-shrink: 0; }
.nn-btn { padding: 7px 15px; border-radius: 18px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; text-decoration: none; font-family: inherit; }
.nn-btn-join { background: #34a853; color: #fff; }
.nn-btn-join:hover { background: #2c9247; }
.nn-btn-detail { background: rgba(35, 84, 179, 0.10); color: var(--secondary-color, #2354b3); }
.nn-btn-detail:hover { background: rgba(35, 84, 179, 0.18); }

/* ── Full-width meeting toast (bottom) ──────────────────────────────────── */
.meeting-toast {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  background: var(--primary-color, var(--primary-color)); color: #fff; z-index: 20003;
  box-shadow: 0 -6px 24px rgba(13, 20, 48, 0.28); font-family: "Montserrat", sans-serif;
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.meeting-toast.show { transform: translateY(0); }
.meeting-toast-icon { flex-shrink: 0; display: flex; color: var(--accent-color, #F99338); }
.meeting-toast-info { flex: 1; min-width: 0; }
.meeting-toast-title { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-toast-time { font-size: 12px; font-weight: 600; opacity: 0.85; margin-top: 1px; }
.meeting-toast-actions { display: flex; gap: 10px; flex-shrink: 0; }
.mt-btn { padding: 9px 20px; border-radius: 22px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; text-decoration: none; font-family: inherit; }
.mt-btn-join { background: #34a853; color: #fff; }
.mt-btn-join:hover { background: #2c9247; }
.mt-btn-detail { background: rgba(255, 255, 255, 0.15); color: #fff; }
.mt-btn-detail:hover { background: rgba(255, 255, 255, 0.28); }
.meeting-toast-close { flex-shrink: 0; background: none; border: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; opacity: 0.7; padding: 0 4px; }
.meeting-toast-close:hover { opacity: 1; }

@media (max-width: 640px) {
  .meeting-toast { flex-wrap: wrap; }
  .now-next-block { flex-direction: column; }
  .nn-event { flex-wrap: wrap; }
  .nn-actions { width: 100%; justify-content: flex-end; }
}

/* ── Leaderboard recognition badges (author-column accolades) ───────────────── */
.lb-accolade-hero img.author-avatar-large,
.lb-accolade-hero .author-avatar-large {
  box-shadow: 0 0 0 3px #FFC63D, 0 2px 10px rgba(180, 130, 0, 0.35) !important;
}
.lb-accolade-badge {
  position: absolute;
  z-index: 11;
  bottom: calc(14.65% - 12px);
  right: calc(14.65% - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  background: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  cursor: default;
}
.lb-accolade-badge-hero  { box-shadow: 0 0 0 2px #FFC63D, 0 2px 6px rgba(0, 0, 0, 0.28); }
.lb-accolade-badge-gold   { box-shadow: 0 0 0 2px #FFC63D, 0 2px 6px rgba(0, 0, 0, 0.28); }
.lb-accolade-badge-silver { box-shadow: 0 0 0 2px #C0C7D1, 0 2px 6px rgba(0, 0, 0, 0.28); }
.lb-accolade-badge-bronze { box-shadow: 0 0 0 2px #D99A5B, 0 2px 6px rgba(0, 0, 0, 0.28); }
/* Small avatars (replies etc.) never get a badge — decorator only targets .avatar-wrap-large */

/* ── Profile card: trophy shelf (celebratory trophy case) ──────────────────── */
.profile-trophy-card { background: linear-gradient(135deg, rgba(255, 198, 61, 0.09) 0%, rgba(35, 84, 179, 0.05) 100%); border: 1px solid rgba(255, 198, 61, 0.30); }
.trophy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trophy-head .profile-card-title { margin-bottom: 0; }
.trophy-case { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

/* Herd Hero marquee — the headline brag (echoes the Hall of Fame gold banner). */
.trophy-marquee {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff 62%);
  border: 1px solid rgba(255, 198, 61, 0.55);
  border-left: 5px solid #FFC63D;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(180, 130, 0, 0.12);
}
.trophy-marquee-crown {
  flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: radial-gradient(circle at 50% 35%, #fff3cf 0%, #ffe08a 68%, #f5c542 100%);
  box-shadow: 0 3px 10px rgba(180, 130, 0, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.trophy-marquee-body { min-width: 0; flex: 1; }
.trophy-marquee-cap { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #9a6b00; }
.trophy-marquee-big { font-family: "Montserrat", sans-serif; font-size: 19px; font-weight: 800; color: var(--primary-color); line-height: 1.15; margin-top: 1px; }
.trophy-marquee-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; font-weight: 600; color: #6b7280; margin-top: 3px; }
.trophy-flame { color: #c2410c; font-weight: 800; }
.trophy-dot { color: #cbd5e1; }
.trophy-reigning {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: #7a5a00; background: linear-gradient(135deg, #ffe9a8, #ffd970);
  padding: 2px 9px; border-radius: 20px; margin-bottom: 6px;
  box-shadow: 0 1px 3px rgba(180, 130, 0, 0.25);
}

/* Token = one win, revealing its date on hover. Count of tokens = number of wins. */
.trophy-tokens { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.trophy-token { display: inline-block; font-size: 20px; line-height: 1.15; cursor: default; transition: transform 0.12s ease; }
.trophy-token:hover { transform: translateY(-3px); }
.trophy-marquee .trophy-token { font-size: 22px; }

/* One card per reaction-award category, best-first. One medal per win. */
.trophy-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trophy-cat { background: #fff; border: 1px solid #e9edf4; border-radius: 12px; padding: 12px 13px; }
.trophy-cat-head { display: flex; align-items: center; gap: 8px; }
.trophy-cat-emoji { font-size: 18px; }
.trophy-cat-name { font-size: 13px; font-weight: 700; color: var(--primary-color); flex: 1; min-width: 0; }
.trophy-cat-count { font-size: 15px; font-weight: 800; color: #b7791f; }
.trophy-cat .trophy-tokens { gap: 5px; }
.trophy-cat .trophy-token { font-size: 19px; }
@media (max-width: 560px) { .trophy-cats { grid-template-columns: 1fr; } }

/* Hover tooltip: a single body-level element (JS-positioned + clamped) so it is
   never clipped by the modal's overflow. .pc-tip is just the hover hook. */
.pc-tooltip {
  position: fixed;
  z-index: 30000;
  background: var(--primary-color);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(13, 20, 48, 0.28);
  max-width: 240px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.pc-tooltip.show { opacity: 1; transform: translateY(0); }

/* Gmail Calendar Invite RSVP Card */
.gmail-invite-rsvp-card {
  background: #ffffff;
  border: 1px solid rgba(26, 43, 91, 0.08);
  border-radius: 12px;
  /* Match .email-item's box: full pane width (no side margin) and 20px inner
     padding, so the card lines up with the message cards below it. */
  padding: 20px;
  margin: 0 0 16px 0;
  box-shadow: 0 4px 15px rgba(13, 20, 48, 0.04);
}
/* Amber notice shown when the resolved occurrence's date differs from the email's
   (e.g. a past series occurrence falling through to the next upcoming instance).
   Spans both columns of the has-guests grid so it sits full-width at the top. */
.gmail-invite-rsvp-card .invite-series-notice {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: #fff8e1;
  border: 1px solid #f5d78e;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #78350f;
}
.gmail-invite-rsvp-card .invite-series-notice svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Two-column layout: event details on the left, guest list (~45% of the card)
   on the right. Stacking is driven by the reading pane's own width (see the
   @container query below), not the viewport, so a narrow pane on a wide screen
   still collapses correctly. */
.gmail-invite-rsvp-card.has-guests {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 45%);
  gap: 32px;
  align-items: start;
}
.gmail-invite-rsvp-card .invite-side {
  padding-left: 28px;
  border-left: 1px solid rgba(26, 43, 91, 0.08);
}
@container msgpane (max-width: 700px) {
  .gmail-invite-rsvp-card.has-guests {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .gmail-invite-rsvp-card .invite-side {
    margin-top: 14px;
    padding-top: 12px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(26, 43, 91, 0.08);
  }
}
.gmail-invite-rsvp-card.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  padding: 24px;
}
.gmail-invite-rsvp-card .invite-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
}
.gmail-invite-rsvp-card .invite-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.gmail-invite-rsvp-card .invite-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
}
.gmail-invite-rsvp-card .invite-meta-item svg {
  width: 16px;
  height: 16px;
  color: #64748b;
  flex-shrink: 0;
}
.gmail-invite-rsvp-card .invite-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gmail-invite-rsvp-card .invite-btn {
  padding: 9px 18px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gmail-invite-rsvp-card .invite-btn-join {
  background: #34a853;
  color: #fff;
  transition: background 0.15s;
}
.gmail-invite-rsvp-card .invite-btn-join:hover {
  background: #2c9247;
}
.gmail-invite-rsvp-card .invite-btn-cal {
  background: rgba(35, 84, 179, 0.10);
  color: var(--secondary-color, #2354b3);
  transition: background 0.15s;
}
.gmail-invite-rsvp-card .invite-btn-cal:hover {
  background: rgba(35, 84, 179, 0.18);
}
.gmail-invite-rsvp-card .invite-rsvp-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid rgba(26, 43, 91, 0.08);
}
.gmail-invite-rsvp-card .invite-rsvp-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gmail-invite-rsvp-card .invite-secondary-actions {
  display: flex;
  gap: 18px;
}
.gmail-invite-rsvp-card .invite-link-btn {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--secondary-color, #2354b3);
}
.gmail-invite-rsvp-card .invite-link-btn:hover {
  text-decoration: underline;
}
.gmail-invite-rsvp-card .invite-note-box {
  display: flex;
}
.gmail-invite-rsvp-card .invite-note-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  font-family: inherit;
  font-size: 13px;
  color: #334155;
  background: #fff;
}
.gmail-invite-rsvp-card .invite-note-input:focus {
  outline: none;
  border-color: var(--secondary-color, #2354b3);
}
.gmail-invite-rsvp-card .invite-note-box {
  flex-direction: column;
  gap: 8px;
}
.gmail-invite-rsvp-card .invite-note-actions {
  display: flex;
  justify-content: flex-end;
}
.gmail-invite-rsvp-card .invite-note-send {
  padding: 6px 16px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  background: var(--secondary-color, #2354b3);
  border: 1.5px solid var(--secondary-color, #2354b3);
  color: #fff;
  transition: opacity 0.15s;
}
.gmail-invite-rsvp-card .invite-note-send:hover {
  opacity: 0.9;
}
.gmail-invite-rsvp-card .invite-note-send:disabled {
  opacity: 0.6;
  cursor: default;
}
.gmail-invite-rsvp-card .invite-rsvp-label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  font-family: 'Montserrat', sans-serif;
}
.gmail-invite-rsvp-card .invite-rsvp-btns {
  display: flex;
  gap: 6px;
}
.gmail-invite-rsvp-card .invite-rsvp-btn {
  padding: 6px 16px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  font-family: inherit;
  transition: all 0.15s;
}
.gmail-invite-rsvp-card .invite-rsvp-btn:hover {
  border-color: var(--secondary-color, #2354b3);
  color: var(--secondary-color, #2354b3);
}
.gmail-invite-rsvp-card .invite-rsvp-btn.active {
  background: var(--secondary-color, #2354b3);
  border-color: var(--secondary-color, #2354b3);
  color: #fff;
}
.gmail-invite-rsvp-card .invite-rsvp-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.gmail-invite-rsvp-card .invite-guests {
  /* Divider is provided by .invite-side (left border when wide, top when stacked). */
  margin-top: 0;
}
.gmail-invite-rsvp-card .invite-guests-head {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  font-family: 'Montserrat', sans-serif;
}
.gmail-invite-rsvp-card .invite-guests-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Gutter so guest rows don't butt up against the scrollbar when the list overflows. */
  padding-right: 8px;
}
.gmail-invite-rsvp-card .invite-guest {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.gmail-invite-rsvp-card .invite-guest .guest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gmail-invite-rsvp-card .invite-guest .guest-name {
  flex: 1;
  min-width: 0;
  color: #334155;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gmail-invite-rsvp-card .invite-guest .guest-org {
  color: #64748b;
  font-weight: 600;
}
.gmail-invite-rsvp-card .invite-guest .guest-status {
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}