/* 보리수 톡 -- only what style.css does not already provide.
 *
 * Loaded after style.css on /talk and /talk/{id}, so it inherits the same
 * variables (--brand, --line, --muted, ...) and the shared classes
 * (.card .result .badge .link-btn .empty .errors .hint .preset .actions).
 * Nothing here restyles an existing class; every rule below is for something
 * the chat screens need and no other page has: the room list card, the create
 * panel, the message board, the connection banner and the composer.
 *
 * The mobile rules at the bottom are not decoration. A chat log is the one
 * place where a single pasted URL can push the whole page sideways, so every
 * text node that carries user input breaks anywhere, and the composer keeps
 * the send button on its own row once the viewport gets narrow.
 */

/* ------------------------------------------------------------- room list */

.talk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.talk-room-desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.badge.talk-topic { background: #e8eefb; color: #24408a; border-radius: 5px; }
.badge.talk-linked { background: #eef7ee; color: #24693a; border-radius: 5px; }
.badge.talk-joined { background: var(--ok-bg); color: var(--ok-ink); border-radius: 5px; }
/* The linked-programme badge is a link on the room page and plain text on the
   list; both must read as one badge, not as a badge and an underlined word. */
a.badge { text-decoration: none; }
a.badge.talk-linked:hover { background: #e2f0e4; }

.talk-room-card .result-actions { margin-top: 12px; }

/* --------------------------------------------------------- create panel */

.talk-create {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}
.talk-create h3 {
  margin: 0 0 10px;
  border-top: 0;
  padding-top: 0;
  font-size: 15px;
}
.talk-create label { margin-top: 12px; }
.talk-create label:first-of-type { margin-top: 0; }
.talk-create .actions { margin-top: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------ room head */

.talk-back { margin: 0 0 12px; font-size: 13px; }
.talk-back a { color: var(--brand); text-decoration: none; }

.talk-room-actions { flex-wrap: wrap; gap: 10px; }

.talk-settings {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafbfc;
}
.talk-settings h3 { margin: 0 0 10px; border-top: 0; padding-top: 0; font-size: 15px; }
.talk-settings label { margin-top: 12px; }
.talk-settings label:first-of-type { margin-top: 0; }

/* ---------------------------------------------------------- the message board */

.talk-connection {
  margin: 0 0 12px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: #eef2f7;
  color: var(--muted);
}
.talk-connection.on { background: var(--ok-bg); color: var(--ok-ink); }
.talk-connection.off { background: var(--warn-bg); color: var(--warn-ink); }
.talk-connection.bad { background: var(--bad-bg); color: var(--bad-ink); }

.talk-messages {
  height: 460px;
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;      /* a long paste scrolls its own bubble, not the page */
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.talk-msg {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  max-width: 100%;
}
.talk-msg.mine { background: #eef4fd; border-color: #cfdff5; }
.talk-msg.pending { opacity: .7; }
.talk-msg.failed { background: var(--bad-bg); border-color: #f3c7c4; opacity: 1; }
.talk-msg.removed { background: #f4f5f7; }

.talk-msg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.talk-msg-nick {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.talk-msg-time { font-variant-numeric: tabular-nums; }
.talk-msg-state { font-size: 11px; }
.talk-msg.failed .talk-msg-state { color: var(--bad-ink); font-weight: 600; }
.talk-msg-actions { margin-left: auto; display: flex; gap: 6px; }

.talk-msg-body {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* an unbroken URL wraps instead of widening */
  word-break: break-word;
}
.talk-msg.removed .talk-msg-body { color: var(--muted); font-style: italic; }

.talk-day {
  margin: 14px 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.talk-older { margin: 0 0 10px; text-align: center; }

/* -------------------------------------------------------------- composer */

.talk-guidance {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.talk-composer {
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.talk-input {
  flex: 1 1 auto;
  min-width: 0;              /* without this the textarea refuses to shrink */
  margin-top: 0;
  resize: vertical;
  font-size: 14px;
}
.talk-composer button.primary { flex: 0 0 auto; padding: 11px 20px; }
.talk-input:disabled { background: #f2f4f6; color: var(--muted); }

/* The report form reuses .report-form from community.css where that file is
   loaded; the room page loads only this one, so it carries its own copy. */
.talk-report {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.talk-report-field { display: block; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.talk-report-field select,
.talk-report-field input {
  display: block; width: 100%; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 9px; font: inherit; font-size: 13px; color: var(--ink);
}
.talk-report-actions { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------- account page card */

.talk-account-room {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.talk-account-room:first-child { border-top: 0; }
.talk-account-room h3 { margin: 0; border-top: 0; padding-top: 0; font-size: 14px; }
.talk-account-room .result-meta { margin: 4px 0 0; }
.talk-account-room .result-actions { margin-top: 8px; }

/* ------------------------------------------------------------- mobile */

@media (max-width: 640px) {
  .talk-messages { height: auto; max-height: 58vh; padding: 6px 2px; }
  .talk-msg { padding: 8px; }
  .talk-msg-actions { margin-left: 0; }

  /* At 360px a side-by-side textarea and button leave the button 40px wide
     and overlapping the caret, so the row becomes two rows instead. */
  .talk-composer { flex-direction: column; align-items: stretch; }
  .talk-composer button.primary { width: 100%; }

  .talk-toolbar button.primary { width: 100%; }
  .talk-room-actions { gap: 8px; }
  .talk-room-actions button,
  .talk-room-actions a.link-btn { flex: 1 1 auto; text-align: center; }
}