body {
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 600px;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 32px;
}
h1 {
  color: #e74c3c;
  margin-bottom: 8px;
}
p {
  font-size: 1.1em;
}
.examples {
  margin-top: 24px;
}
.bad {
  background: #ffeaea;
  border-left: 4px solid #e74c3c;
  padding: 12px;
  margin-bottom: 16px;
}
.good {
  background: #eaffea;
  border-left: 4px solid #27ae60;
  padding: 12px;
}
footer {
  margin-top: 32px;
  text-align: center;
  color: #888;
  font-size: 0.95em;
}
a {
  color: #3498db;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* --- Chat section polish --- */
:root {
  --bg: #f7f7f7;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --bubble-left: #f1f5f9; /* slate-100 */
  --bubble-right: #4f46e5; /* indigo-600 */
  --radius: 16px;

  /* New: more realistic bubble styling tokens */
  --bubble-left-bg: #ffffff;
  --bubble-left-border: #e2e8f0; /* slate-200 */
  --bubble-shadow: 0 1px 1px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06);
  --bubble-right-bg: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  --bubble-right-accent: #4338ca; /* for small UI elements on right bubbles */
}

/* widen only the example containers to allow side-by-side layout */
.container.nonos,
.container.yepyep {
  max-width: 1000px;
}

.container.nonos,
.container.yepyep {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.sections .section-title {
  margin-top: 0;
  margin-bottom: 12px;
}

.list-card {
  background: var(--card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Chat examples container */
.list-card.example {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start; /* children start left unless overridden */
}

/* Single message row */
.list-card.example .slack {
  display: grid;
  grid-template-columns: 48px auto; /* avatar then bubble to its right */
  column-gap: 12px;
  align-items: start;
  width: fit-content;
  max-width: 100%;
  /* 3-row grid in the bubble column: name, time, message */
  grid-template-rows: auto auto auto;
}
/* Place text elements in the right-hand column by default */
.list-card.example .slack .slackname,
.list-card.example .slack .slacktime,
.list-card.example .slack .slackmessage {
  grid-column: 2;
}
/* Position rows: name (row1), time (row2), message (row3) */
.list-card.example .slack .slackname { grid-row: 1; }
.list-card.example .slack .slacktime { grid-row: 2; }
.list-card.example .slack .slackmessage { grid-row: 3; }

/* Avatar */
.list-card.example .slack picture,
.list-card.example .slack img {
  width: 40px;
  height: 40px;
}
.list-card.example .slack img {
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Name + time line */
.slackname {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}
.slacktime {
  color: #94a3b8; /* slate-400 */
  font-size: 12px;
  margin-left: 0;
  margin-top: -17px;
}

/* Bubble */
.slackmessage {
  /* Left (incoming) bubble */
  background: var(--bubble-left-bg);
  border: 1px solid var(--bubble-left-border);
  box-shadow: var(--bubble-shadow);
  display: inline-block;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 6px; /* soften corners, tighter near tail */
  max-width: 76%;
  line-height: 1.5;
  color: var(--text);
  position: relative;
  margin-top: 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap; /* respect line breaks */
  transition: filter 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.slackmessage:hover {
  filter: brightness(1.01);
}
.slackmessage::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 12px;
  width: 0; height: 0;
  border-right: 6px solid var(--bubble-left-bg);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
/* Tiny border for the left tail to match the bubble border */
.slackmessage::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 12px;
  width: 0; height: 0;
  border-right: 7px solid var(--bubble-left-border);
  visibility: hidden;
}

/* Right-aligned messages (by role): add .right to the .slack row */
.list-card.example .slack.right {
  grid-template-columns: 48px auto;
  align-self: flex-end; /* push the whole row to the right */
}
.list-card.example .slack.right picture {
  grid-column: 1;
}
.list-card.example .slack.right .slackname,
.list-card.example .slack.right .slacktime,
.list-card.example .slack.right .slackmessage {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}
.list-card.example .slack.right .slackmessage {
  background: var(--bubble-right-bg);
  color: #fff;
  border: none;
  box-shadow: var(--bubble-shadow);
  border-radius: 14px 6px 14px 14px; /* tighter near the right tail */
}
.list-card.example .slack.right .slackmessage::after {
  left: auto;
  right: -6px;
  border-right: none;
  border-left: 6px solid #4f46e5; /* end color of the gradient */
}
/* Right bubble tail subtle glow/edge */
.list-card.example .slack.right .slackmessage::before {
  content: '';
  position: absolute;
  right: -7px;
  top: 12px;
  width: 0; height: 0;
  border-left: 7px solid rgba(0,0,0,0.12);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* Tidy up spacing between name/time and bubble */
.slackname ~ br { display: none; }
.slackname + .slacktime { vertical-align: baseline; }

/* Slightly tighten stacked message spacing for realism */
.list-card.example .slack + .slack .slackmessage { margin-top: 4px; }

/* Inline content styles inside bubbles */
.slackmessage a {
  color: #2563eb; /* blue-600 */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.list-card.example .slack.right .slackmessage a {
  color: #bfdbfe; /* blue-200 for contrast on dark bubble */
}
.slackmessage code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 0 4px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}
.list-card.example .slack.right .slackmessage code {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
}

/* Optional: compact timestamps fade like Slack when near bubbles */
.slacktime {
  opacity: 0.9;
}
.list-card.example .slack:hover .slacktime {
  opacity: 1;
}

/* Responsive: stack columns and widen chat bubbles a bit */
@media (max-width: 720px) {
  .container.nonos,
  .container.yepyep {
    grid-template-columns: 1fr;
  }
  .slackmessage { max-width: 86%; }
}

/* Reorder in the first example: show Carter's second message first (left, gray) */
.list-card.example.one .slack:nth-child(2) {
  order: -1;
}