:root {
  --accent: #ff6a13;
  --accent-bright: #ff8c3d;
  --accent-dim: #b34e10;
  --black: #0b0b0c;
  --black-soft: #161618;
  --black-card: #1e1e21;
  --white: #f5f5f4;
  --grey: #9a9a9d;
  --danger: #e5484d;
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--white);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--black-soft);
  border-bottom: 2px solid var(--accent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--white);
  cursor: pointer;
}

.brand .dot { color: var(--accent); }

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

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: cover;
}

main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: #14140f; }
.btn-primary:hover { background: var(--accent-bright); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
}
.btn-outline:hover { background: rgba(255, 106, 19, 0.1); }

.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { filter: brightness(1.1); }

.btn-ghost { background: transparent; color: var(--grey); }
.btn-ghost:hover { color: var(--white); }

.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Landing / hero */
.hero {
  text-align: center;
  padding: 80px 20px 40px;
}
.hero h1 {
  font-size: 48px;
  margin: 0 0 12px;
  font-weight: 900;
}
.hero h1 .accent { color: var(--accent); }
.hero p {
  color: var(--grey);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 32px;
}

.card {
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  border-radius: var(--radius);
  padding: 22px;
}

/* The Settings tab's cards (join code, group name, per-feature toggles,
   etc.) flow into two newspaper-style columns on a normal-width screen
   instead of one long single-file column, so an admin sees more of the
   page at once and scrolls a lot less to reach the cards further down.
   This deliberately uses CSS multi-column layout (column-count) rather
   than CSS grid: a strict 2-column GRID sizes every row to its tallest
   card, so a short card (like "Club Members/Alumni", just one line of
   hint text) leaves a big dead gap underneath it whenever the card next
   to it happens to be taller (like "Join passcode", with its code display
   and two buttons). Multi-column layout instead packs cards tightly one
   under another within each column, in order, and only starts a new
   column once the current one is full height-wise, the same way a
   newspaper or Pinterest-style layout closes those gaps automatically no
   matter how each individual card's height happens to vary. Falls back to
   a single column on a narrow/mobile screen, same 600px breakpoint used
   everywhere else in this file. */
.settings-grid {
  column-count: 2;
  column-gap: 18px;
  max-width: 1080px;
  margin-top: 18px;
}
.settings-grid .card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .settings-grid { column-count: 1; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.group-card {
  position: relative;
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.group-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.group-card h3 { margin: 0 24px 6px 0; font-size: 18px; }
.group-card .meta { color: var(--grey); font-size: 13px; }
.group-card .host-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  padding: 2px 8px;
}
.group-card .pin-badge { font-size: 15px; }
.group-card-bio {
  color: var(--grey);
  font-size: 13px;
  line-height: 1.4;
  margin: 4px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.group-bio {
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 16px 0 4px;
  color: var(--white);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.group-card .kebab-btn {
  position: absolute;
  top: 10px;
  right: 8px;
  background: none;
  border: none;
  color: var(--grey);
  font-size: 20px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
}
.group-card .kebab-btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.section-header h2 { margin: 0; font-size: 22px; }

.actions-row { display: flex; gap: 12px; margin: 22px 0; flex-wrap: wrap; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 250;
  padding: 20px;
}
.modal {
  background: var(--black-soft);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 26px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 { margin-top: 0; }
.modal-close {
  float: right;
  background: none; border: none; color: var(--grey);
  font-size: 20px; cursor: pointer;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--black-card);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--white);
  font-size: 15px;
  font-family: inherit;
}
.field select { cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--black-card);
  border: 1px solid var(--accent-dim);
  color: var(--accent-bright);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 6px 4px 11px;
  border-radius: 20px;
}
.chip button {
  background: none;
  border: none;
  color: var(--accent-bright);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
}
.chip button:hover { color: var(--white); }

/* "Search bar" suggestions dropdown for the shared Major(s) field —
   suggests majors drawn from the presets of groups the person is already
   in as they type (see openProfileModal's majorSuggestionPool). */
.suggestions-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  margin-top: 4px;
  background: var(--black-card);
  border: 1px solid var(--accent-dim);
  border-radius: 10px;
  overflow-y: auto;
  max-height: 190px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.suggestion-item {
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--white);
  cursor: pointer;
}
.suggestion-item:hover {
  background: var(--black-soft);
  color: var(--accent-bright);
}

