/* ── Messages module — staff↔client direct messaging ─────────────────────────
   Two-pane layout (conversation list + chat window), themed with the BPS design
   system tokens (theme.css). Mirrors the reference mockup but in-system. */

.msg-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  /* The navbar is position:fixed, so the shell must be pushed below it — the old
     `height: calc(100vh - 72px)` reserved room but never offset the top, leaving
     the first 64px (the list's "Messages" title, and the conversation header with
     its back button) buried under the navbar and unclickable on every viewport.
     72px was also wrong: --nav-height is 64px. */
  margin-top: var(--nav-height, 64px);
  height: calc(100vh - var(--nav-height, 64px));   /* fallback for old browsers */
  height: calc(100dvh - var(--nav-height, 64px));  /* dvh excludes the mobile URL bar */
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius-lg);
  overflow: hidden;
  box-shadow: var(--theme-shadow-md);
}

/* ── Left column ── */
.msg-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--theme-line);
  background: var(--theme-bg);
  min-height: 0;
}
.msg-list__head { padding: 20px 22px 10px; }
.msg-list__title { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--theme-ink); }
.msg-list__filters { display: flex; gap: 8px; padding: 4px 22px 12px; }
.msg-chip {
  border: 1px solid var(--theme-line);
  background: var(--theme-bg);
  color: var(--theme-ink-body);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.msg-chip.is-active { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
.msg-search { padding: 0 22px 12px; }
.msg-search input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--theme-line);
  border-radius: var(--theme-radius-sm);
  padding: 9px 14px;
  font-size: .9rem;
  font-family: inherit;
  background: var(--theme-bg-alt);
}
.msg-search input:focus { outline: none; border-color: var(--theme-primary); background: #fff; }

.msg-list__loading { display: flex; justify-content: center; align-items: center; padding: 40px; }

.msg-empty {
  text-align: center;
  color: var(--theme-ink-faint);
  padding: 48px 24px;
}
.msg-empty svg { color: var(--theme-ink-faint); }
.msg-empty__title { margin: 14px 0 4px; font-weight: 700; color: var(--theme-ink); }
.msg-empty__sub { margin: 0; font-size: .85rem; }

.msg-conv { list-style: none; margin: 0; padding: 0 10px; overflow-y: auto; flex: 1; min-height: 0; }
.msg-conv__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: transparent;
  padding: 11px 12px;
  border-radius: var(--theme-radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.msg-conv__item:hover { background: var(--theme-primary-wash); }
.msg-conv__item.is-active { background: var(--theme-primary-wash); }
.msg-conv__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-conv__name { font-weight: 700; color: var(--theme-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv__meta { font-size: .78rem; color: var(--theme-ink-faint); text-transform: capitalize; }
.msg-conv__badge {
  background: var(--theme-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px;
}

.msg-avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #eef2fb;
  border: 1.5px solid #c7d4ee;
  color: var(--theme-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  letter-spacing: .02em;
}
.msg-avatar--lg { width: 44px; height: 44px; }

/* ── Right column ── */
.msg-window { display: flex; flex-direction: column; min-height: 0; background: var(--theme-bg-alt); }
.msg-window__empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  color: var(--theme-ink-faint);
}
.msg-window__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--theme-line);
  background: var(--theme-surface);
}
.msg-window__name { font-weight: 800; color: var(--theme-ink); }
.msg-window__lock { font-size: .74rem; color: var(--theme-secondary-deep); font-weight: 600; }

.msg-thread { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.msg-thread__hint {
  margin: auto;
  max-width: 340px;
  text-align: center;
  color: var(--theme-ink-faint);
  font-size: .92rem;
  background: var(--theme-surface);
  border: 1px dashed var(--theme-line);
  border-radius: var(--theme-radius);
  padding: 18px 22px;
}

.msg-bubble-row { display: flex; }
.msg-bubble-row.is-mine { justify-content: flex-end; }
.msg-bubble {
  max-width: 68%;
  background: var(--theme-surface);
  border: 1px solid var(--theme-line);
  border-radius: 14px;
  padding: 9px 13px 7px;
  box-shadow: var(--theme-shadow);
}
.msg-bubble-row.is-mine .msg-bubble {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
  color: #fff;
}
.msg-bubble__text { display: block; font-size: .92rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.msg-bubble__meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; }
.msg-bubble__time { font-size: .68rem; opacity: .6; }
/* Delivery ticks — sender's own bubbles only. Single tick = Sent, double = Delivered. */
.msg-bubble__status { display: inline-flex; align-items: center; opacity: .55; }
.msg-bubble__status.is-delivered { opacity: .9; }

/* ── Teleconference invite card (kind='teleconf_invite') ── */
.msg-invite {
  max-width: 78%;
  background: var(--theme-surface);
  border: 1.5px solid var(--theme-primary);
  border-left: 4px solid var(--theme-primary);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--theme-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.msg-invite__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--theme-primary);
}
.msg-invite__title { font-size: .92rem; font-weight: 700; color: var(--theme-ink); line-height: 1.4; }
.msg-invite__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.msg-invite__join {
  background: var(--theme-primary);
  color: #fff;
  border-radius: 999px;
  padding: 7px 22px;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
.msg-invite__join:hover { background: var(--theme-primary-deep); }
.msg-invite__time { font-size: .68rem; color: var(--theme-ink-faint); }

.msg-composer {
  display: flex; gap: 10px; align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--theme-line);
  background: var(--theme-surface);
}
.msg-composer input {
  flex: 1;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: .92rem;
  font-family: inherit;
  background: var(--theme-bg-alt);
}
/* .92rem ≈ 14.7px — under 16px iOS zooms the page on focus and never zooms back.
   Worst here of anywhere: focusing the composer opens the keyboard at the same
   time, so the user is left zoomed in with the input under the keyboard. */
@media (pointer: coarse) {
  .msg-composer input,
  .msg-search input { font-size: 16px; }
}

.msg-composer input:focus { outline: none; border-color: var(--theme-primary); background: #fff; }
.msg-composer button {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--theme-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.msg-composer button:hover:not(:disabled) { background: var(--theme-primary-deep); }
.msg-composer button:disabled { opacity: .45; cursor: not-allowed; }

/* Secure-assurance footer — only rendered when the key is unlocked. */
.msg-secure-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 18px 10px;
  background: var(--theme-surface);
  color: var(--theme-secondary-deep);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.msg-secure-footer svg { flex: none; opacity: .9; }

/* Back-to-list control. Desktop keeps both panes side by side, so it is only
   needed once `.msg-shell.has-active` hides the list below 760px. */
.msg-back { display: none; }

@media (max-width: 760px) {
  /* height/margin-top come from the base rule (dvh-aware); only the columns and
     the edge-to-edge treatment change here. */
  .msg-shell { grid-template-columns: 1fr; border-radius: 0; border-left: 0; border-right: 0; }
  .msg-window { display: none; }
  .msg-shell.has-active .msg-list { display: none; }
  .msg-shell.has-active .msg-window { display: flex; }

  .msg-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;              /* full touch target */
    height: 44px;
    margin-left: -8px;        /* optically align with the head's padding */
    flex: none;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--theme-ink, #1b2433);
    cursor: pointer;
  }
  .msg-back:active { background: rgba(0, 0, 0, .06); }
}