/* ============================================================
   Prayer Engine Panel — Stylesheet
   Designed for iframe embedding (Wix / ShowIt) and direct access
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800&display=swap');

:root {
  --sidebar-w:   220px;
  --sidebar-bg:  #111111;
  --sidebar-text: #b8c5d6;
  --sidebar-active: #00ADEF;
  --brand:       #088597;
  --brand-dark:  #01889A;
  --success:     #27ae60;
  --warning:     #f39c12;
  --danger:      #e74c3c;
  --accent:      #37B5FE;
  --text:        #111111;
  --text-light:  #435159;
  --border:      #e0e8ef;
  --bg:          #F2F2F2;
  --card-bg:     #ffffff;
  --radius:      8px;
  --shadow:      0 1px 4px rgba(0,0,0,.08);
}

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

body {
  font-family: 'Barlow', Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Layout ------------------------------------------------ */
.layout {
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ----------------------------------------------- */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logout-btn.logout-btn--top { display: none; }
.sidebar-logo {
  height: 36px;
  width: auto;
  display: block;
  max-width: 180px;
  object-fit: contain;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
}

.nav-item {
  display: block;
  padding: 10px 20px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.nav-item:hover  { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: rgba(45,156,219,.15); color: #fff; border-left-color: var(--sidebar-active); font-weight: 600; }

/* Section divider — branded label + hairline rule in the sidebar */
.nav-section {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sidebar-active, #2D9CDB);
  margin: 14px 20px 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  opacity: .85;
}

/* Mobile-only elements — hidden at desktop widths */
.mobile-topbar,
.mobile-backdrop,
.mobile-drawer-close { display: none; }

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.user-info    { margin-bottom: 10px; }
.user-name    { color: #fff; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.logout-btn {
  display: block;
  margin-top: 12px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: #f87171;
  border: 1px solid rgba(248,113,113,.35);
  border-radius: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.logout-btn:hover {
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.65);
  color: #fca5a5;
}

.online-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--sidebar-text);
  margin-bottom: 12px;
  letter-spacing: .02em;
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
  animation: pulse-glow 2.4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 3px 1px rgba(76,175,80,.35); }
  50%       { box-shadow: 0 0 9px 4px rgba(76,175,80,.70); }
}

/* ---- Main Content ------------------------------------------ */
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.page-body {
  padding: 24px;
  flex: 1;
}

/* ---- Cards ------------------------------------------------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card-header {
  padding: 14px 20px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fafbfc;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-header-meta   { margin-left: auto; color: var(--text-light); font-weight: 400; font-size: 13px; }
.card-header-action { margin-left: auto; }
.card-body          { padding: 20px; }
.card-body.p-0      { padding: 0; }

/* ---- Alerts ------------------------------------------------ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
}
.alert-success { background: #eafaf1; border: 1px solid #a9dfbf; color: #1a6b3a; }
.alert-error   { background: #fdf0f0; border: 1px solid #f5c6c6; color: #c0392b; }
.alert-warning { background: #fef9e7; border: 1px solid #f9e79f; color: #7d6608; }

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, opacity .15s;
  line-height: 1.4;
}
.btn:hover        { opacity: .88; }
.btn-primary      { background: var(--brand);   color: #fff; }
.btn-success      { background: var(--success); color: #fff; }
.btn-warning      { background: var(--warning); color: #fff; }
.btn-danger       { background: var(--danger);  color: #fff; }
.btn-secondary    { background: #f0f4f8; color: var(--text); border: 1px solid var(--border); }
.btn-accent       { background: var(--accent);  color: #fff; }
.btn-ghost        { background: transparent;    color: var(--text-light); }
.btn-pray         { background: #e8f5e9; color: var(--success); border: 1px solid #a9dfbf; }
.btn-pray.prayed  { background: var(--success); color: #fff; border-color: var(--success); }
.btn-full         { width: 100%; justify-content: center; }
.btn-sm           { padding: 5px 11px; font-size: 12.5px; }

/* ---- Badges ----------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.badge-super  { background: #1e1e2e; color: #c9a6ff; }
.badge-admin  { background: #fde8e8; color: var(--danger); }
.badge-mod    { background: #fef3cd; color: #7d6608; }
.badge-member { background: #dbeafe; color: #1a56db; }

.lang-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
}
.lang-en { background: #dbeafe; color: #1d4ed8; }
.lang-es { background: #fce7f3; color: #9d174d; }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.status-new    { background: #fff3cd; color: #7d6608; }
.status-posted { background: #d4edda; color: #155724; }
.status-denied { background: #f8d7da; color: #721c24; }

.answered-badge {
  background: #d4edda;
  color: #155724;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}
.team-only-badge {
  background: #fff3cd;
  color: #856404;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}

/* ---- Stats Grid ------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-number         { font-size: 32px; font-weight: 800; color: var(--brand); line-height: 1; }
.stat-label          { font-size: 12px; color: var(--text-light); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }
.stat-action         { display: block; margin-top: 8px; font-size: 12px; color: var(--brand); text-decoration: none; font-weight: 600; }
.stat-card-warning   .stat-number { color: var(--warning); }
.stat-card-success   .stat-number { color: var(--success); }
.stat-card-accent    .stat-number { color: var(--accent); }

/* ---- Data Table ------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.data-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-light);
  background: #fafbfc;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td      { background: #f9fbfc; }
.row-inactive td             { opacity: .55; }
.td-date   { color: var(--text-light); white-space: nowrap; font-size: 12.5px; }
.td-excerpt { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Forms ------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-group           { display: flex; flex-direction: column; gap: 5px; }
.form-group-full      { grid-column: 1 / -1; }
.form-group label     { font-size: 13px; font-weight: 600; color: var(--text); }
.form-actions         { padding: 4px 0 0; }

input[type=text],
input[type=email],
input[type=password],
input[type=number],
select,
textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #ccd6e0;
  border-radius: 5px;
  font-size: 13.5px;
  color: var(--text);
  background: #fff;
  transition: border-color .15s;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(8,133,151,.12);
}
textarea { resize: vertical; }

.field-hint      { font-size: 11.5px; color: var(--text-light); margin-top: 2px; font-weight: 400; }
.label-hint      { font-size: 11.5px; color: var(--text-light); font-weight: 400; }
.empty-state     { text-align: center; color: var(--text-light); padding: 32px 20px; font-size: 14px; }

.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 400;
  font-size: 13.5px;
}
.toggle-label input[type=checkbox] { width: auto; }

.checkbox-group { display: flex; flex-direction: column; gap: 10px; }
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
}
.checkbox-label input[type=checkbox] { width: 16px; height: 16px; }

/* ---- Login Page ------------------------------------------- */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #111111 0%, #088597 100%);
}
.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 28px;
  text-align: center;
}
.login-logo {
  height: 44px;
  width: auto;
  display: block;
  max-width: 200px;
  object-fit: contain;
}
.login-help {
  margin-top: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-light);
}

