/* muse-community-app.css — La Communauté Muse en messagerie plein écran
 * Identité propre (cyan) pour la distinguer de l'accueil Muse (violet)
 * et de Shape (corail). Chargée uniquement sur /digital/muse/communaute/.
 * ============================================================ */

body.muse-app[data-muse-section="community"] {
  --muse-accent: #0891b2;
  --muse-accent2: #22d3ee;
  --c-accent: #22d3ee;
  --c-ink: #04161b;
  --c-soft: rgba(34, 211, 238, .12);
  --c-line: rgba(255, 255, 255, .08);
  --c-surface: #0f1418;
  --c-panel: #0b1013;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(14, 116, 144, .14), transparent 60%),
    #07090b;
}

/* ── Mise en page plein écran ─────────────────────────────── */
body[data-muse-section="community"] .muse-breadcrumb,
body[data-muse-section="community"] .comm-back { display: none; }
body[data-muse-section="community"] .comm-section { padding: 0 !important; background: transparent; }
/* Le titre prend sa hauteur naturelle, le chat occupe tout le reste de l'écran. */
body[data-muse-section="community"] .comm-section > .container {
  max-width: 1280px;
  padding: 0 24px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--ma-header-h, 64px));
  min-height: 600px;
}

body[data-muse-section="community"] .comm-section .muse-section-header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  margin: 0; padding: 18px 0 14px; text-align: left; max-width: none;
  opacity: 1 !important; transform: none !important; filter: none !important;
}
body[data-muse-section="community"] .comm-section .muse-section-header .muse-eyebrow {
  order: 2; margin: 0; padding: 4px 10px; border-radius: 999px;
  background: var(--c-soft); color: var(--c-accent);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
body[data-muse-section="community"] .comm-section .muse-section-header h1 {
  order: 1; margin: 0; font: 800 24px/1.1 'Syne', 'DM Sans', sans-serif; color: #ecfeff;
}
body[data-muse-section="community"] .comm-section .muse-section-header p,
body[data-muse-section="community"] .comm-section .muse-underline { display: none; }

body[data-muse-section="community"] .comm-shell {
  margin-top: 0;
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  grid-template-columns: 330px 1fr;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(34, 211, 238, .04);
  opacity: 1 !important; transform: none !important; filter: none !important;
}

/* ── Barre de session ─────────────────────────────────────── */
body[data-muse-section="community"] .comm-auth-bar { background: var(--c-panel); border-bottom: 1px solid var(--c-line); padding: 12px 18px; }
body[data-muse-section="community"] .comm-auth-avatar,
body[data-muse-section="community"] .comm-msg-avatar { background: linear-gradient(135deg, #0e7490, #22d3ee); color: var(--c-ink); }
body[data-muse-section="community"] .comm-btn { min-height: 40px; border-color: var(--c-line); }
body[data-muse-section="community"] .comm-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
body[data-muse-section="community"] .comm-btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
body[data-muse-section="community"] .comm-btn-primary:hover { background: #67e8f9; border-color: #67e8f9; color: var(--c-ink); }

/* ── Canaux ───────────────────────────────────────────────── */
body[data-muse-section="community"] .comm-channels { background: var(--c-panel); border-right: 1px solid var(--c-line); padding: 6px; }
body[data-muse-section="community"] .comm-channel-item { border-bottom: 0; border-radius: 14px; padding: 11px 12px; margin-bottom: 2px; }
body[data-muse-section="community"] .comm-channel-item:hover { background: rgba(255, 255, 255, .04); }
body[data-muse-section="community"] .comm-channel-item.active { background: var(--c-soft); box-shadow: inset 3px 0 0 var(--c-accent); }
body[data-muse-section="community"] .comm-channel-icon { background: rgba(34, 211, 238, .1); color: var(--c-accent); border: 1px solid rgba(34, 211, 238, .18); }
body[data-muse-section="community"] .comm-channel-count { background: var(--c-accent); color: var(--c-ink); }
body[data-muse-section="community"] .comm-channel-item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* ── Conversation ─────────────────────────────────────────── */
body[data-muse-section="community"] .comm-chat-header { background: rgba(11, 16, 19, .9); border-bottom: 1px solid var(--c-line); padding: 12px 18px; }
body[data-muse-section="community"] .comm-chat-header h4 { color: #ecfeff; }
body[data-muse-section="community"] .comm-messages {
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .035) 1px, transparent 0) 0 0 / 22px 22px,
    var(--c-surface);
  padding: 18px 22px;
}
body[data-muse-section="community"] .comm-msg-author { color: var(--c-accent); }
body[data-muse-section="community"] .comm-msg-time { color: rgba(236, 254, 255, .35); }
body[data-muse-section="community"] .comm-msg-content { background: #151c21; border: 1px solid var(--c-line); color: #e6f6f8; }
body[data-muse-section="community"] .comm-msg.own .comm-msg-content { background: linear-gradient(135deg, #0e7490, #0891b2); border-color: transparent; color: #f0fdff; }
body[data-muse-section="community"] .comm-locked { border-top: 1px solid var(--c-line); }
body[data-muse-section="community"] .comm-locked button {
  border: 0; background: none; padding: 0; font: inherit; color: var(--c-accent); font-weight: 700; cursor: pointer; text-decoration: underline;
}
body[data-muse-section="community"] .comm-composer { border-top: 1px solid var(--c-line); background: var(--c-panel); }
body[data-muse-section="community"] .comm-composer textarea { border-radius: 22px; border-color: var(--c-line); }
body[data-muse-section="community"] .comm-composer textarea:focus { border-color: var(--c-accent); }
body[data-muse-section="community"] .comm-send-btn { background: var(--c-accent); color: var(--c-ink); min-width: 44px; min-height: 44px; }

/* Le bouton WhatsApp flottant recouvrait le bouton Envoyer : la messagerie a déjà son canal. */
body[data-muse-section="community"] .wa-float { display: none !important; }

/* ── Profils cliquables : avatar (photo ou initiales) et nom ─ */
body[data-muse-section="community"] .comm-msg-avatar { border: 0; padding: 0; cursor: pointer; overflow: hidden; }
body[data-muse-section="community"] .comm-auth-avatar { overflow: hidden; }
body[data-muse-section="community"] .comm-msg-avatar img,
body[data-muse-section="community"] .comm-auth-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
body[data-muse-section="community"] .comm-msg-author {
  background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--c-accent); cursor: pointer; text-align: left;
}
body[data-muse-section="community"] .comm-msg-author:hover { text-decoration: underline; }
body[data-muse-section="community"] .comm-msg-author:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }

/* ── Pièces jointes dans la conversation ──────────────────── */
body[data-muse-section="community"] .comm-att { display: block; max-width: min(320px, 100%); margin-top: 6px; }
body[data-muse-section="community"] .comm-msg.own .comm-att { margin-left: auto; }
body[data-muse-section="community"] .comm-att--img img {
  display: block; width: 100%; max-height: 320px; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-panel);
}
body[data-muse-section="community"] .comm-att--video video { display: block; width: 100%; max-height: 360px; border-radius: 14px; background: #000; }
body[data-muse-section="community"] .comm-att--audio,
body[data-muse-section="community"] .comm-att--file { padding: 10px 12px; background: #151c21; border: 1px solid var(--c-line); border-radius: 14px; }
body[data-muse-section="community"] .comm-att-name { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: .78rem; color: #cfeff4; word-break: break-word; }
body[data-muse-section="community"] .comm-att-name svg { flex: none; color: var(--c-accent); }
body[data-muse-section="community"] .comm-att--audio audio { display: block; width: 100%; height: 36px; }
body[data-muse-section="community"] .comm-att--file { display: flex; align-items: center; gap: 10px; color: #e6f6f8; text-decoration: none; }
body[data-muse-section="community"] .comm-att--file:hover { border-color: var(--c-accent); }
body[data-muse-section="community"] .comm-att--file svg { flex: none; color: var(--c-accent); }
body[data-muse-section="community"] .comm-att--file b { display: block; font-size: .82rem; word-break: break-word; }
body[data-muse-section="community"] .comm-att--file small { font-size: .72rem; color: rgba(236, 254, 255, .5); }

/* ── Saisie : trombone, fichier en attente, dépôt par glisser ─ */
body[data-muse-section="community"] .comm-attach-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-line); background: transparent; color: rgba(236, 254, 255, .7); cursor: pointer;
}
body[data-muse-section="community"] .comm-attach-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
body[data-muse-section="community"] .comm-attach-btn:disabled { opacity: .4; cursor: not-allowed; }
body[data-muse-section="community"] .comm-pending {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 18px; background: var(--c-panel); border-top: 1px solid var(--c-line);
}
body[data-muse-section="community"] .comm-pending[hidden] { display: none; }
body[data-muse-section="community"] .comm-pending-thumb {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 10px; overflow: hidden; background: #151c21; color: var(--c-accent);
}
body[data-muse-section="community"] .comm-pending-thumb img { width: 100%; height: 100%; object-fit: cover; }
body[data-muse-section="community"] .comm-pending-info { flex: 1; min-width: 0; }
body[data-muse-section="community"] .comm-pending-info b { display: block; font-size: .82rem; color: #e6f6f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-muse-section="community"] .comm-pending-info small { font-size: .72rem; color: rgba(236, 254, 255, .55); }
body[data-muse-section="community"] .comm-pending-remove {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: none; color: rgba(236, 254, 255, .6); font-size: 1.4rem; cursor: pointer;
}
body[data-muse-section="community"] .comm-pending-remove:hover { color: #fff; background: rgba(255, 255, 255, .06); }
body[data-muse-section="community"] .comm-chat.comm-drop { outline: 2px dashed var(--c-accent); outline-offset: -8px; }

/* ── Actions sur un message : signaler (les autres) ou supprimer (le sien) ── */
body[data-muse-section="community"] .comm-msg-act {
  margin-left: 6px; padding: 2px 6px; border: 0; border-radius: 6px; background: none;
  font: 600 .68rem 'DM Sans', sans-serif; color: rgba(236, 254, 255, .35); cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
body[data-muse-section="community"] .comm-msg:hover .comm-msg-act,
body[data-muse-section="community"] .comm-msg-act:focus-visible { opacity: 1; }
body[data-muse-section="community"] .comm-msg-act:hover { color: var(--c-accent); background: rgba(255, 255, 255, .05); }
@media (hover: none) { body[data-muse-section="community"] .comm-msg-act { opacity: .7; } }
body[data-muse-section="community"] .comm-msg-content .ms-embed { max-width: 320px; }

/* Sous-navigation Fil / Annonces / Canaux / Messages au-dessus de la messagerie */
body[data-muse-section="community"] .comm-section .ms-subnav { flex: 0 0 auto; margin: 0 0 12px; }
@media (max-width: 860px) {
  body[data-muse-section="community"] .comm-section .ms-subnav { margin: 0 14px 10px; }
}

/* ── Fenêtre de connexion aux couleurs de la communauté ───── */
body[data-muse-section="community"] .comm-auth-tab.active,
body[data-muse-section="community"] .comm-auth-submit { background: var(--c-accent); color: var(--c-ink); }
body[data-muse-section="community"] .comm-auth-field input:focus { border-color: var(--c-accent); }

/* ── Mobile : messagerie plein écran ──────────────────────── */
@media (max-width: 860px) {
  body[data-muse-section="community"] .comm-section > .container {
    padding: 0;
    height: calc(100dvh - var(--ma-header-h, 56px) - var(--ma-tabbar-h, 64px) - env(safe-area-inset-bottom));
    min-height: 0;
  }
  body[data-muse-section="community"] .comm-section .muse-section-header { padding: 12px 14px 10px; }
  body[data-muse-section="community"] .comm-section .muse-section-header .muse-eyebrow { display: none; }
  body[data-muse-section="community"] .comm-section .muse-section-header h1 { font-size: 18px; letter-spacing: -.01em; }
  body[data-muse-section="community"] .comm-shell {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  body[data-muse-section="community"] .comm-auth-bar { padding: 10px 14px; }
  body[data-muse-section="community"] .comm-auth-status { font-size: .8rem; }

  /* Conversation ouverte : elle prend tout l'écran, comme une app de messagerie.
     La barre d'onglets passe dessous pour laisser la place au clavier. */
  body[data-muse-section="community"] .comm-shell.comm-mobile-chat-open {
    position: fixed;
    top: var(--ma-header-h, 56px);
    left: 0; right: 0; bottom: 0;
    height: auto;
    z-index: 1100;
    grid-template-rows: minmax(0, 1fr);
  }
  body[data-muse-section="community"] .comm-shell.comm-mobile-chat-open .comm-auth-bar { display: none; }
  body[data-muse-section="community"] .comm-shell.comm-mobile-chat-open .comm-composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.comm-chat-open { overflow: hidden; }
  body.comm-chat-open .ma-tabbar { visibility: hidden; }
  body[data-muse-section="community"] .comm-chat-back { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 12px; }
  body[data-muse-section="community"] .comm-chat-back:hover { background: rgba(255, 255, 255, .06); }
  body[data-muse-section="community"] .wa-float { display: none !important; }
}

/* ── Annonces de collab dans les canaux ───────────────────── */
body[data-muse-section="community"] .comm-channel-item--board { margin-bottom: 6px; border: 1px solid rgba(34, 211, 238, .25); background: rgba(34, 211, 238, .06); }
body[data-muse-section="community"] .comm-collab { align-self: stretch; }
body[data-muse-section="community"] .comm-chat-titles { min-width: 0; flex: 1; }
body[data-muse-section="community"] .comm-chat-tools { flex: none; }
body[data-muse-section="community"] .comm-collab-btn { width: auto; padding: 0 12px; gap: 6px; border-radius: 22px; font: 700 12.5px 'DM Sans', sans-serif; }
body[data-muse-section="community"] .comm-collab-btn[hidden] { display: none; }
@media (max-width: 860px) {
  body[data-muse-section="community"] .comm-chat-header { flex-wrap: wrap; }
  body[data-muse-section="community"] .comm-chat-tools { width: 100%; }
  body[data-muse-section="community"] .comm-collab-btn span { display: none; }
  body[data-muse-section="community"] .comm-collab-btn { width: 44px; padding: 0; }
}