/*
 * ZWORLD OBSIDIAN V1
 * Noir architectural, graphite et silencieux.
 */

:root {
  color-scheme: dark;

  --obsidian-black: #050506;
  --obsidian-deep: #09090b;
  --obsidian-shell: #0d0d0f;
  --obsidian-panel: #121215;
  --obsidian-card: #18181c;
  --obsidian-raised: #202025;

  --obsidian-line:
    rgba(255, 255, 255, .07);

  --obsidian-line-strong:
    rgba(255, 255, 255, .13);

  --obsidian-text: #ededf0;
  --obsidian-muted: #87878f;
  --obsidian-faint: #5e5e66;
  --obsidian-shadow:
    rgba(0, 0, 0, .58);

  --bg-deep: var(--obsidian-black);
  --bg-panel: var(--obsidian-shell);
  --bg-card: var(--obsidian-card);

  --line: var(--obsidian-line);
  --line-strong:
    var(--obsidian-line-strong);

  --txt: #d9d9de;
  --txt-white: var(--obsidian-text);
  --txt-muted:
    rgba(235, 235, 240, .48);

  --msg-color: #e7e7ea;
  --time-color: #76767e;
  --member-label-color: #ababB2;

  --z-green: #b8b8bf;
  --z-green-dim:
    rgba(210, 210, 218, .08);

  --z-purple: #97979f;
  --z-purple-dim:
    rgba(185, 185, 198, .07);

  --z-orange: #b5b5bc;
}

html.evilz-client {
  background: var(--obsidian-black);
}

html.evilz-client body {
  position: relative;
  isolation: isolate;
  color: var(--obsidian-text);
  background:
    radial-gradient(
      circle at 52% -12%,
      rgba(255, 255, 255, .06),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #070708 0%,
      #050506 48%,
      #09090b 100%
    );
}

html.evilz-client body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, .012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .009) 1px,
      transparent 1px
    );
  background-size: 32px 32px;
  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 76%
    );
}

html.evilz-client * {
  scrollbar-color:
    #3a3a41
    transparent;
}

html.evilz-client
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

html.evilz-client
::-webkit-scrollbar-track {
  background: transparent;
}

html.evilz-client
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    #3a3a41
    padding-box;
}

html.evilz-client
::selection {
  color: #fff;
  background:
    rgba(210, 210, 220, .22);
}

/* ===== CONNEXION ===== */

html.evilz-client
#login-screen {
  background:
    radial-gradient(
      circle at 50% 38%,
      #1b1b1f,
      #09090b 39%,
      #050506 76%
    );
}

html.evilz-client
.login-card {
  max-width: 390px;
  padding: 34px 32px;
  border:
    1px solid var(--obsidian-line);
  border-radius: 24px;
  background:
    linear-gradient(
      155deg,
      rgba(25, 25, 29, .96),
      rgba(9, 9, 11, .98)
    );
  box-shadow:
    0 40px 120px
      rgba(0, 0, 0, .7),
    inset 0 1px
      rgba(255, 255, 255, .05);
  backdrop-filter: blur(24px);
}

html.evilz-client
.login-z,
html.evilz-client
.sb-logo-z {
  border: 1px solid #3b3b42;
  color: #f0f0f1;
  background:
    linear-gradient(
      145deg,
      #26262b,
      #0a0a0c
    );
  box-shadow:
    0 17px 42px
      rgba(0, 0, 0, .55),
    inset 0 1px
      rgba(255, 255, 255, .07);
}

html.evilz-client
.login-z {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 26px;
}

html.evilz-client
.login-input {
  min-height: 46px;
  border:
    1px solid var(--obsidian-line);
  border-radius: 12px;
  color: var(--obsidian-text);
  background:
    rgba(7, 7, 9, .84);
  box-shadow:
    inset 0 1px 5px
      rgba(0, 0, 0, .38);
}

html.evilz-client
.login-input:focus {
  border-color: #53535b;
  box-shadow:
    0 0 0 3px
      rgba(255, 255, 255, .055),
    inset 0 1px 5px
      rgba(0, 0, 0, .38);
}

html.evilz-client
.login-btn,
html.evilz-client
.login-btn.purple {
  min-height: 46px;
  border: 1px solid #3b3b42;
  border-radius: 12px;
  color: #f4f4f5;
  background:
    linear-gradient(
      145deg,
      #29292f,
      #141417
    );
  box-shadow:
    0 12px 28px
      rgba(0, 0, 0, .35),
    inset 0 1px
      rgba(255, 255, 255, .065);
}

html.evilz-client
.login-btn:hover,
html.evilz-client
.login-btn.purple:hover {
  background:
    linear-gradient(
      145deg,
      #36363d,
      #1b1b1f
    );
}

