:root {
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --bubble: #eef2f7;            /* base bubble for others */
  --bubble-border: #e5e9f0;
  --radius-xl: 22px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* base */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji", sans-serif;
}

/* header */
.topbar {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(120%) blur(4px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 18px;
  display: flex; align-items: baseline; gap: 10px;
}
.title { font-weight: 700; font-size: 18px; }
.subtitle { color: var(--muted); font-size: 14px; }

/* feed */
.feed {
  max-width: 780px;
  margin: 0 auto;
  padding: 16px 14px 40px;
  display: grid;
  gap: 14px; /* spacing between rows */
}

/* row layout (avatar + content) */
.msg-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr; /* avatar + content */
  gap: 10px;
  align-items: flex-start;

  /* soft “panel” behind each message block */
  padding: 12px 14px;
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.9); /* light grey panel */
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.avatar {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; color: #fff; user-select: none;
  box-shadow: var(--shadow);
  background: #94a3b8; /* default; palette overrides below */
}

.msg-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* name + time pill */
.line-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 8px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.8); /* white-ish overlay for contrast */
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.sender-name { font-weight: 800; }
.msg-time    { color: var(--muted); font-size: 12px; }

/* bubbles (others, default) */
.bubble {
  display: inline-block;
  max-width: 720px;
  background: var(--bubble);
  border: 1px solid var(--bubble-border);
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  line-height: 1.45;
  box-shadow: var(--shadow);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  color: #0f172a;
}
.bubble .mention { font-weight: 800; }
.bubble a { color: #2563eb; text-decoration: underline; }

/* =========================
   MINE (RallyMikeBot)
   ========================= */
.msg-row.mine {
  grid-template-columns: 1fr;              /* drop avatar column */
  background: rgba(34, 197, 94, 0.15);     /* soft green outer panel */
}
.msg-row.mine .avatar { display: none; }   /* hide R circle */
.msg-row.mine .msg-col {
  align-items: flex-end;                   /* right align header + bubble */
  text-align: right;
}
.msg-row.mine .line-top {
  justify-content: flex-end;
  background: rgba(187, 247, 208, 0.9);   /* greenish badge */
}
.msg-row.mine .sender-name { color:#22c55e; }

/* bright green inner bubble with white text */
.msg-row.mine .bubble {
  background: #22c55e;                     /* bright green */
  border: 2px solid #16a34a;               /* darker border */
  padding: 14px 18px;
  border-radius: 28px;                      /* pill-like */
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(34,197,94,.25);
  color: #ffffff;                           /* white text */
}
.msg-row.mine .bubble a { color: #ffffff; text-decoration: underline; }

/* =========================
   Name/avatar color palettes for OTHERS
   ========================= */
.name-c1 .sender-name { color: #22c55e; } .name-c1 .avatar { background:#22c55e; }
.name-c2 .sender-name { color: #2563eb; } .name-c2 .avatar { background:#2563eb; }
.name-c3 .sender-name { color: #f97316; } .name-c3 .avatar { background:#f97316; }
.name-c4 .sender-name { color: #a855f7; } .name-c4 .avatar { background:#a855f7; }
.name-c5 .sender-name { color: #e11d48; } .name-c5 .avatar { background:#e11d48; }
.name-c6 .sender-name { color: #0ea5e9; } .name-c6 .avatar { background:#0ea5e9; }
.name-c7 .sender-name { color: #16a34a; } .name-c7 .avatar { background:#16a34a; }

/* make sure RallyMikeBot name is green even in badges */
.msg-row[data-sender="RallyMikeBot"] .sender-name { color:#22c55e; }

/* animations */
.slot-in  { animation: pop-in 280ms ease-out both; }
@keyframes pop-in { from { transform: translateY(6px); opacity:0 } to { transform: translateY(0); opacity:1 } }
.slot-roll { display:inline-block; transform: translateY(-18px); filter: blur(6px); opacity:.3; animation: reel 650ms cubic-bezier(.22,1,.36,1) both; }
@keyframes reel { 0%{transform:translateY(-24px);filter:blur(6px);opacity:.2}70%{transform:translateY(6px);filter:blur(1px);opacity:.9}100%{transform:translateY(0);filter:blur(0);opacity:1} }

/* responsive */
@media (max-width:520px) {
  .feed { padding: 12px; }
  .msg-row { grid-template-columns: 34px 1fr; }
  .avatar { width:34px; height:34px; font-size: 13px; }
}

/* scroll-to-bottom button (safe-area aware for iOS) */
.scroll-btn {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #2563eb;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 20;
}
.scroll-btn.show { opacity: 1; pointer-events: auto; }
.scroll-btn:hover { background: #1d4ed8; }
.scroll-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }