/* Messagerie Inside Pace — même langage premium que le calendrier et les
   bulles de l'accueil. Ces règles restent limitées à la page Messages. */

body:has(input[placeholder="Rechercher un athlète…"]) {
  --msg-navy-0: #0a1534;
  --msg-navy-1: #0d193b;
  --msg-navy-2: #142a55;
  --msg-navy-3: #173563;
  --msg-gold: #ffc447;
  --msg-gold-soft: #ffd263;
  --msg-green: #22a06b;
  --msg-green-soft: #53ca90;
  --msg-white: rgba(255, 255, 255, 0.97);
  --msg-white-2: rgba(255, 255, 255, 0.72);
  --msg-white-3: rgba(255, 255, 255, 0.52);
}

/* Répertoire */
body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div {
  position: relative;
  padding-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    radial-gradient(250px 170px at 100% 0%, rgba(255, 196, 71, 0.19), transparent 73%),
    radial-gradient(260px 190px at 0% 100%, rgba(34, 160, 107, 0.14), transparent 75%),
    linear-gradient(145deg, var(--msg-navy-1) 0%, var(--msg-navy-2) 63%, var(--msg-navy-3) 100%) !important;
  box-shadow: 0 18px 44px rgba(4, 12, 38, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div::before {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--msg-green), var(--msg-green-soft) 48%, var(--msg-gold));
  content: '';
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:first-child {
  padding: 17px 13px 10px !important;
  background: transparent !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) input[placeholder="Rechercher un athlète…"] {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--msg-white) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.12) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) input[placeholder="Rechercher un athlète…"]::placeholder {
  color: rgba(255, 255, 255, 0.52) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) input[placeholder="Rechercher un athlète…"]:focus {
  border-color: rgba(255, 196, 71, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(255, 196, 71, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:first-child svg {
  color: rgba(255, 255, 255, 0.68) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:first-child > button {
  border: 1px solid rgba(83, 202, 144, 0.32) !important;
  background: rgba(34, 160, 107, 0.14) !important;
  color: #8ce2b6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:last-child {
  display: grid !important;
  gap: 7px;
  padding: 2px 9px 10px;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:last-child > button {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 10px 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px;
  background:
    radial-gradient(100px 70px at 100% 0%, rgba(255, 196, 71, 0.1), transparent 74%),
    linear-gradient(145deg, rgba(8, 20, 50, 0.74), rgba(29, 59, 108, 0.68)) !important;
  box-shadow: 0 8px 18px rgba(1, 8, 28, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  -webkit-tap-highlight-color: transparent;
  transition: transform 130ms ease, border-color 130ms ease, filter 130ms ease;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:last-child > button::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(34, 160, 107, 0.72), rgba(83, 202, 144, 0.78), rgba(255, 196, 71, 0.78));
  opacity: 0.75;
  content: '';
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:last-child > button:active {
  transform: scale(0.985);
  filter: brightness(1.07);
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:last-child > button span {
  color: var(--msg-white) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:last-child > button div > div:last-child > span:first-child {
  color: var(--msg-white-2) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div > div:last-child > button div > div:first-child > span:last-child {
  color: rgba(255, 255, 255, 0.53) !important;
}

/* Discussion ouverte */
body:has(input[placeholder="Rechercher un athlète…"]) section:has(> .msg-conversation-layout) {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(330px 220px at 100% 0%, rgba(255, 196, 71, 0.17), transparent 73%),
    radial-gradient(360px 260px at 0% 100%, rgba(34, 160, 107, 0.13), transparent 76%),
    linear-gradient(145deg, var(--msg-navy-1), var(--msg-navy-2) 65%, var(--msg-navy-3)) !important;
  box-shadow: 0 20px 52px rgba(4, 12, 38, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) section:has(> .msg-conversation-layout)::before {
  position: absolute;
  z-index: 5;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--msg-green), var(--msg-green-soft) 48%, var(--msg-gold));
  content: '';
}

body:has(input[placeholder="Rechercher un athlète…"])
  section:has(> .msg-conversation-layout) > div:first-child {
  padding-top: 17px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(5, 15, 41, 0.22) !important;
  backdrop-filter: blur(12px);
}

body:has(input[placeholder="Rechercher un athlète…"])
  section:has(> .msg-conversation-layout) > div:first-child > button {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--msg-white) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.14);
}

body:has(input[placeholder="Rechercher un athlète…"])
  section:has(> .msg-conversation-layout) > div:first-child > span {
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body:has(input[placeholder="Rechercher un athlète…"])
  section:has(> .msg-conversation-layout) > div:first-child > div > div:first-child {
  color: var(--msg-white) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  section:has(> .msg-conversation-layout) > div:first-child > div > div:last-child {
  color: #83dfb1 !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  section:has(> .msg-conversation-layout) > div:first-child > a {
  color: var(--msg-gold-soft) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-conversation-layout,
body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane {
  background: transparent !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-list {
  padding: 4px 7px 9px;
  border-right: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(4, 14, 39, 0.25) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-list > div:first-child {
  color: rgba(255, 255, 255, 0.54) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-button {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  margin: 0 0 7px;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px;
  background:
    radial-gradient(100px 62px at 100% 0%, rgba(255, 196, 71, 0.09), transparent 72%),
    linear-gradient(145deg, rgba(13, 32, 72, 0.82), rgba(25, 55, 102, 0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 7px 16px rgba(0, 0, 0, 0.13);
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-button::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(34, 160, 107, 0.68), rgba(83, 202, 144, 0.72), rgba(255, 196, 71, 0.76));
  content: '';
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-button[aria-pressed="true"] {
  border-color: rgba(255, 196, 71, 0.72) !important;
  background: radial-gradient(120px 74px at 100% 0%, rgba(255, 196, 71, 0.2), transparent 72%), linear-gradient(145deg, #102044, #1a3a70) !important;
  box-shadow: 0 0 0 2px rgba(255, 196, 71, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 9px 20px rgba(0, 0, 0, 0.16);
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-button strong,
body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-button > div:nth-child(3) {
  color: var(--msg-white) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-button > div:nth-child(2) {
  color: rgba(255, 255, 255, 0.48) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: radial-gradient(190px 90px at 100% 0%, rgba(255, 196, 71, 0.15), transparent 74%), linear-gradient(145deg, rgba(10, 27, 64, 0.9), rgba(24, 56, 105, 0.78)) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-heading > div > div:first-child {
  color: var(--msg-white) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-heading > div > div:last-child {
  color: var(--msg-white-3) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-heading > button {
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--msg-gold-soft) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .msg-thread-pane > div:nth-last-child(2) {
  background:
    radial-gradient(280px 220px at 100% 0%, rgba(255, 196, 71, 0.07), transparent 74%),
    radial-gradient(300px 240px at 0% 100%, rgba(34, 160, 107, 0.08), transparent 76%),
    rgba(5, 15, 41, 0.48) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .msg-thread-pane > div:nth-last-child(2) > div[style*="justify-self: center"] {
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) button[aria-label^="Voir la séance"] > div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(170px 100px at 100% 0%, rgba(255, 196, 71, 0.15), transparent 74%),
    radial-gradient(180px 120px at 0% 100%, rgba(34, 160, 107, 0.12), transparent 76%),
    linear-gradient(145deg, #0d193b, #173563) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) button[aria-label^="Voir la séance"] > div::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--msg-green), var(--msg-green-soft), var(--msg-gold));
  content: '';
}

body:has(input[placeholder="Rechercher un athlète…"]) button[aria-label^="Voir la séance"] > div div {
  color: var(--msg-white) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) button[aria-label^="Voir la séance"] > div span {
  color: var(--msg-white-2) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) button[aria-label^="Voir la séance"] > div span:last-child {
  color: var(--msg-gold-soft) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) button[aria-label^="Répondre à"] {
  border-color: rgba(255, 196, 71, 0.66) !important;
  background: radial-gradient(160px 90px at 100% 0%, rgba(255, 196, 71, 0.1), transparent 73%), linear-gradient(145deg, rgba(27, 57, 105, 0.94), rgba(42, 76, 130, 0.88)) !important;
  color: var(--msg-white) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .msg-thread-pane > div:nth-last-child(2) > div[style*="justify-self: end"] > div:first-child {
  border: 1px solid rgba(255, 196, 71, 0.25);
  background: radial-gradient(160px 90px at 100% 0%, rgba(255, 196, 71, 0.18), transparent 73%), linear-gradient(145deg, #111f43, #1c3b70) !important;
  color: var(--msg-white) !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body:has(input[placeholder="Rechercher un athlète…"])
  .msg-thread-pane > div:nth-last-child(2) > div[style*="justify-self: start"] > div:last-child,
body:has(input[placeholder="Rechercher un athlète…"])
  .msg-thread-pane > div:nth-last-child(2) > div[style*="justify-self: end"] > div:last-child {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Composer */
body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane > div:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: radial-gradient(230px 130px at 100% 0%, rgba(255, 196, 71, 0.09), transparent 74%), rgba(4, 14, 39, 0.64) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane > div:last-child > div {
  color: var(--msg-white-2) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .msg-thread-pane > div:last-child div[style*="flex-wrap: wrap"] > button {
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--msg-white) !important;
}

body:has(input[placeholder="Rechercher un athlète…"])
  .msg-thread-pane > div:last-child div[style*="flex-wrap: wrap"] > button:first-child {
  border-color: rgba(255, 196, 71, 0.36) !important;
  background: linear-gradient(135deg, var(--msg-gold), #ffd873) !important;
  color: var(--msg-navy-0) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane textarea {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.085) !important;
  color: var(--msg-white) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane textarea:focus {
  border-color: rgba(255, 196, 71, 0.68) !important;
  box-shadow: 0 0 0 3px rgba(255, 196, 71, 0.12) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane textarea + button {
  border: 1px solid rgba(255, 196, 71, 0.32) !important;
  background: linear-gradient(135deg, var(--msg-gold), #ffd873) !important;
  color: var(--msg-navy-0) !important;
  box-shadow: 0 8px 18px rgba(255, 196, 71, 0.16) !important;
}

body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane textarea + button:disabled {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  body:has(input[placeholder="Rechercher un athlète…"])
    .desktop-col:has(input[placeholder="Rechercher un athlète…"]) > div,
  body:has(input[placeholder="Rechercher un athlète…"]) section:has(> .msg-conversation-layout) {
    border-radius: 24px !important;
  }

  body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-list {
    padding: 7px 7px 3px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  }

  body:has(input[placeholder="Rechercher un athlète…"]) .msg-session-button {
    min-width: 158px;
    margin-right: 7px;
    margin-bottom: 5px;
  }

  body:has(input[placeholder="Rechercher un athlète…"])
    .msg-thread-pane > div:nth-last-child(2) {
    min-height: 300px !important;
    max-height: 48vh !important;
  }

  body:has(input[placeholder="Rechercher un athlète…"]) .msg-thread-pane > div:last-child {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(input[placeholder="Rechercher un athlète…"]) * {
    transition: none !important;
  }
}