/* PROSPER community chat — ice-royal styling on top of styles.css.
   Palette and surfaces come from the shared custom properties (frosted
   panels, ice rims, sapphire accents). */

.chat-page { max-width: 900px; }
.chat-gate { margin-top: 1.6rem; }
.chat-gate h3 { margin-top: 0; }

.chat-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding: 1rem 1.2rem; border-radius: var(--radius);
  border: 1px solid var(--ice-mid); background: rgba(79, 195, 255, 0.08);
  box-shadow: inset 0 0 18px rgba(79, 195, 255, 0.12);
}
.chat-banner p { margin: 0; color: var(--ice-soft); }
.chat-banner-warn { border-color: var(--full); background: rgba(255, 194, 79, 0.07); box-shadow: none; }
.chat-banner-warn p { color: var(--full); }

.chat-panel { margin-top: 1.6rem; display: flex; flex-direction: column; }
.chat-older { align-self: center; margin-bottom: 0.8rem; }

.chat-messages {
  display: flex; flex-direction: column; gap: 0.9rem;
  max-height: 62vh; overflow-y: auto; padding: 0.4rem 0.2rem 0.8rem;
  scrollbar-width: thin; scrollbar-color: var(--sapphire) transparent;
}
.chat-empty { text-align: center; padding: 1.2rem 0; }

.chat-msg { display: flex; gap: 0.7rem; align-items: flex-start; }
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover;
  border: 1px solid var(--ice-mid); background: rgba(79, 195, 255, 0.08);
}
.chat-avatar-empty { display: inline-block; }
.chat-msg-main { min-width: 0; flex: 1; }
.chat-msg-head {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 0 0 0.15rem;
}
.chat-author { font-weight: 700; color: var(--ice-soft); }
.chat-msg.is-mine .chat-author { color: var(--ice); }
.chat-verified { font-size: 0.62rem; padding: 0.12rem 0.5rem; }
.chat-staff-badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #0a0f16; background: var(--ice); border-radius: 999px; padding: 0.14rem 0.5rem;
}
.chat-time { color: var(--faint); font-size: 0.78rem; }
.chat-report-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--faint); font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.3rem;
}
.chat-report-btn:hover { color: var(--err); }
.chat-body { margin: 0; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-body-deleted { color: var(--faint); font-style: italic; }

.chat-report-form {
  margin-top: 0.55rem; border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 0.8rem 0.9rem; background: rgba(79, 195, 255, 0.04);
}
.chat-report-form label { display: block; font-size: 0.85rem; color: var(--muted); }
.chat-report-form textarea {
  width: 100%; margin-top: 0.4rem; box-sizing: border-box;
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.55rem 0.7rem; font: inherit;
}
.chat-report-msg { margin: 0.4rem 0; font-size: 0.85rem; }
.chat-report-msg.error { color: var(--err); }
.chat-report-done { margin: 0.55rem 0 0; color: var(--ok); font-size: 0.85rem; }

.chat-composer { border-top: 1px solid var(--line-soft); padding-top: 1rem; margin-top: 0.4rem; }
.chat-input-label { position: absolute; left: -9999px; }
.chat-composer textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 3rem;
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.7rem 0.85rem; font: inherit;
}
.chat-composer textarea:focus { outline: 2px solid var(--sapphire); outline-offset: 1px; }
.chat-composer textarea:disabled { opacity: 0.55; }
.chat-composer-bar {
  display: flex; align-items: center; gap: 0.9rem; margin-top: 0.6rem; flex-wrap: wrap;
}
.chat-rules { flex: 1; font-size: 0.78rem; min-width: 220px; }
.chat-count { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-count.over { color: var(--err); font-weight: 700; }
.chat-warning {
  border: 1px solid var(--full); color: var(--full); border-radius: 10px;
  padding: 0.6rem 0.85rem; margin: 0 0 0.8rem; font-size: 0.9rem;
  background: rgba(255, 194, 79, 0.06);
}

.chat-live { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; font-size: 0.82rem; }
.chat-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none;
}
.chat-dot.is-live { background: var(--ok); box-shadow: 0 0 8px rgba(127, 214, 164, 0.8); }

/* Phase 5b / addendum A: per-message menu, edited label, inline editor, delete modal.
   Menu/edit classes are shared with messages.css by name; defined here for the room. */
.chat-edited { font-size: 0.72rem; color: var(--muted); font-style: italic; }
.msg-menu-wrap { position: relative; display: inline-block; }
.msg-menu-btn {
  border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer;
  border-radius: 0.45rem; padding: 0.05rem 0.45rem; font-size: 1rem; line-height: 1.2; opacity: 0.65;
}
.msg-menu-btn:hover, .msg-menu-btn:focus-visible { opacity: 1; border-color: var(--line, #28455e); }
.msg-menu {
  position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 30; min-width: 10rem;
  display: flex; flex-direction: column; padding: 0.3rem; border-radius: 0.6rem;
  border: 1px solid var(--line, #28455e); background: var(--panel, #0d1b29);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.msg-menu button {
  text-align: left; padding: 0.45rem 0.6rem; border: none; background: transparent; color: inherit;
  font: inherit; border-radius: 0.4rem; cursor: pointer; white-space: nowrap;
}
.msg-menu button:hover { background: rgba(127, 212, 255, 0.1); }
.msg-edit-box { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.3rem; }
.msg-edit-box textarea { width: 100%; }
.msg-edit-actions { display: flex; gap: 0.5rem; }
.chat-modal-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 8, 16, 0.72); padding: 1rem;
}
.chat-modal { width: min(440px, 100%); }
.chat-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }

/* Message-row alignment (owner fix, shared with Messages): single-line
   heads sit vertically centered against the 38px avatar; wrapped heads
   grow naturally. The body stays aligned under the author. */
.chat-msg-head { min-height: 38px; align-content: center; }
.chat-body { line-height: 1.55; }

/* Symbol profile pictures (design/09): a glyph centered in the avatar circle. */
.chat-avatar-symbol { display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; }