/* ---- Moderation Cards ------------------------------------- */
.queue-count { color: var(--text-light); font-size: 13px; margin-bottom: 12px; }

.mod-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.mod-card-claimed {
  border-color: #f39c12;
  border-left: 4px solid #f39c12;
  background: #fffdf5;
}
.mod-claimed-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #915a00;
  background: #fff3cd;
  border-radius: 5px;
  padding: 6px 10px;
  margin-bottom: 12px;
  font-weight: 600;
}
.mod-claimed-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f39c12;
  flex-shrink: 0;
  animation: pulse-glow 1.8s ease-in-out infinite;
}
.mod-card-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13px;
}
.mod-meta-left  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mod-meta-right { color: var(--text-light); font-size: 12px; }
.mod-email      { color: var(--text-light); }
.mod-share-pref { font-size: 12.5px; color: var(--text-light); margin-bottom: 10px; }
.mod-share-private { background: #fff3cd; color: #856404; padding: 6px 10px; border-radius: 5px; font-weight: 500; }

.mod-original       { margin-bottom: 14px; }
.mod-original label { display: block; font-size: 12px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.mod-original-text  { background: #f8f9fa; border: 1px solid var(--border); border-radius: 5px; padding: 12px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }

.mod-textarea { width: 100%; }
.mod-actions  { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* ---- Prayer Cards (team wall) ----------------------------- */
.wall-switcher { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.wall-switch-btn {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}
.wall-switch-btn.active,
.wall-switch-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.wall-stats-row { font-size: 13px; color: var(--text-light); margin-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wall-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff8e6;
  border: 1px solid #f5c842;
  color: #7a5700;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-decoration: none;
}
.wall-pending-badge:hover { background: #f5c842; color: #3d2b00; }

.prayer-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  transition: border-color .2s;
}
.prayer-card-highlight { border-left: 4px solid var(--brand); }
.prayer-card-answered  { border-left: 4px solid var(--success); opacity: .85; }

.prayer-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.prayer-card-who    { font-weight: 700; font-size: 14px; }
.prayer-card-date   { font-size: 12px; color: var(--text-light); }
.prayer-card-text   { font-size: 14px; line-height: 1.65; color: var(--text); white-space: pre-wrap; margin-bottom: 12px; }
.prayer-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Reply thread */
.reply-thread  { background: #f4f7fb; border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; }
.reply-item    { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.reply-item:last-child { border-bottom: none; }
.reply-author  { font-weight: 700; white-space: nowrap; color: var(--brand); min-width: 80px; }
.reply-text    { flex: 1; line-height: 1.5; }
.reply-date    { color: var(--text-light); font-size: 11.5px; white-space: nowrap; }

.reply-form         { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.reply-textarea     { width: 100%; margin-bottom: 8px; }
.reply-form-actions { display: flex; gap: 8px; }

/* ---- Quick Nav -------------------------------------------- */
.quick-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.quick-nav-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s;
}
.quick-nav-btn:hover         { background: var(--brand); color: #fff; border-color: var(--brand); }
.quick-nav-btn-warn          { border-color: var(--warning); color: var(--warning); }
.quick-nav-btn-warn:hover    { background: var(--warning); color: #fff; }

/* ---- Filter Bar ------------------------------------------- */
.filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.filter-btn.active,
.filter-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.filter-count     { margin-left: auto; color: var(--text-light); font-size: 13px; }

/* ---- Pagination ------------------------------------------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.page-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.page-btn.active,
.page-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- Modal ------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-box {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  z-index: 1;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-light);
  line-height: 1;
}
.modal-title   { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.modal-meta    { font-size: 12.5px; color: var(--text-light); margin-bottom: 14px; }
.modal-section { margin-bottom: 14px; }
.modal-section label { display: block; font-size: 12px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.modal-text    { background: #f8f9fa; border-radius: 5px; padding: 12px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; border: 1px solid var(--border); }

/* ---- Color Settings --------------------------------------- */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.color-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.color-input-wrap { display: flex; align-items: center; gap: 6px; }
.color-swatch { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 4px; padding: 2px; cursor: pointer; }
.color-hash   { color: var(--text-light); }
.color-hex    { width: 80px; font-family: monospace; }

/* ---- Bar Chart (reports) ---------------------------------- */
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; overflow-x: auto; padding-bottom: 4px; }
.bar-item  { display: flex; flex-direction: column; align-items: center; min-width: 20px; flex: 1; height: 100%; justify-content: flex-end; }
.bar-fill  { background: var(--brand); border-radius: 3px 3px 0 0; width: 100%; min-height: 2px; transition: height .3s; }
.bar-label { font-size: 10px; color: var(--text-light); margin-top: 4px; }

/* ---- Wall Logo (admin panel) ------------------------------ */
.wall-logo-thumb {
  height: 22px;
  width: auto;
  object-fit: contain;
  border-radius: 3px;
  vertical-align: middle;
}
.logo-preview { margin-bottom: 10px; }
.logo-preview-img {
  display: block;
  max-height: 64px;
  width: auto;
  max-width: 220px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px;
  background: #fff;
  object-fit: contain;
  margin-bottom: 6px;
}
input[type=file] {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ccd6e0;
  border-radius: 5px;
  font-size: 13px;
  background: #fafbfc;
  font-family: inherit;
}

/* ---- Auto-mod reference word chips ----------------------- */
.automod-word-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.automod-word-chip {
  display: inline-block;
  padding: 3px 10px;
  background: #fdf0f0;
  border: 1px solid #f5c6c6;
  color: #c0392b;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* ---- Embed Code ------------------------------------------- */
.embed-code {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  background: #f4f7fb;
  border-color: #d0dbe6;
  color: var(--text);
  resize: none;
  line-height: 1.55;
  cursor: text;
  white-space: pre;
  overflow-x: auto;
}
.embed-code:focus { border-color: var(--brand); }

/* ---- Announcements Board ---------------------------------- */
.ann-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  background: var(--card-bg);
  box-shadow: var(--shadow);
}
.ann-card:last-child { margin-bottom: 0; }
.ann-card-pinned {
  border-left: 4px solid var(--warning);
  background: #fffdf5;
}
.ann-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ann-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.ann-pin-tag {
  font-size: 11px;
  font-weight: 700;
  color: #7d6608;
  background: #fff3cd;
  padding: 2px 8px;
  border-radius: 20px;
}
.ann-card-author { color: var(--brand); font-size: 13px; }
.ann-card-date   { color: var(--text-light); font-size: 12px; }
.ann-card-title  { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.ann-card-body   { font-size: 14px; line-height: 1.65; color: var(--text); margin-bottom: 20px; }
.ann-card-body p { margin: 0 0 10px; }
.ann-card-body p:last-child { margin-bottom: 0; }
.ann-card-body ul,
.ann-card-body ol { margin: 0 0 10px 20px; }
.ann-card-body a  { color: var(--brand); text-decoration: underline; }
.ann-card-body img { max-width: 100%; border-radius: 4px; }

/* Language toggle in modal */
.btn.ann-lang-btn {
  border: 1px solid var(--border);
  background: #f0f4f8;
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn.ann-lang-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn.ann-lang-btn:hover:not(.active) {
  background: #e4eaf0;
  border-color: #bcc8d4;
}

/* Language filter in board header */
.btn.ann-filter-btn {
  border: 1px solid var(--border);
  background: #f0f4f8;
  color: var(--text);
  cursor: pointer;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 20px;
  transition: background .15s, border-color .15s, color .15s;
}
.btn.ann-filter-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn.ann-filter-btn:hover:not(.active) {
  background: #e4eaf0;
  border-color: #bcc8d4;
}
#ann-filter-wrap { display: flex; gap: 4px; }

/* Reactions */
.ann-reactions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  position: relative;
}
.ann-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #f8f9fa;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ann-reaction-btn span { font-size: 12px; color: var(--text-light); }
.ann-reaction-btn:hover { background: #eef3f9; border-color: var(--brand); }
.ann-reaction-mine {
  background: #e0f0ff;
  border-color: var(--accent);
}
.ann-reaction-add {
  font-size: 16px;
  color: var(--text-light);
  min-width: 36px;
  justify-content: center;
}

/* Emoji picker */
.ann-emoji-picker {
  display: flex;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  position: absolute;
  z-index: 50;
  margin-top: 4px;
}
.ann-emoji-picker button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .12s;
}
.ann-emoji-picker button:hover { background: #f0f4f8; }
.ann-emoji-picker button.ann-picker-selected {
  background: #e0f0ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Replies */
.ann-replies {
  background: #f4f7fb;
  border-radius: 6px;
  padding: 14px 16px;
}
.ann-replies-empty {
  background: transparent;
  padding: 0;
}
.ann-replies-empty .ann-reply-compose {
  background: #f4f7fb;
  border-radius: 6px;
  padding: 12px 16px;
  border-top: none;
  margin-top: 0;
}
.ann-reply {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}
.ann-reply:last-of-type { border-bottom: none; }
.ann-reply-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ann-reply-author { color: var(--brand); font-size: 13px; }
.ann-reply-time   { color: var(--text-light); font-size: 11.5px; margin-left: 6px; }
.ann-reply-edited { color: var(--text-light); font-size: 11px; font-style: italic; }
.ann-reply-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
.ann-reply-act {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity .15s;
}
.ann-reply-act:hover { opacity: 1; }
.ann-reply-body   { margin-top: 4px; color: var(--text); }

/* Reply reactions (smaller pills) */
.ann-reply-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
  position: relative;
}
.ann-reaction-sm {
  padding: 2px 7px;
  font-size: 12px;
}
.ann-reaction-sm span { font-size: 11px; }

/* Reply inline edit */
.ann-reply-edit-ta {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--brand);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  margin-bottom: 6px;
}
.ann-reply-edit-actions {
  display: flex;
  gap: 6px;
}

/* Sub-replies (threaded one level deep) */
.ann-subreplies {
  margin-left: 24px;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.ann-reply-child {
  padding: 8px 0;
  font-size: 12.5px;
}
.ann-reply-child .ann-reply-author { font-size: 12.5px; }
.ann-reply-child .ann-reply-body   { font-size: 12.5px; }

.ann-subreply-compose {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ann-subreply-input { flex: 1; }

.ann-show-all-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 6px;
  display: block;
}
.ann-show-all-btn:hover { text-decoration: underline; }

.ann-reply-compose {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ann-reply-input {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid #ccd6e0;
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
}
.ann-reply-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(8,133,151,.12);
}

/* ---- Responsive ------------------------------------------- */

/* Tables: scroll horizontally on narrow screens */
.card-body.p-0 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table    { min-width: 480px; }

/* Card header: allow wrapping on small screens */
.card-header   { flex-wrap: wrap; }

@media (max-width: 700px) {
  .layout { flex-direction: column; }

  /* ---- Mobile top bar with hamburger ---- */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--sidebar-bg, #1E2A36);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 950;
    border-bottom: 1px solid rgba(255,255,255,.08);
    min-height: 64px;
  }
  .mobile-menu-btn {
    background: none;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    width: 46px;
  }
  .mobile-menu-icon {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .mobile-topbar-logo {
    height: 36px;
    width: auto;
  }
  .mobile-topbar-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- Drawer (slides in from the right) ---- */
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    height: -webkit-fill-available;
    height: 100svh;
    height: var(--vvh, 100svh);
    transform: translateX(105%);
    transition: transform .25s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 20px rgba(0,0,0,.25);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  body.mobile-nav-open { overflow: hidden; }

  /* ---- Backdrop ---- */
  .mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 1000;
  }
  .mobile-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- Drawer brand + close button ---- */
  .sidebar-brand { justify-content: space-between; padding: 14px 18px; }
  .sidebar-logo  { height: 30px; }
  .logout-btn.logout-btn--top { display: none; }
  .mobile-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.75);
    font-size: 26px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
  }
  .mobile-drawer-close:hover { color: #fff; }

  /* ---- Nav back to vertical list (override desktop flex-column is already) ---- */
  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0;
    -webkit-overflow-scrolling: touch;
  }
  .nav-item {
    display: block;
    padding: 12px 20px;
    border-left: 3px solid transparent;
    border-bottom: none;
    white-space: normal;
    flex-shrink: 0;
  }
  .nav-item.active {
    border-left-color: var(--sidebar-active);
    border-bottom: none;
  }

  /* Section divider — same vertical treatment as desktop */
  .nav-section {
    margin: 14px 20px 6px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-left: none;
    display: block;
    font-size: 10.5px;
    letter-spacing: 1.4px;
  }

  /* Sign Out at the bottom of the drawer — safe-area inset so it clears
     Android's gesture/nav bar and iOS home indicator */
  .sidebar-footer {
    padding: 14px 18px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
  }
  .user-info { margin-bottom: 0; }
  .logout-btn:not(.logout-btn--top) {
    display: block;
    text-align: center;
    padding: 10px 14px;
    margin: 0;
  }

  /* Content area */
  .page-body  { padding: 16px; }
  /* Page title already lives in the mobile top bar — hide the in-content
     header row on every page to reclaim vertical space */
  .page-header { display: none; }
  .form-grid  { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .login-card { padding: 28px 20px; }
  .mod-actions { gap: 6px; }
  .prayer-card-header { flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .login-card { padding: 24px 16px; margin: 0 8px; }
  .login-logo { height: 36px; }
  .page-body  { padding: 12px; }
  .card-body  { padding: 14px; }
}

/* ========== Team Chat (Groundwire-branded live chatroom) ========== */
.chat-wrap {
  --gw-teal:   #088597;
  --gw-teal-d: #1E6F80;
  --gw-dark:   #3D4A56;
  --gw-muted:  #6B7A85;
  --gw-ink:    #2c3e50;
  --gw-bg:     #F5F7F9;
  --gw-line:   #DDE3E8;
  --gw-line-l: #EAECEE;

  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 520px;
  max-width: 960px;
  background: var(--gw-bg);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(30, 111, 128, .06);
  position: relative;
}

/* --- Toolbar --- */
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #3D4A56 0%, #2f3a44 100%);
  color: #fff;
  flex-wrap: wrap;
}
.chat-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  color: rgba(255,255,255,.92);
  text-transform: uppercase;
}
.chat-live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 0 0 rgba(255, 77, 77, .65);
  animation: chat-live-pulse 1.8s infinite;
}
@keyframes chat-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 77, .65); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
.chat-live-label { color: #ff8585; letter-spacing: 1px; }
.chat-live-divider { color: rgba(255,255,255,.35); }
.chat-sound-toggle {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .12s;
}
.chat-sound-toggle:hover { background: rgba(255,255,255,.18); }
.chat-sound-toggle.chat-sound-muted { opacity: .5; }
.chat-wrap.chat-disconnected .chat-live-dot {
  background: #aaa;
  animation: none;
  box-shadow: none;
}
.chat-wrap.chat-disconnected .chat-live-label { color: #aaa; }

.chat-search {
  display: flex;
  gap: 6px;
  flex: 1;
  max-width: 420px;
  min-width: 240px;
}
.chat-search input[type="search"] {
  flex: 1;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.1);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-family: inherit;
}
.chat-search input[type="search"]::placeholder { color: rgba(255,255,255,.6); }
.chat-search input[type="search"]:focus {
  outline: none;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
.chat-search .btn { padding: 6px 14px; font-size: 12px; }

/* --- Jump-to-ping banner --- */
.chat-jump-ping {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gw-teal);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(8, 133, 151, .35);
  cursor: pointer;
  z-index: 20;
  font-family: inherit;
  animation: chat-jump-in .25s ease-out;
}
.chat-jump-ping:hover { background: var(--gw-teal-d); }
@keyframes chat-jump-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* --- Messages feed --- */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background:
    radial-gradient(ellipse at top, rgba(8, 133, 151, .04), transparent 60%),
    var(--gw-bg);
  scroll-behavior: smooth;
}
.chat-messages:focus { outline: none; }
.chat-loading {
  text-align: center;
  color: var(--gw-muted);
  padding: 24px;
  font-size: 13px;
  font-style: italic;
}
.chat-loading-top { padding: 10px; }
.chat-search-banner {
  background: #fff8e1;
  border: 1px solid #ffe082;
  color: #7a5500;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  margin-bottom: 12px;
}

/* --- Message rows: bubble layout --- */
.chat-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;
}
.chat-msg-own { flex-direction: row-reverse; }
.chat-msg-deleted { opacity: .55; }

/* Highlight messages that @mention the current user (Discord-style) */
.chat-msg-pinged-me .chat-bubble {
  background: linear-gradient(135deg, #fffbe8 0%, #fff4cc 100%);
  border-color: #f3c442;
  border-left: 3px solid #f3c442;
}
.chat-msg-pinged-me.chat-msg-own .chat-bubble {
  background: linear-gradient(135deg, #f3a642 0%, #d67f1e 100%);
  border-color: #b86a13;
  border-left: none;
  border-right: 3px solid #b86a13;
}
.chat-msg-pinged-me .chat-mention {
  background: #f3c442;
  color: #6b4a0a;
  font-weight: 700;
}

.chat-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gw-teal);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.chat-avatar-admin     { background: #6b3a8a; }
.chat-avatar-moderator { background: var(--gw-teal); }
.chat-avatar-member    { background: var(--gw-dark); }

.chat-bubble-group {
  max-width: calc(100% - 50px);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-msg-own .chat-bubble-group { align-items: flex-end; }

.chat-msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.chat-msg-author {
  font-weight: 700;
  color: var(--gw-dark);
  font-size: 13px;
}
.chat-msg-head .chat-msg-time {
  font-size: 10.5px;
  color: var(--gw-muted);
}
.chat-role {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 1px 6px;
  border-radius: 3px;
}
.chat-role-admin { background: #e8d5f2; color: #6b3a8a; }
.chat-role-mod   { background: #d5e8f2; color: var(--gw-teal-d); }

/* Bubble row: bubble + always-visible action buttons side-by-side */
.chat-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.chat-msg-own .chat-bubble-row { flex-direction: row-reverse; }

.chat-bubble {
  background: #fff;
  border: 1px solid var(--gw-line);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  color: var(--gw-ink);
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  min-width: 0;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.chat-msg-own .chat-bubble {
  background: linear-gradient(135deg, var(--gw-teal) 0%, var(--gw-teal-d) 100%);
  color: #fff;
  border-color: transparent;
  border-radius: 16px 16px 4px 16px;
}
.chat-msg-own .chat-msg-body code {
  background: rgba(255,255,255,.2);
  color: #fff;
}

.chat-msg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.chat-msg-body code {
  background: #f0f3f6;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: 'Courier New', monospace;
  word-break: break-all;
}
.chat-msg-body pre {
  background: #f0f3f6;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
  margin: 4px 0;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg-body ul, .chat-msg-body ol { margin: 4px 0 4px 20px; }

/* Mention chip in rendered messages */
.chat-mention {
  background: rgba(8, 133, 151, .12);
  color: var(--gw-teal-d);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  cursor: help;
}
.chat-msg-own .chat-mention {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* Bubble actions — inline, always visible but subtle */
.chat-bubble-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  opacity: .35;
  transition: opacity .15s;
}
.chat-msg:hover .chat-bubble-actions,
.chat-bubble-actions:focus-within { opacity: 1; }
.chat-msg-addrx, .chat-msg-delete {
  background: #fff;
  border: 1px solid var(--gw-line);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  width: 26px; height: 26px;
  padding: 0;
  color: var(--gw-muted);
  font-family: inherit;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}
.chat-msg-addrx:hover  {
  color: var(--gw-teal);
  border-color: var(--gw-teal);
  background: rgba(8,133,151,.08);
}
.chat-msg-edit:hover {
  color: var(--gw-dark);
  border-color: var(--gw-dark);
  background: rgba(61,74,86,.08);
}
.chat-msg-delete:hover {
  color: #c0392b;
  border-color: #c0392b;
  background: rgba(192,57,43,.08);
}

/* "(edited)" marker shown next to bubble body on edited messages */
.chat-msg-edited {
  font-size: 10.5px;
  color: rgba(0,0,0,.45);
  font-style: italic;
  margin-left: 4px;
}
.chat-msg-own .chat-msg-edited { color: rgba(255,255,255,.65); }

/* Inline edit form that replaces the body while editing */
.chat-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-edit-field {
  min-height: 20px;
  padding: 8px 10px;
  background: rgba(255,255,255,.95);
  color: var(--gw-ink);
  border: 1px solid var(--gw-line);
  border-radius: 8px;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-edit-field:focus { border-color: var(--gw-teal); box-shadow: 0 0 0 3px rgba(8,133,151,.1); }
.chat-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.chat-edit-save, .chat-edit-cancel {
  padding: 5px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.chat-edit-save   { background: var(--gw-teal); color: #fff; }
.chat-edit-save:hover   { background: var(--gw-teal-d); }
.chat-edit-cancel { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
.chat-msg-other .chat-edit-cancel { color: var(--gw-muted); border-color: var(--gw-line); }
.chat-edit-cancel:hover { background: rgba(255,255,255,.1); }
.chat-msg-other .chat-edit-cancel:hover { background: rgba(0,0,0,.04); }
.chat-edit-save:disabled, .chat-edit-cancel:disabled { opacity: .55; cursor: not-allowed; }

/* Foot: time stamp beneath bubble */
.chat-msg-foot {
  font-size: 10.5px;
  color: var(--gw-muted);
  margin-top: 3px;
  padding: 0 6px;
}

/* Reactions row */
.chat-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding: 0 4px;
}
.chat-msg-reactions:empty { display: none; }
.chat-rx {
  background: #fff;
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  transition: all .12s;
}
.chat-rx:hover { background: #f0f3f6; border-color: var(--gw-line-l); }
.chat-rx-mine {
  background: rgba(8, 133, 151, .1);
  border-color: var(--gw-teal);
  color: var(--gw-teal-d);
}
.chat-rx-count { font-weight: 600; margin-left: 2px; }

/* Reaction emoji popover */
.chat-rx-picker {
  position: absolute;
  background: #fff;
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  padding: 6px;
  display: flex;
  gap: 2px;
  z-index: 1000;
}
.chat-rx-picker-btn {
  background: none;
  border: none;
  font-size: 22px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  transition: background .12s;
}
.chat-rx-picker-btn:hover { background: #f0f3f6; transform: scale(1.15); }

/* Pinged message highlight when jumped to */
.chat-msg-pinged .chat-bubble {
  animation: chat-ping-highlight 2.5s ease-out;
}
@keyframes chat-ping-highlight {
  0%, 10%  { box-shadow: 0 0 0 4px rgba(255, 193, 7, .6), 0 1px 2px rgba(0,0,0,.04); }
  100%     { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0), 0 1px 2px rgba(0,0,0,.04); }
}

/* --- Composer --- */
.chat-input-wrap {
  display: flex;
  gap: 10px;
  padding: 14px 16px 6px;
  background: #fff;
  border-top: 1px solid var(--gw-line);
  align-items: center;
  position: relative;
}
.chat-input-meta {
  background: #fff;
  padding: 0 18px 10px;
  min-height: 18px;
  display: flex;
  justify-content: flex-end;
}
.chat-char-counter {
  font-size: 11px;
  color: var(--gw-muted);
  font-family: inherit;
}
.chat-char-counter-warn   { color: #d68910; }
.chat-char-counter-over   { color: #c0392b; font-weight: 600; }
.chat-char-counter-bypass { color: var(--gw-teal-d); font-style: italic; }
.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--gw-line);
  border-radius: 22px;
  font-size: 14px;
  font-family: inherit;
  min-height: 22px;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 1.5;
  color: var(--gw-ink);
  background: var(--gw-bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  min-width: 0;
}
.chat-input:focus {
  border-color: var(--gw-teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(8, 133, 151, .1);
}
.chat-input.chat-input-empty::before {
  content: attr(data-placeholder);
  color: var(--gw-muted);
  pointer-events: none;
  font-style: italic;
}
.chat-input .chat-mention {
  /* Make the mention chip feel like a solid token in the composer */
  user-select: all;
  cursor: default;
}
#chat-send {
  border-radius: 22px;
  padding: 10px 24px;
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 13px;
  text-transform: uppercase;
}

/* --- @mention picker popover --- */
.chat-mention-picker {
  position: fixed;
  background: #fff;
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0,0,0,.16);
  padding: 4px;
  width: 300px;
  max-width: 340px;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10000;
  display: none;
  font-family: inherit;
}
.chat-mp-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-areas:
    "av name role"
    "av email role";
  gap: 2px 10px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
}
.chat-mp-item-sel, .chat-mp-item:hover { background: rgba(8, 133, 151, .08); }
.chat-mp-avatar {
  grid-area: av;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gw-teal);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-mp-name  { grid-area: name; font-weight: 600; font-size: 13.5px; color: var(--gw-dark); }
.chat-mp-email { grid-area: email; font-size: 11.5px; color: var(--gw-muted); }
.chat-mp-role {
  grid-area: role;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 3px;
}
.chat-mp-role-admin     { background: #e8d5f2; color: #6b3a8a; }
.chat-mp-role-moderator { background: #d5e8f2; color: var(--gw-teal-d); }
.chat-mp-role-member    { background: #e8ecef; color: var(--gw-muted); }
.chat-mp-empty {
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--gw-muted);
  font-style: italic;
}

/* --- Nav ping badge (on Team Chat nav item) --- */
.nav-ping-badge {
  display: inline-block;
  background: #ff4d4d;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 8px rgba(255, 77, 77, .4);
}

/* Pending-work badge (Mod Queue, Answered Requests) — branded teal, same
   form factor as the ping badge but visually distinct from personal pings */
.nav-work-badge {
  display: inline-block;
  background: #088597;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 8px rgba(8, 133, 151, .35);
}

/* --- Responsive --- */
@media (max-width: 700px) {
  /* Lock the chat page to the viewport height so only the messages area
     scrolls. Uses dynamic viewport height (dvh) to follow the mobile
     address bar; falls back to vh on older browsers. */
  body.nav-chat {
    overflow: hidden;
    height: var(--vvh, 100svh);
  }
  /* Pin the whole layout to the visible viewport via position: fixed.
     Without this, the document can't scroll (overflow: hidden) so Chrome
     Android's URL bar never auto-collapses — but as long as we're anchored
     to --vvh the content still fits. position: fixed guarantees it. */
  body.nav-chat .layout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--vvh, 100svh);
    display: flex;
    flex-direction: column;
  }
  body.nav-chat .mobile-topbar {
    position: relative;
    flex-shrink: 0;
  }
  body.nav-chat .main-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--gw-bg, #F5F7F9);
  }
  body.nav-chat .page-body {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
  }

  .chat-wrap {
    /* Fill the available space; flex children (toolbar/composer) pin to
       top/bottom while only .chat-messages scrolls. */
    height: 100%;
    min-height: 0;
    max-width: none;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* Pin the toolbar and composer so they never shrink or scroll away */
  .chat-toolbar,
  .chat-input-wrap,
  .chat-input-meta { flex-shrink: 0; }
  .chat-toolbar { gap: 10px; padding: 12px 14px; }
  .chat-search { min-width: 100%; order: 3; }
  .chat-bubble-group { max-width: 82%; }
  .chat-avatar { width: 30px; height: 30px; font-size: 12px; }
  .chat-input-wrap { padding: 10px 12px; }
  /* Clear Android gesture/nav bar and iOS home indicator. Bumped to
     48px minimum to cover Chrome Android's bottom UI chrome on devices
     where neither env() nor visualViewport reports the overlay height. */
  .chat-input-meta {
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }
  .chat-jump-ping { top: 76px; }
}

/* ── Master audit log (admin) ──────────────────────────────────────── */
.audit-log {
  background: #fff;
  border: 1px solid #DDE3E8;
  border-radius: 6px;
  overflow: hidden;
}
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.audit-table th {
  background: #F5F7F9;
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7A85;
  border-bottom: 2px solid #DDE3E8;
}
.audit-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #EEF1F4;
  vertical-align: top;
}
.audit-row-expandable { cursor: pointer; }
.audit-row-expandable:hover { background: #F9FBFC; }
.audit-when {
  font-size: 12px;
  color: #6B7A85;
  white-space: nowrap;
}
.audit-actor-name { font-weight: 600; color: #3D4A56; }
.audit-actor-system { color: #6B7A85; font-style: italic; }
.audit-who .badge { margin-left: 6px; font-size: 10px; padding: 1px 6px; }
.audit-entity-tag {
  display: inline-block;
  background: #EEF3F7;
  color: #3D4A56;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
}
.audit-action-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #EEF3F7;
  color: #3D4A56;
}
/* Action color coding — green = create/positive, red = destructive, blue = updates, gray = other */
.audit-action-tag.audit-action-create,
.audit-action-tag.audit-action-add,
.audit-action-tag.audit-action-approve,
.audit-action-tag.audit-action-login,
.audit-action-tag.audit-action-mark_answered { background: #d4edda; color: #155724; }
.audit-action-tag.audit-action-delete,
.audit-action-tag.audit-action-deny,
.audit-action-tag.audit-action-remove,
.audit-action-tag.audit-action-force_logout { background: #f8d7da; color: #721c24; }
.audit-action-tag.audit-action-update,
.audit-action-tag.audit-action-edit,
.audit-action-tag.audit-action-reset_password,
.audit-action-tag.audit-action-transfer_super { background: #d1ecf1; color: #0c5460; }
.audit-action-tag.audit-action-logout,
.audit-action-tag.audit-action-expired { background: #e2e3e5; color: #383d41; }
.audit-summary { color: #3D4A56; }
.audit-expand-hint { color: #6B7A85; font-size: 10px; margin-left: 4px; }
.audit-detail td { background: #FAFBFC; padding: 0; }
.audit-changes {
  margin: 0;
  padding: 14px 18px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  color: #3D4A56;
  background: #FAFBFC;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Overlap calendar (admin) ──────────────────────────────────────── */
.overlap-calendar {
  background: #fff;
  border: 1px solid #DDE3E8;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}
.overlap-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #EEF1F4;
  min-height: 38px;
}
.overlap-row:last-child { border-bottom: 0; }
.overlap-row.overlap-header {
  background: #F5F7F9;
  border-bottom: 2px solid #DDE3E8;
  min-height: 28px;
}
.overlap-name {
  flex: 0 0 200px;
  padding: 6px 14px;
  border-right: 1px solid #EEF1F4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  background: #FAFBFC;
}
.overlap-name .badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.overlap-duration {
  font-size: 11px;
  color: #6B7A85;
}
.overlap-row.overlap-header .overlap-name { background: #F5F7F9; }
.overlap-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #3D4A56;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlap-user-meta {
  font-size: 11px;
  color: #6B7A85;
  margin-top: 2px;
}
.overlap-track {
  flex: 1;
  position: relative;
  min-height: 38px;
}
.overlap-row.overlap-header .overlap-track { min-height: 28px; }
.overlap-hour-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid #DDE3E8;
  width: 1px;
}
.overlap-hour-tick span {
  position: absolute;
  top: 5px;
  left: 4px;
  font-size: 10px;
  color: #6B7A85;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.overlap-hour-tick:last-child span {
  left: auto;
  right: 4px;
}
.overlap-gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed #EEF1F4;
  width: 1px;
  pointer-events: none;
}
.overlap-bar {
  position: absolute;
  top: 8px;
  height: 22px;
  border-radius: 3px;
  min-width: 4px;
  cursor: help;
  transition: filter .15s, transform .15s;
  background: var(--brand);  /* uniform GW teal — role lives in the user-column tag */
}
.overlap-bar:hover {
  filter: brightness(1.08);
  transform: scaleY(1.08);
  z-index: 2;
}
/* Bar body = uniform GW teal (set on .overlap-bar above). Role identity
   lives in the user-column badge tag, freeing the bar's right edge to
   carry the session-outcome signal at maximum visual contrast. */
.overlap-end-active  {
  background-image: linear-gradient(to right, transparent 0%, transparent 70%, rgba(255,255,255,.65) 100%);
}
.overlap-end-logout  { box-shadow: inset -6px 0 0 #27ae60; }   /* green cap = signed out */
.overlap-end-forced  { box-shadow: inset -6px 0 0 #e74c3c; }   /* red cap   = forced */
.overlap-end-expired { box-shadow: inset -6px 0 0 #7f8c8d; }   /* gray cap  = timed out */

.overlap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 11px;
  color: #6B7A85;
  padding: 10px 14px;
  background: #FAFBFC;
  border: 1px solid #EEF1F4;
  border-radius: 6px;
}
.overlap-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.overlap-legend-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #3D4A56;
  margin-right: 4px;
}
.overlap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.overlap-legend-dot,
.overlap-legend-dash {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
/* Legend swatches use the same GW teal as the bars so the legend
   reads as a literal mini-bar — the cap is what differentiates. */
.overlap-legend-dash { width: 22px; height: 10px; border-radius: 2px; background: var(--brand); }
.overlap-legend-dash.overlap-end-active  {
  background-image: linear-gradient(to right, transparent 0%, transparent 60%, rgba(255,255,255,.7) 100%);
}
.overlap-legend-dash.overlap-end-logout  { box-shadow: inset -4px 0 0 #27ae60; }
.overlap-legend-dash.overlap-end-forced  { box-shadow: inset -4px 0 0 #e74c3c; }
.overlap-legend-dash.overlap-end-expired { box-shadow: inset -4px 0 0 #7f8c8d; }

/* ── Language toggle (sidebar footer) ──────────────────────────────── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 12px;
  user-select: none;
  font-family: inherit;
}
.lang-toggle-btn {
  border: 0;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.lang-toggle-btn:hover:not(.active) { color: #374151; }
.lang-toggle-en.active { background: var(--brand);   color: #fff; }
.lang-toggle-es.active { background: var(--success); color: #fff; }
.lang-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-toggle-btn[disabled] { opacity: .55; cursor: progress; }