/* =====================================================================
   LLOGGIA — tema "carbon & lime"
   Fundo quase preto, painéis flutuantes arredondados, verde-limão como
   cor de ação e lilás como cor de apoio.
   ===================================================================== */

:root {
  /* superfícies */
  --bg:        #0b0b0f;   /* pano de fundo da página */
  --panel:     #15151b;   /* colunas e cartões */
  --panel-2:   #1d1d25;   /* inputs, hovers */
  --panel-3:   #26262f;   /* ativo */
  --line:      #26262e;

  /* identidade */
  --lime:      #d9fb50;   /* ação primária */
  --lime-soft: rgba(217, 251, 80, .12);
  --on-lime:   #141508;   /* texto sobre limão */
  --violet:    #a595f9;   /* apoio */
  --violet-2:  #8d7bf1;
  --violet-soft: rgba(165, 149, 249, .16);

  /* texto */
  --text:      #e8e8ee;
  --text-dim:  #8b8b9a;
  --text-hi:   #ffffff;

  /* estados */
  --green:     #d9fb50;
  --red:       #ff5e6b;
  --radius:    18px;
  --radius-sm: 12px;
}

/* Fonte própria, servida daqui mesmo (a CSP bloqueia CDNs de propósito). */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #26262f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #32323d; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================ login =========================== */
.login {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(600px 400px at 85% 15%, rgba(141, 123, 241, .28), transparent 70%),
    radial-gradient(500px 380px at 10% 85%, rgba(217, 251, 80, .10), transparent 70%),
    var(--bg);
  z-index: 100;
}

.login-card {
  width: min(420px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 36px 32px;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  text-align: center;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.brand-mark { width: 62px; height: 62px; filter: drop-shadow(0 6px 18px rgba(122, 92, 255, .35)); }
.brand-word {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-hi);
  line-height: 1;
}
.brand-word i { font-style: normal; color: var(--violet); }
.brand-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: .34em; /* compensa o letter-spacing do último caractere */
}
.brand-tag b { color: var(--violet); font-weight: 700; }
.login-card h1 { font-size: 24px; color: var(--text-hi); letter-spacing: -.01em; }
.login-sub { color: var(--text-dim); margin: 8px 0 24px; font-size: 15px; }
.login-sub.small { font-size: 12px; margin-top: -12px; }

.login-card label {
  display: block;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
  letter-spacing: .04em;
}

.login-card input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  margin-bottom: 18px;
  transition: border-color .15s;
}
.login-card input:focus { border-color: var(--violet); }
.login-card input[type="date"] { color-scheme: dark; }

.btn-primary {
  width: 100%;
  padding: 13px;
  background: var(--lime);
  color: var(--on-lime);
  border-radius: 999px;
  font-weight: 700;
  transition: filter .15s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(.99); }

/* campo de senha com olho */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  border-radius: 8px;
}
.pw-eye:hover { color: var(--text-hi); }
.pw-eye svg { width: 19px; height: 19px; }

/* aviso de senhas iguais/diferentes, atualiza enquanto digita */
.pw-match { text-align: left; font-size: 12px; margin: -12px 0 14px; }
.pw-match.ok { color: var(--lime); }
.pw-match.err { color: var(--red); }

.login-hint { margin-top: 14px; font-size: 13px; color: var(--text-dim); min-height: 16px; }
.login-hint.err { color: var(--red); }
.login-hint.ok { color: var(--lime); }

.login-alt { margin-top: 16px; font-size: 13px; color: var(--text-dim); }
.linkish { background: none; border: 0; color: var(--violet); cursor: pointer; font-size: 13px; padding: 0; }
.linkish:hover { text-decoration: underline; }

.login-card input:disabled,
.login-card button:disabled { opacity: .6; cursor: wait; }

/* ============================= app ============================ */
.app {
  display: grid;
  grid-template-columns: 76px 248px 1fr auto;
  gap: 10px;
  height: 100vh;
  padding: 10px;
  background: var(--bg);
}

