/* Faixa de servidores e janelas de criar, escolher, entrar, convidar e excluir servidor.
   Só usa as variáveis dos temas, para acompanhar Grafite, Meia-noite e Alto contraste. */
#server-list { display: flex; flex-direction: column; gap: 8px; }
.server-entry { border: 0; padding: 0; background: none; flex-shrink: 0; }
.server-add { border: 0; padding: 0; background: none; flex-shrink: 0; }
.server-add .rail-icon { color: var(--green); }
.server-add:hover .rail-icon { background: var(--green); color: #fff; }

/* "Seus servidores": só no celular, onde a faixa de servidores fica escondida. */
.server-picker {
  display: none; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 16px; flex-shrink: 0;
  border: 0; border-bottom: 1px solid var(--divider); background: var(--bg-rail); color: var(--interactive);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.server-picker span:nth-child(2) { flex: 1; text-align: left; }
.server-picker:hover { color: var(--text-strong); background: var(--hover-strong); }
@media (max-width: 640px) { .server-picker { display: flex; } }

/* ---------- Janela ---------- */
/* Acima das configurações do servidor (z-index 25), de onde também se abre "Excluir servidor". */
#server-dialog { z-index: 40; background: rgba(6, 6, 8, .72); backdrop-filter: blur(6px); animation: fade-in .16s ease-out; }
.server-dialog {
  position: relative; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 32px 28px 24px; border-radius: 16px; background: var(--bg-main); color: var(--text);
  border: 1px solid var(--divider); box-shadow: 0 24px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: dialog-in .26s cubic-bezier(.16, 1, .3, 1);
}
/* Brilho suave atrás do título, na cor do tom da janela. */
.server-dialog::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 180px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent);
}
.server-dialog.tone-danger::before { background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--red) 14%, transparent), transparent); }
.server-dialog > :not(.dialog-close) { position: relative; }
.server-dialog .dialog-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.server-dialog .dialog-close:hover { background: var(--hover-strong); color: var(--text-strong); transform: rotate(90deg); }

