/* ============================================================
   AUTH — login gate, logout button
   ============================================================ */

/* ------------------------------------------------------------
   LOGOUT BUTTON (sidebar header)
------------------------------------------------------------ */

.side-panel-header-actions {
  display: flex;

  align-items: center;

  gap: 4px;
}

.side-panel-logout-button {
  display: grid;

  place-items: center;

  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: var(--text-secondary);

  cursor: pointer;

  transition:
    color var(--transition),
    background var(--transition);
}

.side-panel-logout-button:hover {
  color: #f87171;

  background: rgba(248, 113, 113, 0.08);
}

/* ------------------------------------------------------------
   GATE DIALOG
   ------------------------------------------------------------
   Deliberately undismissable: no close button, no click-outside
   handler wired up in JS, and the "cancel" (Esc) event is
   preventDefault()-ed — there is no app to fall back to without
   a session, so this must stay up until sign-in succeeds.
------------------------------------------------------------ */

.auth-gate-dialog {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;

  margin: 0;
  padding: 0;

  border: none;

  background: transparent;
}

.auth-gate-dialog::backdrop {
  background: radial-gradient(circle at 50% 20%,
      rgba(30, 41, 59, 0.9),
      #05070c 70%);
}

.auth-gate-card {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 18px;

  width: 100%;
  height: 100%;

  padding: 24px;
}

.auth-gate-brand {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 4px;

  color: var(--text-primary);

  font-size: 15px;
  font-weight: 700;
}

.auth-gate-status {
  margin: -8px 0 4px;

  color: var(--text-muted);

  font-size: 12px;
}

.auth-gate-view {
  display: flex;

  flex-direction: column;

  align-items: center;

  width: min(360px, 100%);
}

.auth-gate-view h2 {
  margin: 0 0 6px;

  color: var(--text-primary);

  font-size: 21px;
  font-weight: 800;

  letter-spacing: -0.02em;
}

.auth-gate-subtitle {
  margin: 0 0 22px;

  max-width: 300px;

  text-align: center;

  color: var(--text-secondary);

  font-size: 12.5px;
  line-height: 1.5;
}

.auth-gate-form {
  display: flex;

  flex-direction: column;

  gap: 14px;

  width: 100%;
}

.auth-gate-form .dialog-actions {
  margin-top: 2px;
}

.auth-gate-submit {
  width: 100%;
}

.auth-gate-error {
  margin: 0;

  padding: 9px 12px;

  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 9px;

  background: rgba(248, 113, 113, 0.08);

  color: #fca5a5;

  font-size: 12px;
  line-height: 1.45;
}

.auth-gate-sent {
  margin: 14px 0 0;

  padding: 9px 12px;

  border: 1px solid rgba(132, 204, 22, 0.24);
  border-radius: 9px;

  background: rgba(132, 204, 22, 0.08);

  color: #bef264;

  font-size: 12px;
  line-height: 1.45;

  text-align: center;
}

.auth-gate-link {
  margin-top: 18px;

  padding: 4px;

  border: 0;

  background: transparent;

  color: var(--text-secondary);

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition: color var(--transition);
}

.auth-gate-link:hover {
  color: var(--text-primary);

  text-decoration: underline;
}

@media (max-width: 480px) {
  .auth-gate-view {
    width: 100%;
  }

  .auth-gate-view h2 {
    font-size: 19px;
  }
}