/* Messagerie : page /messages (administrateur, chauffeur) et fenêtre Messages de l'application du client. */
:root {
  /* Palette du fichier, reprise des thèmes quand ils existent. */
  --c-msg-white: #fff;
  --c-msg-ink: #1f2328;
  --c-msg-muted: #5b6470;
  --c-msg-line: #d5d9df;
  --c-msg-soft: #f1f3f6;
  --c-msg-accent: #b8860b;
  --c-msg-on-accent: #fff;
  --c-msg-red: #b42318;
  --c-msg-shade: rgba(15, 23, 42, 0.45);
  --msg-bg: var(--theme-surface, var(--c-msg-white));
  --msg-text: var(--theme-text, var(--c-msg-ink));
  --msg-muted: var(--theme-muted, var(--c-msg-muted));
  --msg-line: var(--theme-border, var(--c-msg-line));
  --msg-soft: var(--theme-soft, var(--c-msg-soft));
  --msg-accent: var(--theme-accent, var(--c-msg-accent));
  --msg-on-accent: var(--theme-on-accent, var(--c-msg-on-accent));
}
.msg-page {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 12px;
  min-height: 60vh;
  color: var(--msg-text);
}
.msg-list,
.msg-thread {
  background: var(--msg-bg);
  border: 1px solid var(--msg-line);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}
.msg-list-head,
.msg-thread-head {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.msg-list-head h2 {
  margin: 0 0 8px;
}
.msg-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.msg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.msg-filters button,
.msg-new,
.msg-ride,
.msg-pick-list button {
  border: 1px solid var(--msg-line);
  background: var(--msg-soft);
  color: var(--msg-text);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  text-align: left;
}
.msg-filters button[aria-pressed='true'],
.msg-new {
  background: var(--msg-accent);
  color: var(--msg-on-accent);
  border-color: var(--msg-accent);
}
.msg-pick {
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-pick input {
  padding: 8px;
  border: 1px solid var(--msg-line);
  border-radius: 8px;
}
.msg-pick-list,
.msg-items,
.msg-bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
}
.msg-pick-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
}
.msg-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 65vh;
  overflow: auto;
}
.msg-item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 8px 36px 8px 8px;
  color: inherit;
  cursor: pointer;
}
.msg-item:hover,
.msg-item.on {
  background: var(--msg-soft);
}
.msg-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.msg-item-top time,
.msg-item-last,
.msg-ro-tag {
  color: var(--msg-muted);
  font-size: 0.85em;
}
.msg-item-last {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-item.unread strong,
.msg-item.unread .msg-item-last {
  font-weight: 700;
  color: var(--msg-text);
}
.msg-count,
.msg-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--c-msg-red);
  color: var(--c-msg-white);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.msg-count {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
a[data-page] > .msg-badge,
button[data-msg-badge] > .msg-badge {
  position: absolute;
  top: 2px;
  right: 18%;
}
nav a[data-page='/plus'],
a.service-link[data-page='/messages'],
button[data-msg-badge] {
  position: relative;
}
.msg-thread {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}
.msg-back {
  display: none;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}
.msg-title {
  flex: 1;
}
.msg-bubbles {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 2px;
  max-height: 60vh;
}
.msg-b {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--msg-soft);
  align-self: flex-start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-b.mine {
  align-self: flex-end;
  background: var(--msg-accent);
  color: var(--msg-on-accent);
}
.msg-b time,
.msg-author {
  font-size: 0.75em;
  opacity: 0.75;
}
.msg-b time {
  align-self: flex-end;
}
.msg-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  border-top: 1px solid var(--msg-line);
  padding-top: 8px;
}
.msg-form textarea {
  flex: 1;
  resize: vertical;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--msg-line);
  border-radius: 10px;
  font: inherit;
}
.msg-send {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--msg-accent);
  color: var(--msg-on-accent);
  cursor: pointer;
}
.msg-err {
  color: var(--c-msg-red);
}
.msg-ro {
  margin: 8px 0 0;
}
.msg-empty {
  padding: 10px;
}
.msg-close {
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}
/* Téléphone : la liste, puis la conversation en plein écran. */
@media (max-width: 760px) {
  .msg-page {
    grid-template-columns: 1fr;
  }
  .msg-page.has-thread .msg-list {
    display: none;
  }
  .msg-back {
    display: block;
  }
}
/* Application du client : fenêtre par-dessus les écrans, cinquième onglet du bas. */
.msg-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--c-msg-shade);
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  overflow: auto;
}
.msg-overlay .msg-page {
  max-width: 900px;
  margin: 0 auto;
}
body .ca-nav > div {
  grid-template-columns: repeat(5, 1fr);
}
.msg-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}