.chat-room { display:flex; flex-direction:column; height: min(72vh, 720px); }
.chat-room .live-chat-log { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:8px; }
.chat-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.chat-title { margin:0; }
.chat-title-wrap { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.chat-title-wrap .kd-active {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, #4a5970);
  background: var(--bg-surface-alt, #f0f4fa);
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 999px;
  padding: 1px 10px;
  white-space: nowrap;
}
.chat-blocked-link {
  width: auto;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-link, #1a6fbf);
  background: transparent;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.chat-blocked-link:hover { background: transparent; color: var(--color-primary-hover, #155a9a); }
.chat-signup-banner {
  background: rgba(22,163,74,.1);
  border: 1px solid rgba(22,163,74,.35);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  /* Stay fully below the sticky site bar on #chat-rules (F-202).
     --kd-header-offset is the live header height (compact + app safe-area). */
  position: sticky;
  top: calc(var(--kd-header-offset, 64px) + 8px);
  z-index: 20;
}
.chat-signup-banner .btn-secondary {
  background: var(--bg-surface, #fff);
  color: var(--color-secondary-text, #1a2332);
  border: 1px solid var(--border-strong, #b9c5d6);
}
/* Logged-out /chat: opaque activity only (no names, bodies, times).
   The room is sized to its content so there is no tall empty gap above the composer. */
.chat-room[data-login-wall] { height: auto; }
.chat-room[data-login-wall] .live-chat-log { flex: 0 0 auto; max-height: 320px; padding: 14px 10px 6px; }
.lc-skel-note a { color: var(--text-link, #0056b3); font-weight: 600; }
.chat-locked-composer .chat-locked-send {
  background: var(--bg-surface, #fff);
  color: var(--color-secondary-text, #1a2332);
  border: 1px solid var(--border-strong, #b9c5d6);
  white-space: nowrap;
}
.chat-locked-composer .chat-locked-send:hover { background: var(--color-secondary-hover, #d2dde8); }
.lc-skel { padding: 4px 0 8px; }
.lc-skel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.lc-skel-bar {
  display: block;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.14), rgba(0,0,0,.08));
  background-size: 200% 100%;
  animation: lc-skel-pulse 1.4s ease-in-out infinite;
}
.lc-skel-name { width: 72px; flex: 0 0 auto; }
.lc-skel-body { flex: 1 1 auto; max-width: 55%; }
.lc-skel-note {
  margin: 4px 0 8px;
  font-size: 0.9rem;
  color: var(--text-muted, #666);
}
.chat-active-locked {
  margin: 8px 0 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary, #4a5970);
}
@keyframes lc-skel-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.chat-live-banner { background:rgba(220,38,38,.1); border-radius:8px; padding:8px 12px; margin-bottom:8px; }
.lc-row { padding:4px 0; word-break:break-word; }
.lc-name { font-weight:700; margin-right:6px; }
.lc-guest { font-size:.7em; opacity:.7; border:1px solid currentColor; border-radius:6px; padding:0 4px; margin-right:6px; }
.lc-time { font-size:.75em; opacity:.6; margin-right:6px; }
.lc-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.lc-img { display:block; margin-top:4px; max-width:min(100%,320px); max-height:240px; border-radius:8px; }
.lc-sys {
  text-align: center;
  font-size: .85em;
  opacity: .85;
  padding: 6px 10px;
  color: var(--text-muted, #666);
  font-style: italic;
}
.lc-sys[data-sys="joined"],
.lc-sys[data-sys="left"] {
  background: transparent;
  border: none;
}
.chat-hello {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(40, 120, 200, .12), rgba(40, 120, 200, .04));
  border: 1px solid rgba(40, 120, 200, .35);
  border-radius: 6px;
}
.chat-hello[hidden] { display: none !important; }
.chat-hello-btn { width: auto; flex: 0 0 auto; }
.chat-hello-hint { font-size: .9em; color: var(--text-muted, #666); flex: 1 1 120px; }
.chat-hello-dismiss {
  width: auto;
  background: none;
  border: none;
  color: var(--text-muted, #666);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
  font-size: .85em;
}
.chat-notify-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 6px 0 0;
  font-size: .88em;
}
.chat-notify-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: auto;
  margin: 0;
}
.chat-notify-toggle input { width: auto; margin: 0; }
.chat-notify-hint {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 6px 8px;
  font-size: .82em;
  line-height: 1.35;
  color: #6a3b00;
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  border-radius: 6px;
}
.chat-notify-hint[hidden] { display: none !important; }
@media (max-width: 720px) {
  .chat-hello { padding: 8px 10px; }
  .chat-hello-btn { flex: 1 1 auto; }
}
.lc-day { text-align:center; font-size:.75em; opacity:.7; margin:10px 0; display:flex; align-items:center; gap:8px; }
.lc-day::before, .lc-day::after { content:""; flex:1; height:1px; background:currentColor; opacity:.25; }

/* Compact actions inside the log (Report / Block) — never full-width primary bars.
   They sit on the message line (inline with the name and time) or wrap as a tight pair.
   Never inside .lc-body. The owner rejected the 44px tap target on 2026-10-28
   (too big on desktop, phone, and the iOS app). No min-height: 44px here,
   including body.app-shell and (pointer: coarse). */
.lc-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 6px;
  vertical-align: middle;
}
/* Scoped so forum and video Report / Block keep their look.
   Report is the word "report" with no padding. Block is a red "b" after the username.
   Font is 9.6px (12px minus 20 percent). No min-height: 44px, including
   body.app-shell and (pointer: coarse). */
.lc-actions .report-btn,
.lc-actions .lc-locked[data-guest-lock="report"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  margin: 0 1px;
  padding: 0;
  font-size: 9.6px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
  appearance: none;
  color: var(--text-secondary, #4a5970);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  vertical-align: baseline;
  text-transform: none;
}
.lc-row > .block-btn,
.lc-actions .block-btn,
.lc-row > .lc-locked[data-guest-lock="block"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 0;
  min-width: 0;
  margin: 0 1px;
  padding: 1px;
  font-size: 9.6px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  box-sizing: border-box;
  appearance: none;
  color: #fff;
  background: #c0392b;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  vertical-align: middle;
  text-transform: none;
}
.lc-actions .report-btn:hover,
.lc-actions .report-btn:focus-visible,
.lc-actions .lc-locked[data-guest-lock="report"]:hover,
.lc-actions .lc-locked[data-guest-lock="report"]:focus-visible {
  color: var(--color-danger, #c0392b);
  background: transparent;
  border: 0;
}
.lc-row > .block-btn:hover,
.lc-row > .block-btn:focus-visible,
.lc-actions .block-btn:hover,
.lc-actions .block-btn:focus-visible,
.lc-row > .lc-locked[data-guest-lock="block"]:hover,
.lc-row > .lc-locked[data-guest-lock="block"]:focus-visible {
  color: #fff;
  background: #922b21;
  border: 0;
}
@media (max-width: 800px), (pointer: coarse) {
  .lc-actions .report-btn,
  .lc-actions .lc-locked[data-guest-lock="report"],
  .lc-row > .block-btn,
  .lc-actions .block-btn,
  .lc-row > .lc-locked[data-guest-lock="block"] {
    min-height: 0;
    min-width: 0;
    height: auto;
  }
}
body.app-shell .lc-actions .report-btn,
body.app-shell .lc-actions .lc-locked[data-guest-lock="report"],
body.app-shell .lc-row > .block-btn,
body.app-shell .lc-actions .block-btn,
body.app-shell .lc-row > .lc-locked[data-guest-lock="block"] {
  min-height: 0;
  min-width: 0;
  height: auto;
}
.lc-actions button {
  width: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0 4px;
  font-size: 0.75em;
  line-height: 1.4;
}

/* Guest locked controls: muted text / icon size, secondary look */
button.lc-locked,
.lc-locked {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 2px 6px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted, #6b7280);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  opacity: 1;
  text-decoration: none;
}
button.lc-locked:hover,
.lc-locked:hover,
button.lc-locked:focus-visible,
.lc-locked:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary, #4b5563);
  outline: none;
}
.lc-locked .lc-lock-ico { font-size: 0.7em; opacity: 0.75; }
.chat-top-sentinel .lc-locked {
  font-size: 0.8rem;
  padding: 4px 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  background: var(--bg-surface, #f7f7f7);
  color: var(--text-secondary, #4b5563);
}
.chat-top-sentinel .lc-locked:hover { background: var(--color-secondary, #eee); }

/* Room composer: column shell so chip sits above one clean input row */
.chat-page .live-chat-form,
.chat-room .live-chat-form,
.chat-locked-composer.live-chat-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 4px;
}
/* The global `form { margin: 20px auto }` (styles.css) must not push the composer away from the log. */
.chat-room .live-chat-form { margin: 0; }
.chat-compose {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
}
.chat-compose input[type=text],
.chat-compose input[data-chat-body],
.chat-compose textarea[data-chat-body] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  font-size: 16px;
  box-sizing: border-box;
}
.chat-compose textarea[data-chat-body] {
  resize: vertical;
  min-height: 40px;
  max-height: 160px;
  line-height: 1.35;
  padding: 8px 10px;
  font-family: inherit;
}
.chat-compose .btn,
.chat-compose button[type=submit] {
  flex: 0 0 auto;
  width: auto;
  min-width: 4.25rem;
  padding: 8px 14px;
}
.chat-attach {
  flex: 0 0 auto;
  width: auto;
  cursor: pointer;
  min-height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  color: inherit;
}
.chat-attach:hover { background: rgba(0, 0, 0, 0.05); }
button.chat-attach.lc-locked {
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid var(--border, #ddd);
  background: transparent;
  color: var(--text-muted, #6b7280);
}
.chat-image-chip {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 0.9em;
}
.chat-image-chip[hidden] { display: none !important; }
.chat-image-chip button,
.chat-image-chip [data-image-clear] {
  width: auto;
  min-width: 28px;
  min-height: 28px;
  padding: 0 6px;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-secondary, #666);
  background: var(--color-secondary, #eee);
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
}
.chat-image-chip button:hover,
.chat-image-chip [data-image-clear]:hover {
  background: var(--color-secondary-hover, #e2e2e2);
  color: var(--text-primary, #111);
}
.chat-guest-prompt { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chat-locked-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 0;
  align-items: center;
}
.chat-locked-composer .chat-locked-row .lc-locked {
  font-size: 0.72rem;
  padding: 2px 4px;
  color: var(--text-secondary, #4a5970);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-state { padding:10px; border-radius:10px; background:rgba(220,38,38,.12); margin-top:8px; }
.chat-admin-banner { background:#fee2e2; color:#7f1d1d; padding:8px 12px; border-radius:8px; margin-bottom:8px; }
.admin-asterisk { color:#b91c1c; font-weight:800; margin-left:2px; }

/* Age gate DOB: three native selects, year list starts at today-13 */
.chat-age-gate { max-width:480px; margin:1rem auto; padding:1.25rem; }
.chat-age-form { display:flex; flex-direction:column; gap:12px; }
.chat-age-terms { display:flex; gap:8px; align-items:flex-start; }
.chat-dob { display:flex; flex-direction:column; gap:6px; }
.chat-dob-label { font-weight:600; }
.chat-dob-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.chat-dob-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  flex: 1 1 0;
  min-width: 5.5rem;
}
.chat-dob-field select {
  width: 100%;
  min-height: 44px;
  font-size: 16px;
  padding: 8px;
  box-sizing: border-box;
}
.chat-rules { margin-top:12px; }
.chat-active-users { margin-top:16px; }
.chat-active-list { list-style:none; padding:0; margin:8px 0 0; }
.chat-active-list li { padding:4px 0; font-size:0.95rem; }
.chat-active-empty { margin:8px 0 0; font-size:0.9rem; }
.chat-active-empty[hidden] { display:none !important; }
.chat-blocked { margin-top:16px; }
/* Hash jumps: js/site_header.js sets html scroll-padding-top to the live header
   height + 8px (--kd-header-offset; compact + app-shell safe-area). This is the extra gap. */
#blocked-panel, #active-users-panel, #chat-rules { scroll-margin-top: 8px; }
.chat-blocked-empty { margin: 8px 0 0; font-size: 0.95rem; }
.chat-blocked-empty[hidden] { display: none !important; }
.chat-blocked-list { list-style:none; padding:0; }
.chat-blocked-list li { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; }
.chat-block-add { display:flex; gap:8px; margin-top:8px; }
.live-chat-room-link { font-size:.8em; font-weight:600; margin-left:8px; }
.live-chat-nudge, .live-chat-hint { font-size:.9em; margin:6px 0; }
.live-chat-keys-hint { font-size:.8em; margin:4px 0 0; opacity:.75; }
@media (max-width:800px), (pointer:coarse) {
  .live-chat-keys-hint { display:none; }
}
.home-chooser-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
@media (max-width:700px){
  .chat-room { height: calc(100dvh - 230px); }
  .chat-room[data-login-wall] { height: auto; }
  .home-chooser-grid { grid-template-columns:1fr; }
  .chat-page .live-chat-form .btn,
  .chat-room .live-chat-form .btn,
  .chat-compose .btn {
    width: auto;
  }
  .chat-dob-field { min-width: calc(33% - 8px); }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }