/* Shoutbox. Uses the shared tokens from style.css and adds nothing to the global
   namespace beyond .shoutbox descendants, matching how learn.css is scoped. */

.shoutbox {
  width: 100%;
  max-width: 720px;
  padding: 18px 20px 40px;
  display: flex;
  flex-direction: column;
  /* The log scrolls, not the page: the canvas is the thing that should scroll here. */
  height: calc(100vh - 190px);
  min-height: 320px;
}

.sb-head { flex: none; }
.sb-head h2 { margin: 0 0 4px; font-size: 20px; }
.sb-sub { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.sb-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid #23262d;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}
.sb-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 0; }

.sb-msg { margin: 0 0 7px; word-wrap: break-word; overflow-wrap: anywhere; }
.sb-msg:last-child { margin-bottom: 0; }
.sb-who { color: var(--accent); font-weight: 600; }
.sb-msg.is-mine .sb-who { color: #00D3DD; }
.sb-when { color: #5e636d; font-size: 11px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.sb-body { color: var(--text); }

.sb-form { flex: none; display: flex; gap: 8px; margin-top: 12px; }
.sb-form input {
  font: inherit; font-size: 14px; flex: 1 1 auto;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid #2f333c; background: #101218; color: var(--text);
}
.sb-form input:focus { outline: none; border-color: var(--accent); }
.sb-form input:disabled { opacity: 0.55; cursor: not-allowed; }
.sb-form button {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 20px; border: none; border-radius: 8px;
  background: var(--accent); color: #06070a; cursor: pointer;
}
.sb-form button:disabled { opacity: 0.45; cursor: default; }

.sb-note { flex: none; margin: 9px 2px 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.sb-note.err { color: #ff6b6b; }
.sb-note a { color: var(--accent); }