/* The support chat: /support for a reader, /admin/support/<account> for staff.
   One panel, the same on both pages, so it carries its own surface instead of
   borrowing the public pages' panel classes, which the staff pages do not load.

   A message sits in a surface because a message is an object: something sent,
   with an edge. Whose it is, is said twice, by the name above it and by the side
   it sits on, so the tint on the reader's own messages is never the only sign. */

.chat {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 0 var(--space-6);
  border: 1px solid var(--chrome);
  border-radius: var(--radius-panel);
  background: var(--panel);
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--head);
}
.chat-head h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.chat-head > span { color: var(--muted); font-size: var(--text-sm); text-align: right; overflow-wrap: anywhere; }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(56vh, 520px);
  margin: 0;
  padding: 22px;
  list-style: none;
  overflow-y: auto;
}
/* With nothing in it the list is only an empty box above the words that say so. The page writes
   the list with nothing between its tags when it has no messages, which is what makes this match. */
.chat-log:empty { display: none; }

.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(78%, 62ch); }
.chat-mine { align-self: flex-end; align-items: flex-end; }
.chat-theirs { align-self: flex-start; align-items: flex-start; }

.chat-meta { margin: 0; color: var(--muted); font-size: var(--text-xs); }

.chat-body {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--chrome);
  border-radius: var(--radius-panel);
  background: var(--raised);
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-mine .chat-body {
  background: color-mix(in srgb, var(--accent) 12%, var(--raised));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.chat-empty { margin: 0; padding: 28px 22px; color: var(--muted); }
.chat-empty[hidden] { display: none; }

.chat-form { padding: 16px 22px 18px; border-top: 1px solid var(--line); background: var(--head); }
.chat-form textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--field);
  border-radius: var(--radius-control);
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: var(--text-md);
  line-height: 1.5;
  resize: vertical;
}
.chat-form textarea:hover { border-color: var(--hover); }
.chat-form textarea:focus { border-color: var(--focus); }

.chat-send {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
.chat-status { margin: 0; color: var(--sec); font-size: var(--text-sm); }

.chat-note {
  max-width: none;
  margin: 0;
  padding: 12px 22px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
}

.chat-door { padding: 22px; }
.chat-door > :first-child { margin-top: 0; }
.chat-door > :last-child { margin-bottom: 0; }

.chat-refusal { grid-column: 1 / -1; }
.chat-refusal > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .chat-head, .chat-form { padding-inline: 18px; }
  .chat-log, .chat-door { padding: 18px; }
  .chat-note { padding-inline: 18px; }
  .chat-msg { max-width: 90%; }
  .chat-log { max-height: 60vh; }
}

/* On /support the chat is the page, so it takes the wide column and the addresses sit beside it.
   On a narrow screen the chat comes first and the addresses follow. */
.public-grid > .chat { grid-column: span 8; margin-bottom: 0; }
.public-grid > .support-other { grid-column: span 4; align-self: start; }
.support-other .public-brief-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }

@media (max-width: 860px) {
  .public-grid > .chat,
  .public-grid > .support-other { grid-column: 1 / -1; }
}