/* ---------- Soft Light Theme Tokens (not bright white) ---------- */
:root[data-theme="light"] {
  --bg: #d8dde3;
  --panel: #e2e6ec;
  --panel-2: #d8dde3;
  --card: #e6e9ee;
  --card-2: #e3e6eb;
  --body-grad-2: #cfd5dc;
  --text: #1a1f29;
  --text-strong: #10141c;
  --muted: #5f6978;
  --accent: #0d6efd;
  --accent-2: #1ea493;
  --success: #11895c;
  --own-bg: #2b6eea;
  --other-bg: #cfd5dc;
  --header-glass-from: rgba(226,230,236,.92);
  --header-glass-to:   rgba(226,230,236,.88);
  --composer-glass-from: rgba(226,230,236,.95);
  --composer-glass-to:   rgba(226,230,236,.98);
  --input-bg: #dfe3e8;
  --border-weak:   rgba(0,0,0,0.09);
  --border-weak-2: rgba(0,0,0,0.07);
  --scroll-track: #d3d9e0;
  --scroll-thumb: #a8b3c4;
  --scroll-thumb-hover: #8493a9;
}

:root[data-theme="light"] body{
  background: linear-gradient(180deg,#f3f6fc 0%, var(--body-grad-2) 100%);
}

/* Light bubble variants */
:root[data-theme="light"] .bubble.other {
  background: #eaf2ff;
  color: #1a1f29;
  border-color: #cfe0f5;
}

:root[data-theme="light"] .bubble.own {

  color: #fff;
}

/* ---------- Light-only comfort tweaks ---------- */
:root[data-theme="light"] .chatTitle .title { color: var(--text-strong); }
:root[data-theme="light"] .userItemBtn:hover { background: rgba(0,0,0,.04); }
:root[data-theme="light"] .iconBtn:hover { background: rgba(0,0,0,.06); color: var(--text-strong); }
:root[data-theme="light"] .tinyBtn {
  border-color: rgba(255,255,255,0.5);
  background: rgb(220 225 231);
  color: var(--muted);
}
:root[data-theme="light"] .deletedMsg { border-color: rgba(2,6,23,.16); }
:root[data-theme="light"] .channelItem {
  background: transparent;
  color:black;
  border-color: rgba(2,6,23,.06);
}
:root[data-theme="light"] .channelItem:hover { background: rgba(0,0,0,.04) }
:root[data-theme="light"] .channelItem.active { background: rgba(0,0,0,.04) }
:root[data-theme="light"] .reactionBtn{
  border-color: rgba(2,6,23,.10);
  background: rgba(0,0,0,.04);
  color: var(--text);
}
:root[data-theme="light"] .soonBadge {
  background: rgb(0 76 255 / 12%);
  color: #ffffff;
  border: 1px solid rgb(190 202 229);
}
:root[data-theme="light"] .reactionBtn:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(2,6,23,.14);
}
:root[data-theme="light"] .reactionBtn.user-reacted{
  outline: 1px solid rgba(30,164,147,.45);
  background: rgba(30,164,147,.10);
  color: var(--text-strong);
}
:root[data-theme="light"] .meta .sender { color: black;}
:root[data-theme="light"] .ago { color: white;}

:root[data-theme="light"] .sidebarFooter {
  background: var(--panel);
  border-top: 1px solid var(--border-weak);
}
:root[data-theme="light"] #miniProfileBtn { color: var(--text); }
:root[data-theme="light"] #miniProfileBtn:hover { background: rgba(0,0,0,0.04); }
:root[data-theme="light"] .avatar-28 .statusDot { border: 2px solid var(--panel); }
/* Table header – light theme */
:root[data-theme="light"] .table thead {
  /* Bootstrap table CSS-vars (cascade to header cells) */
  --bs-table-bg: var(--panel);
  --bs-table-color: var(--text-strong);
  --bs-table-border-color: var(--border-weak);
}

:root[data-theme="light"] .table thead th,
:root[data-theme="light"] .table thead td {
  background-color: var(--panel);        /* hard fallback */
  color: var(--text-strong);
  border-bottom: 1px solid var(--border-weak);
}

/* If a table has .table-dark but you still want a light header */
:root[data-theme="light"] .table.table-dark thead {
  --bs-table-bg: var(--panel);
  --bs-table-color: var(--text-strong);
}