/* ---------------------------- rail ---------------------------- */
.rail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail-item {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
  transition: background .15s, border-radius .15s, color .15s;
  position: relative;
  user-select: none;
}
.rail-item:hover { background: var(--violet-soft); }
.rail-item.active { background: var(--violet); color: #17131f; border-radius: 14px; }
.rail-item.active::before {
  content: "";
  position: absolute;
  left: -15px;
  width: 4px;
  height: 26px;
  background: var(--lime);
  border-radius: 0 4px 4px 0;
}

.rail-home { background: var(--panel-2); }
.rail-home.active, .rail-home:hover { background: var(--panel-3); }
.rail-mark { width: 30px; height: 30px; }
.rail-add { color: var(--lime); font-size: 26px; font-weight: 300; line-height: 1; }
.rail-add:hover { background: var(--lime); color: var(--on-lime); }
.rail-add::before { display: none !important; }
.rail-sep { width: 30px; height: 1px; background: var(--line); flex: none; }

/* -------------------------- sidebar --------------------------- */
.sidebar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sidebar-header {
  height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--text-hi);
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  flex: none;
  letter-spacing: -.01em;
}

.channels { flex: 1; overflow-y: auto; padding: 14px 10px; min-height: 0; }

.cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.cat:first-child { padding-top: 0; }
.cat button { color: var(--text-dim); font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 6px; }
.cat button:hover { color: var(--lime); }

.channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 3px;
  user-select: none;
  transition: background .12s, color .12s;
}
.channel:hover { background: var(--panel-2); color: var(--text); }
.channel.active { background: var(--lime); color: var(--on-lime); font-weight: 600; }
.channel.active .hash { opacity: 1; }
.channel .hash { font-size: 16px; opacity: .6; flex: none; width: 18px; text-align: center; }
.channel .cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel .live {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--violet);
  color: #17131f;
}
.channel.active .live { background: var(--on-lime); color: var(--lime); }