/* Group theme (accent color) picker, Settings tab */
.swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.accent-swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.accent-swatch:hover { transform: scale(1.08); }
.accent-swatch.selected {
  border-color: var(--white);
  box-shadow: 0 0 0 2px var(--black-card);
}
.accent-swatch.selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14140f;
  font-weight: 900;
  font-size: 17px;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.warning-box {
  background: rgba(255, 106, 19, 0.08);
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--accent-bright);
  margin-bottom: 18px;
  line-height: 1.5;
}

.code-display {
  font-family: "Courier New", monospace;
  font-size: 28px;
  letter-spacing: 4px;
  font-weight: 800;
  color: var(--accent);
  text-align: center;
  padding: 16px;
  background: var(--black-card);
  border-radius: 8px;
  margin: 14px 0;
  border: 1.5px dashed var(--accent-dim);
}

.email-display {
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  padding: 14px 16px;
  background: var(--black-card);
  border-radius: 8px;
  margin: 14px 0;
  border: 1.5px dashed var(--accent-dim);
  word-break: break-all;
}

.error-text { color: var(--danger); font-size: 13.5px; margin-top: 8px; }
.hint-text { color: var(--grey); font-size: 13px; margin-top: 6px; }

/* Search / filter bar */
.search-filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}
.search-filter-bar .search-input {
  flex: 1 1 220px;
  min-width: 180px;
  background: var(--black-card);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--white);
  font-size: 15px;
}
.search-filter-bar .search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.search-filter-bar select {
  background: var(--black-card);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
}
.search-filter-bar select:focus {
  outline: none;
  border-color: var(--accent);
}
/* Grad year multi-select filter (choose up to 4 at once, inside the search-filter-bar) */
.multiselect {
  position: relative;
}
.multiselect-toggle {
  background: var(--black-card);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.multiselect-toggle:hover, .multiselect-toggle:focus {
  outline: none;
  border-color: var(--accent);
}
.multiselect-toggle.has-selection {
  border-color: var(--accent);
  color: var(--accent-bright);
}
.multiselect-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--black-card);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.multiselect-hint {
  font-size: 12px;
  color: var(--grey);
  padding: 2px 6px 8px;
}
.multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--white);
}
.multiselect-option:hover {
  background: rgba(255, 106, 19, 0.1);
}
.multiselect-option input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.multiselect-option input[type="checkbox"]:disabled {
  cursor: not-allowed;
}
.multiselect-option:has(input:disabled) {
  color: var(--grey);
  cursor: not-allowed;
}

.sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.sort-bar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
}
.sort-bar select {
  background: var(--black-card);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
}
.sort-bar select:focus {
  outline: none;
  border-color: var(--accent);
}
#memberCountText { margin-bottom: 4px; margin-top: 10px; }

/* Member directory */
.member-card {
  display: flex;
  gap: 14px;
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  border-radius: var(--radius);
  padding: 16px;
  align-items: flex-start;
}
.member-card-name-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px 8px;
}
/* The name (plus its inline OWNER/ADMIN/YOU badges) gets a comfortable
   150px of its own before it has to share room with the status badge. A
   short name (or one with no admin badge attached) easily clears that and
   stays on the same line as the badge, same as before. Once the name (plus
   whatever's tacked onto it) needs more room than that, flex-wrap drops
   the badge down to its own line below instead of the two ever
   overlapping, and the name is free to wrap onto a second or third line of
   its own right there, so a long name always displays in full, never
   truncated with an ellipsis. */
