/* Messagerie: the page of conversations and the chat windows at the bottom of the other pages. */
/* ------------------------------------------------------------------ messagerie (1.11)
   The page: the conversations on the left, the open one on the right — one pane at a time on a phone.
   The same conversation view serves the small chat windows at the bottom of the other pages. */
.pastille { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; font-weight: 700; font-size: .8rem; flex: 0 0 auto;
  background: hsl(var(--teinte, 150) 45% 88%); color: hsl(var(--teinte, 150) 60% 22%); }
:root[data-theme="dark"] .pastille { background: hsl(var(--teinte, 150) 30% 26%); color: hsl(var(--teinte, 150) 55% 82%); }
.pastille.petite { width: 1.7rem; height: 1.7rem; font-size: .65rem; }
.pastille.canal { background: var(--accent-soft); color: var(--accent); font-size: 1rem; }

/* The two panes fill the height they are given: « align-items: start » would shrink each one to its
   content, leaving the thread floating in the middle of an empty page. */
.ms-cadre { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1rem;
  height: calc(100vh - var(--ms-top, 170px) - var(--tabbar-h, 0px)); height: calc(100dvh - var(--ms-top, 170px) - var(--tabbar-h, 0px)); min-height: 24rem; }
.ms-cote { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ms-outils { display: flex; flex-direction: column; gap: .4rem; padding: .6rem; border-bottom: 1px solid var(--line); }
.ms-liste { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
.ms-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.ms-conv { display: flex; gap: .6rem; align-items: center; padding: .5rem .6rem; border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none; }
.ms-conv:hover { background: var(--surface-2); }
.ms-conv.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.ms-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ms-nom { display: flex; gap: .4rem; align-items: baseline; justify-content: space-between; }
.ms-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ms-conv.non-lus .ms-nom b { font-weight: 800; }
.ms-quand { color: var(--muted); font-size: .72rem; flex: 0 0 auto; }
.ms-dernier { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-conv.non-lus .ms-dernier { color: var(--text); font-weight: 600; }
/* Unread: red, as everywhere a count asks to be looked at. Square, like the rest of the interface. */
.ms-badge { background: var(--danger); color: #fff; padding: 0 .35rem; line-height: 1.4;
  font-size: .7rem; font-weight: 700; min-width: 1.3rem; text-align: center; flex: none; }

/* min-width: 0 — otherwise the view keeps the width of its widest message and spills out of the
   320 px window of the dock, leaving a white band along its edge. */
.ms-vue { display: flex; flex-direction: column; min-height: 0; height: 100%; min-width: 0; width: 100%; }
.ms-tete { display: flex; gap: .6rem; align-items: center; padding: .5rem .7rem;
  border-bottom: 1px solid var(--line-strong); background: var(--surface-2); }
.ms-tete h1 { font-size: 1.15rem; margin: 0; }
.ms-titres { min-width: 0; }
.ms-titre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-qui { color: var(--muted); font-size: .78rem; }
/* « ‹ Conversations » only means something when the list is hidden, that is on one pane. */
.ms-cadre .ms-retour { display: none; }
.ms-retour { font-size: .85rem; }
.ms-defil { flex: 1 1 auto; overflow: auto; padding: .7rem; display: flex; flex-direction: column; gap: .2rem; }
.ms-jour { align-self: center; color: var(--muted); font-size: .75rem; font-weight: 700; margin: .8rem 0 .4rem;
  text-transform: uppercase; letter-spacing: .05em; }
.ms-sys { text-align: center; color: var(--muted); font-size: .78rem; margin: .2rem 0; }
.ms-début { padding: 2rem 1rem; text-align: center; }

.ms-msg { display: flex; gap: .45rem; align-items: flex-end; }
.ms-msg .pastille { visibility: hidden; }
.ms-msg.premier .pastille { visibility: visible; }
.ms-msg.mien { flex-direction: row-reverse; }
.ms-msg.mien .pastille { display: none; }
.ms-bulle { min-width: 0; max-width: min(42rem, 78%); }
.ms-auteur { font-size: .72rem; font-weight: 700; color: var(--muted); margin: 0 0 .1rem .1rem; }
.ms-corps { background: var(--surface-2); border: 1px solid var(--line); padding: .4rem .65rem;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-msg.mien .ms-corps { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ms-msg.mien .ms-corps a { color: inherit; }
.ms-msg.parti .ms-corps { background: none; color: var(--muted); font-style: italic; border-style: dashed; }
/* Someone named with @, and a message that names me: worth seeing in a long thread. */
.ms-mention { color: var(--accent); font-weight: 700; background: var(--accent-soft); padding: 0 .15rem; }
.ms-mention.moi { background: color-mix(in srgb, var(--soon) 35%, var(--surface)); color: var(--text); }
.ms-msg.mien .ms-mention { color: inherit; background: rgba(255, 255, 255, .2); }
.ms-msg.pour-moi .ms-corps { box-shadow: inset 3px 0 0 var(--soon); }
.ms-code { font-family: var(--font-mono); }
.ms-meta { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; color: var(--muted); font-size: .7rem; margin-top: .18rem; }
.ms-meta .menu button { padding: .05rem .3rem; font-size: .72rem; line-height: 1.1; }
.ms-vu { text-align: right; color: var(--muted); font-size: .72rem; padding: .1rem .3rem; }
.ms-plus { align-self: center; }

.ms-pied { border-top: 1px solid var(--line-strong); }
.ms-compose-wrap { background: var(--surface); padding: .55rem .7rem .35rem; }
.ms-compose { display: flex; gap: .4rem; align-items: flex-end; }
.ms-zone { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.ms-zone textarea { flex: 1 1 auto; resize: none; min-height: 2.2rem; max-height: 12rem; overflow-y: auto; }
/* the completion list of @ opens above the field, which sits at the bottom of the thread */
.ms-zone .mention-pop { left: 0; bottom: calc(100% + .25rem); }
.ms-aide { font-size: .72rem; color: var(--muted); margin-top: .25rem; }
.ms-cote-pied { padding: .5rem .6rem; border-top: 1px solid var(--line-strong); background: var(--surface-2); }
.ms-cote-pied button { width: 100%; justify-content: center; }
.ms-pick { max-height: 40vh; overflow: auto; border: 1px solid var(--line); margin: .5rem 0; }
.ms-pick .check { display: flex; gap: .5rem; align-items: center; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.msg-toast { display: block; color: inherit; text-decoration: none; }
.msg-toast span { display: block; font-size: .85rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }

@media (max-width: 900px) {
  .ms-cadre { grid-template-columns: 1fr; height: auto; }
  .ms-cadre .ms-main { display: none; }
  .ms-cadre.ms-ouvert .ms-cote { display: none; }
  .ms-cadre.ms-ouvert .ms-main { display: flex; height: calc(100dvh - var(--ms-top, 170px) - var(--tabbar-h, 0px)); }
  .ms-cadre .ms-retour { display: inline-block; }
}

/* ---- the chat windows at the bottom of the other pages (computer only) ----
   As in Orgacom: « Discussions » is a bar of its own on the right, its list opens above it at a good
   height, and each conversation is a window tall enough to read a thread — lifted off the page by a
   shadow, so that it never reads as part of what is under it. */
.dk { position: fixed; right: 1rem; bottom: 0; z-index: 25; display: flex; align-items: flex-end; gap: .6rem; pointer-events: none; }
.dk > * { pointer-events: auto; }
.dk.hidden { display: none; }
.dk-cote { order: 2; position: relative; width: 300px; display: flex; flex-direction: column; }
.dk-launch { display: flex; gap: .5rem; align-items: center; width: 100%; border: 1px solid var(--line-strong); border-bottom: 0;
  background: var(--surface); padding: .5rem .8rem; font-weight: 700; box-shadow: 0 -2px 12px rgba(0, 0, 0, .16); }
.dk-launch > span:not(.ms-badge) { margin-right: auto; }
.dk-launch[aria-expanded="true"] { background: var(--surface-2); }
.dk-panneau { position: absolute; right: 0; bottom: 100%; width: 100%; height: min(500px, calc(100vh - 150px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, .18); }
.dk-panneau-tete { display: flex; gap: .5rem; align-items: center; padding: .45rem .6rem; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
.dk-panneau-tete b { flex: 1 1 auto; }
.dk-panneau input[type="search"] { margin: .5rem .6rem; }
.dk-liste { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
.dk-fenetres { order: 1; display: flex; gap: .6rem; align-items: flex-end; }
.dk-fenetre { width: 360px; height: min(520px, calc(100vh - 110px)); display: flex; background: var(--surface); border: 1px solid var(--line-strong);
  border-bottom: 0; box-shadow: 0 -4px 18px rgba(0, 0, 0, .2); }
.dk-fenetre.reduite { height: auto; width: 260px; }
.dk-fenetre.reduite .ms-defil, .dk-fenetre.reduite .ms-pied { display: none; }
.dk-fenetre.non-lus { border-color: var(--accent); }
.dk-fenetre .ms-tete { cursor: pointer; }
/* Which window is being typed in, and which has something unread: visible without reading the titles. */
.dk-fenetre:focus-within .ms-tete { box-shadow: inset 0 -2px 0 var(--accent); }
.dk-fenetre.non-lus .ms-tete { background: var(--accent); color: var(--accent-ink); }
/* On the accent-filled header the buttons keep the ink of the header: a white glyph on a white
   button would be invisible, so their own background steps aside. */
.dk-fenetre.non-lus .ms-tete button { color: inherit; background: none; border-color: color-mix(in srgb, var(--accent-ink) 55%, transparent); }
.dk-fenetre.non-lus .ms-tete button:hover { background: color-mix(in srgb, var(--accent-ink) 20%, transparent); }
.dk-fenetre.non-lus .ms-tete .ms-badge { background: var(--accent-ink); color: var(--accent); }
/* A 360 px window has no room for the faces: the names on the first message of a run are enough. */
.dk-fenetre .ms-msg .pastille { display: none; }
.dk-fenetre .ms-bulle { max-width: 88%; }
.dk-fenetre .ms-compose-wrap { padding: .4rem .5rem .25rem; }
.dk-fenetre .ms-aide { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-btn { padding: 0 .35rem; }
.ms-envoi { padding: .3rem .6rem; }
body.dock-on .foot { padding-bottom: 3rem; }
/* the last lines of a page stay clear of the bar */
body.dock-on #app > main { padding-bottom: 3.5rem; }
/* a message of confirmation appears above the launcher rather than over it */
body.dock-on #toasts { bottom: 3.2rem; }

/* ---- the Messagerie installed on its own (public/messagerie.html) ---- */
.chat-top .brand svg.ico { color: var(--accent); }
.chat-top .top-in { flex-wrap: nowrap; }
.chat-top .top-tools { margin-left: auto; }
/* its name stays beside its icon, even on a phone: the header holds nothing else */
.chat-top .brand span { display: inline; }