/* Contact requests (#6456, the "People chat" canvas's Q1, N1 and P3).
   The request rows in Messages are the pane's own (.mm-msgs-request in
   chat.css); this file draws their chips the canvas way, the request view
   and the New message form. Tokens only, so both themes follow. */

/* -- Q1: the rows' chips — "Request" a warm chip, "Waiting" plain words.
   The row itself is a DM row's (contactrequest.js requestRow): its lines and
   sizes are the Chats list's (one chat style), and the pill stands on the
   time's 18.4px line, so its two lines sit where a DM row's do. */
.mm-msgs-request .mm-msgs-pill { border-color: transparent; padding: 1px 0; font-weight: 500; font-size: 11px; line-height: 14.4px; color: var(--text-dim); }
.mm-msgs-request .mm-msgs-pill.in {
  padding: 1px 7px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); font-weight: 700; font-size: 10.5px;
}
.mm-msgs-request .mm-row-preview { color: var(--text-readable-dim, var(--text-dim)); }

/* -- Q1: the request view ------------------------------------------------ */
.mm-cr-view {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px 24px; box-sizing: border-box;
}
.mm-cr-body { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mm-cr-avatar { display: inline-grid; }
.mm-cr-avatar .avatar { border-radius: 50%; }
.mm-cr-who { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mm-cr-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); }
.mm-cr-name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.mm-cr-sub { font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.mm-cr-note {
  max-width: 460px; padding: 12px 16px; border-radius: 14px; background: var(--panel-2, var(--panel));
  border: 1px solid var(--border-soft); font-size: 14px; line-height: 1.45; text-align: left;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mm-cr-privacy { margin: 0; max-width: 460px; font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.mm-cr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mm-cr-actions .btn { height: 38px; padding: 0 18px; border-radius: 9px; font-size: 14px; font-weight: 600; }
.mm-cr-block { background: transparent; border-color: var(--danger-soft); color: var(--danger); }
.mm-cr-block:hover { background: var(--danger-soft); border-color: var(--danger); }
.mm-cr-error { min-height: 1em; font-size: 13px; color: var(--danger); }
.mm-cr-error:empty { display: none; }
.mm-cr-loading, .mm-cr-gone { color: var(--text-dim); font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mm-cr-gone p { margin: 0; }

/* The phone's full-screen request (P2's reader): a back bar, the same body. */
.mm-cr-bar {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 12px;
  border-bottom: 1px solid var(--border-soft); padding-top: env(safe-area-inset-top, 0px);
}
.mm-cr-back { border: 0; background: transparent; color: var(--accent-ink); font: inherit; font-size: 16px; padding: 10px 4px; min-height: 44px; }
.mm-cr-bar-title { margin: 0; font-size: 16px; font-weight: 600; flex: 1 1 auto; text-align: center; padding-right: 72px; }
.mm-cr-view.sheet { justify-content: flex-start; padding: 28px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.mm-cr-view.sheet .mm-cr-actions { flex-direction: column; align-self: stretch; }
.mm-cr-view.sheet .mm-cr-actions .btn { height: 46px; width: 100%; font-size: 16px; }

/* -- N1 / P3: the form inside New message's dashed box (chat.css draws the
   box, its heading and its copy) ---------------------------------------- */
.mm-cr-box { display: flex; flex-direction: column; gap: 8px; }
.mm-cr-row { display: flex; gap: 8px; }
.mm-cr-email {
  flex: 1 1 auto; min-width: 0; height: 36px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); padding: 0 12px; font: inherit; font-size: 13.5px;
}
.mm-cr-email:focus, .mm-cr-message:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.mm-cr-send {
  flex: none; height: 36px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--accent-fill); color: var(--on-accent);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.mm-cr-send:disabled { opacity: .6; cursor: default; }
.mm-cr-add { align-self: flex-start; border: 0; background: transparent; color: var(--accent-ink); font: inherit; font-size: 12.5px; padding: 0; cursor: pointer; }
.mm-cr-add[hidden], .mm-cr-message[hidden] { display: none; }
.mm-cr-message {
  width: 100%; box-sizing: border-box; resize: vertical; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); padding: 8px 12px; font: inherit; font-size: 13.5px;
}
.mm-cr-box.sheet .mm-cr-email, .mm-cr-box.sheet .mm-cr-message { font-size: 16px; }
.mm-cr-box.sheet .mm-cr-email, .mm-cr-box.sheet .mm-cr-send { height: 44px; }
/* P3: with an address in To the sheet's lists are empty — the form sits right
   under To, inside the sheet's gutter. */
.mm-nm-sheet .mm-nm-lists:empty { display: none; }
.mm-nm-sheet .mm-nm-request { margin: 4px 16px 0; }

/* -- a removed contact (#6456): the composer gives way to a note ---------- */
.mm-composer-unreachable {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 8px 12px; flex-wrap: wrap;
  margin: 8px 14px 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); text-align: center;
}
.mm-composer-unreachable[hidden] { display: none; }
.mm-composer-unreachable > .btn { width: auto; flex: none; }