.member-card-name-row h4 {
  flex: 1 1 150px;
  min-width: 0;
}
.status-corner-badge {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-corner-badge.status-student {
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.1);
}
.status-corner-badge.status-alumni {
  color: var(--accent-bright);
  border: 1px solid var(--accent-dim);
  background: rgba(255, 106, 19, 0.08);
}
.member-card img.headshot {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  flex-shrink: 0;
  background: #2a2a2d;
}
.member-card .placeholder-headshot {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent-dim);
  flex-shrink: 0;
  background: #2a2a2d;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--grey);
}
.member-card .info { flex: 1; min-width: 0; }
.member-card .info h4 { margin: 0 0 2px; font-size: 16px; line-height: 1.3; }
.member-card .info .sub { color: var(--grey); font-size: 13px; margin-bottom: 6px; }
.member-role {
  color: var(--grey);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.35;
}
.info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.info-tags span {
  font-size: 11.5px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #333336;
  color: var(--grey);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}
.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.contact-row a.contact-pill,
.contact-row button.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: var(--accent-bright);
  border: 1px solid var(--accent-dim);
  background: rgba(255, 106, 19, 0.07);
  padding: 4px 11px;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.contact-row a.contact-pill:hover,
.contact-row button.contact-pill:hover { background: rgba(255, 106, 19, 0.16); }
.member-card .info a.email,
.member-card .info button.email {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--accent-bright);
  font-size: 13px;
  text-decoration: none;
  word-break: break-all;
  cursor: pointer;
  text-align: left;
}
.member-card .info a.email:hover,
.member-card .info button.email:hover { text-decoration: underline; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.member-card .row-actions { margin-top: 10px; }
.you-badge {
  font-size: 10px; font-weight: 700; color: var(--black);
  background: var(--accent); border-radius: 5px; padding: 2px 6px;
  margin-left: 6px; vertical-align: middle;
}
.admin-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-bright);
  border: 1px solid var(--accent-dim);
  background: rgba(255, 106, 19, 0.08);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
}

.group-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1.5px solid #2a2a2d;
  margin: 18px 0 4px;
}
.group-tabs .tab-btn {
  background: none;
  border: none;
  color: var(--grey);
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.group-tabs .tab-btn:hover { color: var(--white); }
.group-tabs .tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.speaker-card .info .speaker-notes {
  color: var(--white);
  font-size: 13.5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2a2a2d;
  white-space: pre-wrap;
  line-height: 1.5;
}
.group-header .code-pill {
  font-family: monospace;
  background: var(--black-card);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 2px;
}

.headshot-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.headshot-upload .preview {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--black-card);
  border: 2px solid var(--accent);
}

.empty-state {
  text-align: center;
  color: var(--grey);
  padding: 50px 20px;
}

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--black-card);
  border: 1px solid var(--accent);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 300;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.toast.error { border-color: var(--danger); color: #ffbdbe; }

/* Full-screen person detail view */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 200;
  overflow-y: auto;
  animation: overlayFadeIn 0.15s ease;
}
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
.fullscreen-topbar {
  position: sticky;
  top: 0;
  padding: 14px 20px;
  background: var(--black-soft);
  border-bottom: 2px solid var(--accent);
  z-index: 1;
}
.fullscreen-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px 70px;
  text-align: center;
}
.fullscreen-content .fullscreen-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--accent-dim);
  background: #2a2a2d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 38px;
  color: var(--grey);
  margin: 0 auto 20px;
}
.fullscreen-content h2 { margin: 0 0 6px; font-size: 26px; }
.fullscreen-content .member-role { font-size: 15px; margin-bottom: 4px; }
.fullscreen-content .info-tags,
.fullscreen-content .contact-row,
.fullscreen-content .row-actions {
  justify-content: center;
  margin-top: 16px;
}
.fullscreen-content .info-tags span { font-size: 13px; padding: 4px 12px; }
.fullscreen-content .speaker-notes {
  margin-top: 22px;
  padding: 16px;
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  border-radius: var(--radius);
}

