/* ========== PUBLIC CHAT (/chatting/:id) ========== */
/*
 * Loaded on top of bn_chat.css, which does the heavy lifting — the layout,
 * the bubbles, the composer and the profile panel are all the signed-in
 * page's. This file only covers what differs for a visitor with no session.
 */

/*
 * No chat list and no avatar strip on this page, so the centre panel has the
 * row to itself. bn_chat.css sizes it around those two neighbours.
 */
.chat-layout-public .chat-center-panel {
  flex: 1;
  min-width: 0;
}

/*
 * The profile panel, given the room the missing chat list left behind.
 *
 * bn_chat.css sizes it at 221px and widens it to 280px only through
 * `.chat-layout:has(.chat-list-panel.collapsed)` — a selector that can never
 * match here, because this page has no chat list to collapse. So the panel
 * sat at its narrowest on the one page with the most space to spare.
 *
 * Scoped to a min-width query on purpose. bn_chat.css's 768px block sets the
 * panel to `width: 100%` for its full-screen mobile view, and a plain
 * `.chat-layout-public .chat-profile-panel` would outrank it and leak a fixed
 * width into that. The file already carries a comment about exactly this
 * specificity trap; no reason to walk into it twice.
 */
@media (min-width: 769px) {
  .chat-layout-public .chat-profile-panel {
    width: clamp(300px, 24vw, 400px);
    min-width: clamp(300px, 24vw, 400px);
  }
}

/* ---- her name, above the transcript ---- */

.chat-public-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-700, #2E2E2E);
}

.chat-public-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.chat-public-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-public-status {
  font-size: 11px;
  color: var(--neutral-500, #777);
}

/* The back arrow is the phone-only control on the signed-in page; here it is
   the way out of a chat a visitor cannot leave through a chat list. */
.chat-layout-public .mobile-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---- locked features ---- */

.chat-public-teasers {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.chat-public-teaser {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: var(--neutral-800, #131313);
  border: 1px solid var(--neutral-700, #2E2E2E);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--neutral-400, #9E9E9E);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.chat-public-teaser:hover {
  color: #fff;
  background: var(--neutral-700, #2E2E2E);
  border-color: var(--purple-400, #CC95FF);
}

.chat-public-teaser-lock {
  display: inline-flex;
  opacity: 0.6;
}

@media (max-width: 900px) {
  /* The labels are the first thing to go: three pills and a 36px avatar do
     not share a phone-width row. The icons still say which is which. */
  .chat-public-teaser span:not(.chat-public-teaser-lock) { display: none; }
  .chat-public-teaser { padding: 6px; }
}

/* ---- the transcript ---- */

/*
 * bn_chat.css hides the typing indicator by default, because on the real page
 * inline scripts flip its display when SSE says she is typing. Here it is
 * only in the DOM while she is, so it can simply show.
 */
.chat-public-messages .typing-indicator {
  display: flex;
}

/* ---- who she is, under her opening media ---- */

/*
 * Not a message bubble, deliberately. She did not say this — it is the
 * profile blurb — and dressing it as something she sent would be putting
 * words in her mouth. Indented to the same 48px as her bubbles so it still
 * belongs to her side of the conversation.
 */
.chat-public-bio {
  margin: 4px 0 12px 48px;
  padding: 10px 14px;
  max-width: 560px;
  border-left: 2px solid var(--purple-800, #432362);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 10px 10px 0;
}

.chat-public-bio p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--neutral-400, #9E9E9E);
}

@media (max-width: 768px) {
  .chat-public-bio { margin-left: 16px; }
}

/* ---- the camera button ---- */

/*
 * Borrows .btn-mic's box from bn_chat.css so it sits where the microphone
 * does on the real page, but carries an inline SVG rather than an icon file,
 * so it needs its own colour.
 */
.chat-public-photo {
  color: var(--neutral-400, #9E9E9E);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.chat-public-photo:hover { color: #fff; }

/* ---- the composer's footnote ---- */

.chat-public-note {
  font-size: 12px;
  line-height: 16px;
  color: var(--neutral-500, #777);
  padding: 0 8px;
}

.chat-public-note button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--purple-400, #CC95FF);
  cursor: pointer;
}

.chat-public-note button:hover { text-decoration: underline; }