/* ==========================================================================
   Pages « Messages » (.msg-…) et « Notifications » (.nt-…)
   ========================================================================== */

/* Le fil occupe toute la hauteur sous l'en-tête : le document ne défile pas, seuls les volets défilent. */
body.msg-page { overflow: hidden; }

.msg-app {
  --msg-list-w: clamp(320px, 30vw, 410px);
  display: grid;
  grid-template-columns: var(--msg-list-w) minmax(0, 1fr);
  /* l'en-tête fait --header-h + 1 px de bordure */
  height: calc(100vh - var(--header-h) - 1px);
  height: calc(100dvh - var(--header-h) - 1px);
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
@media (min-width: 1500px) {
  .msg-app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
.msg-app.is-empty { display: block; }
.msg-app.is-empty .msg-list-pane,
.msg-app.is-empty .msg-thread-pane { display: none; }
.msg-empty-all { height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.msg-empty-all .empty-state { padding: 24px; max-width: 520px; }
.msg-empty-all .empty-state-icon { width: 96px; height: 96px; background: var(--brand-soft); color: var(--brand); margin-bottom: 12px; }
.msg-empty-all .empty-state-icon svg { width: 40px; height: 40px; }
.msg-empty-all .empty-state h3 { font-size: 1.5rem; }
.msg-empty-all .empty-state p { margin-bottom: 20px; }

/* ---------- Volet gauche : liste ---------- */
.msg-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: #fff; }
.msg-list-head { padding: 22px 20px 12px; }
.msg-title { margin: 0 0 14px; font-size: var(--fs-xl); letter-spacing: -0.02em; }
.msg-search { position: relative; }
.msg-search .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.msg-search input {
  width: 100%; height: 46px; padding: 0 16px 0 42px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 0.9375rem; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.msg-search input:hover { border-color: var(--line-strong); }
.msg-search input:focus { outline: none; background: #fff; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.msg-search input::-webkit-search-cancel-button { cursor: pointer; }
.msg-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 16px; }
.msg-list-note { padding: 32px 16px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.msg-list-note p { margin: 0 0 12px; }

.msg-conv {
  position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 13px 12px;
  border-radius: var(--radius); color: inherit; text-decoration: none !important; transition: background 0.12s;
}
.msg-conv:hover { background: var(--surface); }
.msg-conv:focus-visible { border-radius: var(--radius); }
.msg-conv.is-active { background: var(--surface-2); }
.msg-conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.msg-conv-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv-time { flex-shrink: 0; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.msg-conv-sub { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 1px; }
.msg-conv-preview { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conv-badge { flex-shrink: 0; min-width: 20px; height: 20px; font-size: 0.75rem; }
.msg-conv.is-unread .msg-conv-name { font-weight: 800; }
.msg-conv.is-unread .msg-conv-preview { color: var(--ink); font-weight: 700; }
.msg-conv.is-unread .msg-conv-time { color: var(--ink); font-weight: 700; }

.msg-conv-skel { pointer-events: none; }
.msg-conv-skel .skeleton { display: block; }
.msg-conv-skel .msg-conv-body { gap: 9px; padding-top: 3px; }
.msg-skel-avatar { display: block; width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Volet droit : fil ---------- */
.msg-thread-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.msg-thread { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.msg-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }

.msg-thread-head { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: #fff; }
.msg-skel-head { gap: 14px; }
.msg-skel-lines { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.msg-skel-lines .skeleton { display: block; }
.msg-back { display: none; margin-left: -8px; flex-shrink: 0; }
.msg-peer { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none !important; color: inherit; border-radius: var(--radius-sm); }
.msg-peer-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.msg-peer-name { font-weight: 700; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-peer:hover .msg-peer-name { text-decoration: underline; }
.msg-peer-company { font-size: 0.8125rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-peer-cta { flex-shrink: 0; }

/* Carte de contexte : l'annonce concernée */
.msg-context { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.msg-ctx-thumb {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cat, #64748b) 16%, #fff); color: var(--cat, #64748b);
}
.msg-ctx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.msg-ctx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.msg-ctx-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.msg-ctx-title { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-ctx-title:hover { text-decoration: underline; }
.msg-ctx-cta { flex-shrink: 0; background: #fff; }

/* Bandeau de sécurité */
.msg-safety { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 24px; background: var(--info-soft); color: #1e3a8a; font-size: 0.8125rem; line-height: 1.4; }
.msg-safety .icon { color: var(--info); }
.msg-safety p { flex: 1; margin: 0; }
.msg-safety-close { width: 28px; height: 28px; color: #1e3a8a; }
.msg-safety-close:hover { background: rgba(29, 78, 216, 0.12); }

/* Corps du fil */
.msg-body { position: relative; flex: 1; min-height: 0; display: flex; }
.msg-scroll { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 8px; }
.msg-stream { display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 100%; }
.msg-thread-empty { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 16px; color: var(--muted); max-width: 360px; }
.msg-thread-empty .icon { color: var(--faint); }
.msg-thread-empty p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.msg-thread-empty strong { color: var(--ink); font-size: var(--fs-base); }

.msg-skel-bubbles { display: flex; flex-direction: column; gap: 14px; padding: 12px 0; }
.msg-skel-bubble { display: block; height: 44px; border-radius: 18px; }
.msg-skel-bubble.is-mine { align-self: flex-end; }
.msg-skel-bubble.is-theirs { align-self: flex-start; }

.msg-day { display: flex; justify-content: center; margin: 6px 0 -2px; }
.msg-day span { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.msg-system { align-self: center; display: flex; align-items: flex-start; gap: 6px; max-width: 80%; text-align: center; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.msg-system .icon { margin-top: 2px; }

/* Groupes de messages */
.msg-group { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.msg-group.is-mine { justify-content: flex-end; }
.msg-group-avatar { flex-shrink: 0; }
.msg-group-col { display: flex; flex-direction: column; min-width: 0; max-width: min(640px, 80%); }
.msg-group.is-mine .msg-group-col { align-items: flex-end; }
.msg-bubbles { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; }
.msg-group.is-mine .msg-bubbles { align-items: flex-end; }
.msg-group.is-theirs .msg-bubbles { align-items: flex-start; }
.msg-bubble {
  width: fit-content; max-width: 100%; padding: 10px 15px; border-radius: 20px;
  background: var(--surface-2); color: var(--ink); font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere;
}
.msg-bubble.is-media { padding: 6px; }
.msg-group.is-mine .msg-bubble { background: var(--ink); color: #fff; }
.msg-group.is-mine .msg-bubble:not(:first-child) { border-top-right-radius: 6px; }
.msg-group.is-mine .msg-bubble:not(:last-child) { border-bottom-right-radius: 6px; }
.msg-group.is-theirs .msg-bubble:not(:first-child) { border-top-left-radius: 6px; }
.msg-group.is-theirs .msg-bubble:not(:last-child) { border-bottom-left-radius: 6px; }
.msg-bubble a { text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.msg-group.is-mine .msg-bubble a { color: #fff; }
.msg-group.is-theirs .msg-bubble a { color: var(--brand-hover); }
.msg-bubble.is-pending, .msg-offer.is-pending { opacity: 0.65; }
.msg-meta { margin-top: 4px; padding: 0 6px; font-size: var(--fs-xs); color: var(--muted); }

/* Pièces jointes */
.msg-atts { display: flex; flex-direction: column; gap: 6px; min-width: 240px; max-width: 340px; }
.msg-text + .msg-atts { margin-top: 8px; }
.msg-atts .file-row, .msg-atts .file-row + .file-row { margin-top: 0; color: var(--ink); }
.msg-att-img { display: block; align-self: flex-start; width: fit-content; max-width: 100%; padding: 0; border-radius: 14px; overflow: hidden; line-height: 0; background: var(--surface-2); }
.msg-att-img img { display: block; width: auto; max-width: 100%; max-height: 240px; min-height: 80px; min-width: 120px; object-fit: cover; border-radius: 14px; }
.msg-att-img:hover img { filter: brightness(0.94); }

/* Carte « Proposition » */
.msg-offer {
  width: 100%; min-width: min(300px, 100%); padding: 14px 16px 15px; border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fffaf6 100%); border: 1px solid #f4cfb6; box-shadow: var(--shadow-xs);
  color: var(--ink); overflow-wrap: anywhere;
}
.msg-offer-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.msg-offer-label { font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.msg-offer-figures { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
.msg-offer-body { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; padding-top: 8px; border-top: 1px dashed #efd6c4; }
.msg-offer .msg-atts { margin-top: 10px; min-width: 0; }
.msg-offer-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-hover); }
.msg-offer-link:hover { text-decoration: underline; }
.msg-offer a:not(.msg-offer-link) { color: var(--brand-hover); text-decoration: underline; }

/* Bouton « Nouveaux messages » */
.msg-jump {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px 9px 12px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow);
}
.msg-jump:hover { background: #000; }

/* Dépôt de fichiers */
.msg-drop {
  position: absolute; inset: 12px; z-index: 4; display: none; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--ink); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.92); color: var(--ink-2);
}
.msg-drop > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.msg-drop strong { color: var(--ink); }
.msg-thread.is-dragover .msg-drop { display: flex; }

/* Zone de saisie */
.msg-composer { padding: 12px 24px 18px; background: #fff; border-top: 1px solid var(--line); }
.msg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-height: 118px; overflow-y: auto; padding: 0 2px 12px; }
.msg-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 6px 6px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 0.8125rem;
}
.msg-chip .icon { color: var(--ink-2); }
.msg-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.msg-chip-size { color: var(--muted); white-space: nowrap; }
.msg-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: var(--ink-2); }
.msg-chip-x:hover { background: var(--surface-2); color: var(--ink); }
.msg-upload { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.msg-upload-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msg-upload-cancel { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; padding: 2px 4px; }
.msg-upload-cancel:hover { color: var(--brand); }
.msg-composer-box {
  display: flex; align-items: flex-end; gap: 4px; padding: 6px 6px 6px 8px;
  border: 1px solid var(--line-strong); border-radius: 28px; background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.msg-composer-box:hover { border-color: var(--ink-2); }
.msg-composer-box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.msg-attach { width: 40px; height: 40px; flex-shrink: 0; color: var(--ink-2); }
.msg-attach:disabled { opacity: 0.4; }
.msg-input {
  flex: 1; min-width: 0; height: 42px; max-height: 200px; padding: 9px 4px; border: 0; border-radius: 0; background: transparent;
  resize: none; overflow-y: hidden; font-size: 0.9375rem; line-height: 1.5; color: var(--ink);
}
.msg-input:focus, .msg-input:focus-visible { outline: none; box-shadow: none; }
.msg-send {
  flex-shrink: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brand); color: #fff; transition: background 0.15s, transform 0.1s;
}
.msg-send:hover:not(:disabled) { background: var(--brand-hover); }
.msg-send:active:not(:disabled) { transform: scale(0.94); }
.msg-send:disabled { background: var(--surface-2); color: var(--faint); }
.msg-send:focus-visible { border-radius: 50%; }
.msg-send .icon { margin-left: -2px; }

/* ---------- Tablette ---------- */
@media (max-width: 960px) {
  .msg-app { --msg-list-w: 320px; }
  .msg-thread-head { padding: 12px 16px; }
  .msg-context, .msg-scroll { padding-left: 16px; padding-right: 16px; }
  .msg-safety { padding-left: 16px; }
  .msg-composer { padding: 10px 16px 14px; }
  .msg-peer-cta { display: none; }
}

/* ---------- Mobile : un seul volet à la fois ---------- */
@media (max-width: 744px) {
  .msg-app {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100vh - var(--header-h) - 1px - var(--mobile-nav-h) - env(safe-area-inset-bottom));
    height: calc(100dvh - var(--header-h) - 1px - var(--mobile-nav-h) - env(safe-area-inset-bottom));
  }
  .msg-app[data-view="list"] .msg-thread-pane { display: none; }
  .msg-app[data-view="thread"] .msg-list-pane { display: none; }
  .msg-list-pane { border-right: 0; }
  .msg-list-head { padding: 16px 16px 10px; }
  .msg-title { margin-bottom: 12px; }
  .msg-list { padding: 2px 8px 12px; }
  .msg-back { display: inline-flex; }
  .msg-thread-head { min-height: 64px; padding: 10px 16px 10px 12px; gap: 6px; }
  .msg-peer-name { font-size: 1rem; }
  .msg-context { padding: 8px 16px; gap: 10px; }
  .msg-ctx-thumb { width: 36px; height: 36px; border-radius: 8px; }
  .msg-ctx-thumb .icon { width: 18px; height: 18px; }
  .msg-ctx-label { display: none; }
  .msg-ctx-cta { min-height: 34px; padding: 0 12px; font-size: 0.8125rem; }
  .msg-safety { padding: 6px 8px 6px 16px; font-size: 0.75rem; }
  .msg-scroll { padding: 14px 14px 6px; }
  .msg-group-col { max-width: 84%; }
  .msg-group-avatar .avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
  .msg-group { gap: 8px; }
  .msg-atts { min-width: 0; max-width: 100%; }
  .msg-composer { padding: 8px 12px 10px; }
  .msg-chip-name { max-width: 150px; }
  /* Le composer est au bas de la zone, juste au-dessus de la barre de navigation mobile. */
  .msg-input { font-size: 1rem; }
  .msg-jump { bottom: 10px; }
}

/* ==========================================================================
   Notifications
   ========================================================================== */
.nt-page { padding-top: 40px; padding-bottom: 80px; }
.nt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.nt-head h1 { margin: 0 0 4px; font-size: var(--fs-xl); }
.nt-sub { margin: 0; color: var(--muted); }
.nt-group { margin-bottom: 28px; }
.nt-group-title { margin: 0 0 10px; padding: 0 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nt-list { list-style: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }

.nt-item { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: #fff; transition: background 0.15s, opacity 0.2s; }
.nt-item:last-child { border-bottom: 0; }
.nt-item.is-unread { background: #fff7f1; }
.nt-item.is-removing { opacity: 0.35; pointer-events: none; }
.nt-main {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 16px 8px 16px 18px;
  text-align: left; color: inherit; text-decoration: none !important; cursor: pointer; transition: background 0.15s;
}
.nt-main:hover { background: rgba(15, 23, 42, 0.03); }
.nt-main:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px rgba(209, 69, 10, 0.5); }
.nt-icon { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tone-bg, var(--surface-2)); color: var(--tone-fg, var(--ink-2)); }
.nt-tone-info { --tone-bg: var(--info-soft); --tone-fg: var(--info); }
.nt-tone-warning { --tone-bg: var(--warning-soft); --tone-fg: var(--warning); }
.nt-tone-success { --tone-bg: var(--success-soft); --tone-fg: var(--success); }
.nt-tone-danger { --tone-bg: var(--danger-soft); --tone-fg: var(--danger); }
.nt-tone-brand { --tone-bg: var(--brand-soft); --tone-fg: var(--brand-ink); }
.nt-tone-violet { --tone-bg: #f1ecfd; --tone-fg: #6d28d9; }
.nt-tone-amber { --tone-bg: #fff3d6; --tone-fg: #b7791f; }
.nt-tone-neutral { --tone-bg: var(--surface-2); --tone-fg: var(--ink-2); }
.nt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.nt-item.is-unread .nt-title { font-weight: 700; }
.nt-body { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.nt-time { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.nt-dot { flex-shrink: 0; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(209, 69, 10, 0.16); }
.nt-delete { align-self: center; flex-shrink: 0; margin: 0 10px 0 2px; color: var(--muted); }
.nt-delete:hover { background: var(--danger-soft); color: var(--danger); }

.nt-skel { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.nt-skel:last-child { border-bottom: 0; }
.nt-skel .skeleton { display: block; }
.nt-skel-icon { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.nt-skel .nt-text { gap: 10px; padding-top: 4px; }

@media (max-width: 744px) {
  .nt-page { padding-top: 24px; padding-bottom: 40px; }
  .nt-head { margin-bottom: 20px; }
  .nt-head .btn { width: 100%; }
  .nt-main { padding: 14px 4px 14px 14px; gap: 12px; }
  .nt-icon { width: 38px; height: 38px; }
}