/* Shared scale comes from the validated Library hub, not a new visual theme. */
.message-unread-badge { position:absolute; top:2px; right:10%; border-radius:999px; padding:2px 5px; min-width:18px; background:#c12877; color:#fff; font:700 11px/1.3 sans-serif; }
.message-unread-badge[hidden] { display:none; }
.mobile-bottom-nav [data-mobile-tab="messages"] { position:relative; }
.messages-main { width:100%; max-width:800px; margin:24px auto; padding:0 24px 32px; min-width:0; }
.messages-page > .page-shell > .mobile-app-header { display:flex; align-items:center; justify-content:space-between; padding:24px; }
.messages-main [hidden] { display:none !important; }
.messages-main button:focus-visible,.messages-main a:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.message-search { display:block; width:100%; min-height:56px; border:var(--mobile-border); border-radius:28px; padding:12px 20px; background:#fafafa; font:inherit; }
.conversation-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:18px 0; border:0; border-bottom:1px solid #eee; background:transparent; color:inherit; font:inherit; min-width:0; cursor:pointer; }
.conversation-row .mini-avatar { flex:0 0 44px; width:44px; height:44px; border-radius:50%; overflow:hidden; }
.conversation-row .mini-avatar img { width:100%; height:100%; object-fit:cover; }
.conversation-copy { flex:1; min-width:0; display:grid; gap:5px; }
.message-preview { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#666; font-size:14px; }
.conversation-meta { display:grid; justify-items:end; gap:8px; font-size:11px; color:#777; }
.message-count { background:var(--primary); color:white; padding:2px 7px; border-radius:99px; }
.message-empty { padding:24px 0; color:#666; line-height:1.6; }
.message-thread-header { display:flex; align-items:center; gap:16px; padding-bottom:16px; }
.message-thread-header h1 { font-size:22px; margin:0; overflow-wrap:anywhere; }
.message-thread-header button { width:44px; min-height:44px; flex:0 0 44px; border-radius:50%; border:var(--mobile-border); background:white; }
.message-log { height:min(55dvh,600px); overflow:auto; display:flex; flex-direction:column; gap:12px; padding:12px 2px; }
.message-bubble { max-width:85%; align-self:flex-start; padding:12px 16px; border-radius:20px; background:#f1f1f4; overflow-wrap:anywhere; }
.message-bubble.is-mine { align-self:flex-end; background:#fbe8f3; }
.message-bubble p { margin:0 0 6px; white-space:pre-wrap; }
.message-bubble small { font-size:11px; color:#625763; }
.message-form { display:flex; align-items:end; gap:8px; margin-top:16px; }
.message-form textarea { flex:1; min-width:0; min-height:56px; max-height:140px; resize:vertical; border:var(--mobile-border); border-radius:20px; padding:14px; font:inherit; }
.message-form button { min-height:48px; border:0; border-radius:999px; padding:12px 18px; color:#fff; background:linear-gradient(120deg,#6543c2,#b83484); font-family:inherit; font-size:15px; font-weight:700; line-height:1.2; cursor:pointer; }
.messages-main .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.message-form button:disabled { opacity:.55; }
.messages-status { min-height:24px; font-size:14px; color:#85436c; }
.legal-shell { width:100%; max-width:850px; margin-inline:auto; }
.legal-copy { max-width:70ch; margin-inline:auto; overflow-wrap:anywhere; line-height:1.7; }
.site-footer { padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px)); }
html[data-native-app="true"]:is([data-auth-state="initializing"],[data-auth-state="error"]) body > .page-shell { visibility:hidden; }
html[data-native-app="true"][data-auth-state="initializing"] body::before { content:"Restauration de la session..."; display:block; padding:40px 16px; text-align:center; }
#authStatusBanner.profile-sync-toast { opacity:1; transform:translateY(0); transition:opacity 180ms ease,transform 180ms ease; }
#authStatusBanner.profile-sync-toast.is-dismissing { opacity:0; transform:translateY(4px); pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
  #authStatusBanner.profile-sync-toast { transition:none; transform:none; }
}
@media (max-width:768px) {
  .brandbook-body.has-mobile-nav {
    --app-safe-top:env(safe-area-inset-top,0px);
    --app-safe-bottom:env(safe-area-inset-bottom,0px);
    --app-header-top:calc(var(--app-safe-top) + 16px);
    --app-nav-clearance:calc(72px + 12px + var(--app-safe-bottom));
    --app-toast-left:max(16px,env(safe-area-inset-left,0px));
    --app-toast-right:max(16px,env(safe-area-inset-right,0px));
    --app-toast-bottom:calc(var(--app-nav-clearance) + 16px);
    padding-bottom:calc(var(--app-nav-clearance) + 24px);
  }
  /* The header owns the top inset; do not add it again to body or page-shell. */
  .brandbook-body.has-mobile-nav .mobile-app-header.mobile-app-header--title {
    height:auto; min-height:calc(84px + var(--app-safe-top));
    padding-top:var(--app-header-top); padding-bottom:16px;
  }
  .brandbook-body.has-mobile-nav .mobile-bottom-nav {
    height:var(--app-nav-clearance); min-height:var(--app-nav-clearance);
    padding-bottom:calc(var(--app-safe-bottom) + 12px);
    padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);
  }
  .library-page #addReferenceForm .dialog-head {
    min-height:calc(84px + var(--app-safe-top)); padding-top:var(--app-header-top);
  }
  :is(.feed-page,.messages-page,.profile-page,.likepass-page) .mobile-app-header.mobile-app-header--title {
    display:grid; grid-template-columns:minmax(0,1fr) 52px; grid-template-rows:52px;
    height:auto; min-height:calc(84px + env(safe-area-inset-top,0px)); gap:12px;
    padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));
    background:#fff; border-bottom:1px solid rgba(15,17,21,.06);
  }
  :is(.feed-page,.messages-page,.profile-page,.likepass-page) .mobile-app-header--title > strong {
    grid-area:1/1; font-size:32px; font-weight:800; line-height:1.05; letter-spacing:-.03em; text-align:left; color:#111;
  }
  :is(.feed-page,.messages-page,.profile-page,.likepass-page) .mobile-app-header > :is(.mobile-app-header-spacer,.mobile-app-header-icon) { display:none; }
  :is(.feed-page,.messages-page,.profile-page,.likepass-page) .mobile-app-account {
    grid-area:1/2; width:52px; height:52px; max-width:52px;
  }
  :is(.feed-page,.messages-page,.profile-page,.likepass-page) .mobile-app-account :is(.auth-trigger,.header-user-profile) {
    display:flex; align-items:center; justify-content:center; width:52px; height:52px; min-height:52px; padding:0; border-radius:50%; overflow:hidden; border:var(--mobile-border); background:#fff;
  }
  :is(.feed-page,.messages-page,.profile-page,.likepass-page) .mobile-app-account .header-user-avatar { width:100%; height:100%; border-radius:50%; }
  .messages-main { margin:0 auto; padding:16px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px)); }
  .messages-page { background:#fff; }
  .likepass-page .main-grid { min-height:0; align-content:start; }
  .brandbook-body:has(.legal-shell) > .page-shell { width:100%; max-width:100%; margin-inline:0; }
  .legal-shell { padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px)); }
  .library-page:not(.library-mobile-results-view) .library-trending-card.has-image > :not(img) { position:relative; z-index:2; }
  .library-page:not(.library-mobile-results-view) .library-trending-card.has-image .library-trending-rank { position:absolute; }
}
@media (orientation:landscape) and (max-height:500px) and (max-width:768px),
       (orientation:landscape) and (max-height:500px) and (max-width:1024px) and (hover:none) and (pointer:coarse) {
  :is(.feed-page,.messages-page,.profile-page) .mobile-app-header.mobile-app-header--title { display:none; }
}