/* Messenger, announcements and admin. Tokens and base components come from app.css. */

/* ---------- Messenger: frame ---------- */

.msgr-page { padding-bottom: var(--s4); }

.msgr {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: calc(100vh - var(--bar-h) - 168px);
  min-height: 440px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  overflow: hidden;
}

.msgr-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.msgr-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msgr-placeholder { display: flex; align-items: center; justify-content: center; flex: 1; padding: var(--s4); }
.msgr-placeholder .empty { border: 0; max-width: 420px; }
.msgr-none { padding: var(--s3); margin: 0; }

/* ---------- Messenger: side column ---------- */

.msgr-search { padding: var(--s3) var(--s3) var(--s2); }
.msgr-search .icon { left: 26px; top: 27px; }
.msgr-search .input { padding-right: 36px; }
.msgr-clear { position: absolute; right: 19px; top: 19px; }

.msgr-strip {
  display: flex;
  gap: var(--s1);
  padding: var(--s1) var(--s3) var(--s3);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  flex: none;
  scrollbar-width: none;
}
.msgr-strip::-webkit-scrollbar { display: none; }
.msgr-strip .msgr-none { padding: var(--s2) 0; }
.msgr-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  width: 64px;
  flex: none;
  padding: 6px 2px;
  border: 0;
  border-radius: var(--r1);
  background: none;
  color: var(--ink-2);
  font: 12px/1.2 var(--body);
  cursor: pointer;
}
.msgr-contact:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
.msgr-contact:disabled { opacity: 0.5; cursor: progress; }
.msgr-contact-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msgr-list { flex: 1; min-height: 0; overflow-y: auto; }
.msgr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--s3);
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.msgr-row:hover { background: var(--sunken); }
.msgr-row:focus-visible { outline-offset: -2px; }
.msgr-row.is-selected { background: var(--signal-soft); box-shadow: inset 3px 0 0 var(--signal); }
.msgr-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.msgr-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.msgr-row-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-row-time { flex: none; font-size: 12px; color: var(--ink-3); }
.msgr-row-preview { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-row.is-unread .msgr-row-name { font-weight: 700; }
.msgr-row.is-unread .msgr-row-preview { color: var(--ink); font-weight: 600; }

/* ---------- Messenger: thread ---------- */

.msgr-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.msgr-head { display: flex; align-items: center; gap: 12px; padding: 12px var(--s3); border-bottom: 1px solid var(--line); flex: none; }
.msgr-head-avatar { display: inline-flex; }
.msgr-head-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgr-head .grow { min-width: 0; }
.msgr-head > .icon-btn { flex: none; }

.msgr-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3); overscroll-behavior: contain; }
.msgr-scroll:focus-visible { outline-offset: -2px; }
.msgr-older .loading { justify-content: center; padding: var(--s2) 0; font-size: 13px; }
.msgr-items { display: flex; flex-direction: column; gap: 3px; }
.msgr-items .msgr-none { padding: var(--s4) 0; }

.msg-day { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 var(--s2); font-size: 12px; color: var(--ink-3); }
.msg-day::before, .msg-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.msg-row { display: flex; align-items: flex-end; gap: var(--s2); }
.msg-row.is-first { margin-top: var(--s2); }
.msg-row.is-mine { justify-content: flex-end; }
.msg-avatar { width: 28px; height: 28px; flex: none; align-self: flex-start; }
.msg-stack { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; max-width: min(540px, 82%); min-width: 0; }
.msg-row.is-mine .msg-stack { align-items: flex-end; }

.msg-bubble {
  padding: 8px 12px;
  border-radius: var(--r2);
  background: var(--sunken);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.msg-row.is-mine .msg-bubble { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .msg-row.is-mine .msg-bubble { background: var(--line-strong); color: #fff; }
.msg-bubble a { color: inherit; text-decoration-color: currentColor; }
.msg-emoji { font-size: 1.35em; line-height: 1; vertical-align: -0.1em; }
.msg-embed { display: block; width: 420px; max-width: 100%; height: 80px; border: 0; border-radius: var(--r2); background: var(--sunken); }
.msg-time { font-size: 12px; line-height: 1.2; color: var(--ink-2); }
.msg-embed-ask {
  display: flex;
  align-items: center;
  gap: var(--s2) 12px;
  flex-wrap: wrap;
  width: 420px;
  max-width: 100%;
  min-height: 80px;
  padding: var(--s2) 12px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
}
.msg-embed-note { font-size: 12px; color: var(--ink-2); }
.msg-read { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-3); }

/* ---------- Messenger: composer ---------- */

.msgr-foot { flex: none; padding: 12px var(--s3); border-top: 1px solid var(--line); }
.msgr-compose { position: relative; display: flex; align-items: flex-end; gap: var(--s2); }
.msgr-compose .icon-btn { height: 38px; width: 38px; flex: none; }
textarea.msgr-input { min-height: 38px; height: 38px; max-height: 180px; padding: 8px 12px; resize: none; overflow-y: hidden; }
.msgr-send { width: 44px; height: 38px; padding: 0; flex: none; }
.msgr-hint { margin-top: 6px; font-size: 12px; }
.msgr-closed { margin: 0; }
.msgr-foot .notice { margin: 0; }

.msgr-emoji {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--s2));
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(8, 36px);
  gap: 2px;
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  box-shadow: var(--pop);
  max-width: calc(100vw - 2 * var(--s3));
}
.msgr-emoji button { width: 36px; height: 36px; border: 0; border-radius: var(--r1); background: none; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.msgr-emoji button:hover { background: var(--sunken); }

/* ---------- Announcements ---------- */

.ann-list { display: flex; flex-direction: column; gap: var(--s3); }
.ann { display: flex; flex-direction: column; gap: var(--s3); }
.ann-head { display: flex; align-items: center; gap: 12px; }
.ann-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--r1);
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--display);
  font-weight: 600;
}
.ann-blocks { display: flex; flex-direction: column; gap: var(--s3); }
.ann-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.ann-image { display: block; align-self: flex-start; border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden; }
.ann-image img { max-height: 520px; width: auto; }
.ann-foot { display: flex; align-items: center; gap: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 14px; }
.ann-toggle { font-weight: 600; }