a { color: var(--accent-bright); }

.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tag-strip {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.tag-strip span {
  font-size: 12px;
  background: var(--black-card);
  border: 1px solid #333336;
  color: var(--grey);
  padding: 3px 9px;
  border-radius: 20px;
}

footer.foot {
  text-align: center;
  padding: 20px;
  color: #55555a;
  font-size: 12px;
}

/* ---------- Group Assistant tab ---------- */
.assistant-tab-panel {
  max-width: 640px;
  margin-top: 18px;
}
.assistant-messages {
  max-height: 480px;
  overflow-y: auto;
  padding: 14px;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--black-soft);
  border: 1px solid #2a2a2d;
  border-radius: var(--radius);
}

/* Clicking "✨ Assistant" opens it as a full-screen overlay (like a member
   or speaker detail view) instead of an inline tab, specifically so the
   chat gets the whole viewport instead of running taller than the page and
   forcing the person to scroll the outer page around to reach the input
   box. The overlay itself stops scrolling as a whole; only the message
   list scrolls, so the title, hint text, suggestion chips, and input row
   all stay pinned on screen the entire time. */
.fullscreen-overlay.assistant-overlay {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fullscreen-overlay.assistant-overlay .fullscreen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 24px;
  text-align: left;
}
.fullscreen-overlay.assistant-overlay .assistant-tab-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 0;
  max-width: none;
}
.fullscreen-overlay.assistant-overlay .assistant-messages {
  flex: 1;
  min-height: 0;
  max-height: none;
}
@media (max-width: 600px) {
  .fullscreen-overlay.assistant-overlay .fullscreen-content { padding: 14px 16px; }
}

/* Clicking "📅 Calendar" opens it as a full-screen overlay too, same
   reasoning as the Assistant above: a month grid needs real width and
   height, more than comfortably fits inline without forcing the whole
   page to scroll around it. Unlike the assistant's chat log, a month grid
   has a fixed number of rows rather than open-ended content, so instead of
   just capping height and scrolling, the grid cells are also sized down a
   notch ("zoomed out") so a typical month fits the viewport with nothing
   cut off. The overlay itself still doesn't scroll as a whole; only the
   grid does, as a fallback on short screens, so the heading, toolbar, and
   helper text underneath all stay pinned in view the whole time, exactly
   like the assistant's title/chips/input row do. */
.fullscreen-overlay.calendar-overlay {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fullscreen-overlay.calendar-overlay .fullscreen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px 14px;
  text-align: left;
}
.fullscreen-overlay.calendar-overlay .fullscreen-content h3 {
  flex-shrink: 0;
  margin: 0 0 2px;
}
.fullscreen-overlay.calendar-overlay .calendar-section-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.fullscreen-overlay.calendar-overlay .calendar-toolbar {
  flex-shrink: 0;
  margin: 10px 0 10px;
}
.fullscreen-overlay.calendar-overlay .calendar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.fullscreen-overlay.calendar-overlay .calendar-grid {
  grid-template-columns: repeat(7, minmax(94px, 1fr));
}
.fullscreen-overlay.calendar-overlay .calendar-weekday {
  padding: 6px 4px;
  font-size: 11px;
}
.fullscreen-overlay.calendar-overlay .calendar-day {
  min-height: 76px;
  padding: 4px 5px 6px;
}
.fullscreen-overlay.calendar-overlay .calendar-grid.week-mode .calendar-day {
  min-height: 148px;
}
.fullscreen-overlay.calendar-overlay .calendar-day-number {
  width: 20px;
  height: 20px;
  font-size: 12px;
}
.fullscreen-overlay.calendar-overlay .calendar-event-chip {
  font-size: 11px;
  padding: 2px 6px;
}
.fullscreen-overlay.calendar-overlay .calendar-month-label {
  font-size: 17px;
}
.fullscreen-overlay.calendar-overlay .hint-text {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .fullscreen-overlay.calendar-overlay .fullscreen-content { padding: 12px 16px 12px; }
  .fullscreen-overlay.calendar-overlay .calendar-day { min-height: 64px; }
}
.assistant-intro {
  color: var(--grey);
  font-size: 13px;
  line-height: 1.5;
}
.assistant-msg {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 10px;
  max-width: 92%;
  word-break: break-word;
}
.assistant-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--black);
  font-weight: 600;
}
.assistant-msg-bot {
  align-self: stretch;
  max-width: 100%;
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  color: var(--white);
}
/* Scoped to just the bot's own text (not its nested member-card results or
   follow-up picker), so a multi-line reply like a drafted message keeps its
   intentional line breaks and blank-line paragraph spacing without
   affecting the layout of anything else in the bubble. */