/* ===== COQUE WEB ===== */

@media (min-width: 761px) {
  html.evilz-client
  #app {
    gap: 10px;
    padding: 10px;
    background: transparent;
  }

  html.evilz-client
  #sidebar,
  html.evilz-client
  #main,
  html.evilz-client
  #members {
    overflow: hidden;
    border:
      1px solid var(--obsidian-line);
    background:
      rgba(13, 13, 15, .92);
    box-shadow:
      0 25px 75px
        rgba(0, 0, 0, .3),
      inset 0 1px
        rgba(255, 255, 255, .025);
    backdrop-filter: blur(18px);
  }

  html.evilz-client
  #sidebar,
  html.evilz-client
  #members {
    border-radius: 18px;
  }

  html.evilz-client
  #main {
    border-radius: 20px;
  }
}

/* ===== BARRE LATÉRALE ===== */

html.evilz-client
#sidebar {
  border-right:
    1px solid var(--obsidian-line);
  background:
    linear-gradient(
      180deg,
      rgba(18, 18, 21, .98),
      rgba(9, 9, 11, .99)
    );
}

html.evilz-client
.sb-logo {
  min-height: 68px;
  padding: 14px;
  border-bottom:
    1px solid var(--obsidian-line);
}

html.evilz-client
.sb-logo-z {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 18px;
}

html.evilz-client
.sb-logo-name {
  color: #efeff1;
  letter-spacing: -.025em;
}

html.evilz-client
.sb-logo-name em {
  color: #888890;
}

html.evilz-client
.sb-logo-toggle {
  border:
    1px solid var(--obsidian-line);
  color: #898991;
  background:
    rgba(255, 255, 255, .025);
}

html.evilz-client
.sb-label {
  color: #686870;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html.evilz-client
.sb-item {
  min-height: 38px;
  margin: 2px 7px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #898991;
}

html.evilz-client
.sb-item:hover {
  border-color:
    rgba(255, 255, 255, .045);
  color: #dcdce0;
  background:
    rgba(255, 255, 255, .036);
}

html.evilz-client
.sb-item.active-chan,
html.evilz-client
.sb-item.active-pm {
  border-color:
    rgba(255, 255, 255, .09);
  color: #f2f2f3;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .09),
      rgba(255, 255, 255, .025)
    );
  box-shadow:
    inset 3px 0 #a5a5ac;
}

html.evilz-client
.sb-badge,
html.evilz-client
.sb-badge.chan-badge {
  color: #fff;
  background: #4d4d56;
}

/* ===== EN-TÊTE ===== */

html.evilz-client
#chan-header {
  min-height: 62px;
  border-bottom:
    1px solid var(--obsidian-line);
  background:
    linear-gradient(
      180deg,
      rgba(16, 16, 19, .98),
      rgba(10, 10, 12, .95)
    );
  box-shadow:
    0 12px 34px
      rgba(0, 0, 0, .17);
}

html.evilz-client
#chan-header button,
html.evilz-client
.tbtn {
  border:
    1px solid var(--obsidian-line);
  border-radius: 10px;
  color: #96969e;
  background:
    rgba(255, 255, 255, .025);
}

html.evilz-client
#chan-header button:hover,
html.evilz-client
.tbtn:hover {
  border-color: #46464d;
  color: #efeff1;
  background:
    rgba(255, 255, 255, .06);
}

/* ===== CONVERSATION ===== */

html.evilz-client
#messages,
html.evilz-client
.messages,
html.evilz-client
#chat-messages {
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(255, 255, 255, .026),
      transparent 42%
    ),
    var(--obsidian-deep);
}

html.evilz-client
#messages > *,
html.evilz-client
.messages > *,
html.evilz-client
#chat-messages > * {
  border-radius: 9px;
}

html.evilz-client
#messages > *:hover,
html.evilz-client
.messages > *:hover,
html.evilz-client
#chat-messages > *:hover {
  background:
    rgba(255, 255, 255, .023);
}

html.evilz-client
.msg-time,
html.evilz-client
.message-time,
html.evilz-client
.time {
  color: var(--obsidian-muted);
}

html.evilz-client
.msg-text,
html.evilz-client
.message-text {
  color: var(--obsidian-text);
}

/* ===== COMPOSITEUR ===== */

html.evilz-client
#composer,
html.evilz-client
.composer,
html.evilz-client
#message-composer {
  border-top:
    1px solid var(--obsidian-line);
  background:
    rgba(9, 9, 11, .98);
}

