/* Subtitle under H1 */
.cf-chat-subtitle{
  margin-top:-6px;
  margin-bottom:18px;
  font-size:0.95rem;
  font-weight:500;
  opacity:.8;
  color:#7a4a2a; /* warm camp-brown */
}

/* Chat container */
.cf-chat{ display:block; max-width:780px; margin:16px auto; }
.cf-chat--compact .cf-bubble{ padding:8px 12px; font-size:.95rem; }

/* Lines */
.cf-line{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.cf-line.is-right{ flex-direction:row-reverse; }
.cf-line.is-narrator{ justify-content:center; gap:0; }

/* Avatar / initials */
.cf-avatar{ width:36px; height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:center; }
.cf-line.is-narrator .cf-avatar{ display:none; }

.cf-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:#3b2a1a; color:#fff; font-weight:700; font-size:.85rem;
  box-shadow:0 1px 3px rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.08);
}

/* Bubble + text */
.cf-bubble{
  position:relative; max-width:80%;
  background:#fbf5ef; color:#2c1e12; border:1px solid rgba(0,0,0,.08);
  padding:10px 14px; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.cf-line.is-right .cf-bubble{ background:#f4ece4; }
.cf-line.is-narrator .cf-bubble{
  background:transparent; border:none; box-shadow:none; padding:0; max-width:100%;
  color:#4a3422; font-style:italic;
}

.cf-speaker{ font-size:.8rem; font-weight:600; margin-bottom:4px; opacity:.7; }
.cf-line.is-narrator .cf-speaker{ display:none; }
.cf-text{ line-height:1.5; }

/* Grid cards for [campfire_chat_list] */
.cf-chat-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:16px; margin:12px 0 8px;
}
.cf-chat-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:14px; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.cf-chat-title{ margin:0 0 8px; font-size:1.05rem; }
.cf-chat-speakers{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cf-chip{
  background:#fbf5ef; border:1px solid rgba(0,0,0,.08); border-radius:999px;
  padding:4px 8px; font-size:.8rem;
}

/* Ticker */
.cf-chat--ticker{
  white-space:nowrap; overflow:hidden; position:relative; display:block;
}
.cf-chat--ticker .cf-line{
  display:inline-flex; margin:0 20px; vertical-align:top;
}
.cf-chat--ticker .cf-bubble{
  display:inline-block; max-width:none;
}
.cf-chat--ticker:before, .cf-chat--ticker:after{
  content:""; position:absolute; top:0; bottom:0; width:24px; pointer-events:none;
}
.cf-chat--ticker:before{ left:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.cf-chat--ticker:after{ right:0; background:linear-gradient(to left, #fff, rgba(255,255,255,0)); }

.cf-chat--ticker{
  --speed: 18s;     /* JS will set actual duration based on content width */
  --trailpx: 240px; /* JS will set trailing space */
}
.cf-chat--ticker > *{
  display:inline-block; padding-right:var(--trailpx);
  animation: cfTicker var(--speed) linear infinite;
}

/* Slightly faster narrator vibe */
.cf-chat--ticker .is-narrator > *{ animation-duration: calc(var(--speed) * 0.92); }

@keyframes cfTicker {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}