.assistant-msg-text {
  white-space: pre-line;
}
.assistant-msg-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grey);
}
.assistant-result { margin-top: 12px; }
.assistant-result-reason {
  font-size: 11.5px;
  color: var(--accent-bright);
  margin-bottom: 6px;
  font-weight: 700;
}
.assistant-msg-bot .member-card { padding: 12px; gap: 10px; }

.assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.assistant-chip {
  font-size: 11.5px;
  font-family: inherit;
  background: rgba(255, 106, 19, 0.07);
  border: 1px solid var(--accent-dim);
  color: var(--accent-bright);
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.assistant-chip:hover { background: rgba(255, 106, 19, 0.16); }

.assistant-input-row {
  display: flex;
  gap: 8px;
}
.assistant-input-row input {
  flex: 1;
  min-width: 0;
  background: var(--black-soft);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
}
.assistant-input-row input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---------- Group Thread tab ---------- */
.chat-section { max-width: 640px; margin-top: 18px; }
.chat-pinned-wrap {
  background: rgba(255, 106, 19, 0.06);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-pinned-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-bright);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chat-pinned-wrap .chat-msg, .chat-pinned-wrap .dm-msg { max-width: 100%; align-self: stretch; }
.chat-messages {
  max-height: 480px;
  overflow-y: auto;
  padding: 14px;
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--black-soft);
  border: 1px solid #2a2a2d;
  border-radius: var(--radius);
}
.chat-msg {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 10px;
  max-width: 92%;
  word-break: break-word;
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  align-self: flex-start;
}
.chat-msg-mine {
  align-self: flex-end;
  background: var(--black-card);
  color: var(--white);
  border: 1px solid var(--accent);
}
.chat-msg-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.chat-msg-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-dim);
  object-fit: cover;
  flex-shrink: 0;
  background: #2a2a2d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9px;
  color: var(--grey);
}
.chat-msg-sender { font-weight: 700; font-size: 12.5px; }
.chat-msg-time { font-size: 11px; opacity: 0.7; }
.chat-msg-pinned-badge { font-size: 11px; }
.chat-msg-text { white-space: pre-line; }

/* ---------- per-message "..." menu (Pin/Unpin, Delete) ---------- */
.msg-menu { position: relative; margin-left: auto; }
.msg-menu-btn {
  background: transparent;
  border: none;
  color: var(--grey);
  font-size: 16px;
  line-height: 1;
  padding: 2px 7px;
  cursor: pointer;
  border-radius: 6px;
}
.msg-menu-btn:hover { background: rgba(245, 245, 244, 0.1); color: var(--white); }
.msg-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  border-radius: 10px;
  min-width: 140px;
  padding: 4px;
  flex-direction: column;
  gap: 2px;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  /* Explicit display:none as the real default, only turned on by the
     :not([hidden]) rule below. A plain "display: flex" here on this same
     .msg-menu-dropdown class selector would tie in specificity with the
     browser's own built-in "[hidden] { display: none }" rule, and an
     author stylesheet always wins that tie over the user-agent default --
     which is exactly why this menu was popping open immediately for
     every message instead of staying hidden until its "..." button was
     clicked. */
  display: none;
}
.msg-menu-dropdown:not([hidden]) {
  display: flex;
}
.msg-menu-item {
  background: transparent;
  border: none;
  color: var(--white);
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.msg-menu-item:hover { background: rgba(245, 245, 244, 0.1); }
.msg-menu-item-danger { color: var(--danger); }
.msg-menu-item-danger:hover { background: rgba(229, 72, 77, 0.14); }
.chat-input-row { display: flex; gap: 8px; }
.chat-input-row input {
  flex: 1;
  min-width: 0;
  background: var(--black-soft);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
}
.chat-input-row input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Clicking "💬 Group Thread" opens it as a full-screen overlay too, same
   reasoning as the Assistant above: a real back-and-forth conversation
   needs room to show more messages at once than a small box on an
   otherwise tall page comfortably allows. The overlay itself doesn't
   scroll as a whole; only the message list does, so the title, pinned
   banner, hint text, and the compose row at the bottom all stay pinned in
   view the whole time. */
.fullscreen-overlay.thread-overlay {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fullscreen-overlay.thread-overlay .fullscreen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 24px;
  text-align: left;
}
.fullscreen-overlay.thread-overlay .chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 0;
  max-width: none;
}
.fullscreen-overlay.thread-overlay .chat-pinned-wrap,
.fullscreen-overlay.thread-overlay .hint-text,
.fullscreen-overlay.thread-overlay .chat-input-row,
.fullscreen-overlay.thread-overlay .chat-input-row + .error-text {
  flex-shrink: 0;
}
.fullscreen-overlay.thread-overlay .chat-messages {
  flex: 1;
  min-height: 0;
  max-height: none;
}
@media (max-width: 600px) {
  .fullscreen-overlay.thread-overlay .fullscreen-content { padding: 14px 16px; }
}

/* ---------- Messages tab (private DMs / small-group messages) ---------- */
/* Laid out like Microsoft Teams: a conversation list down the left, the
   open conversation on the right. Both panes scroll independently so the
   compose box at the bottom of a thread, and the "+ New" button at the top
   of the list, both stay pinned in view the whole time. */
.fullscreen-overlay.dm-overlay {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fullscreen-overlay.dm-overlay .fullscreen-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
  text-align: left;
}
.dm-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  border: 1px solid #2a2a2d;
  border-radius: var(--radius);
  overflow: hidden;
}
.dm-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid #2a2a2d;
  background: var(--black-soft);
}
.dm-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #2a2a2d;
  flex-shrink: 0;
}
.dm-conv-list { flex: 1; overflow-y: auto; min-height: 0; }
.dm-conv-item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid #232326;
  border-left: 3px solid transparent;
}
.dm-conv-item:hover { background: rgba(255, 255, 255, 0.03); }
.dm-conv-item.active { background: rgba(255, 106, 19, 0.08); border-left-color: var(--accent); }
.dm-conv-item.unread .dm-conv-name { font-weight: 700; }
.dm-conv-click-area {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--white);
  font-family: inherit;
  padding: 0;
}
.dm-pin-badge { font-size: 11px; }
.dm-conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent-dim);
  background: #2a2a2d;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--grey);
}
.dm-conv-avatar-group { font-size: 16px; }
.dm-conv-info { flex: 1; min-width: 0; }
.dm-conv-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-conv-preview {
  font-size: 12px;
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.dm-group-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-bright);
  border: 1px solid var(--accent-dim);
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 4px;
}
.dm-unread-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3b30;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 6px;
}
.dm-tab-btn { display: inline-flex; align-items: center; }

