/* The home page's group chat (group-chat.js plays it): a messenger window, dark in both
   themes like the phones beside it. Other people's bubbles on the left with their avatar and
   name, yours in orange on the right, the time tucked under the text. */

.gc {
  --gc-bg: #141417;
  --gc-line: rgba(255, 255, 255, 0.07);
  --gc-bubble: #24252a;
  --gc-ink: #f2eee6;
  --gc-dim: rgba(242, 238, 230, 0.5);
  --gc-on-accent: #1d1308;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: var(--gc-bg);
  border: 1px solid var(--gc-line);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.6);
  color: var(--gc-ink);
  font-family: var(--font-body);
  text-align: left;
}
[data-theme="light"] .gc {
  box-shadow: 0 40px 80px -24px rgba(40, 33, 28, 0.35);
}

/* ---------- header: the group, its numbers, the playback speed ---------- */
.gc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--gc-line);
}
.gc-group {
  display: flex;
  flex: none;
}
.gc-group img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--gc-bg);
  background: #26262b;
}
.gc-group img + img {
  margin-left: -11px;
}
.gc-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.gc-title strong {
  font-size: 15px;
  font-weight: 700;
}
.gc-title span {
  font-size: 12px;
  color: var(--gc-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-speed {
  margin-left: auto;
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--gc-dim);
  font: 600 11px / 1 var(--font-mono);
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.gc-speed:hover {
  color: var(--gc-ink);
}
.gc-speed.fast {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
}

/* ---------- the feed: pinned to the bottom, older messages fade out at the top ---------- */
.gc-feed {
  height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0 14px 14px;
  /* every append shifts the rows above it: keep the page from following them */
  overflow-anchor: none;
  -webkit-mask-image: linear-gradient(transparent, #000 70px);
  mask-image: linear-gradient(transparent, #000 70px);
}
.gc-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.gc-row.me {
  justify-content: flex-end;
}
.gc-ava {
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  background: #26262b;
}
.gc-ava img {
  display: block;
  width: 100%;
  height: 100%;
}
.gc-row.me .gc-ava {
  display: none;
}
.gc-msg {
  max-width: 78%;
  padding: 7px 12px 6px;
  border-radius: 18px 18px 18px 6px;
  background: var(--gc-bubble);
  font-size: 14.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.gc-row.me .gc-msg {
  border-radius: 18px 18px 6px 18px;
  background: var(--accent);
  color: var(--gc-on-accent);
}
.gc-who {
  display: block;
  margin-bottom: 1px;
  font-size: 12px;
  font-weight: 700;
}
.gc-row.me .gc-who {
  display: none;
}
.gc-who.c1 {
  color: #84b4ff;
}
.gc-who.c2 {
  color: #e795d9;
}
.gc-who.c3 {
  color: #72cf9a;
}
.gc-who.c4 {
  color: #63cfd6;
}
.gc-who.c5 {
  color: #efc964;
}
.gc-who.c6 {
  color: #b8a3ff;
}
.gc-who.c7 {
  color: #ff9191;
}
.gc-when {
  display: block;
  margin-top: 1px;
  text-align: right;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--gc-dim);
}
.gc-row.me .gc-when {
  color: rgba(29, 19, 8, 0.55);
}
/* a shared ClimbSync link, as a little preview card */
.gc-link {
  display: block;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
  font-size: 12.5px;
  font-weight: 700;
}
/* the visitor, once they type: outlined, the stranger in the group */
.gc-row.real .gc-msg {
  background: transparent;
  color: var(--gc-ink);
  border: 1.5px dashed color-mix(in oklab, var(--accent) 70%, transparent);
}
.gc-row.real .gc-who {
  display: block;
  color: var(--accent);
}
.gc-row.real .gc-when {
  color: var(--gc-dim);
}

/* typing: three dots in the bubble before the words land */
.gc-dots {
  display: inline-flex;
  gap: 4px;
  padding: 6px 2px;
}
.gc-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
@media (prefers-reduced-motion: no-preference) {
  .gc-dots i {
    animation: gc-dot 1s ease-in-out infinite;
  }
  .gc-dots i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .gc-dots i:nth-child(3) {
    animation-delay: 0.3s;
  }
}
@keyframes gc-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}

/* system lines: a new day, the admin's verdict, the skipped messages */
.gc-sys {
  justify-content: center;
}
.gc-day,
.gc-pill,
.gc-skip {
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gc-dim);
  font-size: 11.5px;
  font-weight: 600;
}
.gc-pill {
  color: color-mix(in oklab, var(--accent) 80%, white);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}

/* ---------- composer ---------- */
.gc-composer {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--gc-line);
}
.gc-composer input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1d1e22;
  color: var(--gc-ink);
  font: 500 14px var(--font-body);
  outline: none;
  transition: border-color 0.15s;
}
.gc-composer input::placeholder {
  color: rgba(242, 238, 230, 0.38);
}
.gc-composer input:focus {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}
.gc-composer button {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.gc-composer button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gc-on-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gc-composer input:disabled,
.gc-composer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 820px) {
  .gc {
    max-width: 100%;
    border-radius: 24px;
  }
  .gc-feed {
    height: 400px;
  }
}