.voice-members { margin: 2px 0 8px 20px; }
.voice-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
}
.voice-member:hover { background: var(--panel-2); }
.voice-member .avatar { width: 22px; height: 22px; font-size: 9px; }
.voice-member.speaking .avatar { box-shadow: 0 0 0 2px var(--lime); }
.voice-member .tag { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.voice-member .tag svg { width: 14px; height: 14px; }
.voice-member .tag .muted { color: var(--red); font-size: 11px; }
.voice-member .tag .sharing {
  color: #17131f;
  background: var(--violet);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
}

/* painel de voz conectada */
.voice-panel {
  background: var(--violet-soft);
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.voice-panel-info { flex: 1; min-width: 0; }
.voice-status { display: block; font-size: 13px; font-weight: 700; color: var(--lime); }
.voice-channel-name {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-panel-actions { display: flex; gap: 2px; }
.vbtn { padding: 7px; border-radius: 10px; color: var(--text-dim); }
.vbtn:hover { background: var(--panel-2); color: var(--text-hi); }
.vbtn.on { color: var(--lime); }
.vbtn.danger:hover { background: var(--red); color: #fff; }

/* painel do usuário */
.user-panel {
  background: var(--bg);
  margin: 8px;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.user-panel-name { flex: 1; min-width: 0; line-height: 1.25; }
.user-panel-name span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-panel-name small { font-size: 11px; color: var(--lime); }
.ubtn { padding: 7px; border-radius: 10px; color: var(--text-dim); }
.ubtn:hover { background: var(--panel-2); color: var(--text-hi); }
.ubtn.off { color: var(--red); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: #17131f;
  flex: none;
  user-select: none;
}

/* ---------------------------- main ---------------------------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.topbar {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
  z-index: 2;
}
.topbar-icon { color: var(--violet); font-size: 20px; font-weight: 700; }
.topbar-name { font-weight: 700; color: var(--text-hi); letter-spacing: -.01em; }
.topbar-divider { width: 1px; height: 22px; background: var(--line); }
.topbar-topic {
  font-size: 13px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-spacer { flex: 1; }

/* --------------------------- texto ---------------------------- */
.view-text { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 18px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.channel-intro { padding: 12px 0 24px; }
.channel-intro .big {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: var(--violet-soft);
  display: grid;
  place-items: center;
  font-size: 30px;
  color: var(--violet);
  margin-bottom: 12px;
}
.channel-intro h2 { color: var(--text-hi); font-size: 26px; letter-spacing: -.02em; }
.channel-intro p { color: var(--text-dim); margin-top: 6px; }

.msg { display: flex; gap: 12px; padding: 4px 10px; border-radius: var(--radius-sm); }
.msg:hover { background: rgba(255, 255, 255, .025); }
.msg.grouped { padding-top: 1px; }
.msg.grouped .avatar { visibility: hidden; height: 0; }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 700; color: var(--text-hi); font-size: 14px; }
.msg-time { font-size: 11px; color: var(--text-dim); }
.msg-text { color: var(--text); line-height: 1.45; word-wrap: break-word; white-space: pre-wrap; }
.msg-text code {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--lime);
}
.msg-text a { color: var(--violet); text-decoration: none; }
.msg-text a:hover { text-decoration: underline; }
.msg-text .mention {
  background: var(--violet-soft);
  color: var(--violet);
  border-radius: 6px;
  padding: 0 4px;
  font-weight: 600;
}

.date-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 8px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.date-sep::before, .date-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.load-more {
  align-self: center;
  margin: 8px 0 16px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 13px;
  transition: background .15s, color .15s;
}
.load-more:hover { background: var(--violet-soft); color: var(--violet); }

.typing { height: 24px; padding: 0 24px; font-size: 13px; color: var(--violet); }

.composer { padding: 0 14px 14px; flex: none; }
.composer form {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 6px 4px 16px;
  transition: border-color .15s;
}
.composer form:focus-within { border-color: var(--violet); }
.composer input { flex: 1; background: none; border: 0; outline: none; padding: 10px 6px; }
.composer input::placeholder { color: var(--text-dim); }
.composer-plus { color: var(--text-dim); font-size: 22px; line-height: 1; padding: 0 6px; }
.composer-plus:hover { color: var(--lime); }
.composer-send {
  background: var(--lime);
  color: var(--on-lime);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: filter .15s;
}
.composer-send:hover { filter: brightness(1.08); }
.composer-send svg { width: 17px; height: 17px; }

/* -------------------------- voz/tela -------------------------- */
.view-voice { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }

.stage {
  flex: 1;
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: auto;
  place-content: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-content: center;
}
.stage.has-video { place-content: stretch; }

.tile {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  min-height: 160px;
}
.tile.speaking { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.tile .tile-avatar { width: 76px; height: 76px; font-size: 26px; border-radius: 26px; }
.tile-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(11, 11, 15, .82);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tile-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.tile-expand {
  position: absolute;
  right: 10px;
  top: 10px;
  background: rgba(11, 11, 15, .7);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  opacity: 0;
  transition: opacity .15s;
}
.tile:hover .tile-expand { opacity: 1; }
.stage-empty { color: var(--text-dim); text-align: center; grid-column: 1 / -1; }

.stage-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px;
  flex: none;
}
.sbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.sbtn:hover { background: var(--panel-2); }
.sbtn.on { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.sbtn.off { background: var(--red); border-color: var(--red); color: #fff; }
.sbtn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.sbtn.danger:hover { filter: brightness(.92); }

.squality {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 11px 14px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.squality:hover { background: var(--panel-2); color: var(--text); }

/* -------------------------- membros --------------------------- */
.members {
  width: 240px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 10px;
  overflow-y: auto;
  min-height: 0;
  flex: none;
}
.members-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 8px 10px;
  letter-spacing: .08em;
}
.member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.member:hover { background: var(--panel-2); }
.member-name { font-size: 14px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member:hover .member-name { color: var(--text); }
.member.me .member-name { color: var(--text-hi); font-weight: 600; }
.members-more { padding: 8px; font-size: 13px; color: var(--text-dim); font-style: italic; }
.member-avatar-wrap { position: relative; flex: none; }
.member-avatar-wrap::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid var(--panel);
  box-sizing: content-box;
}

/* --------------------------- toasts --------------------------- */
.toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  color: var(--text-hi);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  font-size: 14px;
  max-width: 320px;
  animation: slide-in .2s ease;
}
.toast.error { border-left-color: var(--red); }
@keyframes slide-in { from { opacity: 0; transform: translateX(20px); } }

/* ------------------------- responsivo ------------------------- */
@media (max-width: 900px) {
  .members { display: none; }
}
@media (max-width: 680px) {
  .app { grid-template-columns: 60px 1fr; gap: 8px; padding: 8px; }
  .rail-item { width: 42px; height: 42px; font-size: 17px; }
  .sidebar {
    position: fixed;
    left: 68px;
    top: 8px;
    bottom: 8px;
    width: 230px;
    z-index: 20;
    transform: translateX(-300px);
    transition: transform .2s;
  }
  .sidebar.open { transform: none; }
  .stage { grid-template-columns: 1fr; }
}