.dm-thread-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.dm-empty-thread {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 14px;
  padding: 24px;
  text-align: center;
}
.dm-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a2d;
  flex-shrink: 0;
}
.dm-back-btn { display: none; }
.dm-thread-name { font-weight: 700; font-size: 15px; }
.dm-thread-sub { font-size: 12px; color: var(--grey); }
.dm-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dm-msg {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 9px 12px;
  border-radius: 10px;
  max-width: 70%;
  word-break: break-word;
  background: var(--black-card);
  border: 1px solid #2a2a2d;
  align-self: flex-start;
}
.dm-msg-mine {
  align-self: flex-end;
  background: var(--black-card);
  color: var(--white);
  border: 1px solid var(--accent);
}
.dm-msg-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.dm-msg-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-dim);
  object-fit: cover;
  flex-shrink: 0;
  background: #2a2a2d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9px;
  color: var(--grey);
}
.dm-msg-sender { font-weight: 700; font-size: 12.5px; }
.dm-msg-time { font-size: 11px; opacity: 0.7; }
.dm-msg-text { white-space: pre-line; }
.dm-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #2a2a2d;
  flex-shrink: 0;
}
.dm-input-row input {
  flex: 1;
  min-width: 0;
  background: var(--black-soft);
  border: 1.5px solid #333336;
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
}
.dm-input-row input:focus { outline: none; border-color: var(--accent); }

/* New-conversation modal (search a name, pick one or more recipients) */
.dm-recipient-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--black-card);
  border: 1px solid var(--accent-dim);
  color: var(--white);
  font-size: 12.5px;
  padding: 4px 8px;
  border-radius: 14px;
}
.dm-chip-remove {
  background: none;
  border: none;
  color: var(--grey);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.dm-picker-list {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid #2a2a2d;
  border-radius: 8px;
  background: var(--black-soft);
}
.dm-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-bottom: 1px solid #232326;
  color: var(--white);
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.dm-picker-row:last-child { border-bottom: none; }
.dm-picker-row:hover { background: rgba(255, 255, 255, 0.05); }
.dm-picker-row.selected { background: rgba(255, 106, 19, 0.1); }
.dm-picker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent-dim);
  object-fit: cover;
  flex-shrink: 0;
  background: #2a2a2d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--grey);
}
.dm-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-picker-check { color: var(--accent-bright); font-weight: 700; flex-shrink: 0; width: 16px; text-align: center; }
.dm-search-empty { padding: 10px; color: var(--grey); font-size: 12.5px; }

/* Mobile: stack the two panes, showing only one at a time (Teams does the
   same thing on a phone). `.dm-showing-thread` is toggled by JS whenever a
   conversation is opened or the back button is used to leave one. */
@media (max-width: 700px) {
  .fullscreen-overlay.dm-overlay .fullscreen-content { padding: 10px 12px; }
  .dm-layout { flex-direction: column; border: none; border-radius: 0; }
  .dm-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #2a2a2d; }
  .dm-layout.dm-showing-thread .dm-sidebar { display: none; }
  .dm-layout:not(.dm-showing-thread) .dm-thread-pane { display: none; }
  .dm-back-btn { display: inline-flex; }
}

