/*
 * huddle.css — The Huddle: in-product messages.
 *
 * One component, two surfaces: a single card at the foot of Home and the full
 * archive at /huddle. Light-first with `.dark` overrides, matching
 * discover_tabs.css — the app toggles a class, it does not read
 * prefers-color-scheme.
 *
 * The poll INSIDE a poll message is styled by polls.css; this file owns the
 * envelope only, so the two can never disagree about the bars.
 */

.hd-msg {
  border: 1px solid rgba(15,23,42,0.10);
  background: #fff;
  border-radius: 13px;
  padding: 15px 16px 14px;
  margin-bottom: 10px;
}
.dark .hd-msg { background: #0f172a; border-color: rgba(148,163,184,0.14); }

/* Unread carries a rail rather than a dot: a dot is a badge you must decode,
   a rail reads as "this one" at a glance. */
.hd-msg.hd-unread { border-left: 3px solid #10b981; }
.hd-msg.hd-seen-row { opacity: 0.66; }
.hd-msg.hd-seen-row:hover { opacity: 1; }

.hd-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hd-kind {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10); color: #6b7280;
}
.dark .hd-kind { border-color: rgba(148,163,184,0.18); color: #94a3b8; }
.hd-kind.hd-poll { color: #047857; border-color: rgba(16,185,129,0.40); background: rgba(16,185,129,0.08); }
.dark .hd-kind.hd-poll { color: #34d399; }
.hd-kind.hd-news { color: #6d28d9; border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.07); }
.dark .hd-kind.hd-news { color: #a78bfa; }
.hd-kind.hd-account { color: #92400e; border-color: rgba(245,158,11,0.38); background: rgba(245,158,11,0.08); }
.dark .hd-kind.hd-account { color: #fbbf24; }

.hd-when { margin-left: auto; font-size: 10.5px; color: #9aa8b6; }
.dark .hd-when { color: #64748b; }

.hd-title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: #111827; margin: 8px 0 2px; }
.dark .hd-title { color: #f1f5f9; }
.hd-body { font-size: 12.5px; line-height: 1.55; color: #4b5563; margin: 0; }
.dark .hd-body { color: #94a3b8; }

.hd-link {
  display: inline-block; margin-top: 10px;
  font-size: 12.5px; font-weight: 700; color: #047857; text-decoration: none;
}
.dark .hd-link { color: #34d399; }
.hd-link:hover { text-decoration: underline; }

.hd-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(15,23,42,0.07);
}
.dark .hd-foot { border-top-color: rgba(148,163,184,0.12); }
.hd-dismiss {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: #8b98a5; text-decoration: underline;
}
.dark .hd-dismiss { color: #64748b; }
.hd-dismiss:hover { color: #111827; }
.dark .hd-dismiss:hover { color: #e2e8f0; }
.hd-more { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #047857; text-decoration: none; }
.dark .hd-more { color: #34d399; }

/* The archive's quiet state. An empty inbox should read as "nothing to do",
   not as a broken page — and never as a permanent unread dot. */
.hd-empty {
  text-align: center; padding: 34px 16px;
  border: 1px dashed rgba(15,23,42,0.14); border-radius: 13px; color: #6b7280;
}
.dark .hd-empty { border-color: rgba(148,163,184,0.20); color: #94a3b8; }
.hd-empty .hd-tick { font-size: 26px; line-height: 1; }

/* Nav bell badge */
.hd-bell { position: relative; display: inline-flex; }
.hd-dot {
  position: absolute; top: -2px; right: -3px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: #10b981; color: #04231a;
  font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}