.ann-replies { display: flex; flex-direction: column; gap: var(--s3); }
.ann-tree { display: flex; flex-direction: column; gap: var(--s3); }
.ann-children { display: flex; flex-direction: column; gap: var(--s3); margin-left: 15px; padding-left: var(--s3); border-left: 1px solid var(--line); }
.ann-reply { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ann-reply .ann-text { font-size: 14px; margin-top: 2px; }
.ann-reply-head { gap: var(--s2); }
.ann-reply-actions { gap: var(--s3); margin-top: var(--s1); color: var(--ink-2); }
.ann-thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.ann-thumb { display: block; width: 120px; height: 120px; border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden; }
.ann-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ann-compose { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r1); }
textarea.ann-input { min-height: 64px; }
.ann-previews { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ann-preview { position: relative; width: 84px; height: 84px; border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden; background: var(--sunken); }
.ann-preview img { width: 100%; height: 100%; object-fit: cover; }
.ann-preview .icon-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.ann-chip-x { width: 20px; height: 20px; margin-right: -6px; }

.ann-admin { display: flex; flex-direction: column; gap: var(--s3); }
.ann-admin h2 { font-size: 20px; }
.ann-editor { display: flex; flex-direction: column; gap: var(--s2); }
.ann-block { display: flex; align-items: flex-start; gap: var(--s2); }
.ann-block > textarea, .ann-block-image { flex: 1; min-width: 0; }
.ann-block-image { display: flex; align-items: center; gap: 12px; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r1); background: var(--paper); }
.ann-block-image img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r1); flex: none; }
.ann-block-image span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-block-tools { display: flex; flex: none; }
.ann-admin select.input { width: auto; }

/* ---------- Admin ---------- */

.admin-body { display: flex; flex-direction: column; gap: var(--s3); }
.admin-toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.admin-toolbar .input { max-width: 360px; }
.admin-pager { padding-top: var(--s1); }
.admin-email { overflow-wrap: anywhere; }
.admin-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2); }
.admin-convs { border: 1px solid var(--line); border-radius: var(--r1); }
.admin-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-error { font-weight: 600; overflow-wrap: anywhere; }
.admin-url { max-width: 320px; overflow-wrap: anywhere; font-size: 13px; color: var(--ink-2); }
.admin-detail { margin-top: var(--s1); font-size: 13px; }
.admin-detail summary { cursor: pointer; color: var(--ink-2); }
.admin-detail pre {
  margin: var(--s2) 0 0;
  padding: var(--s2) 12px;
  max-width: min(640px, 70vw);
  max-height: 260px;
  overflow: auto;
  background: var(--sunken);
  border-radius: var(--r1);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Form-like panels and running text keep a readable width inside the wide admin page; tables use the full width. */
.admin-form { width: 100%; max-width: 760px; }
.admin-lead { margin: 0; max-width: 760px; }
.admin-tools { padding-top: var(--s3); border-top: 1px solid var(--line); }

.admin-health-sum { margin: 0; }
.admin-checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r1); }
.admin-check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.admin-check:last-child { border-bottom: 0; }
.admin-checks:empty { display: none; }
.admin-check .tag { flex: none; margin-top: 1px; }
.admin-check .grow { min-width: 0; }
.admin-check-label { font-weight: 500; }
.admin-check-detail { overflow-wrap: anywhere; }
.admin-job-failed { flex-wrap: nowrap; align-items: flex-start; overflow-wrap: anywhere; }
.admin-job-failed .tag { flex: none; }
.admin-report-detail { min-width: 220px; max-width: 420px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: var(--ink-2); }
.admin-grant-actions { flex-wrap: nowrap; }

.admin-s4a-intro { margin: 0; }
.admin-s4a-form { max-width: 520px; }
.admin-body code { padding: 1px 5px; border-radius: var(--r1); background: var(--sunken); font: 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.admin-kv { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: var(--s2) var(--s3); margin: 0; font-size: 14px; max-width: 760px; }
.admin-kv dt { color: var(--ink-2); }
.admin-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .msgr { grid-template-columns: 290px minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* The list and the thread become two separate views. */
  .msgr { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .msgr-side { border-right: 0; }
  .msgr:not(.is-thread) .msgr-thread { display: none; }
  .msgr.is-thread .msgr-side { display: none; }
  .msgr.is-thread { height: calc(100vh - var(--bar-h) - 84px); height: calc(100dvh - var(--bar-h) - 84px); min-height: 320px; }
  .msgr-page.msgr-open { padding: var(--s2) var(--s2) 0; }
  .msgr-page.msgr-open .page-head { display: none; }
  .msgr-list { overflow: visible; }
  .msg-stack { max-width: 86%; }
  .msgr-emoji { grid-template-columns: repeat(7, 36px); }

  .ann-children { margin-left: 6px; padding-left: 12px; }
  .ann-thumb { width: 88px; height: 88px; }
  .ann-block { flex-direction: column; }
  .ann-block > textarea, .ann-block-image { width: 100%; }
  .ann-block-tools { align-self: flex-end; }
  .admin-toolbar .input { max-width: none; }
  .admin-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .admin-kv dd { margin-bottom: var(--s2); }
}