.shoutbox { max-width: 600px; }
.shoutbox-messages { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.25rem; max-height: 250px; overflow-y: auto; padding-right: 0.5rem; }

/* Subtle thread divider — a faded line that tapers at both edges so it
   reads as a separator without drawing attention. Applied to every
   immediate child of .shoutbox-messages (root shouts AND reply groups)
   except the last, so successive conversations feel distinct. */
.shoutbox-messages > *:not(:last-child)::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 0.85rem;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 10%,
    rgba(255, 255, 255, 0.14) 90%,
    transparent 100%);
}
.shoutbox-msg { display: flex; gap: 0.75rem; align-items: baseline; }
.shoutbox-msg__name { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-red-bright); white-space: nowrap; min-width: 65px; }
.shoutbox-msg__text { font-family: var(--font-body); font-size: 0.85rem; color: var(--color-body-text); }
.shoutbox-msg__time { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; color: var(--color-date); white-space: nowrap; }
.shoutbox-msg__reply-prefix { font-family: var(--font-mono); font-size: 0.72em; color: var(--color-red-bright); margin-right: 0.2rem; }

.shoutbox-replies { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.35rem 0 0.1rem 1.5rem; padding-left: 0.6rem; border-left: 1px solid var(--color-border); }
.shoutbox-msg--reply .shoutbox-msg__name { min-width: 55px; font-size: 0.65rem; }
.shoutbox-msg--reply .shoutbox-msg__text { font-size: 0.8rem; }

.shoutbox-reply-btn { background: none; border: none; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; padding: 0 0.3rem; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); }
.shoutbox-msg:hover .shoutbox-reply-btn, .shoutbox-reply-btn:focus { opacity: 1; }
.shoutbox-reply-btn:hover { color: var(--color-red-bright); }
@media (pointer: coarse) { .shoutbox-reply-btn { opacity: 0.55; } }

/* Narrow screens: stack each shout vertically so name+date live on the
   header row, the message takes the full width below, and the reply
   action sits on its own row at the right. Avoids the cramped row
   layout where text wraps awkwardly between fixed name column and
   right-pinned time/reply. */
@media (max-width: 768px) {
  .shoutbox-msg {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name time"
      "text text"
      "reply .";
    column-gap: 0.5rem;
    row-gap: 0.15rem;
    align-items: baseline;
  }
  .shoutbox-msg__name { grid-area: name; min-width: 0; }
  .shoutbox-msg__time { grid-area: time; margin: 0; }
  .shoutbox-msg__text { grid-area: text; }
  .shoutbox-reply-btn { grid-area: reply; justify-self: start; padding: 0; opacity: 0.55; }
  .shoutbox-msg--reply .shoutbox-msg__name { font-size: 0.6rem; }

  /* Input row stacks: name on its own top row, message + send share
     the bottom row so the action sits next to the field it submits. */
  .shoutbox-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name name"
      "text send";
    gap: 0.5rem;
  }
  .shoutbox-input-row #shoutbox-name { grid-area: name; max-width: none !important; }
  .shoutbox-input-row #shoutbox-text { grid-area: text; }
  .shoutbox-input-row #shoutbox-send { grid-area: send; }
}

.shoutbox-expand { background: none; border: none; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; cursor: pointer; padding: 0.1rem 0; text-align: left; transition: color var(--transition-fast); }
.shoutbox-expand:hover { color: var(--color-red-bright); }

.shoutbox-reply-bar[hidden] { display: none; }
.shoutbox-reply-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-muted); }
.shoutbox-reply-bar > span { flex: 1; }
.shoutbox-reply-bar button { background: none; border: none; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; padding: 0; line-height: 1; transition: color var(--transition-fast); }
.shoutbox-reply-bar button:hover { color: var(--color-red-bright); }

.shoutbox-input-row { display: flex; gap: 0.5rem; }
.shoutbox-input-row input { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-body); font-size: 0.85rem; padding: 0.55rem 0.75rem; border-radius: 3px; outline: none; transition: border-color var(--transition-fast); }
.shoutbox-input-row input:focus { border-color: var(--color-red); }
.shoutbox-input-row input::placeholder { color: var(--color-text-muted); }
.shoutbox-input-row button { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.55rem 1rem; background: var(--color-red); border: 1px solid var(--color-red); color: var(--color-text); cursor: pointer; border-radius: 3px; transition: all var(--transition-fast); }
.shoutbox-input-row button:hover { background: var(--color-red-bright); box-shadow: 0 0 15px var(--color-red-glow); }