html.evilz-client
#msg-input,
html.evilz-client
#message-input,
html.evilz-client
.composer textarea,
html.evilz-client
.composer input {
  border:
    1px solid var(--obsidian-line);
  border-radius: 14px;
  color: var(--obsidian-text);
  background:
    rgba(25, 25, 29, .92);
  box-shadow:
    inset 0 1px 5px
      rgba(0, 0, 0, .28);
}

html.evilz-client
#msg-input:focus,
html.evilz-client
#message-input:focus,
html.evilz-client
.composer textarea:focus,
html.evilz-client
.composer input:focus {
  border-color: #4c4c54;
  box-shadow:
    0 0 0 3px
      rgba(255, 255, 255, .045);
}

/* ===== MEMBRES ===== */

html.evilz-client
#members {
  border-left:
    1px solid var(--obsidian-line);
  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 20, .97),
      rgba(9, 9, 11, .99)
    );
}

html.evilz-client
#members .mb-scroll {
  padding: 8px;
}

html.evilz-client
#members button,
html.evilz-client
#members [role="button"] {
  border-radius: 9px;
}

html.evilz-client
#members button:hover,
html.evilz-client
#members [role="button"]:hover {
  background:
    rgba(255, 255, 255, .04);
}

/* ===== MODALES ET JEUX ===== */

html.evilz-client
#games-modal,
html.evilz-client
.ap-overlay,
html.evilz-client
.modal-overlay {
  background:
    rgba(0, 0, 0, .74);
  backdrop-filter: blur(13px);
}

html.evilz-client
#games-panel,
html.evilz-client
.ap-panel,
html.evilz-client
.modal,
html.evilz-client
.dialog {
  border:
    1px solid var(--obsidian-line);
  border-radius: 20px;
  background:
    linear-gradient(
      155deg,
      #1a1a1e,
      #0c0c0e
    );
  box-shadow:
    0 42px 130px
      rgba(0, 0, 0, .74),
    inset 0 1px
      rgba(255, 255, 255, .045);
}

html.evilz-client
.games-head {
  border-bottom:
    1px solid var(--obsidian-line);
}

html.evilz-client
.games-grid > * {
  border:
    1px solid var(--obsidian-line);
  border-radius: 14px;
  color: #dfdfe2;
  background:
    linear-gradient(
      145deg,
      #1c1c20,
      #101012
    );
}

html.evilz-client
.games-grid > *:hover {
  border-color: #48484f;
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px
      rgba(0, 0, 0, .36);
}

html.evilz-client
#game-float {
  overflow: hidden;
  border:
    1px solid var(--obsidian-line);
  border-radius: 18px;
  background: #09090b;
  box-shadow:
    0 40px 130px
      rgba(0, 0, 0, .74);
}

html.evilz-client
#game-float-head {
  border-bottom:
    1px solid var(--obsidian-line);
  background:
    linear-gradient(
      180deg,
      #1c1c20,
      #101012
    );
}

html.evilz-client
#game-float iframe {
  background: #050506;
}

/* ===== CONNEXION ===== */

html.evilz-client
#conn-bar {
  border:
    1px solid var(--obsidian-line-strong);
  color: #ededee;
  background:
    rgba(28, 28, 32, .95);
  box-shadow:
    0 10px 30px
      rgba(0, 0, 0, .44);
}

html.evilz-client
#conn-bar.connected {
  background:
    rgba(38, 38, 43, .96);
}

/* ===== MOBILE ===== */

@media (max-width: 760px) {
  html.evilz-client body {
    background: var(--obsidian-black);
  }

  html.evilz-client
  #pulse-app {
    background:
      radial-gradient(
        circle at 50% -10%,
        rgba(255, 255, 255, .05),
        transparent 36%
      ),
      var(--obsidian-black);
  }

  html.evilz-client
  .pulse-header {
    border-bottom:
      1px solid var(--obsidian-line);
    background:
      rgba(9, 9, 11, .97);
    backdrop-filter: blur(18px);
  }

  html.evilz-client
  .pulse-content {
    background:
      linear-gradient(
        180deg,
        #08080a,
        #050506
      );
  }

  html.evilz-client
  .pulse-nav {
    border-top:
      1px solid var(--obsidian-line);
    background:
      rgba(8, 8, 10, .98);
    backdrop-filter: blur(18px);
  }

  html.evilz-client
  .pulse-nav button {
    color: #7f7f87;
  }

  html.evilz-client
  .pulse-nav button.active,
  html.evilz-client
  .pulse-nav button.selected,
  html.evilz-client
  .pulse-nav button[aria-current="page"] {
    color: var(--obsidian-text);
  }

  html.evilz-client
  .pulse-message {
    border-radius: 12px;
  }

  html.evilz-client
  .pulse-bubble {
    border:
      1px solid var(--obsidian-line);
    background:
      linear-gradient(
        145deg,
        #1c1c20,
        #111114
      );
  }

  html.evilz-client
  .pulse-composer {
    border-top:
      1px solid var(--obsidian-line);
    background:
      rgba(8, 8, 10, .98);
  }

  html.evilz-client
  #pulse-input {
    border:
      1px solid var(--obsidian-line);
    color: var(--obsidian-text);
    background: #18181b;
  }
}