.dialog-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; text-align: center; }
.dialog-hero {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 18px; color: #fff;
  background: var(--brand-gradient); box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: hero-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.tone-danger .dialog-hero { background: linear-gradient(135deg, #ff7b82, #d63a44); box-shadow: 0 12px 30px rgba(240, 86, 94, .32), inset 0 1px 0 rgba(255, 255, 255, .25); }
@keyframes hero-in { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
.dialog-head h2 { margin: 0; padding: 0 24px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--text-strong); overflow-wrap: anywhere; }
.dialog-head p { max-width: 360px; margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }

/* Campos */
.server-dialog label { display: block; margin: 0 0 8px; color: var(--interactive); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.server-dialog input {
  width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--divider); border-radius: 10px; background: var(--bg-rail);
  color: var(--text-strong); font: inherit; font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.server-dialog input::placeholder { color: var(--text-muted); opacity: .7; }
.server-dialog input:hover:not(:focus):not(:disabled) { border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.server-dialog input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.server-dialog.tone-danger input:focus { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.server-dialog input:disabled { opacity: .6; }
.dialog-hint { margin: 10px 0 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.dialog-hint code { padding: 1px 6px; border-radius: 5px; background: var(--hover-strong); color: var(--interactive); font-family: var(--mono); font-size: 12px; }
.invite-error { margin: 10px 0 0; color: var(--red); font-size: 13.5px; line-height: 1.45; }
.invite-error:empty { display: none; }

/* Rodapé com as ações, como no Discord: "Voltar" à esquerda e a ação principal à direita. */
.server-dialog .dialog-actions {
  position: sticky; bottom: -24px; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin: 24px -28px -24px; padding: 16px 28px; background: var(--bg-sidebar); border-top: 1px solid var(--divider);
}
.server-dialog .dialog-actions > .secondary { margin-right: auto; }
.server-dialog :is(.btn-primary, .btn-danger, .secondary, .btn-ghost) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 96px; height: 40px; margin: 0; padding: 0 18px;
  border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .2s, transform .12s, opacity .15s;
}
.server-dialog .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 28%, transparent); }
.server-dialog .btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
.server-dialog .btn-danger { background: var(--red-dark); color: #fff; }
.server-dialog .btn-danger:not(:disabled) { box-shadow: 0 6px 20px rgba(217, 67, 75, .35); animation: armed .4s cubic-bezier(.34, 1.56, .64, 1); }
.server-dialog .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red-dark) 82%, #000); }
@keyframes armed { 40% { transform: scale(1.05); } }
.server-dialog .secondary { min-width: 0; padding: 0 8px; background: transparent; color: var(--interactive); }
.server-dialog .secondary:hover { color: var(--text-strong); text-decoration: underline; }
.server-dialog .btn-ghost { background: transparent; color: var(--text); }
.server-dialog .btn-ghost:hover { background: var(--hover-strong); }
.server-dialog button:active:not(:disabled) { transform: scale(.97); }
.server-dialog :is(.btn-primary, .btn-danger):disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.server-dialog :is(button, input):focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 70%, #fff); outline-offset: 2px; }

/* ---------- Opções clicáveis ---------- */
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.server-choice {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px 12px 12px; border: 1px solid var(--divider); border-radius: 12px;
  background: var(--bg-sidebar); color: var(--text-strong); text-align: left; font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s, transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s;
}
.server-choice:hover {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 7%, var(--bg-sidebar));
  transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.server-choice:active { transform: translateY(0) scale(.99); }
.server-choice.current { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.server-choice.current small { color: color-mix(in srgb, var(--brand) 75%, #fff); }
.server-choice .choice-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.server-choice small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 13px; font-weight: 400; }
.choice-chev { display: grid; color: var(--text-muted); transition: transform .2s cubic-bezier(.16, 1, .3, 1), color .15s; }
.server-choice:hover .choice-chev { transform: translateX(3px); color: var(--text-strong); }
.server-choice .rail-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; font-size: 15px; background: var(--hover-strong); color: var(--text-strong); cursor: inherit; }
.choice-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; color: #fff; }
.choice-icon.brand { background: var(--brand-gradient); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent); }
.choice-icon.green { background: linear-gradient(135deg, #4bd8a0, #1f9f68); box-shadow: 0 6px 16px rgba(63, 191, 133, .26); }
.server-choice:hover .choice-icon .ico { animation: choice-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes choice-pop { 45% { transform: scale(1.2) rotate(-8deg); } }

/* Prévia do ícone ao criar */
.create-preview-wrap { display: flex; justify-content: center; margin: -8px 0 20px; }
.server-dialog .create-preview {
  width: 76px; height: 76px; border-radius: 24px; font-size: 26px; font-weight: 700; cursor: default;
  color: var(--text-muted); background: transparent; border: 2px dashed color-mix(in srgb, var(--text) 24%, transparent);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.server-dialog .create-preview.filled {
  border-color: transparent; background: var(--brand-gradient); color: #fff;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- Convite ---------- */
.invite-field {
  display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--divider); border-radius: 12px; background: var(--bg-rail);
  transition: border-color .15s, box-shadow .15s;
}
.invite-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.server-dialog .invite-field input { height: 40px; padding: 0 10px; border: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 14px; text-overflow: ellipsis; }
.server-dialog .invite-copy { flex-shrink: 0; min-width: 116px; height: 40px; box-shadow: none; }
.server-dialog .invite-copy.copied { background: var(--green); animation: armed .4s cubic-bezier(.34, 1.56, .64, 1); }
.invite-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.invite-note .ico { flex-shrink: 0; margin-top: 1px; }
.invite-revoke {
  display: block; margin: 18px auto 0; padding: 6px 12px; border: 0; border-radius: 8px; background: none;
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.invite-revoke:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.invite-identity { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 2px; text-align: center; }
.invite-identity .rail-icon {
  width: 84px; height: 84px; margin-bottom: 8px; border-radius: 26px; font-size: 28px; cursor: default; color: #fff;
  background: var(--brand-gradient); box-shadow: 0 14px 32px color-mix(in srgb, var(--brand) 35%, transparent); animation: hero-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.invite-identity .rail-icon.has-image { background: #000; }
.invite-name { color: var(--text-strong); font-size: 21px; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.invite-identity p { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-muted); font-size: 14px; }
.invite-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }

/* ---------- Excluir servidor ---------- */
.delete-summary {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; padding: 16px;
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--red) 6%, var(--bg-sidebar));
}
.delete-target { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.delete-target > div { min-width: 0; }
.delete-target .rail-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; font-size: 15px; background: var(--hover-strong); color: var(--text-strong); cursor: default; }
.delete-target strong { display: block; color: var(--text-strong); font-size: 15.5px; overflow-wrap: anywhere; }
.delete-target small { color: var(--text-muted); font-size: 12.5px; }
.delete-list-title { color: color-mix(in srgb, var(--red) 75%, var(--text)); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.delete-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.delete-list li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; }
.delete-list .ico { flex-shrink: 0; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); stroke-width: 3; }
.delete-keep { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--divider); color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.delete-keep .ico { flex-shrink: 0; margin-top: 1px; color: var(--green); }
.server-dialog .confirm-label { color: var(--interactive); font-size: 13.5px; font-weight: 500; letter-spacing: 0; }
.confirm-label strong { padding: 1px 7px; border-radius: 6px; background: var(--hover-strong); color: var(--text-strong); font-weight: 700; user-select: all; }
.confirm-field { position: relative; }
.server-dialog .confirm-field input { padding-right: 44px; }
.confirm-ok {
  position: absolute; top: 50%; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px;
  border-radius: 50%; background: var(--red-dark); color: #fff; opacity: 0; transform: scale(.4);
  transition: opacity .15s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.confirm-field.match .confirm-ok { opacity: 1; transform: none; }
.server-dialog .confirm-field.match input { border-color: var(--red); }

/* ---------- Início sem servidores ---------- */
.server-welcome-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.server-welcome-actions button {
  height: 42px; margin-top: 0; padding: 0 18px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s, transform .12s, box-shadow .2s;
}
.server-welcome-actions .btn-primary { box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 30%, transparent); }
.server-welcome-actions .secondary { background: var(--hover-strong); color: var(--text-strong); }
.server-welcome-actions .secondary:hover { background: color-mix(in srgb, var(--text) 16%, transparent); }
.server-welcome-actions button:active { transform: scale(.97); }

@media (max-width: 640px) {
  .server-dialog { padding: 28px 20px 20px; }
  .server-dialog .dialog-actions { bottom: -20px; margin: 22px -20px -20px; padding: 14px 20px; }
  .dialog-head h2 { font-size: 20px; }
}