/* ---------- Group Calendar tab ---------- */
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 16px;
}
.calendar-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.calendar-month-label {
  font-size: 19px;
  font-weight: 800;
  margin-left: 4px;
  white-space: nowrap;
}
.calendar-nav-btn {
  background: var(--black-card);
  border: 1px solid #333336;
  color: var(--white);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calendar-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.calendar-mode-toggle {
  display: inline-flex;
  background: var(--black-card);
  border: 1px solid #333336;
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.calendar-mode-btn {
  background: none;
  border: none;
  color: var(--grey);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 18px;
  cursor: pointer;
}
.calendar-mode-btn.active { background: var(--accent); color: var(--black); }
.calendar-toolbar-right { display: flex; align-items: center; gap: 8px; }

.calendar-scroll { overflow-x: auto; }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  border: 1px solid #2a2a2d;
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 760px;
}
.calendar-weekday {
  background: var(--black-soft);
  color: var(--grey);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 10px 4px;
  border-bottom: 1px solid #2a2a2d;
}
.calendar-day {
  background: var(--black-card);
  border-right: 1px solid #2a2a2d;
  border-bottom: 1px solid #2a2a2d;
  min-height: 108px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: default;
}
.calendar-grid.week-mode .calendar-day { min-height: 220px; }
.calendar-day.other-month { background: #19191b; }
.calendar-day.other-month .calendar-day-number { color: #55555a; }
.calendar-day.clickable { cursor: pointer; }
.calendar-day.clickable:hover { background: #26262a; }
.calendar-day-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calendar-day-number.is-today {
  background: var(--accent);
  color: var(--black);
  border-radius: 50%;
}
.calendar-events-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.calendar-event-chip {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
}
.calendar-event-chip.color-accent { background: var(--accent); }
.calendar-event-chip.color-red { background: #ef4444; }
.calendar-event-chip.color-green { background: #22c55e; color: #06210d; }
.calendar-event-chip.color-blue { background: #3b82f6; }
.calendar-event-chip.color-purple { background: #a855f7; }
.calendar-event-chip.color-grey { background: #6b7280; }
.calendar-more-link {
  background: none;
  border: none;
  color: var(--grey);
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 2px 4px;
}
.calendar-more-link:hover { color: var(--white); }

.calendar-color-swatches {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.calendar-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.calendar-color-swatch.selected { border-color: var(--white); }
.calendar-color-swatch.selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 0 3px rgba(0,0,0,0.6);
}

.calendar-event-detail .cal-detail-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--white);
  font-size: 14px;
  margin-bottom: 10px;
}
.calendar-event-detail .cal-detail-row .cal-detail-icon { color: var(--grey); min-width: 54px; flex-shrink: 0; white-space: nowrap; }
.calendar-event-detail .cal-detail-notes {
  white-space: pre-wrap;
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid #2a2a2d;
}
.calendar-day-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 6px;
  border: 1px solid #2a2a2d;
}
.calendar-day-list-row:hover { border-color: var(--accent); }
.calendar-day-list-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.calendar-day-list-dot.color-accent { background: var(--accent); }
.calendar-day-list-dot.color-red { background: #ef4444; }
.calendar-day-list-dot.color-green { background: #22c55e; }
.calendar-day-list-dot.color-blue { background: #3b82f6; }
.calendar-day-list-dot.color-purple { background: #a855f7; }
.calendar-day-list-dot.color-grey { background: #6b7280; }
.calendar-day-list-time { color: var(--grey); font-size: 12.5px; white-space: nowrap; }

/* ---------- Unread inbox (homescreen "Unread" button + full-screen list) ---------- */
.unread-inbox-btn { position: relative; }
.unread-count-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-left: 7px;
  border-radius: 10px;
  background: #ff3b30;
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.unread-inbox { max-width: 720px; margin: 0 auto; }
.unread-inbox-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.unread-inbox-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #1c1c1f;
  border: 1px solid #2a2a2d;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.unread-inbox-item:hover { border-color: var(--accent-dim); }
.unread-inbox-main { min-width: 0; flex: 1; }
.unread-inbox-kind {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-bright);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.unread-inbox-group { font-size: 15px; font-weight: 600; }
.unread-inbox-sender { font-size: 13px; color: var(--grey); margin-top: 1px; }
.unread-inbox-preview {
  font-size: 13px;
  color: var(--grey);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small banner shown at the top of a destination screen (Group Thread,
   a specific Message conversation, or Notes) when it was reached by
   clicking through from the Unread inbox above. */
.unread-context-banner {
  background: #1c1c1f;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13.5px;
}

/* ---------- Floating contact/support button (My Groups page) ---------- */
.contact-support-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 260;
}
.contact-support-fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-support-fab:hover { background: var(--accent-bright); }
.contact-support-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--black-soft);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

/* ---------- Topbar "Help" dropdown (every signed-in page) ---------- */
.topbar-help-wrap { position: relative; }
.topbar-help-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--black-soft);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  z-index: 260;
  text-align: left;
}