/* ===== INTERACTIONS ===== */

html.evilz-client
button,
html.evilz-client
[role="button"] {
  transition:
    color 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

html.evilz-client
button:active,
html.evilz-client
[role="button"]:active {
  transform: scale(.975);
}

@keyframes obsidian-arrive {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.evilz-client
#messages > *:last-child,
html.evilz-client
.messages > *:last-child,
html.evilz-client
#chat-messages > *:last-child {
  animation:
    obsidian-arrive
    150ms
    ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html.evilz-client *,
  html.evilz-client *::before,
  html.evilz-client *::after {
    scroll-behavior: auto;
    animation-duration: 1ms;
    transition-duration: 1ms;
  }
}

/* ===== OBSIDIAN CONTEXT PANEL V1 ===== */

@media (min-width: 761px) {
  html.evilz-client {
    --members-w: 258px;
  }

  html.evilz-client
  #main {
    position: relative;
    flex: 1 1 auto;
    transition:
      flex-basis 180ms ease,
      width 180ms ease,
      box-shadow 180ms ease;
  }

  html.evilz-client
  body.obsidian-context-ready
  #members {
    width: 0;
    min-width: 0;
    flex-basis: 0;
    margin-left: -10px;
    border-left-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform:
      translateX(16px)
      scale(.985);
    transform-origin: right center;
    transition:
      width 180ms ease,
      flex-basis 180ms ease,
      margin-left 180ms ease,
      opacity 140ms ease,
      transform 180ms ease,
      visibility 0ms linear 180ms,
      border-color 180ms ease;
  }

  html.evilz-client
  body.obsidian-context-ready
  #members > * {
    min-width: var(--members-w);
  }

  html.evilz-client
  body.obsidian-context-open
  #members {
    width: var(--members-w);
    min-width: var(--members-w);
    flex-basis: var(--members-w);
    margin-left: 0;
    border-left-color:
      var(--obsidian-line);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform:
      translateX(0)
      scale(1);
    transition:
      width 180ms ease,
      flex-basis 180ms ease,
      margin-left 180ms ease,
      opacity 170ms ease 25ms,
      transform 180ms ease,
      visibility 0ms linear 0ms,
      border-color 180ms ease;
  }

  html.evilz-client
  body.obsidian-context-open
  #main {
    box-shadow:
      0 25px 75px
        rgba(0, 0, 0, .34),
      inset 0 1px
        rgba(255, 255, 255, .025);
  }

  html.evilz-client
  #btn-members {
    position: relative;
  }

  html.evilz-client
  #btn-members::after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #6d6d76;
    opacity: 0;
    transform: scale(.6);
    transition:
      opacity 120ms ease,
      transform 120ms ease,
      background 120ms ease;
  }

  html.evilz-client
  body.obsidian-context-open
  #btn-members {
    border-color:
      var(--obsidian-line-strong);
    color: var(--obsidian-text);
    background:
      rgba(255, 255, 255, .075);
    box-shadow:
      inset 0 1px
        rgba(255, 255, 255, .04);
  }

  html.evilz-client
  body.obsidian-context-open
  #btn-members::after {
    opacity: 1;
    transform: scale(1);
    background: #d0d0d5;
  }

  html.evilz-client
  body.obsidian-context-unavailable
  #btn-members {
    opacity: .34;
    cursor: default;
    filter: grayscale(1);
  }

  html.evilz-client
  body.obsidian-context-unavailable
  #btn-members::after {
    display: none;
  }

  html.evilz-client
  #members::before {
    content: "CONTEXTE";
    display: block;
    flex: 0 0 auto;
    padding: 15px 15px 10px;
    color: var(--obsidian-faint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .17em;
  }

  html.evilz-client
  #members::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, .08) 18%,
        rgba(255, 255, 255, .035) 70%,
        transparent
      );
  }
}

@media (
  min-width: 761px
) and (
  max-width: 1050px
) {
  html.evilz-client {
    --members-w: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.evilz-client
  body.obsidian-context-ready
  #members,
  html.evilz-client
  body.obsidian-context-ready
  #main,
  html.evilz-client
  #btn-members::after {
    transition-duration: 1ms;
  }
}